/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 479px) {

	/* Grid for 320px width
	.grid-1,
	.grid-2,
	.grid-3,
	.grid-4 { padding: 24px 20px; width: 400px; }
	------------------------------------------------------- */

	#container, .wrapper { padding: 24px 20px; max-width: 920px; width: 80%; }

	.grid-1,
	.grid-2,
	.grid-3,
	.grid-4 { width: 100%; }

	header .wrapper { padding: 24px 20px; width: 80%; }

	.logo { clear: both; margin: 0 0 24px; width: 100%; }
	#navigation-main { clear: both; }
	#navigation-main ul { float: left; width: 100%; }
	#navigation-main ul li { border: 0px; border-bottom: 1px solid #75556e; clear: both; margin: 0 0 3px 0; padding: 5px 0; width: 100%; }
	#navigation-main ul li.first { margin: 0 0 3px 0; padding: 2px 0 5px 0; }

	footer ul li { border: 0px; clear: both; margin: 0; padding: 0; width: 100%; }
	footer .contact { text-align: left; }

	.clue-1,
	.clue-2 {display: none;}

}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 480px)
and (max-width : 767px) {

	/* Grid for 480px width
	.grid-1,
	.grid-2,
	.grid-3,
	.grid-4 { padding: 24px 20px; width: 400px; }
	------------------------------------------------------- */

	#container, .wrapper { padding: 0; width: 440px; }

	.grid-1,
	.grid-2,
	.grid-3,
	.grid-4 { padding: 24px 20px; width: 400px; }

	header .grid-4 { padding: 24px 20px; width: 400px; }

	.logo { clear: both; margin: 0 0 24px; width: 100%; }
	#navigation-main { clear: both; width: 100%; }
	#navigation-main ul { float: left; }
	#navigation-main ul li { margin: 0 0 0 9px; padding: 0 0 0 10px; }

	footer p { margin: 0; }
	footer .grid-1.contact { text-align: left; margin: 0; padding: 0 20px 24px; }

	.clue-1,
	.clue-3 {display: none;}

}

/* iPads (and similar sizes) (portrait and landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px) {

	/* Grid for 768px width
	.grid-1 { float: left; padding: 24px 20px; width: 290px; }
	.grid-2 { padding: 24px 20px; width: 620px; }
	------------------------------------------------------- */

	#container, .wrapper { padding: 0; width: 660px; }
	header .grid-4 { padding: 24px 20px; width: 620px; }

	.logo { clear: both; margin: 0 0 24px; width: 100%; }
	#navigation-main { clear: both; width: 100%; }
	#navigation-main ul { float: left; }

	#main .grid-1.gallery { float: left; padding: 24px 20px; width: 200px; }
	#main .grid-3.home { float: left; padding: 24px 20px; width: 380px; }
	#main .grid-4 { padding: 24px 20px; width: 620px; }

	footer .grid-3, footer .grid-1 { float: left; padding: 24px 20px; width: 290px; }
	footer ul li { margin: 0 0 0 9px; padding: 0 0 0 10px; }

	.clue-1,
	.clue-2,
	.clue-3 {display: none;}

}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {

	/* Grid for 768px width
	.grid-1 { float: left; padding: 24px 20px; width: 290px; }
	.grid-2 { padding: 24px 20px; width: 620px; }
	------------------------------------------------------- */

	#container, .wrapper { padding: 0; width: 660px; }
	header .grid-4 { padding: 24px 20px; width: 620px; }

	.logo { clear: both; margin: 0 0 24px; width: 100%; }
	#navigation-main { clear: both; width: 100%; }
	#navigation-main ul { float: left; }

	#main .grid-1.gallery { float: left; padding: 24px 20px; width: 200px; }
	#main .grid-3.home { float: left; padding: 24px 20px; width: 380px; }
	#main .grid-4 { padding: 24px 20px; width: 620px; }

	footer .grid-3, footer .grid-1 { float: left; padding: 24px 20px; width: 290px; }
	footer ul li { margin: 0 0 0 9px; padding: 0 0 0 10px; }

}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {

	/* Grid for 1024px (and greater) width
	.grid-1 { float: left; padding: 24px 20px; width: 200px; }
	.grid-2 { float: left; padding: 24px 20px; width: 440px; }
	.grid-3 { float: left; padding: 24px 20px; width: 680px; }
	.grid-4 { padding: 24px 20px; width: 920px; }
	------------------------------------------------------- */

	#container, .wrapper { padding: 0; width: 960px; }

	.grid-1 { float: left; padding: 24px 20px; width: 200px; }
	.grid-2 { float: left; padding: 24px 20px; width: 440px; }
	.grid-3 { float: left; padding: 24px 20px; width: 680px; }
	.grid-4 { padding: 24px 20px; width: 920px; }

}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1025px) {

	/* Grid for 1024px (and greater) width
	.grid-1 { float: left; padding: 24px 20px; width: 200px; }
	.grid-2 { float: left; padding: 24px 20px; width: 440px; }
	.grid-3 { float: left; padding: 24px 20px; width: 680px; }
	.grid-4 { padding: 24px 20px; width: 920px; }
	------------------------------------------------------- */

	#container, .wrapper { padding: 0; width: 960px; }

	.grid-1 { float: left; padding: 24px 20px; width: 200px; }
	.grid-2 { float: left; padding: 24px 20px; width: 440px; }
	.grid-3 { float: left; padding: 24px 20px; width: 680px; }
	.grid-4 { padding: 24px 20px; width: 920px; }

	.clue-2,
	.clue-3 {display: none;}
	
}