/* CSS Document for Screens */

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

html { overflow-y: scroll;}

body { font-family: 'Lato', sans-serif;font-size:18px;font-weight:300;color:#000;margin:0;padding:0; background-color: #c60; }

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

/* Text */

h1 {margin:0 0 1em 0; font-size:3.5em; 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}
b {font-weight:bold;}
a { color:#000;text-decoration:none; }
a:hover {text-decoration:underline;}

a.btn {font-size:1.2em; text-decoration:none;color:#fff;
       border:1px solid #fff;padding:4px 15px;
       transition: background-color .5s;}
a.btn:hover {background-color: rgba(0,0,0,.3); }

/* Header */

header {height:134px;padding:7px 0 7px 0;}
header img {height:134px; margin:0px 40px 0 0;display:block;float:left;}
header div.hero {height:134px; padding:25px 40px 25px 0px;}
header div.hero h1 {display:block; margin: 5px 00px 0 0px; text-align:center;}
header div.hero h2 {display:block; margin: 00px 00px 0 0px; }
header div.hero h3 {display:block; margin: 0px 00px 0 00px; }

/* Section All */

section {padding:0 0px; }
/* section::after { content:''; display:block; clear:both; } */

/* Section Main */

#owl-demo .item img{
        display: block;
        width: 100%;
        height: auto;
    }

section.mainchunkf {width:100%;}
section.mainchunkp {width:100%;}

section.boxes {width:100%;display:block; margin-top:10px;margin-bottom:10px;padding:0; }
section.boxes aside {width:16.66%;float:left; text-align:left;margin-bottom:0px;}

section.boxes aside a {text-decoration:none; color:#fff;}
section.boxes aside p {margin:5px 10px 5px 10px;text-align:center;font-weight:bold; }
section.boxes aside a:hover {text-decoration:underline;}

section.boxes aside .content {margin-top:0px; margin-bottom:5px; padding-top:0px; }

section.boxes aside .content {position:relative; width:98%; margin-left:1%;margin-right:1%; float: left; background-color:#000;color:#fff;}

section.newsitem {width:75%; float:left; margin-top:20px;margin-bottom:0px;padding:0; }
section.newsitem aside {margin-left:5px; margin-right:20px;}
section.newsitem aside img {max-width:70%; float:right; margin:0px 0px 20px 20px;}
section.newsitem aside .quoteblock {display:block; float:none; width:90%; background-color: #999; margin:20px auto 20px auto; padding: 10px 10px 2px 10px;}
section.newsitem aside iframe {display:block; float:none; max-width:100%;margin:20px auto 20px auto;}

/* Section Atmosphere */

section.indepth {width:25%; float:left; margin:20px 0 0 0; color:#fff}
section.indepth .sidecontent aside img {max-width:100%;}
section.indepth .sidecontent aside a {text-decoration:none; color:#fff;}
section.indepth .sidecontent aside {margin: 0px 0px 10px 10px;}
section.indepth .sidecontent aside .sidebox {padding:5px 15px 5px 15px; background-color:#222;}
section.indepth .sidecontent aside .sidebox p {margin:0;font-weight:bold;}

/* Footer */

footer {font-size:.8em; padding:20px 10px 10px 0px; color:#000; clear:both;}

/*  Media Queries    */

@media screen and (max-width:1205px) {

  section.mainchunkf {margin-left:5px; margin-right:5px; width:auto;}
  section.mainchunkp {margin-left:5px; margin-right:5px; width:auto;}

  #page { padding: 0 3px 0 3px;}
}

@media screen and (max-width:1100px) {
   h1 { font-size:2.5em;}
section.boxes aside {width:20%;}
header div.hero h2 {font-size:1.2em;}
}

@media screen and (max-width:900px) {

  section.newsitem aside img {display:block; float:none; max-width:100%; margin:0px auto 20px auto;}
  section.boxes { width:100%; float:none;}
  section.boxes aside {width:25%;}

  section.newsitem { width:100%; float:none;}
  section.indepth {width:100%; float:none;}
  section.newsitem aside {margin-left:0px; margin-right:0px;}

  section.indepth aside {float:left;margin-right:10px;}
}

@media screen and (max-width:850px) {
  header {height:auto;padding:0px 0 0px 0;}
  header img {max-width:100%; margin: 10px auto; height:auto;float:none; clear:both;}
  header div.hero {height:auto; padding: 10px 10px 25px 10px; text-align:center;}

   h1 { font-size:2em;}
}

@media screen and (max-width:720px) {

section.boxes aside {width:33.33%;}
}

@media screen and (max-width:550px) {

section.boxes aside {width:50%;}
}

@media screen and (max-width:464px) {

   h1 { font-size:1.4em;}
   h3 { margin-bottom:0px;}
   a.btn {font-size:.9em;}

   footer div.content {display:block;margin-top:15px;}
   footer div.content a {margin: 0 20px 0 0;}
}

@media screen and (max-width:360px) {

    section.boxes aside {width:100%;}
    footer::after {content:''; display:block; clear:both;}
    footer div.content a {
    	display:inline-block;
        margin: 0 0 10px 0;
        float:left;
        clear:both;}
}