/* Tablet styles */
@media only screen and (min-width: 780px) {
	
	/* Header element styles */
	
	/* Collapse banner by 50px when not phone */
	#banner {
		padding-bottom: 0px;
	}
	
	/* Allow for collapsed header and nav on scroll */
	#headerWrapper {
		max-height:175px;
		transition: max-height, .25s linear;
		padding:0;
	}
	#headerWrapper.shrunk {
		max-height:1px;
	}
	
	/* Force logo to left */
	header #logoWrapper {
		float: left;
		margin: 5px 1em 0 0;
	}
	
	/* Use larger logo */
	header .logo {
		background-image: url(/_images/logo-tablet.png);
		float: left;
		margin: 0;
		height: 125px;
		width: 170px;
	}
	
	/* Realign index link to logo */
	header .logo a {
		top: 42px;
		font-size:22px;
		padding: 35px 50px;
	}

	/* Left align site header */
	header h1 {
		text-align: left;
	}
	header h2 {
		text-align: left;
	}
	
	/* Force contact info to right */
	header .contact {
		display: block;
		float: right;
		font-size: 2vw;
		font-weight: 600;
		line-height: 2em;
		margin: 1em 0;
		text-align: left;
		width: 25%;
	}

	/* Enlarge contact text */
	header .contact p {
		float: left;
		width: 100%;
		padding-left: .6em;
		font-weight: 600;
	}
	
	/* Reduce header text width */ 
	header .text {
		clear:none;
		font-size: 1.85vw;
		padding-top: 1.5em;
		width: auto;
	}
	
	/* Bump header to top of page */
	header .text h1 {
		margin: 0 0 .75em 0;;
	}
	
	/* Hide mobile email link button */
	header .email {
		display: none;
	} /* End of header styles */
	
	/* Navigation element styles */
	
	/* Expanded navigation container */
	
	/* Add right and left margin to nav */
	#navWrapper {
		margin: 0 4%;
		width: 92%;
	}
	/* Miniature logo */
	#navWrapper nav .logo {
		background-image: url(/_images/condensed-logo.png);
		background-repeat: no-repeat;
		color: rgba(46,57,43,1);
		font-size:1.5em;
		position:absolute;
		top:0;
		left:0;
		font-weight: 400;
		height:45px;
		width:146px;
		transition: width .25s linear;
		display:none;
	}
	/* Navigation bar */	
	nav {
		position:relative;
	}
	/* Navigation main menu */
	nav ul {
		margin: 1em 0;
	}
	/* Horizontal main menu buttons */
	nav ul li {
		background-color: white;
		font-size: 1.8vw;
		font-weight: 400;
		float: left;
		margin-right:1vw;
		border-radius:5px;
	}
	/* No right margin for last main menu button */
	nav > ul > li:last-child {
		margin-right: 0;
	}
	/* Insert down arrow on menu buttons that have a sub menu */
	nav li.parent > a:after {
		content: "\f0d7";
		font-family: FontAwesome;
		font-size: 1.5em;
		color: rgba(195,207,167,1);
		float: right;
		position: relative;
		margin-left: .5em;
		top: -.15em;
	}
	/* Highlight down arrow on selected menu item */	
	nav li.parent > a.active:after {
		color: rgba(235,233,144,1);
	}
	/* Restyle menu button links */
	nav ul li a { 
		display:block;
		background-color: rgba(19,38,65,.8);
		color: rgba(195,207,167,1);
		text-decoration: none;
		font-size: .9em;
		font-weight:600;
		padding: .9em;
		transition: background 0.3s linear;
		border-radius:5px;
	}
	/* Highlight button on mouse over provided it is not the currently selected button */
	nav ul li a:hover:not(.active) {
		background-color: rgba(19,38,65,.9);
	}
	/* Highlight currently selected menu item */
	nav ul li.active > a {
		background-color: rgba(19,38,65,0.4);
	} 
	/* Submenus */
	nav ul li ul {
		z-index:99;
		position: absolute;
		margin: 0;
		left: -999em; /* Hide sub menu items by default */
	}
	/* Vertical submenu items */
	nav ul li ul li {
		border-top: 3px solid rgba(195,207,167,1);
		font-size: .9em;
		float: none;
		z-index: 999;
	}
	/* Display drop down sub menu on main menu button mouse over */
	nav li:hover ul {
		left: auto;
	}
	/* Condensed navigation container */

	/* Add separation to nav bar */
	#navWrapper.condensed {
		margin-top: 3px;
		margin-bottom:10px;
	}
	/* Show miniature logo on upper left */
	#navWrapper.condensed nav .logo {
		display:block;
	}
	/* Move main menu to upper right */
	#navWrapper.condensed #menu {
		margin: 0;
		position: relative;
		left:160px;
		height:45px;
	}
	/* Condense main menu buttons to smaller area and remove radius */
	#navWrapper.condensed nav ul li {
		margin-right:2px;
		border-radius:0;
		height:100%;
	}
	#navWrapper.condensed nav ul li a { 
		font-size: .75em;
		border-radius: 0px;
		padding-top: 2.75vh;
		height:100%;
	} /* End of navigation styles */
	
	/* Content element styles */

	/* Site-wide element styles */

	/* Enlarge paragraph text */
	#contentWrapper p {
		font-size:1.05em;
	}
	/* Page banner image */
	#contentWrapper .panoramic {
	font-size:.8em;
	} 
	#contentWrapper .panoramic p {
	font-size:1.5em;
	} /* End of site-wide styles */

	/* Reposition content and enlarge text */
	#scrollViewer {
		font-size: 2vw;
		top: 200px;
	}
	#scrollViewer.expanded {
		top: 60px;
	}
	
	/* Reposition content sections */
	#contentWrapper.residential .section {
		position:relative;
		top:20px;
	}
	/* Force images left */
	#contentWrapper.residential .image {
		margin:0 1em 1.5em 0;
		float:left;
	}
	/* Ident bulleted listed that are wrapped around floated images */
	#contentWrapper ul.wrapped {
		position:relative;
		left:1em;
	}

  /* Change column widths */
	.col4 {
		width:33.33%;
	}
	.col8 {
		width:65%;
	}
	.col12 {
		width:100%;
	}

	/* index.php styles */
	
	/* Show splash screen on larger screens */
	#splash {
		display:block;
	}

	/* Use larger splash logo */
	#splash .logo {
		background-image: url(/_images/logo-tablet.png);
		height: 125px;
		width: 170px;
	}
	/* Move slide show to right half of display */
	.index #slideShow {
		width:50%;
		float:right;
		margin: 0 0 3em 1em; 
	}
	
	/* Enlarge image caption */
	.index #slideShow figure figcaption {
		font-size: 1.1em;
	}
	
	/* Force company history below slide show */
	.index #history {
		clear: right;
	}
	.index #history div {
		clear:both;
		margin-bottom:40px;
	} 
	.index #history figure {
		width:33%;
	} 
	.index #history figure.left {
		float:left;
		margin-right:1em;
	} 
	.index #history figure.right {
		float:right;
		margin-left:1em;
	} /* End of index.php styles */
	
	/* softscapes.php element styles */
	
	/* End of softscapes.php styles */
	
	/* hardscapes.php element styles */
	
	/* End of hardscapes.php styles */
	
	/* waterscapes.php element styles */
	
	/* End of waterscapes.php styles */
	
	/* lightscapes.php element styles */
	
	/* End of lightscapes.php styles */

	/* Contact.php styles */
	
	/* Move email to left and compact */
	.contact #emailForm {
		float:left;
		height: 380px;
		margin-bottom: 20px;
	}
	
	/* Allow for 5 lines of input message text */
	.contact #emailForm form textarea {
		height:8em;
	}

	/* Realign button to right under input boxes */
	.contact #emailForm .button {
		margin-left:19%;
	}

	/* Place email form input labels to left of fields  */
	.contact #emailForm .prefix {
		width:18%;
		text-align:right;
		float:left;
		font-size:.75em;
		font-weight:600;
		margin: 11px 1% 0 0;
	}
	
	/* Left align input fields */
	.contact #emailForm .textbox {
		float:left;
		width:75%;
	}
	
	/* Insert colon after input label */
	.contact #emailForm .prefix:after {
		content: ":";
	}

	/* Move message to right of button*/
	.contact #emailForm .message {
		float:right;
		font-size:1em;
		line-height:1.75em;
		margin-right:6%;
		width:44%;
		font-weight: 400;
	} 
	
	/* Move location address and map to right side */
	.contact #location {
		float:right;
		margin:0;
		padding: 0;
		height: 380px;
	}
	.contact #map {
		height: 305px;
	}
	.contact #address p {
		font-size: .85em;
		font-weight:600;
	} /* End contact.php styles */
	
	/* estimate.php element styles */
	
	/* Use larger logo */
	#contentWrapper.quotation #logo {
		background-image: url(/_images/logo-tablet.png);
		height: 125px;
		width: 170px;
		padding: 10px 0;
	}
	/* Bump heading up */
	#contentWrapper.quotation h1 {
		padding-top:10px;
	}
	/* Shift instructions to right and bump up under heading */
	#contentWrapper.quotation #instructions {
		position:relative;
		float:right;
		clear:none;
		width:calc(100% - 250px);
		top:-20px;
		margin-bottom:0;
	}
	/* Force form under instructions */
	#contentWrapper.quotation form {
		clear:both;
	}
	#contentWrapper.quotation input:not(.action) {
			width: calc(100% - 11em);
			margin-left: 1em;
	}
	/* Align radio button group headings*/
	#contentWrapper.quotation form .heading {
		clear:left;
		float:left;
		width:auto;
		padding-top: 14px;
		width: 11em;
		text-align:right;
	}
	/* Stack radio buttons horizontally */
	#contentWrapper.quotation form .radio {
		float:left;
		margin-left:20px;
	}
	/* Align textbox labels */
	#contentWrapper.quotation form .prefix {
		clear:both;
		float:left;
		width: 9em;
		text-align:right;
		position:relative;
		top:11px;
	}
	/* Bump option check boxes down a little */
	#contentWrapper.quotation form #options {
		top:-15px;
		left:15px;
	}
	#contentWrapper.quotation form #options .checkbox {
		width:auto;
	}
	#contentWrapper.quotation form #options .prefix {
		padding-top:5px;
		width:auto;
	}
	#contentWrapper.quotation form #options label {
		margin-right:1.5em;
	}
	#contentWrapper.quotation form #options label:last-child {
		margin-right:0;
	}
	#contentWrapper.quotation form .checkbox:first-child {
    margin-top: 0;
	}
	/* Bump comments section up a little */
	#contentWrapper.quotation form #comments {
		top: -20px;
	}
	#contentWrapper.quotation form #buttons {
		width:40%;
		float:left;
	}
	
	/* Move message area to right */
	#contentWrapper.quotation form #message {
		width:55%;
		float:right;
		clear:none;
		margin:0;
		position:relative;
		top:-10px;
	}

	#contentWrapper.employment form #comments {
		top: 0px;
	}
	/* End of content element styles */
	
	/* Footer element styles */

	/* Make sure footer is below all other elements */
	#footerWrapper{
		clear:both;
	}
	
	footer .links {
		width: 66%;
	}
	
	footer .links ul li {
		margin:20px 10%;
		width:30%;
	}

	footer .links ul li a {
		padding:10px 20px;
	}
	footer .contact {
		width: 33%;
		float:right;
		clear:none;
		padding-top:0;
	}
	
	footer .trailer {
		clear: none;
		width: auto;
		position:relative;
		top:10px;
		padding-bottom:10px;
	} /* End of footer styles */

	/* Class for images that have a large version
		 for use in imageViewer below */
	.zoomable {
		cursor:zoom-in;
	}
		
	/* Large image viewer -- full screen on tablets and desktops */
	#imageViewer {
		display:none;
		position:fixed;
		height:100vh;
		width:100vw;
		left:0px;
		top:0px;
		margin:0;
		padding:0;
		z-index:9999;
	}
	/* Image loading indicator*/
	#imageViewer #loader {
		background-color: rgba(46,57,43,1);
		border:thick solid rgba(255,255,161,1);
		color:rgba(255,255,161,1);
		font-size:2.5em;
		font-weight:400;
		padding:.75em;
		position:relative;
		margin:0 auto;
		top:calc((100vh / 2) - 1.6em);
		width:12em;
	}
	#imageViewer #loader .indicator {
		border: .2em solid rgba(101,118,96,1);
		border-top: .2em solid rgba(255,255,161,1);
		border-radius: 50%;
		width: 1.25em;
		height: 1.25em;
		animation: spin 1.5s linear infinite;
		float: left;
		position: relative;
		top: -.1em;
	}
	@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
	}
	/* Show slide panel when activated */
	#imageViewer.active {
		display:block;
	}
	#imageViewer #frame {
		position:absolute;
		top:0px;
		left:0px;
		height:100%;
		width:100%;
		background-color: transparent;
		transition: background-color .3s linear;
	}
	#imageViewer #frame.active {
		background-color: rgba(46,57,43,.7);
	}
	#imageViewer #frame #image {
		position:absolute;
		background-size:cover;
		border: solid 3px rgba(255,255,161,1);
	}
	
	/* Slide show close button */
	#imageViewer #closeButton {
		border-color: rgba(255,255,161,1);
		color: rgba(255,255,161,1);
		background-color: rgba(43,69,102,1);
		font-size:2em;
		position:absolute;
		top: 10px;
		right: 10px;
		cursor:pointer;
		transition: color .3s linear, background-color .3s linear, border-color .3s linear;
		z-index:2;
	}
	#imageViewer #closeButton:hover {
		border-color: rgba(43,69,102,1);
		color: rgba(43,69,102,1);
		background-color: rgba(255,255,161,1);
	}

}

/* Adjustments to content position as display grows */
@media only screen and (min-width: 875px) {
	#scrollViewer {
		top: 210px;
	}
}
@media only screen and (min-width: 1000px) {
	#scrollViewer {
		top: 220px;
	}
}

/* End of tablet media queries */