*
    {
        box-sizing: border-box;
    }

body
	{
		background-color:#40407A;
		color:#40407a;
		font-family:Verdana, Arial, serif;
		margin:0;
	}

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

header
	{
		background-color:#40407a;
		background-image:url(sunrise.jpg);
		background-size:100% 100%;
        font-size: 90%;
        min-height: 200px;
		color:#ffffff;
        margin-top: 50px;
	}

header a
    {
        text-decoration: none;
    }

header a:link
    {
        color: #ffffff;
    }

header a:visited
    {
        color: #ffffff;
    }

header a:hover
    {
        color: #edf5f5;
    }

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

.content
	{
		height:20vh;
		padding-top:2em;
		padding-left:10%;
	}

nav
	{
		background-color:#ffffff;
		margin:0;
		padding:0.5em 0 1em 0;
		font-weight:bold;
		text-align:right;
        position: fixed;
        top:0;
        left:0;
        z-index:9999;
        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;
    }

h2
	{
		margin:0;
	}

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

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

#mathero
	{
        display: none;
		height:300px;
		background-image:url(yogamat.jpg);
		background-size:100% 100%;
	}

#loungehero
	{
        display: none;
		height:300px;
		background-image:url(yogalounge.jpg);
		background-size:100% 100%;
	}

#flow
    {
        display: block;
    }

footer
	{
		font-size:small;
		font-style:italic;
		text-align:center;
        clear: right;
	}

@media (min-width: 600px)
{
    nav ul
    {
        display: flex;        justify-content: flex-end;
    }
    
    section
    {
        padding-left: 2em;
        padding-right: 2em;
        flex: 1;
    }
    
    #mathero, #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: auto;
        width: 80%;
    }
}