/* General reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, index.htmldd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, title {
	margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  100% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}



/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

/* DRD styles */

/* global */
body {font-family: neue-haas-grotesk-display, sans-serif;  font-weight: 300; font-style: normal; font-size: 18px; background-color:#000; width: 100%; color: #ccc; text-align: center;}
h1 {text-align: center;}
h2, h3 {font-size:24px; text-align: center; font-style: normal; padding:10px 20px;}
h4 {font-size:14px; text-align: center; font-style: normal; padding:5px; font-weight: 700;}
h5 {font-size:18px; text-align: center; font-style: normal; padding:5px;}

h2 span {font-size:20px; font-weight: 800;}
h5 span {font-size:20px; font-weight: 800;}

b {font-weight: 700;}
i {font-style: italic;}

/* top nav */
div.header {color:#b53f53; position: fixed; top: 0; text-align: right; width:100%; border-bottom:1px solid #b53f53; background-color: #000; height:60px; background-color: #000; z-index: 200;}
div.header img {height:40px; position: absolute; top: 10px; left: 10px; opacity: .8; transition: 0.8s;}
div.header img:hover {opacity: 1;}

.topnav { overflow: hidden; background-color: #000; font-weight:800; display: inline-block;}
.topnav a { display: inline-block; color: #b53f53; text-align: center; padding: 20px 15px; text-decoration: none; font-size: 17px; }
.topnav a:hover { color: #fff; }
.topnav .icon { display: none; }

span.links {display: inline-block; padding:20px 20px 0 0; font-weight: 800;}
span.links a {display: inline-block; padding-right: 20px; color:#b53f53; text-decoration: none; transition: 0.5s;}
span.links a:hover {color:#fff;}
span.links b {font-weight: 400;}
span.links-mobile {display:none;}


/*
div.topnav {position: absolute; width:100%; top:60px; height:0; overflow:hidden;}
div.topnav li {display: block; background-color: #000; padding: 10px 20px 10px 0; border-bottom: 2px solid #b53f53; text-align: right;}
div.topnav li a {color: #b53f53; text-decoration: none; font-weight: 800;}
*/

/* page elemants */
div.content {padding-top:80px; z-index: 100;}
div.section {padding-bottom: 80px;}
a.drd-button {display:inline-block; padding:10px 20px; margin:0 auto; background-color: #b01e3f; margin-top: 10px; font-weight: 700; color:#fff; text-decoration: none; transition: 0.8s;}
a.drd-button:hover {color: #b01e3f; background-color: #fff;}
div.footer {color:#b53f53; padding:10px; position: fixed; bottom: 0; text-align: center; width:100%; border-top:1px solid #b53f53; background-color: #000;}
div.footer span {display: inline-block; width:30%; text-align: center;}
div.footer span a {color:#fff; text-decoration: none; transition: 0.5s;}
div.footer span a:hover {color:#b53f53;}

/* home page */

.home h1 img {width: 20%;}
.home h3 img {width: 30%; opacity: .8; transition: 0.8s;}
.home h3 img:hover {opacity: 1;}

/* door page */

.door h3 img {width: 30%; opacity: .8; transition: 0.8s;}

div.door h2 {font-size:24px; text-align: right; font-style: normal; padding:0 20px 10px 20px; width: 30%; margin:0 auto;}
div.door h3 {padding-bottom:0; margin-top:0;}
.door h3 img {width: 30%; opacity: 1;}
div.door h2 {font-size:24px; text-align: right; font-style: normal; padding:0 20px 10px 20px; width: 30%; margin:0 auto;}
div.door .credit {text-align: right; margin:0 auto; width:30%;}

div.photos {width:43vw; height:23vw; margin:0 auto; overflow: visible; position:relative; z-index: -1;}
div.photos img {width: 43vw; position: absolute; top: 0; left:0;}
img.photo1, img.photo3, img.photo4 {opacity:1;}
img.photo1 {}

h4.ticket {margin:10px; padding-top:5px;}

div.quote {width:40%; float:right; font-size: 24px; line-height: 30px; margin: 0 0 0 10px; text-align: left; padding:10px 0; font-weight: 600; border-left: 1px solid #fff; padding-left: 10px;}
div.quote i {font-style: italic; font-weight: 700;}

div.description {width:30%; font-size: 20px; line-height: 30px; margin: 0 auto; text-align: left; padding:10px 0;}
div.description i {font-style: italic; font-weight: 700;}

div.location {width:30%; margin:10px auto; font-size: 20px; text-align: left;}
div.location b {font-size: 16px; font-weight: 700;}
div.location .venue {width:29vw; height:5vw; overflow: visible; position:relative; z-index: -1;}
div.location img {width: 100%;}
div.location div.address {float: left;}
div.location a.drd-button {margin-top: 5px; margin-left: 10px; padding:5px 10px;}

div.door .castcrew {width:30%; margin:0 auto; text-align: left;}
.castcrew table {width:100%; margin-bottom: 20px;}
.castcrew b {font-weight: 700;}
.castcrew b.header {font-weight: 700; display: block; text-align: center; margin: 5px 0; background-color: #ccc; color: #000; font-size: 14px;}
.castcrew td {width: 50%; padding:5px; padding-left:10px;}
.castcrew td b {display: block; text-align: right;}
.castcrew td b small {font-size: 16px; font-weight: 500; display: inline-block;}

/* about page */

.about h3 img {width: 100%;}
h3.logo-container {width: 10%; height:18vw; background-color: #000; padding-top:20vw; margin: 0 auto;}
.about div.photos {height:0vw;}

/* animations */

div.home h2 {
  opacity: 0; /* Ensures the element starts hidden */
  animation: fadeIn 6s ease-in forwards; /* Apply the fadeIn animation */}
div.home h3 {
  opacity: 0; /* Ensures the element starts hidden */
  animation: fadeIn 8s ease-in forwards; /* Apply the fadeIn animation */}
div.home h4 {
  opacity: 0; /* Ensures the element starts hidden */
  animation: fadeIn 10s ease-in forwards; /* Apply the fadeIn animation */}
div.home h5 {
  opacity: 0; /* Ensures the element starts hidden */
  animation: fadeIn 12s ease-in forwards; /* Apply the fadeIn animation */}

img.photo1 {
  opacity: 0; /* Ensures the element starts hidden */
  animation: fadeOut .5s ease-in forwards;  /* Apply the fadeIn animation */}
img.photo4 {
  opacity: 0; /* Ensures the element starts hidden */
  animation: fadeOut 1s ease-in forwards; animation-delay: 3s;  /* Apply the fadeIn animation */}
img.photo3 {
  opacity: 0; /* Ensures the element starts hidden */
  animation: fadeOut 1s ease-in forwards; animation-delay: 6s;  /* Apply the fadeIn animation */}

  

  

/* arc divider element */
div.arc-container {overflow: hidden; width:100%; height:30px;} 
.arc {
  --b: 2px; /* the boder thickness */
  --a: 80deg; /* control the progression */
  
  width: 75%;
  aspect-ratio: 1;
  padding: var(--b);
  border-radius: 50%;
  background: #b53f53;
  --_g:/var(--b) var(--b) no-repeat
    radial-gradient(50% 50%,#000 97%,#0000);
  mask: top var(--_g),
    calc(50% + 50%*sin(var(--a))) 
    calc(50% - 50%*cos(var(--a))) var(--_g),
    linear-gradient(#0000 0 0) content-box intersect,
    conic-gradient(#000 var(--a),#0000 0);

}
.arc {rotate:-40deg; margin:0 auto; display: }

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

.home h1 img {width: 30%;}
.home h3 img, .door h3 img, div.door h2, .door h3 img, div.door h2, div.door .credit, div.description, div.location, div.door .castcrew {width: 45%;}
h3.logo-container {width: 15%; height:27vw; background-color: #000; padding-top:20vw; margin: 0 auto;}


div.photos {width:64vw; height:34vw;}
div.photos img {width: 64vw;}
div.location .venue {width:43vw; height:7vw;}





}

@media screen and (max-width: 700px) {
  .topnav a { display: none; }
  .topnav a.icon { float: right; display: block; }
  .topnav .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive {position: relative;}
  .topnav.responsive a {
    display: block;
    background-color: #b53f53; 
    color:#fff;
    text-align: right;
  }
  .topnav.responsive .icon {
    position: relative;
  }
}

@media screen and (max-width: 500px) {
	
.home h1 img {width: 45%;}
.home h3 img, .door h3 img, div.door h2, .door h3 img, div.door h2, div.door .credit, div.description, div.location, div.door .castcrew {width: 67%;}
h3.logo-container {width: 22%; height:36vw;}


div.photos {width:96vw; height:51vw;}
div.photos img {width: 96vw;}
div.location .venue {width:43vw; height:7vw;}

}

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


}

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

}