/* 
* Condept-Grid V1.0
* Copyright 2017, Condept Development Team
* www.condept.nl
*/

.container {
 width: 100%;
 max-width: calc(1200px + 50px * 2);
 position: relative;
 margin: 0 auto;
 padding: calc(50px / 2);
}

.row {
 width: 100%;
 position: relative;
 padding: calc(50px / 2) 0;
 display: inline-block;
 margin-bottom: -10px;
}

.col_12 {
 width: calc(100% - 50px);
 position: relative;
 margin: 0 calc(50px / 2);
 float: left;
}

.col_6 {
 width: calc(100% / 2 - 50px);
 position: relative;
 float: left;
 margin: 0 calc(50px / 2);
}

.col_10 {
 width: calc(100% / 12 * 10 - 50px);
 position: relative;
 float: left;
 margin: 0 calc(50px / 2);
}

.col_4 {
 width: calc(100% / 3 - 51px);
 position: relative;
 float: left;
 margin: 0 calc(50px / 2);
}

.col_3 {
 width: calc(100% / 4 - 50px);
 position: relative;
 float: left;
 margin: 0 calc(50px / 2);
}

.col_8 {
 width: calc(100% / 3 * 2 - 50px);
 position: relative;
 float: left;
 margin: 0 calc(50px / 2);
}

.col_2 {
 width: calc(100% / 6 - 50px);
 position: relative;
 float: left;
 margin: 0 calc(50px / 2);
}

.offset_1 {
 margin-left: calc(100% / 12 + 25px);
}


/* Tablet */
@media only screen and (max-width: 959px) {
 .container {
  max-width: calc(1200px + 25px * 2);
  padding: calc(25px / 2);
 }
 .row {
  padding: calc(25px / 2) 0;
 }
 .col_3 {
   width: calc(100% / 2 - 25px);
   margin: 0 calc(25px / 2) 25px;
  }
 .col_10 {
  width: calc(100% - 25px);
  margin: 0 calc(25px / 2);
 }
 .col_6 {
  width: calc(100% - 25px);
  margin: 0 calc(25px / 2);
 }

 .col_4 {
  width: calc(100% / 3 - 26px);
  margin: 0 calc(25px / 2);
 }

 .col_12 {
  width: calc(100% - 25px);
  margin: 0 calc(25px / 2);
 }

 .offset_1 {
  margin-left: calc(25px / 2);
 }

}


/* Phone (landscape) */
@media only screen and (max-width: 767px) {
 .col_4 {
  width: calc(100% - 25px);
  margin: 0 calc(25px / 2) 25px;
 }

 .col_4:nth-of-type(4) {
  margin: 0 calc(25px / 2);
 }


}


/* Phone (portrait) */
@media only screen and (max-width: 480px) {

}