* { font-family: "Webfont-Regular"; font-weight: normal; box-sizing: border-box; font-size: 1em; }

html {
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	background: #000 url(/img/bg.jpg) center top no-repeat;
	background-size: auto 100%;
	min-height: 100%;
}
body {
	margin:0;
	text-align: center;
}

#root { width: 300px; margin: 0 auto; padding: 1.5em 0; /* background-color: rgba(255, 255, 255, 0.1); */ }

header { line-height: 2em; }

section { color: #fff; line-height: 1.3em; }
section strong { font-family: "Webfont-Bold"; }

section, footer { font-size: 1.5em; }
.size:before { content: "default"; }

h1 { color: #ffd144; text-transform: uppercase; font-family: "Webfont-Black"; margin: 0 0 0.5em 0; padding: 0; font-size: 1.9em; }
h1 span { font-family: "Webfont-Black"; padding: 0 0.1em; }
h2 { color: #ff1313; font-family: "Webfont-Black"; margin: 0 0 0.3em 0; padding: 0; font-size: 3.2em; }
h3 { color: #ff1313; font-family: "Webfont-Black"; margin: 0; padding: 0; font-size: 1.9em; }

footer { color: #787878; position: static; }
footer .fb a { display: block; background: url(/img/fb.png) top center no-repeat; background-size: 30px 30px; color: #475993; padding-top: 40px; text-decoration: none; }

h1, h2, h3, section p, footer { text-shadow: 2px 2px 1px #000000; }

@media (min-width:360px) {
	#root { width: 340px; }
	h1 { font-size: 2.1em; margin-bottom: 0.6em; }
	h2 { font-size: 3.5em; margin-bottom: 0.3em; }
	h3 { font-size: 2.1em; }
	section { padding-top: 0.6em; }
	.size:before { content: "360"; }
}

@media (min-width:480px) {
	#root { width: 470px; padding: 2.5em 0; }
	h1 { font-size: 3.0em; margin-bottom: 0.8em; }
	h2 { font-size: 4.8em; margin-bottom: 0.5em; }
	h3 { font-size: 3.0em; }
	section { padding-top: 1em; font-size: 1.8em; }
	footer { font-size: 1.5em; }
	footer .fb a { background-size: 35px 35px; }
	.size:before { content: "480"; }
}

@media (min-width:640px) {
	#root { width: 620px; padding: 5em 0; }
	h1 { font-size: 4em; margin-bottom: 1em; }
	h2 { font-size: 6.4em; margin-bottom: 0.6em; }
	h3 { font-size: 4em; }
	section { padding-top: 1.2em; }
	section, footer { font-size: 2em; }
	footer .fb a { background-size: 40px 40px; padding-top: 50px;  }
	.size:before { content: "640"; }
}

@media (min-width:990px) {
	#root { width: 970px; padding: 6em 0; }
	h1 { font-size: 5em; margin-bottom: 1.2em; }
	h2 { font-size: 8em; margin-bottom: 0.7em; }
	h3 { font-size: 5em; }
	section { padding-top: 1.3em; }
	section, footer { font-size: 2.2em; }
	footer .fb a { background-size: auto auto; padding-top: 60px;  }
	.size:before { content: "990"; }
}

@media (min-width:1200px) {
	#root { width: 1180px; padding: 7em 0; }
	h1 { font-size: 6em; margin-bottom: 1.1em; }
	h2 { font-size: 10em; margin-bottom: 0.7em; }
	h3 { font-size: 5.6em; }
	section { padding-top: 1.7em; }
	section, footer { font-size: 2.4em; }
	footer .fb a { background-size: auto auto; padding-top: 60px;  }
	.size:before { content: "1200"; }
}