/******************************************************/
/************************ header **********************/
/******************************************************/
header{
	
}

/******************************************************/
/************* General containers *********************/
/******************************************************/

/* Full width Container*/
.full-width{
	width:100%!important;
	display:block;
	float:left;
}
.full-width::before,
.full-width::after{
	clear:both;
}
/* Standard Wrapper */
.wrapper{
	max-width:1170px; /*Main wrapper width*/
	width:100%;
	margin:0px auto;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */	
	/*padding:15px;*//*Standard wrapper padding*/
	
}
.wrapper::after,
.wrapper::before{
	display:block;
	clear:right;
}
/*

	Columns
	Format: .col-1-4 = 1/4
			.col-2-3 = 2/3
			usage: <section class="row">
                        <section class="col-1-2" rel="col">
                            <section class="col-1-3 colin" rel="col">Col 1/3</section>
                            <section class="col-2-3 colin" rel="col">Col 2/3</section>
                        </section>
                        <section class="col-1-2" rel="col">Col 1/2</section>
                    </section>

*/

.col-1-1{	width:100%; display:block; float:left; 
			padding:15px; 
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}
.col-1-2{	width:50%; display:block; float:left;
			padding:15px; 
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;	
		}
.col-1-3{	width:33.3333333%; display:block; float:left;
			padding:15px; 
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}
.col-1-4{	width:25%; display:block; float:left;
			padding:15px; 
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;	
		}
.col-1-5{	width:20%; display:block; float:left;
			padding:15px; 
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;	
		}
.col-1-6{	width:16.6666666%; display:block; float:left;
			padding:15px; 
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}
.col-2-3{	width:66.66666666%; display:block; float:left;
			padding:15px; 
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}
.col-3-4{	width:75%; display:block; float:left;
			padding:15px; 
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;	
		}
.col-2-5{	width:40%; display:block; float:left; 
			padding:15px; 
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;  
		}
.col-3-5{	width:60%; display:block; float:left;
			padding:15px; 
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;	
		}
.col-4-5{	width:80%; display:block; float:left;
			padding:15px; 
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;	
		}
.col-5-6{	width:83.3333333%; display:block; float:left;
			padding:15px; 
			-webkit-box-sizing: border-box; 
			-moz-box-sizing: border-box;    
			box-sizing: border-box;         
		}

/*Rows*/
.row{
	width:100%;
	display:block; 
	float:left;
}
	.row::after,
	.row::before{
		clear:both;
	}


/******************************************************/
/************************ content *********************/
/******************************************************/
#main{
}
	
/******************************************************/
/************************ footer **********************/
/******************************************************/
footer{
}


/******************************************************/
/***************** Media Queries **********************/
/******************************************************/

@media only screen and (max-width: 767px) {
	/*html, body{
		min-width:inherit;
	}*/
	/* Standard Wrapper */
	.wrapper{
		width:100%; /*Main wrapper width*/
		max-width:320px;
	}
	
	/*Columns*/
	.col-1-1{	width:100%;	
			}
	.col-1-2{	width:100%;
			}
	.col-1-3{	width:100%;
			}
	.col-1-4{	width:100%;
			}
	.col-1-5{	width:100%;	
			}
	.col-1-6{	width:100%;
			}
	.col-2-3{	width:100%;
			}
	.col-3-4{	width:100%;
			}
	.col-2-5{	width:100%;
			}
	.col-3-5{	width:100%;
			}
	.col-4-5{	width:100%;
			}
	.col-5-6{	width:100%;
			}
	
}

@media only screen and (min-width: 479px) and (max-width: 767px) {
	.wrapper{
		width:100% !important; /*Main wrapper width*/
		max-width:480px;
	}
}

@media only screen and (max-width: 960px) {
	/* Standard Wrapper */
	.wrapper{
		width:100%; /*Main wrapper width*/
		max-width:768px;
	}
}

@media only screen and (max-width: 1169px){/*This should change depending on the wrapper width*/
	.wrapper{
		width:100%; /*Main wrapper width*/
	}
}