/* style.scss */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, address, img, ul, li, form, label, caption, article, aside, canvas, details, embed, figure, figcaption, footer, header, nav, section, summary, time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display:block;
}

body {
  font:0.8em sans-serif;
  *font-size:small;
  color:#fff;
  background:#000;
}

a {
  margin:0;
  padding:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
  text-decoration:none;
  outline:none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight:bold;
}

ul {
  list-style:none;
  width:100%;
}

img {
  width:100%;
}

/* END RESET */
/* Font styles */
@font-face {
  font-family:"faded";
  src:url("../fonts/faded.ttf");
}
@font-face {
  font-family:"ransom";
  src:url("../fonts/ransom.ttf");
}
/* Unique styles */
body {
  background-color:#000;
  background:#000;
  -webkit-background-size:fill;
  -moz-background-size:fill;
  -o-background-size:fill;
  background-size:fill;
  font-size:1.1em;
  color:#bfbfbf;
}

a {
  color:#b30000;
  opacity:0.6;
}

p {
  font-size:1.1em;
  padding-bottom:14px;
  font-weight:100;
  opacity:0.7;
  font-family:"ransom", sans-serif;
}

p a {
  opacity:1;
}

.faded {
  font-family:"faded", sans-serif;
  background:-webkit-linear-gradient(#fff, #8c8c8c);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.fadedRegular {
  font-family:"faded", sans-serif;
}
.faded a {
  position:relative;
  margin-left:7px;
  background:-webkit-linear-gradient(#fff, #8c8c8c);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.bigger {
  font-size:1.1em;
}

.smaller {
  font-size:0.9em;
}

header {
  width:100%;
  height:100vh;
}
#logoWrapper {
  position:relative;
  margin-left:50%;
  top:50%;
  -webkit-transform:translate(-25%, -50%);
  transform:translate(-25%, -50%);
}
#logo, #logoTwo {
  position:absolute;
  left:7%;
  top:3%;
  color:#fff;
  font-size:3em;
  letter-spacing:3px;
  opacity:1;
  z-index:999;
}
#logoTwo {
  opacity:0.2;
}
#logoTwo {
  opacity:1;
  animation:flickerlogo 2s linear  reverse infinite;
}
#logoTwo::after {
  content:'';
  width:150%;
  -webkit-box-shadow:-110px 0px 110px 10px rgba(255,255,255,1);
  -moz-box-shadow:-110px 0px 110px 10px rgba(255,255,255,1);
  box-shadow:-110px 0px 110px 50px rgba(0,0,0,1);
}
@keyframes flickerlogo {
  0% {
    opacity:0.4;
  }
  5% {
    opacity:0.5;
  }
  10% {
    opacity:0.6;
  }
  15% {
    opacity:0.85;
  }
  25% {
    opacity:0.5;
  }
  30% {
    opacity:1;
  }
  35% {
    opacity:0.1;
  }
  40% {
    opacity:0.25;
  }
  45% {
    opacity:0.5;
  }
  60% {
    opacity:1;
  }
  70% {
    opacity:0.85;
  }
  80% {
    opacity:0.4;
  }
  90% {
    opacity:0.5;
  }
  100% {
    opacity:1;
  }
}
#menu {
  position:absolute;
  top:6%;
  right:4%;
  width:100px;
  line-height:1.8;
  z-index:999;
  font-size:1em;
  text-transform:uppercase;
}
#menu .active {
  opacity:1;
}
#menu .smaller {
  font-size:0.8em;
}
#crewList {
  position:absolute;
  bottom:0;
  right:2vw;
  font-size:0.8em;
}
#crewList .name {
  position:relative;
  margin:-10px 0 -7px 0;
  opacity:1;
}
#content {
  position:relative;
}
.spotlight {
  color:hsla(0,0%,0%,.08);
  -webkit-background-clip:text;
  background-image:radial-gradient(closest-side, #fff, #000 100%, transparent 0);
  background-position:-110%;
  background-repeat:no-repeat;
  background-size:200px 200px;
  transition:all .7s cubic-bezier(.19,1,.22,1);
}
#whispers {
  position:relative;
  left:4vw;
  top:-14vh;
}
#whispers.spotlight {
  width:20%;
}
#unseenplayer {
  display:none;
}
.backgroundOne {
  position:relative;
  top:0;
  left:30vw;
  width:60vw;
}
.details {
  position:relative;
  width:100%;
  height:25vh;
}
.aboutCard {
  position:absolute;
  top:-75vh;
  left:0;
  width:53vw;
  height:75vh;
  perspective:1500px;
}
.aboutCard .content {
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform 1s cubic-bezier(0.75, 0, 0.85, 1);
  transition-delay:0.3308084033s;
}
.more {
  display:none;
}
.more:checked ~ .content {
  transform:rotateY(180deg);
}
.front,
.back {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  backface-visibility:hidden;
  transform-style:preserve-3d;
  border-radius:6px;
}
.front .inner {
  position:relative;
  height:100%;
  display:grid;
  padding:1.5em;
  transform:translateZ(80px) scale(0.94);
}
.front .description p,
.back .description p {
  font-size:1.3em;
  padding:0 13px 0 53px;
  opacity:0.9;
  line-height:1.5;
}
.front .description p:first-child,
.back .description p:first-child {
  font-size:1.1em;
  padding:0 0 31px 0;
  opacity:0.7;
}
.front {
  background-color:rgb(0, 0, 0);
  background-size:cover;
  background-position:center center;
}
.front:after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:block;
  backface-visibility:hidden;
  background-position:100% center;
  background-size:cover;
  background-repeat:no-repeat;
}
.front .button {
  grid-row:2;
}
.front .inner {
  position:relative;
  grid-template-rows:5fr 1fr 1fr 2fr 1fr;
  justify-items:center;
}
.front h2 {
  grid-row:2;
  margin-bottom:0.3em;
  text-transform:uppercase;
  letter-spacing:10px;
  color:#fff;
  font-weight:700;
  text-shadow:0 0 6px rgba(0, 0, 0, 0.1);
}
.front .rating {
  grid-row:3;
  color:rgba(255, 255, 255, 0.8);
  font-size:14px;
  display:flex;
  flex-flow:row nowrap;
}
.front .rating i {
  margin:0 1px;
}
.back {
  transform:rotateY(180deg);
  background-color:rgb(0, 0, 0);
}
.back .inner {
  position:relative;
  grid-template-rows:1fr 2fr 1fr 2fr 14fr 1fr 1fr;
  grid-template-columns:repeat(4, auto);
  grid-column-gap:0.8em;
  justify-items:center;
}
.back .info {
  position:relative;
  display:flex;
  align-items:center;
  color:red;
  grid-row:3;
}
.back .info:not(:first-of-type):before {
  content:"";
  position:absolute;
  left:-0.9em;
  height:18px;
  width:1px;
  background-color:rgba(0, 0, 0, 0.1);
}
.back .info span {
  font-size:2em;
  font-weight:700;
}
.back .info i {
  font-size:1.2em;
}
.back .info i:before {
  background:linear-gradient(40deg, red, rgb(67, 138, 243));
  -webkit-text-fill-color:transparent;
  -webkit-background-clip:text;
}
.back .info .icon {
  margin-left:0.3em;
}
.back .info .icon span {
  display:block;
  margin-top:-0.25em;
  font-size:0.8em;
  font-weight:600;
  white-space:nowrap;
}
.back .description {
  grid-row:5;
  grid-column:1/-1;
  font-size:0.86em;
  border-radius:5px;
  font-weight:600;
  line-height:1.4em;
  overflow:auto;
  color:#fff;
  background:#000;
  padding:1em;
}
.back .location,
.back .price {
  font-weight:600;
  color:red;
  grid-row:1;
  font-size:0.86em;
}
.back .location {
  grid-column:1/3;
  justify-self:left;
}
.back .price {
  grid-column:3/-1;
  justify-self:right;
}
.back .button {
  grid-column:1/-1;
  justify-self:center;
}
#chapters {
  min-height:100vh;
  text-align:center;
}
.chapter {
  margin:auto;
  display:inline;
}
.chapter h1, .chapter h2, .chapter h3 {
  display:inline;
  text-transform:uppercase;
}
.chapter h2, .chapter h3 {
  position:relative;
}
.chapter h1 {
  opacity:0.2;
  font-size:6em;
}
.chapter h2 {
  font-size:1.5em;
  top:-3vh;
  left:2vw;
}
.chapter h3 {
  top:-8vh;
  left:-10.5vw;
}
.backgroundTwo, .backgroundThree {
  position:relative;
}

