/* - - - - - - - - - -
 10 COLS GRID SYSTEM
 Marta Petrella
 - - - - - - - - - -- */

/*  SECTIONS  */
.twelve_col {
  -webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;	clear: both;
	padding: calc( 10px / 2 ) calc( 10px / 2 );
	margin: 0;
}

.twelve_col.noExternalGap {
	margin: 0 -10px;
}

/*  COLUMN SETUP  */
.twelve_col .col {
  min-height: 1px;
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
	display: block;
	float:left;
	margin: calc( 10px / 2 );
}

.twelve_col.noExternalGap {
  margin-left:-10px;
  margin-right:-10px;
}

.twelve_col.noExternalGap .col {
  width: calc( 100% - 10px );
}

.twelve_col.noInternalGap .col {
  width: 100%;
}

/* DEBUG MODE */
.twelve_col.debug { background: red;}
.twelve_col.debug .col { background: pink; }
.twelve_col.debug .twelve_col.debug { background: blue;}
.twelve_col.debug .twelve_col.debug .col { background: orange; }

.twelve_col:before,
.twelve_col:after { content:""; display:table; }
.twelve_col:after { clear:both;}
.twelve_col { zoom:1; /* For IE 6/7 */ }

/*  GRID OF TEN  */
.twelve_col .col.span_12_of_12 { width: calc( ( 8.333% * 12 ) - 10px ); }
.twelve_col .col.span_11_of_12 { width: calc( ( 8.333% * 11 ) - 10px ); }
.twelve_col .col.span_10_of_12 { width: calc( ( 8.333% * 10 ) - 10px ); }
.twelve_col .col.span_9_of_12 { width: calc( ( 8.333% * 9 ) - 10px ); }
.twelve_col .col.span_8_of_12 { width: calc( ( 8.333% * 8 ) - 10px ) ; }
.twelve_col .col.span_7_of_12 { width: calc( ( 8.333% * 7 ) - 10px ) ; }
.twelve_col .col.span_6_of_12 { width: calc( ( 8.333% * 6 ) - 10px ) ; }
.twelve_col .col.span_5_of_12 { width: calc( ( 8.333% * 5 ) - 10px ) ; }
.twelve_col .col.span_4_of_12 { width: calc( ( 8.333% * 4 ) - 10px ) ; }
.twelve_col .col.span_3_of_12 { width: calc( ( 8.333% * 3 ) - 10px ) ; }
.twelve_col .col.span_2_of_12 { width: calc( ( 8.333% * 2 ) - 10px ) ; }
.twelve_col .col.span_1_of_12 { width: calc( ( 8.333% * 1 ) - 10px ) ; }

.twelve_col.noInternalGap .twelve_col .col.span_12_of_12 { width: ( 8.333% * 12 ) }
.twelve_col.noInternalGap .twelve_col .col.span_11_of_12 { width: ( 8.333% * 11 ) }
.twelve_col.noInternalGap .twelve_col .col.span_10_of_12 { width: ( 8.333% * 10 ) }
.twelve_col.noInternalGap .twelve_col .col.span_9_of_12 { width: ( 8.333% * 9 ) }
.twelve_col.noInternalGap .twelve_col .col.span_8_of_12 { width: ( 8.333% * 8 ) }
.twelve_col.noInternalGap .twelve_col .col.span_7_of_12 { width: ( 8.333% * 7 ) }
.twelve_col.noInternalGap .twelve_col .col.span_6_of_12 { width: ( 8.333% * 6 ) }
.twelve_col.noInternalGap .twelve_col .col.span_5_of_12 { width: ( 8.333% * 5 ) }
.twelve_col.noInternalGap .twelve_col .col.span_4_of_12 { width: ( 8.333% * 4 ) }
.twelve_col.noInternalGap .twelve_col .col.span_3_of_12 { width: ( 8.333% * 3 ) }
.twelve_col.noInternalGap .twelve_col .col.span_2_of_12 { width: ( 8.333% * 2 ) }
.twelve_col.noInternalGap .twelve_col .col.span_1_of_12 { width: ( 8.333% * 1 ) }

