.layout-3col {
  margin-left: -20px;
  margin-right: -20px;
  padding-left: 0;
  padding-right: 0;
  padding-left: 20px;
  padding-right: 20px;
  /*
  @include zen-respond-to(m) {
    // Since our container's context is "flow" and we changed the gutter size,
    // we need to re-apply the container's negative left/right margins.
    @include zen-grid-container($context: flow);

    &__full,
    &__left-content,
    &__right-content,
    &__left-sidebar,
    &__right-sidebar {
      @include zen-grid-item(2, 1);
      // Since we changed the gutter size for this media query, we need to
      // re-apply the padding to every grid item.
      @include zen-apply-gutter-padding();
    }

    &__first-left-sidebar,
    &__col-1,
    &__col-3,
    &__col-x:nth-child(2n + 1) {
      @include zen-grid-item(1, 1);
      @include zen-apply-gutter-padding();
    }

    &__second-left-sidebar,
    &__col-2,
    &__col-4,
    &__col-x:nth-child(2n) {
      // Since this inherits from the mobile layout, we have to explicitly turn
      // off the new-row mixin.
      @include zen-new-row(none);
      @include zen-grid-item(1, 2);
      @include zen-apply-gutter-padding();
    }
  }
  */
}

.layout-3col:before {
  content: "";
  display: table;
}

.layout-3col:after {
  content: "";
  display: table;
  clear: both;
}

@media (min-width: 0) and (max-width: 3200px) {
  .layout-3col__full, .layout-3col__left-content, .layout-3col__right-content, .layout-3col__left-sidebar, .layout-3col__right-sidebar, .layout-3col__first-left-sidebar, .layout-3col__second-left-sidebar, .layout-3col__col-1, .layout-3col__col-2, .layout-3col__col-3, .layout-3col__col-4, .layout-3col__col-x {
    padding-left: 20px;
    padding-right: 20px;
  }
  .layout-3col__full {
    clear: both;
    float: left;
    width: 100%;
    margin-left: 0%;
    margin-right: -100%;
    padding-left: 0;
    padding-right: 0;
  }
  [dir="rtl"] .layout-3col__full {
    float: right;
    margin-right: 0%;
    margin-left: -100%;
  }
  .layout-3col__left-content {
    clear: both;
    float: left;
    width: 66.66667%;
    margin-left: 0%;
    margin-right: -100%;
    padding-left: 0;
  }
  [dir="rtl"] .layout-3col__left-content {
    float: right;
    margin-right: 0%;
    margin-left: -100%;
  }
  .layout-3col__right-content {
    clear: both;
    float: left;
    width: 66.66667%;
    margin-left: 33.33333%;
    margin-right: -100%;
    padding-right: 0;
  }
  [dir="rtl"] .layout-3col__right-content {
    float: right;
    margin-right: 33.33333%;
    margin-left: -100%;
  }
  .layout-3col__left-sidebar, .layout-3col__first-left-sidebar, .layout-3col__second-left-sidebar {
    clear: right;
    float: right;
    width: 33.33333%;
    margin-right: 66.66667%;
    margin-left: -100%;
    padding-left: 0;
  }
  [dir="rtl"] .layout-3col__left-sidebar, [dir="rtl"] .layout-3col__first-left-sidebar, [dir="rtl"] .layout-3col__second-left-sidebar {
    clear: left;
  }
  [dir="rtl"] .layout-3col__left-sidebar, [dir="rtl"] .layout-3col__first-left-sidebar, [dir="rtl"] .layout-3col__second-left-sidebar {
    float: left;
    margin-left: 66.66667%;
    margin-right: -100%;
  }
  .layout-3col__right-sidebar {
    clear: right;
    float: right;
    width: 33.33333%;
    margin-right: 0%;
    margin-left: -100%;
    padding-right: 0;
  }
  [dir="rtl"] .layout-3col__right-sidebar {
    clear: left;
  }
  [dir="rtl"] .layout-3col__right-sidebar {
    float: left;
    margin-left: 0%;
    margin-right: -100%;
  }
  .layout-3col__col-1, .layout-3col__col-x:nth-child(3n+1) {
    clear: both;
    float: left;
    width: 33.33333%;
    margin-left: 0%;
    margin-right: -100%;
    padding-left: 0;
  }
  [dir="rtl"] .layout-3col__col-1, [dir="rtl"] .layout-3col__col-x:nth-child(3n+1) {
    float: right;
    margin-right: 0%;
    margin-left: -100%;
  }
  .layout-3col__col-2, .layout-3col__col-x:nth-child(3n+2) {
    clear: none;
    float: left;
    width: 33.33333%;
    margin-left: 33.33333%;
    margin-right: -100%;
  }
  [dir="rtl"] .layout-3col__col-2, [dir="rtl"] .layout-3col__col-x:nth-child(3n+2) {
    float: right;
    margin-right: 33.33333%;
    margin-left: -100%;
  }
  .layout-3col__col-3, .layout-3col__col-x:nth-child(3n) {
    clear: none;
    float: left;
    width: 33.33333%;
    margin-left: 66.66667%;
    margin-right: -100%;
    padding-right: 0;
  }
  [dir="rtl"] .layout-3col__col-3, [dir="rtl"] .layout-3col__col-x:nth-child(3n) {
    float: right;
    margin-right: 66.66667%;
    margin-left: -100%;
  }
  .layout-3col__col-4 {
    display: none;
  }
}

