@charset "UTF-8";

@import url(http://fonts.googleapis.com/css?family=Codystar);

@-webkit-keyframes fadeIn{
	from{opacity:0;}
	to{opacity:1;}
}
@keyframes fadeIn{
	from{opacity:0;}
	to{opacity:1;}
}

@-webkit-keyframes flipInX{
	0%{-webkit-transform:perspective(1000px) rotate3d(1,0,0,-90deg);-webkit-transition-timing-function:ease-in;}
	40%{-webkit-transform:perspective(1000px) rotate3d(1,0,0,20deg);-webkit-transition-timing-function:ease-out;}
	60%{-webkit-transform:perspective(1000px) rotate3d(1,0,0,-10deg);-webkit-transition-timing-function:ease-in;opacity:1;}
	80%{-webkit-transform:perspective(1000px) rotate3d(1,0,0,5deg);-webkit-transition-timing-function:ease-out;}
	100%{-webkit-transform:perspective(1000px);}
}
@keyframes flipInX{
	0%{-webkit-transform:perspective(1000px) rotate3d(1,0,0,-90deg);transform:perspective(1000px) rotate3d(1,0,0,-90deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;}
	40%{-webkit-transform:perspective(1000px) rotate3d(1,0,0,20deg);transform:perspective(1000px) rotate3d(1,0,0,20deg);-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;}
	60%{-webkit-transform:perspective(1000px) rotate3d(1,0,0,-10deg);transform:perspective(1000px) rotate3d(1,0,0,-10deg);-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;opacity:1;}
	80%{-webkit-transform:perspective(1000px) rotate3d(1,0,0,5deg);transform:perspective(1000px) rotate3d(1,0,0,5deg);-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out;}
	100%{-webkit-transform:perspective(1000px);transform:perspective(1000px);}
}

@-webkit-keyframes rotates {
	0% { -webkit-transform:rotate(0deg) translate(0px, 0px) scale(0); }
	25% { -webkit-transform:rotate(-5deg) translate(-20px, 10px) scale(1.5); }
	50% { -webkit-transform:rotate(0deg) translate(0px, 0px) scale(0); }
	75% { -webkit-transform:rotate(5deg) translate(20px, -10px) scale(1.5); }
	100% { -webkit-transform:rotate(0deg) translate(0px, 0px) scale(0); }
}
@keyframes rotates {
	0% { -webkit-transform:rotate(0deg) translate(0px, 0px) scale(0);transform:rotate(0deg) translate(0px, 0px) scale(0);}
	25% { -webkit-transform:rotate(5deg) translate(-20px, 10px) scale(1.5);transform:rotate(5deg) translate(-20px, 10px) scale(1.5);}
	50% { -webkit-transform:rotate(0deg) translate(0px, 0px) scale(0);transform:rotate(0deg) translate(0px, 0px) scale(0);}
	75% { -webkit-transform:rotate(-5deg) translate(20px, -10px) scale(1.5);transform:rotate(-5deg) translate(20px, -10px) scale(1.5);}
	100% { -webkit-transform:rotate(0deg) translate(0px, 0px) scale(0);ransform:rotate(0deg) translate(0px, 0px) scale(0);}
}

*{
	font-family:"Cabin",sans-serif;
	color:#001323;
	margin:0;
	padding:0;
	border:0;
	font-size:14px;
	font-weight:400;
	border-collapse:collapse;
	outline-color:#50b9b3;
	outline-width:2px;
	outline-offset:2px;
}

html,body{height:100%;overflow:hidden;}

.fontFlake{
	font-family:'Codystar', cursive;
	position:absolute;
	top:-50px;
	left:0px;
	z-index:1;
	position:block;
	letter-spacing:.5vh;
	-webkit-animation-name:rotates;
	-webkit-animation-duration:10s;
	-webkit-transform-origin:50% -100%;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:ease-in-out;
	animation-name:rotates;
	animation-duration:10s;
	transform-origin:50% -100%;
	animation-iteration-count:infinite;
	animation-timing-function:ease-in-out;
}

article{
	display:block;
	position:fixed;
	width:80%;
	height:70%;
	left:10%;
	top:10%;
	z-index:3;
	-webkit-animation:fadeIn 2s both ease-in-out;
	animation:fadeIn 2s both ease-in-out;
	-webkit-transform-origin:50% 50%;
	transform-origin:50% 50%;
	-webkit-animation:2s flipInX;
	animation:2s flipInX;
}

body.portrait article{
	width:100%;
	left:0;
}

h1{
	display:block;
	width:100%;
	height:40vh;
	margin:12vh 0 1vh 0;
	font-size:0%;
	background:transparent url("imgs/happy-holidays.png") center center / contain no-repeat;
	-webkit-transform-origin:50% 200%;
	transform-origin:50% 200%;
	-webkit-animation:2s flipInX;
	animation:2s flipInX;
}

h2{
	display:block;
	font-size:0%;
	height:4vh;
	width:100%;
	background:transparent url("imgs/from-the-ikone-team.png") center center / contain no-repeat;
	-webkit-transform-origin:50% 700%;
	transform-origin:50% 700%;
	-webkit-animation:2s flipInX;
	animation:2s flipInX;
}

footer{
	display:block;
	position:fixed;
	width:100%;
	height:30%;
	bottom:0;
	z-index:3;
	-webkit-animation:fadeIn 2s both ease-in-out;
	animation:fadeIn 2s both ease-in-out;
	-webkit-transform-origin:50% 100%;
	transform-origin:50% 100%;
	-webkit-animation:2s flipInX;
	animation:2s flipInX;
}

figure{
	display:block;
	margin:0 auto 2vh auto;
	text-align:center;
}

figure img{
	height:15vh;
	width:auto;
}

a{
	display:block;
	text-decoration:none;
	text-align:center;
	font-size:2.5vh;
	letter-spacing:0.25vh;
	font-weight:400;
	color:#21ace3;
}

a strong{
	display:inline;
	font-size:2.5vh;
	letter-spacing:0.25vh;
	font-weight:700;
	color:#21ace3;
}

.container,
.container>*{
	display:block;
	position:fixed;
	z-index:2;
	width:100%;
	height:100%;
}

#points{
	display:block;
	position:fixed;
	width:100%;
	height:100%;
	z-index:2;
	-webkit-animation:fadeIn 2s both ease-in-out;
	animation:fadeIn 2s both ease-in-out;
}

#snowfall{
	display:block;
	position:fixed;
	z-index:1;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:transparent url("imgs/bg.jpg") center center / 100% auto no-repeat;
	-webkit-animation:fadeIn 2s both ease-in-out;
	animation:fadeIn 2s both ease-in-out;
}






