@media all {
  .clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
  }

  .grid-container:before, .clearfix:before,
  .grid-container:after,
  .clearfix:after {
    content: ".";
    display: block;
    overflow: hidden;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
  }

  .grid-container:after, .clearfix:after {
    clear: both;
  }

  .grid-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .grid-5, .small-grid-5, .medium-grid-5, .grid-10, .small-grid-10, .medium-grid-10, .grid-15, .small-grid-15, .medium-grid-15, .grid-20, .small-grid-20, .medium-grid-20, .grid-25, .small-grid-25, .medium-grid-25, .grid-30, .small-grid-30, .medium-grid-30, .grid-35, .small-grid-35, .medium-grid-35, .grid-40, .small-grid-40, .medium-grid-40, .grid-45, .small-grid-45, .medium-grid-45, .grid-50, .small-grid-50, .medium-grid-50, .grid-55, .small-grid-55, .medium-grid-55, .grid-60, .small-grid-60, .medium-grid-60, .grid-65, .small-grid-65, .medium-grid-65, .grid-70, .small-grid-70, .medium-grid-70, .grid-75, .small-grid-75, .medium-grid-75, .grid-80, .small-grid-80, .medium-grid-80, .grid-85, .small-grid-85, .medium-grid-85, .grid-90, .small-grid-90, .medium-grid-90, .grid-95, .small-grid-95, .medium-grid-95, .grid-100, .small-grid-100, .medium-grid-100, .grid-33, .small-grid-33, .medium-grid-33, .grid-66, .small-grid-66, .medium-grid-66 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
  }

  .grid-parent {
    padding-left: 0;
    padding-right: 0;
  }
}/*/mediaquery*/




/* ---- SMALL ---- */
@media screen and (max-width: 600px) {

.small-grid-100:before,
  .small-grid-100:after {
    content: ".";
    display: block;
    overflow: hidden;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
  }

  .small-grid-100:after {
    clear: both;
  }

  .hide-on-small {
    display: none !important;
  }

.small-grid-5 {float: left; width: 5%;}
.small-prefix-5 {margin-left: 5%;}
.small-suffix-5 {margin-right: 5%;}

.small-grid-10 {float: left; width: 10%;}
.small-prefix-10 {margin-left: 10%;}
.small-suffix-10 {margin-right: 10%;}

.small-grid-15 {float: left; width: 15%;}
.small-prefix-15 {margin-left: 15%;}
.small-suffix-15 {margin-right: 15%;}

.small-grid-20 {float: left; width: 20%;}
.small-prefix-20 {margin-left: 20%;}
.small-suffix-20 {margin-right: 20%;}

.small-grid-25 {float: left; width: 25%;}
.small-prefix-25 {margin-left: 25%;}
.small-suffix-25 {margin-right: 25%;}

.small-grid-30 {float: left; width: 30%;}
.small-prefix-30 {margin-left: 30%;}
.small-suffix-30 {margin-right: 30%;}

.small-grid-35 {float: left; width: 35%;}
.small-prefix-35 {margin-left: 35%;}
.small-suffix-35 {margin-right: 35%;}

.small-grid-40 {float: left; width: 40%;}
.small-prefix-40 {margin-left: 40%;}
.small-suffix-40 {margin-right: 40%;}

.small-grid-45 {float: left; width: 45%;}
.small-prefix-45 {margin-left: 45%;}
.small-suffix-45 {margin-right: 45%;}

.small-grid-50 {float: left; width: 50%;}
.small-prefix-50 {margin-left: 50%;}
.small-suffix-50 {margin-right: 50%;}

.small-grid-55 {float: left; width: 55%;}
.small-prefix-55 {margin-left: 55%;}
.small-suffix-55 {margin-right: 55%;}

.small-grid-60 {float: left; width: 60%;}
.small-prefix-60 {margin-left: 60%;}
.small-suffix-60 {margin-right: 60%;}

.small-grid-65 {float: left; width: 65%;}
.small-prefix-65 {margin-left: 65%;}
.small-suffix-65 {margin-right: 65%;}

.small-grid-70 {float: left; width: 70%;}
.small-prefix-70 {margin-left: 70%;}
.small-suffix-70 {margin-right: 70%;}

.small-grid-75 {float: left; width: 75%;}
.small-prefix-75 {margin-left: 75%;}
.small-suffix-75 {margin-right: 75%;}

.small-grid-80 {float: left; width: 80%;}
.small-prefix-80 {margin-left: 80%;}
.small-suffix-80 {margin-right: 80%;}

.small-grid-85 {float: left; width: 85%;}
.small-prefix-85 {margin-left: 85%;}
.small-suffix-85 {margin-right: 85%;}

.small-grid-90 {float: left; width: 90%;}
.small-prefix-90 {margin-left: 90%;}
.small-suffix-90 {margin-right: 90%;}

.small-grid-95 {float: left; width: 95%;}
.small-prefix-95 {margin-left: 95%;}
.small-suffix-95 {margin-right: 95%;}

.small-grid-33 {float: left; width: 33.33333%;}
.small-prefix-33 {margin-left: 33.33333%;}
.small-suffix-33 {margin-right: 33.33333%;}

.small-grid-66 {float: left; width: 66.66667%;}
.small-prefix-66 {margin-left: 66.66667%;}
.small-suffix-66 {margin-right: 66.66667%;}

.small-grid-100 {clear: both; width: 100%;}

}/*/mediaquery*/