.backgroundTwo {
  padding:15px;
  margin:auto;
}

.backgroundThree {
  padding:10px;
  padding:15px;
  margin:auto;
}

/*#cast, #crew {
  background:rgba(0,0,0,0.5);
}*/
#crew {
  margin-top:25vh;
}

#cast p.faded, #crew p.faded, #history p.faded {
  position:relative;
  top:-13px;
  font-size:0.8em;
  padding:40px 0 0 3px;
  opacity:0.7;
  line-height:1;
  clear:both;
}

#cast {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  display:none;
}

.castBG {
  background:#000;
  background:url("../images/background4.jpg") no-repeat center center fixed;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -o-background-size:cover;
  background-size:cover;
}

#castContent {
  width:78%;
  height:25vh;
  padding:283px 85px 77px 28px;
}

#castContent div {
  float:left;
  width:50%;
}

#cast p, #crew p, #history p {
  margin-bottom:15px;
}

#crew {
  width:45%;
  padding:93px 15px 87px 16px;
  display:none;
  margin-left:20px;
}

.crewBG {
  background:#000;
  background:url("../images/DSC_9580.jpg") no-repeat center center fixed;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -o-background-size:cover;
  background-size:cover;
  background-position:center 10%;
}

#sponsors {
  top:50%;
  left:10px;
  width:100px;
  height:auto;
  display:none;
}

