/* CSS Document */


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

{
	html {zoom:0.8;}

	/* change the menu */
	div#menucontent {top: 100px;}

}


/* -- SMARTPHONES ------------- */
@media screen and (max-width: 760px)

{
	/* change layout containers */
	div.content, div.col, div.col1, div.col2, div.col3, div.col4, div.col5, div.col6, div.col7, div.col8, div.col9, div.col10, div.col11, div.col12 {width: 97%; padding: 3px 1%;}

	div.content {padding-bottom: 50px;}
	
	/* change tile layouts */
	div.tiles.one-across div.tile,
	div.tiles.two-across div.tile,
	div.tiles.three-across div.tile {width: 98%;}
	div.tiles.four-across div.tile {width: 48%;}
	div.tiles.five-across div.tile,
	div.tiles.six-across div.tile {width: 31%;}

	/* change the buttons */
	a.button {width: 50%;}
	div.mobilecenter {text-align: center;}

	/* change the hero */
	div.hero h1 {margin-top: 10px;}

	/* change calltoaction and closerspot */
	div.calltoaction div.col4.right, div.closerspot div.col4.right {text-align: center !important;}

	/* change the footer */
	div#footer div.right {text-align: left !important;}
	div#footer ul li a {margin: 0px 10px 0px 0px;}


	/* hide something */
	.mobile-hide {display:none;}
}

/* -- SMARTPHONES Portrait ------------- */
@media screen and (max-width: 480px)

{
	/* change banner */
	div.banner {padding: 5px 0px;}
	div.logo a {width: 50%; height: 50%; background-size: 48%; margin-top: -2px;}
	div.menuicon a {background-size: 48%; margin-top: 8px;}

	/* hide something */
	.mobile-hide {display:none;}

	/* special adjustment for spacing after jump to list */
	div#go-for-more ul {margin-bottom: 50px;}

	/* adjust spacing between portfolio entries */
	div.webcontent {padding: 10px 0px 20px 0px;}
}


/* -- SMARTPHONES Landscape ------------- */
@media screen and (max-width: 760px) and (orientation:landscape)

{
	/* change banner */
	div.banner {padding: 10px 0px;}
	div.logo a {width: 50%; height: 50%; background-size: 20%; margin-top: -2px;}
	div.menuicon a {background-size: 48%; margin-top: 8px;}

	/* hide something */
	.mobile-hide {display:none;}
}