@import url('https://fonts.googleapis.com/css?family=Barlow');

/*headlines*/
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');
@import url('https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz');


html { 
	margin: 0;
	padding: 0;
	background: black;
	position: relative;
    min-height: 100%;
	}
	
body {
 width:100%;
 margin: auto;
 float:center;
  
}

main {
	width:80%;	
	margin: auto;
	border-bottom: 2px solid gray;
	padding: 2px;
	
}

main info {
	width:50%;	
	margin: auto;
	border-bottom: 2px solid gray;
	padding: 2px;
}

main:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

/* Text CSS */
h3 { font-family: Barlow; font-size: 15px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 15.4px; color: white;} 
h2 { font-family: Barlow; font-size: 20px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 15.4px; color: white;} 
p, dl, dt, dd, label { font-family: Barlow; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 15.4px; color: white;} 
 blockquote { font-family: Barlow; font-size: 21px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 30px; color: white;} 
 pre { font-family: Barlow; font-size: 13px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 18.5714px; color: white;}
 small { font-family: Barlow; font-size: 12px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 10px; color: white;} 
 h1 { font-family: Yanone Kaffeesatz; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 26.4px; color: white; }
 a { color:#04765c; font-family: Barlow; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 20px; } 
	/*Show Info Text*/
	li { font-family: Barlow; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 20px; } 
	/*End Show Info CSS*/
 
 /* End Text CSS */

ul {
  list-style: none;
   padding: 0;
}


/*Slider CSS  */

 * {
      box-sizing: border-box;
    }

    .slider {
        width: 90%;
        margin: 50px auto;
    }
	
	@media screen and (max-width: 800px) {
		  .slider {
			  width: 100%;
			}
	}  
	

    .slick-slide {
      margin: 0px 20px;
    }
	
    .slick-slide img {
      max-width: 100%;
	  max-height:100vh;
	  margin:auto;
    }

    .slick-prev:before,
    .slick-next:before {
      color: blue;
    }


    .slick-slide {
      transition: all ease-in-out .5s;
      opacity: .2;
    }
    
    .slick-active {
      opacity: .5;
    }

    .slick-current {
      opacity: 1;
    }
	
/* End Slider CSS */


/*Nav Bar CSS */
.topnav {
    background-color: rgba(80, 80, 80, 0.5);
    overflow: hidden;
	table-layout: auto;
    width: 100%; 
	height: 95px;
}

#phone {
	font-size: 30px;
	padding-right: 10px;
	padding-top: 13px;
	text-align: right;
}


@media screen and (max-width: 1055px) {
#phone {
    display: none;
}

}


@media screen and (max-width: 1055px) {
.topnav {
    background-color: rgba(80, 80, 80, 0.5);
    overflow: hidden;
	table-layout: auto;
    width: 100%; 
	height: auto;
}

}

@media screen and (max-width: 480px) {
.topnav img {	
	width: 75%;
	}
}


@media screen and (max-width: 800px) {
.topnav .icon {	
	position: absolute;
    right: 0;
    top: 0;
	padding-bottom: 77px;
	padding-left: 75px;
	}
}


@media screen and (max-width: 480px) {
.topnav .icon {	
	position: absolute;
    right: 0;
    top: 0;
	padding-bottom: 50px;
	padding-left: 30px;
	padding-right: 25px;
	}
}


@media screen and (max-width: 419px) {
.topnav .icon {	
	position: absolute;
    right: 0;
    top: 0;
	padding-bottom: 30px;
	padding-left: 30px;
	padding-right: 25px;
	}
}

.topnav h1 {
	font-size: 60px;
	padding-top: 7px;
}


/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    text-decoration: none;
    font-size: 17px;
	padding-top: 8px;
	padding-bottom: 14px;
	padding-left: 16px;
	padding-right: 16px;
}



/* Change the color of links on hover */
.topnav a:hover {
    background-color: rgb(255,255,255,.4);
	transition: all 0.4s ease;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

@media screen and (max-width: 1055px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 1055px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

/* End Nav Bar SS */



/*Footer CSS */

.footer {
	position: absolute;
	width: 100%;
	text-align: center;
    width: 100%;
}


#footer-left {
	width: 33%;
	height: 200px;
	display:inline-block;
	vertical-align: middle;	
}

#footer-center {
	width: 33%;
	margin: auto;
	text-align: center;
	vertical-align: middle;
	height: 200px;
	display: inline-block;
	line-height: 0px;
}


#footer-right {
	float: right;
	width: 33%;
	height: 200px;
	display: inline-block;
	vertical-align: middle;	
}


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

 #footer-left, #footer-center {
	 clear: both;
	font-size: 16px;
	display: inline-block;
	float: none;
	width: 100%;
 }
 
  #footer-right {
	 clear: both;
	font-size: 20px;
	display: inline-block;
	float: none;
	width: 100%;
 }
 
 #footer-left a {
	 font-size: 1em;
 }

}



