/* Animations */

.appear-animation {

	opacity: 0;

}



.appear-animation-visible {

	opacity: 1;

}



/* Transitions */

.transition-2ms {

	-webkit-transition: all 0.2s ease-in-out;

	transition: all 0.2s ease-in-out;

}



/* Mask Up */

@-webkit-keyframes maskUp {

	from {

		-webkit-transform: translate(0, 100%);

		transform: translate(0, 100%);

	}



	to {

		-webkit-transform: translate(0, 0);

		transform: translate(0, 0);

	}

}



@keyframes maskUp {

	from {

		-webkit-transform: translate(0, 100%);

		transform: translate(0, 100%);

	}



	to {

		-webkit-transform: translate(0, 0);

		transform: translate(0, 0);

	}

}

/* Mask Right */

@-webkit-keyframes maskRight {

	from {

		-webkit-transform: translate(-100%, 0);

		transform: translate(-100%, 0);

	}



	to {

		-webkit-transform: translate(0, 0);

		transform: translate(0, 0);

	}

}



@keyframes maskRight {

	from {

		-webkit-transform: translate(-100%, 0);

		transform: translate(-100%, 0);

	}



	to {

		-webkit-transform: translate(0, 0);

		transform: translate(0, 0);

	}

}

/* Mask Down */

@-webkit-keyframes maskDown {

	from {

		-webkit-transform: translate(0, -100%);

		transform: translate(0, -100%);

	}



	to {

		-webkit-transform: translate(0, 0);

		transform: translate(0, 0);

	}

}



@keyframes maskDown {

	from {

		-webkit-transform: translate(0, -100%);

		transform: translate(0, -100%);

	}



	to {

		-webkit-transform: translate(0, 0);

		transform: translate(0, 0);

	}

}

/* Mask Left */

@-webkit-keyframes maskLeft {

	from {

		-webkit-transform: translate(100%, 0);

		transform: translate(100%, 0);

	}



	to {

		-webkit-transform: translate(0, 0);

		transform: translate(0, 0);

	}

}



@keyframes maskLeft {

	from {

		-webkit-transform: translate(100%, 0);

		transform: translate(100%, 0);

	}



	to {

		-webkit-transform: translate(0, 0);

		transform: translate(0, 0);

	}

}



.maskUp {

	-webkit-animation-name: maskUp;

	animation-name: maskUp;

}



.maskRight {

	-webkit-animation-name: maskRight;

	animation-name: maskRight;

}



.maskDown {

	-webkit-animation-name: maskDown;

	animation-name: maskDown;

}



.maskLeft {

	-webkit-animation-name: maskLeft;

	animation-name: maskLeft;

}



@-webkit-keyframes headerReveal {

	from {

		top: -150px;

	}



	to {

		top: 0;

	}

}



@keyframes headerReveal {

	from {

		top: -150px;

	}



	to {

		top: 0;

	}

}

/* Fade In Up Shorter */

@-webkit-keyframes fadeInUpShorter {

	from {

		opacity: 0;

		-webkit-transform: translate(0, 50px);

		transform: translate(0, 50px);

	}



	to {

		opacity: 1;

		-webkit-transform: none;

		transform: none;

	}

}



@keyframes fadeInUpShorter {

	from {

		opacity: 0;

		-webkit-transform: translate(0, 50px);

		transform: translate(0, 50px);

	}



	to {

		opacity: 1;

		-webkit-transform: none;

		transform: none;

	}

}



.fadeInUpShorter {

	-webkit-animation-name: fadeInUpShorter;

	animation-name: fadeInUpShorter;

}



/* Fade In Left Shorter */

@-webkit-keyframes fadeInLeftShorter {

	from {

		opacity: 0;

		-webkit-transform: translate(50px, 0);

		transform: translate(50px, 0);

	}



	to {

		opacity: 1;

		-webkit-transform: none;

		transform: none;

	}

}



@keyframes fadeInLeftShorter {

	from {

		opacity: 0;

		-webkit-transform: translate(50px, 0);

		transform: translate(50px, 0);

	}



	to {

		opacity: 1;

		-webkit-transform: none;

		transform: none;

	}

}



.fadeInLeftShorter {

	-webkit-animation-name: fadeInLeftShorter;

	animation-name: fadeInLeftShorter;

}



/* Fade In Right Shorter */

@-webkit-keyframes fadeInRightShorter {

	from {

		opacity: 0;

		-webkit-transform: translate(-50px, 0);

		transform: translate(-50px, 0);

	}



	to {

		opacity: 1;

		-webkit-transform: none;

		transform: none;

	}

}



@keyframes fadeInRightShorter {

	from {

		opacity: 0;

		-webkit-transform: translate(-50px, 0);

		transform: translate(-50px, 0);

	}



	to {

		opacity: 1;

		-webkit-transform: none;

		transform: none;

	}

}



.fadeInRightShorter {

	-webkit-animation-name: fadeInRightShorter;

	animation-name: fadeInRightShorter;

}



/* Fade In Down Shorter */

@-webkit-keyframes fadeInDownShorter {

	from {

		opacity: 0;

		-webkit-transform: translate(0, -50px);

		transform: translate(0, -50px);

	}



	to {

		opacity: 1;

		-webkit-transform: none;

		transform: none;

	}

}



