@media screen and (max-width: 1200px) {

	html {-webkit-text-size-adjust: none;}
	
	a[href^="tel"]{color:inherit; text-decoration:none;}
	
	#intro form {padding: 0 5% 0 5%;}
	
	#wrapperHeader {height: auto;}

	#logo {height: auto; text-align: center; padding: 10px 30px 10px 30px;}
	
	#nav {height: auto; padding: 18px 0 18px 0;}
	#nav ul {width: auto; margin: 0; padding: 0;}
	#nav li a:link {padding: 0 2% 0 2%;}
	#nav li a:visited {padding: 0 2% 0 2%;}
	#nav li a:active {padding: 0 2% 0 2%;}
	#nav li a:hover {padding: 0 2% 0 2%;}

	#nav li a.active {padding: 0 2% 0 2%;}
	
	#intro p {padding: 0 5% 0 5%;}

	.help-modal {
		position: fixed; /* Stay in place */
		z-index: 100; /* Sit on top */
		left: 0;
		top: 0;
		width: 100%; /* Full width */

		height: 100%; /* Full height */
		overflow: auto; /* Enable scroll if needed */
		background-color: rgb(0,0,0); /*Fallback color */
		background-color: rgba(0,0,0,0.2); /* Black w/ opacity */
	}

	/* Modal Content/Box */
	.modal-content {
		background-color: #fefefe;
		position: absolute;
		left: 50%;
		top: 55%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		padding: 20px;
		border: 1px solid #888;
		width: 80%; /* Could be more or less, depending on screen size */
		overflow:auto;
	}

}

img {max-width: 100%; height: auto; width: auto\9; /* ie8 */}

@media screen and (max-width:767px)
{
	.help-modal {
		position: fixed; /* Stay in place */
		z-index: 100; /* Sit on top */
		left: 0;
		top: 0;
		width: 100%; /* Full width */

		height: 100%; /* Full height */
		overflow: auto; /* Enable scroll if needed */
		background-color: rgb(0,0,0); /*Fallback color */
		background-color: rgba(0,0,0,0.2); /* Black w/ opacity */
	}

	/* Modal Content/Box */
	.modal-content {
		background-color: #fefefe;
		position: absolute;
		left: 50%;
		top: 157%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		padding: 20px;
		border: 1px solid #888;
		width: 80%; /* Could be more or less, depending on screen size */
	}
}