*   { 
       box-sizing: border-box; 
     }

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

header
     {
       background-color:#40407A;
       background-image:url(sunrise.jpg);
       background-size:100% 100%;
       color:#ffffff;
       line-height:150px;
       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
     {
       background-color:#ffffff;
       margin:0;
       text-align:right;
       font-weight:bold;
       padding-top:0.5em;
       padding-bottom:1em;
       padding-right:0;
       position:fixed;
       top:0;
       left:0;
       z-index:9999;
       width:100%;
       height:auto;

     }

nav ul
     {
       text-decoration:none;
       list-style-type:none;
       margin:0;
       padding-right:2.5em;
       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;

     }





li
     {
       text-size:90%;
       
     }

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

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

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

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

     }

h2
     {
       margin:0;
     }



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

section

    {
        padding-left: 0.5em;
        padding-right: 0.5em;
    }

#flow
 
{
    display:block;
}

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

    }
    
    
}

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