/*******************************************************************************
 * _layout.scss
 *
 * Styling of the "simple" layout demonstrating the Compass grid extension Susy
 * and building mobile first layouts.
 ******************************************************************************/
/**
 * $ISLAND
 */
/**
 * $ARROW
 */
/**
 * $HLIST
 */
body {
  background: transparent url('../../../images/diagonal.png?1383781967') left top repeat;
}

.l-constrained {
  width: 95%;
  margin: 0 auto;
}

.l-container {
  max-width: 1200px;
  margin: 0 auto;
}
.l-container:after {
  content: "";
  display: table;
  clear: both;
}

.l-container.l-container-overwidth {
  max-width: 1300px;
  padding: 0;
}

.l-header-wrap:after {
  content: "";
  display: table;
  clear: both;
}

.l-header-right {
  width: 100%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
}
@media (min-width: 44em) {
  .l-header-right {
    width: 100%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}
@media (min-width: 70em) {
  .l-header-right {
    width: 71.83099%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}

.l-branding {
  width: 100%;
  clear: right;
  float: right;
  margin-right: 0%;
}
@media (min-width: 44em) {
  .l-branding {
    width: 23.40426%;
    float: left;
    margin-right: -100%;
    margin-left: 0%;
    clear: none;
  }
}
@media (min-width: 70em) {
  .l-branding {
    width: 21.12676%;
    float: left;
    margin-right: -100%;
    margin-left: 0%;
    clear: none;
  }
}

/*
.l-banner {
	@include grid-span(4,1);
	@include breakpoint($tab,true) {
		@include grid-span(12,1,$output-style:'float');
	}
	@include breakpoint($desk,true) {
		@include grid-span(18,1,$output-style:'float');
	}
}
*/
.l-content {
  width: 100%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
}
@media (min-width: 44em) {
  .l-content {
    width: 65.95745%;
    float: left;
    margin-right: -100%;
    margin-left: 0%;
    clear: none;
  }
}
@media (min-width: 70em) {
  .l-content {
    width: 66.19718%;
    float: left;
    margin-right: -100%;
    margin-left: 0%;
    clear: none;
  }
}

.l-sidebar-first {
  width: 100%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
}
@media (min-width: 44em) {
  .l-sidebar-first {
    width: 31.91489%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}
@media (min-width: 70em) {
  .l-sidebar-first {
    width: 32.39437%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}

.l-prefix-first {
  width: 100%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
}
@media (min-width: 44em) {
  .l-prefix-first {
    width: 31.91489%;
    float: left;
    margin-right: -100%;
    margin-left: 0%;
    clear: none;
  }
}
@media (min-width: 70em) {
  .l-prefix-first {
    width: 32.39437%;
    float: left;
    margin-right: -100%;
    margin-left: 0%;
    clear: none;
  }
}

.l-prefix-second {
  width: 100%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
}
@media (min-width: 44em) {
  .l-prefix-second {
    width: 31.91489%;
    float: left;
    margin-right: -100%;
    margin-left: 34.04255%;
    clear: none;
  }
}
@media (min-width: 70em) {
  .l-prefix-second {
    width: 32.39437%;
    float: left;
    margin-right: -100%;
    margin-left: 33.80282%;
    clear: none;
  }
}

.l-prefix-third {
  width: 100%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
}
@media (min-width: 44em) {
  .l-prefix-third {
    width: 31.91489%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}
@media (min-width: 70em) {
  .l-prefix-third {
    width: 32.39437%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}

.l-titlebox.l-has-sidebar {
  width: 100%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
}
@media (min-width: 44em) {
  .l-titlebox.l-has-sidebar {
    width: 65.95745%;
    float: left;
    margin-right: -100%;
    margin-left: 0%;
    clear: none;
  }
}
@media (min-width: 70em) {
  .l-titlebox.l-has-sidebar {
    width: 66.19718%;
    float: left;
    margin-right: -100%;
    margin-left: 0%;
    clear: none;
  }
}

.l-titlebox-right {
  width: 100%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
}
@media (min-width: 44em) {
  .l-titlebox-right {
    width: 31.91489%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}
@media (min-width: 70em) {
  .l-titlebox-right {
    width: 32.39437%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}

.l-footer:after {
  content: "";
  display: table;
  clear: both;
}

.l-footer-first {
  width: 100%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
}
@media (min-width: 44em) {
  .l-footer-first {
    width: 23.40426%;
    float: left;
    margin-right: -100%;
    margin-left: 0%;
    clear: none;
  }
}
@media (min-width: 70em) {
  .l-footer-first {
    width: 21.12676%;
    float: left;
    margin-right: -100%;
    margin-left: 0%;
    clear: none;
  }
}

.l-footer-second {
  width: 100%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
}
@media (min-width: 44em) {
  .l-footer-second {
    width: 65.95745%;
    float: left;
    margin-right: -100%;
    margin-left: 25.53191%;
    clear: none;
  }
}
@media (min-width: 70em) {
  .l-footer-second {
    width: 54.92958%;
    float: left;
    margin-right: -100%;
    margin-left: 22.53521%;
    clear: none;
  }
}