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




* { box-sizing: border-box; }


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

was within #wrapper { box-shadow: 3px 0px #333333; border: 1px 0px #000033;   }
#wrapper { text-align: left; width: 80%; margin: auto; background-color: #3AA2CF; min-width: 960px ; max-width: 2048px ; box-shadow: 3px 0px #333333; border: 1px 0px #000033; } /* background-image: linear-gradient(to bottom, #3AA2CF, #FFFFFF); } */ 


#homehero { height: 200px; background-image: url("stuart.jpg"); background-size: 15% 100%; background-repeat: no-repeat; margin-left: 190px; }


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


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

.stuart { float: left; padding: 5px; border-radius: 5px; } 

header { background-color:#34474F; color:#FFFFFF;line-height: 60px; text-align: center; padding-top: 15px; color: #FFFFFF; height: 120px; padding-top: 30px; padding-left: 3em; }


nav { font-weight: bold; padding: 1.5em; font-size: 120%; float: left; width: 160px; }


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

nav li { padding: 5px; } 

nav a { text-decoration: none; transition: background-color 3s ease-out; 
}

nav a:link { color: #F4F5FF;  }

nav a:visited { color: #344873; }

nav a:hover { color: #f0f8ff; background-color: #34474f; padding: 4px; border-radius: 10px; }

h2 { color:#3399CC; font-family: Georgia, Times New Roman, serif; text-shadow: 1px 0px #CCCCCC; }


main { padding-top: 1px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; display: block; background-color: #FFFFFF; margin-left: 190px; padding-left: 30px; }


dt { color:#000033; }

.resort { color:#5C7FA3; }

h1 { margin-bottom: 0; font-family: Gerogia, Times New Roman, serif; margin-top: 0; font-size: 3em; letter-spacing: 0.25em; }


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


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

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


.resort { font-weight: bold; }

#contact { font-size: 90%; }

table { border: #3399CC; border-collapse: collapse; }

td, th{ padding: 0.5em; border: 2px 0px #3399CC; }

td { text-align: center; }

.text { text-align: left; }

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



#mobile { display: none; }

#desktop { display: inline; }

label { float: left; display: block; text-align: right; width: 120px; padding: 10px; 
}

input { display: block; margin-bottom: 20px; 
}

textarea { display: block; margin-bottom: 20px; 
}

input[type="submit"] { margin-left: 130px; }

iframe { float: left; padding-left: 20px; 
}

embed { float: right; padding-left: 20px; 
}

#gallery { position: relative; color: black; height: 200px; 
}
    
figure { position: absolute;                    left: 280px;                            text-align: center; opacity: .25; 
}
    
#gallery ul { width: 300px; list-style-type: none; 
}
    
#gallery li { display: inline;                  float: left;  padding: 10px; color: black;
}
    
#gallery img { border-style: none;
}
    
#gallery a { color: #EAEAEA; font-style: italic;     text-decoration: none;
}
    
#gallery span { position: absolute; left: -1000px; transition: opacity 3s ease-in-out;
}
    
#gallery a:hover span { position: absolute; top: 16px;  left: 320px; text-align: center;  opacity: 1;
}




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


@media only screen and (max-width: 37.5em) {
    main { padding-top: 0.1em; padding-bottom: 0.1em; padding-left: 1em; padding-right: 1em; font-size: 90%; }
    h1 { font-size: 2em; }
    nav { padding: 0; }
    nav li { display: block; margin: 0; }
    #homehero, #yurthero, #trailhero { background-image: none; height: 0; }
    #mobile { display: inline; }
    #desktop { display: none; }  
    
    label { float: none; text-align: left; 
    }
    
    input[type="submit"] { margin-left: 0; 
    }
    
    #gallery { display: none; }
    
}