/* This stylesheet was made specifically for the othtc.com homepage.  There is a separate stylesheet for the menu styles. Some styles could be reused for other pages, but so far I have used the convention that any styles specific to other pages (not in globalstyle) are just in the head section of that page. */

/* The container for the large image at the top of the page is positioned as "relative" so that the image text can be positioned "absolute", which means relative to the image container. The text position is defined using %, and the font-size is defined using vw, to make everything scale nicely with the screen size. 4vw means 4% of the viewport, where in this case the viewport is basically the same as the image.*/

.image-container {
   position: relative;
   width:100%;
}
.image-text {
   box-sizing: border-box;
   position: absolute;
   bottom: 10%;
   left: 5%;
   width: 70%;
   padding: 5px;
   font-family: Arial;
   font-size: 4vw;
   color: white;
   text-align: left;
   z-index:5;
 }

/* Here "fixedspace" is different from the "whitespace" defined in the */ 
.fixedspace {
  box-sizing:border-box;
  max-width:1000px;
  margin:auto;
  font-family:"Century Gothic", Verdana, sans-serif;
  color: white;
  padding:10px 30px 30px;
}

.fixedspace a {
  text-decoration:none; 
  font-weight:bold; 
  color:white;
}
 
.fixedspace a:hover {
  text-decoration: underline;
}

.bottom-border {border-bottom: 1px solid DarkGrey;}

 
.whitespace .big-heading {
  text-align: center;
  color: #595959;
  font-family: Garamond, Times, serif;
  font-size: 40px;
}

.whitespace .big-heading2 {
  color: #595959;
}  

.event-date {
  color: #595959;
  font-size:28px;
  margin:18px 0;
}

.event-name, .event-time-1, .event-time-2 {
  font-size: 24px;
  margin:14px 0;
}

.event-location-1, .event-location-2 {
  color: #595959;
  font-size:18px;
  margin:0 0 10px;
}

.event-time-2, .event-location-2 {display: none;}
.panel {
  color: #595959;
  font-size:18px;
  width:100%;
  max-height: 90px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(black 70%, transparent);
  mask-image: linear-gradient(black 70%, transparent);
  transition: max-height 0.2s ease out;   
}
.panel p:first-child {
  margin-top:0;
}

.accordion {
  background-color: white;
  color:#595959; 
  cursor: pointer;
  padding:10px;
  border: none;
  outline:none;
  font-size: 15px;
  transition: 0.4s;  
}
.accordion:after {
  content: '\002B Show More';
  color: #595959; 
  float: left;
  margin-left: 5px;
}

.active:after {content: "\2212 Show Less";}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {width: 100%;}
 /* .panel {max-height:0;} */
 .event-date {margin:0;}
 .event-name {margin-top:0;}
 .event-time-1, .event-location-1 {display: none;}
 .event-time-2, .event-location-2 {display: block;}
   }