/*===========================================
 * RESPONSIVE GRID LAYOUT FRAMEWORK
 * Author: Hamish Gray - hamishjgray@gmail.com
 *
 * xxxl: 1200px;
 * xxl:  970px;
 * xl:   800px;
 * lg:   650px;
 * md:   450px;
 * sm:   330px;
 *
 *-----------------------------------------*/

* {
  box-sizing: border-box;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1em;
  padding-right: 1em;
}
.container--fluid { max-width: 100%; }
.container--xxl   { max-width: 970px; }
.container--xl    { max-width: 800px; }
.container--lg    { max-width: 650px; }
.container--md    { max-width: 450px; }
.container--sm    { max-width: 330px; }
.container--left  { margin-left: 0; margin-right: auto; }
.container--right { margin-left: auto; margin-right: 0; }

@media (min-width: 650px){
  .container {
    padding-left: 2em;
    padding-right: 2em;
  }
}




.width {
  width: 100%;
  max-width: 1200px;
}
.width--xxl   { max-width: 970px; }
.width--xl    { max-width: 800px; }
.width--lg    { max-width: 650px; }
.width--md    { max-width: 450px; }
.width--sm    { max-width: 330px; }




.space {}
.space--xxl { padding-top: 4em; }
.space--xl  { padding-top: 3.2em; }
.space--lg  { padding-top: 2.3em; }
.space--md  { padding-top: 1.4em; }
.space--sm  { padding-top: 1em; }
.space--xs  { padding-top: 0.6em; }



.row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  margin-left: -1em;
  margin-right: -1em;
}
.row--justify       { justify-content: space-between; }
.row--center        { justify-content: center; }
.row--left          { justify-content: flex-start; }
.row--right         { justify-content: flex-end; }
.row--valign-bottom { align-items: flex-end; }
.row--valign-center { align-items: center; }
.row--reverse       { flex-direction: row-reverse;}

.row > .col {
  padding-left: 1em; padding-right: 1em;
}

.row--gutters { margin-left: -1em; margin-right: -1em; }
.row--gutters > .col {
  padding-left: 1em; padding-right: 1em;
}


@media (min-width: 650px){
  .row {
    margin-left: -2em;
    margin-right: -2em;
  }
  .row > div[class^="col"], .row > div[class*=" col"] {
    padding-left: 2em;
    padding-right: 2em;
  }
  .row--gutters { margin-left: -2em; margin-right: -2em; }
  .row--gutters > .col {
    padding-left: 2em; padding-right: 2em;
  }
  .row--gutters-sm { margin-left: -1em; margin-right: -1em; }
  .row--gutters-sm > .col {
    padding-left: 1em; padding-right: 1em;
  }
  .row--gutters-md { margin-left: -2em-md; margin-right: -2em-md; }
  .row--gutters-md > .col {
    padding-left: 2em-md; padding-right: 2em-md;
  }
  .row--gutters-lg { margin-left: -3em; margin-right: -3em; }
  .row--gutters-lg > .col {
    padding-left: 3em; padding-right: 3em;
  }
  .row--gutters-xl { margin-left: -4em; margin-right: -4em; }
  .row--gutters-xl > .col {
    padding-left: 4em; padding-right: 4em;
  }
  .row--gutters-none { margin-left: 0; margin-right: 0; }
  .row--gutters-none > .col {
    padding-left: 0; padding-right: 0;
  }
}





.col {
  flex: 1 1 100%;
  box-sizing: border-box;
}

.col--top    { align-self: flex-start; }
.col--middle { align-self: center; }
.col--bottom { align-self: flex-end; }
.col--auto { flex: 1 1 auto; }

