@charset "UTF-8";

/* 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;
	}
}
/* Arrows */
.arrow {
	background: transparent url(../img/arrows.png) no-repeat 0 0;
	width: 47px;
	height: 120px;
	display: inline-block;
	position: relative;
}

.arrow.arrow-light {
	background-image: url(../img/arrows-dark.png);
}

.arrow.vtl {
	background-position: 0 0;
	width: 47px;
	height: 96px;
}

.arrow.vtr {
	background-position: -101px 0;
	width: 47px;
	height: 96px;
}

.arrow.vbl {
	background-position: 0 -144px;
	width: 47px;
	height: 96px;
}

.arrow.vbr {
	background-position: -101px -144px;
	width: 47px;
	height: 96px;
}

.arrow.hlt {
	background-position: -209px 0;
	width: 120px;
	height: 47px;
}

.arrow.hlb {
	background-position: -209px -101px;
	width: 120px;
	height: 47px;
}

.arrow.hrt {
	background-position: -353px 0;
	width: 120px;
	height: 47px;
}

.arrow.hrb {
	background-position: -353px -101px;
	width: 120px;
	height: 47px;
}

/* Responsive */
@media (max-width: 575px) {
	.arrow {
		display: none;
	}
}
/* Background Scales Overlay */
.bg-color-scale-overlay {
	position: relative;
}

.bg-color-scale-overlay:before {
	content: "";
	display: block;
	background: #000;
	bottom: 0;
	height: 100%;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 1;
	opacity: 0;
}

.bg-color-scale-overlay .bg-color-scale-overlay-wrapper {
	position: relative;
	z-index: 2;
}

.bg-color-scale-overlay-1:before {
	opacity: 0.05 !important;
}

.bg-color-scale-overlay-2:before {
	opacity: 0.1 !important;
}

.bg-color-scale-overlay-3:before {
	opacity: 0.15 !important;
}

.bg-color-scale-overlay-4:before {
	opacity: 0.2 !important;
}

.bg-color-scale-overlay-5:before {
	opacity: 0.25 !important;
}

.bg-color-scale-overlay-6:before {
	opacity: 0.3 !important;
}

.bg-color-scale-overlay-7:before {
	opacity: 0.35 !important;
}

.bg-color-scale-overlay-8:before {
	opacity: 0.4 !important;
}

.bg-color-scale-overlay-9:before {
	opacity: 0.45 !important;
}

/* Background Transparent */
.background-transparent {
	background: transparent !important;
}

/* Background White and Black */
.bg-color-white {
	background: #FFF !important;
}

.bg-color-black {
	background: #000 !important;
}
