:root {
  --mobile-icon: url();
  --first-color: #000000;
  --second-color: #A40C0C;
  --third-color: none;
  --body-font-color: #ffffff;
  --menu-font-color: #ffffff;
  --page-background: #000000;
  --accent-font-color: #225984;
  --hero1-font-color: #ffffff;
  --hero2-font-color: #ffffff;
  --column-icons-color: #225984;
  --button-color: #A40C0C;
  --button-color2: #FF6565;
  --mobile-banner-background: #f37421;
  --footer-font-color: #ffffff;
  --footer-background: #535659;
  --small-button-color1: #3f6891;
  --small-button-color1-hover: #3f6891;
  --mobile_banner_background: #f37421;
  --infobox-background: #0d3454;
  --infobox-text: #ffffff;
  --mainhero-mobile: #225984;
}


html, body {height: 100%}
html {scroll-behavior: smooth}

body {
  position: relative;
  margin: 0px;
  color: var(--body-font-color);
  background: var(--page-background);
  font-family: 'Open Sans', sans-serif;
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
}

/* Fixes accessibility focus outline on chrome */
:link:focus, :visited:focus {position: relative; z-index: 100;}


/* ##### UTILITY HELPERS ##### */

.normal {font-weight: 400}
.semibold {font-weight: 600}
.bold {font-weight: 700}
.xbold {font-weight: 800}
.left {float: left}
.right {float: right}
.nofloat {float: none}
.center {margin: auto}
.centertxt {text-align: center}
.middle {vertical-align: middle}
.hide {display: none}
.grow:hover {transform: scale(1.1); transition: all .2s ease-in-out}
.grow2:hover {transform: scale(1.3); transition: all .2s ease-in-out}
.skew {transform: skew(-11deg);}
.blur {  filter: blur(8px); transition: all .2s ease-in-out}
.white {background: white}
.clear {clear: both}
.flexbreak {flex-basis: 100%;  height: 0}
.flexit {display: flex; flex-wrap: wrap}
.shadow {box-shadow: 0px 15px 20px -9px rgba(0, 0, 0, 0.75)}
.boxshade {box-shadow: inset 0px -103px 100px -39px rgba(0, 0, 0, 0.3)}
.nomobile {display: inline}
.mobileonly {display: none}
.bred {border: 1px solid red}
.bblue {border: 1px solid blue}
.bgreen {border: 1px solid green}
.byellow {border: 1px solid yellow}
.imgfit {width: 100%; height: auto}
#container {flex: 1 0 auto}
.main-copy {font-size: 1.2em}
.link {text-decoration: underline}
.ovhide {overflow: hidden;}


.box {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: flex-start;
}


h1, h2, h3 {font-weight: 500;}


.menu-container {
  clear: both;
  width: 100%;
  position: relative;
  z-index: 100;
}

.labelreq{display:none;}


.header {
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 1000;
  background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
}

.header li {float: left}

.header .menu-icon {display: none}

.header ul {
  margin: 0;
  padding: 0px 50px 0px 0px;
  list-style: none;
  display: block;
  min-height: 90px;
  float: right;
}

.header li a {
  display: block;
  padding: 0px 20px;
  line-height: 60px;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  color: var(--menu-font-color);
  cursor: pointer;
}


.header li.current a {
  background: var(--second-color);
  position: relative;
}

.header li.current a:after {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: calc(100%);
  height: calc(100%);
  border-bottom: solid 6px var(--third-color);
}

.header li a:hover,
.header li.current a:hover,


.header .menu-btn:hover, .menuglow {

  transition: all .5s ease;
  text-shadow:  0 0 10px #ffffff,
                0 0 10px #ffffff,
                0 0 10px #ffffff;
}


.header .menu {
  max-width: 1320px;
  margin: auto;
}


.menu a {  transition: all .5s ease;}

.header .menu-icon {
  cursor: pointer;
  display: none;
  float: left;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: var(--menu-font-color);
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 25px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: var(--menu-font-color);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {top: 8px;}
.header .menu-icon .navicon:after {top: -8px;}
.header .menu-btn {display: none;}
.header .menu-btn:checked~.menu {max-height: 100vh;}
.header .menu-btn:checked~.menu-icon .navicon {background: transparent;}
.header .menu-btn:checked~.menu-icon .navicon:before {transform: rotate(-45deg);}
.header .menu-btn:checked~.menu-icon .navicon:after {transform: rotate(45deg);}
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {top: 0;}


.menu-logo {
 float: left;
 padding: 20px 0px 0px 50px
}

.menu-logo img {width:200px; height:78px}


a:link {
  color: var(--body-font-color);

}

a:visited {
  color: var(--body-font-color);
}

a:hover {
  color: var(--link-hover-font-color);
  transition: all .2s ease-in-out;
}

a:active {
  color: var(--body-font-color);
}

a.nounderline:link {
  text-decoration: none;
}

a.nounderline:hover {
  text-decoration: underline;
}



.bt {background: var(--button-color);}
.bt2 {background: var(--button-color2);}

.bt, .bt2 {
font-size: 20px;
padding:  10px 24px;
border-radius: 40px;
font-weight: 600;
text-decoration: none;
display: inline-block;
  transition: all .5s ease;
}

.bt:hover , .bt2:hover {
  text-decoration: none; 
  color: white;
  transition: all .5s ease;
  text-shadow:  0 0 10px #ffffff,
                0 0 10px #ffffff,
                0 0 10px #ffffff;
} 


.bookstyle:first-letter{
    font-size:300%;
    float:left;
    padding-right:10px;
    line-height: 48px;
}




#hero-main {
  margin-top: 0px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}


