/* GRID
===================================================================================================*/

	@-ms-viewport {
	  width: device-width;
	}

	.span1,
	.span2,
	.span3,
	.span4,
	.span5,
	.span6,
	.span7,
	.span8,
	.span9,
	.span10,
	.span11,
	.span12 {
		background: #eee;
		float: left;
		margin: 0 10px;
		padding: 10px 0;
		text-align: center;
	}
	
	.span1 { width: 60px;}
	.span2 { width: 140px;}
	.span3 { width: 220px;}
	.span4 { width: 300px;}
	.span5 { width: 380px;}
	.span6 { width: 460px;}
	.span7 { width: 540px;}
	.span8 { width: 620px;}
	.span9 { width: 700px;}
	.span10 { width: 780px;}
	.span11 { width: 860px;}
	.span12 { width: 940px;}
	
	.row:before,
	.row:after {
		display: table;
		line-height: 0;
		content: "";
	}
	.row:after {
		clear: both;
	}

	.wrapper {
		margin: 0 auto;
		width: 960px;
	}

@media (min-width: 1220px) {
	
	.span1,
	.span2,
	.span3,
	.span4,
	.span5,
	.span6,
	.span7,
	.span8,
	.span9,
	.span10,
	.span11,
	.span12 {
		margin: 0 15px;
	}
	
	.span1 { width: 70px;}
	.span2 { width: 170px;}
	.span3 { width: 270px;}
	.span4 { width: 370px;}
	.span5 { width: 470px;}
	.span6 { width: 570px;}
	.span7 { width: 670px;}
	.span8 { width: 770px;}
	.span9 { width: 870px;}
	.span10 { width: 970px;}
	.span11 { width: 1070px;}
	.span12 { width: 1170px;}

	.wrapper {width: 1200px;}

}

@media (max-width: 979px) {

	.span1 {width: 41px;}
	.span2 {width: 102px;}
	.span3 {width: 163px;}
	.span4 {width: 224px;}
	.span5 {width: 285px;}
	.span6 {width: 346px;}
	.span7 {width: 407px;}
	.span8 {width: 468px;}
	.span9 {width: 529px;}
	.span10 {width: 590px;}
	.span11 {width: 651px;}
	.span12 {width: 712px;}

	.wrapper {width: 732px;}

}

@media (max-width: 767px) {

	.span1,
	.span2,
	.span3,
	.span4,
	.span5,
	.span6,
	.span7,
	.span8,
	.span9,
	.span10,
	.span11,
	.span12 {
		margin: 0 5px;
	}
	
	.span1 {width: 28px;}
	.span2 {width: 66px;}
	.span3 {width: 104px;}
	.span4 {width: 142px;}
	.span5 {width: 180px;}
	.span6 {width: 218px;}
	.span7 {width: 256px;}
	.span8 {width: 294px;}
	.span9 {width: 332px;}
	.span10 {width: 370px;}
	.span11 {width: 408px;}
	.span12 {width: 446px;}

	.wrapper {width: 456px;}

}

@media (max-width: 480px) {

	.span1,
	.span2,
	.span3,
	.span4,
	.span5,
	.span6,
	.span7,
	.span8,
	.span9,
	.span10,
	.span11,
	.span12 {
		float: none;
		margin: 0 0 20px;
		width: 100%;
	}

	.wrapper {
		margin: 10%;
		width: 80%;
	}

}