/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/2c42fc");

@font-face {font-family: 'BrandonGrotesque-Medium';src: url('webfonts/2C42FC_0_0.eot');src: url('webfonts/2C42FC_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/2C42FC_0_0.woff') format('woff'),url('webfonts/2C42FC_0_0.ttf') format('truetype');} 
@font-face {font-family: 'BrandonGrotesque-Regular';src: url('webfonts/2C42FC_1_0.eot');src: url('webfonts/2C42FC_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/2C42FC_1_0.woff') format('woff'),url('webfonts/2C42FC_1_0.ttf') format('truetype');}
 

html,
body {
	background-color: #fff;
	color: #06131c;
	font-family: 'BrandonGrotesque-Regular', Arial, sans-serif;
	height: 100%;
	height: 100vh;
	position: relative;
	-webkit-font-smoothing: antialiased;
}

.content {
	width: 830px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.content .images {
	width: 260px;
	float: left;
	position: relative;
	-webkit-animation: imageAppear 1.5s ease .5s 1 backwards;
	animation: imageAppear 1.5s ease .5s 1 backwards;
}

.content .images  .logo {
	position: absolute;
	top: 0;
	left: 0;
	
}

.content .images  .arrow {
	position: absolute;
	top: 170px;
	right: 0;
	-webkit-transform: rotateZ(0deg);
	transform: rotateZ(0deg);
	-webkit-animation: arrowShake 1.5s ease-in 3s infinite;
	animation: arrowShake 1.5s ease-in 3s infinite;
	
}

.content .text {
	width: 310px;
	float: right;
	position: relative;
	padding: 20px 0;
	-webkit-animation: imageAppear 1.5s ease 0s 1 backwards;
	animation: imageAppear 1.5s ease 0s 1 backwards;
}

.content .text h1 {
	font-size: 40px;
	font-family: 'BrandonGrotesque-Medium', Arial, sans-serif;
	line-height: 40px;
	margin: 0;
	text-transform: uppercase;
}

.content .text h1 span {
	color: #75b6c5;
}

.content .text p {
	font-size: 18px;
	line-height: 25px;
	text-transform: uppercase;
	margin-left: 3px;
}

.content .text p:before {
	display: block;
	width: 70px;
	height: 4px;
	background: #06131c;
	content: ' ';
	margin: 0 0 1em;
}

.content .text p a {
	font-size: 18px;
	line-height: 22px;
	text-transform: lowercase;
	text-decoration: none;
	font-family: 'BrandonGrotesque-Medium', Arial, sans-serif;
	color: #06131c;
}

footer {
	width: 830px;
	position: absolute;
	bottom: 40px;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	padding-left: 523px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	
}

footer a {
	text-transform: lowercase;
	text-decoration: none;
	color: #06131c;
	font-size: 14px;
}

span {
	font-family: 'BrandonGrotesque-Medium', Arial, sans-serif;
}

.lightbox {
	background: #fff;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 40px;
	position: absolute;
	width: 793px;
	top: 40px;
	left: 50%;
	-webkit-transform: translate(-50%, 0) scale(.6);
	transform: translate(-50%, 0) scale(.8);
	box-shadow: 3px 3px 10px rgba(26,26,26,0.46);
	
	font-size: 16px;
	line-height: 21px;
	opacity: 0;
	-webkit-transition: all 500ms ease;
	transition: all 500ms ease;
	z-index: -1;
	margin: 0 0 40px;
}

.lightbox.active {
	opacity: 1;
	-webkit-transform: translate(-50%, 0) scale(1);
	transform: translate(-50%, 0) scale(1);
	z-index: 50;
}

h2 {
	text-transform: uppercase;
	font-family: 'BrandonGrotesque-Medium', Arial, sans-serif;
	line-height: 21px;
	font-size: 18px;
	margin: 0 0 10px;
}


@-webkit-keyframes arrowShake {
	0%{ -webkit-transform: rotateZ(0deg); }
	5%{ -webkit-transform: rotateZ(10deg); }
	10%{ -webkit-transform: rotateZ(0deg); }
	15%{ -webkit-transform: rotateZ(-10deg); }
	20%{ -webkit-transform: rotateZ(0deg); }
	100%{ -webkit-transform: rotateZ(0deg); }
}

@keyframes arrowShake {
	0%{ transform: rotateZ(0deg); }
	5%{ transform: rotateZ(10deg); }
	10%{ transform: rotateZ(0deg); }
	15%{ transform: rotateZ(-10deg); }
	20%{ transform: rotateZ(0deg); }
	100%{ transform: rotateZ(0deg); }
}

@-webkit-keyframes imageAppear {
	from { opacity: 0; -webkit-transform: translate(0,0) scale(1.2); -webkit-filter: blur(10px) }
	to { opacity: 1; -webkit-transform: translate(0, 0) scale(1); -webkit-filter: blur(0px) }
}

@keyframes imageAppear {
	from { opacity: 0; transform: translate(0, 0) scale(1.2); }
	to { opacity: 1; transform: translate(0, 0) scale(1); }
}