/***
 *	Cols System
 *	Date: 2017-07-25
 */

.cols, .cols > * { box-sizing: border-box }

.cols { display: flex; flex-flow: row wrap; margin-top: 0 !important; }
	.cols.\-gutter { margin-left: -20px; }
	.cols.\-gutter-2 { margin-left: -40px; }
	
	.cols > * { margin-top: 20px }
		.cols.\-gutter > * { margin-left: 20px }
		.cols.\-gutter-2 > * { margin-left: 40px }

	ul.cols, ol.cols { padding: 0; list-style: none }



	.cols-1 > * { width: 100% }
		.cols-1.\-gutter > * { width: calc( 100% - 20px ) }
		.cols-1.\-gutter-2 > * { width: calc( 100% - 40px ) }
	
	.cols-2 > * { width: 50% }
		.cols-2.\-gutter > * { width: calc( 50% - 20px ) }
		.cols-2.\-gutter-2 > * { width: calc( 50% - 40px ) }
	
	.cols-3 > * { width: 33.33% }
		.cols-3.\-gutter > * { width: calc( 33.33% - 20px ) }
		.cols-3.\-gutter-2 > * { width: calc( 33.33% - 40px ) }
	
	.cols-4 > * { width: 25% }
		.cols-4.\-gutter > * { width: calc( 25% - 20px ) }
		.cols-4.\-gutter-2 > * { width: calc( 25% - 40px ) }
	
	.cols-5 > * { width: 20% }
		.cols-5.\-gutter > * { width: calc( 20% - 20px ) }
		.cols-5.\-gutter-2 > * { width: calc( 20% - 40px ) }
	
	.cols-6 > * { width: 16.66% }
		.cols-6.\-gutter > * { width: calc( 16.66% - 20px ) }
		.cols-6.\-gutter-2 > * { width: calc( 16.66% - 40px ) }


@media only screen and ( min-width: 1280px ){
	.cols-1-xx > * { width: 100% }
		.cols-1-xx.\-gutter > * { width: calc( 100% - 20px ) }
		.cols-1-xx.\-gutter-2 > * { width: calc( 100% - 40px ) }
	
	.cols-2-xx > * { width: 50% }
		.cols-2-xx.\-gutter > * { width: calc( 50% - 20px ) }
		.cols-2-xx.\-gutter-2 > * { width: calc( 50% - 40px ) }
	
	.cols-3-xx > * { width: 33.33% }
		.cols-3-xx.\-gutter > * { width: calc( 33.33% - 20px ) }
		.cols-3-xx.\-gutter-2 > * { width: calc( 33.33% - 40px ) }
	
	.cols-4-xx > * { width: 25% }
		.cols-4-xx.\-gutter > * { width: calc( 25% - 20px ) }
		.cols-4-xx.\-gutter-2 > * { width: calc( 25% - 40px ) }
	
	.cols-5-xx > * { width: 20% }
		.cols-5-xx.\-gutter > * { width: calc( 20% - 20px ) }
		.cols-5-xx.\-gutter-2 > * { width: calc( 20% - 40px ) }
	
	.cols-6-xx > * { width: 16.66% }
		.cols-6-xx.\-gutter > * { width: calc( 16.66% - 20px ) }
		.cols-6-xx.\-gutter-2 > * { width: calc( 16.66% - 40px ) }
}

@media only screen and ( min-width: 1024px ){
	.cols-1-dt > * { width: 100% }
		.cols-1-dt.\-gutter > * { width: calc( 100% - 20px ) }
		.cols-1-dt.\-gutter-2 > * { width: calc( 100% - 40px ) }
	
	.cols-2-dt > * { width: 50% }
		.cols-2-dt.\-gutter > * { width: calc( 50% - 20px ) }
		.cols-2-dt.\-gutter-2 > * { width: calc( 50% - 40px ) }
	
	.cols-3-dt > * { width: 33.33% }
		.cols-3-dt.\-gutter > * { width: calc( 33.33% - 20px ) }
		.cols-3-dt.\-gutter-2 > * { width: calc( 33.33% - 40px ) }
	
	.cols-4-dt > * { width: 25% }
		.cols-4-dt.\-gutter > * { width: calc( 25% - 20px ) }
		.cols-4-dt.\-gutter-2 > * { width: calc( 25% - 40px ) }
	
	.cols-5-dt > * { width: 20% }
		.cols-5-dt.\-gutter > * { width: calc( 20% - 20px ) }
		.cols-5-dt.\-gutter-2 > * { width: calc( 20% - 40px ) }
	
	.cols-6-dt > * { width: 16.66% }
		.cols-6-dt.\-gutter > * { width: calc( 16.66% - 20px ) }
		.cols-6-dt.\-gutter-2 > * { width: calc( 16.66% - 40px ) }
}

