/*
12 column set up
Each column has a 32px gap.
Nested columns have a 16px gap and collapse at a different break point
*/

.yoctoRow {
	position: relative;
	width: 100%;
	margin: 0 auto;
	padding: 0px;
	box-sizing: border-box;
	clear:both;
	display: flex;
	text-align: left;
}

.yoctoRow>div {
	width: 100%;
	margin-right:32px;
	float: left;
	box-sizing: border-box;
	position:relative;
	display: table-cell;
	text-align: left;
}

.yoctoRowFlex{
	display: flex;
}


.yoctoRow>.col1{  width:calc( ( ( (100% + 32px) / 12) * 1) - 32px) ; margin-right:32px; }
.yoctoRow>.col2{  width:calc( ( ( (100% + 32px) / 12) * 2) - 32px) ; margin-right:32px; }
.yoctoRow>.col3{  width:calc( ( ( (100% + 32px) / 12) * 3) - 32px) ; margin-right:32px; }
.yoctoRow>.col4{  width:calc( ( ( (100% + 32px) / 12) * 4) - 32px) ; margin-right:32px; }
.yoctoRow>.col5{  width:calc( ( ( (100% + 32px) / 12) * 5) - 32px) ; margin-right:32px; }
.yoctoRow>.col6{  width:calc( ( ( (100% + 32px) / 12) * 6) - 32px) ; margin-right:32px; }
.yoctoRow>.col7{  width:calc( ( ( (100% + 32px) / 12) * 7) - 32px) ; margin-right:32px; }
.yoctoRow>.col8{  width:calc( ( ( (100% + 32px) / 12) * 8) - 32px) ; margin-right:32px; }
.yoctoRow>.col9{  width:calc( ( ( (100% + 32px) / 12) * 9) - 32px) ; margin-right:32px; }
.yoctoRow>.col10{  width:calc( ( ( (100% + 32px) / 12) * 10) - 32px) ; margin-right:32px; }
.yoctoRow>.col11{  width:calc( ( ( (100% + 32px) / 12) * 11) - 32px) ; margin-right:32px; }




/* Nested have just a 16px margin*/ 
.yoctoRow .yoctoRow>div {
	margin-right:16px;
}

.yoctoRow .yoctoRow>.col1{  width:calc( ( ( (100% + 16px) / 12) * 1) - 16px) ; margin-right:16px; }
.yoctoRow .yoctoRow>.col2{  width:calc( ( ( (100% + 16px) / 12) * 2) - 16px) ; margin-right:16px; }
.yoctoRow .yoctoRow>.col3{  width:calc( ( ( (100% + 16px) / 12) * 3) - 16px) ; margin-right:16px; }
.yoctoRow .yoctoRow>.col4{  width:calc( ( ( (100% + 16px) / 12) * 4) - 16px) ; margin-right:16px; }
.yoctoRow .yoctoRow>.col5{  width:calc( ( ( (100% + 16px) / 12) * 5) - 16px) ; margin-right:16px; }
.yoctoRow .yoctoRow>.col6{  width:calc( ( ( (100% + 16px) / 12) * 6) - 16px) ; margin-right:16px; }
.yoctoRow .yoctoRow>.col7{  width:calc( ( ( (100% + 16px) / 12) * 7) - 16px) ; margin-right:16px; }
.yoctoRow .yoctoRow>.col8{  width:calc( ( ( (100% + 16px) / 12) * 8) - 16px) ; margin-right:16px; }
.yoctoRow .yoctoRow>.col9{  width:calc( ( ( (100% + 16px) / 12) * 9) - 16px) ; margin-right:16px; }
.yoctoRow .yoctoRow>.col10{  width:calc( ( ( (100% + 16px) / 12) * 10) - 16px) ; margin-right:16px; }
.yoctoRow .yoctoRow>.col11{  width:calc( ( ( (100% + 16px) / 12) * 11) - 16px) ; margin-right:16px; }








.yoctoRow>div:last-child{
	margin-right: 0 !important;
}


@media (max-width: 1200px) {
	.yoctoRow .yoctoRow {
			display: block;
	}
	.yoctoRow .yoctoRow>div
	{	
	width: 100% !important;
	display: block !important;
	}
}





/* Mobile stuff */
@media (max-width: 1024px) {
	.yoctoRow {
			display: block;
	}
	.yoctoRow>div
	{	
	width: 100% !important;
	display: block !important;
	}
}


/* Self Clearing Goodness */
.yoctoCol:after,
.yoctoRow:after {
	line-height:0;
  content: "";
  display: table;
  clear: both; }