@import "../custom/custom.css";

/* include webfont kit */
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on July 10, 2021 */
@font-face {
  font-family: 'broadwayregular';
  src: url('/webfontkit/broadway-webfont.woff2') format('woff2'),
       url('/webfontkit/broadway-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'carnival_centenaryregular';
  src: url('/webfontkit/carnivalcentenary-92a2-webfont.woff2') format('woff2'),
       url('/webfontkit/carnivalcentenary-92a2-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'hangar_nineregular';
  src: url('/webfontkit/hangarnine-ew1e-webfont.woff2') format('woff2'),
       url('/webfontkit/hangarnine-ew1e-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'moulinrougeflfregular';
  src: url('/webfontkit/moulinrougeflf-alwa-webfont.woff2') format('woff2'),
       url('/webfontkit/moulinrougeflf-alwa-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'r1999regular';
  src: url('/webfontkit/r1999-gwxr-webfont.woff2') format('woff2'),
       url('/webfontkit/r1999-gwxr-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'laconicaregular';
  src: url('/webfontkit/laconicaregular-djv1-webfont.woff2') format('woff2'),
      url('/webfontkit/laconicaregular-djv1-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'showtimenormal';
  src: url('/webfontkit/showtime-r9ke-webfont.woff2') format('woff2'),
      url('/webfontkit/showtime-r9ke-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'emerald_greyregular';
  src: url('/webfontkit/emeraldgrey-dxxw-webfont.woff2') format('woff2'),
      url('/webfontkit/emeraldgrey-dxxw-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'style_thiefregular';
  src: url('/webfontkit/stylethief-mz6w-webfont.woff2') format('woff2'),
      url('/webfontkit/stylethief-mz6w-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'reach_the_endregular';
  src: url('/webfontkit/reachtheend-xmz2-webfont.woff2') format('woff2'),
      url('/webfontkit/reachtheend-xmz2-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'midnight_championregular';
  src: url('/webfontkit/midnightchampion-rjve-webfont.woff2') format('woff2'),
      url('/webfontkit/midnightchampion-rjve-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'inepticregular';
  src: url('/webfontkit/ineptic-vpy7-webfont.woff2') format('woff2'),
      url('/webfontkit/ineptic-vpy7-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'great_attractionregular';
  src: url('/webfontkit/greatattraction-l1jw-webfont.woff2') format('woff2'),
      url('/webfontkit/greatattraction-l1jw-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'joyful_theatreregular';
  src: url('/webfontkit/joyfultheatre-odle-webfont.woff2') format('woff2'),
      url('/webfontkit/joyfultheatre-odle-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'movie_timesregular';
  src: url('/webfontkit/movietimes-pg61-webfont.woff2') format('woff2'),
      url('/webfontkit/movietimes-pg61-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'riemann_theatreregular';
  src: url('/webfontkit/riemanntheatre-gng5-webfont.woff2') format('woff2'),
      url('/webfontkit/riemanntheatre-gng5-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'limelightregular';
  src: url('/webfontkit/limelight-regular-webfont.woff2') format('woff2'),
      url('/webfontkit/limelight-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'montserratthin';
  src: url('/webfontkit/montserrat-variablefont_wght-webfont.woff2') format('woff2'),
       url('/webfontkit/montserrat-variablefont_wght-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'open_sansregular';
  src: url('/webfontkit/opensans-variablefont_wdthwght-webfont.woff2') format('woff2'),
       url('/webfontkit/opensans-variablefont_wdthwght-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

/* hide mouse cursor */


body {
  background-color: black;
  /* color: #daa520; */
  text-align: center;
  min-height: 320;
}

.carousel {
  cursor: pointer;
}

h1 {
  white-space: nowrap;
}

.hidden {
  visibility: hidden;
  height: 0px;
}

#warning {
  background-color: red;
}

.tagLine {
  color: rgb(255, 255, 255);
  /* font-size: 14px; */
  font-style: italic;
  /* margin-bottom: 10px; */
  text-align: center;
  width: 100%;
  /* overflow: hidden;  */
  word-wrap: break-word; 
  white-space: nowrap;
}

.remaining {
  color: rgb(255, 255, 255);
  /* font-size: 14px; */
  /* font-style: italic; */
  /* margin-bottom: 10px; */
  text-align: center;
  width: 100%;
  /* overflow: hidden;  */
  word-wrap: break-word; 
  white-space: nowrap;
}


iframe {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  background-size: cover;
}

.transcode {
  background-color: rgb(190, 70, 70);
}
.direct {
  background-color: rgb(188, 243, 174);
}

.badge-pill {
  margin-left: 2px;
}

.super-res {
  color: white;
}

.banners,
.bottomBanner {
  height: 8%;
  /* padding: 2px; */
}

#myDiv {
  opacity: 1;
  min-height: 100%;
  width:100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 900;
}
.badge-pill {
  margin-left: 2px;
}

.posterArt {
  z-index: 0;
  position: fixed;
  position:fixed;
  width:100%;
  height:100%;
  size: 100% 100%;
  background-position: center middle;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: .5;
  filter: blur(5px);
}

.poster {
  max-width: 100%;
  vertical-align: top;
  color: white;
  vertical-align: top;
  top: 8%;
  position: fixed;
  height: 84%;
  max-height: 84%;
  min-height: 264px;
  width: 100%;
  background-position: 50% 50%;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1000;
}

.fullscreen {
  top: 0% !important;
  height: 100% !important;
  max-height: 100% !important;
  cursor: none;
}

.fullscreenCustom {
  top: 0% !important;
  height: 94% !important;
  max-height: 94% !important;
  top: 3% !important;
  cursor: none;
}

.banners {
  position: relative;
  width: 100%;
  top: 0;
  max-height: 8%;
  z-index: 1000;
}


/* If the screen size is above 3001 */
 @media screen and (min-height: 3001px) {
  .banners {
    padding-top: 0px;
  }

  .progress {
    height: 30px;
  }

  .bannerBigText {
    font-size: 145px;
  }

  .quizText {
    font-size: 105px;
  }

  .bottomBanner {
    font-size: 54px;
    padding-bottom: 0px;
  }
} 

@media screen and (max-height: 3000px) and (min-height:2400px) {
  .banners {
    padding-top: 0px;
  }

  .progress {
    height: 14px;
  }

  .quizText {
    font-size: 85px;
  }

  .bannerBigText {
    font-size: 121px;
  }

  .bottomBanner {
    font-size: 43px;
    padding-bottom: 0px;
  }
}

/* If the screen size is 2399px-1861px high */
@media screen and (max-height: 2399px) and (min-height: 1860px) {
  .banners {
    padding-top: 0px;
  }

  .progress {
    height: 12px;
  }

  .quizText {
    font-size: 80px;
  }

  .bannerBigText {
    font-size: 103px;
  }

  .bottomBanner {
    font-size: 33px;
    padding-bottom: 0px;
  }
}

/* If the screen size is 1859px-1651px high */
@media screen and (max-height: 1859px) and (min-height: 1651px) {
  .banners {
    padding-top: 0px;
  }

  .progress {
    height: 10px;
  }

  .quizText {
    font-size: 65px;
  }

  .bannerBigText {
    font-size: 91px;
  }

  .bottomBanner {
    font-size: 28px;
    padding-bottom: 0px;
  }
}

/* If the screen size is 1650px-1251px high */
@media screen and (max-height: 1650px) and (min-height: 1301px) {
  .banners {
    padding-top: 0px;
  }

  .progress {
    height: 8px;
  }

  .quizText {
    font-size: 50px;
  }

  .bannerBigText {
    font-size: 80px;
  }

  .bottomBanner {
    font-size: 25px;
    padding-bottom: 0px;
  }
}

/* If the screen size is 1250px-851px high */
@media screen and (max-height: 1300px) and (min-height: 1101px) {
  .banners {
    padding-top: 0px;
  }

  .progress {
    height: 4px;
  }

  .quizText {
    font-size: 38px;
  }

  .bannerBigText {
    font-size: 58px;
  }

  .bottomBanner {
    font-size: 19px;
    padding-bottom: 0px;
  }
}

/* If the screen size is 1250px-851px high */
@media screen and (max-height: 1100px) and (min-height: 851px) {
  .banners {
    padding-top: 0px;
  }

  .progress {
    height: 4px;
  }

  .quizText {
    font-size: 32px;
  }

  .bannerBigText {
    font-size: 41px;
  }

  .bottomBanner {
    font-size: 15px;
    padding-bottom: 0px;
  }
}

/* If the screen size is 850px-700px high */
@media screen and (max-height: 850px) and (min-height: 701px) {
  /* .banners {
    padding-top: 5px;
  } */

  .progress {
    height: 5px;
  }
  
  .quizText {
    font-size: 26px;
  }

  .bannerBigText {
    font-size: 30px;
  }

  .bottomBanner {
    font-size: 12px;
    padding-bottom: 10px;
  }
}

/* If the screen size is 700px-650px high */
@media screen and (max-height: 700px) and (min-height: 650px) {
  /* .banners {
    padding-top: 5px;
  } */

  .progress {
    height: 4px;
  }

  .quizText {
    font-size: 22px;
  }

  .bannerBigText {
    font-size: 27px;
  }

  .bottomBanner {
    font-size: 11px;
    padding-bottom: 10px;
  }
}

/* If the screen size is 649px-550px high */
@media screen and (max-height: 649px) and (min-height: 550px) {
  .banners {
    padding-top: 0px;
  }

  .progress {
    height: 3px;
  }

  .quizText {
    font-size: 20px;
  }
  
  .bannerBigText {
    font-size: 25px;
  }

  .bottomBanner {
    font-size: 9px;
    padding-bottom: 0px;
  }
}

/* If the screen size is 549px-450px high */
@media screen and (max-height: 549px) and (min-height: 450px) {
  .banners {
    padding-top: 0px;
  }

  .progress {
    height: 2px;
  }

  .quizText {
    font-size: 17px;
  }

  .bannerBigText {
    font-size: 22px;
  }

  .bottomBanner {
    font-size: 7px;
    padding-bottom: 0px;
  }
}

/* If the screen size is 449px-400px high */
@media screen and (max-height: 449px) and (min-height: 400px) {
  .banners {
    padding-top: 0px;
  }

  .progress {
    height: 1px;
  }

  .bannerBigText {
    font-size: 15px;
  }

  .quizText {
    font-size: 20px;
  }

  .bottomBanner {
    font-size: 7px;
    padding-bottom: 0px;
  }
}

/* If the screen size is 449px-351px high */
@media screen and (max-height: 399px) and (min-height: 351px) {
  .banners {
    padding-top: 0px;
  }

  .progress {
    height: 1px;
  }

  .quizText {
    font-size: 12px;
  }

  .bannerBigText {
    font-size: 17px;
  }

  .bottomBanner {
    font-size: 6px;
    padding-bottom: 0px;
  }
}

/* If the screen size is up to 350px high */
@media screen and (max-height: 350px)  {
  .banners {
    padding-top: 0px;
  }

  .progress {
    height: 1px;
  }

  .bannerBigText {
    font-size: 10px;
  }

  .quizText {
    font-size: 15px;
  }

  .bottomBanner {
    font-size: 5px;
    padding-bottom: 0px;
  }
}

.bannerBigText {
  color: lightgoldenrodyellow;
  vertical-align: middle;
  white-space: nowrap;

  text-align: center;
  /* height: 50px; */
  /* Center vertically */
  position: absolute;
  top: 50%;
  /* margin-top: -25px; half this element's height */
  vertical-align: middle;
  left: 50%;
  /* transform: translateX(-50%); */
  transform: translate(-50%,-50%);
}

.bannerSmallText {
  font-size: 10px;
  margin-left: 5px;
  color: lightgoldenrodyellow;
}

.spacer {
  width: 100%;
  /* height: 45px; */
}

.bottomBanner {
  color: lightgoldenrodyellow;
  background-color: inherit !important;
  bottom: 0;
  position: fixed;
  height: 8%;
  max-height: 8%;
  width: 100%;
  cursor: none;
  z-index: 1000;
}

.vidBanner {
  margin-top: 15px;
  width: 75%;
  color: lightgoldenrodyellow;
}

.star-rating {
  line-height: 32px;
  font-size: 1.25em;
}

.star-rating .fa-star {
  color: whitesmoke;
}

.checked {
  color: orange;
}

.transparent {
  background: #7f7f7f;
  background: #18180d;
}

.arrayImages {
  width: 100px;
}

.progress {
  margin-left: auto;
  margin-right: auto;
  z-index: 1000;
  width: 0px;
  background-color: darkslategrey;
}

.screening {
  color: #daa520;
  font-weight: 200;
}

.demand {
  color: maroon;
  font-weight: 600;
}

.no-content {
  height: 80vh;
  color: #6c757d;
}

.alert-link:hover {
  color: white;
  text-decoration: none;
  opacity: 1;
}

a.alert-link {
  height: 80vh;
  color: #6c757d;
  opacity: .5;
}

/* sleep/wake */
.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 15000;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 1);
  overflow-x: hidden;
  transition: 0.5s;
  cursor:none; 
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
  height: 60vh;
  color: #0f0f0f;
}

.overlay-link {
  height: 80vh;
  color: #0f0f0f;
  opacity: .5;
}

.overlay-link:hover {
  color: white;
  text-decoration: none;
  opacity: 1;
}

.question {
  color: rgb(255, 255, 255);
  /* font-size: xxx-large;  */
  /* font-family: 'joyful_theatreregular'; */
  /* font-style: italic; */
  /* margin-bottom: 10px; */
  text-align: center;
  width: 100%;
  text-overflow: string !important;
  white-space: normal;
  overflow: hidden !important;
  max-width: 350px;
  margin: auto;
  /* border: 3px solid #73AD21;  */
  line-height: 1.1em;
  max-width: 100%;
  /* color: white; */
  vertical-align: middle;
  top: 4%;
  position: absolute;
  height: 28%;
  max-height: 28%;
  min-height: 264px; 
  width: 100%;
  z-index: 1000;
/* 
  text-align: center;
  top: 18%;
  -ms-transform: translateY(-18%);
  -webkit-transform: translateY(-18%);
  transform: translateY(-18%); */
}

.options {
  color: rgb(255, 255, 255);
  /* font-family: 'joyful_theatreregular'; */
  /* border: 3px solid yellow;  */
  font-size: smaller; 
  width:450px;
  /* font-style: italic; */
  /* margin-bottom: 10px; */
  text-align: center;
  width: 100%;
  /* overflow: hidden;  */
  word-wrap: normal; 
  white-space:normal;

  position: absolute;
  top: 32%;
  height: 40%;
  max-height: 40%;
}

.listOptions{
  display: table; 
  margin: 0 auto;
  list-style-position: inside;
}

.answer {
  color: goldenrod !important;
}

.countdown {
  text-align: center;
  color: rgb(255, 255, 255);
  /* font-family: 'joyful_theatreregular'; */
  /* border: 3px solid blue;  */
  /* font-size: xxx-large;   */
  bottom: 2%;
  position: absolute;
  height: 20%;
  max-height: 20%;
  width: 100%;
}

.timeG {
  color: green;
  /* font-family: 'joyful_theatreregular'; */
  /* font-size: 45px; */
}

.timeY {
  color: yellow;
  /* font-family: 'joyful_theatreregular'; */
  /* font-size: 45px; */
}

.timeR {
  color: red;
  /* font-family: 'joyful_theatreregular'; */
  /* font-size: 45px;  */
}

.quiz {
  opacity: 1;
  /* border: 3px solid red;  */
  min-height: 100%;
  transform: translate(+21%,0);
  width:100%;
  overflow: hidden;
  position: relative;
  top: 0;
  left: 0;
  z-index: 900;

  text-align: center;
  left: 50%;
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
}