/*************************************************
* grid
*************************************************/

/* wrap clearfix */
.wrap:before,
.wrap:after {
	content:" "; 
 	display: table;
}	
.wrap:after {
	clear:both;
} 
.wrap {
	*zoom:1;
}
/* nesting clearfix */
.nested:before,
.nested:after {
	content:" "; 
 	display: table;
}	
.nested:after {
	clear:both;
} 
.nested {
	*zoom:1;
}


/* defaults */
[class^='col-'] {
	float: left;
	min-height: 1px;
}
.wrap {
	margin: 0 auto;
	width: 100%;
}
.wrap.full {
	padding: 0;
}
.nomargin {
	margin: 0;
}
.row, .padding {
	clear: both;
}


/**/

.wrap {   padding: 0 10px; }

.wrap.wide { padding: 0 20px; }
.padding { height:      20px; }
.inner { padding: 	  0 20px; }

.nested {
	margin-left:  -10px;
	margin-right: -10px;
}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { margin: 0 10px;
}
.col-xs-12 { 			 width: calc( 100% - 20px ) }
.col-xs-11 { width: calc( (100% / 12 * 11) - 20px ) }
.col-xs-10 { width: calc( (100% / 12 * 10) - 20px ) }
.col-xs-9 {   width: calc( (100% / 12 * 9) - 20px ) }
.col-xs-8 {   width: calc( (100% / 12 * 8) - 20px ) }
.col-xs-7 {   width: calc( (100% / 12 * 7) - 20px ) }
.col-xs-6 {   width: calc( (100% / 12 * 6) - 20px ) }
.col-xs-5 {   width: calc( (100% / 12 * 5) - 20px ) }
.col-xs-4 {   width: calc( (100% / 12 * 4) - 20px ) }
.col-xs-3 {   width: calc( (100% / 12 * 3) - 20px ) }
.col-xs-2 {   width: calc( (100% / 12 * 2) - 20px ) }
.col-xs-1 {   width: calc( (100% / 12 * 1) - 20px ) }


@media (min-width: 480px) {

	.wrap {  padding: 0 24px; }
	
	.wrap.wide { padding: 0 12px; }
	.padding { height:      12px; }
	.inner { padding: 	  0 12px; }	
	
	.nested {
		margin-left:  -6px;
		margin-right: -6px;
	}
	.col-s-1, .col-s-2, .col-s-3, .col-s-4, .col-s-5, .col-s-6, .col-s-7, .col-s-8, .col-s-9, .col-s-10, .col-s-11, .col-s-12 { margin: 0 6px;
	}
	.col-s-12 { 			width: calc( 100% - 12px ) }
	.col-s-11 { width: calc( (100% / 12 * 11) - 12px ) }
	.col-s-10 { width: calc( (100% / 12 * 10) - 12px ) }
	.col-s-9 {   width: calc( (100% / 12 * 9) - 12px ) }
	.col-s-8 {   width: calc( (100% / 12 * 8) - 12px ) }
	.col-s-7 {   width: calc( (100% / 12 * 7) - 12px ) }
	.col-s-6 {   width: calc( (100% / 12 * 6) - 12px ) }
	.col-s-5 {   width: calc( (100% / 12 * 5) - 12px ) }
	.col-s-4 {   width: calc( (100% / 12 * 4) - 12px ) }
	.col-s-3 {   width: calc( (100% / 12 * 3) - 12px ) }
	.col-s-2 {   width: calc( (100% / 12 * 2) - 12px ) }
	.col-s-1 {   width: calc( (100% / 12 * 1) - 12px ) }	
	
	.col-xs-0 { display: block;
	}	

}

