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

/*  SECTIONS  */
.ten_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;
}

.noExternalGap {
	margin: 0 -10px;
}


.ten_col.noVerticalGap {
	padding-top:0;
    padding-bottom: 0;
}
.pdp-desktop .ten_col.noVerticalGap {
    margin-bottom: 50px;
}
.ten_col.noTopGap {
	padding-top:0;
}
.ten_col.noBottomGap {
  padding-bottom: 0;
}
.ten_col.noLeftGap {
	margin: 0 0 0 -10px;
}
.ten_col.noRightGap {
	margin: 0 -10px 0 0;
}


.ten_col .col.noVerticalGap {
	margin-top:0;
  margin-bottom: 0;
}
.ten_col .col.noTopGap {
	margin-top:0;
}
.ten_col .col.noBottomGap {
  margin-bottom: 0;
}
.ten_col .col.noLeftGap {
	margin: 0 0 0 -10px;
}
.ten_col .col.noRightGap {
	margin: 0 -10px 0 0;
}

/*  COLUMN SETUP  */
.ten_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 );
}

.col-Right {
  float: right !important;
}

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

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

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

/* DEBUG MODE */
.ten_col.debug { background: green;}
.ten_col.debug .col { background: yellow; }
.ten_col.debug .ten_col.debug { background: blue;}
.ten_col.debug .ten_col.debug .col { background: orange; }

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

.ten_col .col.span_10_of_10 { width: calc( 100% - 20px ); }
.ten_col .col.span_9_of_10 { width: calc( 90% - 20px ); }
.ten_col .col.span_8_of_10 { width: calc( 80% - 20px ) ; }
.ten_col .col.span_7_of_10 { width: calc( 70% - 20px ) ; }
.ten_col .col.span_6_of_10 { width: calc( 60% - 20px ) ; }
.ten_col .col.span_5_of_10 { width: calc( 50% - 20px ) ; }
.ten_col .col.span_4_of_10 { width: calc( 40% - 20px ) ; }
.ten_col .col.span_3_of_10 { width: calc( 30% - 20px ) ; }
.ten_col .col.span_2_of_10 { width: calc( 20% - 20px ) ; }
.ten_col .col.span_1_of_10 { width: calc( 10% - 20px ) ; }
.ten_col .col.span_0_of_10 { width: }

.ten_col .col.span_0_of_10 { width: }

@media(min-width:641px) {

  .ten_col .col.span_10_of_10-tablet { width: calc( 100% - 10px ); }
  .ten_col .col.span_9_of_10-tablet { width: calc( 90% - 10px ); }
  .ten_col .col.span_8_of_10-tablet { width: calc( 80% - 10px ) ; }
  .ten_col .col.span_7_of_10-tablet { width: calc( 70% - 10px ) ; }
  .ten_col .col.span_6_of_10-tablet { width: calc( 60% - 10px ) ; }
  .ten_col .col.span_5_of_10-tablet { width: calc( 50% - 10px ) ; }
  .ten_col .col.span_4_of_10-tablet { width: calc( 40% - 10px ) ; }
  .ten_col .col.span_3_of_10-tablet { width: calc( 30% - 10px ) ; }
  .ten_col .col.span_2_of_10-tablet { width: calc( 20% - 10px ) ; }
  .ten_col .col.span_1_of_10-tablet { width: calc( 10% - 10px ) ; }

  .ten_col.noInternalGap .ten_col .col.span_10_of_10-tablet { width: 100% }
  .ten_col.noInternalGap .ten_col .col.span_9_of_10-tablet { width: 90% }
  .ten_col.noInternalGap .ten_col .col.span_8_of_10-tablet { width: 80% }
  .ten_col.noInternalGap .ten_col .col.span_7_of_10-tablet { width: 70% }
  .ten_col.noInternalGap .ten_col .col.span_6_of_10-tablet { width: 60% }
  .ten_col.noInternalGap .ten_col .col.span_5_of_10-tablet { width: 50% }
  .ten_col.noInternalGap .ten_col .col.span_4_of_10-tablet { width: 40% }
  .ten_col.noInternalGap .ten_col .col.span_3_of_10-tablet { width: 30% }
  .ten_col.noInternalGap .ten_col .col.span_2_of_10-tablet { width: 20% }
  .ten_col.noInternalGap .ten_col .col.span_1_of_10-tablet { width: 10% }

  .ten_col .col.span_0_of_10-tablet { width: 0; margin: 0;}

}


