html {
  width: 100%;
  height: 100%;
}

h1 {
  font-family: lato, sans-serif;
  font-size: 23px;
  font-weight: 400;
  letter-spacing: 2px;
  word-spacing: 6px;
  color: #FFFAE1;
  text-align: left;
}

h2 {
  font-family: lato, sans-serif;
  font-size: 20px;
  font-weight: 400;
  margin: 18px 0 0 0;
  padding: 0;
  color: #26B7F3;
  text-align: left;
}

h2.high {
  color: #01AAF0;
}

p {
  font-family: georgia, "times new roman", serif;
  font-size: 15px;
  color: #3D51B8;
  text-align: left;
  letter-spacing: 0.5px;
}

p.quote {
  text-align: center; 
  font-style: italic; 
  margin-top: 30px;
}

ul {
  color: #FFFAE1;
}

ul p {
  padding: 0;
  margin: 4px 0;
}

a.low {
  color: #00B1D7;
}

a.low:hover {
  color: #39D0F0;
}

a.high {
  color: #6076FF;
}

a.high:hover {
  color: #99A3FE;
}

a {
  text-decoration: none;
}

img {
  border: none;
}

body {
  margin: 0 auto;
  text-align: center;
  padding: 0;
  background: #FFF8DC; 
  width: 100%;
  height: 100%;
}

#wrapper {
  background: url(images/gradation.png) repeat-x center top; 
  width: 100%; 
  height: 100%;
  min-height: 600px;
}

#center, #header {
  position: relative;
  width: 960px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  text-align: center;
}

#header {
  overflow: hidden;
}

#first {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 97%;
  background: #FFFAE1;
}

.flourish1 {
  position: absolute;
  left: 1.5%;
  top: 18%;
  width: 58.333333333333333333333333333333%;
  display: block;
  z-index: 20;
}

.flourish2 {
  display: none;
}

#firstbreath {
  position: relative;
  float: left;
  margin-left: 3.8%;
  margin-top: 3.8%;
  width: 84.5%;
  max-width: 408px;
  z-index: 30;
}

#last {
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 97%;
  background: #0122C9;
}

#lastbreath {
  position: relative;
  float: right;
  margin-right: 3.8%;
  margin-top: 3.8%;
  width: 84.5%;
  max-width: 408px;
  z-index: 30;
}

#mother {
  position: relative;
  margin: 0 auto;
  text-align: center;
  width: 960px;
  max-width: 100%;
  height: auto;
}

#motherback {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

#motherchild {
  position: relative;
  margin: 0 auto;
  text-align: center;
  width: 8.125%;
}

#main {
  position: relative;
  clear: both;
  width: auto;
  height: 100%;
  min-height: 400px;
  margin: 0 1.7%;
  text-align: center;
}

div.rightphoto {
  float: right;
  margin: 0 0 20px 20px;
  width: 50%;
  max-width: 200px;
}

div.rightphoto img {
  width: 100%;
}

#navmenu {
  z-index: 40;
  position: absolute;
  right: 0;
  bottom: -22px;
  width: 126%;
}

.toggleMenu {
    display:  none;
    float: right;
    padding: 10px 3px;
}

.nav {
    list-style: none;
     *zoom: 1;
    clear: both;
    width: 100%; 
    padding: 0; 
}

.nav:before,
.nav:after {
    content: " "; 
    display: table; 
}

.nav:after {
    clear: both;
}

.nav li {
    margin: 0;
    padding: 0;
}

.nav li {
    position: relative;
}

.nav > li {
    float: left;
}

.nav li img {
  width: 100%;
}

#home1, #home2, #bio1, #bio2, #psych1, #yoga1, #contact1 {
  display: none;
}

li.home {
  width: 15.3%;
}

li.home img {
  max-width: 85px;
}

li.spacer1 {
  width: 10%;
  padding: 1px 0;
}

li.bio {
  width: 11.7%;
}

li.bio img {
  max-width: 64px;
}

li.spacer2 {
  display: none;
}

li.psych {
  width: 30.6%;
}

li.psych img {
  max-width: 168px;
}

li.yoga {
  width: 13.5%;
}

li.yoga img {
  max-width: 76px;
}

