/*! Views Flexbox v0.1.0 - https://github.com/13jupiters/views_flexbox */
/*
 *
 * CSS adapted from Reflex, 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
 *
 */


/*
 * CONTAINER: outermost grid will require a container class similar to this
 */
.grid-container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
/* Self Clearing */
.grid-container:after {
  content: "";
  display: table;
  clear: both;
}

.grid {
  display: inline-block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  *display: inline;
  zoom: 1;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  position: relative;
  width: 100%;
  max-width: 100%;
  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 {
  -ms-flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
}
.grid * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.grid *:before,
.grid *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

[class*="grid__col-"] {
  display: inline-block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  *display: inline;
  zoom: 1;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  letter-spacing: normal;
  word-spacing: normal;
  white-space: normal;
  position: relative;
  width: 100%; /* on small devices/by default width is full */
  vertical-align: top;
  padding: 1em 1em;
}
.grid__col-12 {
  width: 100%;
  *width: 99.9%;
}
.grid__col-11 {
  width: 91.66666667%;
  *width: 91.56666667%;
}
.grid__col-10 {
  width: 83.33333333%;
  *width: 83.23333333%;
}
.grid__col-9 {
  width: 75%;
  *width: 74.9%;
}
.grid__col-8 {
  width: 66.66666667%;
  *width: 66.56666667%;
}
.grid__col-7 {
  width: 58.33333333%;
  *width: 58.23333333%;
}
.grid__col-6 {
  width: 50%;
  *width: 49.9%;
}
.grid__col-5 {
  width: 41.66666667%;
  *width: 41.56666667%;
}
.grid__col-4 {
  width: 33.33333333%;
  *width: 33.23333333%;
}
.grid__col-3 {
  width: 25%;
  *width: 24.9%;
}
.grid__col-2 {
  width: 16.66666667%;
  *width: 16.56666667%;
}
.grid__col-1 {
  width: 8.33333333%;
  *width: 8.23333333%;
}
@media (min-width: 480px) {
  .grid__col-xs-12 {
    width: 100%;
    *width: 99.9%;
  }
  .grid__col-xs-11 {
    width: 91.66666667%;
    *width: 91.56666667%;
  }
  .grid__col-xs-10 {
    width: 83.33333333%;
    *width: 83.23333333%;
  }
  .grid__col-xs-9 {
    width: 75%;
    *width: 74.9%;
  }
  .grid__col-xs-8 {
    width: 66.66666667%;
    *width: 66.56666667%;
  }
  .grid__col-xs-7 {
    width: 58.33333333%;
    *width: 58.23333333%;
  }
  .grid__col-xs-6 {
    width: 50%;
    *width: 49.9%;
  }
  .grid__col-xs-5 {
    width: 41.66666667%;
    *width: 41.56666667%;
  }
  .grid__col-xs-4 {
    width: 33.33333333%;
    *width: 33.23333333%;
  }
  .grid__col-xs-3 {
    width: 25%;
    *width: 24.9%;
  }
  .grid__col-xs-2 {
    width: 16.66666667%;
    *width: 16.56666667%;
  }
  .grid__col-xs-1 {
    width: 8.33333333%;
    *width: 8.23333333%;
  }
}
@media (min-width: 768px) {
  .margin-15 {
    margin-left: 16.66666667%;
  }
  .grid__col-sm-12 {
    width: 100%;
    *width: 99.9%;
  }
  .grid__col-sm-11 {
    width: 91.66666667%;
    *width: 91.56666667%;
  }
  .grid__col-sm-10 {
    width: 83.33333333%;
    *width: 83.23333333%;
  }
  .grid__col-sm-9 {
    width: 75%;
    *width: 74.9%;
  }
  .grid__col-sm-8 {
    width: 66.66666667%;
    *width: 66.56666667%;
  }
  .grid__col-sm-7 {
    width: 58.33333333%;
    *width: 58.23333333%;
  }
  .grid__col-sm-6 {
    width: 50%;
    *width: 49.9%;
  }
  .grid__col-sm-5 {
    width: 41.66666667%;
    *width: 41.56666667%;
  }
  .grid__col-sm-4 {
    width: 33.33333333%;
    *width: 33.23333333%;
  }
  .grid__col-sm-3 {
    width: 25%;
    *width: 24.9%;
  }
  .grid__col-sm-2 {
    width: 16.66666667%;
    *width: 16.56666667%;
  }
  .grid__col-sm-1 {
    width: 8.33333333%;
    *width: 8.23333333%;
  }
}
@media (min-width: 992px) {
  .grid__col-md-12 {
    width: 100%;
    *width: 99.9%;
  }
  .grid__col-md-11 {
    width: 91.66666667%;
    *width: 91.56666667%;
  }
  .grid__col-md-10 {
    width: 83.33333333%;
    *width: 83.23333333%;
  }
  .grid__col-md-9 {
    width: 75%;
    *width: 74.9%;
  }
  .grid__col-md-8 {
    width: 66.66666667%;
    *width: 66.56666667%;
  }
  .grid__col-md-7 {
    width: 58.33333333%;
    *width: 58.23333333%;
  }
  .grid__col-md-6 {
    width: 50%;
    *width: 49.9%;
  }
  .grid__col-md-5 {
    width: 41.66666667%;
    *width: 41.56666667%;
  }
  .grid__col-md-4 {
    width: 33.33333333%;
    *width: 33.23333333%;
  }
  .grid__col-md-3 {
    width: 25%;
    *width: 24.9%;
  }
  .grid__col-md-2 {
    width: 16.66666667%;
    *width: 16.56666667%;
  }
  .grid__col-md-1 {
    width: 8.33333333%;
    *width: 8.23333333%;
  }
}
@media (min-width: 1200px) {
  .grid__col-lg-12 {
    width: 100%;
    *width: 99.9%;
  }
  .grid__col-lg-11 {
    width: 91.66666667%;
    *width: 91.56666667%;
  }
  .grid__col-lg-10 {
    width: 83.33333333%;
    *width: 83.23333333%;
  }
  .grid__col-lg-9 {
    width: 75%;
    *width: 74.9%;
  }
  .grid__col-lg-8 {
    width: 66.66666667%;
    *width: 66.56666667%;
  }
  .grid__col-lg-7 {
    width: 58.33333333%;
    *width: 58.23333333%;
  }
  .grid__col-lg-6 {
    width: 50%;
    *width: 49.9%;
  }
  .grid__col-lg-5 {
    width: 41.66666667%;
    *width: 41.56666667%;
  }
  .grid__col-lg-4 {
    width: 33.33333333%;
    *width: 33.23333333%;
  }
  .grid__col-lg-3 {
    width: 25%;
    *width: 24.9%;
  }
  .grid__col-lg-2 {
    width: 16.66666667%;
    *width: 16.56666667%;
  }
  .grid__col-lg-1 {
    width: 8.33333333%;
    *width: 8.23333333%;
  }
}


.grid--bleed [class*="grid__col-"] {
  padding: 0;
}
.grid--wrap {
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}
.grid--no-wrap {
  -ms-flex-wrap: nowrap;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
}
.grid--wrap-reverse {
  -ms-flex-wrap: wrap-reverse;
  -webkit-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}
.grid--direction-row {
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}
.grid--direction-row-reverse {
  -ms-flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.grid--direction-column {
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.grid--direction-column-reverse {
  -ms-flex-direction: column-reverse;
  -webkit-flex-direction: column-reverse;
  flex-direction: column-reverse;
}
.grid--align-start {
  -ms-flex-align: start;
  -ms-flex-align: flex-start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
.grid--align-end {
  -ms-flex-align: end;
  -ms-flex-align: flex-end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}
.grid--align-end [class*="grid__col-"] {
  vertical-align: bottom;
}
.grid--align-center {
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.grid--align-center [class*="grid__col-"] {
  vertical-align: middle;
}
.grid--align-baseline {
  -ms-flex-align: baseline;
  -webkit-align-items: baseline;
  align-items: baseline;
}
.grid--align-baseline [class*="grid__col-"] {
  vertical-align: baseline;
}
.grid--align-content-start {
  -ms-flex-line-pack: start;
  -ms-flex-line-pack: flex-start;
  -webkit-align-content: flex-start;
  align-content: flex-start;
}
.grid--align-content-end {
  -ms-flex-line-pack: end;
  -ms-flex-line-pack: flex-end;
  -webkit-align-content: flex-end;
  align-content: flex-end;
}
.grid--align-content-end [class*="grid__col-"] {
  vertical-align: bottom;
}
.grid--align-content-center {
  -ms-flex-line-pack: center;
  -webkit-align-content: center;
  align-content: center;
}
.grid--align-content-space-between {
  -ms-flex-line-pack: space-between;
  -webkit-align-content: space-between;
  align-content: space-between;
}
.grid--align-content-space-around {
  -ms-flex-line-pack: space-around;
  -webkit-align-content: space-around;
  align-content: space-around;
}
.grid--align-self-stretch {
  -ms-flex-item-align: stretch;
  -webkit-align-self: stretch;
  align-self: stretch;
}
.grid--align-self-start {
  -ms-flex-item-align: start;
  -ms-flex-item-align: flex-start;
  -webkit-align-self: flex-start;
  align-self: flex-start;
}
.grid--align-self-end {
  -ms-flex-item-align: end;
  -ms-flex-item-align: flex-end;
  -webkit-align-self: flex-end;
  align-self: flex-end;
  vertical-align: bottom;
}
.grid--align-self-center {
  -ms-flex-item-align: center;
  -webkit-align-self: center;
  align-self: center;
  vertical-align: middle;
}
.grid--align-self-baseline {
  -ms-flex-item-align: baseline;
  -webkit-align-self: baseline;
  align-self: baseline;
  vertical-align: baseline;
}

.grid--justify-start {
  text-align: left;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}
.grid--justify-flex-end {
  text-align: right;
  -moz-text-align-last: right;
  text-align-last: right;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
.grid--justify-flex-end .grid__cell,
.grid--justify-flex-end [class*="grid__col-"] {
  text-align: left;
  text-align: start;
  text-align: initial;
  -moz-text-align-last: left;
  -moz-text-align-last: start;
  -moz-text-align-last: initial;
  text-align-last: left;
  text-align-last: start;
  text-align-last: initial;
}
.grid--justify-center {
  text-align: center;
  -moz-text-align-last: center;
  text-align-last: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.grid--justify-center .grid__cell,
.grid--justify-center [class*="grid__col-"] {
  text-align: left;
  text-align: start;
  text-align: initial;
  -moz-text-align-last: left;
  -moz-text-align-last: start;
  -moz-text-align-last: initial;
  text-align-last: left;
  text-align-last: start;
  text-align-last: initial;
}
.grid--justify-space-between {
  text-align: justify;
  -moz-text-align-last: justify;
  text-align-last: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.grid--justify-space-between .grid__cell,
.grid--justify-space-between [class*="grid__col-"] {
  text-align: left;
  text-align: start;
  text-align: initial;
  -moz-text-align-last: left;
  -moz-text-align-last: start;
  -moz-text-align-last: initial;
  text-align-last: left;
  text-align-last: start;
  text-align-last: initial;
}
.grid--justify-space-around {
  text-align: justify;
  -moz-text-align-last: justify;
  text-align-last: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
.grid--justify-space-around .grid__cell,
.grid--justify-space-around [class*="grid__col-"] {
  text-align: left;
  text-align: start;
  text-align: initial;
  -moz-text-align-last: left;
  -moz-text-align-last: start;
  -moz-text-align-last: initial;
  text-align-last: left;
  text-align-last: start;
  text-align-last: initial;
}
.grid__col--bleed {
  padding: 0;
}
.grid__col--bleed-x {
  padding: 1em 0;
}
.grid__col--bleed-y {
  padding: 0 1em;
}
.grid__col--bg {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding-bottom: 50%;
}
.grid__cell--padding-sm {
  padding: 0.5em;
}
.grid__cell--padding-md {
  padding: 1em;
}
.grid__cell--padding-lg {
  padding: 2em;
}
.grid__cell-img {
  display: block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex: 0 0 auto;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
  width: 100%;
  height: auto;
}
.grid__cell-footer {
  display: inline-block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  *display: inline;
  zoom: 1;
  width: 100%;
  margin-top: auto;
}

/*
 * Tentative: when widths are not specified for contained items, the .free-flex class
 * is applied. This class is likely to change as different requirements surface.
 *
 * When .free-flex is used, the properties of the views items *should* determine things
 * like margin.
 *
 * Missing: support for stretch and other Flex capabilities
 */
.free-flex {
  display: inline-block;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile xs */
@media (min-width: 480px) {}

/* Larger than phablet sm */
@media (min-width: 768px) {}

/* Larger than tablet md */
@media (min-width: 992px) {}

/* Larger than desktop lg */
@media (min-width: 1200px) {}

/* Larger than Desktop HD
@media (min-width: 1600px) {}*/