@media(min-width:481px) {

  .twelve_col .col.span_12_of_12-tablet { width: calc( ( 8.333% * 12 ) - 10px ); }
  .twelve_col .col.span_11_of_12-tablet { width: calc( ( 8.333% * 11 ) - 10px ); }
  .twelve_col .col.span_10_of_12-tablet { width: calc( ( 8.333% * 10 ) - 10px ); }
  .twelve_col .col.span_9_of_12-tablet { width: calc( ( 8.333% * 9 ) - 10px ); }
  .twelve_col .col.span_8_of_12-tablet { width: calc( ( 8.333% * 8 ) - 10px ) ; }
  .twelve_col .col.span_7_of_12-tablet { width: calc( ( 8.333% * 7 ) - 10px ) ; }
  .twelve_col .col.span_6_of_12-tablet { width: calc( ( 8.333% * 6 ) - 10px ) ; }
  .twelve_col .col.span_5_of_12-tablet { width: calc( ( 8.333% * 5 ) - 10px ) ; }
  .twelve_col .col.span_4_of_12-tablet { width: calc( ( 8.333% * 4 ) - 10px ) ; }
  .twelve_col .col.span_3_of_12-tablet { width: calc( ( 8.333% * 3 ) - 10px ) ; }
  .twelve_col .col.span_2_of_12-tablet { width: calc( ( 8.333% * 2 ) - 10px ) ; }
  .twelve_col .col.span_1_of_12-tablet { width: calc( ( 8.333% * 1 ) - 10px ) ; }

  .twelve_col.noInternalGap .twelve_col .col.span_12_of_12-tablet { width: ( 8.333% * 12 ) }
  .twelve_col.noInternalGap .twelve_col .col.span_11_of_12-tablet { width: ( 8.333% * 11 ) }
  .twelve_col.noInternalGap .twelve_col .col.span_10_of_12-tablet { width: ( 8.333% * 10 ) }
  .twelve_col.noInternalGap .twelve_col .col.span_9_of_12-tablet { width: ( 8.333% * 9 ) }
  .twelve_col.noInternalGap .twelve_col .col.span_8_of_12-tablet { width: ( 8.333% * 8 ) }
  .twelve_col.noInternalGap .twelve_col .col.span_7_of_12-tablet { width: ( 8.333% * 7 ) }
  .twelve_col.noInternalGap .twelve_col .col.span_6_of_12-tablet { width: ( 8.333% * 6 ) }
  .twelve_col.noInternalGap .twelve_col .col.span_5_of_12-tablet { width: ( 8.333% * 5 ) }
  .twelve_col.noInternalGap .twelve_col .col.span_4_of_12-tablet { width: ( 8.333% * 4 ) }
  .twelve_col.noInternalGap .twelve_col .col.span_3_of_12-tablet { width: ( 8.333% * 3 ) }
  .twelve_col.noInternalGap .twelve_col .col.span_2_of_12-tablet { width: ( 8.333% * 2 ) }
  .twelve_col.noInternalGap .twelve_col .col.span_1_of_12-tablet { width: ( 8.333% * 1 ) }

}