@media (min-width: 0) and (max-width: 767px) {
  .layout-3col__full, .layout-3col__left-content, .layout-3col__right-content, .layout-3col__left-sidebar, .layout-3col__right-sidebar, .layout-3col__first-left-sidebar, .layout-3col__second-left-sidebar, .layout-3col__col-1, .layout-3col__col-2, .layout-3col__col-3, .layout-3col__col-4, .layout-3col__col-x {
    clear: both;
    padding-left: 10px;
    padding-right: 10px;
    float: left;
    width: 100%;
    margin-left: 0%;
    margin-right: -100%;
    padding-left: 0;
    padding-right: 0;
  }
  [dir="rtl"] .layout-3col__full, [dir="rtl"] .layout-3col__left-content, [dir="rtl"] .layout-3col__right-content, [dir="rtl"] .layout-3col__left-sidebar, [dir="rtl"] .layout-3col__right-sidebar, [dir="rtl"] .layout-3col__first-left-sidebar, [dir="rtl"] .layout-3col__second-left-sidebar, [dir="rtl"] .layout-3col__col-1, [dir="rtl"] .layout-3col__col-2, [dir="rtl"] .layout-3col__col-3, [dir="rtl"] .layout-3col__col-4, [dir="rtl"] .layout-3col__col-x {
    float: right;
    margin-right: 0%;
    margin-left: -100%;
  }
}

.layout-3col__grid-item-container {
  padding-left: 0;
  padding-right: 0;
}

.layout-3col__grid-item-container:before {
  content: "";
  display: table;
}

.layout-3col__grid-item-container:after {
  content: "";
  display: table;
  clear: both;
}

.layout-80 {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  display: block;
  margin: 0 auto;
  max-width: 80%;
}

.layout-80:before {
  content: "";
  display: table;
}

.layout-80:after {
  content: "";
  display: table;
  clear: both;
}

.layout-80 > .group-left {
  clear: left;
  float: left;
  width: 50%;
  margin-left: 0%;
  margin-right: -100%;
  padding-left: 0;
  padding-right: 0;
}

[dir="rtl"] .layout-80 > .group-left {
  clear: right;
}

[dir="rtl"] .layout-80 > .group-left {
  float: right;
  margin-right: 0%;
  margin-left: -100%;
}

.layout-80 > .group-right {
  clear: none;
  float: left;
  width: 50%;
  margin-left: 50%;
  margin-right: -100%;
  padding-left: 0;
  padding-right: 0;
}

[dir="rtl"] .layout-80 > .group-right {
  float: right;
  margin-right: 50%;
  margin-left: -100%;
}

.layout-80 > .group-bottom,
.layout-80 > .group-top {
  clear: left;
  float: left;
  width: 100%;
  margin-left: 0%;
  margin-right: -100%;
  padding-left: 0;
  padding-right: 0;
}

[dir="rtl"] .layout-80 > .group-bottom, [dir="rtl"]
.layout-80 > .group-top {
  clear: right;
}

[dir="rtl"] .layout-80 > .group-bottom, [dir="rtl"]
.layout-80 > .group-top {
  float: right;
  margin-right: 0%;
  margin-left: -100%;
}

@media (min-width: 0) and (max-width: 991px) {
  .layout-80 {
    max-width: 90%;
  }
}

@media (min-width: 0) and (max-width: 767px) {
  .layout-80 {
    max-width: 100%;
    padding: 0 30px;
    width: 100%;
  }
}

.layout-100 .col-wrapper {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  padding-left: 40px;
  padding-right: 40px;
}

.layout-100 .col-wrapper:before {
  content: "";
  display: table;
}

.layout-100 .col-wrapper:after {
  content: "";
  display: table;
  clear: both;
}

.layout-100 .col-wrapper > .group-left {
  clear: left;
  float: left;
  width: 50%;
  margin-left: 0%;
  margin-right: -100%;
  padding-left: 0;
  padding-right: 0;
}

[dir="rtl"] .layout-100 .col-wrapper > .group-left {
  clear: right;
}

[dir="rtl"] .layout-100 .col-wrapper > .group-left {
  float: right;
  margin-right: 0%;
  margin-left: -100%;
}

.layout-100 .col-wrapper > .group-right {
  clear: none;
  float: left;
  width: 50%;
  margin-left: 50%;
  margin-right: -100%;
  padding-left: 0;
  padding-right: 0;
}

[dir="rtl"] .layout-100 .col-wrapper > .group-right {
  float: right;
  margin-right: 50%;
  margin-left: -100%;
}

.layout-center {
  padding-left: 20px;
  padding-right: 20px;
  margin: 0 auto;
  max-width: 1140px;
}

@media (min-width: 0) and (max-width: 991px) {
  .layout-center {
    padding-left: 0;
    padding-right: 0;
  }
}

.layout-center--shared-grid,
.layout-center.layout-3col {
  padding-left: 0;
  padding-right: 0;
}

.layout-swap {
  position: relative;
}

@media (min-width: 0) and (max-width: 374px) {
  .layout-swap__top {
    position: absolute;
    top: 0;
    height: 40px;
    width: 100%;
  }
}

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