header, main, nav, footer, figure, figcaptiom, aside, section, article
{display:block;}

#mobile
{
    display: none;
}

#desktop
{
    display: inline;
}
body { background-color: #4F6D93;
      color: #666666;
	  font-family: Arial, Helvetica, sans-serif;
	    background-image: linear-gradient(to bottom, #FFFFFF, #4F6D93);
	  background-repeat: no-repeat;
}
#wrapper { width: 80%;
           margin-left: auto;
		   margin-right: auto;
		   background-color: #90C7E3; 
		   min-width: 960px;
		   max-width: 2048px;
		   box-shadow: 3px 3px 3px #333333;
}
header { background-color: #000033;
       color: #FFFFFF;
	   background-image: url(sunset.webp);
	   background-position: right;
	   background-repeat: no-repeat;
	   text-align: center;
	   height: 60px;
	   padding-top: 15px;
}
h1 { margin-bottom: 0;
    margin-top: 0;
    font-family: Georgia, "Times New Roman", serif;
	letter-spacing: 5px;
} 
nav { float: left;
     width: 160px;
     font-weight: bold; 
	 padding: 20px;
}
nav ul { list-style-type: none;
       margin: 0;
	   padding-left: 0;
	   font-size: 1.2em;
}
nav a { text-decoration: none; }

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

main { padding: 1px 20px 20px 30px; 
      display: block;
	  background-color: #FFFFFF;
	  margin-left: 190px;
}
h2 { color: #3399CC;
	font-family: Georgia, "Times New Roman", serif;
	text-shadow: 1px 1px 1px #ccc;
}
h3 { color: #000033;
	font-family: Georgia, "Times New Roman", serif;
}
dt { color: #000033; 
}
.resort { color: #5C7FA3; 
          font-weight: bold;
}	
main ul { list-style-image: url(marker.webm);
}   
#contact { font-size: 90%; }

footer { font-size: 75%;
       font-style: italic;
	   font-family: Georgia, "Times New Roman", serif;
	   text-align: center;
	   margin-left: 190px;
	   background-color: #FFFFFF;
	   padding: 20px;
}

#homehero { background-image: url(coasthero.webp);
           height: 300px;
		   background-repeat: no-repeat;
		   background-size: 100% 100%;
		   margin-left: 190px;
}
#yurthero { background-image: url(yurthero.webp);
           height: 300px;
		   background-repeat: no-repeat;
		   background-size: 100% 100%;
		   margin-left: 190px;
}
#trailhero { background-image: url(trailhero.webp);
           height: 300px;
		   background-repeat: no-repeat;
		   background-size: 100% 100%;
		   margin-left: 190px;
}

@media only screen and (max-width: 64em) 
{
    body
    {
        margin: 0;
        background-color: white;
    }
    #wrapper
    {
        min-width: 0;
        width: auto;
        box-shadow: none;
    }
    main
    {
        margin-left: 0;
    }
    nav
    {
        float: none;
        width: auto;
        text-align: center;
        padding: 0.5em;
    }
    nav li
    {
        display: inline;
        padding: 0.25em, 0.75em, 0.25em, 0.75em;
    }
    #homehero, #yurthero, #trailhero
    {
        margin-left: 0;
        height: 200px;
    }
    footer
    {
        margin-left: 0;
    }
}

@media only screen and (max-width: 37.5em)
{
    header
    {
        padding-top: 1em;
    }
    main
    {
        padding: 0.1em, 1em, 0.1em, 1em;
        font-size: 90%
    }
    h1
    {
        font-size: 1.5em;
    }
    nav
    {
        padding: 0;
    }
    nav li
    {
        display: block;
        margin: 0;
        border-bottom: 2px solid black;
    }
    nav a
    {
        display: block;
    }
    #homehero, #yurthero, #trailhero
    {
        background-image: none;
        height: 0;
    }
    #mobile
    {
        display: inline;
    }
    #desktop
    {
        display: none;
    }
}