/*FADE IN FADE OUT CODE START */
@keyframes fade-inout {
    0%{ opacity: 1;}
    100%{ opacity: 0.3;}
  }
  /* support for opera */
  @-o-keyframes fade-inout{
    0%{ opacity: 1;}
    100%{ opacity: 0.3;}
  }
  /* support for mozila */
  @-moz-keyframes fade-inout{
    0%{ opacity: 1;}
    100%{ opacity: 0.3;}
  }
  /* support for safari and chrome */
  @-webkit-keyframes fade-inout{
    0%{ opacity: 1;}
    100%{ opacity: 0.3;}
  }
  .fade-in-fade-out {
     -webkit-animation: fade-inout 5s infinite alternate;
     -moz-animation: fade-inout 5s infinite alternate;
     -o-animation: fade-inout 5s infinite alternate;
      animation: fade-inout 5s infinite alternate;
  }

  /* 
  <div class="fade-in-fade-out">
  </div>
  */

  /*FADE IN FADE OUT CODE END */
  /* -----------------------------  */




  /*FADE OUT CODE START */
@keyframes fade-out {
    0%{ opacity: 0.1;}
    100%{ opacity: 1;}
  }
  /* support for opera */
  @-o-keyframes fade-out{
    0%{ opacity: 0.1;}
    100%{ opacity: 1;}
  }
  /* support for mozila */
  @-moz-keyframes fade-out{
    0%{ opacity: 0.1;}
    100%{ opacity: 1;}
  }
  /* support for safari and chrome */
  @-webkit-keyframes fade-out{
    0%{ opacity: 0.1;}
    100%{ opacity: 1;}
  }
  .fade-out {
     -webkit-animation: fade-out 6s ;
     -moz-animation: fade-out 6s ;
     -o-animation: fade-out 6s;
      animation: fade-out 6s ;
  }

  /* 
  <div class="fade-out">
  </div>
  */

  /*FADE IN FADE OUT CODE END */
  /* -----------------------------  */



/*
  https://www.youtube.com/watch?v=oa4aMw_RjI4
*/


  /*FADE OUT CODE START */
  @keyframes move-right {
    from {left: 0px;}
    to {left: 8%;}
  }
  /* support for opera */
  @-o-keyframes move-right{
    from{ left: 0px;}
    to{ left: 8%;} 
  }
  /* support for mozila */
  @-moz-keyframes move-right{
    from{ left: 0px;}
    to{ left: 8%;} 
  }
  /* support for safari and chrome */
  @-webkit-keyframes move-right{
    from{ left: 0px;}
    to{ left: 8%;} 
  }
  .move-right {
     -webkit-animation: move-right 6s ;
     -moz-animation: move-right 6s ;
     -o-animation: move-right 6s;
      animation: move-right 6s ;
  }

  /* 
  <div class="fade-out">
  </div>
  */

  /*FADE IN FADE OUT CODE END */
  /* -----------------------------  */

.onesec {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}
.animate-onesec {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}
.animate-twosec {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}
.animate-threesec {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
}
.animate-foursec {
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
} 



@-webkit-keyframes fadeDown {
    from{
        opacity:0;
        -webkit-transform:translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    to{
        opacity:1;
        -webkit-transform:none;
        transform: none;
    }
}
@keyframes fadeDown {
  from{
      opacity:0;
      -webkit-transform:translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
  }
  to{
      opacity:1;
      -webkit-transform:none;
      transform: none;
  }
}

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

}





/*Shek Left and Right */
.shake-left-right { 
 transform: translatex(0px);
 animation: shake-left-right 6s ease-in-out infinite;
}

@keyframes shake-left-right {
 0% {
   
   transform: translatex(0px);
 }
 50% {
   
   transform: translatex(-20px);
 }
 100% {
   
   transform: translatex(0px);
 }
}


/*Shek Left and Right */
.shake-up-bottom { 
  transform: translatex(0px);
  animation: shake-up-bottom 6s ease-in-out infinite;
 }
 
 @keyframes shake-up-bottom {
  0% {
    
    transform: translatey(0px);
  }
  50% {
    
    transform: translatey(-20px);
  }
  100% {
    
    transform: translatey(0px);
  }
 }