/* Adapted from Editorial by HTML5 UP / @ajlkn. https://html5up.net/editorial
 * Creative Commons Attribution 3.0: https://creativecommons.org/licenses/by/3.0/
 * Scoped banner/posts components; typography, imagery, spacing and content modified for Zion Automation. */

.za-editorial .posts {
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -moz-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 0 2em -6em;
  width: calc(100% + 6em); }
  .za-editorial .posts article {
    -moz-flex-grow: 0;
    -webkit-flex-grow: 0;
    -ms-flex-grow: 0;
    flex-grow: 0;
    -moz-flex-shrink: 1;
    -webkit-flex-shrink: 1;
    -ms-flex-shrink: 1;
    flex-shrink: 1;
    margin: 0 0 6em 6em;
    position: relative;
    width: calc(33.33333% - 6em); }
    .za-editorial .posts article:before {
      background: rgba(210, 215, 217, 0.75);
      content: '';
      display: block;
      height: calc(100% + 6em);
      left: -3em;
      position: absolute;
      top: 0;
      width: 1px; }
    .za-editorial .posts article:after {
      background: rgba(210, 215, 217, 0.75);
      bottom: -3em;
      content: '';
      display: block;
      height: 1px;
      position: absolute;
      right: 0;
      width: calc(100% + 6em); }
    .za-editorial .posts article > :last-child {
      margin-bottom: 0; }
    .za-editorial .posts article .image {
      display: block;
      margin: 0 0 2em 0; }
      .za-editorial .posts article .image img {
        display: block;
        width: 100%; }
  @media screen and (min-width: 1681px) {
    .za-editorial .posts article:nth-child(3n + 1):before {
      display: none; }
    .za-editorial .posts article:nth-child(3n + 1):after {
      width: 100%; }
    .za-editorial .posts article:nth-last-child(1), .za-editorial .posts article:nth-last-child(2), .za-editorial .posts article:nth-last-child(3) {
      margin-bottom: 0; }
      .za-editorial .posts article:nth-last-child(1):before, .za-editorial .posts article:nth-last-child(2):before, .za-editorial .posts article:nth-last-child(3):before {
        height: 100%; }
      .za-editorial .posts article:nth-last-child(1):after, .za-editorial .posts article:nth-last-child(2):after, .za-editorial .posts article:nth-last-child(3):after {
        display: none; } }
  @media screen and (max-width: 1680px) {
    .za-editorial .posts article {
      width: calc(50% - 6em); }
      .za-editorial .posts article:nth-last-child(3) {
        margin-bottom: 6em; } }
  @media screen and (min-width: 481px) and (max-width: 1680px) {
    .za-editorial .posts article:nth-child(2n + 1):before {
      display: none; }
    .za-editorial .posts article:nth-child(2n + 1):after {
      width: 100%; }
    .za-editorial .posts article:nth-last-child(1), .za-editorial .posts article:nth-last-child(2) {
      margin-bottom: 0; }
      .za-editorial .posts article:nth-last-child(1):before, .za-editorial .posts article:nth-last-child(2):before {
        height: 100%; }
      .za-editorial .posts article:nth-last-child(1):after, .za-editorial .posts article:nth-last-child(2):after {
        display: none; } }
  @media screen and (max-width: 736px) {
    .za-editorial .posts {
      margin: 0 0 2em -4.5em;
      width: calc(100% + 4.5em); }
      .za-editorial .posts article {
        margin: 0 0 4.5em 4.5em;
        width: calc(50% - 4.5em); }
        .za-editorial .posts article:before {
          height: calc(100% + 4.5em);
          left: -2.25em; }
        .za-editorial .posts article:after {
          bottom: -2.25em;
          width: calc(100% + 4.5em); }
        .za-editorial .posts article:nth-last-child(3) {
          margin-bottom: 4.5em; } }
  @media screen and (max-width: 480px) {
    .za-editorial .posts {
      margin: 0 0 2em 0;
      width: 100%; }
      .za-editorial .posts article {
        margin: 0 0 4.5em 0;
        width: 100%; }
        .za-editorial .posts article:before {
          display: none; }
        .za-editorial .posts article:after {
          width: 100%; }
        .za-editorial .posts article:last-child {
          margin-bottom: 0; }
          .za-editorial .posts article:last-child:after {
            display: none; } }


.za-editorial #banner {
  padding: 6em 0 4em 0 ;
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex; }
  .za-editorial #banner h1 {
    margin-top: -0.125em; }
  .za-editorial #banner .content {
    -moz-flex-grow: 1;
    -webkit-flex-grow: 1;
    -ms-flex-grow: 1;
    flex-grow: 1;
    -moz-flex-shrink: 1;
    -webkit-flex-shrink: 1;
    -ms-flex-shrink: 1;
    flex-shrink: 1;
    width: 50%; }
  .za-editorial #banner .image {
    -moz-flex-grow: 0;
    -webkit-flex-grow: 0;
    -ms-flex-grow: 0;
    flex-grow: 0;
    -moz-flex-shrink: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-shrink: 0;
    flex-shrink: 0;
    display: block;
    margin: 0 0 2em 4em;
    width: 50%; }
    .za-editorial #banner .image img {
      height: 100%;
      -moz-object-fit: cover;
      -webkit-object-fit: cover;
      -ms-object-fit: cover;
      object-fit: cover;
      -moz-object-position: center;
      -webkit-object-position: center;
      -ms-object-position: center;
      object-position: center;
      width: 100%; }
  @media screen and (orientation: portrait) {
    .za-editorial #banner {
      -moz-flex-direction: column-reverse;
      -webkit-flex-direction: column-reverse;
      -ms-flex-direction: column-reverse;
      flex-direction: column-reverse; }
      .za-editorial #banner h1 br {
        display: none; }
      .za-editorial #banner .content {
        -moz-flex-grow: 0;
        -webkit-flex-grow: 0;
        -ms-flex-grow: 0;
        flex-grow: 0;
        -moz-flex-shrink: 0;
        -webkit-flex-shrink: 0;
        -ms-flex-shrink: 0;
        flex-shrink: 0;
        width: 100%; }
      .za-editorial #banner .image {
        -moz-flex-grow: 0;
        -webkit-flex-grow: 0;
        -ms-flex-grow: 0;
        flex-grow: 0;
        -moz-flex-shrink: 0;
        -webkit-flex-shrink: 0;
        -ms-flex-shrink: 0;
        flex-shrink: 0;
        margin: 0 0 4em 0;
        height: 25em;
        max-height: 50vh;
        min-height: 18em;
        width: 100%; } }
  @media screen and (orientation: portrait) and (max-width: 480px) {
    .za-editorial #banner .image {
      max-height: 35vh; } }