/* ******************************************************* Slide classes ******************************************************* */
body {
    overflow-x: hidden;
}

.delay-100 { animation-delay: .1s; }
.delay-200 { animation-delay: .2s; }
.delay-300 { animation-delay: .3s; }
.delay-400 { animation-delay: .4s; }
.delay-500 { animation-delay: .5s; }
.delay-600 { animation-delay: .6s; }
.delay-700 { animation-delay: .7s; }
.delay-800 { animation-delay: .8s; }
.delay-900 { animation-delay: .9s; }

.duration-100{ animation-duration: .1s; }
.duration-200{ animation-duration: .2s; }
.duration-300{ animation-duration: .3s; }
.duration-400{ animation-duration: .4s; }
.duration-500{ animation-duration: .5s; }
.duration-600{ animation-duration: .6s; }
.duration-700{ animation-duration: .7s; }
.duration-800{ animation-duration: .8s; }
.duration-900{ animation-duration: .9s; }

.animation-slide { animation-name : slide-right; animation-fill-mode: forwards; }

.animation-ease{ animation-timing-function: ease; }
.animation-ease-in{ animation-timing-function: ease-in; }
.animation-ease-out{ animation-timing-function: ease-out; }
.animation-ease-in-out{ animation-timing-function: ease-in-out; }

/* Slide entrances  */
.slide-left-right { left: -100%; }

@-webkit-keyframes slide-right { 100% { left: 0; } }
@keyframes slide-right { 100% { left: 0; } }

.slide-right-left { left: calc(250px + 100vw); animation-name : slide-right; animation-fill-mode: forwards; }

@-webkit-keyframes slide-left { 100% { left: 0; } }
@keyframes slide-left { 100% { left: 0; } }

/* FadeIn entrances  */
.fade-in {
    opacity:0;
    animation-name: fadeIn;
    /*-webkit-animation-name: fadeIn;*/
    /*-moz-animation-name: fadeIn;*/
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

/* Bouncing entrances  */
.bounce-in {
    transform: scale3d(0, 0, 0);
    animation-name: bounceIn;
    -webkit-animation-name: bounceIn;
    -moz-animation-name: bounceIn;
    animation-fill-mode: forwards;
}

@-webkit-keyframes bounceIn {
    from,
    20%,
    40%,
    60%,
    80%,
    to {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
  
    0% {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
      transform: scale3d(0.3, 0.3, 0.3);
    }
  
    20% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1);
      transform: scale3d(1.1, 1.1, 1.1);
    }
  
    40% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9);
      transform: scale3d(0.9, 0.9, 0.9);
    }
  
    60% {
      opacity: 1;
      -webkit-transform: scale3d(1.03, 1.03, 1.03);
      transform: scale3d(1.03, 1.03, 1.03);
    }
  
    80% {
      -webkit-transform: scale3d(0.97, 0.97, 0.97);
      transform: scale3d(0.97, 0.97, 0.97);
    }
  
    to {
      opacity: 1;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }
  @keyframes bounceIn {
    from,
    20%,
    40%,
    60%,
    80%,
    to {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
  
    0% {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
      transform: scale3d(0.3, 0.3, 0.3);
    }
  
    20% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1);
      transform: scale3d(1.1, 1.1, 1.1);
    }
  
    40% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9);
      transform: scale3d(0.9, 0.9, 0.9);
    }
  
    60% {
      opacity: 1;
      -webkit-transform: scale3d(1.03, 1.03, 1.03);
      transform: scale3d(1.03, 1.03, 1.03);
    }
  
    80% {
      -webkit-transform: scale3d(0.97, 0.97, 0.97);
      transform: scale3d(0.97, 0.97, 0.97);
    }
  
    to {
      opacity: 1;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }