* {
  box-sizing: border-box; }

#wrapper {
  background-color: #90C7E3;
  background-image: linear-gradient(to bottom, #FFFFFF , #90C7E3); }

body {
  background-color: #EAEAEA;
  font-family: Arial, Helvetica, sans-serif;
  color: #666666; }

header {
  background-color: #002171;
  color: #FFFFFF;
  text-align: center; }

header a:link {
  text-decoration: none;
  color: #FFFFFF; }

header a:visited {
  text-decoration: none;
  color: #FFFFFF; }

header a:hover {
  text-decoration: none;
  color: #90C7E3; }

h1 {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0.25em;
  margin: 0;
  padding-top: 0.5em;
  padding-bottom: 0.5em; }

nav {
  font-weight: bold;
  text-align: center;
  padding: 0;
  font-size: 120%; }

nav a {
  text-decoration: none; }

nav ul {
  list-style-type: none;
  padding-left: 0;
  font-size: 1.2em;
  margin: 0; }

nav li {
  border: 1px darkblue;
  border-bottom-style: solid; }

nav a:link {
   color: #5C7FA3; }

nav a:visited {
  color: #344873; }

nav a:hover {
  color: #A52A2A; }

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

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

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

main {
  padding: 1px 20px 20px 30px;
  display: block;
  background-color: #FFFFFF;
  overflow: auto; }

h2 {
  color: #1976D2;
  font-family: Georgia, "Times New Roman", serif;
  text-shadow: 1px 1px 1px #CCCCCC; }

h3 {
  font-family: Georgia, "Times New Roman", serif;
  color: #000033; }

dt {
  color: #002171; }

.resort {
  color: #1976D2;
  font-weight: bold; }

main ul {
  list-style-image: url(marker.gif); }

footer {
  font-size: 75%;
  font-style: italic;
  text-align: center;
  padding: 2em;
  background-color: #FFFFFF; }

#contact {
  font-size: 90%; }

@media (min-width: 600px) {
	
	nav ul {
	  display: flex;
	  flex-flow: row nowrap;
	  justify-content: space-around; }
	
	nav li {
	  border-bottom: none; }
	
	section {
	  padding-right: 2em;
	  padding-left: 2em; }
	
	.content main {
		display: grid;
	  	grid-template-rows: auto;
	  	grid-template-columns: 1fr 1fr 1fr; }
	
	h2 { grid-row: 1 / 2; grid-column: 1 / 5; }
	section { grid-row: 2 / 3; grid-column: auto; }
	#special { grid-row: auto; grid-column: 1 / 5; }
	footer { grid-row: auto; grid-column: 1 / 5; } 
	
	}

@media (min-width: 1024px) {
	nav ul {
		flex-direction: column;
		padding-top: 1em; }
	
	nav {
		text-align: left;
		padding-left: 1em; }
		
	#wrapper {
		margin: auto; max-width: 1200px;
		width: 80%;
		border: 1px solid  darkblue;
		box-shadow: 1px 1px 1px darkblue;
		display: grid;
		grid-template-columns: 180px auto auto;
		grid-template-rows: auto auto auto auto; }
		
	header { grid-row: 1 / 2; grid-column: 1 / 3; }
	nav { grid-row: 2 / 5; grid-column: 1 / 2; }
	div { grid-row: 2 / 3; grid-column: 2 / 3; }
	main { grid-row: 3 / 4; grid-column: 2 / 3; }
	footer { grid-row: 4 / 5; grid-column: 2 / 3; }
	
	}