#hero-main h2 {line-height: 1.4em;}
#hero-main-left {float:left; width:715px;}
#hero-main-right {float:right; position: relative; width:500px;}



.hero-title {font-size: 2em; font-weight: 600; line-height: 1.5em;}
.hero-copy {font-size: 1.2em; font-weight: 600; line-height: 1.5em;}



.iframe-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vw;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}


.iframe-wrapper iframe {

position:absolute;
top:0;
left:0;
width:100%;
height:100%;
transform: translate(0%, -22%);
}


#hero-box {
  position: absolute; 
  z-index: 100;
  left:65%; 
  margin-top: 150px;
  max-width: 300px;
  background: rgba(0,0,0,0.45);
  padding: 35px;
  border-radius: 30px;
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 30px rgb(255 255 255 / 50%), 0 7px 10px -6px black;
}


.stage {width:1000px;}

.theaterbox {position: relative; float: left;}

.copybox {
  width:660px; 
  position: relative; 
  line-height: 1.5em;
}

.copybox h1 {font-weight: 500; line-height: 1em;}

.submit2 {padding: 30px 0px 0px 15px; }


#sponsorblock {
  margin: auto;
  max-width: 1002px;
  padding-bottom: 100px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;

}

.sponsor {margin: 20px 40px;}
.sponsor_title {flex-basis: 100%; text-align: center; padding:120px 0 30px 0px; font-weight: 600}
.sponsor img {max-width: 170px; max-height: 100px; border:0px;}


#footer {
  position: relative; 
  background:#450000; 
  color:white; 
  padding-bottom: 30px;
}


.socialicons img {width: 35px;}

.footer_copyright {font-size: .8em; padding: 50px 0px 20px 0px}

.footer_logo  {width:182px; height:71px; padding: 30px 0px 50px 0px;}



#videodivider {

    position: absolute;
    width: 100%;
    z-index: 5;
    top: 50vw; 
    line-height: 0;
  }


#menudivider {

    position: absolute;
    width: 100%;
    z-index: 5;
    top: 100px; 
    line-height: 0;
  }


#whiteblock {
  position: relative; 
  background:white; 
  color:black; 
  padding-bottom: 50px;
}


#redblock {
  position: relative; 
  background:#361F1F; 
  color:white; 
  padding-bottom: 50px;
}


#datebox {display: none;}


.logoresize {
  width: 150px !important; 
  height: 59px !important; 
  transition: all 0.5s ease;}


.fixedheader {
    background: url(../images/headerdivider.svg);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100vw 150px;
    padding-bottom: 25px;
  }


.socialicons img {transition: all 0.5s ease;}

.separator {
  min-width:100%; 
  max-height:100px;
}


/* ##################### MOBILE  #####################  */



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

  .nomobile {display: none;}
  .mobileonly {display: block;}
  .main-copy {font-size: 16px;}
  .menu-container {box-shadow: none;  }
  .top-container {padding: 0px;}


  .menu-logo {float: left; padding: 15px 0px 0px 20px}
  .menu-logo img {width:150px; height: 59px}

  .header ul {
    box-shadow: none;
    background: rgb(0 0 0 / 60%);
    min-height: 0px;
    overflow: hidden;

  }

  .header li {float: none !important;}
  .header li a {padding: 0px 0px 0px 22px;}
  .header li:first-child {margin-top: 20px;}
  .header li:last-child {margin-bottom: 100vh;}

  .header li:hover,   .header li:focus,   .header li:active  {background: rgb(255 255 255 / 30%);}


  .header li.current a {border-bottom: 0px; position: relative;}
  .header li.current a:after {display: none;}

  .header .menu {
    clear: both;
    max-height: 0;
    float: none;
    padding-right: 0px;
  }

  .header .menu-icon {
    display: inline-block;
    padding: 25px 20px;
    float: right;
  }

  .mainhero {background: var(--first-color);}
  .mainhero img {position: relative; float: left;}

  .header .menu-icon .navicon,
  .header .menu-icon .navicon:before,
  .header .menu-icon .navicon:after {
    background: var(--menu-font-color)
  }


  #hero-box {display: none;}

  #datebox {display: block;}


  .iframe-wrapper {width: 200%; height: 143vw;}
  .iframe-wrapper iframe {transform: translate(-23%, -20%);}

  #hero-box {left: 0; margin-top: 162px; padding: 25px; backdrop-filter: blur(2px); margin-left: auto; margin-right: auto;}
  .stage {width:100%;}  
  .copybox, .filmbox {margin: 20px; width:initial; float: none;}
  .theaterbox {float: none; text-align: center;}
  .filmbox {margin-top: 75px;}
  #videodivider {top:40%;}
  h1, h2 {text-align: center;}
  .submit2 {padding: 30px 0px 0px 0px; width:100%; text-align: center;}
  .grandopening {font-size: 24px;}
  #datebox {padding-bottom: 30px;}

.fixedheader {
    background: url(../images/headerdivider.svg);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 25px;
  }

.logoresize {
  width: 100px !important; 
  height: 39px !important;
  transition: all 0.5s ease;}

#sponsorblock {flex-direction: column; align-items: center; padding: 0px;}
.sponsor {padding:50px 0px; margin: 0px;}
.separator {height: 20px;}

}









@media only screen and (max-width: 320px) {
 .bt, .bt2 {font-size: 14px;}
}



  @media only screen and (min-width: 1281px) {
  }

  @media only screen and (max-width: 500px) {
  }

  @media only screen and (max-width: 1080px) {
  }

}