@media only screen and ( max-width: 899px ){
	.cols-1-tb > * { width: 100% }
		.cols-1-tb.\-gutter > * { width: calc( 100% - 20px ) }
		.cols-1-tb.\-gutter-2 > * { width: calc( 100% - 40px ) }
	
	.cols-2-tb > * { width: 50% }
		.cols-2-tb.\-gutter > * { width: calc( 50% - 20px ) }
		.cols-2-tb.\-gutter-2 > * { width: calc( 50% - 40px ) }
	
	.cols-3-tb > * { width: 33.33% }
		.cols-3-tb.\-gutter > * { width: calc( 33.33% - 20px ) }
		.cols-3-tb.\-gutter-2 > * { width: calc( 33.33% - 40px ) }
	
	.cols-4-tb > * { width: 25% }
		.cols-4-tb.\-gutter > * { width: calc( 25% - 20px ) }
		.cols-4-tb.\-gutter-2 > * { width: calc( 25% - 40px ) }
	
	.cols-5-tb > * { width: 20% }
		.cols-5-tb.\-gutter > * { width: calc( 20% - 20px ) }
		.cols-5-tb.\-gutter-2 > * { width: calc( 20% - 40px ) }
	
	.cols-6-tb > * { width: 16.66% }
		.cols-6-tb.\-gutter > * { width: calc( 16.66% - 20px ) }
		.cols-6-tb.\-gutter-2 > * { width: calc( 16.66% - 40px ) }
}

@media only screen and ( max-width: 599px ){
	.cols-1-mb > * { width: 100% }
		.cols-1-mb.\-gutter > * { width: calc( 100% - 20px ) }
		.cols-1-mb.\-gutter-2 > * { width: calc( 100% - 40px ) }
	
	.cols-2-mb > * { width: 50% }
		.cols-2-mb.\-gutter > * { width: calc( 50% - 20px ) }
		.cols-2-mb.\-gutter-2 > * { width: calc( 50% - 40px ) }
	
	.cols-3-mb > * { width: 33.33% }
		.cols-3-mb.\-gutter > * { width: calc( 33.33% - 20px ) }
		.cols-3-mb.\-gutter-2 > * { width: calc( 33.33% - 40px ) }
	
	.cols-4-mb > * { width: 25% }
		.cols-4-mb.\-gutter > * { width: calc( 25% - 20px ) }
		.cols-4-mb.\-gutter-2 > * { width: calc( 25% - 40px ) }
	
	.cols-5-mb > * { width: 20% }
		.cols-5-mb.\-gutter > * { width: calc( 20% - 20px ) }
		.cols-5-mb.\-gutter-2 > * { width: calc( 20% - 40px ) }
	
	.cols-6-mb > * { width: 16.66% }
		.cols-6-mb.\-gutter > * { width: calc( 16.66% - 20px ) }
		.cols-6-mb.\-gutter-2 > * { width: calc( 16.66% - 40px ) }
}

@media only screen and ( max-width: 360px ){
	.cols-1-ss > * { width: 100% }
		.cols-1-ss.\-gutter > * { width: calc( 100% - 20px ) }
		.cols-1-ss.\-gutter-2 > * { width: calc( 100% - 40px ) }
	
	.cols-2-ss > * { width: 50% }
		.cols-2-ss.\-gutter > * { width: calc( 50% - 20px ) }
		.cols-2-ss.\-gutter-2 > * { width: calc( 50% - 40px ) }
	
	.cols-3-ss > * { width: 33.33% }
		.cols-3-ss.\-gutter > * { width: calc( 33.33% - 20px ) }
		.cols-3-ss.\-gutter-2 > * { width: calc( 33.33% - 40px ) }
	
	.cols-4-ss > * { width: 25% }
		.cols-4-ss.\-gutter > * { width: calc( 25% - 20px ) }
		.cols-4-ss.\-gutter-2 > * { width: calc( 25% - 40px ) }
	
	.cols-5-ss > * { width: 20% }
		.cols-5-ss.\-gutter > * { width: calc( 20% - 20px ) }
		.cols-5-ss.\-gutter-2 > * { width: calc( 20% - 40px ) }
	
	.cols-6-ss > * { width: 16.66% }
		.cols-6-ss.\-gutter > * { width: calc( 16.66% - 20px ) }
		.cols-6-ss.\-gutter-2 > * { width: calc( 16.66% - 40px ) }
}