Author: Craig Twigg
Version: 1.0.0
*/

/*UTILITY--------------------------------------------------------------------*/

.cf:before,
.cf:after {
  content: "";
  display: block;
}

.cf:after {
  clear: both;
}

.seo {
  display: none;
}

.is-red {
  background-color: red;
}

.is-green {
  background-color: green;
}

.is-blue {
  background-color: blue;
}

.is-purple {
  background-color: purple;
}

.is-w100pc {
  width: 100%;
}

.is-h5vh {
  height: 5vh;
}

.is-h10vh {
  height: 10vh;
}

.is-h25vh {
  height: 25vh;
}

.is-h50vh {
  height: 50vh;
}

.is-h100vh {
  height: 100vh;
}

.is-h50px {
  height: 50px;
}

.is-h100px {
  height: 100px;
}

.vert-margin {
  margin-top: 30px;
  margin-bottom: 30px;
}

.has-black-border {
  border: 1px solid #000;
}

.has-red-border {
  border: 1px solid red;
}

.has-white-border {
  border: 1px solid #fff;
}

.sm,
.md,
.lg,
.xl {
  display: none;
}

@media screen and (min-width: 576px) {
  .xs {
    display: none;
  }
  .sm {
    display: inline-block;
  }
}

@media screen and (min-width: 768px) {
  .sm {
    display: none;
  }
  .md {
    display: inline-block;
  }
}

@media screen and (min-width: 992px) {
  .md {
    display: none;
  }
  .lg {
    display: inline-block;
  }
}

@media screen and (min-width: 1200px) {
  .lg {
    display: none;
  }
  .xl {
    display: inline-block;
  }
}

.not-smartphone {
  display: none;
}

@media screen and (min-width: 768px) {
  .not-smartphone {
    display: initial;
  }
}

/*COLUMNS 30PX GUTTER--------------------------------------------------------*/

.row,
.row__no-cols {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
  flex-direction: row;
  flex-wrap: wrap;
}
.col-wrap {
  margin-bottom: 30px;
}
.col-6 {
  -webkit-flex: 0 0 50%;
  flex: 0 0 50%;
}
.col-1-sm,
.col-2-sm,
.col-3,
.col-4-sm,
.col-5-sm,
.col-6-sm,
.col-7-sm,
.col-8-sm,
.col-9-sm,
.col-10-sm,
.col-11-sm,
.col-12,
.col-70pc-md,
.col-1-2-2-2-2 .col-wrap,
.col-1-2-2-3-5 .col-wrap,
.col-1-2-3-3-3 .col-wrap,
.col-1-2-3-4-4 .col-wrap,
.col-1-2-2-4-6 .col-wrap {
  -webkit-flex: 0 0 100%;
  flex: 0 0 100%;
  width: 100%;
}
aside {
  display: none;
  -webkit-flex: 0 0 100%;
  flex: 0 0 100%;
}
.row {
  margin-right: -15px;
  margin-left: -15px;
}
.col-inner  {
  margin-right: 15px;
  margin-left: 15px;
}

@media screen and (min-width: 576px) {
  .col-1-2-2-2-2 .col-wrap,
  .col-1-2-2-3-5 .col-wrap,
  .col-1-2-3-3-3 .col-wrap,
  .col-1-2-3-4-4 .col-wrap,
  .col-1-2-2-4-6 .col-wrap {
    -webkit-flex: 0 0 50%;
    flex: 0 0 50%;
  }
  .col-1-sm {
    -webkit-flex: 0 0 8.3333333333%;
    flex: 0 0 8.3333333333%;
  }
  .col-2-sm {
    -webkit-flex: 0 0 16.6666666666%;
    flex: 0 0 16.6666666666%;
  }
  .col-3-sm {
    -webkit-flex: 0 0 24.9999999999%;
    flex: 0 0 24.9999999999%;
  }
  .col-4-sm {
    -webkit-flex: 0 0 33.3333333333%;
    flex: 0 0 33.3333333333%;
  }
  .col-5-sm {
    -webkit-flex: 0 0 41.6666666666%;
    flex: 0 0 41.6666666666%;
  }
  .col-6-sm {
    -webkit-flex: 0 0 50%;
    flex: 0 0 50%;
  }
  .col-7-sm {
    -webkit-flex: 0 0 58.3333333333%;
    flex: 0 0 58.3333333333%;
  }
  .col-8-sm {
    -webkit-flex: 0 0 66.6666666666%;
    flex: 0 0 66.6666666666%;
  }
  .col-9-sm {
    -webkit-flex: 0 0 74.9999999999%;
    flex: 0 0 74.9999999999%;
  }
  .col-10-sm {
    -webkit-flex: 0 0 83.3333333333%;
    flex: 0 0 83.3333333333%;
  }
  .col-11-sm {
    -webkit-flex: 0 0 91.6666666666%;
    flex: 0 0 91.6666666666%;
  }
}

