/*==================================================================================================
    GRID
==================================================================================================*/


/*--------------------------------------------------------------------------------------------------
    COLUMNS
--------------------------------------------------------------------------------------------------*/

.col-12-12 {
  width: 100%;
}
.col-11-12 {
  width: 91.66666666666666%;
}
.col-10-12 {
  width: 83.33333333333334%;
}
.col-9-12 {
  width: 75%;
}
.col-8-12 {
  width: 66.66666666666666%;
}
.col-7-12 {
  width: 58.333333333333336%;
}
.col-6-12 {
  width: 50%;
}
.col-5-12 {
  width: 41.66666666666667%;
}
.col-4-12 {
  width: 33.33333333333333%;
}
.col-3-12 {
  width: 25%;
}
.col-2-12 {
  width: 16.666666666666664%;
}
.col-1-12 {
  width: 8.333333333333332%;
}
.col-11-11 {
  width: 100%;
}
.col-10-11 {
  width: 90.9090909090909%;
}
.col-9-11 {
  width: 81.81818181818183%;
}
.col-8-11 {
  width: 72.72727272727273%;
}
.col-7-11 {
  width: 63.63636363636363%;
}
.col-6-11 {
  width: 54.54545454545454%;
}
.col-5-11 {
  width: 45.45454545454545%;
}
.col-4-11 {
  width: 36.36363636363637%;
}
.col-3-11 {
  width: 27.27272727272727%;
}
.col-2-11 {
  width: 18.181818181818183%;
}
.col-1-11 {
  width: 9.090909090909092%;
}
.col-10-10 {
  width: 100%;
}
.col-9-10 {
  width: 90%;
}
.col-8-10 {
  width: 80%;
}
.col-7-10 {
  width: 70%;
}
.col-6-10 {
  width: 60%;
}
.col-5-10 {
  width: 50%;
}
.col-4-10 {
  width: 40%;
}
.col-3-10 {
  width: 30%;
}
.col-2-10 {
  width: 20%;
}
.col-1-10 {
  width: 10%;
}
.col-9-9 {
  width: 100%;
}
.col-8-9 {
  width: 88.88888888888889%;
}
.col-7-9 {
  width: 77.77777777777779%;
}
.col-6-9 {
  width: 66.66666666666666%;
}
.col-5-9 {
  width: 55.55555555555556%;
}
.col-4-9 {
  width: 44.44444444444444%;
}
.col-3-9 {
  width: 33.33333333333333%;
}
.col-2-9 {
  width: 22.22222222222222%;
}
.col-1-9 {
  width: 11.11111111111111%;
}
.col-8-8 {
  width: 100%;
}
.col-7-8 {
  width: 87.5%;
}
.col-6-8 {
  width: 75%;
}
.col-5-8 {
  width: 62.5%;
}
.col-4-8 {
  width: 50%;
}
.col-3-8 {
  width: 37.5%;
}
.col-2-8 {
  width: 25%;
}
.col-1-8 {
  width: 12.5%;
}
.col-7-7 {
  width: 100%;
}
.col-6-7 {
  width: 85.71428571428571%;
}
.col-5-7 {
  width: 71.42857142857143%;
}
.col-4-7 {
  width: 57.14285714285714%;
}
.col-3-7 {
  width: 42.857142857142854%;
}
.col-2-7 {
  width: 28.57142857142857%;
}
.col-1-7 {
  width: 14.285714285714285%;
}
.col-6-6 {
  width: 100%;
}
.col-5-6 {
  width: 83.33333333333334%;
}
.col-4-6 {
  width: 66.66666666666666%;
}
.col-3-6 {
  width: 50%;
}
.col-2-6 {
  width: 33.33333333333333%;
}
.col-1-6 {
  width: 16.666666666666664%;
}
.col-5-5 {
  width: 100%;
}
.col-4-5 {
  width: 80%;
}
.col-3-5 {
  width: 60%;
}
.col-2-5 {
  width: 40%;
}
.col-1-5 {
  width: 20%;
}
.col-4-4 {
  width: 100%;
}
.col-3-4 {
  width: 75%;
}
.col-2-4 {
  width: 50%;
}
.col-1-4 {
  width: 25%;
}
.col-3-3 {
  width: 100%;
}
.col-2-3 {
  width: 66.66666666666666%;
}
.col-1-3 {
  width: 33.33333333333333%;
}
.col-2-2 {
  width: 100%;
}
.col-1-2 {
  width: 50%;
}
.col-1-1 {
  width: 100%;
}


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

body {
  margin: 0px;
}
.grid {
  width: 100%;
  margin: 0 auto;
}
.grid:after {
  content: "";
  display: table;
  clear: both;
}
.grid [class*="col-"] {
  float: left;
  padding-right: 20px;
}
.grid [class*="col-"]:last-of-type,
.grid.seamless [class*="col-"] {
  padding-right: 0px;
}
.grid [class*="col-"],
.grid [class*="col-"]:after,
.grid [class*="col-"]:before,
.grid .grid:after,
.grid .grid:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.grid-pad {
  padding: 20px 0 0px 20px;
}
.grid-pad > [class*="col-"]:last-of-type {
  padding-right: 20px;
}
.push-right {
  float: right;
}


/*--------------------------------------------------------------------------------------------------
    MOBILE
--------------------------------------------------------------------------------------------------*/

@media handheld, only screen and (max-width: 767px) {
  .grid {
    width: 100%;
    min-width: 0;
    padding-left: 0px;
    padding-right: 0px;
  }
  .grid [class*="col-"] {
    width: auto;
    float: none;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .grid.seamless [class*="col-"] {
    margin: 0;
    padding: 0;
  }
  .grid,
  .grid [class*="col-"] {
    margin-left: 0px;
    margin-right: 0px;
  }
}