@media(min-width:1024px) {

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

  .ten_col .col.span_10_of_10 { width: calc( 100% - 20px ); }
  .ten_col .col.span_9_of_10 { width: calc( 90% - 20px ); }
  .ten_col .col.span_8_of_10 { width: calc( 80% - 20px ) ; }
  .ten_col .col.span_7_of_10 { width: calc( 70% - 20px ) ; }
  .ten_col .col.span_6_of_10 { width: calc( 60% - 20px ) ; }
  .ten_col .col.span_5_of_10 { width: calc( 50% - 20px ) ; }
  .ten_col .col.span_4_of_10 { width: calc( 40% - 20px ) ; }
  .ten_col .col.span_3_of_10 { width: calc( 30% - 20px ) ; }
  .ten_col .col.span_2_of_10 { width: calc( 20% - 20px ) ; }
  .ten_col .col.span_1_of_10 { width: calc( 10% - 20px ) ; }

  .ten_col .col.span_10_of_10-tablet { width: calc( 100% - 20px ); }
  .ten_col .col.span_9_of_10-tablet { width: calc( 90% - 20px ); }
  .ten_col .col.span_8_of_10-tablet { width: calc( 80% - 20px ) ; }
  .ten_col .col.span_7_of_10-tablet { width: calc( 70% - 20px ) ; }
  .ten_col .col.span_6_of_10-tablet { width: calc( 60% - 20px ) ; }
  .ten_col .col.span_5_of_10-tablet { width: calc( 50% - 20px ) ; }
  .ten_col .col.span_4_of_10-tablet { width: calc( 40% - 20px ) ; }
  .ten_col .col.span_3_of_10-tablet { width: calc( 30% - 20px ) ; }
  .ten_col .col.span_2_of_10-tablet { width: calc( 20% - 20px ) ; }
  .ten_col .col.span_1_of_10-tablet { width: calc( 10% - 20px ) ; }

  .ten_col .col.span_10_of_10-desktop { width: calc( 100% - 20px ); }
  .ten_col .col.span_9_of_10-desktop { width: calc( 90% - 20px ); }
  .ten_col .col.span_8_of_10-desktop { width: calc( 80% - 20px ) ; }
  .ten_col .col.span_7_of_10-desktop { width: calc( 70% - 20px ) ; }
  .ten_col .col.span_6_of_10-desktop { width: calc( 60% - 20px ) ; }
  .ten_col .col.span_5_of_10-desktop { width: calc( 50% - 20px ) ; }
  .ten_col .col.span_4_of_10-desktop { width: calc( 40% - 20px ) ; }
  .ten_col .col.span_3_of_10-desktop { width: calc( 30% - 20px ) ; }
  .ten_col .col.span_2_of_10-desktop { width: calc( 20% - 20px ) ; }
  .ten_col .col.span_1_of_10-desktop { width: calc( 10% - 20px ) ; }

  .ten_col.noInternalGap .ten_col .col.span_10_of_10-desktop { width: 100% }
  .ten_col.noInternalGap .ten_col .col.span_9_of_10-desktop { width: 90% }
  .ten_col.noInternalGap .ten_col .col.span_8_of_10-desktop { width: 80% }
  .ten_col.noInternalGap .ten_col .col.span_7_of_10-desktop { width: 70% }
  .ten_col.noInternalGap .ten_col .col.span_6_of_10-desktop { width: 60% }
  .ten_col.noInternalGap .ten_col .col.span_5_of_10-desktop { width: 50% }
  .ten_col.noInternalGap .ten_col .col.span_4_of_10-desktop { width: 40% }
  .ten_col.noInternalGap .ten_col .col.span_3_of_10-desktop { width: 30% }
  .ten_col.noInternalGap .ten_col .col.span_2_of_10-desktop { width: 20% }
  .ten_col.noInternalGap .ten_col .col.span_1_of_10-desktop { width: 10% }

  .ten_col .col.span_0_of_10-desktop { width: 0; margin: 0;}

}

