body 
{background-color: #3399CC; background-image: linear-gradient(to bottom, #3399CC, #C2E0F0, #3399CC);
color: #666666; font-family: Arial, Verdana, 
sans-serif}

#wrapper {background-color: #000033; min-width: 700px; max-width: 1024px;
box-shadow: 5px 10px 5px #000033; margin-left: auto; margin-right: auto; width: 80%}

h1 {background-image: url(sunset.jpg); background-repeat: no-repeat; background-position: right; 
padding-left:2em; height: 72px; background-color: #000033; color: #FFFFFF; 
font-family: Georgia, serif; line-height:200%; margin-bottom:0}

* {box-sizing: border-box; }

nav {float: left; width: 160px; padding: 0;padding-top: .5em; padding-right: .5em; padding-bottom: .5em; padding-left: 2em; font-weight: bold;}

nav a:link{color: #FFFFFF;}
nav a:visited{color: #C2E0F0;}
nav a:hover{color: #CCCCCC;}

nav ul {list-style-type: none; padding-left:1em;}

nav a {text-decoration: none;}

h2 {color:#3399CC; font-family: Georgia, serif}

h3 {color:#000033}

main {background-color: #FFFFFF; margin-left: 170px; padding-top: 1px; padding-bottom: 1px;padding-left:2em; padding-right:2em; display: block; color:#3399CC; font-family: Georgia, serif}

#homehero {
margin-left: 170px; height: 300px; background-image: url(coast.jpg); background-size: 100% 100%;
background-repeat: no-repeat}

#yurthero {
margin-left: 170px; height: 300px; background-image: url(yurt.jpg); background-size: 100% 100%;
background-repeat: no-repeat}

#trailhero {
margin-left: 170px; height: 300px; background-image: url(trail.jpg); background-size: 100% 100%;
background-repeat: no-repeat}

table {margin: auto; border: 1px solid #3399CC; width: 90%; border-collapse: collapse;}

td, th { margin: auto; border: 1 px solid #3399CC; }

td {text-align: left;}\

.text {text-align: left;}

tr: nth-of-type(even) { background-color: #F5FAFC;}

dt {color: #000033; font-weight: bold}

.resort {color: #000033; font-size: 1.2em}

header, nav, main, footer {display: block; }

footer {margin-left: 170px; background-color: #FFFFFF; padding: 1em; font-size:.70em; font-style: italic; text-align: center}

#mobile {display: none; }
#desktop {display: inline; }

@media only screen and (max-width: 1024px) {
	body {
	   margin: 0;
	   padding: 0;
	   background-image: none;
}

#wrapper {
	   width: auto;
	   min-width:0;
	   margin: 0;
	   box-shadow: none;
	}
h1 {
	margin: 0;
   }
   nav {
	float: none;
	width: auto;
	padding-top: 0.01em;
	padding-bottom: 0.01em;
	padding-left: 1em;
	padding-right: 1em;
   }
   nav li {
	display: inline-block;
	   }
   nav a {
	padding-right: 2em;
	  }
   main {
	padding: 1em;
	margin-left: 0;
	font-size: 90%;
	}
	footer {
	   margin: 0;
	}
	#homehero, #yurthero, #trailhero {
	   margin-left: 0;
	}
   }

@media only all and (max-width: 768px) {
	h1 {
	    height: 100%;
	    font-size: 15em;
	    padding-left: 0.3em;
	}
	nav {
	    padding:0;
	}
	nav a {
	    display: block;
	    padding: 0.2em;
	    font-size: 1.1em;
	    border-bottom: 1 px solid, #330000;
	}
	 nav ul {
	 margin: 0;
	 padding: 0;
	   }
   	nav li {
	display: block;
	margin: 0;
	padding: 0;
	  }
  	 main {
	padding: 0.1em 0.6em 0.1em 0.4em;
	}
	#homehero, #yurthero, #trailhero {
	   display: none;
	}
	footer {
	   padding: 0;
	}
	#mobile {
	   display: inline;
	#desktop {
	   display: none;
	}
   }