* { box-sizing: border-box;}

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


video { float: right;
        margin: 2em;}

label { float: left;
	    width: 8em; 
	    clear: left;
	    padding-right: 1em;
	    margin-top: 10px; }
input, textarea { margin-bottom: 1em; 
                  display: block;} 
#mySubmit { margin-left: 10em; }

table { margin: auto;
        border: 1px solid #3399cc;
        border-collapse: collapse;
        width: 90%; 
		
}
td, th { padding: 5px;
         border: 1px solid #3399cc;
         text-align: center;
}
text {text-align: left;}
tr:nth-of-type(even) { background-color: #F5FAFC; }

header { 
         background-color: #000033; 
        color: #FFFFFF; 
	   font-family: Georgia, "Times New Roman", serif;
 } 
body     { background-color: #FFFFFF; 
           color: #666666;
           font-family: Arial, Verdana, sans-serif; 
         background-image: url(../images/background.jpg); }
h1       { line-height: 200%;
	   background-image: url(../images/sunset.jpg);
        background-position: right;
		 background-repeat: no-repeat;
		 line-height: 72px; 
		 padding-left: 20px; 
        margin-bottom: 0;
         }

h2       { 
           color: #3399CC; 
	       font-family: Georgia, "Times New Roman", serif;
	    }

h3       { 
           color: #000033; 
	    }

nav      { 
        font-weight: bold;
        float: left;
        width: 160px;
        padding: 20px 5px 0px 20px;
         }
nav a    { text-decoration: none; }
nav a:link { color: #000033; }
nav a:visited { color: #344873; }
nav a:hover { color: #FFFFFF; }
nav ul { list-style-type: none;
		margin: 0;
		padding-left: 0; } 
dt      { color: #000033; 
          font-weight: bold;
        }
.resort { color: #000033;
          font-size: 1.2em; }
main {  display: block; /* for Internet Explorer version 10 and below */
        margin-left: 170px;
             padding-left: 20px;
         padding-right: 20px;
        padding-top: 1px;
         padding-bottom: 1px;
        background-color: #ffffff;
        color: #000000;
} 
footer   { background-color: #FFFFFF;
           margin-left: 170px;
           color: #333333;
		   font-size: .70em;
		   font-style: italic;
           text-align: center;
           padding: 10px;
         }


#wrapper { background-color: #90C7E3;
           min-width: 700px;
           max-width: 1024px;
          margin-left:auto;
          margin-right:auto;
          box-shadow: 5px 5px 5px #1e1e1e;}
#yurthero {height: 300px;
           margin-left: 170px;
           background-image: url(../images/yurt.jpg);
           background-size: 100% 100%;
           background-repeat: no-repeat;  
}
#homehero {height: 300px;
           margin-left: 170px;
           background-image: url(../images/coast.jpg);
           background-size: 100% 100%;
           background-repeat: no-repeat;  
}
#trailhero {height: 300px;
            margin-left: 170px;
           background-image: url(../images/coast.jpg);
           background-size: 100% 100%;
           background-repeat: no-repeat;  
}
header, nav, main, footer { display: block;}
@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: 0.5em;}
    nav li { display: inline-block;}
    nav a { padding: 1em; }
    main { margin-left: 0; font-size: 90%; padding: 1em}
    footer { margin: 0;}
    #homehero {margin-left: 0;}
    #yurthero {margin-left: 0;}
    #trailhero {margin-left: 0;}
}
@media only screen and (max-width: 768px) {
    h1 { height: 100%; font-size: 1.5em; padding-left: 0  }
    nav { padding: 0; }
    nav a { display: block; padding: 0.2em; font-size: 1.3em;
    border-bottom: 1px ridge #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;}
    footer { padding: 0;}
    #homehero { display: none;}
    #yurthero { display: none;}
    #trailhero { display: none;}
    #mobile {display: inline;}
    #desktop {display: none;}
}