/*
* Amazium (http://www.amazium.co.uk)
* Copyright 2010 - 2016, Mike Ballan
* Licensed under MIT (https://github.com/OwlyStuff/Amazium/blob/master/LICENSE)
*/
/*
* Amazium (http://www.amazium.co.uk)
* Copyright 2010 - 2016, Mike Ballan
* Licensed under MIT (https://github.com/OwlyStuff/Amazium/blob/master/LICENSE)
*/
/***********************************************
GRID SETTINGS
***********************************************/
/***** Define grid width *****/
/***** Define column number *****/
/***** Define gutter spacing *****/
/***** Calculate gutter spacing for breakpoints / can also be set manually *****/
/***** Shorthand Padding Mixin *****/
/***********************************************
Aspect Ratio
***********************************************/
.one-one {
  position: relative; }
  .one-one:before {
    padding-top: 100%;
    display: block;
    content: '';
    width: 100%; }
  .one-one > .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden; }

.four-three {
  position: relative; }
  .four-three:before {
    padding-top: 75%;
    display: block;
    content: '';
    width: 100%; }
  .four-three > .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden; }

.five-four {
  position: relative; }
  .five-four:before {
    padding-top: 80%;
    display: block;
    content: '';
    width: 100%; }
  .five-four > .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden; }

.sixteen-nine {
  position: relative; }
  .sixteen-nine:before {
    padding-top: 56.25%;
    display: block;
    content: '';
    width: 100%; }
  .sixteen-nine > .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden; }

.sixteen-ten {
  position: relative; }
  .sixteen-ten:before {
    padding-top: 62.5%;
    display: block;
    content: '';
    width: 100%; }
  .sixteen-ten > .content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden; }

