* { box-sizing: border-box; }
body { background-color: #40407A;
       color: #40407A;
	   margin: 0;
	   font-family: Verdana, Arial, sans-serif; 
}
#wrapper { background-color: #F5F5F5;
		   padding: 2em; 
}
header { background-color: #40407A;
         color: #FFFFFF;
		 background-image: url(sunrise.jpg);
		 background-size: 100% 100%; 
		 margin-top: 50px;
		 font-size: 90%;
		 min-height: 200px;
}
header a         { text-decoration: none; }
header a:link    { color: #FFFFFF; }
header a:visited { color: #FFFFFF; }
header a:hover   { color: #EDF5F5; }
h2     { margin: 0; }
nav    { position: fixed;
         top: 0;
		 left: 0;
		 z-index: 9999;
		 text-align: right;
         background-color: #FFFFFF;
		 margin: 0;
		 padding-top: 0.5em;
		 padding-bottom: 1em;
		 padding-right: 0;
         font-weight: bold; 
		 width: 100%;
		 height: auto;
}

nav ul { list-style-type: none; 
         margin: 0;
		 padding-right: 2em;
		 font-size: 1.2em; 
}
nav li { display: inline; 
         padding-left: 4em; 
}
nav a         { text-decoration: none; }
nav a:link    { color: #3F2860; }
nav a:visited { color: #497777; }
nav a:hover   { color: #A26100; }
footer { font-size: small;
		 font-style: italic;
		 text-align: center;
		 clear: right;
}
li, dd { font-size: 90%; }
.home { height: 20vh;
        padding-top: 2em;
		padding-left: 10%;
}
.content { height: 20vh;
           padding-top: 2em;
		   padding-left: 10%;
}
#mathero { height: 300px;
           background-image: url(yogamat.jpg);
           background-size: 100% 100%;
		   background-repeat: no-repeat;
		   display: none;
}
#loungehero { height: 300px;
           background-image: url(yogalounge.jpg);
           background-size: 100% 100%;
		   background-repeat: no-repeat;
		   display: none;
}
section {
	padding-left: .5em;
	padding-right: .5em;
}
#flow {
	display: block;
}

@media (min-width: 600px) {
	nav ul {
		display: flex;
		justify-content: flex-end;
		flex-wrap: nowrap;
		flex-direction: row;
	}
	section {
		padding-left: 2em;
		padding-right: 2em;
		flex: 1;
	}
	#mathero {
		display: block;
		margin-bottom: 1em;
	}
	#loungehero {
		display: block;
		margin-bottom: 1em;
	}
	#flow {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
}

@media (min-width: 1024px) {
	header {
		font-size: 120%;
	}
	.home {
		height: 50vh;
		padding-top: 5em;
		padding-left: 8em;
	}
	.content {
		height: 30vh;
		padding-top: 2em;
		padding-left: 8em;
	}
	#wrapper {
		margin-left: auto;
		margin-right: auto;
		width: 80%;
	}
}