@media (min-width: 768px) {
	
	.wrap {  padding: 0 32px; }	
	
	.wrap.wide { padding:  0 16px; }
	.padding { height:       16px; }
	.inner { padding:      0 16px; }	
	.innerr { padding-right: 16px; }
	.innerl { padding-left:  16px; }
	
	.nested { 
		margin-left:  -8px; 
		margin-right: -8px;
	}
	.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { margin: 0 8px;
	}
	.col-sm-12 { 		  	 width: calc( 100% - 16px ) }
	.col-sm-11 { width: calc( (100% / 12 * 11) - 16px ) }
	.col-sm-10 { width: calc( (100% / 12 * 10) - 16px ) }
	.col-sm-9 {   width: calc( (100% / 12 * 9) - 16px ) }
	.col-sm-8 {   width: calc( (100% / 12 * 8) - 16px ) }
	.col-sm-7 {   width: calc( (100% / 12 * 7) - 16px ) }
	.col-sm-6 {   width: calc( (100% / 12 * 6) - 16px ) }
	.col-sm-5 {   width: calc( (100% / 12 * 5) - 16px ) }
	.col-sm-4 {   width: calc( (100% / 12 * 4) - 16px ) }
	.col-sm-3 {   width: calc( (100% / 12 * 3) - 16px ) }
	.col-sm-2 {   width: calc( (100% / 12 * 2) - 16px ) }
	.col-sm-1 {   width: calc( (100% / 12 * 1) - 16px ) }
	
	.col-xs-0,
	.col-s-0 {
		display: block;
	}
	
	.col-third {
		width: 33.3333%;
		width: calc( 100% / 3 );
	}
	.col-twothird {
		width: 66.6666%;
		width: calc( 100% / 3 * 2 );
	}
	.col-half {
		width: 50%;
		width: calc( 100% / 2 );
	}
	
	

}

@media (min-width: 1024px) {

	.wrap {  padding: 0 40px; }
	
	.wrap.wide { padding:  0 20px; }
	.padding { height:       20px; }
	.inner { padding:      0 20px; }
	.innerr { padding-right: 20px; }
	.innerl { padding-left:  20px; }
	
	.nested { 
		margin-left:  -10px; 
		margin-right: -10px;
	}
	.col-m-1, .col-m-2, .col-m-3, .col-m-4, .col-m-5, .col-m-6, .col-m-7, .col-m-8, .col-m-9, .col-m-10, .col-m-11, .col-m-12 { margin: 0 10px; 
	}
	.col-m-12 { 			width: calc( 100% - 20px ) }
	.col-m-11 { width: calc( (100% / 12 * 11) - 20px ) }
	.col-m-10 { width: calc( (100% / 12 * 10) - 20px ) }
	.col-m-9  {  width: calc( (100% / 12 * 9) - 20px ) }
	.col-m-8 {   width: calc( (100% / 12 * 8) - 20px ) }
	.col-m-7 {   width: calc( (100% / 12 * 7) - 20px ) }
	.col-m-6 {   width: calc( (100% / 12 * 6) - 20px ) }
	.col-m-5 {   width: calc( (100% / 12 * 5) - 20px ) }
	.col-m-4 {   width: calc( (100% / 12 * 4) - 20px ) }
	.col-m-3 {   width: calc( (100% / 12 * 3) - 20px ) }
	.col-m-2 {   width: calc( (100% / 12 * 2) - 20px ) }
	.col-m-1 {   width: calc( (100% / 12 * 1) - 20px ) }

	.col-xs-0,
	.col-s-0,
	.col-sm-0 {
		display: block;
	}

}


@media (min-width: 1180px) {

	.wrap {  padding: 0 40px; }
	
	.wrap.wide { padding:  0 20px; }
	.padding { height:       20px; }
	.inner { padding:      0 20px; }
	.innerr { padding-right: 20px; }
	.innerl { padding-left:  20px; }
	
	.nested {
		margin-left:  -10px;
		margin-right: -10px;
	}

	.col-ml-1, .col-ml-2, .col-ml-3, .col-ml-4, .col-ml-5, .col-ml-6, .col-ml-7, .col-ml-8, .col-ml-9, .col-ml-10, .col-ml-11, .col-ml-12 { margin: 0 10px; 
	}
	.col-ml-12 { 			 width: calc( 100% - 20px ) }
	.col-ml-11 { width: calc( (100% / 12 * 11) - 20px ) }
	.col-ml-10 { width: calc( (100% / 12 * 10) - 20px ) }
	.col-ml-9 {   width: calc( (100% / 12 * 9) - 20px ) }
	.col-ml-8 {   width: calc( (100% / 12 * 8) - 20px ) }
	.col-ml-7 {   width: calc( (100% / 12 * 7) - 20px ) }
	.col-ml-6 {   width: calc( (100% / 12 * 6) - 20px ) }
	.col-ml-5 {   width: calc( (100% / 12 * 5) - 20px ) }
	.col-ml-4 {   width: calc( (100% / 12 * 4) - 20px ) }
	.col-ml-3 {   width: calc( (100% / 12 * 3) - 20px ) }
	.col-ml-2 {   width: calc( (100% / 12 * 2) - 20px ) }
	.col-ml-1 {   width: calc( (100% / 12 * 1) - 20px ) }
	
	.col-xs-0,
	.col-s-0,
	.col-sm-0,
	.col-m-0 { display: block;
	}
}

