body { overflow-x: hidden; }

.js .anime {
	opacity: 0;
	transform: translate3D(-150px, 0px, 0px);
	transition: .3s all ease;
}

.js .anime-init {
	opacity: 1;
	transform: translate3D(0px, 0px, 0px);
	transition: .3s all ease;
}

.js .anime2 {
	opacity: 0;
	transform: translate3D(150px, 0px, 0px);
	transition: .3s all ease;
}

.js .anime-init2 {
	opacity: 1;
	transform: translate3D(0px, 0px, 0px);
	transition: .3s all ease;
}

.js .anime3 {
	opacity: 0;
	transform: translate3D(0px, 150px, 0px);
	transition: .3s all ease;
}

.js .anime-init3 {
	opacity: 1;
	transform: translate3D(0px, 0px, 0px);
	transition: .3s all ease;
}

.js .anime4 {
	opacity: 0;
	transform: translate3D(0px, -150px, 0px);
	transition: .3s all ease;
}

.js .anime-init4 {
	opacity: 1;
	transform: translate3D(0px, 0px, 0px);
	transition: .3s all ease;
}

.zoom-out {
  animation: zoom-out 1s ease-out;
}

.exit-intro {
	transform: translateY(-300%);
	transform: scale(2);
	transition: 1s all ease;
	opacity: 0;
	visibility: hidden;
}

.superZoom {
  animation: zoom-out 1s ease-out;
}

@keyframes zoom-out {
  0% {
    transform: scale(2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes superZoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(3);
  }
}

@keyframes scroll {
	0% {
		transform: translateY(0);
	}
	30% {
		transform: translateY(100px);
	}
}

svg #wheel {
	animation: scroll ease 1.5s infinite;
}


/* mobile : : : : : : : : : : : :  */

@media ( max-width: 768px ) {

	.js .anime {
		opacity: 0;
		transform: translate3D(-10px, 0px, 0px);
		transition: .3s all ease;
	}

	.js .anime-init {
		opacity: 1;
		transform: translate3D(0px, 0px, 0px);
		transition: .3s all ease;
	}

	.js .anime2 {
		opacity: 0;
		transform: translate3D(5px, 0px, 0px);
		transition: .3s all ease;
	}

	.js .anime-init2 {
		opacity: 1;
		transform: translate3D(0px, 0px, 0px);
		transition: .3s all ease;
	}

	.js .anime3 {
		opacity: 0;
		transform: translate3D(0px, 5px, 0px);
		transition: .3s all ease;
	}

	.js .anime-init3 {
		opacity: 1;
		transform: translate3D(0px, 0px, 0px);
		transition: .3s all ease;
	}

	.js .anime4 {
		opacity: 0;
		transform: translate3D(0px, -5px, 0px);
		transition: .3s all ease;
	}

	.js .anime-init4 {
		opacity: 1;
		transform: translate3D(0px, 0px, 0px);
		transition: .3s all ease;
	}

}

/**
 * ----------------------------------------
 * animation bounce-top
 * ----------------------------------------
 */

.bounce-top {
	-webkit-animation: bounce-top 3s infinite both;
	        animation: bounce-top 3s infinite both;
}
 
@-webkit-keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
            transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
            transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}
@keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
            transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
            transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}