/*!
 * waffle-grid - v1.2.2 - (https://lucasgruwez.github.io/waffle-grid)
 * Copyright 2017 Lucas Gruwez.
 * Licensed under MIT
 * https://lucasgruwez.github.io/waffle-grid
 */.grid,.row {
  display: -ms-flexbox;
  display: flex;
}

.grid {
  -ms-flex-direction: column;
      flex-direction: column;
  width: 960px;
  max-width: 80%;
  margin: 0 auto;
}

.row {
  -ms-flex-direction: row;
      flex-direction: row;
  width: 100%;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.col {
  box-sizing: border-box;
  margin: 10px;
  vertical-align: top;
}

.center,.left {
  margin-right: auto;
}

.center,.right {
  margin-left: auto;
}

.col-1-of-4,.col-2-of-8,.col-3-of-12 {
  width: calc(25% - 20px);
}

.push-1-of-4,.push-2-of-8,.push-3-of-12 {
  margin-left: calc(25% + 20px / 2);
}

.pull-1-of-4,.pull-2-of-8,.pull-3-of-12 {
  margin-right: calc(25% + 20px / 2);
}

.col-2-of-4,.col-4-of-8,.col-6-of-12 {
  width: calc(50% - 20px);
}

.push-2-of-4,.push-4-of-8,.push-6-of-12 {
  margin-left: calc(50% + 20px / 2);
}

.pull-2-of-4,.pull-4-of-8,.pull-6-of-12 {
  margin-right: calc(50% + 20px / 2);
}

.col-3-of-4,.col-6-of-8,.col-9-of-12 {
  width: calc(75% - 20px);
}

.push-3-of-4,.push-6-of-8,.push-9-of-12 {
  margin-left: calc(75% + 20px / 2);
}

.pull-3-of-4,.pull-6-of-8,.pull-9-of-12 {
  margin-right: calc(75% + 20px / 2);
}

.col-12-of-12,.col-4-of-4,.col-8-of-8 {
  width: calc(100% - 20px);
}

.push-12-of-12,.push-4-of-4,.push-8-of-8 {
  margin-left: calc(100% + 20px / 2);
}

.pull-12-of-12,.pull-4-of-4,.pull-8-of-8 {
  margin-right: calc(100% + 20px / 2);
}

.col-1-of-8 {
  width: calc(12.5% - 20px);
}

.push-1-of-8 {
  margin-left: calc(12.5% + 20px / 2);
}

.pull-1-of-8 {
  margin-right: calc(12.5% + 20px / 2);
}

.col-3-of-8 {
  width: calc(37.5% - 20px);
}

.push-3-of-8 {
  margin-left: calc(37.5% + 20px / 2);
}

.pull-3-of-8 {
  margin-right: calc(37.5% + 20px / 2);
}

.col-5-of-8 {
  width: calc(62.5% - 20px);
}

.push-5-of-8 {
  margin-left: calc(62.5% + 20px / 2);
}

.pull-5-of-8 {
  margin-right: calc(62.5% + 20px / 2);
}

.col-7-of-8 {
  width: calc(87.5% - 20px);
}

.push-7-of-8 {
  margin-left: calc(87.5% + 20px / 2);
}

.pull-7-of-8 {
  margin-right: calc(87.5% + 20px / 2);
}

.col-1-of-12 {
  width: calc(8.33333% - 20px);
}

.push-1-of-12 {
  margin-left: calc(8.33333% + 20px / 2);
}

.pull-1-of-12 {
  margin-right: calc(8.33333% + 20px / 2);
}

.col-2-of-12 {
  width: calc(16.66667% - 20px);
}

.push-2-of-12 {
  margin-left: calc(16.66667% + 20px / 2);
}

.pull-2-of-12 {
  margin-right: calc(16.66667% + 20px / 2);
}

.col-4-of-12 {
  width: calc(33.33333% - 20px);
}

.push-4-of-12 {
  margin-left: calc(33.33333% + 20px / 2);
}

.pull-4-of-12 {
  margin-right: calc(33.33333% + 20px / 2);
}

.col-5-of-12 {
  width: calc(41.66667% - 20px);
}

.push-5-of-12 {
  margin-left: calc(41.66667% + 20px / 2);
}

.pull-5-of-12 {
  margin-right: calc(41.66667% + 20px / 2);
}

.col-7-of-12 {
  width: calc(58.33333% - 20px);
}

.push-7-of-12 {
  margin-left: calc(58.33333% + 20px / 2);
}

.pull-7-of-12 {
  margin-right: calc(58.33333% + 20px / 2);
}

.col-8-of-12 {
  width: calc(66.66667% - 20px);
}

.push-8-of-12 {
  margin-left: calc(66.66667% + 20px / 2);
}

.pull-8-of-12 {
  margin-right: calc(66.66667% + 20px / 2);
}

.col-10-of-12 {
  width: calc(83.33333% - 20px);
}

.push-10-of-12 {
  margin-left: calc(83.33333% + 20px / 2);
}

.pull-10-of-12 {
  margin-right: calc(83.33333% + 20px / 2);
}

.col-11-of-12 {
  width: calc(91.66667% - 20px);
}

.push-11-of-12 {
  margin-left: calc(91.66667% + 20px / 2);
}

.pull-11-of-12 {
  margin-right: calc(91.66667% + 20px / 2);
}

@media (max-width:840px) {
  .l-only,.m-hide {
    display: none;
  }

  .col-m-1-of-4,.col-m-2-of-8 {
    width: calc(25% - 20px);
  }

  .push-m-1-of-4,.push-m-2-of-8 {
    margin-left: calc(25% + 20px / 2);
  }

  .pull-m-1-of-4,.pull-m-2-of-8 {
    margin-right: calc(25% + 20px / 2);
  }

  .col-m-2-of-4,.col-m-3-of-6,.col-m-4-of-8 {
    width: calc(50% - 20px);
  }

  .push-m-2-of-4,.push-m-3-of-6,.push-m-4-of-8 {
    margin-left: calc(50% + 20px / 2);
  }

  .pull-m-2-of-4,.pull-m-3-of-6,.pull-m-4-of-8 {
    margin-right: calc(50% + 20px / 2);
  }

  .col-m-3-of-4,.col-m-6-of-8 {
    width: calc(75% - 20px);
  }

  .push-m-3-of-4,.push-m-6-of-8 {
    margin-left: calc(75% + 20px / 2);
  }

  .pull-m-3-of-4,.pull-m-6-of-8 {
    margin-right: calc(75% + 20px / 2);
  }

  .col-m-4-of-4,.col-m-6-of-6,.col-m-8-of-8 {
    width: calc(100% - 20px);
  }

  .push-m-4-of-4,.push-m-6-of-6,.push-m-8-of-8 {
    margin-left: calc(100% + 20px / 2);
  }

  .pull-m-4-of-4,.pull-m-6-of-6,.pull-m-8-of-8 {
    margin-right: calc(100% + 20px / 2);
  }

  .col-m-1-of-6 {
    width: calc(16.66667% - 20px);
  }

  .push-m-1-of-6 {
    margin-left: calc(16.66667% + 20px / 2);
  }

  .pull-m-1-of-6 {
    margin-right: calc(16.66667% + 20px / 2);
  }

  .col-m-2-of-6 {
    width: calc(33.33333% - 20px);
  }

  .push-m-2-of-6 {
    margin-left: calc(33.33333% + 20px / 2);
  }

  .pull-m-2-of-6 {
    margin-right: calc(33.33333% + 20px / 2);
  }

  .col-m-4-of-6 {
    width: calc(66.66667% - 20px);
  }

  .push-m-4-of-6 {
    margin-left: calc(66.66667% + 20px / 2);
  }

  .pull-m-4-of-6 {
    margin-right: calc(66.66667% + 20px / 2);
  }

  .col-m-5-of-6 {
    width: calc(83.33333% - 20px);
  }

  .push-m-5-of-6 {
    margin-left: calc(83.33333% + 20px / 2);
  }

  .pull-m-5-of-6 {
    margin-right: calc(83.33333% + 20px / 2);
  }

  .col-m-1-of-8 {
    width: calc(12.5% - 20px);
  }

  .push-m-1-of-8 {
    margin-left: calc(12.5% + 20px / 2);
  }

  .pull-m-1-of-8 {
    margin-right: calc(12.5% + 20px / 2);
  }

  .col-m-3-of-8 {
    width: calc(37.5% - 20px);
  }

  .push-m-3-of-8 {
    margin-left: calc(37.5% + 20px / 2);
  }

  .pull-m-3-of-8 {
    margin-right: calc(37.5% + 20px / 2);
  }

  .col-m-5-of-8 {
    width: calc(62.5% - 20px);
  }

  .push-m-5-of-8 {
    margin-left: calc(62.5% + 20px / 2);
  }

  .pull-m-5-of-8 {
    margin-right: calc(62.5% + 20px / 2);
  }

  .col-m-7-of-8 {
    width: calc(87.5% - 20px);
  }

  .push-m-7-of-8 {
    margin-left: calc(87.5% + 20px / 2);
  }

  .pull-m-7-of-8 {
    margin-right: calc(87.5% + 20px / 2);
  }
}

@media (max-width:480px) {
  .s-hide {
    display: none;
  }

  .col-s-1-of-4 {
    width: calc(25% - 20px);
  }

  .push-s-1-of-4 {
    margin-left: calc(25% + 20px / 2);
  }

  .pull-s-1-of-4 {
    margin-right: calc(25% + 20px / 2);
  }

  .col-s-2-of-4,.col-s-3-of-6 {
    width: calc(50% - 20px);
  }

  .push-s-2-of-4,.push-s-3-of-6 {
    margin-left: calc(50% + 20px / 2);
  }

  .pull-s-2-of-4,.pull-s-3-of-6 {
    margin-right: calc(50% + 20px / 2);
  }

  .col-s-3-of-4 {
    width: calc(75% - 20px);
  }

  .push-s-3-of-4 {
    margin-left: calc(75% + 20px / 2);
  }

  .pull-s-3-of-4 {
    margin-right: calc(75% + 20px / 2);
  }

  .col-s-4-of-4,.col-s-6-of-6 {
    width: calc(100% - 20px);
  }

  .push-s-4-of-4,.push-s-6-of-6 {
    margin-left: calc(100% + 20px / 2);
  }

  .pull-s-4-of-4,.pull-s-6-of-6 {
    margin-right: calc(100% + 20px / 2);
  }

  .col-s-1-of-6 {
    width: calc(16.66667% - 20px);
  }

  .push-s-1-of-6 {
    margin-left: calc(16.66667% + 20px / 2);
  }

  .pull-s-1-of-6 {
    margin-right: calc(16.66667% + 20px / 2);
  }

  .col-s-2-of-6 {
    width: calc(33.33333% - 20px);
  }

  .push-s-2-of-6 {
    margin-left: calc(33.33333% + 20px / 2);
  }

  .pull-s-2-of-6 {
    margin-right: calc(33.33333% + 20px / 2);
  }

  .col-s-4-of-6 {
    width: calc(66.66667% - 20px);
  }

  .push-s-4-of-6 {
    margin-left: calc(66.66667% + 20px / 2);
  }

  .pull-s-4-of-6 {
    margin-right: calc(66.66667% + 20px / 2);
  }

  .col-s-5-of-6 {
    width: calc(83.33333% - 20px);
  }

  .push-s-5-of-6 {
    margin-left: calc(83.33333% + 20px / 2);
  }

  .pull-s-5-of-6 {
    margin-right: calc(83.33333% + 20px / 2);
  }
}

@media (min-width:480px) {
  .s-and-lower,.s-only {
    display: none;
  }
}

@media (min-width:840px) {
  .m-and-lower,.m-only {
    display: none;
  }
}