.os-phrases h2 {
	font-size:70px;
	font-weight:200;
	width:100%;
	overflow:hidden;
	text-transform:uppercase;
	padding:0;
	margin:0;
	position:absolute;
	top:0;
	left:0;
	letter-spacing:14px;
	text-align:center;
}

.os-phrases h2,
.os-phrases h2 > span {
	height:100%;
	/* Centering with flexbox */
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;
	-webkit-flex-direction:row;
	-ms-flex-direction:row;
	flex-direction:row;
	-webkit-box-pack:center;
	-moz-box-pack:center;
	-webkit-justify-content:center;
	-ms-flex-pack:center;
	justify-content:center;
	-webkit-box-align:center;
	-moz-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items:center;
}

.os-phrases h2 > span {
	margin:0 15px;
}

.os-phrases h2 > span > span {
	display:inline-block;
	-webkit-perspective:1000px;
	-moz-perspective:1000px;
	perspective:1000px;
	-webkit-transform-origin:50% 50%;
	-moz-transform-origin:50% 50%;
	transform-origin:50% 50%;
}

.os-phrases h2 > span > span > span {
	display:inline-block;
	color:hsla(0,0%,0%,0);
	-webkit-transform-style:preserve-3d;
	-moz-transform-style:preserve-3d;
	transform-style:preserve-3d;
	-webkit-transform:translate3d(0,0,0);
	-moz-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
	-webkit-animation:OpeningSequence 5.2s linear forwards;
	-moz-animation:OpeningSequence 5.2s linear forwards;
	animation:OpeningSequence 5.2s linear forwards;
}