#history {
  margin-top:300px;
  width:85%;
  display:none;
  margin-bottom:15px;
}

#history hr {
  margin:30px 0;
}

.historyBG {
  background-color:#000;
  background:url("../images/bear.jpg") no-repeat left center fixed;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -o-background-size:cover;
  background-size:cover;
  background-position:-50% 10%;
}

#donate {
  margin-top:300px;
  display:none;
}

.donateBG {
  background-color:#000;
  background:url("../images/background.jpg") no-repeat left center fixed;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -o-background-size:cover;
  background-size:cover;
  background-position:-50% 10%;
}

#veteranDonate {
  margin:0 5%;
  padding:40px 0;
  clear:both;
}

#veteranDonate h2 {
  color:#b30000;
  opacity:0.6;
  font-size:1.1em;
  margin-bottom:15px;
}

#prodDonate div, #veteranVideos div {
  position:relative;
  display:inline-block;
  width:40%;
  margin:0 5%;
  float:left;
}

.close {
  position:absolute;
  top:-13px;
  right:-6px;
  font-size:1.1em;
}

#black {
  height:100vh;
  width:100vw;
  position:fixed;
  top:0;
  left:0;
  background:#000;
  z-index:998 !important;
  opacity:0;
}

hr {
  border:0;
  height:1px;
  background-image:linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
  opacity:0.5;
}

.bio {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  min-height:100%;
  background:#000;
  text-align:center;
}

.bio, .bioWrapper {
  display:none;
}

.bioClose {
  position:relative;
  left:10px;
}

.bioWrapper {
  position:absolute;
  width:100%;
  bottom:10%;
}

.bioWrapper p {
  margin-bottom:20px;
}

.bio h1 {
  text-align:center;
}

.bio img {
  width:100%;
  max-width:320px;
  margin:25px auto 25px auto;
}

.bio p {
  text-align:left;
  padding:0 2% 0 2%;
}

#unseen {
  position:relative;
  background-color:#000;
  background:url("../images/unseen.jpg") no-repeat center center fixed;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -o-background-size:cover;
  background-size:cover;
  width:100%;
  height:100%;
  z-index:-1;
  opacity:1;
}

#transparency {
  height:100vh;
  width:100vw;
  position:fixed;
  top:0;
  left:0;
  background:rgba(0, 0, 0, 0.6);
  background:-moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 50%);
  /* FF3.6-15 */
  background:-webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 50%);
  /* Chrome10-25,Safari5.1-6 */
  background:radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 50%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr="#00000000", endColorstr="#a6000000",GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
  z-index:-1;
}

.spot {
  position:fixed;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index:-1;
  display:none;
}

[id^=shading] {
  position:fixed !important;
  top:0;
  left:0;
  z-index:-1;
  display:none;
}

* {
  box-sizing:border-box;
}

