/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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;}

@font-face {font-weight: normal; font-style: normal;
    font-family: 'Pirulen';
    src: url('pirulenrg.eot');
    src: url('pirulenrg.eot?#iefix') format('embedded-opentype'),
         url('pirulenrg.woff') format('woff'),
         url('pirulenrg.ttf') format('truetype'),
         url('pirulenrg.svg#PirulenRg-Regular') format('svg');
}

html,body {width: 100%; height: 100%; overflow: hidden;}
body {font-family: 'Pirulen'; background-color: #424242; text-align: center; color: #fff;}
a {color: #fff; text-decoration: underline;}
a:hover {color: #faff00;}
#wrapper {height: 100%; width: 100%;}
#wrapper .logo {position: absolute; z-index: 1; top:50%; left:50%; width: 860px; height: 114px; margin: -57px 0 0 -430px; text-indent: -999em; overflow: hidden; background-image: url(/imgs/logo.png); background-repeat: no-repeat; background-position: center center; background-size: contain;}
html.svg #wrapper .logo {background-image: url(/imgs/logo.svg);}

#footer {position: fixed; bottom: 30px; left: 30px; right: 30px; text-align: center; font-size: 18px; line-height: 1.4em;}

@media screen and (max-width: 900px) {
	#wrapper .logo {width: 600px; height: 80px; margin: -40px 0 0 -300px;}
	#footer {font-size: 14px;}
}
@media screen and (max-width: 680px) {
	#wrapper .logo {width: 400px; height: 60px; margin: -30px 0 0 -200px;}
	#footer {font-size: 12px;}
}
@media screen and (max-width: 480px) {
	#wrapper .logo {width: 300px; height: 40px; margin: -20px 0 0 -150px;}
	#footer {font-size: 10px;}
}