/* _layout.scss */
/* ========================== LAYOUT CSS ================================ */
/* Span wrappers */
#headerWrapper, #contentWrapper, #footerWrapper {
  width: 100%; }

.widthWrapper {
  margin: auto;
  width: 100%;
  max-width: 800px;
  min-width: 10em; }

.fullWidth {
  width: 100%; }

/* ================================================== mobile size ================================================== */
.quarter {
  width: 100%; }

.third {
  width: 100%; }

.half {
  width: 100%; }

.twoThird {
  width: 100%; }

.threeQuarter {
  width: 100%; }

.thirdtohalf {
  width: 100%; }

.half.locked {
  width: 48%;
  float: left; }

.half.locked.lastModule {
  float: right; }

/* ================================================== Large ================================================== */
@media (min-width: 40em) {
  .quarter {
    width: 22%;
    float: left;
    margin-right: 3%; }

  .third {
    width: 30%;
    float: left;
    margin-right: 4%; }

  .third.full {
    width: 33.333%;
    margin-right: 0; }

  .half {
    width: 48%;
    float: left;
    margin-right: 4%; }

  .half.full {
    width: 50%;
    margin-right: 0; }

  .twoThird {
    width: 62%;
    float: left;
    margin-right: 4%; }

  .twoThird.lastModule {
    width: 66%; }

  .threeQuarter {
    width: 72%;
    float: left;
    margin-right: 3%; }

  .lastModule {
    float: right;
    margin-right: 0; } }

/*# sourceMappingURL=layout.css.map */