.button {
  grid-row:-1;
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:600;
  cursor:pointer;
  display:block;
  padding:0 1.5em;
  height:3em;
  line-height:2.9em;
  min-width:3em;
  background-color:transparent;
  border:solid 2px #fff;
  color:#fff;
  border-radius:4px;
  text-align:center;
  left:50%;
  backface-visibility:hidden;
  transition:0.3s ease-in-out;
  text-shadow:0 0 6px rgba(0, 0, 0, 0.3);
}
.button:hover {
  box-shadow:0 0 50px rgba(0, 0, 0, 0.5);
  text-shadow:none;
  border:#000;
}
.button.return {
  line-height:3em;
  color:red;
  border-color:red;
  text-shadow:none;
}
.button.return:hover {
  background-color:red;
  color:#fff;
  box-shadow:none;
}


@media (min-width:501px) and (max-width:800px) {
  html, body {
    height:100%;
  }

  #about, #castContent, #crew, #history {
    width:auto;
    max-width:80%;
    margin-top:250px;
    height:auto;
  }
}
@media all and (max-width:749px) {
  html, body {
    height:100%;
  }

  .backgroundOne {
    padding:2px 0 2px 0;
  }

  #menu {
    top:1%;
    right:1%;
    background:none;
    border:none;
  }

  #menu a {
    margin-left:5%;
    margin-right:5%;
  }

  #about, #castContent, #crew, #history, .bioWrapper {
    position:relative;
    width:80%;
    height:auto;
    margin-top:240px;
  }

  #about {
    padding:97px 3px 52px 26px;
  }

  #castContent {
    padding:40px 15px 57px 18px;
  }

  .bioWrapper {
    margin:240px auto auto auto;
    bottom:0;
  }

  .bioWrapper p {
    margin-bottom:20px;
  }

  .bio h1 {
    text-align:center;
  }

  .bio img {
    width:100%;
    max-width:320px;
    margin:25px auto 25px auto;
  }

  .bio p {
    text-align:left;
    padding:0 2% 0 2%;
  }
}

@media (max-width:600px) {
  #whispers {
    display:none;
    visibility:hidden;
  }
  #crewList {
    position:relative;
    left:9vw;
    right:0;
  }
  .details {
    height:auto;
    top:-30vh;
  }
  .details .button {
    position:absolute;
    top:-15vh;
    left:100px;
  }
  .aboutCard {
    position:relative;
    top:0;
    width:100%;
    height:100vh;
  }
  .front .description p, .back .description p {
    padding:0;
}
  .backgroundOne {
    width:100vw;
    top:80vh;
    left:40vw;
    z-index:-1;
  }
  .chapter h1, .chapter h2, .chapter h3 {
    display:block;
  }
  .chapter h1 {
    font-size:2.8em;
  }
  .chapter h3 {
    top:-10vh;
    left:0;
  }
}



.arrow-container {
  display:block;
  width:100px;
  height:100px;
  position:absolute;
  top:70%;
  left:50%;
  transform:translate(-50%, -50%) rotateZ(0deg);
}
.arrow-container:hover {
  cursor:pointer;
}
.arrow-container:hover .arrow {
  top:50%;
}
.arrow-container:hover .arrow:before {
  transform:translate(-50%, -50%) rotateZ(-30deg);
}
.arrow-container:hover .arrow:after {
  transform:translate(-50%, -50%) rotateZ(30deg);
}

.arrow {
  position:absolute;
  left:50%;
  transition:all 0.4s ease;
}
.arrow:before, .arrow:after {
  transition:all 0.4s ease;
  content:"";
  display:block;
  position:absolute;
  transform-origin:bottom right;
  background:#fff;
  width:4px;
  height:50px;
  border-radius:10px;
  transform:translate(-50%, -50%) rotateZ(-45deg);
  background:red;
}
.arrow:after {
  transform-origin:bottom left;
  transform:translate(-50%, -50%) rotateZ(45deg);
}
.arrow:nth-child(1) {
  opacity:0.3;
  top:35%;
}
.arrow:nth-child(2) {
  opacity:0.6;
  top:55%;
}
.arrow:nth-child(3) {
  opacity:0.9;
  top:75%;
}

#myVideo {
  position:absolute;
  top:0;
  left:37%;
  width:25%;
  height:100%;
  display:block;
  border-radius:6px;
  object-fit:cover;
  z-index:-1;
}