/* CSS ANIMATION */


/* ICON ANIMATION */

.location_pin {
	width: 18px;
	height: 18px;
	border-radius: 50% 50% 50% 0;
	background: #ad9664;
	position: absolute;
	transform: rotate(-45deg);
	/* left: 50%; */
	top: 40%;
	margin: -20px 0 0 -20px;
	animation-name: bounce;
	animation-fill-mode: both;
	animation-duration: 1s;
	animation-delay: 7.7s;
}

.location_pin:after {
	content: '';
	width: 8px;
	height: 8px;
	margin: 5px 0 0 5px;
	background: #e4d6c5;
	position: absolute;
	border-radius: 50%;
}

.location_pulse {
	background: #999999;
	border-radius: 50%;
	height: 12px;
	width: 12px;
	position: absolute;
	/* left: 50%; */
	top: 40%;
	margin: 3px 0px 0px -17px;
	transform: rotateX(55deg);
	z-index: -2;
}

.location_pulse:after {
	content: "";
	border-radius: 50%;
	height: 40px;
	width: 40px;
	position: absolute;
	margin: -14px 0 0 -14px;
	opacity: 0;
	filter: alpha(opacity=0);
	box-shadow: 0 0 1px 2px #878787;
	animation-delay: 1.1s;
	animation: pulsate 1s ease-out;
	animation-iteration-count: 20;
	animation-delay: 7.8s;
}

@keyframes pulsate {
	0% {
		transform: scale(0.1, 0.1);
		opacity: 0;
		filter: alpha(opacity=0);
	}
	50% {
		opacity: 1;
		filter: none;
	}
	100% {
		transform: scale(1.2, 1.2);
		opacity: 0;
		filter: alpha(opacity=0);
	}
}

@keyframes bounce {
	0% {
		opacity: 0;
		filter: alpha(opacity=0);
		transform: translateY(-2000px) rotate(-45deg);
	}
	60% {
		opacity: 1;
		filter: none;
		transform: translateY(30px) rotate(-45deg);
	}
	80% {
		transform: translateY(-10px) rotate(-45deg);
	}
	100% {
		transform: translateY(0) rotate(-45deg);
	}
}


/* TEXT ANIMATION */

svg.promo_intro .text-stroke-part1, svg.promo_intro .text-stroke-part1-2 {
	--promo_delay: 0s;
}

svg.promo_intro .text-stroke-part2, svg.promo_intro .text-stroke-part2-2 {
	--promo_delay: 3.8s;
}

svg.promo_intro .text-stroke-part3, svg.promo_intro .text-stroke-part3-2 {
	--promo_delay: 8.0s;
}

svg.promo_intro {
	position: absolute;
	top: -32px;
	left: -12px;
	width: 250px;
}

svg.promo_intro.promo_part3 {
	width: 300px;
}

svg.promo_intro .text-stroke-part1 {
	fill: none;
	stroke: #fff;
	stroke-width: 4px;
	stroke-dashoffset: -900;
	stroke-dasharray: 900;
	stroke-linecap: butt;
	stroke-linejoin: round;
	animation: text_dash 1.3s ease-out forwards;
	animation-delay: var(--promo_delay);
}

svg.promo_intro .text-stroke-part2 {
	fill: none;
	stroke: #fff;
	stroke-width: 5px;
	stroke-dashoffset: -900;
	stroke-dasharray: 900;
	stroke-linecap: butt;
	stroke-linejoin: round;
	animation: text_dash 1.3s ease-out forwards;
	animation-delay: var(--promo_delay);
}

svg.promo_intro .text-stroke-part3 {
	fill: none;
	stroke: #fff;
	stroke-width: 4px;
	stroke-dashoffset: -900;
	stroke-dasharray: 900;
	stroke-linecap: butt;
	stroke-linejoin: round;
	animation: text_dash 1.3s ease-out forwards;
	animation-delay: var(--promo_delay);
}

svg.promo_intro .text-stroke-part1:nth-child(2) {
	animation-delay: calc(var(--promo_delay) + 0.2s);
}

