/*
 * The Flex Grid (v1.5.0) is a lightweight responsive CSS grid using flexbox. Because we can!
 * http://jeroenoomsnl.github.io/the-flex-grid/
 */
/* Generic grid styles */
.grid {
  margin: 0 auto;
  max-width: 960px;
  overflow: hidden;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -0.5em 0 -0.5em;
}
.row > * {
  box-sizing: border-box;
  padding: 0 0.5em 1em;
  flex-basis: 100%;
}
.row:last-child {
  margin-bottom: -1em;
}

.gutterless > * {
  margin: 0;
}
.gutterless > * > * {
  padding: 0;
}
.gutterless > *:last-child {
  margin-bottom: 0;
}

.col {
  flex: 1 0 auto;
}

/* Default view */
div.col-1 {
  flex-basis: 8.3333333333%;
  max-width: 8.3333333333%;
}

div.col-2 {
  flex-basis: 16.666666666%;
  max-width: 16.666666666%;
}

div.col-3 {
  flex-basis: 25%;
  max-width: 25%;
}

div.col-4 {
  flex-basis: 33.333333333%;
  max-width: 33.333333333%;
}

div.col-5 {
  flex-basis: 41.666666666%;
  max-width: 41.666666666%;
}

div.col-6 {
  flex-basis: 50%;
  max-width: 50%;
}

div.col-7 {
  flex-basis: 58.333333333%;
  max-width: 58.333333333%;
}

div.col-8 {
  flex-basis: 66.666666666%;
  max-width: 66.666666666%;
}

div.col-9 {
  flex-basis: 75%;
  max-width: 75%;
}

div.col-10 {
  flex-basis: 83.333333333%;
  max-width: 83.333333333%;
}

div.col-11 {
  flex-basis: 91.666666666%;
  max-width: 91.666666666%;
}

div.col-12 {
  flex-basis: 100%;
  max-width: 100%;
}

div.col-top {
  align-self: flex-start;
}

div.col-bottom {
  align-self: flex-end;
}

div.col-middle {
  align-self: center;
}

.row-left {
  justify-content: flex-start;
}

.row-right {
  justify-content: flex-end;
}

.row-center {
  justify-content: center;
}

.row-space-between {
  justify-content: space-between;
}

.row-space-around {
  justify-content: space-around;
}

.row-reverse {
  flex-direction: row-reverse;
}

.row-equal > * {
  display: flex;
}
.row-equal > * > * {
  width: 100%;
}

.row-top {
  align-items: flex-start;
}

.row-middle {
  align-items: center;
}

.row-bottom {
  align-items: flex-end;
}

.hide {
  display: none;
}

