html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed, 

figure, figcaption, footer, header, hgroup, 

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

	margin: 0;

	padding: 0;

	border: 0;

	font-size: 100%;

	font: inherit;

	vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 

footer, header, hgroup, menu, nav, section {

	display: block;

}

body {

	line-height: 1;

}

ol, ul {

	list-style: none;

}

blockquote, q {

	quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

	content: '';

	content: none;

}

table {

	border-collapse: collapse;

	border-spacing: 0;

}



/* CLEARFIX */



.clearfix:before,

.clearfix:after {

    content:"";

    display:table;

}

.clearfix:after {

    clear:both;

}

/* For IE 6/7 (trigger hasLayout) */

.clearfix {

    zoom:1;

}



/* STYLE */



body {

	text-align: center;

	font-family: 'Lato', sans-serif;

}



.start {

	background-color: #155aa2;

	color: #fff;

	text-align: center;

}



.coming {

	font-size: 2em;

	font-weight: 700;

}



h1 {

	font-family: 'Roboto Condensed', sans-serif;

	font-size: 3.25em;

	margin: 20px 0 15px;

}



h2 {

	font-size: 2em;

	letter-spacing: 0.75px;

	font-family: 'Oswald', sans-serif;

}



.promo {

	border: 3px solid #fff;

	display: inline-block;

	padding: 16px 15px;

	text-decoration: none;

	color: #fff;

	font-size: 1.1em;

	margin-top: 30px;

}



.solver {

	color: #4a92ce;

	text-transform: uppercase;

	font-size: 1.15em;

	margin-top: 30px;

}



.txt {

	margin-top: 10px;

}



.txt span {

	font-weight: 700;

}



.txt a {

	color: #fff;

}



.social {

	margin-top: 25px;

}



.social a {

	display: inline-block;

	vertical-align: top;

	color: #fff;

	text-decoration: none;

	margin: 0 5px;

}



.social a i {

	font-size: 2em;

}



.start .wrapper {

	position: fixed;

	left: 50%;

	top: 50%;

	margin-left: -194px;

	margin-top: -207px;

	height: 414px;

	width: 388px;

}



/* PROMO PAGE */



.promoPage .wrapper {

	max-width: 640px;

	width: 96%;

	color: #155aa2;

	position: fixed;

	top: 50%;

	left: 50%;

	margin-top: -143px;

	margin-left: -320px;

}



.generate {

	font-weight: 700;

	line-height: 1.4;

	margin-bottom: 20px;

}



.promoForm label {

	font-weight: 700;

	display: block;

	margin-bottom: 5px;

}



.promoForm input[type="text"] {

	border: 1px solid #cdcdcd;

	border-radius: 5px;

	-moz-border-radius: 5px;

	-webkit-border-radius: 5px;

	padding: 10px 12px;

	font-size: 1.15em;

	width: 100%;

	display: block;

	-webkit-box-sizing: border-box;

	-moz-box-sizing: border-box;

	box-sizing: border-box;

	outline: 0;

}



.promoForm input[type="submit"] {

	border: 3px solid #155aa2;

	width: 200px;

	padding: 15px 0;

	text-align: center;

	display: block;

	margin: 10px auto 0;

	background-color: #fff;

	font-size: 1.2em;

	color: #155aa2;

	cursor: pointer;

	text-transform: uppercase;

}



.small {

	line-height: 1.3;

	font-size: 0.875em;

	color: #000;

	margin: 5px 0 0;

}



.discount {

	font-weight: 700;

	font-size: 1.5em;

	padding: 10px 0;

}



.codekey {

	font-size: 2em;

	display: block;

	font-weight: 700;

}



@media screen and (max-width: 399px) {

	.start .wrapper {

		position: relative;

		margin: 40px auto 0;

		width: 96%;

		height: auto;

		top: auto;

		left: auto;

	}

	.coming {

		font-size: 1.75em;

	}

	h1 {

		font-size: 2.65em;

	}

	h2 {

		font-size: 1.9em;

	}

	.solver {

		line-height: 1.4;

		font-size: 1.25em;

		margin-bottom: 30px;

	}

	.promo {

		margin-top: 0;

	}

}



@media screen and (max-width: 659px) {

	.promoPage .wrapper {

		position: relative;

		top: auto;

		left: auto;

		margin: 15px auto 0;

	}

}