.animated {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.animated-5s{
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}






@keyframes bounceInUp {
  0%, 60%, 75%, 90%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }

  75% {
    transform: translate3d(0, 10px, 0);
  }

  90% {
    transform: translate3d(0, -5px, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

.bounceInUp {
  -ms-animation-name: bounceInUp;
  -o-animation-name: bounceInUp;
  -moz-animation-name: bounceInUp;
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}



@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translate3d(-5%, 0, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.fadeInLeft {
  -ms-animation-name: fadeInLeft;
  -o-animation-name: fadeInLeft;
  -moz-animation-name: fadeInLeft;
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}









@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(5%, 0, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  -o-animation-name: fadeInRight;
  -ms-animation-name: fadeInRight;
  -moz-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

/*Animation for nav elements */

.navbar .nav .active{
  position: relative;
}

.navbar .nav .active a::before,
.navbar .nav .active a::after {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(85,85,85,.7);
  content: '';
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
  -webkit-transform: scale(0.85);
  -moz-transform: scale(0.85);
  transform: scale(0.85);
}


.navbar .nav .active a::after {
  opacity: 0;
  -webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s;
  -moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s;
  transition: top 0.3s, opacity 0.3s, transform 0.3s;
}


.navbar .nav .active a:hover::before,
.navbar .nav .active a:hover::after,
.navbar .nav .active a:focus::before,
.navbar .nav .active a:focus::after {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
}

.navbar .nav .active a:hover::after,
.navbar .nav .active a:focus::after {
  top: 0%;
  opacity: 1;
}

/*end of animation for nav elements */





















/*prefix starts from here*/

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-5%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
  }
}

@-moz-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-5%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
  }
}

@-o-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-5%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
  }
}

@-ms-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-5%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
  }
}


@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(5%, 0, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}


@-moz-keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(5%, 0, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@-o-keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(5%, 0, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@-ms-keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(5%, 0, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}




@-webkit-keyframes bounceInUp {
  0%, 60%, 75%, 90%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }

  75% {
    transform: translate3d(0, 10px, 0);
  }

  90% {
    transform: translate3d(0, -5px, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@-moz-keyframes bounceInUp {
  0%, 60%, 75%, 90%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }

  75% {
    transform: translate3d(0, 10px, 0);
  }

  90% {
    transform: translate3d(0, -5px, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@-o-keyframes bounceInUp {
  0%, 60%, 75%, 90%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }

  75% {
    transform: translate3d(0, 10px, 0);
  }

  90% {
    transform: translate3d(0, -5px, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@-ms-keyframes bounceInUp {
  0%, 60%, 75%, 90%, 100% {
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }

  75% {
    transform: translate3d(0, 10px, 0);
  }

  90% {
    transform: translate3d(0, -5px, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

/*prefix ends here*/