@charset "utf-8";
/* CSS Document */
/* Selector {declaration property: declaration value;*/
/*Styling for Mobile Devices - Mobile First Designer*/
* {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;
}

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 page header*/
.home {height: 20vh; padding-top: 2em; padding-left: 10%;}
/*This is for the classes and schedule page header*/
.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 cotainer (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;}

table {width: 60%; border:1px solid #3F2860; border-collapse: collapse; margin-bottom: 1em;}
th, td {padding: 5px; border: 1px solid #3F2860;}
tr:nth-of-type(even) {background-color: #D8E8E9;}
caption {margin: 1em; font-weight: bold; font-size: 120%;}

#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;}
form {display: flex; flex-direction: column; width: 80%; padding-left: 1em;}
input, textarea {margin-bottom: 0.5em;}
audio {display: inline-block; padding-left: 1em;}

.floatleft {float:left; margin-right: 4em; margin-bottom: 1em;}
.clear {clear: both;}

#hero {padding: 1em 0;}



footer {background-color: #80CBC4; font-size: .60cm; font-style:italic; text-align: center; padding:1em;}

/*ANY CODE THAT GOES BELOW THIS LINE MUST Be FOR THE @MEDIA 660px */
@media (min-width: 660px){
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;}
form {display: grid; grid-gap: 1em; grid-template-columns: 12em 1fr;}
label {grid-column: 1 / 2; text-align: right;}
input, textarea {grid-column: 2 / 2;}
#mySubmit {width: 9em; grid-column: 2 / 2;}

}

/*ANY CODE THAT GOES BELOW THIS LINE MUST Be FOR THE @MEDIA 1024px */
@media (min-width: 1024px){
    header {font-size: 120%;}
    .home {height: 50vh; padding-top: 5em; padding-left: 8em;}
    .content {height: 30vp; padding-top: 1em; padding-left: 8em;}
    #wrapper {width: 80%; margin-right: auto; margin-left: auto;}
    
}