@media (min-width: 650px) {
  .col-1   { flex: 0 0 8.33%; max-width: 8.33%; }
  .col-2   { flex: 0 0 16.667%; max-width: 16.667%; }
  .col-3   { flex: 0 0 25%; max-width: 25%; }
  .col-4   { flex: 0 0 33.33%; max-width: 33.33%; }
  .col-5   { flex: 0 0 40%; max-width: 40%; }
  .col-6   { flex: 0 0 50%; max-width: 50%; }
  .col-7   { flex: 0 0 60%; max-width: 60%; }
  .col-8   { flex: 0 0 66.66%; max-width: 66.66%; }
  .col-9   { flex: 0 0 75%; max-width: 75%; }
  .col-10  { flex: 0 0 83.33%; max-width: 83.33%; }
  .col-11  { flex: 0 0 91.667%; max-width: 91.667%; }
  .col-12  { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 330px)   {
  .col-sm-1   { flex: 0 0 8.33%; max-width: 8.33%; }
  .col-sm-2   { flex: 0 0 16.667%; max-width: 16.667%; }
  .col-sm-3   { flex: 0 0 25%; max-width: 25%; }
  .col-sm-4   { flex: 0 0 33.33%; max-width: 33.33%; }
  .col-sm-5   { flex: 0 0 40%; max-width: 40%; }
  .col-sm-6   { flex: 0 0 50%; max-width: 50%; }
  .col-sm-7   { flex: 0 0 60%; max-width: 60%; }
  .col-sm-8   { flex: 0 0 66.66%; max-width: 66.66%; }
  .col-sm-9   { flex: 0 0 75%; max-width: 75%; }
  .col-sm-10  { flex: 0 0 83.33%; max-width: 83.33%; }
  .col-sm-11  { flex: 0 0 91.667%; max-width: 91.667%; }
  .col-sm-12  { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 450px)   {
  .col-md-1   { flex: 0 0 8.33%; max-width: 8.33%; }
  .col-md-2   { flex: 0 0 16.667%; max-width: 16.667%; }
  .col-md-3   { flex: 0 0 25%; max-width: 25%; }
  .col-md-4   { flex: 0 0 33.33%; max-width: 33.33%; }
  .col-md-5   { flex: 0 0 40%; max-width: 40%; }
  .col-md-6   { flex: 0 0 50%; max-width: 50%; }
  .col-md-7   { flex: 0 0 60%; max-width: 60%; }
  .col-md-8   { flex: 0 0 66.66%; max-width: 66.66%; }
  .col-md-9   { flex: 0 0 75%; max-width: 75%; }
  .col-md-10  { flex: 0 0 83.33%; max-width: 83.33%; }
  .col-md-11  { flex: 0 0 91.667%; max-width: 91.667%; }
  .col-md-12  { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 650px)   {
  .col-lg-1   { flex: 0 0 8.33%; max-width: 8.33%; }
  .col-lg-2   { flex: 0 0 16.667%; max-width: 16.667%; }
  .col-lg-3   { flex: 0 0 25%; max-width: 25%; }
  .col-lg-4   { flex: 0 0 33.33%; max-width: 33.33%; }
  .col-lg-5   { flex: 0 0 40%; max-width: 40%; }
  .col-lg-6   { flex: 0 0 50%; max-width: 50%; }
  .col-lg-7   { flex: 0 0 60%; max-width: 60%; }
  .col-lg-8   { flex: 0 0 66.66%; max-width: 66.66%; }
  .col-lg-9   { flex: 0 0 75%; max-width: 75%; }
  .col-lg-10  { flex: 0 0 83.33%; max-width: 83.33%; }
  .col-lg-11  { flex: 0 0 91.667%; max-width: 91.667%; }
  .col-lg-12  { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 800px)   {
  .col-xl-1   { flex: 0 0 8.33%; max-width: 8.33%; }
  .col-xl-2   { flex: 0 0 16.667%; max-width: 16.667%; }
  .col-xl-3   { flex: 0 0 25%; max-width: 25%; }
  .col-xl-4   { flex: 0 0 33.33%; max-width: 33.33%; }
  .col-xl-5   { flex: 0 0 40%; max-width: 40%; }
  .col-xl-6   { flex: 0 0 50%; max-width: 50%; }
  .col-xl-7   { flex: 0 0 60%; max-width: 60%; }
  .col-xl-8   { flex: 0 0 66.66%; max-width: 66.66%; }
  .col-xl-9   { flex: 0 0 75%; max-width: 75%; }
  .col-xl-10  { flex: 0 0 83.33%; max-width: 83.33%; }
  .col-xl-11  { flex: 0 0 91.667%; max-width: 91.667%; }
  .col-xl-12  { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 970px)  {
  .col-xxl-1   { flex: 0 0 8.33%; max-width: 8.33%; }
  .col-xxl-2   { flex: 0 0 16.667%; max-width: 16.667%; }
  .col-xxl-3   { flex: 0 0 25%; max-width: 25%; }
  .col-xxl-4   { flex: 0 0 33.33%; max-width: 33.33%; }
  .col-xxl-5   { flex: 0 0 40%; max-width: 40%; }
  .col-xxl-6   { flex: 0 0 50%; max-width: 50%; }
  .col-xxl-7   { flex: 0 0 60%; max-width: 60%; }
  .col-xxl-8   { flex: 0 0 66.66%; max-width: 66.66%; }
  .col-xxl-9   { flex: 0 0 75%; max-width: 75%; }
  .col-xxl-10  { flex: 0 0 83.33%; max-width: 83.33%; }
  .col-xxl-11  { flex: 0 0 91.667%; max-width: 91.667%; }
  .col-xxl-12  { flex: 0 0 100%; max-width: 100%; }
}