@charset "utf-8";
/* CSS Document */

/*Selector {declaration property: declaration value;*/
*{box-sizing:border-box;}
body {background-color: #EDF5F5;
    color:#40407A;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif"; margin: 0;}
    
    #wrapper{
        
        background-color: #3F2860;
        padding: 2em;
       }
    header {background-color: #40407A; 
        background-image: url("images/sunrise-1.jpg");
        background-size: 100% 100%;
        color: #fff;
        font-size: 90%;
        margin-top: 50px;
        min-height: 200px;}
header a {text-decoration: none;}
header a:link {color: #fff;}
header a:visited {color:#fff;}
header a:hover {color:#EDF5F5;}

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

    nav {  width: 100%; padding-top: 0.5em; position: fixed; top:0; left: 0; text-align: right; background-color: white; margin: 0; padding-right:0; z-index: 9999;}

    /*Descendant Selector - specify an element within the context of it's container (parent) element*/
    
    nav a {text-decoration: none; display: block;  }
nav a:link {color: #3F2860;}
nav a:visited {color: #497777;}
nav a:hover{color: #A26100;}

nav ul {list-style-type:none; display:flex; flex-wrap: wrap; margin:0; font-size: 1.2em;}
nav li { width: 40%; padding: 0 1em; display:inline;}
    .studio {font-style:italic;}
    section { padding: 0 0.5em;}
    #mathero {background-image: url("images/yogamat.jpg"); background-repeat: no-repeat; height: 300px; background-size: cover; display: none;}
    #loungehero {background-image: url("images/yogalounge.jpg"); background-repeat: no-repeat; height: 300px; background-size: cover; display: none;}

    #mobile {display:inline;}
    #desktop {display:none;}
    footer {background-color: #80CBC4; font-size: .60em; font-style:italic; text-align: center; padding:1em;}

    @media (min-width: 600px) { nav ul {display: flex; flex-wrap:nowrap; justify-content: flex-end;}
    nav li { width:7em; }
    section { padding: 0.2em;}
    #mobile {display:none;}
    #desktop {display:inline;}
    #mathero {display: block; padding-bottom: 1em;}
    #loungehero {display: block; padding-bottom: 1em;}
    #flow {display: flex; flex-direction: row;}



    }

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



    }