/**********************************************************************************************

******************************** RESONSIVE GRID ***********************************************

***********************************************************************************************/



/*BASIC GRID STRUCTURE
***************************************************/

.row {
	width: 100%;
	max-width: 1170px; /*optional, to fix the width for really wide screens*/
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}

.row.gutter { /*row with padding*/
	width: 94%;
	padding: 0 3%;
}

.col {
	float: left;
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.col.gutter-left {
	padding-left: 30px;
}

.col.gutter-right {
	padding-right: 30px;
}

.col.right {
	float: right;
}

.span1 {
	width: 8.333333333333%;
}

.span2 {
	width: 16.666666666667%;
}

.span3 {
	width: 25%;
}

.span4 {
	width: 33.333333333333%;
}

.span5 {
	width: 41.666666666667%;
}

.span6 {
	width: 50%;
}

.span7 {
	width: 58.333333333333%;
}

.span8 {
	width: 66.666666666666%;
}

.span9 {
	width: 75%;
}

.span10 {
	width: 83.333333333333%;
}

.span11 {
	width: 91.666666666667%;
}

.span12 {
	width: 100%;
}