@font-face {
  font-family: "Franklin Gothic Demi Cond";
  src: url(../assets/font.ttf);
}

.scrollmagic-pin-spacer {
  vertical-align: top;
  margin: 0 auto !important;
}


body {
  font-family: "Franklin Gothic Demi Cond";
  background-color: #f1f1f1;
  margin: 0;
}

.tickets {
  position: fixed;
  z-index: 9;
  text-align: right;
  padding: 1% 2%;
  top: 0;
  right: 0;
}

.tickets a {
  color: rgb(203, 174, 91);
  font-size: 4.5vmin;
}

a {
  text-decoration: none;
}

a:hover {
  color: #fff;
}

#no-age a {
  color: #757575;
}

#no-age a:hover {
  color: #fff;
}
 
#support a {
  color: #919191;
}

#support a:hover {
  color: #fff;
}

#comet a {
  color: #c1c1c1;
}

#comet a:hover {
  color: #fff;
}

#no-age {
  position: absolute;
  text-align: center;
  z-index: 10;
  font-size: 30vmin;
  top: 43%;
  left: 50%;
  margin-right: -30%;
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
  transform: translate(-50%, -50%);
}

#support {
  position: relative;
  font-size: 7vmin;
  text-align: center;
  z-index: 10;
  color: #919191;
  top: 53%;
  width: 100%;
}

#a-show-text {
  z-index: 8;
  font-size: 11.6vmin;
  color: rgb(203, 174, 91);
  line-height: 1.2;
  text-align: left;
  position: fixed;
  top: 48%;
  left: 50%;
  margin-right: -30%;
  -ms-transform: translate(-50%, -50%) rotate(-5deg); /* IE 9 */
  -webkit-transform: translate(-50%, -50%) rotate(-5deg); /* Chrome, Safari, Opera */
  transform: translate(-50%, -50%) rotate(-5deg);
}

#a-show-text__first {
  position: relative;
  z-index: 6;
}

#a-show-text__middle {
  position: relative;
  z-index: 2;
}

#a-show__quote {
  position: relative;
  z-index: 4;
}

#dc {
  position: absolute;
  font-size: 7vmin;
  text-align: center;
  color: #fff;
  top: 83%;
  width: 100%;
}

#slp a {
  color: #fff;
}

#slp {
  position: absolute;
  text-align: center;
  font-size: 2vmin;
  top: 4%;
  color: #fff;
  width: 100%;
  z-index: 115;
}

#slp:hover {
  color: #fff !important;
}

#square {
  position: absolute;
  top: 44%;
  left: 50%;
  margin-right: -30%;
  width: 25vmax;
  height: 25vmax;
  background: #fff;
  transform: rotate(-6.8deg) translate(-50%, -50%);
  z-index: 1;
}

.popin {
  z-index: 3;
  position: absolute;
  top: 49%;
  left: 50%;
  margin-right: -30%;
  width: 25vmax;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
}

#comet {
  position: absolute;
  font-size: 7vmin;
  text-align: center;
  color: #c1c1c1;
  top: 83%;
  width: 100%;
  z-index: 10;
}

.date {
  position: relative;
  font-size: 7vmin;
  text-align: center;
  color: #d8d8d8;
  top: 88%;
  z-index: 4; /*SMALLER THAN COMET*/
}

.heart {
  color: #cbae5b;
  display: inline;
}

footer {
  position: absolute;
  text-align: center;
  color: #c1c1c1;
  font-size: .7em;
  top: 97%;
  z-index: 10;
  width: 100%;
}

footer a {
  color: #c1c1c1;
}

.full-page {
  height: 100vh;
  margin: 0;
  position: relative;
}

.gray {
  color: #c1c1c1;
}

.sink {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.sink:hover, .sink:focus, .sink:active {
  -webkit-transform: translateY(8px);
  transform: translateY(8px);
}

.arrow {
  bottom: 0;
  right: 0;
  height: 10vh;
  position: absolute;
  display: inline-block;
  padding: 2% 1%;
}

@media only screen and (orientation: portrait) {
  #slp {
    top: 15%;
  }  

  .tickets {
    padding: 5% 2%;
  }

  .arrow {
    bottom: 15%;
    padding: 2% 5%;
   }
}

@media only screen and (max-width: 450px) {
  .a-show-text {
    top: 48%;
  }

  .square {
    width: 25vmax;
    height: 25vmax;
  }

  .popin {
    width: 28vmax;
  }

  .tickets a {
    font-size: 8vmin;
  }

  .tickets {
    padding: 5% 5%;
  }

  #dc {
    font-size: 9vmin;
    top: 75%;
  }

  #comet {
    top: 75%;
  }

  #slp {
    font-size: 4vmin;
    top: 20%;
  }

  #no-age {
    font-size: 25vmin;
    top: 47%;
  }

  #support {
    top: 53%;
  }

  .date {
    top: 80%;
  }
}

@media only screen and (min-width: 1200px) {
  #no-age {
    font-size: 30vmin;
  }
}

@media only screen and (min-height: 1000px) and (max-width: 1500px) {
  #no-age {
    font-size: 25vmin;
  }
}


@media only screen and (min-height: 700px) and (max-width: 800px) {
  #no-age {
    font-size: 23vmin;
  }

}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}