/* File contains the grid layouts and sets the box model to add padding and borders to the inside */

img, video, canvas {max-width:100%;}

#page-wrap, .container, nav#main-navigation {
	
	/* All containers relative for all child elements abs. positioned */
	position: relative;
	/* Sets box model to add padding and borders to the inside */
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;   
	     /* Opera/IE 8+ */
}

.clear {clear: both;}

section#main-content {clear:both;}

.hide-mobile {display: none;}
.hide-tablet {display: none;}
.hide-desktop {display: none;}


/* Mobile (Default) */

	
	#page-wrap { width: 100%;}
	#content-wrap {width:100%; border: 10px solid #B6B4AE; }	
	.wrapper {margin: 0 auto; padding: 0 15px; }
	.sixteen {float: left; width: 100%; }
	.fifteen {float: left; width: 100%; }
	.fourteen {float: left; width: 100%; }
	.thirteen {float: left; width: 100%; }
	.twelve {float: left; width: 100%; }
	.eleven {float: left; width: 100%; }
	.ten {float: left; width: 100%; }
	.nine {float: left; width: 100%; }
	.eight {float: left; width: 100%; }
	.seven {float: left; width: 100%; }
	.six {float: left; width: 100%;}
	.five {float: left; width: 100%; }
	.four {float: left; width: 100%;}
	.three {float: left; width: 100%; }
	.two {float: left; width: 100%; }
	.one {float: left; width: 100%; }

	


/* Mobile Wide */
@media all and (max-width: 799px) and (min-width: 521px) {
	
	#page-wrap { max-width: 100%; margin: 0 auto;}	
	.wrapper {max-width: 600px; margin: 0 auto; padding: 0 20px;}
	.sixteen {float: left; width: 100%; }
	.fifteen {float: left; width: 100%; }
	.fourteen {float: left; width: 100%; }
	.thirteen {float: left; width: 100%; }
	.twelve {float: left; width: 100%; }
	.eleven {float: left; width: 100%; }
	.ten {float: left; width: 100%; }
	.nine {float: left; width: 100%; }
	.eight {float: left; width: 100%; }
	.seven {float: left; width: 100%; }
	.six {float: left; width: 100%;}
	.five {float: left; width: 100%; }
	.four {float: left; width: 50%;}
	.three {float: left; width: 100%; }
	.two {float: left; width: 100%; }
	.one {float: left; width: 100%; }
	
	.triplebox {float: left; width: 50.00%;}
}



/* Tablet Landscape widths */
@media all and (max-width: 1000px) and (min-width: 800px) {
	
	#page-wrap { max-width: 100%; margin: 0 auto;}	
	.wrapper {max-width: 950px; margin: 0 auto; padding: 0px 100px; }
	.sixteen {float: left; width: 100%; }
	.fifteen {float: left; width: 93.75%; }
	.fourteen {float: left; width: 87.5%; }
	.thirteen {float: left; width: 100%; }
	.twelve {float: left; width: 75%; }
	.eleven {float: left; width: 68.75%; }
	.ten {float: left; width: 100%; }
	.nine {float: left; width: 56.25%; }
	.eight {float: left; width: 50%; }
	.seven {float: left; width: 43.75%; }
	.six {float: left; width: 100%;}
	.five {float: left; width: 31.25%; }
	.four {float: left; width: 25%;}
	.three {float: left; width: 18.75%; }
	.two {float: left; width: 12.5%; }
	.one {float: left; width: 6.25%; }
	
	
	.triplebox {float: left; width: 33.333%; }

}


/* Desktop Widths */
@media all and (min-width: 1001px) {

	#page-wrap { max-width: 100%; margin: 0 auto;}	
	.wrapper {max-width: 1120px; margin: 0 auto; padding: 0 30px; }
	
	.sixteen {float: left; width: 100%; }
	.fifteen {float: left; width: 93.75%; }
	.fourteen {float: left; width: 87.5%; }
	.thirteen {float: left; width: 81.25%; }
	.twelve {float: left; width: 75%; }
	.eleven {float: left; width: 68.75%; }
	.ten {float: left; width: 62.5%; }
	.nine {float: left; width: 56.25%; }
	.eight {float: left; width: 50%; }
	.seven {float: left; width: 43.75%; }
	.six {float: left; width: 37.5%;}
	.five {float: left; width: 31.25%; }
	.four {float: left; width: 25%;}
	.three {float: left; width: 18.75%; }
	.two {float: left; width: 12.5%; }
	.one {float: left; width: 6.25%; }
		
	
	.triplebox {float: left; width: 29.333%; padding: 0 2%; }
	
}