html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 100%; vertical-align: baseline; background: transparent none repeat scroll 0% 0%; }
body { line-height: 1; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
blockquote::before, blockquote::after, q::before, q::after { content: none; }
a { margin: 0px; padding: 0px; font-size: 100%; vertical-align: baseline; background: transparent none repeat scroll 0% 0%; }



html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body { font-family: "Lato",sans-serif; background: rgb(32, 30, 57) none repeat scroll 0% 0%; border: 0px none; padding: 0px; margin: 0px; min-height: 100%; }
a { display: inline-block; width: 43%; padding: 15px 0px; margin: 0px 10px; color: rgb(9, 8, 30); text-decoration: none; font-size: 40px; border-radius: 5px; text-transform: uppercase; }
.wrap { margin: 0px auto; text-align: center; }
.clear-fix { clear: both; }
.hide { display: none; }
h1 { font-size: 40px; font-weight: 700; text-transform: uppercase; color: rgb(255, 107, 107); margin-bottom: 25px; }
h2 { font-size: 30px; font-weight: 900; text-transform: uppercase; color: rgb(255, 255, 255); margin-bottom: 25px; }
#headline h2 { color: rgb(72, 70, 98); font-size: 30px; }
h3 { font-size: 25px; font-weight: 300; color: rgb(72, 70, 98); }
h3 span { font-weight: 400; }
h4 { font-size: 16px; font-weight: 900; text-transform: uppercase; color: rgb(72, 70, 98); margin-bottom: 5px; }
h5 { font-size: 40px; font-weight: 300; text-transform: uppercase; line-height: 90px; }
h6 { font-size: 30px; font-weight: 400; color: rgb(255, 255, 255); }
header { width: 100%; min-height: 100px; padding: 25px 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; margin: 0px; }
#main_pic { width: 460px; margin: 0px auto; border-radius: 15px; }
#headline { width: 68%; margin: 0px auto; padding-top: 25px; }
section { width: 100%; min-height: 250px; padding: 35px 0px; }
ul { list-style-type: none; margin-bottom: 25px; }
ul li { display: inline-block; width: 90px; height: 90px; margin: 10px; color: rgb(255, 255, 255); border: 2px solid rgb(255, 255, 255); border-radius: 5px; transition: all 0.75s ease-in-out 0s; }
.active { background: rgb(199, 244, 100) none repeat scroll 0% 0%; color: rgb(9, 8, 30); border: 2px solid rgb(199, 244, 100); transition: all 0.75s ease-in-out 0s; }
#yes, .button1:nth-child(2), .button2:nth-child(2), #start { background: rgb(199, 244, 100) none repeat scroll 0% 0%; }
#yes:hover, .button1:nth-child(2):hover, .button2:nth-child(2):hover, #start:hover { background: rgb(218, 244, 162) none repeat scroll 0% 0%; }
#no, .button1:nth-child(3), .button2:nth-child(3) { background: rgb(255, 107, 107) none repeat scroll 0% 0%; }
#no:hover, .button1:nth-child(3):hover, .button2:nth-child(3):hover { background: rgb(252, 170, 170) none repeat scroll 0% 0%; }
#preload { margin: 0px auto; }
#q4 h3 { font-size: 14px; line-height: 18px; color: rgb(255, 255, 255); margin-bottom: 25px; }
#reject h1 { color: rgb(199, 244, 100); }
@media only screen and (min-width: 960px) {
	.wrap { width: 960px; }
}
@media screen and (max-width: 959px) {
	.wrap { width: 100% ! important; padding: 0px 10px; }
}
@media screen and (max-width: 700px) {
	#headline { width: 80%; }
	a { width: 42%; font-size: 30px; margin: 0px 3%; }
	h1 { font-size: 30px; margin-bottom: 15px; }
	h2, h6 { font-size: 24px; margin-bottom: 15px; }
	h3 { font-size: 21px; }
	h4 { font-size: 14px; margin-bottom: 0px; }
	h5 { font-size: 30px; line-height: 70px; }
	#headline { padding-top: 15px; }
	ul { margin-bottom: 15px; }
	ul li { width: 70px; height: 70px; }
}
@media screen and (max-width: 520px) {
	#preload img { width: 90%; }
}
@media screen and (max-width: 480px) {
	header, section { padding: 15px 0px; }
	#main_pic { width: 100%; }
	#headline { width: 90%; padding-top: 10px; }
	h1 { font-size: 21px; margin-bottom: 15px; }
	h2, h6 { font-size: 16px; margin-bottom: 10px; }
	#headline h2 { font-size: 14px; }
	h3 { font-size: 16px; }
	h4 { font-size: 12px; margin-bottom: 0px; }
	ul { margin-bottom: 10px; }
	#start { width: 80%; }
}
@media screen and (max-width: 320px) {
	header, section { padding: 10px 0px; }
	#headline { width: 100%; padding-top: 5px; }
	a { font-size: 21px; padding: 10px 0px; }
	h1 { font-size: 18px; margin-bottom: 15px; }
	h2, h6 { font-size: 14px; margin-bottom: 10px; }
	#headline h2 { font-size: 12px; margin-bottom: 5px; }
	h3 { font-size: 14px; }
	h4 { font-size: 10px; margin-bottom: 0px; }
	h5 { font-size: 21px; line-height: 50px; }
	ul { margin-bottom: 10px; }
	#start { width: 80%; }
	ul li { width: 50px; height: 50px; margin: 5px; }
	#q4 h3 { font-size: 12px; }
}
