/* CSS Document for Screens */

@import url(https://fonts.googleapis.com/css?family=Lato:300,300italic,700,700italic);

body { font-family: 'Lato', sans-serif;font-size:16px;font-weight:300;color:#fff;background-color:#111;margin:0;padding:0}

#page { max-width:1000px; margin:0 auto; position: relative ;background-color:#000}

/* Text */

h1 {margin:0 0 1em 0; font-size:2.8em; font-weight:700;}
h2 {margin:0 0 .5em 0; font-size:1.6em; font-weight:700; line-height:1.1em}
h3 {margin:0 0 .5em 0; font-size:1.3em; font-weight:700}
h4 {margin:0 0 1.5em 0; font-size:1em; font-weight:700}

p { margin: 0 0 1em 0;}
a {color:#fff;text-decoration: none;}
a:hover {text-decoration: underline;}

header { height:200px; position: relative; margin:10px 10px 0 10px;}
header img {display:block; float:right; height:200px;}
header div.hero {width:100%; position:relative; text-align:center; padding:40px 0 0 0;}
header div.hero h1 {margin: 0 0px 0 0;}
header div.hero h2 {margin:0.15em 0 0 0;}

/* Section All */


/* Section Main */

section.main { width:100%;}

section.main iframe {display:block; width:99%; height:540px; margin: 30px auto;}

footer p { margin: 0 0 0 10px; font-size:0.8em; padding-bottom:10px;}


@media screen and (max-width:800px) {
    section.main iframe {height:460px;}
}

@media screen and (max-width:600px) {
    section.main iframe {height:350px;}
    header { height:140px;}
    header div.hero h1 {font-size:1.5em;}
    header div.hero h2 {font-size:1.3em;}
    header img {height:140px;}
}

@media screen and (max-width:500px) {
    section.main iframe {height:290px;}
}

@media screen and (max-width:400px) {
    section.main iframe {height:230px;}
        header { height:300px;}
    header img { float:none; margin:5px auto; height:200px;}
}