/*--------------------------------------------------------------
# Flexbox
--------------------------------------------------------------*/
.dflex {
  display: -ms-flexbox;
  display: flex;
}

.container {
  -ms-flex: 1 1 100%;
      flex: 1 1 100%;
  margin: auto;
  padding: 24px;
  max-width: 100%;
}

.container.fluid {
  max-width: 100%;
}

@media only screen and (max-width: 959px) {
  .container {
    padding: 16px;
  }
}
.layout {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  min-width: 0;
}

.layout.column {
  -ms-flex-direction: column;
      flex-direction: column;
}

.layout.column > .flex {
  max-width: 100%;
}

.layout.row {
  -ms-flex-direction: row;
      flex-direction: row;
}

.flex {
  -ms-flex: 1 1 100%;
      flex: 1 1 100%;
  max-width: 100%;
}

.layout.wrap {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.fill-height {
  height: 100%;
}

@media all and (min-width: 0) {
  .row > .flex.xs-1 {
    -ms-flex-preferred-size: 8.33333%;
        flex-basis: 8.33333%;
    max-width: 8.33333%;
  }

  .row > .flex.xs-2 {
    -ms-flex-preferred-size: 16.66667%;
        flex-basis: 16.66667%;
    max-width: 16.66667%;
  }

  .row > .flex.xs-3 {
    -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
    max-width: 25%;
  }

  .row > .flex.xs-4 {
    -ms-flex-preferred-size: 33.33333%;
        flex-basis: 33.33333%;
    max-width: 33.33333%;
  }

  .row > .flex.xs-5 {
    -ms-flex-preferred-size: 41.66667%;
        flex-basis: 41.66667%;
    max-width: 41.66667%;
  }

  .row > .flex.xs-6 {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    max-width: 50%;
  }

  .row > .flex.xs-7 {
    -ms-flex-preferred-size: 58.33333%;
        flex-basis: 58.33333%;
    max-width: 58.33333%;
  }

  .row > .flex.xs-8 {
    -ms-flex-preferred-size: 66.66667%;
        flex-basis: 66.66667%;
    max-width: 66.66667%;
  }

  .row > .flex.xs-9 {
    -ms-flex-preferred-size: 75%;
        flex-basis: 75%;
    max-width: 75%;
  }

  .row > .flex.xs-10 {
    -ms-flex-preferred-size: 83.33333%;
        flex-basis: 83.33333%;
    max-width: 83.33333%;
  }

  .row > .flex.xs-11 {
    -ms-flex-preferred-size: 91.66667%;
        flex-basis: 91.66667%;
    max-width: 91.66667%;
  }

  .row > .flex.xs-12 {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    max-width: 100%;
  }
}
@media all and (min-width: 600px) {
  .row > .flex.sm-1 {
    -ms-flex-preferred-size: 8.33333%;
        flex-basis: 8.33333%;
    max-width: 8.33333%;
  }

  .row > .flex.sm-2 {
    -ms-flex-preferred-size: 16.66667%;
        flex-basis: 16.66667%;
    max-width: 16.66667%;
  }

  .row > .flex.sm-3 {
    -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
    max-width: 25%;
  }

  .row > .flex.sm-4 {
    -ms-flex-preferred-size: 33.33333%;
        flex-basis: 33.33333%;
    max-width: 33.33333%;
  }

  .row > .flex.sm-5 {
    -ms-flex-preferred-size: 41.66667%;
        flex-basis: 41.66667%;
    max-width: 41.66667%;
  }

  .row > .flex.sm-6 {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    max-width: 50%;
  }

  .row > .flex.sm-7 {
    -ms-flex-preferred-size: 58.33333%;
        flex-basis: 58.33333%;
    max-width: 58.33333%;
  }

  .row > .flex.sm-8 {
    -ms-flex-preferred-size: 66.66667%;
        flex-basis: 66.66667%;
    max-width: 66.66667%;
  }

  .row > .flex.sm-9 {
    -ms-flex-preferred-size: 75%;
        flex-basis: 75%;
    max-width: 75%;
  }

  .row > .flex.sm-10 {
    -ms-flex-preferred-size: 83.33333%;
        flex-basis: 83.33333%;
    max-width: 83.33333%;
  }

  .row > .flex.sm-11 {
    -ms-flex-preferred-size: 91.66667%;
        flex-basis: 91.66667%;
    max-width: 91.66667%;
  }

  .row > .flex.sm-12 {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    max-width: 100%;
  }
}
@media all and (min-width: 960px) {
  .row > .flex.md-1 {
    -ms-flex-preferred-size: 8.33333%;
        flex-basis: 8.33333%;
    max-width: 8.33333%;
  }

  .row > .flex.md-2 {
    -ms-flex-preferred-size: 16.66667%;
        flex-basis: 16.66667%;
    max-width: 16.66667%;
  }

  .row > .flex.md-3 {
    -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
    max-width: 25%;
  }

  .row > .flex.md-4 {
    -ms-flex-preferred-size: 33.33333%;
        flex-basis: 33.33333%;
    max-width: 33.33333%;
  }

  .row > .flex.md-5 {
    -ms-flex-preferred-size: 41.66667%;
        flex-basis: 41.66667%;
    max-width: 41.66667%;
  }

  .row > .flex.md-6 {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    max-width: 50%;
  }

  .row > .flex.md-7 {
    -ms-flex-preferred-size: 58.33333%;
        flex-basis: 58.33333%;
    max-width: 58.33333%;
  }

  .row > .flex.md-8 {
    -ms-flex-preferred-size: 66.66667%;
        flex-basis: 66.66667%;
    max-width: 66.66667%;
  }

  .row > .flex.md-9 {
    -ms-flex-preferred-size: 75%;
        flex-basis: 75%;
    max-width: 75%;
  }

  .row > .flex.md-10 {
    -ms-flex-preferred-size: 83.33333%;
        flex-basis: 83.33333%;
    max-width: 83.33333%;
  }

  .row > .flex.md-11 {
    -ms-flex-preferred-size: 91.66667%;
        flex-basis: 91.66667%;
    max-width: 91.66667%;
  }

  .row > .flex.md-12 {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    max-width: 100%;
  }
}
@media all and (min-width: 1264px) {
  .row > .flex.lg-1 {
    -ms-flex-preferred-size: 8.33333%;
        flex-basis: 8.33333%;
    max-width: 8.33333%;
  }

  .row > .flex.lg-2 {
    -ms-flex-preferred-size: 16.66667%;
        flex-basis: 16.66667%;
    max-width: 16.66667%;
  }

  .row > .flex.lg-3 {
    -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
    max-width: 25%;
  }

  .row > .flex.lg-4 {
    -ms-flex-preferred-size: 33.33333%;
        flex-basis: 33.33333%;
    max-width: 33.33333%;
  }

  .row > .flex.lg-5 {
    -ms-flex-preferred-size: 41.66667%;
        flex-basis: 41.66667%;
    max-width: 41.66667%;
  }

  .row > .flex.lg-6 {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    max-width: 50%;
  }

  .row > .flex.lg-7 {
    -ms-flex-preferred-size: 58.33333%;
        flex-basis: 58.33333%;
    max-width: 58.33333%;
  }

  .row > .flex.lg-8 {
    -ms-flex-preferred-size: 66.66667%;
        flex-basis: 66.66667%;
    max-width: 66.66667%;
  }

  .row > .flex.lg-9 {
    -ms-flex-preferred-size: 75%;
        flex-basis: 75%;
    max-width: 75%;
  }

  .row > .flex.lg-10 {
    -ms-flex-preferred-size: 83.33333%;
        flex-basis: 83.33333%;
    max-width: 83.33333%;
  }

  .row > .flex.lg-11 {
    -ms-flex-preferred-size: 91.66667%;
        flex-basis: 91.66667%;
    max-width: 91.66667%;
  }

  .row > .flex.lg-12 {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    max-width: 100%;
  }
}
@media all and (min-width: 1904px) {
  .row > .flex.xl-1 {
    -ms-flex-preferred-size: 8.33333%;
        flex-basis: 8.33333%;
    max-width: 8.33333%;
  }

  .row > .flex.xl-2 {
    -ms-flex-preferred-size: 16.66667%;
        flex-basis: 16.66667%;
    max-width: 16.66667%;
  }

  .row > .flex.xl-3 {
    -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
    max-width: 25%;
  }

  .row > .flex.xl-4 {
    -ms-flex-preferred-size: 33.33333%;
        flex-basis: 33.33333%;
    max-width: 33.33333%;
  }

  .row > .flex.xl-5 {
    -ms-flex-preferred-size: 41.66667%;
        flex-basis: 41.66667%;
    max-width: 41.66667%;
  }

  .row > .flex.xl-6 {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    max-width: 50%;
  }

  .row > .flex.xl-7 {
    -ms-flex-preferred-size: 58.33333%;
        flex-basis: 58.33333%;
    max-width: 58.33333%;
  }

  .row > .flex.xl-8 {
    -ms-flex-preferred-size: 66.66667%;
        flex-basis: 66.66667%;
    max-width: 66.66667%;
  }

  .row > .flex.xl-9 {
    -ms-flex-preferred-size: 75%;
        flex-basis: 75%;
    max-width: 75%;
  }

  .row > .flex.xl-10 {
    -ms-flex-preferred-size: 83.33333%;
        flex-basis: 83.33333%;
    max-width: 83.33333%;
  }

  .row > .flex.xl-11 {
    -ms-flex-preferred-size: 91.66667%;
        flex-basis: 91.66667%;
    max-width: 91.66667%;
  }

  .row > .flex.xl-12 {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
    max-width: 100%;
  }
}