@media screen and (min-width: 768px) {
  .col-1-2-3-3-3 .col-wrap,
  .col-1-2-3-4-4 .col-wrap {
    -webkit-flex: 0 0 33.3333333333%;
    flex: 0 0 33.3333333333%;
  }
  aside {
    display: -webkit-box;
    display: -ms-flexbox;
    display: initial;
    -ms-flex-direction: row;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .col-3-md {
    -webkit-flex: 0 0 33.3333333333%;
    flex: 0 0 33.3333333333%;
  }
  .col-30pc-md {
    -webkit-flex: 0 0 30%;
    flex: 0 0 30%;
  }
  .col-70pc-md {
    -webkit-flex: 0 0 70%;
    flex: 0 0 70%;
  }
}

@media screen and (min-width: 992px) {
  .col-1-2-2-3-5 .col-wrap {
    -webkit-flex: 0 0 33.3333333333%;
    flex: 0 0 33.3333333333%;
  }
  .col-1-2-3-4-4 .col-wrap,
  .col-1-2-2-4-6 .col-wrap {
    -webkit-flex: 0 0 25%;
    flex: 0 0 25%;
  }
  .col-25pc-lg {
    -webkit-flex: 0 0 25%;
    flex: 0 0 25%;
  }
  .col-75pc-lg {
    -webkit-flex: 0 0 75%;
    flex: 0 0 75%;
  }
  .col-4-lg {
    -webkit-flex: 0 0 25%;
    flex: 0 0 25%;
  }
  .col-5-lg {
    -webkit-flex: 0 0 41.6666666666%;
    flex: 0 0 41.6666666666%;
  }
  .col-6-lg {
    -webkit-flex: 0 0 50%;
    flex: 0 0 50%;
  }
  .col-7-lg {
    -webkit-flex: 0 0 58.3333333333%;
    flex: 0 0 58.3333333333%;
  }
}

@media screen and (min-width: 1200px) {
  .col-1-2-2-3-5 .col-wrap {
    -webkit-flex: 0 0 20%;
    flex: 0 0 20%;
  }
  .col-1-2-2-4-6 .col-wrap {
    -webkit-flex: 0 0 16.6666666666%;
    flex: 0 0 16.6666666666%;
  }
  .col-6-xl {
    -webkit-flex: 0 0 50%;
    flex: 0 0 50%;
  }
  .col-20pc-xl {
    -webkit-flex: 0 0 20%;
    flex: 0 0 20%;
  }
  .col-25pc-xl {
    -webkit-flex: 0 0 25%;
    flex: 0 0 25%;
  }
}

/*FLEX-----------------------------------------------------------------------*/

.jc-fs {
  justify-content: flex-start;
}
.jc-fe {
  justify-content: flex-end;
}
.jc-c {
  justify-content: center;
}
.jc-sb {
  justify-content: space-between;
}
.jc-sa {
  justify-content: space-around;
}
.jc-se {
  justify-content: space-evenly;
}
.ai-fs {
  align-items: flex-start;
}
.ai-fe {
  align-items: flex-end;
}
.ai-c  {
  align-items: center;
}
.ai-s  {
  align-items: stretch;
}
@media screen and (min-width: 992px) {
  .ord-1-lg {
    order: 1;
  }
}


@media screen and (min-width: 375px) {} /*iphone 6/7/8/X*/

@media screen and (min-width: 414px) {} /*iphone 6+/7+/8+*/

@media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) { } /*iphone X*/

@media screen and (min-width: 576px) {} /*small - sm*/

@media screen and (min-width: 768px) {} /*medium - md*/

@media screen and (min-width: 992px) {} /*large - lg*/

@media screen and (min-width: 1200px) {} /*extra large - xl*/

@media screen and (min-width: 1440px) {} /*wide screen - ws*/