*	{
	box-sizing: border-box
	}
Body
	{
	background-color:#40407A;
	color:#404074;
	font-family: Verdana, Arial, sans-serif;
	margin:0;
	}

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:link {
	color:#FFFFFF;
	text-decoration:none;
}

Header a:visited {
	color:#FFFFFF;
	text-decoration:none;
	}

Header a:hover {
	color:#EDF5F5;
	text-decoration:none;
}

Nav 	{
	font-weight:bold;
	text-align:right;
	background-color:#FFFFFF;
	padding:0.5em 0 1em 0;
  	position:fixed;
   	 margin-top: -50px;
   	 margin-left: 0px;
   	 z-index: 9999;
	Width:100%;
	Height:auto;
    
	}

Nav a	{
	text-decoration:none;
	}

nav ul{
    list-style-image: none;
    margin: 0;
    padding-right: 2em;
    font-size: 1.2em;
}
nav li {
    display: inline;
    padding-left: 4em;
}

nav a:link { 
    color:#3f2860;
}

nav a:visited{
    color:#497777;
}

nav a:hover{
    color:#A26100;
}
Footer
	{
	text-align:center;
	font-style: italic;
	font-size:small;
    	clear:right;
	}

Li, dd 	{
	font-size:90%;
	}

#wrapper 
	{
	background-color:#F5F5F5;
	padding:2em;
	}

.home	
	{
	height: 50vh;
	padding:6em 0 0 8em;
        height:20vh;
        padding-top: 2em;
        padding-left:10%;
	}

.content	
	{
	height:250px;
	padding:2em 0 0 10%;
    height:20vh;
	}

#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;
	}

H2 
	{
	margin:0;
	}

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

#flow{
    display: block; 
}


@media screen and (min-width:600px) {
    nav ul{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-end;
    }
    
    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 screen and (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: auto;
        width: 80%;
    }
}