/*
*************
theGrid
version: 2.0
license: none (public domain)
creator: gabriel anliker
link: https://github.com/gaban30/theGrid/
*************
*/

.clearfix::before, .clearfix::after, .wrapper::before, .wrapper::after, .grid::before, .grid::after {
    content: " ";
    display: table;
}
*::before, *::after {
    box-sizing: border-box;
}
.clearfix::after, .wrapper::after, .grid::after {
    clear: both;
}
.clearfix::before, .clearfix::after, .wrapper::before, .wrapper::after, .grid::before, .grid::after {
    content: " ";
    display: table;
}
*::before, *::after {
    box-sizing: border-box;
}
* {
    box-sizing: border-box;
}
.wrapper {
  margin: 0 auto;
  max-width: 1480px;
  width: 100%;
}
.grid {
	margin: 0 auto;
}
.grid::after {
    content: "";
    display: table;
    clear: both;
}
.grid .col {
    float: left;
    box-sizing: border-box;
    min-height: 1px;
    padding: 0;
}
.grid.col-pad .col {
    padding: 10px;
}
.grid.col-pad-left .col {
    padding-left: 10px;
}
.grid.col-pad-right .col {
    padding-right: 10px;
}
.grid.col-pad-top .col {
    padding-top: 10px;
}
.grid.col-pad-bottom .col {
    padding-bottom: 10px;
}
.grid .col[class*="push-"], .grid .col[class*="pull-"] {
  position: relative;
}

/* Phone (Required)
========================================================================== */
.grid .col.phone-1{
    width: 8.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
}
.grid .col.phone-2{
    width: 16.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
}
.grid .col.phone-3{
    width: 25%;
    margin-left: auto;
    left: auto;
    right: auto;
}
.grid .col.phone-4{
    width: 33.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
}
.grid .col.phone-5{
    width: 41.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
}
.grid .col.phone-6{
    width: 50%;
    margin-left: auto;
    left: auto;
    right: auto;
}
.grid .col.phone-7{
    width: 58.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
}
.grid .col.phone-8{
    width: 66.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
}
.grid .col.phone-9{
    width: 75%;
    margin-left: auto;
    left: auto;
    right: auto;
}
.grid .col.phone-10{
    width: 83.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
}
.grid .col.phone-11{
    width: 91.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
}
.grid .col.phone-12{
    width: 100%;
    margin-left: auto;
    left: auto;
    right: auto;
}
.grid .col.phone-offset-1 {
  margin-left: 8.3333333333%;
}
.grid .col.phone-pull-1 {
  right: 8.3333333333%;
}
.grid .col.phone-push-1 {
  left: 8.3333333333%;
}
.grid .col.phone-offset-2 {
  margin-left: 16.6666666667%;
}
.grid .col.phone-pull-2 {
  right: 16.6666666667%;
}
.grid .col.phone-push-2 {
  left: 16.6666666667%;
}
.grid .col.phone-offset-3 {
  margin-left: 25%;
}
.grid .col.phone-pull-3 {
  right: 25%;
}
.grid .col.phone-push-3 {
  left: 25%;
}
.grid .col.phone-offset-4 {
  margin-left: 33.3333333333%;
}
.grid .col.phone-pull-4 {
  right: 33.3333333333%;
}
.grid .col.phone-push-4 {
  left: 33.3333333333%;
}
.grid .col.phone-offset-5 {
  margin-left: 41.6666666667%;
}
.grid .col.phone-pull-5 {
  right: 41.6666666667%;
}
.grid .col.phone-push-5 {
  left: 41.6666666667%;
}
.grid .col.phone-offset-6 {
  margin-left: 50%;
}
.grid .col.phone-pull-6 {
  right: 50%;
}
.grid .col.phone-push-6 {
  left: 50%;
}
.grid .col.phone-offset-7 {
  margin-left: 58.3333333333%;
}
.grid .col.phone-pull-7 {
  right: 58.3333333333%;
}
.grid .col.phone-push-7 {
  left: 58.3333333333%;
}
.grid .col.phone-offset-8 {
  margin-left: 66.6666666667%;
}
.grid .col.phone-pull-8 {
  right: 66.6666666667%;
}
.grid .col.phone-push-8 {
  left: 66.6666666667%;
}
.grid .col.phone-offset-9 {
  margin-left: 75%;
}
.grid .col.phone-pull-9 {
  right: 75%;
}
.grid .col.phone-push-9 {
  left: 75%;
}
.grid .col.phone-offset-10 {
  margin-left: 83.3333333333%;
}
.grid .col.phone-pull-10 {
  right: 83.3333333333%;
}
.grid .col.phone-push-10 {
  left: 83.3333333333%;
}
.grid .col.phone-offset-11 {
  margin-left: 91.6666666667%;
}
.grid .col.phone-pull-11 {
  right: 91.6666666667%;
}
.grid .col.phone-push-11 {
  left: 91.6666666667%;
}
.grid .col.phone-offset-12 {
  margin-left: 100%;
}
.grid .col.phone-pull-12 {
  right: 100%;
}
.grid .col.phone-push-12 {
  left: 100%;
}