@keyframes fadeInDownShorter {

	from {

		opacity: 0;

		-webkit-transform: translate(0, -50px);

		transform: translate(0, -50px);

	}



	to {

		opacity: 1;

		-webkit-transform: none;

		transform: none;

	}

}



.fadeInDownShorter {

	-webkit-animation-name: fadeInDownShorter;

	animation-name: fadeInDownShorter;

}



/* Expand In */

@-webkit-keyframes expandIn {

	from {

		opacity: 0;

		-webkit-transform: scale(0.8);

		transform: scale(0.8);

	}



	to {

		opacity: 1;

		-webkit-transform: scale(1);

		transform: scale(1);

	}

}



@keyframes expandIn {

	from {

		opacity: 0;

		-webkit-transform: scale(0.8);

		transform: scale(0.8);

	}



	to {

		opacity: 1;

		-webkit-transform: scale(1);

		transform: scale(1);

	}

}



.expandIn {

	-webkit-animation-name: expandIn;

	animation-name: expandIn;

}



/* Gradient Transition */

@-webkit-keyframes gradientTransition {

	0% {

		background-position: 0% 50%;

	}



	50% {

		background-position: 100% 50%;

	}



	100% {

		background-position: 0% 50%;

	}

}



@keyframes gradientTransition {

	0% {

		background-position: 0% 50%;

	}



	50% {

		background-position: 100% 50%;

	}



	100% {

		background-position: 0% 50%;

	}

}

/* Slider Scroll Button Animation */

@-webkit-keyframes sliderScrollButton {

	0% {

		opacity: 1;

		-webkit-transform: translate3d(-50%, 0, 0);

		transform: translate3d(-50%, 0, 0);

	}



	70% {

		opacity: 1;

		-webkit-transform: translate3d(-50%, 10px, 0);

		transform: translate3d(-50%, 10px, 0);

	}



	100% {

		opacity: 0;

		-webkit-transform: translate3d(-50%, 10px, 0);

		transform: translate3d(-50%, 10px, 0);

	}

}



@keyframes sliderScrollButton {

	0% {

		opacity: 1;

		-webkit-transform: translate3d(-50%, 0, 0);

		transform: translate3d(-50%, 0, 0);

	}



	70% {

		opacity: 1;

		-webkit-transform: translate3d(-50%, 10px, 0);

		transform: translate3d(-50%, 10px, 0);

	}



	100% {

		opacity: 0;

		-webkit-transform: translate3d(-50%, 10px, 0);

		transform: translate3d(-50%, 10px, 0);

	}

}

/* Arrow Left Right */

@-webkit-keyframes arrowLeftRight {

	0% {

		-webkit-transform: translate3d(-1px, 0, 0);

		transform: translate3d(-1px, 0, 0);

	}



	50% {

		-webkit-transform: translate3d(1px, 0, 0);

		transform: translate3d(1px, 0, 0);

	}



	100% {

		-webkit-transform: translate3d(-1px, 0, 0);

		transform: translate3d(-1px, 0, 0);

	}

}



@keyframes arrowLeftRight {

	0% {

		-webkit-transform: translate3d(-1px, 0, 0);

		transform: translate3d(-1px, 0, 0);

	}



	50% {

		-webkit-transform: translate3d(1px, 0, 0);

		transform: translate3d(1px, 0, 0);

	}



	100% {

		-webkit-transform: translate3d(-1px, 0, 0);

		transform: translate3d(-1px, 0, 0);

	}

}

/* Nav Item Arrow */

@-webkit-keyframes navItemArrow {

	0% {

		position: relative;

		left: -1px;

	}



	50% {

		position: relative;

		left: 3px;

	}



	100% {

		position: relative;

		left: -1px;

	}

}



@keyframes navItemArrow {

	0% {

		position: relative;

		left: -1px;

	}



	50% {

		position: relative;

		left: 3px;

	}



	100% {

		position: relative;

		left: -1px;

	}

}

/* Hover 3d Effect */

.hover-in {

	-webkit-transition: .1s ease-out !important;

	transition: .1s ease-out !important;

}



.hover-out {

	-webkit-transition: .1s ease-in !important;

	transition: .1s ease-in !important;

}



.hover-3d {

	-webkit-transition: none;

	transition: none;

}



/* Hotspot */

@-webkit-keyframes hotspot-pulsate {

	0% {

		-webkit-transform: scale(1);

		transform: scale(1);

		opacity: 0.8;

	}



	45% {

		-webkit-transform: scale(1.75);

		transform: scale(1.75);

		opacity: 0;

	}

}



@keyframes hotspot-pulsate {

	0% {

		-webkit-transform: scale(1);

		transform: scale(1);

		opacity: 0.8;

	}



	45% {

		-webkit-transform: scale(1.75);

		transform: scale(1.75);

		opacity: 0;

	}

}



@-webkit-keyframes stop-hotspot-pulsate {

	from {

		opacity: 0.4;

	}



	to {

		-webkit-transform: scale(2);

		transform: scale(2);

		opacity: 0;

	}

}



@keyframes stop-hotspot-pulsate {

	from {

		opacity: 0.4;

	}



	to {

		-webkit-transform: scale(2);

		transform: scale(2);

		opacity: 0;

	}

}