/*
* Amazium (http://www.amazium.co.uk)
* Copyright 2010 - 2016, Mike Ballan
* Licensed under MIT (https://github.com/OwlyStuff/Amazium/blob/master/LICENSE)
*/
/***********************************************
Mobile First - This applies from 0px to 767px
***********************************************/
/***** Row setup *****/
.row {
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  flex: 0 1 auto;
  flex-wrap: wrap;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.row--width-fluid {
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  flex: 0 1 auto;
  flex-wrap: wrap;
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

/***** Row alignments *****/
.row--align-left {
  justify-content: flex-start; }

.row--align-center {
  justify-content: center; }

.row--align-right {
  justify-content: flex-end; }

/***** Nested grids resets *****/
.row .row {
  padding: 0;
  width: 100%; }

.row .row [class^="grid"]:first-child {
  padding-left: 0; }

.row .row [class^="grid"]:only-child {
  padding: 0; }

.row .row [class^="grid"]:last-child {
  padding-right: 0; }

/***** Sets grid widths *****/
.grid {
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.grid-1 {
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.grid-2 {
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.grid-3 {
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.grid-4 {
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.grid-5 {
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.grid-6 {
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.grid-7 {
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.grid-8 {
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.grid-9 {
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.grid-10 {
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.grid-11 {
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.grid-12 {
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

/***** grid ordering *****/
.row--order-reverse {
  flex-direction: column-reverse; }

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

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

/***** Sets mobile override grid width *****/
.grid-1-mobile {
  flex-basis: 8.33333%; }

.grid-2-mobile {
  flex-basis: 16.66667%; }

.grid-3-mobile {
  flex-basis: 25%; }

.grid-4-mobile {
  flex-basis: 33.33333%; }

.grid-5-mobile {
  flex-basis: 41.66667%; }

.grid-6-mobile {
  flex-basis: 50%; }

.grid-7-mobile {
  flex-basis: 58.33333%; }

.grid-8-mobile {
  flex-basis: 66.66667%; }

.grid-9-mobile {
  flex-basis: 75%; }

.grid-10-mobile {
  flex-basis: 83.33333%; }

.grid-11-mobile {
  flex-basis: 91.66667%; }

.grid-12-mobile {
  flex-basis: 100%; }

/***********************************************
Tablet - This applies from 768px onwards
***********************************************/
@media (min-width: 768px) {
  /***** Row setup *****/
  .row {
    width: 768px; }

  /***** Grid gutters *****/
  .grid, .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 {
    padding: 0 14.54545px; }

  /***** Sets grid widths *****/
  .grid {
    flex: 1 1 0%; }

  .grid-1 {
    flex-basis: 8.33333%;
    max-width: 8.33333%; }

  .grid-2 {
    flex-basis: 16.66667%;
    max-width: 16.66667%; }

  .grid-3 {
    flex-basis: 25%;
    max-width: 25%; }

  .grid-4 {
    flex-basis: 33.33333%;
    max-width: 33.33333%; }

  .grid-5 {
    flex-basis: 41.66667%;
    max-width: 41.66667%; }

  .grid-6 {
    flex-basis: 50%;
    max-width: 50%; }

  .grid-7 {
    flex-basis: 58.33333%;
    max-width: 58.33333%; }

  .grid-8 {
    flex-basis: 66.66667%;
    max-width: 66.66667%; }

  .grid-9 {
    flex-basis: 75%;
    max-width: 75%; }

  .grid-10 {
    flex-basis: 83.33333%;
    max-width: 83.33333%; }

  .grid-11 {
    flex-basis: 91.66667%;
    max-width: 91.66667%; }

  .grid-12 {
    flex-basis: 100%;
    max-width: 100%; }

  /***** Sets grid offsets *****/
  .grid--offset-1 {
    margin-left: 8.33333%; }

  .grid--offset-2 {
    margin-left: 16.66667%; }

  .grid--offset-3 {
    margin-left: 25%; }

  .grid--offset-4 {
    margin-left: 33.33333%; }

  .grid--offset-5 {
    margin-left: 41.66667%; }

  .grid--offset-6 {
    margin-left: 50%; }

  .grid--offset-7 {
    margin-left: 58.33333%; }

  .grid--offset-8 {
    margin-left: 66.66667%; }

  .grid--offset-9 {
    margin-left: 75%; }

  .grid--offset-10 {
    margin-left: 83.33333%; }

  .grid--offset-11 {
    margin-left: 91.66667%; }

  /***** Grid ordering *****/
  .row--order-reverse {
    flex-direction: row-reverse; }

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

  .grid--order-last {
    order: 1; } }
/***********************************************
Smaller screen - This applies from 992px onwards
***********************************************/
@media (min-width: 960px) {
  /***** Row setup *****/
  .row {
    width: 960px; }

  /***** Grid gutters *****/
  .grid, .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 {
    padding: 0 16px; }

  /***** Sets grid widths *****/ }
/***********************************************
Screen - This applies from 1200px onwards
***********************************************/
@media (min-width: 1199px) {
  /***** Row setup *****/
  .row {
    width: 1200px; }

  /***** Grid gutters *****/
  .grid, .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 {
    padding: 0 20px; }

  /***** Sets grid widths *****/ }
/***********************************************
Tablet - This applies from 768px to 992px
***********************************************/
@media only screen and (min-width: 768px) and (max-width: 959px) {
  /***** Sets table override grid width *****/
  .grid-1-tablet {
    flex-basis: 8.33333%;
    max-width: 8.33333%; }

  .grid-2-tablet {
    flex-basis: 16.66667%;
    max-width: 16.66667%; }

  .grid-3-tablet {
    flex-basis: 25%;
    max-width: 25%; }

  .grid-4-tablet {
    flex-basis: 33.33333%;
    max-width: 33.33333%; }

  .grid-5-tablet {
    flex-basis: 41.66667%;
    max-width: 41.66667%; }

  .grid-6-tablet {
    flex-basis: 50%;
    max-width: 50%; }

  .grid-7-tablet {
    flex-basis: 58.33333%;
    max-width: 58.33333%; }

  .grid-8-tablet {
    flex-basis: 66.66667%;
    max-width: 66.66667%; }

  .grid-9-tablet {
    flex-basis: 75%;
    max-width: 75%; }

  .grid-10-tablet {
    flex-basis: 83.33333%;
    max-width: 83.33333%; }

  .grid-11-tablet {
    flex-basis: 91.66667%;
    max-width: 91.66667%; }

  .grid-12-tablet {
    flex-basis: 100%;
    max-width: 100%; }

  /***** Grid ordering *****/
  .grid--order-first-tablet {
    order: inherit; }

  .grid--order-last-tablet {
    order: inherit; }

  /***** Sets tablet override grid width *****/
  .grid-1-tablet {
    flex-basis: 8.33333%; }

  .grid-2-tablet {
    flex-basis: 16.66667%; }

  .grid-3-tablet {
    flex-basis: 25%; }

  .grid-4-tablet {
    flex-basis: 33.33333%; }

  .grid-5-tablet {
    flex-basis: 41.66667%; }

  .grid-6-tablet {
    flex-basis: 50%; }

  .grid-7-tablet {
    flex-basis: 58.33333%; }

  .grid-8-tablet {
    flex-basis: 66.66667%; }

  .grid-9-tablet {
    flex-basis: 75%; }

  .grid-10-tablet {
    flex-basis: 83.33333%; }

  .grid-11-tablet {
    flex-basis: 91.66667%; }

  .grid-12-tablet {
    flex-basis: 100%; } }
/***********************************************
Mobile - This applies from 0px to 767px
***********************************************/
@media only screen and (max-width: 767px) {
  /***** Grid ordering *****/
  .row--order-reverse-mobile {
    flex-direction: inherit; }

  .grid--order-first-mobile {
    order: inherit; }

  .grid--order-last-mobile {
    order: inherit; } }