body {
  background: #ffffff;
  font-family: "mr-eaves-modern","Garamond",sans-serif;
  color: #fff;
  font-size: 12pt;
  background-image: url('bgsmall.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-position: top;
}


body::-webkit-scrollbar, .scroll::-webkit-scrollbar {
    width: 0.5em;
    background-color: #fff;
}
 
body::-webkit-scrollbar-thumb, .scroll::-webkit-scrollbar {
  background-color: #af81b0;
}

p, p a {
	color: #666;
	font-size: 1.2rem;
	margin: 0;
}


#title img {
  max-width: 60%;
  margin: 0 auto;
  display: block;
}


#container {
	width: 100%;
	margin: auto;
}



/* *************** TOGGLE MENU *************** */
#toggle {
 display: block;
    position: fixed;
    top: 2rem;
    left: 2rem;
    width: 28px;
    padding: 1rem;
    z-index: 9999;
 
}

#toggle span:after,
#toggle span:before {
  content: "";
  position: absolute;
  left: 0;
  top: -9px;
}
#toggle span:after{
  top: 9px;
}
#toggle span {
  position: relative;
  display: block;
}

#toggle span,
#toggle span:after,
#toggle span:before {
  width: 100%;
  height: 5px;
  background-color: #fff;
  transition: all 0.3s;
  backface-visibility: hidden;
}

/* on activation */
#toggle.on span {
  background-color: transparent;
}
#toggle.on span:before {
  transform: rotate(45deg) translate(5px, 5px);
}
#toggle.on span:after {
  transform: rotate(-45deg) translate(7px, -8px);
}
#toggle.on + #menu {
  opacity: 1;
  visibility: visible;
}


/* menu appearance*/
#menu {
  position: fixed;
  left: 3rem;
  right: 3rem;
  bottom: 2rem;
  color: #666;
  margin: auto;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s;
  font-size: 3rem;
}

#menu:after {
  position: absolute;
  top: -15px;
  left: 95px;
  content: "";
  display: block;
}

ul, li, li a {
  list-style: none;
  display: block;
  margin: 0;
  padding: 0;
}

li { padding: 15px; }

li a {
  background: white;
  padding: 25px;
  color: #888;
  text-decoration: none;
  transition: all .2s;  
}

li a:hover,
li a:focus {
  background: #af81b0;
  color: #000;
  }


/* *************** TOGGLE MENU END *************** */


/* *************** MODAL *************** */

.modal {
  /* display: none; */
  position: absolute;
  max-width: 100%;
  right: 0;
  bottom: 4rem;
  transition: opacity .4s;
  color: #666;
  z-index: 1;
  margin: 1rem;
}

.modaladd { display: block; }

.modalremove { display: none; }

.modal img { max-width: 100%; }

.modalcontent {
  padding: 2rem;
  background: #fff;
}

.modalclose {
  font-size: 4rem;
  float: right;
  color: #fff;
  margin-top: -4.5rem;
}



#joanne, #airwaves { width: 90%; }

#ep h1, #ep h1 a, #ep h2 {text-align: right; color: #fff; margin: 0 0 5px 0; text-decoration: none; }

#ep h1 {font-size: 1.7rem; margin-top: 0;}


/* *************** MODAL END *************** */



/*  RESPONSIVE IFRAME */
.iframe {
  position: relative;
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
}


.iframe iframe {
  position: absolute; 
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}


#footer {
  position: fixed;
  left: 2rem;
  bottom: 1rem;
  }


#footer img {
	margin: 0 5px;
	width: 40px;
	height: 40px;
}


/*  DESKTOP */

@media (min-width: 900px) {


body {
  background-image: url('bg.jpg');
}


p, p a {
  font-size: 1.4rem;
}

#title img {
  max-width: 30%;
  left: 3rem;
  position: fixed;
}

/*
#menu {
  top: 5rem;
  bottom: inherit;
  right: inherit; 

}
*/

li a {
  padding: 15px;
}



.modal {
  max-width: 35%; 
  top:inherit;
  right: 0;
  bottom: 0;
  margin: 3rem;
}

#ep .modalcontent { width: 150%; float: right; }

#ep h1 {font-size: 3rem;}


}

#footer img {
	width: 47px;
	height: 47px;

}