/* ---- MEDIUM GRID ---- */

@media screen and (min-width: 601px) and (max-width: 900px) {
  .medium-grid-100:before,
  .medium-grid-100:after {
    content: ".";
    display: block;
    overflow: hidden;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
  }

  .medium-grid-100:after {
    clear: both;
  }

  .hide-on-medium {
    display: none !important;
  }

.medium-grid-5 {float: left; width: 5%;}
.medium-prefix-5 {margin-left: 5%;}
.medium-suffix-5 {margin-right: 5%;}

.medium-grid-10 {float: left; width: 10%;}
.medium-prefix-10 {margin-left: 10%;}
.medium-suffix-10 {margin-right: 10%;}

.medium-grid-15 {float: left; width: 15%;}
.medium-prefix-15 {margin-left: 15%;}
.medium-suffix-15 {margin-right: 15%;}

.medium-grid-20 {float: left; width: 20%;}
.medium-prefix-20 {margin-left: 20%;}
.medium-suffix-20 {margin-right: 20%;}

.medium-grid-25 {float: left; width: 25%;}
.medium-prefix-25 {margin-left: 25%;}
.medium-suffix-25 {margin-right: 25%;}

.medium-grid-30 {float: left; width: 30%;}
.medium-prefix-30 {margin-left: 30%;}
.medium-suffix-30 {margin-right: 30%;}

.medium-grid-35 {float: left; width: 35%;}
.medium-prefix-35 {margin-left: 35%;}
.medium-suffix-35 {margin-right: 35%;}

.medium-grid-40 {float: left; width: 40%;}
.medium-prefix-40 {margin-left: 40%;}
.medium-suffix-40 {margin-right: 40%;}

.medium-grid-45 {float: left; width: 45%;}
.medium-prefix-45 {margin-left: 45%;}
.medium-suffix-45 {margin-right: 45%;}

.medium-grid-50 {float: left; width: 50%;}
.medium-prefix-50 {margin-left: 50%;}
.medium-suffix-50 {margin-right: 50%;}

.medium-grid-55 {float: left; width: 55%;}
.medium-prefix-55 {margin-left: 55%;}
.medium-suffix-55 {margin-right: 55%;}

.medium-grid-60 {float: left; width: 60%;}
.medium-prefix-60 {margin-left: 60%;}
.medium-suffix-60 {margin-right: 60%;}

.medium-grid-65 {float: left; width: 65%;}
.medium-prefix-65 {margin-left: 65%;}
.medium-suffix-65 {margin-right: 65%;}

.medium-grid-70 {float: left; width: 70%;}
.medium-prefix-70 {margin-left: 70%;}
.medium-suffix-70 {margin-right: 70%;}

.medium-grid-75 {float: left; width: 75%;}
.medium-prefix-75 {margin-left: 75%;}
.medium-suffix-75 {margin-right: 75%;}

.medium-grid-80 {float: left; width: 80%;}
.medium-prefix-80 {margin-left: 80%;}
.medium-suffix-80 {margin-right: 80%;}

.medium-grid-85 {float: left; width: 85%;}
.medium-prefix-85 {margin-left: 85%;}
.medium-suffix-85 {margin-right: 85%;}

.medium-grid-90 {float: left; width: 90%;}
.medium-prefix-90 {margin-left: 90%;}
.medium-suffix-90 {margin-right: 90%;}

.medium-grid-95 {float: left; width: 95%;}
.medium-prefix-95 {margin-left: 95%;}
.medium-suffix-95 {margin-right: 95%;}

.medium-grid-33 {float: left; width: 33.33333%;}
.medium-prefix-33 {margin-left: 33.33333%;}
.medium-suffix-33 {margin-right: 33.33333%;}

.medium-grid-66 {float: left; width: 66.66667%;}
.medium-prefix-66 {margin-left: 66.66667%;}
.medium-suffix-66 {margin-right: 66.66667%;}

.medium-grid-100 {clear: both; width: 100%;}
  
}/*/mediaquery*/