li.contact {
  width: 18.45%;
}

li.contact img {
  max-width: 101px;
}

.nav > li > a {
    display: block;
}

#footer {
  position: relative;
  clear: both;
  bottom: 0;
  width: 100%;
  padding: 14px 0;
}

#footer p {
  font-size: 12px;
  color: #90CCEC;
  text-align: center;
  padding: 0;
  margin: 4px;
}

#footer a {
  color: #90CCEC;
}

#footer a:hover {
  color: #26B7F3;
}

@media screen and (max-width: 799px) {

#navmenu {
  width: 148%;
}

#home2, #bio2 {
  display: block;
}

#home3, #bio3 {
  display: none;
}

li.spacer2 {
  display: block;
  width: 10%;
  padding: 1px 0;
}

li.spacer1 {
  display: none;
}

}

@media screen and (max-width: 539px) {

#header {
  z-index: 10;
}

#mother {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 50;
}

#motherback {
  position: relative;
  margin-left: -580px;
  width: 960px;
}

#motherchild {
  position: absolute;
  left: 50%;
  margin-top: 0;
  margin-left: -204px;
  width: 17.5%;
  max-width: 70px;
  padding: 1.5% 0% 8% 1.5%;
  z-index: 10;
}

#first {
  position: relative;
  float: left;
  width: 100%;
  height: auto;
  background: #FFFAE1 url(images/blueshading.png) no-repeat -550px top;
}

#firstbreath, #lastbreath {
  float: none;
  margin: 8px auto;
  text-align: center;
  padding-left: 70px;
  width: 74.5%;
  max-width: 298px;
  z-index: 80;
}

#firstbreath {
  margin: 8px auto 4px auto;
}

#last {
  position: relative;
  clear: both;
  float: left;
  width: 100%;
  height: auto;
  background: #0122C9 url(images/blueshading.png) no-repeat -450px top;
}

.flourish2 {
  position: absolute;
  left: 50%;
  top: 0;
  margin-top: 77px;
  margin-left: -200px;
  padding: 0;
  width: 60%;
  max-width: 240px;
  display: block;
  z-index: 60;
}
    
.flourish1 {
  display: none;
}

#main {
  padding-top: 4px;
  margin: 0 6%;
}

#navmenu {
  position: relative;
  clear: both;
  width: 100%;
  right: 0;
  bottom: 0;
  margin: 0 8% 0 0;
  padding: 0;
  z-index: 90;
}

.active {
  display: block;
}

.toggleMenu {
  margin: 0 1.5% 0;
  width: 100%;
}

.toggleMenu img {
  position: relative;
  margin: 0 auto;
  padding-left: 360px;
  width: 100%;
  max-width: 26px;
}

.nav {
  width: 100%;
  margin: 0;
  padding: 0;
  background: #0122C9 url(images/blueshading.png) no-repeat -450px top;
}

.nav > li {
  float: none;
  clear: both;
  width: 100%;
  margin: 0;
  padding: 0;
  border-top: 2px solid #6598F0;
}

li img {
  width: auto;
}

li.spacer1, li.spacer2 {
  display: none;
}

li.contact {
  border-bottom: 2px solid #6598F0;
}

#home1, #bio1, #psych1, #yoga1, #contact1 {
  display: block;
}

#home2, #home3, #bio2, #bio3, #psych2, #yoga2, #contact2 {
  display: none;
}

}

@media screen and (max-width: 420px) {

#motherback {
  top: 0;
  width: 235%;
  margin-left: -150%;
}

#motherchild {
  left: 0;
  margin-left: 0;
}

#firstbreath, #lastbreath {
  position: relative;
  float: right;
  margin: 2.1% 3%;
  max-width: 402px;
}

.flourish2 {
  left: 0;
  top: 38.5%;
  margin-top: 0;
  margin-left: 1.5%;
  padding: 0;
}

.toggleMenu {
  width: 8%;
}

.toggleMenu img {
  padding: 0;
}

div.rightphoto {
  float: none;
  width: 100%;
  margin: 0 auto 20px auto;
  text-align: center;
}

div.rightphoto img {
  margin: 0 auto;
  text-align: center;
}

p.mobclear {
  clear: both;
}

}