* {
	margin:				0;
	padding:			0;
	user-select:		none;
	-webkit-user-select: none;
	-ms-user-select:	none;
	user-drag:			none;
	-webkit-user-drag:	none;
	-ms-user-drag:		none;
}
body {
	font-size:			62.5%;
}
div, svg {
	display:			block;
	position:			absolute;
	width:				100%;
	height:				100%;
	background-repeat:	no-repeat;
	background-size:	contain;
}
#main {
	left: 				0;
	top: 				0;
	background-color: 	#ffd500;
	overflow:			hidden;
	opacity:			0;
}
#border {
	width:				calc( 100% - 2px );
	height:				calc( 100% - 2px );
	border-style:		solid;
	border-width:		1px;
	border-color:		#e30613;
}
#legal {
	width:				calc( 100% - 30px );
	height:				auto;
	left:				15px;
	bottom:				5px;
	font:				normal 7px/7px Arial,Verdana,sans-serif;
	color:				#000000;
	text-align:			right;
}
#lib {
	display:			none;
	width:				0px;
	height:				0px;
	overflow:			hidden;
	left:				-1000px;
	top:				-1000px;
}

/* BG */

#bg .eggs {
	font-size:			300px;
	width:				1em;
	height:				1em;
	left:				-.5em;
	bottom:				-.35em;
	transform:			rotate( -15deg );
}
#bg .eggs svg path {
	fill:				#ffe341;
}
#bg .eggs.right {
	left:				initial;
	bottom:				initial;
	right:				-.5em;
	top:				-.35em;
}

/* MOBILE */

body.mobile #egg {
	right:				10%;
	bottom:				40%;
}
body.mobile #bunny {
	left:				10%;
}

/* EGG */

#egg {
	bottom:				5%;
	right:				24%;
}
#bunny {
	bottom:				0;
	left:				20%;
}
#egg, #bunny {
	width:				0px;
	height:				0px;
	overflow:			visible;
}
#egg .egg_item {
	font-size:			800px;
	width:				1em;
	height:				1em;
	left:				-.5em;
	top:				-.5em;
}
#egg .glow {
	width:				0;
	height:				0;
	overflow:			visible;
	left:				0;
	bottom:				500px;
	font-size:			3000px;
}
#egg .glow div {
	width:				1em;
	height:				.1em;
	left:				-.5em;
	top:				-.05em;
	background-image:	url("../assets/glow.png");
	background-size:	100% 100%;
	opacity:			.4;
}

/* HEADLINE */

#headline {
	font-size:			400px;
	width:				1em;
	height:				auto;
	top:				50%;
	left:				50%;
	transform:			translateX( -50% );
	transform-origin:	50% 50%;
}
#headline .lines {
	position:			relative;
	width:				100%;
	height:				auto;
	overflow:			visible;
	perspective:		200px;
	transform-origin:	0% 0%;
}
#headline .lines div {
	position:			relative;
	float:				left;
	width:				100%;
	height:				auto;
	color:				#1f1846;
	font-family:		"regular", Arial,Verdana,sans-serif;
	text-align:			center;
	line-height:		1em;
	transform-origin:	0% 0%;
}
#headline .lines .black {
	font-family:		"black", Arial,Verdana,sans-serif;
}

/* CTA */

#cta {
	display:			block;
	font-size:			140px;
	width:				1em;
	height:				0.1143em;
	right:				0;
	transform-origin:	100% 100%;
}
#cta .content {
	right:				20px;
	bottom:				20px;
	transform-origin:	100% 100%;
}
#cta .typo {
	background-image:	url( "../assets/cta_copy.png" );
	background-position: center center;
}
#cta .arrow {
	background-image:	url( "../assets/cta_arrow.png" );
	background-position: center center;
}

/* FONTS */

@font-face {
	font-family:		"regular";
	src:				url("../assets/typewell-regular.woff") format("woff");
}

@font-face {
	font-family:		"black";
	src:				url("../assets/typewell-black.woff") format("woff");
}