/* Containers */
.container {
  margin: 0 auto;
  max-width: 1280px;
  width: 90%;
}

/* @media only screen and (min-width: 601px) {
  .container {
    width: 85%;
  }
}

@media only screen and (min-width: 993px) {
  .container {
    width: 70%;
  }
} */

/* Rows */
.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
 /* grid-template-columns: repeat(12, minmax(0, 1fr));}*/
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  margin-bottom: 2rem;
}

/* Temp demo styles */
.grid-examples .row .col {
  background-color: #ffffff50;
  text-align: center;
}
.branding.col, .navigation.col {background: none;}
/* END Temp demo styles */

/* @media only screen and (max-width: 993px) {
   Columns -- 12 column grid - 0 - 601px */
  .col {
    grid-column: span 12;
  }
/* } */

/* Columns -- 12 column grid - 600px and below */
@media only screen and (max-width: 600px) {
  .col.ws-1 {grid-column: span 1;}
  .col.ws-2 {grid-column: span 2;}
  .col.ws-3 {grid-column: span 3;}
  .col.ws-4 {grid-column: span 4;}
  .col.ws-5 {grid-column: span 5;}
  .col.ws-6 {grid-column: span 6;}
  .col.ws-7 {grid-column: span 7;}
  .col.ws-8 {grid-column: span 8;}
  .col.ws-9 {grid-column: span 9;}
  .col.ws-10 {grid-column: span 10;}
  .col.ws-11 {grid-column: span 11;}
}
/* Columns -- 12 column grid - 601px and above */
@media only screen and (min-width: 601px) {
  .col.wm-1 {grid-column: span 1;}
  .col.wm-2 {grid-column: span 2;}
  .col.wm-3 {grid-column: span 3;}
  .col.wm-4 {grid-column: span 4;}
  .col.wm-5 {grid-column: span 5;}
  .col.wm-6 {grid-column: span 6;}
  .col.wm-7 {grid-column: span 7;}
  .col.wm-8 {grid-column: span 8;}
  .col.wm-9 {grid-column: span 9;}
  .col.wm-10 {grid-column: span 10;}
  .col.wm-11 {grid-column: span 11;}
  .col.wm-12 {grid-column: span 12;}
}
@media only screen and (min-width: 993px) {
  .col.wl-1 {grid-column: span 1;}
  .col.wl-2 {grid-column: span 2;}
  .col.wl-3 {grid-column: span 3;}
  .col.wl-4 {grid-column: span 4;}
  .col.wl-5 {grid-column: span 5;}
  .col.wl-6 {grid-column: span 6;}
  .col.wl-7 {grid-column: span 7;}
  .col.wl-8 {grid-column: span 8;}
  .col.wl-9 {grid-column: span 9;}
  .col.wl-10 {grid-column: span 10;}
  .col.wl-11 {grid-column: span 11;}
  .col.wl-12 {grid-column: span 12;}
}
/*TODO - Change to allow for medium and large with option for small */
@media only screen and (min-width: 601px) {
/* Column Start & End - Overriding column auto positioning */
.col-s-1 {grid-column-start: 1;}
.col-s-2 {grid-column-start: 2;}
.col-s-3 {grid-column-start: 3;}
.col-s-4 {grid-column-start: 4;}
.col-s-5 {grid-column-start: 5;}
.col-s-6 {grid-column-start: 6;}
.col-s-7 {grid-column-start: 7;}
.col-s-8 {grid-column-start: 8;}
.col-s-9 {grid-column-start: 9;}
.col-s-10 {grid-column-start: 10;}
.col-s-11 {grid-column-start: 11;}
.col-s-12 {grid-column-start: 12;}

.col-e-1 {grid-column-end: 2;}
.col-e-2 {grid-column-end: 3;}
.col-e-3 {grid-column-end: 4;}
.col-e-4 {grid-column-end: 5;}
.col-e-5 {grid-column-end: 6;}
.col-e-6 {grid-column-end: 7;}
.col-e-7 {grid-column-end: 8;}
.col-e-8 {grid-column-end: 9;}
.col-e-9 {grid-column-end: 10;}
.col-e-10 {grid-column-end: 11;}
.col-e-11 {grid-column-end: 12;}
.col-e-12 {grid-column-end: 13;}
}