/* ==========================================================================
   Grid: minimal flexbox grid
   ==========================================================================
   Usage:
     <div class="grid-x grid-container">
       <div class="cell medium-6">…</div>
       <div class="cell medium-6">…</div>
     </div>
   Cells are full width ("small-12") until the named breakpoint kicks in:
     medium-* : 768px and up
     large-*  : 960px and up
   ========================================================================== */

.grid-container {
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
  padding-right: 0.625rem;
  padding-left: 0.625rem;
}

@media (min-width: 768px) {
  .grid-container {
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
  }
}

.grid-x {
  display: flex;
  flex-flow: row wrap;
}

.cell {
  flex: 0 0 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

/* --- column widths -------------------------------------------------------- */

.grid-x > .small-1 { width: 8.3333%; }
.grid-x > .small-2 { width: 16.6667%; }
.grid-x > .small-3 { width: 25%; }
.grid-x > .small-4 { width: 33.3333%; }
.grid-x > .small-5 { width: 41.6667%; }
.grid-x > .small-6 { width: 50%; }
.grid-x > .small-7 { width: 58.3333%; }
.grid-x > .small-8 { width: 66.6667%; }
.grid-x > .small-9 { width: 75%; }
.grid-x > .small-10 { width: 83.3333%; }
.grid-x > .small-11 { width: 91.6667%; }
.grid-x > .small-12 { width: 100%; }

@media (min-width: 768px) {
  .grid-x > .medium-1 { width: 8.3333%; }
  .grid-x > .medium-2 { width: 16.6667%; }
  .grid-x > .medium-3 { width: 25%; }
  .grid-x > .medium-4 { width: 33.3333%; }
  .grid-x > .medium-5 { width: 41.6667%; }
  .grid-x > .medium-6 { width: 50%; }
  .grid-x > .medium-7 { width: 58.3333%; }
  .grid-x > .medium-8 { width: 66.6667%; }
  .grid-x > .medium-9 { width: 75%; }
  .grid-x > .medium-10 { width: 83.3333%; }
  .grid-x > .medium-11 { width: 91.6667%; }
  .grid-x > .medium-12 { width: 100%; }
}

@media (min-width: 960px) {
  .grid-x > .large-1 { width: 8.3333%; }
  .grid-x > .large-2 { width: 16.6667%; }
  .grid-x > .large-3 { width: 25%; }
  .grid-x > .large-4 { width: 33.3333%; }
  .grid-x > .large-5 { width: 41.6667%; }
  .grid-x > .large-6 { width: 50%; }
  .grid-x > .large-7 { width: 58.3333%; }
  .grid-x > .large-8 { width: 66.6667%; }
  .grid-x > .large-9 { width: 75%; }
  .grid-x > .large-10 { width: 83.3333%; }
  .grid-x > .large-11 { width: 91.6667%; }
  .grid-x > .large-12 { width: 100%; }
}

/* --- column offsets ------------------------------------------------------- */

@media (min-width: 768px) {
  .grid-x > .medium-offset-1 { margin-left: 8.3333%; }
  .grid-x > .medium-offset-2 { margin-left: 16.6667%; }
  .grid-x > .medium-offset-3 { margin-left: 25%; }
  .grid-x > .medium-offset-4 { margin-left: 33.3333%; }
  .grid-x > .medium-offset-5 { margin-left: 41.6667%; }
  .grid-x > .medium-offset-6 { margin-left: 50%; }
  .grid-x > .medium-offset-7 { margin-left: 58.3333%; }
  .grid-x > .medium-offset-8 { margin-left: 66.6667%; }
  .grid-x > .medium-offset-9 { margin-left: 75%; }
  .grid-x > .medium-offset-10 { margin-left: 83.3333%; }
  .grid-x > .medium-offset-11 { margin-left: 91.6667%; }
}

@media (min-width: 960px) {
  .grid-x > .large-offset-1 { margin-left: 8.3333%; }
  .grid-x > .large-offset-2 { margin-left: 16.6667%; }
  .grid-x > .large-offset-3 { margin-left: 25%; }
  .grid-x > .large-offset-4 { margin-left: 33.3333%; }
  .grid-x > .large-offset-5 { margin-left: 41.6667%; }
  .grid-x > .large-offset-6 { margin-left: 50%; }
  .grid-x > .large-offset-7 { margin-left: 58.3333%; }
  .grid-x > .large-offset-8 { margin-left: 66.6667%; }
  .grid-x > .large-offset-9 { margin-left: 75%; }
  .grid-x > .large-offset-10 { margin-left: 83.3333%; }
  .grid-x > .large-offset-11 { margin-left: 91.6667%; }
}

/* --- gutters via margins ---------------------------------------------------
   Add "grid-margin-x" to a grid to give its cells horizontal margins. */

.grid-margin-x {
  margin-left: -0.625rem;
  margin-right: -0.625rem;
}

@media (min-width: 768px) {
  .grid-margin-x {
    margin-left: -0.9375rem;
    margin-right: -0.9375rem;
  }
}

.grid-margin-x > .cell {
  width: calc(100% - 1.25rem);
  margin-left: 0.625rem;
  margin-right: 0.625rem;
}

.grid-margin-x > .small-1 { width: calc(8.3333% - 1.25rem); }
.grid-margin-x > .small-2 { width: calc(16.6667% - 1.25rem); }
.grid-margin-x > .small-3 { width: calc(25% - 1.25rem); }
.grid-margin-x > .small-4 { width: calc(33.3333% - 1.25rem); }
.grid-margin-x > .small-5 { width: calc(41.6667% - 1.25rem); }
.grid-margin-x > .small-6 { width: calc(50% - 1.25rem); }
.grid-margin-x > .small-7 { width: calc(58.3333% - 1.25rem); }
.grid-margin-x > .small-8 { width: calc(66.6667% - 1.25rem); }
.grid-margin-x > .small-9 { width: calc(75% - 1.25rem); }
.grid-margin-x > .small-10 { width: calc(83.3333% - 1.25rem); }
.grid-margin-x > .small-11 { width: calc(91.6667% - 1.25rem); }
.grid-margin-x > .small-12 { width: calc(100% - 1.25rem); }

@media (min-width: 768px) {
  .grid-margin-x > .cell {
    width: calc(100% - 1.875rem);
    margin-left: 0.9375rem;
    margin-right: 0.9375rem;
  }

  .grid-margin-x > .medium-1 { width: calc(8.3333% - 1.875rem); }
  .grid-margin-x > .medium-2 { width: calc(16.6667% - 1.875rem); }
  .grid-margin-x > .medium-3 { width: calc(25% - 1.875rem); }
  .grid-margin-x > .medium-4 { width: calc(33.3333% - 1.875rem); }
  .grid-margin-x > .medium-5 { width: calc(41.6667% - 1.875rem); }
  .grid-margin-x > .medium-6 { width: calc(50% - 1.875rem); }
  .grid-margin-x > .medium-7 { width: calc(58.3333% - 1.875rem); }
  .grid-margin-x > .medium-8 { width: calc(66.6667% - 1.875rem); }
  .grid-margin-x > .medium-9 { width: calc(75% - 1.875rem); }
  .grid-margin-x > .medium-10 { width: calc(83.3333% - 1.875rem); }
  .grid-margin-x > .medium-11 { width: calc(91.6667% - 1.875rem); }
  .grid-margin-x > .medium-12 { width: calc(100% - 1.875rem); }
}

@media (min-width: 960px) {
  .grid-margin-x > .large-1 { width: calc(8.3333% - 1.875rem); }
  .grid-margin-x > .large-2 { width: calc(16.6667% - 1.875rem); }
  .grid-margin-x > .large-3 { width: calc(25% - 1.875rem); }
  .grid-margin-x > .large-4 { width: calc(33.3333% - 1.875rem); }
  .grid-margin-x > .large-5 { width: calc(41.6667% - 1.875rem); }
  .grid-margin-x > .large-6 { width: calc(50% - 1.875rem); }
  .grid-margin-x > .large-7 { width: calc(58.3333% - 1.875rem); }
  .grid-margin-x > .large-8 { width: calc(66.6667% - 1.875rem); }
  .grid-margin-x > .large-9 { width: calc(75% - 1.875rem); }
  .grid-margin-x > .large-10 { width: calc(83.3333% - 1.875rem); }
  .grid-margin-x > .large-11 { width: calc(91.6667% - 1.875rem); }
  .grid-margin-x > .large-12 { width: calc(100% - 1.875rem); }
}

/* --- gutters via padding ---------------------------------------------------
   Add "grid-padding-x" to a grid to give its cells horizontal padding. */

.grid-padding-x > .cell {
  padding-right: 0.625rem;
  padding-left: 0.625rem;
}

@media (min-width: 768px) {
  .grid-padding-x > .cell {
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
  }
}

/* --- collapse gutters ------------------------------------------------------ */

.small-collapse > .cell {
  margin-right: 0;
  margin-left: 0;
  padding-right: 0;
  padding-left: 0;
}

@media (min-width: 768px) {
  .medium-collapse > .cell {
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
  }
}

/* --------------------------------------------------------------------------
   Responsive embed (16:9 by default; videos inside posts etc.)
   -------------------------------------------------------------------------- */

.responsive-embed {
  position: relative;
  height: 0;
  margin-bottom: 1rem;
  padding-bottom: 75%;
  overflow: hidden;
}

.responsive-embed iframe,
.responsive-embed embed,
.responsive-embed object,
.responsive-embed video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.responsive-embed.widescreen {
  padding-bottom: 56.25%;
}