svg.promo_intro .text-stroke-part1-2 {
	stroke: #000;
	animation-delay: calc(var(--promo_delay) + 0.5s);
}

svg.promo_intro .text-stroke-part2:nth-child(2) {
	animation-delay: calc(var(--promo_delay) + 0.2s);
}

svg.promo_intro .text-stroke-part2-2 {
	stroke: #000;
	animation-delay: calc(var(--promo_delay) + 0.5s);
}

svg.promo_intro .text-stroke-part3:nth-child(2) {
	animation-delay: calc(var(--promo_delay) + 0.2s);
}

svg.promo_intro .text-stroke-part3-2 {
	stroke: #000;
	animation-delay: calc(var(--promo_delay) + 0.5s);
}

@keyframes text_dash {
	0% {
		stroke-dashoffset: -200;
	}
	100% {
		stroke-dashoffset: 0;
	}
}


/* REVEAL TEXT BLOCKS */

@keyframes fadein_blur {
	0% {
		/* filter: opacity(0); */
		opacity: 0;
	}
	30% {
		/* opacity: 0.5; */
		filter: grayscale(1) blur(5px);
	}
	100% {
	`	/* filter: grayscale(0) blur(0) opacity(1); */
		filter: grayscale(0) blur(0);
		opacity: 1;
	}
}

.block_text-item-promo1 { 
	animation: fadein_blur 800ms ease 1.4s backwards;
}

.block_text-item-promo2 { 
	animation: fadein_blur 800ms ease 5.4s backwards;
}

.block_text-item-promo3 { 
	animation: fadein_blur 800ms ease 9.4s backwards;
}

/* IMAGE REVEAL ANIMATION */

.image_container1 {
	position: relative;
	bottom: 20px;
	transition: opacity 1s ease-in-out;
	width: 450px;
}

.image_container2 {
	position: relative;
	bottom: 100px;
	transition: opacity 1s ease-in-out;
	width: 300px;
}

.image_container3 {
	position: absolute;
	right: 0;
	bottom: 130px;
	transition: opacity 1s ease-in-out;
	width: 400px;
}

.image1 > .image-block {
	--segment: 5px;
	position: absolute;
	height: calc(16 * var(--segment) + 2px);
	width: calc(16 * var(--segment) + 2px);
	background-image: url(../images/mnf_watch1.png);
	background-size: 430px auto;
	background-repeat: no-repeat;
	transform: rotate(90deg);
	opacity: 0;
	animation: animate-block 3s ease forwards 0.5;
	transform-origin: 0 50%;
	--part_delay: 0s;
}

.image2 > .image-block {
	--segment: 5px;
	position: absolute;
	height: calc(16 * var(--segment) + 2px);
	width: calc(16 * var(--segment) + 2px);
	background-image: url(../images/mnf_watch2.png);
	background-size: 290px auto;
	background-repeat: no-repeat;
	transform: rotate(90deg);
	opacity: 0;
	animation: animate-block 3s ease forwards 0.5;
	transform-origin: 0 50%;
	--part_delay: 3.7s;
}

.image3 > .image-block {
	--segment: 5px;
	position: absolute;
	height: calc(16 * var(--segment) + 2px);
	width: calc(16 * var(--segment) + 2px);
	background-image: url(../images/mnf_watch3.png);
	background-size: 400px auto;
	background-repeat: no-repeat;
	transform: rotate(90deg);
	opacity: 0;
	animation: animate-block 3s ease forwards 0.5;
	transform-origin: 0 50%;
	--part_delay: 8.0s;
}

.reveal-image > .image-block:nth-of-type(30) {
	top: calc(5 * 16 * var(--segment));
	left: calc((5 - 1) * 16 * var(--segment));
	background-position: calc((1 - 5) * 16 * var(--segment) - 1px) calc(-5 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 1s);
}

.reveal-image > .image-block:nth-of-type(29) {
	top: calc(5 * 16 * var(--segment));
	left: calc((4 - 1) * 16 * var(--segment));
	background-position: calc((1 - 4) * 16 * var(--segment) - 1px) calc(-5 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 0.9s);
}

.reveal-image > .image-block:nth-of-type(28) {
	top: calc(5 * 16 * var(--segment));
	left: calc((3 - 1) * 16 * var(--segment));
	background-position: calc((1 - 3) * 16 * var(--segment) - 1px) calc(-5 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 0.8s);
}

.reveal-image > .image-block:nth-of-type(27) {
	top: calc(5 * 16 * var(--segment));
	left: calc((2 - 1) * 16 * var(--segment));
	background-position: calc((1 - 2) * 16 * var(--segment) - 1px) calc(-5 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 0.7s);
}

.reveal-image > .image-block:nth-of-type(26) {
	top: calc(5 * 16 * var(--segment));
	left: calc((1 - 1) * 16 * var(--segment));
	background-position: calc((1 - 1) * 16 * var(--segment) - 1px) calc(-5 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 0.6s);
}

.reveal-image > .image-block:nth-of-type(25) {
	top: calc(5 * 16 * var(--segment));
	left: calc((0 - 1) * 16 * var(--segment));
	background-position: calc((1 - 0) * 16 * var(--segment) - 1px) calc(-5 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 0.5s);
}

.reveal-image > .image-block:nth-of-type(25) {
	top: calc(4 * 16 * var(--segment));
	left: calc((5 - 1) * 16 * var(--segment));
	background-position: calc((1 - 5) * 16 * var(--segment) - 1px) calc(-4 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 0.9s);
}

.reveal-image > .image-block:nth-of-type(24) {
	top: calc(4 * 16 * var(--segment));
	left: calc((4 - 1) * 16 * var(--segment));
	background-position: calc((1 - 4) * 16 * var(--segment) - 1px) calc(-4 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 0.8s);
}

.reveal-image > .image-block:nth-of-type(23) {
	top: calc(4 * 16 * var(--segment));
	left: calc((3 - 1) * 16 * var(--segment));
	background-position: calc((1 - 3) * 16 * var(--segment) - 1px) calc(-4 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 0.7s);
}

.reveal-image > .image-block:nth-of-type(22) {
	top: calc(4 * 16 * var(--segment));
	left: calc((2 - 1) * 16 * var(--segment));
	background-position: calc((1 - 2) * 16 * var(--segment) - 1px) calc(-4 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 0.6s);
}

.reveal-image > .image-block:nth-of-type(21) {
	top: calc(4 * 16 * var(--segment));
	left: calc((1 - 1) * 16 * var(--segment));
	background-position: calc((1 - 1) * 16 * var(--segment) - 1px) calc(-4 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 0.5s);
}

.reveal-image > .image-block:nth-of-type(20) {
	top: calc(4 * 16 * var(--segment));
	left: calc((0 - 1) * 16 * var(--segment));
	background-position: calc((1 - 0) * 16 * var(--segment) - 1px) calc(-4 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 0.4s);
}

.reveal-image > .image-block:nth-of-type(20) {
	top: calc(3 * 16 * var(--segment));
	left: calc((5 - 1) * 16 * var(--segment));
	background-position: calc((1 - 5) * 16 * var(--segment) - 1px) calc(-3 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 0.8s);
}

.reveal-image > .image-block:nth-of-type(19) {
	top: calc(3 * 16 * var(--segment));
	left: calc((4 - 1) * 16 * var(--segment));
	background-position: calc((1 - 4) * 16 * var(--segment) - 1px) calc(-3 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 0.7s);
}

.reveal-image > .image-block:nth-of-type(18) {
	top: calc(3 * 16 * var(--segment));
	left: calc((3 - 1) * 16 * var(--segment));
	background-position: calc((1 - 3) * 16 * var(--segment) - 1px) calc(-3 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 0.6s);
}

.reveal-image > .image-block:nth-of-type(17) {
	top: calc(3 * 16 * var(--segment));
	left: calc((2 - 1) * 16 * var(--segment));
	background-position: calc((1 - 2) * 16 * var(--segment) - 1px) calc(-3 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 0.5s);
}

.reveal-image > .image-block:nth-of-type(16) {
	top: calc(3 * 16 * var(--segment));
	left: calc((1 - 1) * 16 * var(--segment));
	background-position: calc((1 - 1) * 16 * var(--segment) - 1px) calc(-3 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 0.4s);
}

.reveal-image > .image-block:nth-of-type(15) {
	top: calc(3 * 16 * var(--segment));
	left: calc((0 - 1) * 16 * var(--segment));
	background-position: calc((1 - 0) * 16 * var(--segment) - 1px) calc(-3 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 0.3s);
}

.reveal-image > .image-block:nth-of-type(15) {
	top: calc(2 * 16 * var(--segment));
	left: calc((5 - 1) * 16 * var(--segment));
	background-position: calc((1 - 5) * 16 * var(--segment) - 1px) calc(-2 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 0.7s);
}

.reveal-image > .image-block:nth-of-type(14) {
	top: calc(2 * 16 * var(--segment));
	left: calc((4 - 1) * 16 * var(--segment));
	background-position: calc((1 - 4) * 16 * var(--segment) - 1px) calc(-2 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 0.6s);
}

.reveal-image > .image-block:nth-of-type(13) {
	top: calc(2 * 16 * var(--segment));
	left: calc((3 - 1) * 16 * var(--segment));
	background-position: calc((1 - 3) * 16 * var(--segment) - 1px) calc(-2 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 0.5s);
}

.reveal-image > .image-block:nth-of-type(12) {
	top: calc(2 * 16 * var(--segment));
	left: calc((2 - 1) * 16 * var(--segment));
	background-position: calc((1 - 2) * 16 * var(--segment) - 1px) calc(-2 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 0.4s);
}

.reveal-image > .image-block:nth-of-type(11) {
	top: calc(2 * 16 * var(--segment));
	left: calc((1 - 1) * 16 * var(--segment));
	background-position: calc((1 - 1) * 16 * var(--segment) - 1px) calc(-2 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 0.3s);
}

.reveal-image > .image-block:nth-of-type(10) {
	top: calc(2 * 16 * var(--segment));
	left: calc((0 - 1) * 16 * var(--segment));
	background-position: calc((1 - 0) * 16 * var(--segment) - 1px) calc(-2 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 0.2s);
}

.reveal-image > .image-block:nth-of-type(10) {
	top: calc(1 * 16 * var(--segment));
	left: calc((5 - 1) * 16 * var(--segment));
	background-position: calc((1 - 5) * 16 * var(--segment) - 1px) calc(-1 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 0.6s);
}

.reveal-image > .image-block:nth-of-type(9) {
	top: calc(1 * 16 * var(--segment));
	left: calc((4 - 1) * 16 * var(--segment));
	background-position: calc((1 - 4) * 16 * var(--segment) - 1px) calc(-1 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 0.5s);
}

.reveal-image > .image-block:nth-of-type(8) {
	top: calc(1 * 16 * var(--segment));
	left: calc((3 - 1) * 16 * var(--segment));
	background-position: calc((1 - 3) * 16 * var(--segment) - 1px) calc(-1 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 0.4s);
}

.reveal-image > .image-block:nth-of-type(7) {
	top: calc(1 * 16 * var(--segment));
	left: calc((2 - 1) * 16 * var(--segment));
	background-position: calc((1 - 2) * 16 * var(--segment) - 1px) calc(-1 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 0.3s);
}

.reveal-image > .image-block:nth-of-type(6) {
	top: calc(1 * 16 * var(--segment));
	left: calc((1 - 1) * 16 * var(--segment));
	background-position: calc((1 - 1) * 16 * var(--segment) - 1px) calc(-1 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 0.2s);
}

.reveal-image > .image-block:nth-of-type(5) {
	top: calc(1 * 16 * var(--segment));
	left: calc((0 - 1) * 16 * var(--segment));
	background-position: calc((1 - 0) * 16 * var(--segment) - 1px) calc(-1 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 0.1s);
}

.reveal-image > .image-block:nth-of-type(5) {
	top: calc(0 * 16 * var(--segment));
	left: calc((5 - 1) * 16 * var(--segment));
	background-position: calc((1 - 5) * 16 * var(--segment) - 1px) calc(-0 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 0.5s);
}

.reveal-image > .image-block:nth-of-type(4) {
	top: calc(0 * 16 * var(--segment));
	left: calc((4 - 1) * 16 * var(--segment));
	background-position: calc((1 - 4) * 16 * var(--segment) - 1px) calc(-0 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 0.4s);
}

.reveal-image > .image-block:nth-of-type(3) {
	top: calc(0 * 16 * var(--segment));
	left: calc((3 - 1) * 16 * var(--segment));
	background-position: calc((1 - 3) * 16 * var(--segment) - 1px) calc(-0 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 0.3s);
}

.reveal-image > .image-block:nth-of-type(2) {
	top: calc(0 * 16 * var(--segment));
	left: calc((2 - 1) * 16 * var(--segment));
	background-position: calc((1 - 2) * 16 * var(--segment) - 1px) calc(-0 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 0.2s);
}

.reveal-image > .image-block:nth-of-type(1) {
	top: calc(0 * 16 * var(--segment));
	left: calc((1 - 1) * 16 * var(--segment));
	background-position: calc((1 - 1) * 16 * var(--segment) - 1px) calc(-0 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 0.1s);
}

.reveal-image > .image-block:nth-of-type(0) {
	top: calc(0 * 16 * var(--segment));
	left: calc((0 - 1) * 16 * var(--segment));
	background-position: calc((1 - 0) * 16 * var(--segment) - 1px) calc(-0 * 16 * var(--segment) - 1px);
	animation-delay: calc(var(--part_delay) + 0s);
}

@keyframes animate-block {
	0% {
		transform: rotateY(90deg) rotateX(90deg);
		opacity: 0;
	}
	10% {
		transform: rotateY(90deg) rotateX(90deg);
		opacity: 0;
 	 }
	11% {
		opacity: 1;
	}
	30% {
		transform: rotateY(0) rotateX(0);
		opacity: 1;
	}
	60% {
		transform: rotateY(0) rotateX(0);
		opacity: 1;
		transform-origin: 100% 100%;
	}
	69% {
		opacity: 1;
	}
	70% {
		transform: rotateY(90deg) rotateX(0deg);
		opacity: 0;
	}
	100% {
		transform: rotateY(90deg) rotateX(0deg);
		opacity: 0;
	}
}


/* STARS ANIMATION */

#stars_container {
	position: absolute;
	top: -10px;
	left: 50%;
	width: 400px;
	height: 120px;
	z-index: 1;
	overflow: hidden;
	margin: 0 -200px;
}

.shine {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	background-image: url(../images/star_glitter_white.svg);
	background-repeat: no-repeat;
	background-position:center;
	background-size: 100% 100%;
	overflow: hidden;
	z-index: 2;
	color: transparent;
	opacity: 0;
	animation: glitter 6s linear 0s infinite normal;
}

.shine.small {
	width: 18px;
	height: 18px;
}

.shine.medium {
	width: 22px;
	height: 22px;
}

.shine.large {
	width: 25px;
	height: 25px;
}

@keyframes glitter {
	0% {
		transform: scale(0.3) rotate(0deg);
		opacity: 0;
	}
	5% {
		transform: scale(1) rotate(360deg);
		opacity: 1;
	}
	50% {
		transform: scale(0.3) rotate(720deg);
		opacity: 0;
	}
	100% {
		transform: scale(0.3) rotate(0deg);
		opacity: 0;
	}
}


/* LOADER ANIMATION */

.loader-element-wrapper {
	position: absolute;
	top: 15px;
	left: 40px;
	width: 80px;
	height: 80px;
	margin-left: 0;
	margin-top: 0;
	perspective: 1000px;
}

.loader-element {
	width: 50px;
	height: 50px;
	background: #8f7847;
	position: absolute;
	left: 50%;
	margin-left: -25px;
	top: 50%;
	margin-top: -25px;
}

.loader-element {
	opacity: 0;
}

.loader-element:nth-of-type(1) {
	transform: rotateX(70deg) rotateY(0deg) rotateZ(45deg) translateZ(30px);
	animation: translateIn 1.5s ease-in 5 300ms;
}

.loader-element:nth-of-type(2) {
	transform: rotateX(70deg) rotateY(0deg) rotateZ(45deg) translateZ(60px);
	animation: translateIn 1.5s ease-in 5 500ms;
}

.loader-element:nth-of-type(3) {
	transform: rotateX(70deg) rotateY(0deg) rotateZ(45deg) translateZ(90px);
	animation: translateIn 1.5s ease-in 5 600ms;
}

.loader-large-square {
	width: 70px;
	height: 70px;
	background: #8f7847;
	position: absolute;
	left: 50%;
	margin-left: -35px;
	top: 50%;
	margin-top: -35px;
	transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg) scale(0);
	opacity: 0;
	animation: scaleIn 3s linear 4 200ms;
}

@keyframes translateIn {
	30% {
		transform: rotateX(60deg) rotateY(0deg) rotateZ(45deg) translateZ(20px) scale(0.95);
		opacity: 0.4;
	}
	100% {
		transform: rotateX(65deg) rotateY(0deg) rotateZ(45deg) translateZ(0px) scale(0.85);
		opacity: 0;
	}
}

@keyframes scaleIn {
	80% {
		transform: rotateX(65deg) rotateY(0deg) rotateZ(45deg) scale(1.25);
		opacity: 0.4;
	}
	100% {
		transform: rotateX(65deg) rotateY(0deg) rotateZ(45deg) scale(1);
		opacity: 0;
	}
}


/* SLIDES ANIMATION */

html, body { 
	margin: 0; 
	padding: 0;
	width: 100%; 
	height: 100%;
	overflow: hidden;
	perspective: 550px;
}

.slide_container {
	position: absolute;
	width: 100%; 
	height: 100%;
	overflow: hidden;
}

.slide_container:nth-of-type(1) { animation: 5s ease-in-out 10s forwards 0 slideTop; }
.slide_container:nth-of-type(2) { animation: 5s ease-in-out 7s forwards 1 slideLeft; }
.slide_container:nth-of-type(3) { animation: 5s ease-in-out 3s forwards 1 slideRight; }

/* Alternate directions */

/* Top slide */
.slide_container:nth-of-type(1) {
	transform-origin: top center;
}

@keyframes slideTop {
	0% { transform: rotateX(0); z-index: 1; }
	15% { transform: rotateX(-90deg); }
	27% { z-index: 1; transform: rotateX(-90deg) translateY(-100%); }
	100% { z-index: -1; transform: rotateX(-90deg) translateY(-100%); }
}

/* Bottom slide */
/*
.slide_container:nth-of-type(1) {
	transform-origin: bottom center;
}
*/

@keyframes slideBottom {
	0% { transform: rotateX(0); z-index: 1; }
	15% { transform: rotateX(90deg); }
	27% { z-index: 1; transform: rotateX(90deg) translateY(100%); }
	100% { z-index: -1; transform: rotateX(90deg) translateY(100%); }
}

/* Left slide */
.slide_container:nth-of-type(2) {
	transform-origin: left center;
}

@keyframes slideLeft {
	0% { transform: rotateY(0); z-index: 1; }
	12% { transform: rotateY(90deg); }
	25% { z-index: 1; transform: rotateY(90deg) translateX(-100%); }
	100% { z-index: -1; transform: rotateY(90deg) translateX(-100%); }
}

/* Right slide */
.slide_container:nth-of-type(3) {
	transform-origin: right center;
}

@keyframes slideRight {
	0% { transform: rotateY(0); z-index: 1; }
	12% { transform: rotateY(-90deg); }
	25% { z-index: 1; transform: rotateY(-90deg) translateX(100%); }
	100% { z-index: -1; transform: rotateY(-90deg) translateX(100%); }
}