/*******************************************************************************
 * homepage.layout.scss
 ******************************************************************************/
/* Scott's Dope Mixins v0.3*/
/* A less configurable but more areodynamic transition mixin */
/* Removes margin and padding and list style from lists */
/* Lightens background color on hover */
/* Darkens background color on hover */
/* A re-useable font mixin for whatever fonts you are using, allows for an optional color argument */
/* Cross browser opacity */
/* REMS with a PX Fallback */
/* REQUIRES COMPASS */
/* Faster gradients, if a stop is not specified a -20 of the start
is assigned for you this may be adjustable in the near future */
body {
  background-color: #172b3c;
}
@media (min-width: 40em) {
  body {
    background-color: #D0D3D4;
  }
}
@media (min-width: 60em) {
  body {
    background-color: #D0D3D4;
  }
}

.wrapper {
  width: 100%;
  /* for IE 6/7 */
  *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
  /* non-JS fallback */
  *zoom: 1;
  overflow: hidden;
}
.wrapper:before, .wrapper:after {
  content: ".";
  display: block;
  height: 0;
  overflow: hidden;
}
.wrapper:after {
  clear: both;
}

.l-page {
  margin: 0 auto;
  position: relative;
}
@media (min-width: 40em) {
  .l-page {
    padding: 0;
  }
}
@media (min-width: 60em) {
  .l-page {
    padding: 0;
  }
}
@media (min-width: 60em) {
  .l-page {
    width: 1366px;
  }
}
@media (min-width: 60em) {
  .l-page {
    width: 1366px;
  }
}

.l-header {
  margin-bottom: 1em;
  position: relative;
}
.l-header .l-region {
  margin: 0 auto;
  padding: 0 1;
}
@media (min-width: 40em) {
  .l-header .l-region {
    padding: 0 1.4em;
  }
}
@media (min-width: 60em) {
  .l-header .l-region {
    padding: 0 1.4em;
  }
}
@media (min-width: 40em) {
  .l-header {
    position: fixed;
    z-index: 499;
    height: 100vh;
    margin-bottom: 0;
    width: 23%;
  }
}
@media (min-width: 60em) {
  .l-header {
    position: fixed;
    z-index: 499;
    height: 100vh;
    margin-bottom: 0;
    width: 23%;
  }
}
@media (min-width: 60em) {
  .l-header {
    width: 15%;
  }
}
@media (min-width: 60em) {
  .l-header {
    width: 15%;
  }
}

@media (min-width: 40em) {
  .screens .views-row {
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}
@media (min-width: 60em) {
  .screens .views-row {
    width: 75%;
    float: left;
    margin-right: -100%;
    margin-left: 0%;
    clear: none;
  }
}
@media (min-width: 60em) {
  .screens .views-row {
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}
@media (min-width: 60em) {
  .screens .views-row {
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}

.screens article {
  margin-bottom: 2em;
}
@media (min-width: 40em) {
  .screens article {
    width: 75%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}
@media (min-width: 60em) {
  .screens article {
    width: 56.25%;
    float: left;
    margin-right: -100%;
    margin-left: 18.75%;
    clear: none;
  }
}
@media (min-width: 60em) {
  .screens article {
    width: 81.25%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    margin-bottom: 0;
  }
}
@media (min-width: 60em) {
  .screens article {
    width: 81.25%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
    margin-bottom: 0;
  }
}