@font-face {
    font-family: 'latolight';
    src: url('../fonts/lato-light-webfont.eot');
    src: url('../fonts/lato-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato-light-webfont.woff') format('woff'),
         url('../fonts/lato-light-webfont.ttf') format('truetype'),
         url('../fonts/lato-light-webfont.svg#latolight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'latoregular';
    src: url('../fonts/lato-reg-webfont.eot');
    src: url('../fonts/lato-reg-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato-reg-webfont.woff') format('woff'),
         url('../fonts/lato-reg-webfont.ttf') format('truetype'),
         url('../fonts/lato-reg-webfont.svg#latoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
* {margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
html, body {height: 100%; width: 100%; -webkit-text-size-adjust: none; }
body {background: url(../images/bg.jpg) #000 center center no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: relative; color: #FFF; font-size: 20px; line-height: 36px; text-align: center; font-family: 'latolight';}
#logo {width: 439px; height: 0px; padding-top: 51px; background: url(../images/logo.png) no-repeat top left; display: block; margin: 0 auto 30px auto; overflow: hidden; cursor: pointer;}
#email {width: 74px; height: 73px; display: block; margin: 0 auto; background: url(../images/email.png);}
#intro {position: absolute; height: 530px; width: 980px; top:50%; left:50%; margin: -265px 0 0 -490px;}
footer {position: absolute; bottom: 0; width: 100%; line-height: 80px; text-transform: uppercase; font-size: 12px;}
p {margin-bottom: 30px;}
#newsletter {display: none; background-color: #000; background-color: rgba(0,0,0,0.5); position: absolute; top:0; left:0; bottom: 0; right: 0; color: #000; }
#newsletter:target {display: block;}
#newsletter form {position: absolute; width: 462px; height: 244px; top:50%; left: 50%; margin: -122px 0 0 -232px; background-color: #FFF;  padding: 45px;}
#newsletter p {font-size: 18px; line-height: 24px; font-family: 'latoregular';}
#newsletter a {position: absolute; top:10px; right:10px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQAAAAA3iMLMAAAAMklEQVR4AWOw/8Mg/4Oh/yPD8ccMj48zfOxn+CHPwqLAxMAAZAC5QEGgFFABUBmLAgsA1ewSkghWBn8AAAAASUVORK5CYII=); width: 16px; height: 16px; display: block; cursor: pointer;}
#newsletter input {background-color: #000; color: #FFF; text-align: center; line-height: 40px; height: 40px; font-family: 'latoregular'; border: 0; border-radius: 0; -webkit-appearance: none; font-size: 18px; margin: 0 auto 10px auto; min-width: 124px;}
#newsletter input[type=email] {width: 360px;}
/* Smartphones (portrait and landscape) ----------- */
@media only screen  and (min-device-width : 320px) and (max-device-width : 480px) {
	html {height: auto;}
	body { font-size: 12px; line-height: 18px; height: auto;}
	#logo {width: 220px; padding-top: 25px; background-size:100%;}
	#intro {width: 90%; margin: 30px auto; left:auto; top:auto; position: static; height: auto; } 
	#email {width: 37px; height: 36px; background-size:100%;}
	p {margin-bottom: 15px;}
	footer {position: static;}
	#newsletter form {width: 90%; margin-left: -45%; padding: 20px;}
	#newsletter input {width: 100% !important;}
}
/* iPads (portrait) ----------- */
@media only screen  and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	#intro {width: 600px; margin-left: -300px; height: 700px; margin-top: -350px;}
}