/*******************************************************************************
 * grid.layout.scss
 *
 * Styling of the "simple" layout demonstrating the Compass grid extension Susy
 * and building mobile first layouts.
 ******************************************************************************/
.l-header,
.l-main,
.l-promo,
.l-footer,
.l-hero,
.l-colophon {
  max-width: 1005px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 15px;
  margin-bottom: 20px; }
  .l-header:after,
  .l-main:after,
  .l-promo:after,
  .l-footer:after,
  .l-hero:after,
  .l-colophon:after {
    content: " ";
    display: block;
    clear: both; }

.l-branding {
  width: 21.05263%;
  float: left;
  margin-right: 5.26316%; }

.l-main,
.l-footer {
  margin-bottom: 0; }

.l-header {
  margin: 0 0 24px 0; }
  .page-blog .l-header {
    margin-bottom: 12px; }

.l-promo {
  margin: 0 0 0 0; }

.l-header {
  padding: 45px 15px 0 15px; }

.l-region--header {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  height: 45px;
  width: 100%;
  background-color: #39A8C8;
  z-index: 1000;
  margin: 0; }
  .l-region--header a {
    color: #fff;
    padding: 0 15px;
    display: block; }

.toolbar .l-region--header,
.toolbar #navigation-toggle {
  top: 70px; }

.toolbar-drawer .l-region--header,
.toolbar-drawer #navigation-toggle {
  top: 105px; }

.l-hero {
  padding: 0; }

.l-region--highlighted,
.l-region--help,
.l-region--sidebar-first,
.l-region--sidebar-second {
  margin-bottom: 20px; }

.has-sidebar-first .l-content {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
  margin-right: -100%; }

.has-sidebar-first .l-region--sidebar-first {
  width: 47.36842%;
  float: left;
  margin-right: 5.26316%;
  margin-left: -100%; }
  .show-sidebar-first .has-sidebar-first .l-region--sidebar-first {
    margin-left: 0; }

.has-two-sidebars .l-content {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
  margin-right: -100%; }

.has-two-sidebars .l-region--sidebar-second {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
  clear: left; }
  .show-sidebar-first .has-two-sidebars .l-region--sidebar-second {
    margin-left: 52.63158%; }

.view-front-page-slider {
  width: auto; }

#block-menu-menu-utility-menu,
#block-views-exp-skw-search-page {
  display: none; }

.hidden-for-mobile {
  display: none; }

.show-for-mobile {
  display: block; }

.menu-block-3 > ul.menu > li {
  width: 47.36842%;
  float: left;
  margin-right: 5.26316%;
  margin-left: 0;
  margin-bottom: 20px; }
  .menu-block-3 > ul.menu > li.menu-mlid-567, .menu-block-3 > ul.menu > li.menu-mlid-509, .menu-block-3 > ul.menu > li.utility-menu {
    width: 47.36842%;
    float: right;
    margin-right: 0;
    border: none; }

