*
{
    box-sizing:border-box;
}
body
	{
		background-color:#40407A; color:#40407A;
		font-family:Verdana, Arial, sans-serif;
		margin:0;
	}
header
	{
		background-color:#80CBC4; color:#40407A;
		background-color:#40407A;
		color:#FFFFFF;
		background-image:url(images/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;
}
nav
	{
		text-align:right;
		font-weight:bold;
		background-color:#FFFFFF;
		margin:0;
		padding:.5em 0em 1em 1em;
        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:link
{
    color:#3f2860;
}
nav a:visited
{
    color:#497777;
}
nav a:hover
{
    color:#a26100;
}
#wrapper
	{
		background-color:#F5F5F5;
		padding:2em;
	}
h2
	{
		margin:0;
	}
footer
	{
		font-style:italic;
		text-align:center;
		font-size:small;
        clear:right;
	}
nav a
	{
		text-decoration:none;
	}
.home
	{
		height:20vh;
		padding:2em 8em 6em 10%;
	}
.content
	{
		height:20vh;
		padding-top:2em;
        padding-left:10%;
        padding-right:8em;
	}
#mathero
	{
        display:none;
		height:300px;
		background-image:url(images/yogamat.jpg);
		background-repeat:no-repeat;
		background-size:100% 100%;
	}
#loungehero
	{
        display:none;
		height:300px;
		background-image:url(images/yogalounge.jpg);
		background-repeat:no-repeat;
		background-size:100% 100%;
	}
li,dd
	{
		font-size:90%;
    }
section
    {
        padding-left: .5em;
        padding-right:.5em;
    }
#flow
{
    display:block;
}

@media (min-width: 600px)
{
    nav ul
    {
        display:flex;
        flex-flow: row nowrap;
        justify-content: flex-end;
    }
    section
    {
        padding-right: 2em;
        padding-left: 2em;
        flex:1;
    }
    #mathero
    {
        display:block;
        margin-bottom: 1em;
    }
    #loungehero
    {
        display:block;
        margin-bottom: 1em;
    }
    #flow
    {
        display: flex;
        flex-flow: row 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%;
    }
}