/* CSS Document for Screens */

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

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

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

/* 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}
b {font-weight:bold;}

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:105px; background: url(images/dreams_ttl.gif) no-repeat left top; position: relative; text-align:right;}
header div.hero h2 {margin: 0 10px 0 0;}
header div.hero h3 {margin:0 0px 0 0;}
header div.hero {width:100%; position:absolute; top:50px;}

/* Section All */

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

/* Section Main */

section.mainchunk {width:100%;}

section.boxes {width:100%; float:left; margin-top:20px;margin-bottom:30px;padding:0; }
section.boxes aside {width:33.33%;float:left; text-align:left;margin-bottom:0px;}
section.boxes aside a {text-decoration:none; color:#fff;}

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

section.boxes aside .content h3 {margin:14px 10px 10px 10px;}

section.boxes aside .content {position:relative; width:96%; margin-left:2%;margin-right:2%; float: left; }

section.boxes aside .content:before {    content:'';
    padding-top:100%;
    display:inline-block; vertical-align:middle;}

section.boxes aside .content .greybox {position:absolute;			top: 85%;
			left: 0px;
			bottom: 0;
			right: 0;height:15%;background-color:rgba(40,40,40,0.85);color:#fff;}

section.boxes aside .content.h .greybox {position:absolute;			top: 30%;
      left: 20px;
      bottom: 0;
      right: 0;height:70%; background-color:transparent; color:#fff;}

section.boxes aside .content.a {background: url(images/drms_tile.jpg) no-repeat left top; background-size:100%;}
section.boxes aside .content.b {background: url(images/lilm_tile.jpg) no-repeat left top; background-size:100%;}
section.boxes aside .content.c {background: url(images/tgw_tile.jpg) no-repeat left top; background-size:100%;}
section.boxes aside .content.d {background: url(images/dc-logo-curve-blk.gif) no-repeat left top; background-size:100%;}
section.boxes aside .content.e {background: url(images/ai-logo-curve-blk.gif) no-repeat left top; background-size:100%;}
section.boxes aside .content.f {background: url(images/psfj_tile.jpg) no-repeat left top; background-size:100%;}
section.boxes aside .content.g {background: url(images/aslm_tile.jpg) no-repeat left top; background-size:100%;}
section.boxes aside .content.h {background-size:100%; background-color: #111;}

section.boxes aside .advert {margin-top:0px; margin-bottom:17px; padding-top:0px;
                 background: url(images/malevich.gif) no-repeat left top; background-size:100%;
                                    position:relative; width:96%; margin-left:2%;margin-right:2%; float: left; }

section.boxes aside .advert:before {    content:'';
    padding-top:100%;
    display:inline-block; vertical-align:middle;}

section.boxes aside .advert .adbox {position:absolute; top: 10%;
      left: 0px;
      bottom: 0;
      right: 0;height:90%;}


section.boxes aside h3 {margin:5px 10px 5px 10px;text-align:center; }
section.boxes aside h3 a {color:#000; text-decoration:none;}
section.boxes aside h3 a:hover {text-decoration:underline;}

/* Footer */

footer {font-size:.8em; margin:0; color:#999;float:none;}
footer .content {display:inline; }

/*  Media Queries    */

@media screen and (max-width:1200px) {
  header div.hero h2 {margin: 0 15px 0 0;}
  section.mainchunk {margin-left:5px; margin-right:5px; width:auto;}
  section.boxes .content h3 {font-size:1em;}
}

@media screen and (max-width:1000px) {
  section.boxes aside {width:50%;}
  section.boxes .content h3 {font-size:1.3em;}
}

@media screen and (max-width:900px) {
  section.boxes { width:100%; float:none;}
}

@media screen and (max-width:800px) {
  section.boxes .content h3 {font-size:1em;}
}

@media screen and (max-width:660px) {
  section.boxes .content h3 {font-size:0.85em;}
}

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

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

   section.boxes aside {width:100%; float:none; text-align:left;}
   section.boxes .content {height:auto; padding-bottom:0px;}
   section.boxes .content {width:100%; margin:0px 0px 20px 0;}
   section.boxes .content h3 {font-size:1.3em;}

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


@media screen and (max-width:480px) {
  header {text-align:center;}
  header div.hero h2 {margin: 0 0 0 0; font-size:1.2em;}
}

@media screen and (max-width:425px) {
    section.boxes .content h3 {font-size:1em;}

    footer::after {content:''; display:block; clear:both;}
    footer div.content a {
    	display:inline-block;
        margin: 0 0 10px 0;
        float:left;
        clear:both;}
}

@media screen and (max-width:345px) {
    section.boxes .content h3 {font-size:.85em;}
    header div.hero h2 {font-size:1em;}
}