@media (min-width: 768px) {
  .l-header,
  .l-main,
  .l-promo,
  .l-footer,
  .l-hero,
  .l-colophon {
    max-width: 1005px;
    margin-left: auto;
    margin-right: auto; }
    .l-header:after,
    .l-main:after,
    .l-promo:after,
    .l-footer:after,
    .l-hero:after,
    .l-colophon:after {
      content: " ";
      display: block;
      clear: both; }
  .l-header {
    padding: 25px 15px 0 15px; }
  .not-front .l-content {
    padding: 40px 0 20px 0; }
  .not-front .l-region--sidebar-first,
  .not-front .l-region--sidebar-second {
    padding: 40px 0 0 0; }
  .not-front .l-header {
    margin-bottom: 10px; }
  .l-branding {
    width: 23.72881%;
    float: left;
    margin-right: 1.69492%; }
  .l-region--header {
    width: 74.57627%;
    float: right;
    margin-right: 0;
    position: static;
    background: none;
    height: auto;
    padding: 0;
    margin: 0; }
  .l-region--navigation {
    clear: both; }
  .has-sidebar-first .l-content {
    width: 74.57627%;
    float: right;
    margin-right: 0; }
  .has-sidebar-first .l-region--sidebar-first {
    width: 23.72881%;
    float: left;
    margin-right: 1.69492%;
    margin-left: 0; }
  .has-sidebar-second .l-content {
    width: 66.10169%;
    float: left;
    margin-right: 1.69492%; }
  .has-sidebar-second .l-region--sidebar-second {
    width: 32.20339%;
    float: right;
    margin-right: 0;
    clear: none; }
  .has-two-sidebars .l-content {
    width: 49.15254%;
    float: left;
    margin-right: 1.69492%; }
  .has-two-sidebars .l-region--sidebar-first,
  .has-two-sidebars .l-region--sidebar-second {
    width: 23.72881%;
    float: left;
    margin-right: 1.69492%; }
  .has-two-sidebars .l-region--sidebar-second {
    float: right;
    margin-right: 0; }
    .show-sidebar-first .has-two-sidebars .l-region--sidebar-second {
      margin-left: 0%; }
  .menu-block-3 > ul.menu > li {
    width: 15.25424%;
    float: left;
    margin-right: 1.69492%;
    margin-left: 0;
    margin-bottom: 20px; }
    .menu-block-3 > ul.menu > li.menu-mlid-567, .menu-block-3 > ul.menu > li.menu-mlid-509 {
      width: 15.25424%;
      float: left;
      margin-right: 1.69492%; }
    .menu-block-3 > ul.menu > li.utility-menu {
      width: 15.25424%;
      float: right;
      margin-right: 0; }
  #block-menu-menu-utility-menu,
  #block-views-exp-skw-search-page {
    display: block; }
  .hidden-for-mobile {
    display: block; }
  .show-for-mobile {
    display: none; }
  .block--block-13 .call-out-left {
    width: 66.10169%;
    float: left;
    margin-right: 1.69492%; }
  .block--block-13 .call-out-right {
    width: 32.20339%;
    float: right;
    margin-right: 0;
    padding-top: 22px; }
  .columns.one {
    width: 6.77966%;
    float: left;
    margin-right: 1.69492%; }
  .columns.two {
    width: 15.25424%;
    float: left;
    margin-right: 1.69492%; }
  .columns.three {
    width: 23.72881%;
    float: left;
    margin-right: 1.69492%; }
  .columns.four {
    width: 32.20339%;
    float: left;
    margin-right: 1.69492%; }
  .columns.five {
    width: 40.67797%;
    float: left;
    margin-right: 1.69492%; }
  .columns.six {
    width: 49.15254%;
    float: left;
    margin-right: 1.69492%; }
  .columns.seven {
    width: 57.62712%;
    float: left;
    margin-right: 1.69492%; }
  .columns.eight {
    width: 66.10169%;
    float: left;
    margin-right: 1.69492%; }
  .columns.nine {
    width: 74.57627%;
    float: left;
    margin-right: 1.69492%; }
  .columns.ten {
    width: 83.05085%;
    float: left;
    margin-right: 1.69492%; }
  .columns.eleven {
    width: 91.52542%;
    float: left;
    margin-right: 1.69492%; }
  .columns.twelve {
    width: 100%;
    float: left;
    margin-left: 0;
    margin-right: 0; }
  .columns:last-child {
    float: right;
    margin-right: 0; }
  .cols-2 {
    -webkit-column-count: 2;
    -ms-column-count: 2;
    -moz-column-count: 2;
    column-count: 2; }
  .cols-3 {
    -webkit-column-count: 3;
    -ms-column-count: 3;
    -moz-column-count: 3;
    column-count: 3; }
  .cols-4 {
    -webkit-column-count: 4;
    -ms-column-count: 4;
    -moz-column-count: 4;
    column-count: 4; }
  .cols-5 {
    -webkit-column-count: 5;
    -ms-column-count: 5;
    -moz-column-count: 5;
    column-count: 5; } }

@media (min-width: 1330px) {
  .view-front-page-slider {
    width: 1330px;
    height: 445px;
    position: relative;
    left: 50%;
    margin: 0 0 35px -665px; }
    .view-front-page-slider .field--name-field-flexbox-image img {
      height: auto; } }
