/* Reusable column setup */
.row {margin: 0px auto; width: 1180px;  border: 0px solid green;}

.col {
    display: inline-block;
    position: relative;
    vertical-align: top;
    border:1px solid rgba(0,0,0,0);
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}




@media screen and (min-width: 0px) {
	.col {
		margin-left: 1.785714%;
		padding:0 10px;
		border: 0px solid red;
	}
	
	.col.noPad {padding: 0px;}
	
	.row .col:first-child {
		margin-left:0;
	}

	.row:after{
        display: block; content:""; clear: both;
    }

	.span_1 {
		width:14.583333%;
	}
	.span_2 {
		width:30.95238%;
	}
	.span_3 {
		width:47.321427%;
	}
	.span_4 {
		width:63.690474%;
	}
	.span_5 {
		width:80.059521%;
	}
	.span_6 {
		width:100%;
		margin-left: 0px;
	}
	
	
}

@media only screen and (min-width: 1180px) {
    .row {max-width: 1180px; }
}

/**********************************
* Smaller Screens
**********************************/
@media only screen and (max-width: 1180px) {
    .row {width: 100%; border: 0px solid yellow}
    .col { padding:0 20px;}
}

/**********************************
* Tablets
**********************************/
@media (max-width: 867px) {
	
}

/**********************************
* Mobile Devices
* - All columns are full width
**********************************/
@media only screen and (max-width: 767px) {
   .row {width: 100%; border: 0px solid black}
   
}

@media only screen and (max-width: 567px) {
	.row {width: 100%; border: 0px solid purple}
}