/* --- Annie Mondegreen Website Layout 2020 --- */

/* General Settings */

body {
   color:#000;
   background-color:#fff; 
   margin:0;
   padding:0;
   font-weight:normal;
   font-family:'Josefin Sans', sans-serif;
}

img {
   border:none;
}

a {
   outline:0;
}

div#page { 
  margin:0 auto;
  padding:0;
  text-align:center;
  font-weight:normal;
  background-color:#fff;
}



/* Navibox Settings */

div.navi {
  overflow:hidden;
  background-color:#34907B;
}

a.home:link, a.home:visited {
  float:left;
  display:block;
  margin-top:10px;
  line-height:1.5em;
  color:#FFF;
  font-weight:normal;
  padding:0px 35px;
}



/* Content */ 

div#contentwrap {
  overflow:auto;
  clear:both;
  margin:0;
  padding:0; 
  text-align:center;
  margin:0 auto;
  font-weight:normal;
  background-color:#FFF;
}

div.contenta {
  overflow:hidden;
  margin:0;
  text-align:left;
  padding:2%;
  color:#fff;
  background-color:#000;
}

div.contentb {
  margin:0;
  text-align:left;
  padding:2%;
  color:#000;
  background-color:#fff;
}

div.contentc {
  margin:0;
  text-align:left;
  padding:2%;
  color:#fff;
  background-color:#000;
}

div.textblock {
  margin:0 20px 20px 10px;
  text-align:left;
  font-size:1.2em;
  line-height:1.5em;
  font-weight:normal;
}

p.clear {
 clear:both;
}

p.clearbox {
 clear:both;
 margin:0 0 10px 0;
 padding:0;
}

div.center {
  text-align:center;
}

p {
 margin:15px;
}

div.content ul {
 list-style-type:square;
 list-style-position:inside;
 margin:0;
}



/* Image Settings */

img.round {
  border-radius:10px;
}

div.imgleft {
  float:none; 
  text-align:center; 
  margin:0 auto; 
  padding:0 2% 2% 0;
}


img.sizeable {
 max-width:100%;
 height:auto;
}



/* CTA Box */

div.actionboxwrap {
  margin:0 auto;
  text-align:center;
  width:100%;
}

div.actionbox {
  margin:20px auto;
  text-align:left;
  float:none; 
  font-size:1em;
  line-height:1.5em;
  font-weight:normal;
  border:2px solid #000;
  width:85%; 
}

div.actionimg {
  background-color:#000;
  margin:0 auto;
  text-align:center; 
  padding:0; 
  float:none; 
  width:100%;
}

div.actionboxtxt, div.actionboxtxt2 {
  padding:2%;
  margin:0;
}

ul.ep {
 list-style-type:none;
 margin:0 auto;
 text-align:center;
 padding:0;
}

li.ep, li.ep a {
 background-color:#34907B;
 border:none;
 border-radius:25px;
 padding:2px;
 margin:3% auto;
 color:white;
 text-align:center;
 width:80%;
}

span.ep {
 font-family:'Josefin Sans', sans-serif;
}

div.vidleft {
  float:none; 
  text-align:center; 
  margin:0 auto; 
  padding:0 2% 2% 0;
}


/* SignUp Form */

div#newsletterform {
  padding:0px 0px 0px 0px;
  margin:0px;
  display:line;
  float:left;
}

input.required, input.required email {
  display:inline;
  line-height:1.8em;
  padding:0;
  margin:0;
  font-size:0.8em;
  width:90%;
}



/* Headings */

h1.white { 
   font-size:2em;
   text-align:left;
   margin:1% 0 2% 1%;
   color:#fff;
   font-weight:normal;
}

h1.whitea { 
   font-size:2em;
   text-align:center;
   margin:1% 0 2% 1%;
   color:#fff;
   font-weight:normal;
}

h1.black { 
   font-size:2em;
   text-align:center;
   margin:1% 0 2% 1%;
   color:#000;
   font-weight:normal;
}

h2 { 
   font-size:1.5em;
   text-align:left;
   padding:0 20px 20px 1%;
   margin:0;
}