/* Tablet
========================================================================== */
@media screen and (min-width: 600px) {

    .grid .col.tablet-1{
        width: 8.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .grid .col.tablet-2{
        width: 16.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .grid .col.tablet-3{
        width: 25%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .grid .col.tablet-4{
        width: 33.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .grid .col.tablet-5{
        width: 41.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .grid .col.tablet-6{
        width: 50%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .grid .col.tablet-7{
        width: 58.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .grid .col.tablet-8{
        width: 66.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .grid .col.tablet-9{
        width: 75%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .grid .col.tablet-10{
        width: 83.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .grid .col.tablet-11{
        width: 91.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .grid .col.tablet-12{
        width: 100%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .grid .col.tablet-offset-1 {
      margin-left: 8.3333333333%;
    }
    .grid .col.tablet-pull-1 {
      right: 8.3333333333%;
    }
    .grid .col.tablet-push-1 {
      left: 8.3333333333%;
    }
    .grid .col.tablet-offset-2 {
      margin-left: 16.6666666667%;
    }
    .grid .col.tablet-pull-2 {
      right: 16.6666666667%;
    }
    .grid .col.tablet-push-2 {
      left: 16.6666666667%;
    }
    .grid .col.tablet-offset-3 {
      margin-left: 25%;
    }
    .grid .col.tablet-pull-3 {
      right: 25%;
    }
    .grid .col.tablet-push-3 {
      left: 25%;
    }
    .grid .col.tablet-offset-4 {
      margin-left: 33.3333333333%;
    }
    .grid .col.tablet-pull-4 {
      right: 33.3333333333%;
    }
    .grid .col.tablet-push-4 {
      left: 33.3333333333%;
    }
    .grid .col.tablet-offset-5 {
      margin-left: 41.6666666667%;
    }
    .grid .col.tablet-pull-5 {
      right: 41.6666666667%;
    }
    .grid .col.tablet-push-5 {
      left: 41.6666666667%;
    }
    .grid .col.tablet-offset-6 {
      margin-left: 50%;
    }
    .grid .col.tablet-pull-6 {
      right: 50%;
    }
    .grid .col.tablet-push-6 {
      left: 50%;
    }
    .grid .col.tablet-offset-7 {
      margin-left: 58.3333333333%;
    }
    .grid .col.tablet-pull-7 {
      right: 58.3333333333%;
    }
    .grid .col.tablet-push-7 {
      left: 58.3333333333%;
    }
    .grid .col.tablet-offset-8 {
      margin-left: 66.6666666667%;
    }
    .grid .col.tablet-pull-8 {
      right: 66.6666666667%;
    }
    .grid .col.tablet-push-8 {
      left: 66.6666666667%;
    }
    .grid .col.tablet-offset-9 {
      margin-left: 75%;
    }
    .grid .col.tablet-pull-9 {
      right: 75%;
    }
    .grid .col.tablet-push-9 {
      left: 75%;
    }
    .grid .col.tablet-offset-10 {
      margin-left: 83.3333333333%;
    }
    .grid .col.tablet-pull-10 {
      right: 83.3333333333%;
    }
    .grid .col.tablet-push-10 {
      left: 83.3333333333%;
    }
    .grid .col.tablet-offset-11 {
      margin-left: 91.6666666667%;
    }
    .grid .col.tablet-pull-11 {
      right: 91.6666666667%;
    }
    .grid .col.tablet-push-11 {
      left: 91.6666666667%;
    }
    .grid .col.tablet-offset-12 {
      margin-left: 100%;
    }
    .grid .col.tablet-pull-12 {
      right: 100%;
    }
    .grid .col.tablet-push-12 {
      left: 100%;
    }

}

/* Desktop
========================================================================== */
@media screen and (min-width: 992px) {

    .grid .col.desktop-1{
        width: 8.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .grid .col.desktop-2{
        width: 16.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .grid .col.desktop-3{
        width: 25%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .grid .col.desktop-4{
        width: 33.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .grid .col.desktop-5{
        width: 41.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .grid .col.desktop-6{
        width: 50%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .grid .col.desktop-7{
        width: 58.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .grid .col.desktop-8{
        width: 66.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .grid .col.desktop-9{
        width: 75%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .grid .col.desktop-10{
        width: 83.3333333333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .grid .col.desktop-11{
        width: 91.6666666667%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .grid .col.desktop-12{
        width: 100%;
        margin-left: auto;
        left: auto;
        right: auto;
    }
    .grid .col.desktop-offset-1 {
      margin-left: 8.3333333333%;
    }
    .grid .col.desktop-pull-1 {
      right: 8.3333333333%;
    }
    .grid .col.desktop-push-1 {
      left: 8.3333333333%;
    }
    .grid .col.desktop-offset-2 {
      margin-left: 16.6666666667%;
    }
    .grid .col.desktop-pull-2 {
      right: 16.6666666667%;
    }
    .grid .col.desktop-push-2 {
      left: 16.6666666667%;
    }
    .grid .col.desktop-offset-3 {
      margin-left: 25%;
    }
    .grid .col.desktop-pull-3 {
      right: 25%;
    }
    .grid .col.desktop-push-3 {
      left: 25%;
    }
    .grid .col.desktop-offset-4 {
      margin-left: 33.3333333333%;
    }
    .grid .col.desktop-pull-4 {
      right: 33.3333333333%;
    }
    .grid .col.desktop-push-4 {
      left: 33.3333333333%;
    }
    .grid .col.desktop-offset-5 {
      margin-left: 41.6666666667%;
    }
    .grid .col.desktop-pull-5 {
      right: 41.6666666667%;
    }
    .grid .col.desktop-push-5 {
      left: 41.6666666667%;
    }
    .grid .col.desktop-offset-6 {
      margin-left: 50%;
    }
    .grid .col.desktop-pull-6 {
      right: 50%;
    }
    .grid .col.desktop-push-6 {
      left: 50%;
    }
    .grid .col.desktop-offset-7 {
      margin-left: 58.3333333333%;
    }
    .grid .col.desktop-pull-7 {
      right: 58.3333333333%;
    }
    .grid .col.desktop-push-7 {
      left: 58.3333333333%;
    }
    .grid .col.desktop-offset-8 {
      margin-left: 66.6666666667%;
    }
    .grid .col.desktop-pull-8 {
      right: 66.6666666667%;
    }
    .grid .col.desktop-push-8 {
      left: 66.6666666667%;
    }
    .grid .col.desktop-offset-9 {
      margin-left: 75%;
    }
    .grid .col.desktop-pull-9 {
      right: 75%;
    }
    .grid .col.desktop-push-9 {
      left: 75%;
    }
    .grid .col.desktop-offset-10 {
      margin-left: 83.3333333333%;
    }
    .grid .col.desktop-pull-10 {
      right: 83.3333333333%;
    }
    .grid .col.desktop-push-10 {
      left: 83.3333333333%;
    }
    .grid .col.desktop-offset-11 {
      margin-left: 91.6666666667%;
    }
    .grid .col.desktop-pull-11 {
      right: 91.6666666667%;
    }
    .grid .col.desktop-push-11 {
      left: 91.6666666667%;
    }
    .grid .col.desktop-offset-12 {
      margin-left: 100%;
    }
    .grid .col.desktop-pull-12 {
      right: 100%;
    }
    .grid .col.desktop-push-12 {
      left: 100%;
    }

}

/* Media Query Classes
========================================================================== */
@media only screen and (max-width: 599px) {
  .hide-on-phone {
    display: none !important;
  }
}
@media only screen and (max-width: 991px) {
  .hide-on-tablet-and-down {
    display: none !important;
  }
}
@media only screen and (min-width: 600px) {
  .hide-on-tablet-and-up {
    display: none !important;
  }
}
@media only screen and (min-width: 600px) and (max-width: 991px) {
  .hide-on-tablet-only {
    display: none !important;
  }
}
@media only screen and (min-width: 992px) {
  .hide-on-desktop-only {
    display: none !important;
  }
}
@media only screen and (min-width: 992px) {
  .show-on-desktop{
    display: block !important;
  }
}
@media only screen and (min-width: 600px) and (max-width: 991px) {
  .show-on-tablet {
    display: block !important;
  }
}
@media only screen and (max-width: 599px) {
  .show-on-phone {
    display: block !important;
  }
}
@media only screen and (min-width: 600px) {
  .show-on-tablet-and-up {
    display: block !important;
  }
}
@media only screen and (max-width: 991px) {
  .show-on-tablet-and-down {
    display: block !important;
  }
}
@media only screen and (max-width: 599px) {
  .center-on-phone {
    text-align: center;
  }

}