* { 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;
}	

#flow { display: block;

}

@media screen and (min-width: 600px){
/* Styles applied when the viewport width is 600px or wider */
nav ul { list-style-type: none; 
         margin: 0;
		 padding-right: 2em;
		 font-size: 1.2em;
         display: flex; 
	     flex-direction: row; 
	     flex-wrap: nowrap;
	     justify-content: flex-end;
 }
 #mathero { height: 300px;
             background-image: url(yogamat.jpg);
             background-size: 100% 100%;
		     background-repeat: no-repeat;
             display: block;
             margin-bottom: 1em;
}
#loungehero { height: 300px;
           background-image: url(yogalounge.jpg);
           background-size: 100% 100%;
		   background-repeat: no-repeat;
           display: block;
           margin-bottom: 1em;

}
#flow { display: block; display: flex; 
	     flex-direction: row; 
	     flex-wrap: wrap;
}
}
@media screen and (min-width: 1024px){
/* Styles applied when the viewport width is 1024px or wider */
header { background-color: #40407A;
         color: #FFFFFF;
		 background-image: url(sunrise.jpg);
		 background-size: 100% 100%; 
		 margin-top: 50px;
         font-size: 120%;
         min-height: 200px;
}
 .home { height: 50vh;
        padding-top: 5em;
		padding-left: 8em;
}
.content { height: 30vh;
           padding-top: 2em;
		   padding-left: 8em;
}
#wrapper { background-color: #F5F5F5;
		   padding: 2em;
           margin: auto;
           width: 80%;
}
}