* { 		box-sizing: border-box; }

body {		background-color:#90C7E3;
		color: #666666;
		font-family:Verdana, Arial, sans-serif;
		margin: 0; }

#wrapper {	background-color:#FFFFFF; }

header {	background-color: #002171;
		color: #FFFFFF;
		font-family:Georgia, serif;
		padding: 1em; }

header a {	text-decoration: none;}

header a:link {	color: #FFFFFF; }

header a:visited { color: #FFFFFF; }

header a:hover { color: #90C7E3; }

h1 {		text-align: center;
		font-size: 1.5em;}

h2 {		color: #1976D2;
		font-family: Georgia, serif; }

h3 {		font-family: Georgia, serif;}

nav {		font-size: 1.2em;
		text-align: center;
		background-color:#FFFFFF }

nav a {		text-decoration: none; }

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

nav a:visited { color: #344873; }

nav a:hover { 	color: #A52A2A; }

nav ul {	display:flex;
		flex-direction: column;
		list-style-type: none;
		padding-left: 0em;
		margin: 0; }

nav li {	padding: .5em 1em;
		width: 100%;
		border-bottom: 1px solid #000000; }
		

main{		padding: 0em 1em;
		display:block; }

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

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

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

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

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

section {	padding-left: .5em;
		padding-right: .5em; }

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

#mobile {	display: inline; }

#desktop {	display: none; }

@media (min-width: 600px) {
		
	h1 {		font-size: 2em;
			letter-spacing: .25em; }
	
	nav ul { 	display: flex;
			flex-flow: row nowrap;
			justify-content: space-around;
			padding-right: 2em; }
	
	nav ul li { 	width: 12em;
			border-bottom: none; }
	
	section {	padding-right: 2em;
			padding-left: 2em; }
	
	#flow { 	display: flex;
			flex-direction: row; }

	#mobile { 	display: none; }

	#desktop { 	display: inline; }
	
	#homehero {	background-size: 100% 100%; }
	
	#yurthero {	background-size: 100% 100%; }
	
	#trailhero {	background-size: 100% 100%; }
}

@media (min-width: 1024px) {
	
	body {		background-image: linear-gradient(to bottom, #FFFFFF 20%, #90C7E3 60%, #FFFFFF 100%); }
	
	h1 {		font-size: 2em;
			letter-spacing: .25em; }
	
	nav ul { 	padding-right: 10%;
			padding-left: 10%; }
	
	#wrapper {	margin: auto;
			width: 80%; }
}