/* Scroll */

.js-scroll {
  opacity: 0;
  transition: opacity 500ms;
}

.js-scroll.scrolled {
  opacity: 1;
}
.scrolled.fade-in-up-scroll {
  animation: fade-in-up 1s ease-in-out both;
  -webkit-animation: fade-in-up 1s ease-in-out both;
  -moz-animation: fade-in-up 1s ease-in-out both;
  -o-animation: fade-in-up 1s ease-in-out both;
  -ms-animation: fade-in-up 1s ease-in-out both;
}
.scrolled.fade-in-down-scroll {
  animation: fade-in-bottom 1s ease-in-out both;
  -webkit-animation: fade-in-bottom 1s ease-in-out both;
  -moz-animation: fade-in-bottom 1s ease-in-out both;
  -o-animation: fade-in-bottom 1s ease-in-out both;
  -ms-animation: fade-in-bottom 1s ease-in-out both;
}
.scrolled.slide-left-scroll {
  animation: slide-in-left 1s ease-in-out both;
  -webkit-animation: slide-in-left 1s ease-in-out both;
  -moz-animation: slide-in-left 1s ease-in-out both;
  -o-animation: slide-in-left 1s ease-in-out both;
  -ms-animation: fadslidee-in-left 1s ease-in-out both;
}

.scrolled.slide-right-scroll {
  animation: slide-in-right 1s ease-in-out both;
  -webkit-animation: slide-in-right 1s ease-in-out both;
  -moz-animation: slide-in-right 1s ease-in-out both;
  -o-animation: slide-in-right 1s ease-in-out both;
  -ms-animation: slide-in-right 1s ease-in-out both;
}

.scrolled.ZoomIn-Animation-scroll {
  animation: ZoomIn-Animation 1s forwards;
  -webkit-animation: ZoomIn-Animation 1s forwards;
  -moz-animation: ZoomIn-Animation 1s forwards;
  -o-animation: ZoomIn-Animation 1s forwards;
  -ms-animation: ZoomIn-Animation 1s forwards;
}

.FadeUpDurationOne {
  animation-duration: 0.9s;
  animation-delay: 0.9s;
}
.FadeBottomDurationOne {
  animation-duration: 1s;
  animation-delay: 1s;
}
.FadeUpDurationTwo {
  animation-duration: 1s;
  animation-delay: 1.4s;
}
.FadeBottomDurationTwo {
  animation-duration: 1s;
  animation-delay: 2s;
}
.FadeUpDurationThree {
  animation-duration: 1s;
  animation-delay: 2.4s;
}
.FadeBottomDurationFour {
  animation-duration: 1s;
  animation-delay: 3s;
}

/* fade in Up */

.fade-in-up {
  animation: fade-in-up 2s ease-in-out both;
  -webkit-animation: fade-in-up 2s linear both;
  -moz-animation: fade-in-up 2s linear both;
  -o-animation: fade-in-up 2s linear both;
  -ms-animation: fade-in-up 2s linear both;
}

@keyframes fade-in-up {
  0% {
    -webkit-transform: translateY(-100px);
    transform: translateY(-100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
@-moz-keyframes fade-in-up {
  0% {
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@-webkit-keyframes fade-in-up {
  0% {
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@-o-keyframes fade-in-up {
  0% {
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@-ms-keyframes fade-in-up {
  0% {
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

/* fade in bottom */

.fade-in-bottom {
  animation: fade-in-bottom 2s linear both;
  -webkit-animation: fade-in-bottom 2s linear both;
  -moz-animation: fade-in-bottom 2s linear both;
  -o-animation: fade-in-bottom 2s linear both;
  -ms-animation: fade-in-bottom 2s linear both;
}

@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@-moz-keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@-webkit-keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@-o-keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@-ms-keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

/* Slide right */

.slide-right {
  animation: slide-in-right 2s ease-in-out both;
  -webkit-animation: slide-in-right 2s ease-in-out both;
  -moz-animation: slide-in-right 2s ease-in-out both;
  -o-animation: slide-in-right 2s ease-in-out both;
  -ms-animation: slide-in-right 2s ease-in-out both;
}

@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@-moz-keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@-webkit-keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@-o-keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@-ms-keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

/* Slide left */

.slide-left {
  animation: slide-in-left 2s ease-in-out both;
  -webkit-animation: slide-in-left 2s ease-in-out both;
  -moz-animation: slide-in-left 2s ease-in-out both;
  -o-animation: slide-in-left 2s ease-in-out both;
  -ms-animation: slide-in-left 2s ease-in-out both;
}

@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@-moz-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@-o-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@-ms-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(100px);
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

/* slide in */

@keyframes slidein {
  from {
    margin-left: 10%;
    width: 100%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

@-moz-keyframes slidein {
  from {
    margin-left: 10%;
    width: 100%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

@-webkit-keyframes slidein {
  from {
    margin-left: 10%;
    width: 100%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

@-o-keyframes slidein {
  from {
    margin-left: 10%;
    width: 100%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

@-ms-keyframes slidein {
  from {
    margin-left: 10%;
    width: 100%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

/* zoom-in-zoom-out */

@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
@-moz-keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}

@-webkit-keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}

@-o-keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}

@-ms-keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}

/* fade-in-fade-out */

@keyframes fade-in-fade-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
@-moz-keyframes fade-in-fade-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}

@-webkit-keyframes fade-in-fade-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}

@-o-keyframes fade-in-fade-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}

@-ms-keyframes fade-in-fade-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}

/* Zoom-In */
.ZoomIn-Animation {
  animation: ZoomIn-Animation 2s forwards;
  -webkit-animation: ZoomIn-Animation 2s forwards;
  -moz-animation: ZoomIn-Animation 2s forwards;
  -o-animation: ZoomIn-Animation 2s forwards;
  -ms-animation: ZoomIn-Animation 2s forwards;
}

@keyframes ZoomIn-Animation {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

@-moz-keyframes ZoomIn-Animation {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

@-webkit-keyframes ZoomIn-Animation {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

@-o-keyframes ZoomIn-Animation {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

@-ms-keyframes ZoomIn-Animation {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

/* AnimationName */

@keyframes AnimationName {
  0% {
    background-position: 27% 0%;
  }
  50% {
    background-position: 74% 100%;
  }
  100% {
    background-position: 27% 0%;
  }
}

@-moz-keyframes AnimationName {
  0% {
    background-position: 27% 0%;
  }
  50% {
    background-position: 74% 100%;
  }
  100% {
    background-position: 27% 0%;
  }
}

@-webkit-keyframes AnimationName {
  0% {
    background-position: 27% 0%;
  }
  50% {
    background-position: 74% 100%;
  }
  100% {
    background-position: 27% 0%;
  }
}

@-o-keyframes AnimationName {
  0% {
    background-position: 27% 0%;
  }
  50% {
    background-position: 74% 100%;
  }
  100% {
    background-position: 27% 0%;
  }
}

@-ms-keyframes AnimationName {
  0% {
    background-position: 27% 0%;
  }
  50% {
    background-position: 74% 100%;
  }
  100% {
    background-position: 27% 0%;
  }
}