@media(min-width:1024px) {

  .twelve_col { padding: calc( 20px / 2 ) calc( 20px / 2 ); }
  .twelve_col.noExternalGap { margin: 0 -20px; }
  .twelve_col .col { margin: calc( 20px / 2 ); }
  .twelve_col.noExternalGap .col { width: calc( 100% - 20px ); }

  .twelve_col .col.span_12_of_12 { width: calc( ( 8.333% * 12 ) - 20px ); }
  .twelve_col .col.span_11_of_12 { width: calc( ( 8.333% * 11 ) - 20px ); }
  .twelve_col .col.span_10_of_12 { width: calc( ( 8.333% * 10 ) - 20px ); }
  .twelve_col .col.span_9_of_12 { width: calc( ( 8.333% * 9 ) - 20px ); }
  .twelve_col .col.span_8_of_12 { width: calc( ( 8.333% * 8 ) - 20px ) ; }
  .twelve_col .col.span_7_of_12 { width: calc( ( 8.333% * 7 ) - 20px ) ; }
  .twelve_col .col.span_6_of_12 { width: calc( ( 8.333% * 6 ) - 20px ) ; }
  .twelve_col .col.span_5_of_12 { width: calc( ( 8.333% * 5 ) - 20px ) ; }
  .twelve_col .col.span_4_of_12 { width: calc( ( 8.333% * 4 ) - 20px ) ; }
  .twelve_col .col.span_3_of_12 { width: calc( ( 8.333% * 3 ) - 20px ) ; }
  .twelve_col .col.span_2_of_12 { width: calc( ( 8.333% * 2 ) - 20px ) ; }
  .twelve_col .col.span_1_of_12 { width: calc( ( 8.333% * 1 ) - 20px ) ; }

  .twelve_col .col.span_12_of_12-tablet { width: calc( ( 8.333% * 12 ) - 20px ); }
  .twelve_col .col.span_11_of_12-tablet { width: calc( ( 8.333% * 11 ) - 20px ); }
  .twelve_col .col.span_10_of_12-tablet { width: calc( ( 8.333% * 10 ) - 20px ); }
  .twelve_col .col.span_9_of_12-tablet { width: calc( ( 8.333% * 9 ) - 20px ); }
  .twelve_col .col.span_8_of_12-tablet { width: calc( ( 8.333% * 8 ) - 20px ) ; }
  .twelve_col .col.span_7_of_12-tablet { width: calc( ( 8.333% * 7 ) - 20px ) ; }
  .twelve_col .col.span_6_of_12-tablet { width: calc( ( 8.333% * 6 ) - 20px ) ; }
  .twelve_col .col.span_5_of_12-tablet { width: calc( ( 8.333% * 5 ) - 20px ) ; }
  .twelve_col .col.span_4_of_12-tablet { width: calc( ( 8.333% * 4 ) - 20px ) ; }
  .twelve_col .col.span_3_of_12-tablet { width: calc( ( 8.333% * 3 ) - 20px ) ; }
  .twelve_col .col.span_2_of_12-tablet { width: calc( ( 8.333% * 2 ) - 20px ) ; }
  .twelve_col .col.span_1_of_12-tablet { width: calc( ( 8.333% * 1 ) - 20px ) ; }

  .twelve_col .col.span_12_of_12-desktop { width: calc( ( 8.333% * 12 ) - 20px ); }
  .twelve_col .col.span_11_of_12-desktop { width: calc( ( 8.333% * 11 ) - 20px ); }
  .twelve_col .col.span_10_of_12-desktop { width: calc( ( 8.333% * 10 ) - 20px ); }
  .twelve_col .col.span_9_of_12-desktop { width: calc( ( 8.333% * 9 ) - 20px ); }
  .twelve_col .col.span_8_of_12-desktop { width: calc( ( 8.333% * 8 ) - 20px ) ; }
  .twelve_col .col.span_7_of_12-desktop { width: calc( ( 8.333% * 7 ) - 20px ) ; }
  .twelve_col .col.span_6_of_12-desktop { width: calc( ( 8.333% * 6 ) - 20px ) ; }
  .twelve_col .col.span_5_of_12-desktop { width: calc( ( 8.333% * 5 ) - 20px ) ; }
  .twelve_col .col.span_4_of_12-desktop { width: calc( ( 8.333% * 4 ) - 20px ) ; }
  .twelve_col .col.span_3_of_12-desktop { width: calc( ( 8.333% * 3 ) - 20px ) ; }
  .twelve_col .col.span_2_of_12-desktop { width: calc( ( 8.333% * 2 ) - 20px ) ; }
  .twelve_col .col.span_1_of_12-desktop { width: calc( ( 8.333% * 1 ) - 20px ) ; }

  .twelve_col.noInternalGap .twelve_col .col.span_12_of_12-desktop { width: ( 8.333% * 12 ) }
  .twelve_col.noInternalGap .twelve_col .col.span_11_of_12-desktop { width: ( 8.333% * 11 ) }
  .twelve_col.noInternalGap .twelve_col .col.span_10_of_12-desktop { width: ( 8.333% * 10 ) }
  .twelve_col.noInternalGap .twelve_col .col.span_9_of_12-desktop { width: ( 8.333% * 9 ) }
  .twelve_col.noInternalGap .twelve_col .col.span_8_of_12-desktop { width: ( 8.333% * 8 ) }
  .twelve_col.noInternalGap .twelve_col .col.span_7_of_12-desktop { width: ( 8.333% * 7 ) }
  .twelve_col.noInternalGap .twelve_col .col.span_6_of_12-desktop { width: ( 8.333% * 6 ) }
  .twelve_col.noInternalGap .twelve_col .col.span_5_of_12-desktop { width: ( 8.333% * 5 ) }
  .twelve_col.noInternalGap .twelve_col .col.span_4_of_12-desktop { width: ( 8.333% * 4 ) }
  .twelve_col.noInternalGap .twelve_col .col.span_3_of_12-desktop { width: ( 8.333% * 3 ) }
  .twelve_col.noInternalGap .twelve_col .col.span_2_of_12-desktop { width: ( 8.333% * 2 ) }
  .twelve_col.noInternalGap .twelve_col .col.span_1_of_12-desktop { width: ( 8.333% * 1 ) }

}

