/*  This CSS page is mainly dedicated to positioning and scaling.  It might contain some style stuff too though*/


[class*='col-'] {			/* general col- settings*/
	float: left;
	padding: 0px; 
	text-align: center; /* center the content in this block */
}

.col-2 {				/* col-2 sizing*/
	margin-top: 2rem;
	width: 80%;

}

.col-3 {				/* col-3 sizing*/
	width: 40%;
	padding-left: 20%;
}

.col-4 {				/* col-4 sizing*/
	width: 40%;
	padding-left: 5%;
	padding-right: 15%;
}

.col-5 {				/* col-5 sizing*/
	position: absolute;
	left: 50%;
	top:12%;
	width:50%;
	
	padding-left: 10%;
}

.home {				/* home button positioning*/
	font-size: 10px;
	width: 60px;
	position: absolute;
	left: 18%;
	top: 1%;
}
.back {				/* back button positioning*/ 
	font-size: 10px;
	width: 60px;
	position: absolute;
	left: 60%;
	top: 1%;
}

.grid:after {		/* grid effect*/
	content: "";
	display: block;
	clear: both;
}


/*
	With this selector, we are specifying that all objects use
	the border-box model (not the content-box model)
*/
*, *:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/*
	Here using @media queries, we are specifying when the display
	has a width less than 90rem. it should
	collapse the 2 columns into one (hence width: 100%)
*/
@media (max-width: 90rem) {

	.col-2 {
		width: 100%;
	}

}

/*
	Using further @media queries, we specify that at a width of
	less than 35rem it should collapse the first button option
*/
@media (max-width: 35rem) {

	.col-3 {
		width: 100%;
		padding-right:1rem;
	}

}

/*
	Using further @media queries, we specify that at a width of
	less than 35rem it should collapse the second button option
*/
@media (max-width: 35rem) {

	.col-4 {
		width: 100%;
		padding-right:1rem;
		padding-left: 20%;
		padding-top:1%;
	}

}

/*
	Using further @media queries, we specify that at a width of
	less than 40rem it should collapse the home button option
*/
@media (max-width: 40rem) {

	.col-5 {
		position:relative;
		width: 100%;
		padding-right:1rem;
		/*padding-left: 20%;*/
		padding-top:1%;
		
		left: 0px;
		top:0px;
		
	
		padding-left: 10%;
	}

}



/*
	Using further @media queries, we specify that at a width of
	less than 30rem it should collapse the images
*/
@media (max-width: 30rem) {

	.imagebox {
		
		width: 100%;
		padding-right:1rem;
		padding-left: 5%;
		padding-top:1%;
		
		
	
		}

}

.img {
	width: 75%;
}