/*
==============================================
floating
==============================================
*/

.floating{
  animation-name: floating;
  -webkit-animation-name: floating;

  animation-duration: 1.5s; 
  -webkit-animation-duration: 1.5s;

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes floating {
  0% {
    transform: translateY(0%);  
  }
  50% {
    transform: translateY(8%);  
  } 
  100% {
    transform: translateY(0%);
  }     
}

@-webkit-keyframes floating {
  0% {
    -webkit-transform: translateY(0%);  
  }
  50% {
    -webkit-transform: translateY(8%);  
  } 
  100% {
    -webkit-transform: translateY(0%);
  }     
}


/*
==============================================
bubbleFloat
==============================================
*/

.bubbleFloat{
  animation-name: bubbleFloat;
  -webkit-animation-name: bubbleFloat;

  animation-duration: 3s; 
  -webkit-animation-duration: 3s;

  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes bubbleFloat {
  0% {
    transform: translateY(0%);  
  }
  50% {
    transform: translateY(3%);  
  } 
  100% {
    transform: translateY(0%);
  }     
}

@-webkit-keyframes bubbleFloat {
  0% {
    -webkit-transform: translateY(0%);  
  }
  50% {
    -webkit-transform: translateY(3%);  
  } 
  100% {
    -webkit-transform: translateY(0%);
  }     
}


/*
==============================================
slideDown
==============================================
*/


.slideDown{
  animation-name: slideDown;
  -webkit-animation-name: slideDown;  

  animation-duration: 1s; 
  -webkit-animation-duration: 1s;

  animation-timing-function: ease;  
  -webkit-animation-timing-function: ease;  

  visibility: visible !important;           
}

@keyframes slideDown {
  0% {
    transform: translateY(-100%);
  }
  50%{
    transform: translateY(8%);
  }
  65%{
    transform: translateY(-4%);
  }
  80%{
    transform: translateY(4%);
  }
  95%{
    transform: translateY(-2%);
  }     
  100% {
    transform: translateY(0%);
  }   
}

@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: translateY(-100%);
  }
  50%{
    -webkit-transform: translateY(8%);
  }
  65%{
    -webkit-transform: translateY(-4%);
  }
  80%{
    -webkit-transform: translateY(4%);
  }
  95%{
    -webkit-transform: translateY(-2%);
  }     
  100% {
    -webkit-transform: translateY(0%);
  } 
}