@import url('https://fonts.googleapis.com/css?family=Passion+One');
		@import url('https://fonts.googleapis.com/css?family=Roboto');
		
		html {
			margin: 0;	
			box-sizing: border-box;
			}
			*, *:before, *:after {
			box-sizing: inherit;
			}

		body {
			margin: auto;
			margin-top: 0%;
			margin-bottom: 0%;			
			width: 65%;
			font: 100% "Roboto","Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
			color: black;
			background: #223958; 
			background-image: url('images/back7.jpg');
			background-repeat: no-repeat;
			-webkit-box-shadow: 0px 0px 15px 4px rgba(0,0,0,0.75);
			-moz-box-shadow: 0px 0px 15px 4px rgba(0,0,0,0.75);
			box-shadow: 0px 0px 15px 4px rgba(0,0,0,0.75);
		}		
		img {			
			max-width: 100%;
		}
			
	/* ============= Mobile Layout: 480px and below. Single column. Vertical Nav. ============== */
	
			body {
			
			width: 95%;
			}

	
		header{
			position: relative;
			margin: 0 auto;		
			background: url(images/starburst.png) no-repeat   ;	 
			background-color: #efefef;
			height: 270px;
			padding-left: 0%; 	
			padding-right:0%;
			padding-top: 1%;
					
		}
		
		header > img{
			margin: 1% 0% 0 1%;					
			color:white;		
		}
		
		.header {
			text-align: center;
			 position: absolute; 
			 bottom: 90px;
			left: 25%;
			color: black;
			font-size: 2.5em;	 					
		}
				
		.slogan {
			text-align: center;
			 position: absolute; 
			 bottom: 8px;
			left: 30%;			
			color: black;
			font-size: 1.1em;
			display:hidden;

		}
		
		
		.worries {			
			font-style: italic ;
			font-weight: bold;
			color: #006633;			
		}
		
		.hours {
			text-align: right;
			 position: absolute; 
			 bottom: 55px;
			right: 5px;
			color:black;
			font-size: 1em;
		}

	
		nav {
			width:100%;
		 position: absolute; 
		 bottom: 0; 
		 margin: 0;
		 	
		border-bottom:3px solid #006633;
		
		}
		
		nav ul {
			width:100%;
			list-style-type: none;		
			margin: 0;
			padding: 0;
			overflow: hidden;
		  background: #555555;
		  background: linear-gradient(top,  #555555,  #222222);
		  background: -ms-linear-gradient(top,  #555555,  #222222);
		  background: -webkit-gradient(linear, left top, left bottom, from(#555555), to(#222222));
		  background: -moz-linear-gradient(top,  #555555,  #222222);
		  position:relative;
			z-index:999;
		}

	

		nav li a {
			letter-spacing: .03em;	
			display: block;
			color: white;
						text-decoration: none;
				}

		nav li a:hover:not(.active) {
			background-color: #111;
			}

		nav .active {
			background-color: #006633;
		  background: linear-gradient(top,  #009933,  #006633);
		  background: -ms-linear-gradient(top,  #009933,  #006633);
		  background: -webkit-gradient(linear, left top, left bottom, from(#009933), to(#006633));
		  background: -moz-linear-gradient(top,  #009933,  #006633);			
			}
		
		main {
			width: 100%;
			margin: 0 auto;
			line-height: 1.6em;		
			background-color: #ffffff;
			border-bottom: 4px solid #006633;			
			display: block;
		}
				
		#left {
			float: left;
			width: 94%;
			margin: 1% 1% 2% 3%;
			padding: 1%;
			
		}


		#contact1{

			width: 95%; 
			margin: 0 0 0 3%; 	
			
		}
		
		#right,#left2 {
			float:left;
			width:45%; 	
				margin: 0 0 3% 3%; 			
		}		
		
		
		.pquote {
			float: right;
			width: 200px;
			background: #cce0d6;
			padding: 13px;
			margin: 1%;
			 box-shadow: 6px 6px 0px grey;
		}

		.italics {
			font-style:italic;
			
		}

		blockquote {
			margin: 0; 
			
		}


		aside {
		width:200px;
		height:133px;
		float:left;
		background: url(images/flag4.png) no-repeat;
		border: 1px dashed #ccc;
		margin: 2%;
		padding:1%;			
		}

		aside> p {
		font-style: italic;
		margin: 4%;
		padding:4%;
		font-size:2.5em;	
		text-shadow: 2px 2px 0px grey;
			
		}
		
		#mid {			
			margin: 1em ;
			clear:both;			
		}

		h1 {
			letter-spacing: .03em;				
			 text-shadow: 1px 1px 1px black;

		}
		
		h2 {			
			font-family: 'Roboto', sans-serif;
			text-transform: uppercase;
			letter-spacing: .10em;			
			color: black;
			padding: 1%;
			border-bottom:2px solid #006633;
						
		}

		h3 {
			font-family: 'Roboto', sans-serif;
			letter-spacing: .10em;			
			color: black;
			margin: 5% 0 0 0;
		
		}
		h4 {
			margin: 0;
			
		}

		
		iframe{
			width:90%;
			margin: 0 auto;
			display:block;		
		}		
			
		form {

			width:95%; 	
			background-color: #cce0d6;
			box-shadow: 6px 6px 0px grey;	
			padding:2em;
			margin-bottom:5%;
		}
		
		fieldset { 
		border: none;
		
		}		
		
		ul{
			padding: 0;
			
		}
		li {
			list-style-type: none;	
			
		}
		textarea {
			width:100%;
		height: 150px;
		
		}
		
		.input{
		width:100%;
		height: 50px;
		margin-bottom:1em;
		
		}
		.button
		{
		width: 150px;
		height: 50px;
		background: white;
		border: white solid 2px;
		}
		
	
		footer {
			width:100%;
			background-color: #006633;
			text-align: center;
			font-size: .875em;
			clear: left;
			height:40px;
			overflow: hidden;	
		}
		
		footer > ul li {
			display:inline;

			overflow: hidden;			
		}
			

/* ============= Tablet Layout: 481px to 1788px. Switch to horiziontal menu. ============ */


@media only screen and (min-width: 481px) {
	
				body {
			
			width: 80%;
			}
	
header{
			position: relative;
			margin: 0 auto;		
			background: url(images/starburst.png) no-repeat   ;	 
			background-color: #efefef;
			height: 220px;
			padding-left: 0%; 	
			padding-right:0%;
			padding-top: 1%;
					
		}
		
		header > img{
			margin: 1% 0% 0 1%;					
			color:white;		
		}
		
		.header {
			text-align: center;
			 position: absolute; 
			 bottom: 90px;
			left: 25%;
			color: black;
			font-size: 2.5em;	 					
		}
				
		.slogan {
			text-align: center;
			 position: absolute; 
			 bottom: 80px;
			left: 30%;			
			color: black;
			font-size: 1.1em;						
		}
		
		


nav {
			width:100%;
		 position: absolute; 
		 bottom: 0; 
		 margin: 0;
		 	
		border-bottom:3px solid #006633;
		
		}
		
		nav ul {
			width:100%;
			list-style-type: none;		
			margin: 0;
			padding: 0;
			overflow: hidden;
		  background: #555555;
		  background: linear-gradient(top,  #555555,  #222222);
		  background: -ms-linear-gradient(top,  #555555,  #222222);
		  background: -webkit-gradient(linear, left top, left bottom, from(#555555), to(#222222));
		  background: -moz-linear-gradient(top,  #555555,  #222222);
		  position:relative;
			z-index:999;
		}

		nav li {
			float: left;
			
		}

		nav li a {
			letter-spacing: .03em;	
			display: block;
			color: white;
			text-align: center;
			padding: 14px 15px;
			text-decoration: none;
				}

		nav li a:hover:not(.active) {
			background-color: #111;
			}

		nav .active {
			background-color: #006633;
		  background: linear-gradient(top,  #009933,  #006633);
		  background: -ms-linear-gradient(top,  #009933,  #006633);
		  background: -webkit-gradient(linear, left top, left bottom, from(#009933), to(#006633));
		  background: -moz-linear-gradient(top,  #009933,  #006633);			
			}
			
			

		
		.pquote {
			float: right;
			width: 300px;
			background: #cce0d6;
			padding: 13px;
			margin: 1%;
			 box-shadow: 6px 6px 0px grey;
		}
		
		#contact1{
			float: left;
			width: 45%; 
			margin: 0 0 0 3%; 	
			
		}		
		
		form {
			float: left;
			width:45%; 	
			background-color: #cce0d6;
			box-shadow: 6px 6px 0px grey;	
			padding:2em;
			margin-bottom:5%;
		}		


			}
/* ============ Desktop Layout:1279px. +*/



@media only screen and (min-width: 1279px) {

			body {
			
			width: 65%;
			}

				
		.slogan {
			text-align: center;
			 position: absolute; 
			 bottom: 70px;
			left: 30%;			
			color: black;
			font-size: 1.1em;						
		}


nav {
			width:100%;
		 position: absolute; 
		 bottom: 0; 
		 margin: 0;
		 	
		border-bottom:3px solid #006633;
		
		}
		
		nav ul {
			width:100%;
			list-style-type: none;		
			margin: 0;
			padding: 0;
			overflow: hidden;
		  background: #555555;
		  background: linear-gradient(top,  #555555,  #222222);
		  background: -ms-linear-gradient(top,  #555555,  #222222);
		  background: -webkit-gradient(linear, left top, left bottom, from(#555555), to(#222222));
		  background: -moz-linear-gradient(top,  #555555,  #222222);
		  position:relative;
			z-index:999;
		}

		nav li {
			float: left;
			
		}

		nav li a {
			letter-spacing: .03em;	
			display: block;
			color: white;
			text-align: center;
			padding: 14px 25px;
			text-decoration: none;
				}

		nav li a:hover:not(.active) {
			background-color: #111;
			}

		nav .active {
			background-color: #006633;
		  background: linear-gradient(top,  #009933,  #006633);
		  background: -ms-linear-gradient(top,  #009933,  #006633);
		  background: -webkit-gradient(linear, left top, left bottom, from(#009933), to(#006633));
		  background: -moz-linear-gradient(top,  #009933,  #006633);			
			}


		
		
@media only screen and (min-width: 1500px) {
	
		nav li a {
			letter-spacing: .03em;	
			display: block;
			color: white;
			text-align: center;
			padding: 14px 45px;
			text-decoration: none;
				}	
	
	
}