@media (min-width: 1420px) {
		
	.wrap {  padding: 0 60px; }	
	
	.wrap.wide { padding:  0 30px; }
	.padding { height:       30px; }
	.inner { padding:      0 30px; }
	.innerr { padding-right: 30px; }
	.innerl { padding-left:  30px; }
	
	.nested {
		margin-left:  -15px;
		margin-right: -15px;
	}

	.col-l-1, .col-l-2, .col-l-3, .col-l-4, .col-l-5, .col-l-6, .col-l-7, .col-l-8, .col-l-9, .col-l-10, .col-l-11, .col-l-12 { margin: 0 15px;
	}
	.col-l-12 { 		    width: calc( 100% - 30px ) }
	.col-l-11 { width: calc( (100% / 12 * 11) - 30px ) }
	.col-l-10 { width: calc( (100% / 12 * 10) - 30px ) }
	.col-l-9 {   width: calc( (100% / 12 * 9) - 30px ) }
	.col-l-8 { 	 width: calc( (100% / 12 * 8) - 30px ) }
	.col-l-7 {   width: calc( (100% / 12 * 7) - 30px ) }
	.col-l-6 {   width: calc( (100% / 12 * 6) - 30px ) }
	.col-l-5 {   width: calc( (100% / 12 * 5) - 30px ) }
	.col-l-4 {   width: calc( (100% / 12 * 4) - 30px ) }
	.col-l-3 {   width: calc( (100% / 12 * 3) - 30px ) }
	.col-l-2 {   width: calc( (100% / 12 * 2) - 30px ) }
	.col-l-1 {   width: calc( (100% / 12 * 1) - 30px ) }
	
	.col-xs-0,
	.col-s-0,
	.col-sm-0,
	.col-m-0,
	.col-ml-0 {
		display: block;
	}
}

@media (min-width: 1600px) {

	#outer, .wrap {
		width: 1600px;
	}

	#outer {
		margin: 0 auto;
		padding: 0;
		position: relative;
	}
	
	.wrap {  padding: 0 80px; }	
	
	.wrap.wide { padding:  0 40px; }
	.padding { height:       40px; }
	.inner { padding:      0 40px; }
	.innerr { padding-right: 40px; }
	.innerl { padding-left:  40px; }	
	.nested {
		margin-left:  -20px;
		margin-right: -20px;
	}

	.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
		margin: 0 20px;
	}
	.col-xl-12 { 			 width: calc( 100% - 40px ) }
	.col-xl-11 { width: calc( (100% / 12 * 11) - 40px ) }
	.col-xl-10 { width: calc( (100% / 12 * 10) - 40px ) }
	.col-xl-9 {   width: calc( (100% / 12 * 9) - 40px ) }
	.col-xl-8 {   width: calc( (100% / 12 * 8) - 40px ) }
	.col-xl-7 {   width: calc( (100% / 12 * 7) - 40px ) }
	.col-xl-6 {   width: calc( (100% / 12 * 6) - 40px ) }
	.col-xl-5 {   width: calc( (100% / 12 * 5) - 40px ) }
	.col-xl-4 {   width: calc( (100% / 12 * 4) - 40px ) }
	.col-xl-3 {   width: calc( (100% / 12 * 3) - 40px ) }
	.col-xl-2 {   width: calc( (100% / 12 * 2) - 40px ) }
	.col-xl-1 {   width: calc( (100% / 12 * 1) - 40px ) }
	
	.col-xs-0,
	.col-s-0,
	.col-sm-0,
	.col-m-0,
	.col-ml-0,
	.col-l-0 {
		display: block;
	}
	
}

/* hidden cols  col-0 */

@media (max-width: 480px) {
	.col-xs-0 {
		display: none;
	}
}

@media (max-width: 767px) {
  	.col-s-0 {
  		display: none;
  	}
}

@media (min-width: 768px) and (max-width: 1023px) {
    .col-sm-0 {
      display: none;
    }
}

@media (min-width: 1024px) and (max-width: 1179px) {
    .col-m-0 {
      display: none;
    }
}

@media (min-width: 1180px) and (max-width: 1419px) {
    .col-ml-0 {
      display: none;
    }
}

@media (min-width:1420px) and (max-width:1599px) {
    .col-l-0 {
      display: none;
    }
}

@media (min-width:1600px) {    
    .col-xl-0 {
      display: none !important;
    }
}