@keyframes soars {/*up_and_down_anim SLOW*/
    0% {
        transform: translateY(12px);
    }  
    50% {
        transform: translateY(-12px);
    } 
    100% {
        transform: translateY(12px);
    }           
}

@keyframes soars_rev {/*up_and_down_anim SLOW*/
    0% {
        transform: translateY(-12px);
    }  
    50% {
        transform: translateY(12px);
    } 
    100% {
        transform: translateY(-12px);
    }           
}


@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
@keyframes fadeIn04 {
  to {
    opacity: 0.4;
  }
}

@keyframes logoAnimate {
    100% {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 0;
        opacity: 0;
    }
    50% {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);        
        opacity: 1;
        width: 500px;
    }
    0% {
        top: 9px;
        left: 16px;
        width: 4em;
        opacity: 0;
    }
}

.up_and_down_anim:hover{
  animation: upAndDown 1s ease-in-out infinite;
}

@keyframes upAndDown {
    0% {
        transform: translateY(4px);
    }  
    50% {
        transform: translateY(12px);
    } 
    100% {
        transform: translateY(4px);
    }         
   
}




.left_and_right_anim{
  animation: leftAndRight 30s ease-in-out infinite;
}

@keyframes leftAndRight {
    0% {
        transform: translateX(0);
    }  
    50% {
        transform: translateX(-70%);
    } 
    100% {
        transform: translateX(0);
    }         
   
}
.left_and_right_hover:hover{
  animation: leftAndRightHover 2s ease-in-out infinite;
}

@keyframes leftAndRightHover {
    0% {
        transform: translateX(0);
    }  
    50% {
        transform: translateX(-10px);
    } 
    100% {
        transform: translateX(0);
    }         
   
}

.pulse:hover, 
.pulse:focus {
  animation: pulse 1s;
  box-shadow: 0 0 0 2em transparent;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 2em #9ec6fc; }
}


.wibro:hover{
  animation: wibro 1s ease-in-out infinite;

}

@keyframes wibro {
    0% {
        transform: translateX(-12px);
        /*transform: translateY(4px);*/
    }  
    20% {
        transform: translateY(12px);
        /*transform: translateY(12px);*/
    } 
    60% {
        transform: translateY(-12px);
        /*transform: translateY(12px);*/
    } 
    80% {
        transform: translateX(12px);
        /*transform: translateY(4px);*/
    }   
    100% {
        transform: translateX(-12px);
        /*transform: translateY(4px);*/
    }       
   
}


.rocking:hover {
  animation: rocking 10s ease-in-out infinite;
}

@keyframes rocking {
    0%, 50%, 100% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    25% {
        transform: rotate(-4deg);
        -webkit-transform: rotate(-4deg);
    }
    75% {
        transform: rotate(4deg);
        -webkit-transform: rotate(4deg);
    }
}