/*End Footer CSS */



/* Home Page */

.nextShows {
	width: 60%;
	margin: auto;
}

@media screen and (max-width: 1000px) {
	.nextShows {
		width: 80%;
		margin: auto;
	}	
}

@media screen and (max-width: 800px) {
	.nextShows {
		width: 100%;
		margin: auto;
	}	
}

#open {
	text-align:center;
	color: green;
	font-size: 40px;
}

@media screen and (max-width: 800px) {
 #open {
	font-size: 32px;
 }
}

@media screen and (max-width: 480px) {
 #open {
	font-size: 24px;
 }
}

#next {
	text-align:center;
	font-size:40px;
	color: yellow;
}

@media screen and (max-width: 800px) {
 #next {
	font-size: 32px;
 }
}

@media screen and (max-width: 480px) {
 #next {
	font-size: 24px;
 }
}

#comingSoon {
	text-align:center;
	font-size:40px;
	color: red;
}

@media screen and (max-width: 800px) {
 #comingSoon {
	font-size: 32px;
 }
}

@media screen and (max-width: 480px) {
 #comingSoon {
	font-size: 24px;
 }
}

.showcard {
  background-color: #4CAF50;
  transition: all 0.2s ease;
  color: black;
  text-align: center;
  display: inline-block;
}
.showcard:hover {
  background-color:#ddd;
  transition: all 0.2s ease;
}

.sectionheader {
	text-align: center;
	color: white;
}

.showcard h1 {
	color: black;
	text-align: left;
	
}

.showcard h1 {
	color: black;
}

.info-box {
	width: 25%;
	float: left;
	display:inline-block;
	text-align: center;
}

#showcard-left {
	//width: 33%;
	//height: 200px;
	display:inline-block;
	vertical-align: middle;	
}

#showcard-center {
	//width: 33%;
	margin: auto;
	//text-align: center;
	vertical-align: middle;
	//height: 200px;
	display: inline-block;
	line-height: 0px;
}


#showcard-right {
	float: right;
	//width: 33%;
	//height: 200px;
	display: inline-block;
	vertical-align: middle;	
}

@media screen and (max-width: 800px) {
	.info-box {
		width: 220px;
		height: 220px;
		margin: 5px;
		display: inline-block;
		margin: auto;
	}
	
}

@media screen and (max-width: 480px) {
	.info-box {
		width: 100%;
		height: 180px;
		display: inline-block;
		border-bottom: solid 1px white;
		vertical-align: center;
		font-size: 1.6em;
	}

}


/* End Home */


/* Show Pages */
	#showPoster {
		max-width:100%;
		max-height:100%;
	}

	dl { width: 100%;}
	dt { float: left; width: 40%; overflow: hidden; white-space: nowrap }
	dd { float: left; width: 40%; overflow: hidden }

	dt:after { content: " ......................................................................................" }

	@media screen and (max-width: 480px) {
	dl { width: 100%;}
	dt { display: inline-block; width: 35%; overflow: hidden; white-space: nowrap }
	dd { display: inline-block; width: 50%; overflow: hidden; }
	dt:after { content: " " }
}
	
	.showInfo {
		width: 500px;
		height: 1650px;
		float: left;
	}
	
	 @media screen and (max-width: 800px) {
 .showInfo {
	width: 100%;
	height: auto;
 }
}

	.showPhotos {
		width: 100%;
		float: center;
		margin-top: 1651px;
	```
	}

		.showPhotos h1 {
		font-size: 40px;
		text-align: center;`
	}


/* Ticket Info */

.buyTickets {
	text-align:center;
	vertical-align: middle;
	width: 500px;
	height: 1650px;
	float: right;
	
}

@media screen and (max-width: 800px) {
	.buyTickets {
		width: 100%;
		height: auto;
	
	}
}

.tickets {
	background-color: rgb(255,255,255,.6);
	width: 100%;
}


.tickets tr:nth-child(even) {
	background-color: rgba(76, 175, 80, .6);
}

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

#ticketsLeft {
	padding-top: 10px;
	border-right: 2px solid;
	padding-right: 5px;
	padding-left: 5px;
}

#ticketsLeft p, h2 {
	line-height: 0.4;
}

#ticketDate {
	background-color: rgb(255,255,255, 0.6);
	border-radius: 10px;
	padding: 2px 10px;
}

#ticketsRight p, h2 {
	line-height: 0.4;
}

#ticketFooter {
	background-color: white;
}

