/* grid system */

/* Naming format for columns: 
 * 	col-<width>-<container width>
 *  widths are expressed in number of columns. ie col-1-3 is a column one third of its container
 */

/* Naming format for columns: 
 * 	col<number of columns>-<default width>-<break point 1>-<break point 2>-<break point n>
 *  breakpoints are expressed in number of columns. Breakpoints upto the final change need to be included but not after that
 *  eg1: col12-12-6-3 = 12 column grid, container is full width (12 columns) initially, 6 columns wide at the first (smallest) breakpoint and 3 columns wide at the next breakpoint. It remains at 3 columns wide at large breakpoints
 */

/* clear unwanted existing styling on column elements*/
[class^="col"]>*:first-child{margin-top:0}
[class^="col"]>*:last-child{margin-bottom:0}
[class^="col"]{margin: 0; padding: 0}

/** default columns sytles **/
[class^="col"]{
	box-sizing: border-box;
		/*box-sizing backwards compatibility*/
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
    float: left;
	overflow: hidden;
    padding:8px 16px;
    width: 100%
}

/** misc column helpers etc **/
.layout{
    padding:0;
}

.centered{
	float:none;
	margin-left:auto;
	margin-right:auto;
	overflow: hidden;
}

/** default styling  **/

	.col-1024px{
		float:none;
		margin:auto;
		max-width:1024px
	}
	
	[class^="col12-8"]{width:66.6666%}
	[class^="col12-6"]{width:50%}
	[class^="col12-5"]{width:40%}
	[class^="col12-4"]{width:33.3333%}

/** breakpoint 1 --- small **/
/**@media screen and (min-width:640px){
	[class^="col12-12-6"]{width:50%}
	.col12-12-9-6{width:75%}
	.col12-12-8-6{width:66.6666%}
	.col12-12-6-6{width:50%}
	.col12-12-4-4{width:33.3333%}
	
	.col12-6-12-12{width:100%}
	.col12-6-3-3{width:25%}

}**/
@media screen and (min-width:640px){
	[class^="col12-12-6"]{width:50%}
	.col12-12-9-6{width:75%}
	.col12-12-10-6{width:70%}
	.col12-12-8-6{width:66.6666%}
	.col12-12-6-6{width:50%}
	.col12-12-5-6{width:40%}
	.col12-12-4-4{width:33.3333%}
	.col12-12-6-3.layout {
    width: 25%;
    float: left;}
	.col12-12-6-3{width: 30%; float:right;}
	.col12-6-12-12{width:100%}
	.col12-6-3-3{width:25%}

}
/** breakpoint 2 --- large **/
/**@media screen and (min-width:1024px){
	.col12-12-6-12{width:100%}
	.col12-12-12-8{width:66.6666%}
	.col12-12-12-6,
	.col12-12-9-6,
	.col12-12-8-6{width:50%}
	.col12-12-12-4,
	.col12-12-6-4{width: 33.3333%}
	.col12-12-6-3{width: 25%}
	.col12-12-6-2,
	.col12-6-6-2{width: 16.6666%}

}**/
@media screen and (min-width:1024px){
	.col12-12-6-12{width:100%}
	.col12-12-12-8{width:66.6666%}
	.col12-12-9-6{width:75%}
	.col12-12-10-6{width:70%; /*min-height: 166px;*/ margin-bottom: 15px;}
	.col12-12-12-6,
	.col12-12-8-6{width:50%}
	.col12-12-5-4{width: 40%}
	.col12-12-12-4,
	.col12-12-6-4{width: 33.3333%}
	.col12-12-6-3{width: 30%; float:right;}
	.col12-12-6-2,
	.col12-6-6-2{width: 16.6666%}

}
/** breakpoint 3 --- large **/
@media screen and (max-width:767px){
	.col12-12-10-6{width:100%}
	.col12-12-6-3{width: 100%;display: none;}
}