* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body {
  background: #eee;
  min-height: 100vh;
  width:100%;
  display: flex;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
}  
a {color:#fff;}
a:hover {color:#fff;}

.content {background: rgba(255,255,255,1);padding:30px 20px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 25px 20px -20px;}  
.content a {color:#000;text-decoration:underline;}

.content#alice {background: rgba(255,255,255,0.2);background-image: linear-gradient(transparent,transparent, white);padding:30px 20px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 25px 20px -20px;}
 
#navigation {color:#fff;position:absolute;top: 0px; right:50px; z-index:1000;}
#navigation span {font-size:80px;cursor:pointer}
#headline {position:absolute;top: 40px; left:80px; z-index:500;font-family: 'Federo', serif; font-weight:900;text-transform:uppercase;}
#headline h1 a {color:#fff;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);}

h1 {text-transform: uppercase;}
h2, h3 {font-weight: 800; padding:40px 0 5px 0; border-bottom: solid #374776 8px;}
h6 {font-weight:bold;}


h1 a {text-decoration: none;}
h1 a:hover {text-decoration:none;}

h2 a {text-decoration: none;}
h2 a:hover {text-decoration:none;}
.rebekah {color:#fff;} 

.box-green {margin: 30px 0;}
.box-green a {padding:10px; background:#87a479;color:#000;font-weight: 900; text-decoration: none;}
.box-green a:hover {background:#8fac96;color:#fff;}

.box-blue {margin: 30px 0;}
.box-blue a {padding:10px; background:#0a2542;color:#fff;font-weight: 900; text-decoration: none;}
.box-blue a:hover {background:#497896;color:#000;}



.playtitle {background:#324728;color:#fff;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);}
.playtitledates {font-size:1.3em;}


ul.cast {list-style:none;}
.page-title {color:#fff; font-size:5em;font-weight:900;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);}
footer {color:#fff;}
.eapps-instagram-feed-header {display:none;}
.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;font-weight: 900;
  color: #fff;
  display: block;
  transition: 0.3s;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}
.grid {margin-top:200px;overflow:hidden;}

  
    section#copyright {color:#ececec;
padding: 80px 0 80px;overflow:hidden;
background:#000;margin:0;
  display: flex;
  align-items: center;
  justify-content: center; margin-top:0px;
}


ul.breadcrumb {
  padding: 10px 16px;
  list-style: none;
font-size:10px;

background-color: rgba(0,0,0,0.1);
}

/* Display list items side by side */
ul.breadcrumb li {
  display: inline;

}

/* Add a slash symbol (/) before/behind each list item */
ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}

/* Add a color to all links inside the list */
ul.breadcrumb li a {
  color: #000;
  text-decoration: none;
}

/* Add a color on mouse-over */
ul.breadcrumb li a:hover {
  color: #fff;
  text-decoration: underline;
}

p.fixed-bottom {position:relative;top:20px;left:0px;font-weight:300;text-transform:uppercase;font-size:0.8em;}


  #sib-container {margin-left:-30px;}
   #sib-container input:-ms-input-placeholder {
    text-align: left;
    font-family: Helvetica, sans-serif;
    color: #000 !important;
  }

  #sib-container input::placeholder {
    text-align: left;
    font-family: Helvetica, sans-serif;
    color: #000;
  }

  #sib-container textarea::placeholder {
    text-align: left;
    font-family: Helvetica, sans-serif;
    color: #000;
  }

  #sib-container a {
    text-decoration: underline;
    color: #fff;
  } 
  .entry__field input#EMAIL {color:#000;}
  
     .image-gallery {
  display: grid;
  /* grid-template-columns: auto auto auto auto auto; */
  grid-template-columns: repeat(auto-fill, 50px);

  grid-gap: 10px;
}

ul.image-gallery {margin-left:-30px;}


.image-gallery > li {
list-style: none;
  cursor: pointer;
  position: relative;

}

.image-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.image-gallery > li {
  height: 50px;
  cursor: pointer;
  position: relative;
  flex-grow: 1;
}

.image-gallery li img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  border-radius: 5px;
}

.image-gallery::after {
  content: "";
  flex-grow: 999;
} 
  
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }

}

@media (max-width: 960px) {
.content {background: rgba(255,255,255,1);padding:30px 20px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 25px 20px -20px;} 
.content#alice {background: rgba(255,255,255,0.2);background-image: linear-gradient(white,transparent);padding:30px 20px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 25px 20px -20px;}
#navigation {color:#fff;top: 0px; right:2px; z-index:1000;}
#navigation span {font-size:50px;cursor:pointer}
#headline {position:absolute;top: 25px; left:20px; z-index:500;width:60%;}
#headline h1 a {color:#fff;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);}
h1#headline {color:#fff; font-size:0.7em;line-height:0.7; font-family: 'Federo', serif; font-weight:900;text-transform:uppercase;}
h1.page-title {color:#fff; font-size:2.5em;font-weight:900;}
p.fixed-bottom {position:relative;top:20px;left:5px}
#sib-container {margin-left:-15px;}



    .image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, 49%);
  grid-gap: 2px;}
  
  .image-gallery > li {
  height: 250px;
  cursor: pointer;
  position: relative;
  flex-grow: 1;
}


  
.rebekah {color:#fff; font-size:0.8em;width:50%;} 
  
.grid {margin-top:50px;}


}