/*End Ticket Info */



	
	/* End Show Pages */
	
	
	
	/* Shows Page */
	
	.showsCard {
		
		width: 100%;
		display: inline-block;
	}
	
	.showsCard img {
		float: left;
		max-height:225px;
		padding-right: 20px;
	}
	
	@media screen and (max-width: 680px) {
	.showsCard img {
		max-width: 100%;
		height: auto;
		display: inline-block;
		margin: auto;
	}
	
	#showsCardInfo {
		width: 100%;
		display: inline-block;
	}
}
	
	.title {
		text-align:center;
	}
	
	/* End Shows Page */
	
	
	/* Collapsible */
	.collapsible {
		 background-color: #777;
 
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
  transition: all 0.2s ease;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}


.collapsibleContent {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #black;
  margin: 5px;
}
	
	/* End Collapsible */
	
	
	/* Crew Styling */
	
	.crewLeft {
		text-align: center;
		float: left;
		width: 40%;
	}
	
	.crewRight {
		text-align: center;
		float: right;
		width: 40%;
	}
	
	.crewRight img {
		max-width:100%;
		background-color:gray;
	}
	
	.crewBottom {
		text-align: center;
		display: inline-block;
		margin: auto;
	}
	/* End Crew Styling */
	
	
	
	/* Misc. Page Styles */
	#mainstageTickets {
		text-align: center;
	}
	
	#barnOwlTickets {
		text-align: center;
	}
	
	#crewPoster {
		max-width: 100%;
		margin: auto;
		display: block;
	}
	
	@media screen and (max-width: 680px) {
		#maps {
		width: 100%;
	}
	}
	
	#aboutList {
		width: 480px;
	}
	
	#advertiseList, #benefitList {
		margin: auto;
		text-align: left;
		font-family: Barlow;
		padding: 15px;
		color: black;
	}
	
	#benefitList {
		margin: auto;
	}
	
	#benefitList td {
		width: 300px;
	}
	
	#benefitList th, td {
		padding: 5px;
	}
	
	#advertiseList th {
		font-weight: 400;
	}
	
	#benefitList th {
		font-weight: 400;
		color: black;
	}

	#advertiseList td {
		padding-left: 15px;
	}
	
	#aboutList dt:after { content: " " }
	
	
	@media screen and (max-width: 600px) {
	#aboutList dd, dt {
		font-size: 12px;
	}
	
	#advertiseList {
		font-size: 12px;
	}
	
	#benefitList {
		font-size: 11px;
	}
	}
	
	@media screen and (max-width: 600px) {
	#application {
		width: 100%;
	}
	}
	
	#mc-embedded-subscribe-form{ 
	font-family: Barlow; 
	clear:left;
	font-size: 14px;
	}
	
	
	
	#mc-embedded-subscribe-form .button {
	background-color: #4CAF50;
    border: none;
    color: black;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 24px;	
	margin-top: 10px;
}
	
	
	/*Hover text*/
	
	/* Tooltip container */
.hoverInfo {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted blue; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.hoverInfo .hoverInfoText {
    visibility: hidden;
    width: 120px;
    background-color: green;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
	font-family: Barlow;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
	width: 300px;
    bottom: 100%;
    left: 50%; 
    margin-left: -150px;
}


	
	#benefits {
	position: absolute;
    z-index: 1;
	width: 300px;
    bottom: 100%;
    left: 100%; 
	}


/* Show the tooltip text when you mouse over the tooltip container */
.hoverInfo:hover .hoverInfoText {
    visibility: visible;
}
	
	.hoverInfo .hoverInfoText::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: green transparent transparent transparent;
}
	

	
	.buySeasonTickets {
		width: 80%;
		margin-bottom: 5px;
		margin: auto;
	}

	
	#seasonTicketsRight p, h2 {
	line-height: 1.0;
}
	
	@media screen and (max-width: 600px)
	{
		#ticketInfoLeft {
			width: 100%;
		}
		
		.buySeasonTickets {
			width: 100%;
		}
		
	}
	
	
	
	
	.fundraiserInfo {
		width: 100%;
		margin-left: 10px;
	}
	
	#fundraiserPoster {
		float: left;
		width: 75%;
	}
	
	#fundraiserPoster img {
	}
	
	@media screen and (max-width: 600px) {
	#fundraiserPoster {
		max-width: 100%;
	}
	}
	

#alertH1 {
	text-align:center;
	color: white;
	font-size: 32px;
	word-wrap: normal
    padding: 10px 0 0 0;
	color: red;

    line-height: 40px;
}
	
    #constructionP {
	text-align:center;
	font-size: 16px;
	line-height: 16px;
}



	@media screen and (max-width: 600px) {
	#crewForm {
		width: 400px;
	}
	}


#birdies {
		max-width: 50%;
		margin: auto;
	}

	@media screen and (max-width: 600px) {
	#birdies {
		max-width: 100%;
	}



	
	/* End Misc. */