@media(min-width:1281px) {

  .twelve_col .col.span_12_of_12-big { width: calc( ( 8.333% * 12 ) - 20px ); }
  .twelve_col .col.span_11_of_12-big { width: calc( ( 8.333% * 11 ) - 20px ); }
  .twelve_col .col.span_10_of_12-big { width: calc( ( 8.333% * 10 ) - 20px ); }
  .twelve_col .col.span_9_of_12-big { width: calc( ( 8.333% * 9 ) - 20px ); }
  .twelve_col .col.span_8_of_12-big { width: calc( ( 8.333% * 8 ) - 20px ) ; }
  .twelve_col .col.span_7_of_12-big { width: calc( ( 8.333% * 7 ) - 20px ) ; }
  .twelve_col .col.span_6_of_12-big { width: calc( ( 8.333% * 6 ) - 20px ) ; }
  .twelve_col .col.span_5_of_12-big { width: calc( ( 8.333% * 5 ) - 20px ) ; }
  .twelve_col .col.span_4_of_12-big { width: calc( ( 8.333% * 4 ) - 20px ) ; }
  .twelve_col .col.span_3_of_12-big { width: calc( ( 8.333% * 3 ) - 20px ) ; }
  .twelve_col .col.span_2_of_12-big { width: calc( ( 8.333% * 2 ) - 20px ) ; }
  .twelve_col .col.span_1_of_12-big { width: calc( ( 8.333% * 1 ) - 20px ) ; }

  .twelve_col.noInternalGap .twelve_col .col.span_12_of_12-big { width: ( 8.333% * 12 ) }
  .twelve_col.noInternalGap .twelve_col .col.span_11_of_12-big { width: ( 8.333% * 11 ) }
  .twelve_col.noInternalGap .twelve_col .col.span_10_of_12-big { width: ( 8.333% * 10 ) }
  .twelve_col.noInternalGap .twelve_col .col.span_9_of_12-big { width: ( 8.333% * 9 ) }
  .twelve_col.noInternalGap .twelve_col .col.span_8_of_12-big { width: ( 8.333% * 8 ) }
  .twelve_col.noInternalGap .twelve_col .col.span_7_of_12-big { width: ( 8.333% * 7 ) }
  .twelve_col.noInternalGap .twelve_col .col.span_6_of_12-big { width: ( 8.333% * 6 ) }
  .twelve_col.noInternalGap .twelve_col .col.span_5_of_12-big { width: ( 8.333% * 5 ) }
  .twelve_col.noInternalGap .twelve_col .col.span_4_of_12-big { width: ( 8.333% * 4 ) }
  .twelve_col.noInternalGap .twelve_col .col.span_3_of_12-big { width: ( 8.333% * 3 ) }
  .twelve_col.noInternalGap .twelve_col .col.span_2_of_12-big { width: ( 8.333% * 2 ) }
  .twelve_col.noInternalGap .twelve_col .col.span_1_of_12-big { width: ( 8.333% * 1 ) }

}