body{
	background: url(img/background.jpg)  no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	}

@font-face {
    font-family: 'harabararegular';
    src: url('font/harabara-webfont.eot');
    src: url('font/harabara-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/harabara-webfont.woff2') format('woff2'),
         url('font/harabara-webfont.woff') format('woff'),
         url('font/harabara-webfont.ttf') format('truetype'),
         url('font/harabara-webfont.svg#harabararegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

p { font-family: 'harabararegular';
	color:#FFF;
	text-align:center;
	font-size:36px;
	-webkit-text-stroke: 1px black;
}

.box { float: left; }
	#root { max-width: 1200px; margin: 0 auto; }

	#box1 { width: 25%; }
	#box2 { width: 25%; }
	#box3 { width: 25%; }
	#box4 { width: 25%; }
	
	
	/* Laptop/Tablet (1024px) */
	@media only screen and (min-width: 800px) and (max-width: 1024px) and (orientation: landscape) {
		#box1 { width: 25%; }
		#box2 { width: 25%; }
		#box3 { width: 25%; }
		#box4 { width: 25%; }
	}
	
	/* Tablet Portrait (768px) 
	@media only screen and (min-width: 321px) and (max-width: 1024px) and (orientation: portrait) {
		#box1 { width: 25%; }
		#box2 { width: 25%; }
		#box3 { width: 25%; }
		#box4 { width: 25%; }
	}*/
	
	/* Phone Landscape (480px) */
	@media only screen and (min-width: 321px) and (max-width: 1023px) and (orientation: landscape) {
		#box1 { width: 50%; }
		#box2 { width: 50%; }
		#box3 { width: 50%; }
		#box4 { width: 50%; }
	}
	
	/* Phone Portrait (600px) */
	@media only screen and (max-width: 600px) {
		#box1 { width: 50%; }
		#box2 { width: 50%; }
		#box3 { width: 50%; }
		#box4 { width: 50%; }
	}
	
	/* iPad 3 & 4 Landscape */
	@media only screen and (width: 481px) and (width: 1024px) and (orientation: landscape) {
		#box1 { width: 50%; }
		#box2 { width: 50%; }
		#box3 { width: 50%; }
		#box4 { width: 50%; }
	}
	
	/* iPad 3 & 4 Portrait */
	@media only screen and (width: 481px) and (width: 1024px) and (orientation: portrait) {
		#box1 { width: 100%; }
		#box2 { width: 100%; }
		#box3 { width: 100%; }
		#box4 { width: 100%; }
	}
	
	/* iPhone 2G-3GS Landscape */
	@media only screen and (width: 481px) and (width: 480px) and (orientation: landscape) {
		#box1 { width: 100%; }
		#box2 { width: 100%; }
		#box3 { width: 100%; }
		#box4 { width: 100%; }
	}
	
	/* iPhone 2G-3Gs Portrait */
	@media only screen and (width: 481px) and (width: 480px) and (orientation: portrait) {
		#box1 { width: 100%; }
		#box2 { width: 100%; }
		#box3 { width: 100%; }
		#box4 { width: 100%; }
	}

	/* iPhone 4/4S Landscape */
	@media only screen and (width: 569px) and (width: 480px) and (orientation: landscape) {
		#box1 { width: 100%; }
		#box2 { width: 100%; }
		#box3 { width: 100%; }
		#box4 { width: 100%; }
	}

	/* iPhone 4/4S Portrait */
	@media only screen and (width: 569px) and (width: 480px) and (orientation: portrait) {
		#box1 { width: 100%; }
		#box2 { width: 100%; }
		#box3 { width: 100%; }
		#box4 { width: 100%; }
	}
	
	/* iPhone 5 Landscape */
	@media only screen and (width: px) and (width: 568px) and (orientation: landscape) {
		#box1 { width: 100%; }
		#box2 { width: 100%; }
		#box3 { width: 100%; }
		#box4 { width: 100%; }
	}
	
	/* iPhone 5 Portrait */
	@media only screen and (width: px) and (width: 568px) and (orientation: portrait) {
		#box1 { width: 100%; }
		#box2 { width: 100%; }
		#box3 { width: 100%; }
		#box4 { width: 100%; }
	}

.boxa { float: center; }
	#root { max-width: 1200px; margin: 0 auto; }

	#boxa { width: 100%; }
	
	
	/* Laptop/Tablet (1024px) */
	@media only screen and (min-width: 800px) and (max-width: 1024px) and (orientation: landscape) {
		#boxa { width: 100%; }
	}
	
	/* Tablet Portrait (768px) 
	@media only screen and (min-width: 321px) and (max-width: 1024px) and (orientation: portrait) {
		#box1 { width: 25%; }
		#box2 { width: 25%; }
		#box3 { width: 25%; }
		#box4 { width: 25%; }
	}*/
	
	/* Phone Landscape (480px) */
	@media only screen and (min-width: 321px) and (max-width: 1023px) and (orientation: landscape) {
		#boxa { width: 100%; }
	}
	
	/* Phone Portrait (600px) */
	@media only screen and (max-width: 600px) {
		#boxa { width: 100%; }
	}
	
	/* iPad 3 & 4 Landscape */
	@media only screen and (width: 481px) and (width: 1024px) and (orientation: landscape) {
		#boxa { width: 100%; }
	}
	
	/* iPad 3 & 4 Portrait */
	@media only screen and (width: 481px) and (width: 1024px) and (orientation: portrait) {
		#boxa { width: 100%; }
	}
	
	/* iPhone 2G-3GS Landscape */
	@media only screen and (width: 481px) and (width: 480px) and (orientation: landscape) {
		#boxa { width: 100%; }
	}
	
	/* iPhone 2G-3Gs Portrait */
	@media only screen and (width: 481px) and (width: 480px) and (orientation: portrait) {
		#boxa { width: 100%; }
	}

	/* iPhone 4/4S Landscape */
	@media only screen and (width: 569px) and (width: 480px) and (orientation: landscape) {
		#boxa { width: 100%; }
	}

	/* iPhone 4/4S Portrait */
	@media only screen and (width: 569px) and (width: 480px) and (orientation: portrait) {
		#boxa { width: 100%; }
	}
	
	/* iPhone 5 Landscape */
	@media only screen and (width: px) and (width: 568px) and (orientation: landscape) {
		#boxa { width: 100%; }
	}
	
	/* iPhone 5 Portrait */
	@media only screen and (width: px) and (width: 568px) and (orientation: portrait) {
		#boxa { width: 100%; }
	}