/*
	NOTE: the widths for larger screens are based on a 16:9 resolution

	http://stackoverflow.com/questions/18477016/switching-css-classes-based-on-screen-size
	https://en.wikipedia.org/wiki/Display_resolution#/media/File:Vector_Video_Standards8.svg
	http://stackoverflow.com/questions/6747242/what-is-the-difference-between-max-device-width-and-max-width-for-mobile-web
	http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml
	https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
	http://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile
*/


/* Smartphone (portrait and landscape) - CGA (320) to HVGA (480) */
@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 736px) {
	/* global.css */
	html { overflow-x: hidden; }
	.page {							/* definitions for the overall page/wrapper */
		position: static;
		margin: 0;
		width: 100%;
	}
	#imgPage { position: fixed; }

	/* default.css */
	#divHeader { height: auto; margin-bottom: 30px; overflow: hidden; }
	#divHeader ul { float: none; margin-left: 0; width: calc(100% - 2px); }
	#divHeader ul li { width: 100%; }
	#divHeader ul li:first-child { font-size: 70px; }
	#divHeader ul li:nth-child(2) { font-size: 35px; }
	#divHeader ul li a { border-width: 0; }
	#divHeader #imgLogo { display: none; }

	#divContent { height: auto; }				/* this is for the body/content that gets changed */

	#divFooter {
		margin-top: 60px;
		height: auto;
		border-bottom-left-radius: 0;
		border-radius-bottomleft: 0;
		-moz-border-radius-bottomleft: 0;
		-webkit-border-radius-bottomleft: 0;
	}
	#divFooter ul li:first-child { color: transparent; font-size: 1px; }
	#divFooter ul li:first-child a { display: block; width: 100%; font-size: 15px; }


	#divHome div:nth-child(1),
	#divHome div:nth-child(2),
	#divHome div:nth-child(3),
	#divHome div:nth-child(4) { float: none; margin-top: 15px; width: auto; height: auto; }
	#divHome div:nth-child(3),
	#divHome div:nth-child(4) { margin-left: 0; }


	#divServices div:nth-child(1),
	#divServices div:nth-child(2),
	#divServices div:nth-child(3) { float: none; }
	#divServices div:nth-child(2) { width: auto; height: auto; }
	#divServices div:nth-child(3) { margin-left: 0; width: auto; height: auto; }
	#divServices div:nth-child(2) .Col2 { width: calc(100% - 100px); }
	#divServices div:nth-child(2) .Col3 { display: none; }
	#divServices div:nth-child(2) div { height: auto; }
	#divServices div:nth-child(2) ul { width: auto; }
	#divServices div:nth-child(2) div table td:nth-child(1n+1) span { display: block; width: 100%; color: #999; }
	#divServices div:nth-child(2) div table td:nth-child(1n+3) { display: none; }


	#divDiscounts>div { height: auto; }


/*	#divPayment #divCheck { margin-left: 0; } */


	#divJobs>div { height: auto; }


	#divTAC>div { height: auto; }


	#divEsesen>div { height: auto; }
	#divEsesen div label.Author { margin: 15px 0; }


	#divFacts>div { height: auto; }


	#divHolidays>div { height: auto; }


	#divName>div { height: auto; }




	#divInfo { display: none; }
	#divContact {
		display: none;
		margin-top: 0;
		height: auto;
		border-bottom-right-radius: 0;
		-moz-border-radius-bottomright: 0;
		-webkit-border-radius-bottomright: 0;
	}

}


/* Smartphone (landscape) */
@media only screen 
and (max-device-width: 736px)
and (orientation: landscape) {
	/* default.css */
	#divPayment #divCheck { width: auto; }
}

/* Smartphone (portrait) */
@media only screen 
and (max-device-width: 736px)
and (orientation: portrait) {
	/* default.css */
	#divPayment #divCheck { margin-left: 0; }
}


/* iPad (portrait and landscape) - PAL (768) to PAL+ (1024) */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) {
	/* Styles */
}

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

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

/* Desktop/Laptop (landscape) - HD 720 (1280x720), Unnamed (1366x768), WXGA (1280x800) */
/* NOTE: we 'min-device-width > 736' so that cell phones aren't triggered */
@media only screen 
and (min-device-width: 737px)
and (min-height: 720px) 
and (max-height: 800px) {
	/* global.css */
}

/* Anything else - Unnamed (1440x900), Unnamed (1600x900), WSXGA+ (1680x1050), HD 1080 (1920x1080), WUXGA (1920x1200) */
@media only screen 
and (min-device-width: 737px)
and (min-height: 801px) {
	/* default.css */
}