/* ---- LARGE ---- */

@media screen and (min-width: 901px) {

.grid-100:before,
  .grid-100:after {
    content: ".";
    display: block;
    overflow: hidden;
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    width: 0;
    height: 0;
  }

  .grid-100:after {
    clear: both;
  }

  .hide-on-large {
    display: none !important;
  }

.grid-5 {float: left; width: 5%;}
.prefix-5 {margin-left: 5%;}
.suffix-5 {margin-right: 5%;}

.grid-10 {float: left; width: 10%;}
.prefix-10 {margin-left: 10%;}
.suffix-10 {margin-right: 10%;}

.grid-15 {float: left; width: 15%;}
.prefix-15 {margin-left: 15%;}
.suffix-15 {margin-right: 15%;}

.grid-20 {float: left; width: 20%;}
.prefix-20 {margin-left: 20%;}
.suffix-20 {margin-right: 20%;}

.grid-25 {float: left; width: 25%;}
.prefix-25 {margin-left: 25%;}
.suffix-25 {margin-right: 25%;}

.grid-30 {float: left; width: 30%;}
.prefix-30 {margin-left: 30%;}
.suffix-30 {margin-right: 30%;}

.grid-35 {float: left; width: 35%;}
.prefix-35 {margin-left: 35%;}
.suffix-35 {margin-right: 35%;}

.grid-40 {float: left; width: 40%;}
.prefix-40 {margin-left: 40%;}
.suffix-40 {margin-right: 40%;}

.grid-45 {float: left; width: 45%;}
.prefix-45 {margin-left: 45%;}
.suffix-45 {margin-right: 45%;}

.grid-50 {float: left; width: 50%;}
.prefix-50 {margin-left: 50%;}
.suffix-50 {margin-right: 50%;}

.grid-55 {float: left; width: 55%;}
.prefix-55 {margin-left: 55%;}
.suffix-55 {margin-right: 55%;}

.grid-60 {float: left; width: 60%;}
.prefix-60 {margin-left: 60%;}
.suffix-60 {margin-right: 60%;}

.grid-65 {float: left; width: 65%;}
.prefix-65 {margin-left: 65%;}
.suffix-65 {margin-right: 65%;}

.grid-70 {float: left; width: 70%;}
.prefix-70 {margin-left: 70%;}
.suffix-70 {margin-right: 70%;}

.grid-75 {float: left; width: 75%;}
.prefix-75 {margin-left: 75%;}
.suffix-75 {margin-right: 75%;}

.grid-80 {float: left; width: 80%;}
.prefix-80 {margin-left: 80%;}
.suffix-80 {margin-right: 80%;}

.grid-85 {float: left; width: 85%;}
.prefix-85 {margin-left: 85%;}
.suffix-85 {margin-right: 85%;}

.grid-90 {float: left; width: 90%;}
.prefix-90 {margin-left: 90%;}
.suffix-90 {margin-right: 90%;}

.grid-95 {float: left; width: 95%;}
.prefix-95 {margin-left: 95%;}
.suffix-95 {margin-right: 95%;}

.grid-33 {float: left; width: 33.33333%;}
.prefix-33 {margin-left: 33.33333%;}
.suffix-33 {margin-right: 33.33333%;}

.grid-66 {float: left; width: 66.66667%;}
.prefix-66 {margin-left: 66.66667%;}
.suffix-66 {margin-right: 66.66667%;}

.grid-100 {clear: both; width: 100%;}

}/*/mediaquery*/