/* Author: Marcin Banaszek */

.row:before, .row:after {
	content: "";
	display: table;
	line-height: 0;
}

.row:after {
	clear: both;
}

.row {
	margin-bottom: 20px;
	width:960px;
}

.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
	float: left;
	margin: 0 10px;
}

.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;}

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

/* width : 1240px ----------- */
@media only screen and (max-width : 1240px),
only screen and (max-device-width : 1240px){

	#header {max-width: 960px !important;}
	nav.main {max-width: 960px !important;}
}


@media (min-width: 1220px) {
	.row {margin-bottom: 50px; width:1200px;}
	.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;}
}

/* width : 990px ----------- */
@media only screen and (max-width : 990px),
only screen and (max-device-width : 990px){

	#header {max-width: 960px !important;}
	nav.main {max-width: 960px !important;}
	div.top-navigation {left : 0px !important;right: 0px !important;padding: 0px 10px;} 
}

@media (max-width: 979px) {
	.row {margin-bottom: 10px; width:720px;}
	.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {margin: 0 5px;}
	.span1 {width: 50px;}
	.span2 {width: 110px;}
	.span3 {width: 170px;}
	.span4 {width: 230px;}
	.span5 {width: 290px;}
	.span6 {width: 350px;}
	.span7 {width: 410px;}
	.span8 {width: 470px;}
	.span9 {width: 530px;}
	.span10 {width: 590px;}
	.span11 {width: 650px;}
	.span12 {width: 710px;}
	.wrapper {width: 720px;}
}

@media (max-width: 767px) {
	.row {margin-bottom: 20px; width:100%;}
	.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 { display: block; float: none; margin: 10px; width: auto;}
	.wrapper {width: 100%;}
}