@media(min-width:1281px) {

  .ten_col .col.span_10_of_10-big { width: calc( 100% - 20px ); }
  .ten_col .col.span_9_of_10-big { width: calc( 90% - 20px ); }
  .ten_col .col.span_8_of_10-big { width: calc( 80% - 20px ) ; }
  .ten_col .col.span_7_of_10-big { width: calc( 70% - 20px ) ; }
  .ten_col .col.span_6_of_10-big { width: calc( 60% - 20px ) ; }
  .ten_col .col.span_5_of_10-big { width: calc( 50% - 20px ) ; }
  .ten_col .col.span_4_of_10-big { width: calc( 40% - 20px ) ; }
  .ten_col .col.span_3_of_10-big { width: calc( 30% - 20px ) ; }
  .ten_col .col.span_2_of_10-big { width: calc( 20% - 20px ) ; }
  .ten_col .col.span_1_of_10-big { width: calc( 10% - 20px ) ; }

  .ten_col.noInternalGap .ten_col .col.span_10_of_10-big { width: 100% }
  .ten_col.noInternalGap .ten_col .col.span_9_of_10-big { width: 90% }
  .ten_col.noInternalGap .ten_col .col.span_8_of_10-big { width: 80% }
  .ten_col.noInternalGap .ten_col .col.span_7_of_10-big { width: 70% }
  .ten_col.noInternalGap .ten_col .col.span_6_of_10-big { width: 60% }
  .ten_col.noInternalGap .ten_col .col.span_5_of_10-big { width: 50% }
  .ten_col.noInternalGap .ten_col .col.span_4_of_10-big { width: 40% }
  .ten_col.noInternalGap .ten_col .col.span_3_of_10-big { width: 30% }
  .ten_col.noInternalGap .ten_col .col.span_2_of_10-big { width: 20% }
  .ten_col.noInternalGap .ten_col .col.span_1_of_10-big { width: 10% }

  .ten_col .col.span_0_of_10-big { width: 0; margin: 0;}

}

/*  GRID OF TEN MOBILE */
@media(max-width:640px) {
.ten_col .col.span_10_of_10-mobile { width: calc( 100% - 10px ); }
.ten_col .col.span_9_of_10-mobile { width: calc( 90% - 10px ); }
.ten_col .col.span_8_of_10-mobile { width: calc( 80% - 10px ) ; }
.ten_col .col.span_7_of_10-mobile { width: calc( 70% - 10px ) ; }
.ten_col .col.span_6_of_10-mobile { width: calc( 60% - 10px ) ; }
.ten_col .col.span_5_of_10-mobile { width: calc( 50% - 10px ) ; }
.ten_col .col.span_4_of_10-mobile { width: calc( 40% - 10px ) ; }
.ten_col .col.span_3_of_10-mobile { width: calc( 30% - 10px ) ; }
.ten_col .col.span_2_of_10-mobile { width: calc( 20% - 10px ) ; }
.ten_col .col.span_1_of_10-mobile { width: calc( 10% - 10px ) ; }

.ten_col .col.span_0_of_10-mobile { width: 0; margin: 0;}

.ten_col.noInternalGap .ten_col .col.span_10_of_10-mobile { width: 100% }
.ten_col.noInternalGap .ten_col .col.span_9_of_10-mobile { width: 90% }
.ten_col.noInternalGap .ten_col .col.span_8_of_10-mobile { width: 80% }
.ten_col.noInternalGap .ten_col .col.span_7_of_10-mobile { width: 70% }
.ten_col.noInternalGap .ten_col .col.span_6_of_10-mobile { width: 60% }
.ten_col.noInternalGap .ten_col .col.span_5_of_10-mobile { width: 50% }
.ten_col.noInternalGap .ten_col .col.span_4_of_10-mobile { width: 40% }
.ten_col.noInternalGap .ten_col .col.span_3_of_10-mobile { width: 30% }
.ten_col.noInternalGap .ten_col .col.span_2_of_10-mobile { width: 20% }
.ten_col.noInternalGap .ten_col .col.span_1_of_10-mobile { width: 10% }
}