@charset "utf-8";

.fadein {
  opacity: 0;
  transform : translate(0, 50px);
  transition : all 800ms;
}

.fadein.scrollin {
    opacity: 1;
    transform: translate(0, 0);
}

.fade {
  opacity: 0;
  transition: all 1.5s ease;
}

.fade.show {
  opacity: 1;
  transform: none;
}

.fade_left {
  transform: translate(-100px, 0);
}

.fade_right {
  transform: translate(100px, 0);
}

.fade_up {
  transform: translate(0, 100px);
}

.fade_down {
  transform: translate(0, -100px);
}

.fade_cubic {
  -webkit-transition-delay: .1s;
  transition-delay: .1s;
}

.fade_scaleUp {
  transform: scale(.5);
}

.fade_scaleDown {
  transform: scale(1.5);
}

.fade_rotateL {
  transform: rotate(180deg);
}

.fade_rotateR {
  transform: rotate(-180deg);
}


@-webkit-keyframes Zoom {
  0% {
    opacity:0;
    transform: scale(0.0);
  }
  40% {
    opacity:.3;
    transform: scale(0.8);
  }
  80% {
    opacity:1;
    transform: scale(1.1);
  }
  100% {
    opacity:1;
    transform: scale(1.0);
  }
}

@keyframes Zoom {
  0% {
    opacity:0;
    transform: scale(0.0);
  }
  40% {
    opacity:.3;
    transform: scale(0.8);
  }
  80% {
    opacity:1;
    transform: scale(1.1);
  }
  100% {
    opacity:1;
    transform: scale(1.0);
  }
}

.fade.zoom {
  -webkit-animation-name: Zoom;
  animation-name: Zoom;
  -webkit-animation-duration: .8s;
  animation-duration: .8s;
}

.zoom {
  position: relative;
  overflow: hidden;
}

.zoom:before,
.zoom:after{
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.zoom:before {
  background-color: #fff;
  -webkit-transform-origin: left;
  -ms-transform-origin: left;
  transform-origin: left;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: -webkit-transform 0.4s 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  transition: -webkit-transform 0.4s 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  transition: transform 0.4s 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  transition: transform 0.4s 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53), -webkit-transform 0.4s 0.1s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  z-index: 10;
}

.zoom:after {
  background-color: rgba(245,191,30,0.8);
  -webkit-transform-origin: left;
  -ms-transform-origin: left;
  transform-origin: left;
  -webkit-transform: scaleX(0) translateX(0);
  -ms-transform: scaleX(0) translateX(0);
  transform: scaleX(0) translateX(0);
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  transition: -webkit-transform 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  transition: transform 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  transition: transform 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53), -webkit-transform 0.6s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  z-index: 5;
}

.zoom.show:before {
  -webkit-transform: translateX(101%);
  -ms-transform: translateX(101%);
  transform: translateX(101%);
}

.zoom.show:after {
  -webkit-transform: scaleX(1) translateX(101%);
  -ms-transform: scaleX(1) translateX(101%);
  transform: scaleX(1) translateX(101%);
}