@charset "utf-8";


/*Styling for Mobile Devices*/
*{box-sizing: border-box;}
body{
    background-color: #3F2860;
    color: #40407A;
    font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
    margin: 0;
}
#wrapper{
   
    background-color: #F5f5f5;
    padding:2em; 
   
}
header{
    background-color: #40407A;
    background-image: url("images/sunrise.jpg");
   
    background-size: 100% 100%;
    color: #fff;
    font-size: 90%;
    margin-top: 50px;
    min-height: 200px;
    
}
h1 {
  position: relative;
  top: 20px; 
}
header a {text-decoration: none;}
header a:link{color:#FFF;}
header a:visited{color:#FFF;}
header a:hover{color: #EDF5F5;}
/*this is for the home*/
.home{height: 20vh; padding-top:2em; padding-left:10%}
/*this is for the classes and schedule*/
.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; 
   }

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;}
/*Descendant selector - specify an element within the context of it's container (parent) element*/
nav ul li a {
    text-decoration: none; 
}


.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;
}
/*@media 660px*/
@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;}

}