.os-phrases h2:nth-child(2) > span > span > span {
	-webkit-animation-delay:5s;
	-moz-animation-delay:5s;
	animation-delay:5s;
}

.os-phrases h2:nth-child(3) > span > span > span {
	-webkit-animation-delay:10s;
	-moz-animation-delay:10s;
	animation-delay:10s;
}

.os-phrases h2:nth-child(4) > span > span > span {
	-webkit-animation-delay:15s;
	-moz-animation-delay:15s;
	animation-delay:15s;
}

.os-phrases h2:nth-child(5) > span > span > span {
	font-size:150px;
	-webkit-animation-delay:21s;
	-moz-animation-delay:21s;
	animation-delay:21s;
	-webkit-animation-duration:8s;
	-moz-animation-duration:8s;
	animation-duration:8s;
}

.os-phrases h2:nth-child(6) > span > span > span {
	-webkit-animation-delay:30s;
	-moz-animation-delay:30s;
	animation-delay:30s;
}

.os-phrases h2:nth-child(7) > span > span > span {
	-webkit-animation-delay:34s;
	-moz-animation-delay:34s;
	animation-delay:34s;
}

@-webkit-keyframes OpeningSequence {
	0% {
		text-shadow:0 0 50px #000;
		letter-spacing:80px;
		opacity:0;
		-webkit-transform:rotateY(-90deg);
	}
	50% {
		text-shadow:0 0 1px #000;
		letter-spacing:14px;
		opacity:0.8;
		-webkit-transform:rotateY(0deg);
	}
	85% {
		text-shadow:0 0 1px #000;
		opacity:0.8;
		-webkit-transform:rotateY(0deg) translateZ(100px);
	}
	100% {
		text-shadow:0 0 10px #000;
		opacity:0;
		-webkit-transform:translateZ(130px);
		pointer-events:none;
	}
}

@-moz-keyframes OpeningSequence {
	0% {
		text-shadow:0 0 50px #000;
		letter-spacing:80px;
		opacity:0.2;
		-moz-transform:rotateY(-90deg);
	}
	50% {
		text-shadow:0 0 1px #000;
		letter-spacing:14px;
		opacity:0.8;
		-moz-transform:rotateY(0deg);
	}
	85% {
		text-shadow:0 0 1px #000;
		opacity:0.8;
		-moz-transform:rotateY(0deg) translateZ(100px);
	}
	100% {
		text-shadow:0 0 10px #000;
		opacity:0;
		-moz-transform:translateZ(130px);
		pointer-events:none;
	}
}

@keyframes OpeningSequence {
	0% {
		text-shadow:0 0 50px #000;
		letter-spacing:80px;
		opacity:0.2;
		transform:rotateY(-90deg);
	}
	50% {
		text-shadow:0 0 1px #000;
		letter-spacing:14px;
		opacity:0.8;
		transform:rotateY(0deg);
	}
	85% {
		text-shadow:0 0 1px #000;
		opacity:0.8;
		transform:rotateY(0deg) translateZ(100px);
	}
	100% {
		text-shadow:0 0 10px #000;
		opacity:0;
		transform:translateZ(130px);
		pointer-events:none;
	}
}

.os-phrases h2:nth-child(8) > span > span > span {
	font-size:30px;
	-webkit-animation:FadeIn 4s linear 40s forwards;
	-moz-animation:FadeIn 4s linear 40s forwards;
	animation:FadeIn 4s linear 40s forwards;
}