h2.backstage {
   font-size:1.5em;
   text-align:left;
   padding:25px 0 20px 0;
   margin:0px;
}

h3.backstage {
   font-size:1em;
   text-align:left;
   padding:25px 0 20px 0;
   margin:0px;
}

h2.action {
   font-size:1.25em;
   text-align:left;
   margin:20px 0 10px 0;
   padding:0;
   color:#34907B;
}

h2.progress {
   font-size:1em;
   text-align:left;
   margin:20px 0 10px 0;
   padding:0;
   color:#fff;
}



/* Links */

a:link, a:visited { 
   color:#34907B;
   font-weight:bold;
   text-decoration:none; 
}

a:hover, a:focus { 
   color:#34907B;
   font-weight:bold;
   text-decoration:none;  
}



/* Footer */

div#siteinfo {
   position:relative;
   clear:both;
   text-align:center;
   padding:0px;
   background-color:#34907B;
}

div#siteinfo p {
   margin:0px;
   padding:2% 0;
   background-color:#34907B; 
}

div#siteinfo a {
   color:#FFF;
   font-weight:normal;
}

.fa {
  font-size: 20px;
  width: 20px;
  text-align: center;
  text-decoration: none;
  margin: 5px 10px;
  color: white;
}

.fa:hover, div#siteinfo a:hover, li.ep a:hover {
    opacity: 0.7;
}


.disclaimer {
  color: white;
  margin:15px 0 0 25px;
  font-size:0.5em;
  display:block;
}



/* Responsive Videos */

.amvideo {
   position: relative;
   padding-bottom: 56.25%;
   height:0;
   margin:0;
}

.amvideo iframe {
   position: absolute;
   top: 10%;
   left: 10%;
   width: 80%;
   height: 80%;
}



/* Slideshow Landing Page */

.startslides {
  max-width:1000px;
  position:relative;
  margin:0 auto;
}

.slides {
    display:none;
}

.prev, .next {
  cursor:pointer;
  position:absolute;
  top:40%;
  width:auto;
  padding:16px 16px 12px 16px;
  color:white;
  font-weight:bold;
  font-size:18px;
  transition:0.6s ease;
  border-radius:0 3px 3px 0;
  background-color:rgba(0,0,0,0.8);
}

.next {
  right:0;
  border-radius:3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color:rgba(0,0,0,0.8);
}

.slidenumbers {
  color:#717171;
  font-size:12px;
  padding:10px 20px;
  position:absolute;
  top:0;
}

.dots {
  cursor:pointer;
  height:15px;
  width:15px;
  margin:0 2px;
  background-color:#bbb;
  border-radius:50%;
  display:inline-block;
  transition:background-color 0.6s ease;
}

.active, .dots:hover {
  background-color:#717171;
  text-decoration:none;
}

.fade {
  -webkit-animation-name:fade;
  -webkit-animation-duration:1.5s;
  animation-name:fade;
  animation-duration:1.5s;
}

@-webkit-keyframes fade {
  from {opacity:.4}
  to {opacity:1}
}

@keyframes fade {
  from {opacity:.4}
  to {opacity:1}
}



/* Slideshow Parlor Concert */

.parlorslideswrap {
  float:left;
  margin:0 2% 0 0;
  text-align:center;
}

.parlorslides {
  max-width:350px;
  position:relative;
  margin:auto;
  padding:0 0 3% 0;
}

.mySlides {
    display:none;
}

.parlorprev, .parlornext {
  cursor:pointer;
  position:absolute;
  top:45%;
  width:auto;
  margin:0;
  padding:10px 12px 10px 12px;
  color:white;
  font-weight:bold;
  font-size:18px;
  transition:0.6s ease;
  background-color:rgba(0,0,0,0.8);
}

.parlornext {
  right:0;
  border-radius:3px 0 0 3px;
}

.parlorprev {
  left:0;
  border-radius:0 3px 3px 0;
}

.parlorprev:hover, .parlornext:hover {
  background-color:rgba(0,0,0,0.8);
}

.parlornumber {
  color:#FFF;
  font-size:12px;
  padding:10px 20px 0 10px;
  position:absolute;
  top:0;
}