/* Small viewport (mobile) */
@media (max-width: 767px) {
  div.col-small-1 {
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
  }

  div.col-small-2 {
    flex-basis: 16.666666666%;
    max-width: 16.666666666%;
  }

  div.col-small-3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  div.col-small-4 {
    flex-basis: 33.333333333%;
    max-width: 33.333333333%;
  }

  div.col-small-5 {
    flex-basis: 41.666666666%;
    max-width: 41.666666666%;
  }

  div.col-small-6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  div.col-small-7 {
    flex-basis: 58.333333333%;
    max-width: 58.333333333%;
  }

  div.col-small-8 {
    flex-basis: 66.666666666%;
    max-width: 66.666666666%;
  }

  div.col-small-9 {
    flex-basis: 75%;
    max-width: 75%;
  }

  div.col-small-10 {
    flex-basis: 83.333333333%;
    max-width: 83.333333333%;
  }

  div.col-small-11 {
    flex-basis: 91.666666666%;
    max-width: 91.666666666%;
  }

  div.col-small-12 {
    flex-basis: 100%;
    max-width: 100%;
  }

  div.col-small-top {
    align-self: flex-start;
  }

  div.col-small-bottom {
    align-self: flex-end;
  }

  div.col-small-middle {
    align-self: center;
  }

  .row-small-left {
    justify-content: flex-start;
  }

  .row-small-right {
    justify-content: flex-end;
  }

  .row-small-center {
    justify-content: center;
  }

  .row-small-space-between {
    justify-content: space-between;
  }

  .row-small-space-around {
    justify-content: space-around;
  }

  .row-small-reverse {
    flex-direction: row-reverse;
  }

  .row-small-equal > * {
    display: flex;
  }
  .row-small-equal > * > * {
    width: 100%;
  }

  .row-small-top {
    align-items: flex-start;
  }

  .row-small-middle {
    align-items: center;
  }

  .row-small-bottom {
    align-items: flex-end;
  }

  .hide-small {
    display: none;
  }
}
/* Medium viewport (tablets) */
@media (min-width: 768px) and (max-width: 959px) {
  div.col-medium-1 {
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
  }

  div.col-medium-2 {
    flex-basis: 16.666666666%;
    max-width: 16.666666666%;
  }

  div.col-medium-3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  div.col-medium-4 {
    flex-basis: 33.333333333%;
    max-width: 33.333333333%;
  }

  div.col-medium-5 {
    flex-basis: 41.666666666%;
    max-width: 41.666666666%;
  }

  div.col-medium-6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  div.col-medium-7 {
    flex-basis: 58.333333333%;
    max-width: 58.333333333%;
  }

  div.col-medium-8 {
    flex-basis: 66.666666666%;
    max-width: 66.666666666%;
  }

  div.col-medium-9 {
    flex-basis: 75%;
    max-width: 75%;
  }

  div.col-medium-10 {
    flex-basis: 83.333333333%;
    max-width: 83.333333333%;
  }

  div.col-medium-11 {
    flex-basis: 91.666666666%;
    max-width: 91.666666666%;
  }

  div.col-medium-12 {
    flex-basis: 100%;
    max-width: 100%;
  }

  div.col-medium-top {
    align-self: flex-start;
  }

  div.col-medium-bottom {
    align-self: flex-end;
  }

  div.col-medium-middle {
    align-self: center;
  }

  .row-medium-left {
    justify-content: flex-start;
  }

  .row-medium-right {
    justify-content: flex-end;
  }

  .row-medium-center {
    justify-content: center;
  }

  .row-medium-space-between {
    justify-content: space-between;
  }

  .row-medium-space-around {
    justify-content: space-around;
  }

  .row-medium-reverse {
    flex-direction: row-reverse;
  }

  .row-medium-equal > * {
    display: flex;
  }
  .row-medium-equal > * > * {
    width: 100%;
  }

  .row-medium-top {
    align-items: flex-start;
  }

  .row-medium-middle {
    align-items: center;
  }

  .row-medium-bottom {
    align-items: flex-end;
  }

  .hide-medium {
    display: none;
  }
}
/* Large viewport (desktop) */
@media (min-width: 960px) {
  div.col-large-1 {
    flex-basis: 8.3333333333%;
    max-width: 8.3333333333%;
  }

  div.col-large-2 {
    flex-basis: 16.666666666%;
    max-width: 16.666666666%;
  }

  div.col-large-3 {
    flex-basis: 25%;
    max-width: 25%;
  }

  div.col-large-4 {
    flex-basis: 33.333333333%;
    max-width: 33.333333333%;
  }

  div.col-large-5 {
    flex-basis: 41.666666666%;
    max-width: 41.666666666%;
  }

  div.col-large-6 {
    flex-basis: 50%;
    max-width: 50%;
  }

  div.col-large-7 {
    flex-basis: 58.333333333%;
    max-width: 58.333333333%;
  }

  div.col-large-8 {
    flex-basis: 66.666666666%;
    max-width: 66.666666666%;
  }

  div.col-large-9 {
    flex-basis: 75%;
    max-width: 75%;
  }

  div.col-large-10 {
    flex-basis: 83.333333333%;
    max-width: 83.333333333%;
  }

  div.col-large-11 {
    flex-basis: 91.666666666%;
    max-width: 91.666666666%;
  }

  div.col-large-12 {
    flex-basis: 100%;
    max-width: 100%;
  }

  div.col-large-top {
    align-self: flex-start;
  }

  div.col-large-bottom {
    align-self: flex-end;
  }

  div.col-large-middle {
    align-self: center;
  }

  .row-large-left {
    justify-content: flex-start;
  }

  .row-large-right {
    justify-content: flex-end;
  }

  .row-large-center {
    justify-content: center;
  }

  .row-large-space-between {
    justify-content: space-between;
  }

  .row-large-space-around {
    justify-content: space-around;
  }

  .row-large-reverse {
    flex-direction: row-reverse;
  }

  .row-large-equal > * {
    display: flex;
  }
  .row-large-equal > * > * {
    width: 100%;
  }

  .row-large-top {
    align-items: flex-start;
  }

  .row-large-middle {
    align-items: center;
  }

  .row-large-bottom {
    align-items: flex-end;
  }

  .hide-large {
    display: none;
  }
}