/*! Reflex v1.0.9 - https://github.com/leejordan/reflex */
/*
 *
 * Reflex is a flexbox grid which provides a way to take advantage of emerging
 * flexbox support while providing a fall back to inline-block on older browsers
 *
 * Built by Lee Jordan G.C.S.E.
 * email: ldjordan@gmail.com
 * github: https://github.com/leejordan
 *
 * Structure and calculations are inspired by twitter bootstrap
 *
 */

.grid {
  display: inline-block;
  display: flex;
  zoom: 1;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  position: relative;
  width: 100%;
  max-width: 100%;
  letter-spacing: -0.31em !important;
  word-spacing: -0.43em !important;
  list-style-type: none;
}
.grid:before,
.grid:after {
  letter-spacing: normal;
  word-spacing: normal;
  white-space: normal;
  max-width: 100%;
}
.grid *:before,
.grid *:after {
  letter-spacing: normal;
  word-spacing: normal;
  white-space: normal;
}
.grid .grid {
  flex: 1 1 auto;
}
[class*="grid__col-"] {
  display: inline-block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  zoom: 1;
  flex-direction: column;
  text-align: left;
  text-align: start;
  text-align: initial;
  text-align-last: left;
  text-align-last: start;
  text-align-last: initial;
  letter-spacing: normal;
  word-spacing: normal;
  white-space: normal;
  position: relative;
  width: 100%;
  vertical-align: top;
  padding: calc(var(--gutter) / 2);
}
.grid__cell {
  display: block;
  flex: 1 1 auto;
}
_:-ms-fullscreen,
:root .grid__cell {
  width: 100%;
}
.grid__col-12 {
  width: 100%;
}
.grid__col-10 {
  width: 83.33333333%;
}
.grid__col-8 {
  width: 66.66666667%;
}
.grid__col-6 {
  width: 50%;
}
.grid__col-4 {
  width: 33.33333333%;
}
.grid__col-2 {
  width: 16.66666667%;
}
@media (min-width: 768px) {
  /* special gutter ! */
  .grid--gutter-sm-large > [class*="grid__col-"] {
    padding: calc(var(--gutter) * 1.5);
  }
  .grid--gutter-sm-xlarge > [class*="grid__col-"] {
    padding: calc(var(--gutter) * 3);
  }
  .grid--padfix-sm-large{
    margin-left: - calc(var(--gutter) * 1.5);
    width: calc(100% + var(--gutter) * 3);
    max-width: calc(100% + var(--gutter) * 3);
  }
  .grid--padfix-sm-xlarge{
    margin-left: - calc(var(--gutter) * 3);
    width: calc(100% + var(--gutter) * 6);
    max-width: calc(100% + var(--gutter) * 6);
  }

  .grid__col-sm-12 {
    width: 100%;
  }
  .grid__col-sm-10 {
    width: 83.33333333%;
  }
  .grid__col-sm-9 {
    width: 75%;
  }
  .grid__col-sm-8 {
    width: 66.66666667%;
  }
  .grid__col-sm-7 {
    width: 58.33333333%;
  }
  .grid__col-sm-6 {
    width: 50%;
  }
  .grid__col-sm-5 {
    width: 41.66666667%;
  }
  .grid__col-sm-4 {
    width: 33.33333333%;
  }
  .grid__col-sm-3 {
    width: 25%;
  }
  .grid__col-sm-2 {
    width: 16.66666667%;
  }
}

.grid--order-2 {
  order: 2;
}
.grid--order-1 {
  order: 1;
}

.grid--bleed > [class*="grid__col-"] {
  padding: 0;
}

.grid--gutter-l > [class*="grid__col-"] {
  padding: calc(var(--gutter) * 2);
}
.grid--align-center {
  align-items: center;
}
.grid--align-center [class*="grid__col-"] {
  vertical-align: middle;
}
.grid--justify-end {
  text-align: right;
  text-align-last: right;
  justify-content: flex-end;
}
.grid--justify-end .grid__cell {
  text-align: left;
  text-align: start;
  text-align: initial;
  text-align-last: left;
  text-align-last: start;
  text-align-last: initial;
}
.grid--justify-center {
  text-align: center;
  text-align-last: center;
  justify-content: center;
}
.grid--justify-center .grid__cell {
  text-align: left;
  text-align: start;
  text-align: initial;
  text-align-last: left;
  text-align-last: start;
  text-align-last: initial;
}
.grid--justify-space-between {
  text-align: justify;
  text-align-last: justify;
  justify-content: space-between;
}
.grid--justify-space-between .grid__cell {
  text-align: left;
  text-align: start;
  text-align: initial;
  text-align-last: left;
  text-align-last: start;
  text-align-last: initial;
}
.grid__col--bleed {
  padding: 0;
}
.grid__cell--padding-lg {
  padding: calc(var(--gutter)*2);
}
@media (max-width: 767px) {
  .grid--order-sm-1 {
    order: 1;
  }
}

.grid--padfix-sm{
  margin-left: - calc(var(--gutter) / 2);
  width: calc(100% + var(--gutter) );
  max-width: calc(100% + var(--gutter) );
}