@media screen and (max-width:600px) {
 div.parlorslideswrap {float:none;}
 div.center {margin:0 0 5% 0;}
  }



/* Progress Chasing The Stream */
.checked {
  color: orange;
}



/* Backstage Settings */

div.loginbutton {
  background-color: #ddd;
  border: none;
  color: black;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 16px;
}

div.player {
  margin:0;
  padding:0px 30px 20px 20px;
  width:500px;
  text-align:left;
  font-size:1.4em;
  line-height:1.5em;
  font-weight:normal;
}

button.collapsible {
  background-color: #000;
  color: white;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border:none;
  border-top: 1px solid #FFF;
  border-left: 1px solid #FFF;
  text-align: left;
  outline: none;
  margin:5px;
}

button.active, button.collapsible:hover {
  background-color: #555;
}

div.colcontent {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #000;
}

.vidbackstage {
 float:left;
 margin: 0 15px 0 0;
 }


audio {
  -webkit-transition:all 0.5s linear;
  -moz-transition:all 0.5s linear;
  -o-transition:all 0.5s linear;
  transition:all 0.5s linear;
  -moz-box-shadow: 2px 2px 4px 0px #fff;
  -webkit-box-shadow:  2px 2px 4px 0px #fff;
  box-shadow: 2px 2px 4px 0px #fff;
  -moz-border-radius:7px 7px 7px 7px ;
  -webkit-border-radius:7px 7px 7px 7px ;
  border-radius:7px 7px 7px 7px ;
  width:100%;
  text-align:center;
  margin:0 auto;
} 



/* Musicbox Settings */

ol#musicbox {  
   margin:0 auto;
   padding:0;
   list-style-type:none;
   font-size:13pt;
   height:auto;
   max-width:100%;
   text-align:center;
}

ol li.musicbox {
   text-align:center; 
   float:left;
   clear:right;
   padding:2px;
  margin:0.8% 0.8% 0.8% 0;
   line-height:1.5em;
   background-color:#34907B;
}

ol li.mbfirst {
   text-align:center; 
   float:left;
   clear:right;
   padding:2px;
   margin:0.8% 0.8% 0.8% 0;
   line-height:1.5em;
   background-color:#34907B;
}

ol li.mblast {
   text-align:center; 
   float:left;
   clear:right;
   padding:2px;
   margin:0.8% 0.8% 0.8% 0;
   line-height:1.5em;
   background-color:#34907B;
}

ol li a.musicbox:link, ol li a.musicbox:visited {
   color:#fff;
   text-decoration:none; 
}

ol li a.musicbox:hover {
   color:#000;
   text-decoration:none; 
}



/* Music Box */

* {
  box-sizing: border-box;
}

.container {
  position: relative;
}

.mySlides {
  display: none;
}

.cursor {
  cursor: pointer;
}

.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 14.25%;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}




/* Responsive Settings */

@media screen and (min-width:1000px) {
 div.actionimg {margin:0 10px 0 0; float:left; width:25%;}
 div.actionbox {margin:1%; float:left; width:90%;}
 h2.action {margin:0; padding:15px 0; font-size:1.5em;}
 div.actionboxtxt {padding:20px 20px 0 0;}
 div.actionboxtxt2 {padding:5px 0 0;}
 p.clearbox {margin:0;}
 input.required, input.required email {width:300px;}
 h1.white, h1.black, h1.whitea {font-size:3em;}
 div.icon { position:absolute; top:5px; left:650px;}
 div.imgleft { float:left; margin:0 2% 2% 20px;}
 div.vidleft { float:left; margin:0 2% 2% 20px;}
 div.imgpc { float:right; margin:0 0 2% 20px; width:400px; }
 div.progresswrap { float:none; width:100%; margin:0 10px;}
 div.progresswraptop { margin: 10px 0 10px 450px; max-width:50%;}
 div.vidbackstage { float:none; margin:0 0 15px 0; }
 ul.ep { float:left; width:50%; }
 li.ep { margin: 0 0 20px 0; }
 a.disclaimer { margin: none; display:inline; }
}