.what-is-this {
  box-sizing: border-box;
  -moz-box-sizing: border-box; }

.hide {
  display: none !important; }

.top {
  color: white;
  font-family: 'Pitch-Bold';
  display: block;
  margin-bottom: 140px;
  text-align: center;
  font-size: 0.75rem;
  position: relative;
  padding-bottom: 4px;
  border-bottom: 1px solid white;
  width: 170px;
  margin: 0 auto 140px auto; }

.line {
  width: 250px;
  position: fixed;
  left: 0;
  right: 0;
  margin: 0 auto;
  background-color: black;
  height: 1px;
  top: 50vh;
  z-index: 1000;
  display: none; }

body {
  -webkit-transition-timing-function: linear;
  -webkit-transition-duration: 300ms;
  -webkit-transition-property: all;
  -moz-transition-timing-function: linear;
  -moz-transition-duration: 300ms;
  -moz-transition-property: all;
  -o-transition-timing-function: linear;
  -o-transition-duration: 300ms;
  -o-transition-property: all;
  -ms-transition-timing-function: linear;
  -ms-transition-duration: 300ms;
  -ms-transition-property: all;
  transition-timing-function: linear;
  transition-duration: 300ms;
  transition-property: all; }
  body.startAnimation {
    background-color: black; }
    body.startAnimation .landing .wrap {
      opacity: 0; }
    body.startAnimation .main .wrap .container.blackBg h2 {
      color: white; }
    body.startAnimation .main .wrap .line {
      display: block;
      background-color: white; }
      body.startAnimation .main .wrap .line.grey {
        background-color: #7d7d7d; }
      body.startAnimation .main .wrap .line.white {
        background-color: white; }
  body.makeBlack {
    background-color: black !important; }
    body.makeBlack .main .wrap .line {
      background-color: white !important; }
    body.makeBlack .main .wrap .container .hold header .bottle span {
      background-color: white; }
    body.makeBlack .main .wrap .container .hold header .bottle i {
      background-position: -40px -20px; }
  body.makeGreen {
    background-color: #5cce59; }
  body.makeYellow {
    background-color: #ffe700; }
  body.makePink {
    background-color: #ff675d; }
  body.playAnim .main .wrap .container .hold header .details {
    opacity: 1; }
  body h1, body h2, body h3, body h4, body p {
    padding: 0;
    margin: 0; }
  body a {
    text-decoration: none; }
  body.makeGreen .main .wrap .line, body.makeYellow .main .wrap .line, body.makePink .main .wrap .line {
    background-color: black; }

.landing {
  height: 100vh;
  height: -moz-calc(100vh - 62px);
  height: -o-calc(100vh - 62px);
  height: -webkit-calc(100vh - 62px);
  height: calc(100vh - 62px);
  position: relative;
  -webkit-transition-timing-function: linear;
  -webkit-transition-duration: 300ms;
  -webkit-transition-property: all;
  -moz-transition-timing-function: linear;
  -moz-transition-duration: 300ms;
  -moz-transition-property: all;
  -o-transition-timing-function: linear;
  -o-transition-duration: 300ms;
  -o-transition-property: all;
  -ms-transition-timing-function: linear;
  -ms-transition-duration: 300ms;
  -ms-transition-property: all;
  transition-timing-function: linear;
  transition-duration: 300ms;
  transition-property: all; }
  .landing .wrap {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition-timing-function: linear;
    -webkit-transition-duration: 300ms;
    -webkit-transition-property: all;
    -moz-transition-timing-function: linear;
    -moz-transition-duration: 300ms;
    -moz-transition-property: all;
    -o-transition-timing-function: linear;
    -o-transition-duration: 300ms;
    -o-transition-property: all;
    -ms-transition-timing-function: linear;
    -ms-transition-duration: 300ms;
    -ms-transition-property: all;
    transition-timing-function: linear;
    transition-duration: 300ms;
    transition-property: all; }
    .landing .wrap .logo {
      margin: 0 30px; }

.main .wrap .container {
  padding: 28px 0 0 0;
  -webkit-transition-timing-function: linear;
  -webkit-transition-duration: 300ms;
  -webkit-transition-property: all;
  -moz-transition-timing-function: linear;
  -moz-transition-duration: 300ms;
  -moz-transition-property: all;
  -o-transition-timing-function: linear;
  -o-transition-duration: 300ms;
  -o-transition-property: all;
  -ms-transition-timing-function: linear;
  -ms-transition-duration: 300ms;
  -ms-transition-property: all;
  transition-timing-function: linear;
  transition-duration: 300ms;
  transition-property: all; }
  .main .wrap .container .hold {
    width: 300px;
    margin: 0 auto;
    position: relative;
    z-index: 100; }
    .main .wrap .container .hold header {
      margin-top: -30px; }
      .main .wrap .container .hold header h1 {
        font-family: 'Knockout-HTF66-FullFlyweight';
        text-transform: uppercase;
        -webkit-text-stroke: 1px white;
        text-stroke: 1px white;
        color: transparent;
        font-size: 9.6875rem;
        text-align: center; }
      .main .wrap .container .hold header .details {
        width: 200px;
        margin: 0 auto; }
        .main .wrap .container .hold header .details h4 {
          font-family: 'Trade-gothic-bold';
          font-size: 0.875rem;
          letter-spacing: 0.01em;
          padding-bottom: 10px;
          text-transform: uppercase; }
        .main .wrap .container .hold header .details p {
          font-family: 'Pitch-Medium';
          letter-spacing: 0.01em;
          font-size: 0.75rem;
          max-width: 150px;
          line-height: 1.4; }
          .main .wrap .container .hold header .details p strong {
            font-family: 'Pitch-Bold'; }
      .main .wrap .container .hold header .whiteBottle, .main .wrap .container .hold header .blackBottle {
        position: relative;
        width: 30px; }
    .main .wrap .container .hold h2 {
      font-family: 'Knockout-HTF66-FullFlyweight';
      text-transform: uppercase;
      font-size: 9.6875rem;
      text-align: center;
      color: black; }
    .main .wrap .container .hold ul {
      margin: 0 auto;
      width: 200px; }
      .main .wrap .container .hold ul li {
        list-style: none;
        color: black; }
        .main .wrap .container .hold ul li h3 {
          font-family: 'Trade-gothic-bold';
          font-size: 2.3125rem;
          letter-spacing: -0.05em;
          text-transform: uppercase; }
        .main .wrap .container .hold ul li.event h3 {
          color: white; }
        .main .wrap .container .hold ul li.zodiac .eventDetail {
          padding-bottom: 22px; }
          .main .wrap .container .hold ul li.zodiac .eventDetail h4 {
            margin-top: 0; }
          .main .wrap .container .hold ul li.zodiac .eventDetail .animal {
            margin: 16px 0; }
            .main .wrap .container .hold ul li.zodiac .eventDetail .animal.cat {
              width: 45px; }
            .main .wrap .container .hold ul li.zodiac .eventDetail .animal.adder {
              width: 65px; }
            .main .wrap .container .hold ul li.zodiac .eventDetail .animal.fox {
              width: 80px; }
            .main .wrap .container .hold ul li.zodiac .eventDetail .animal.bull {
              width: 66px; }
            .main .wrap .container .hold ul li.zodiac .eventDetail .animal.seahorse {
              width: 50px; }
            .main .wrap .container .hold ul li.zodiac .eventDetail .animal.wren {
              width: 65px; }
            .main .wrap .container .hold ul li.zodiac .eventDetail .animal.horse {
              width: 80px; }
            .main .wrap .container .hold ul li.zodiac .eventDetail .animal.salmon {
              width: 70px; }
            .main .wrap .container .hold ul li.zodiac .eventDetail .animal.swan {
              width: 70px; }
            .main .wrap .container .hold ul li.zodiac .eventDetail .animal.butterfly {
              width: 75px; }
            .main .wrap .container .hold ul li.zodiac .eventDetail .animal.wolfhound {
              width: 85px; }
            .main .wrap .container .hold ul li.zodiac .eventDetail .animal.falcon {
              width: 80px; }
            .main .wrap .container .hold ul li.zodiac .eventDetail .animal.stag {
              width: 75px; }
        .main .wrap .container .hold ul li.zodiac p + h4:before {
          opacity: 1; }
        .main .wrap .container .hold ul li.zodiac h4 {
          position: relative;
          margin-top: 16px; }
          .main .wrap .container .hold ul li.zodiac h4:before {
            content: '';
            background-color: black;
            height: 1px;
            width: 60px;
            display: block;
            margin-bottom: 14px;
            opacity: 0; }
        .main .wrap .container .hold ul li .eventDetail {
          padding: 15px 0 15px 14px; }
          .main .wrap .container .hold ul li .eventDetail h4 {
            font-family: 'Trade-gothic-bold';
            font-size: 0.875rem;
            letter-spacing: 0.01em;
            text-transform: uppercase; }
            .main .wrap .container .hold ul li .eventDetail h4 + h4 {
              margin-top: 10px; }
            .main .wrap .container .hold ul li .eventDetail h4 + figure {
              margin-top: 15px; }
          .main .wrap .container .hold ul li .eventDetail figure + h4 {
            margin-top: 10px; }
          .main .wrap .container .hold ul li .eventDetail figure {
            width: 22px; }
          .main .wrap .container .hold ul li .eventDetail p {
            font-family: 'Pitch-Medium';
            letter-spacing: 0.01em;
            font-size: 0.625rem;
            max-width: 150px;
            line-height: 1.2; }
            .main .wrap .container .hold ul li .eventDetail p:first-of-type {
              font-size: 0.75rem; }
            .main .wrap .container .hold ul li .eventDetail p strong {
              font-family: 'Pitch-Test-SemiBold'; }
  .main .wrap .container.blackBg {
    /*
    				@include transition(300ms);
    				@include x-animation(2s ease-in-out 12s forwards blackBg);
    				@include x-keyframes(blackBg) {
    					0% {background-color: transparent;}
    					100% {background-color: rgb(0, 0, 0); }
    				}
    				
    */ }
    .main .wrap .container.blackBg .hold header .details {
      color: white; }
    .main .wrap .container.blackBg .hold h2 {
      color: black;
      -webkit-transition-timing-function: linear;
      -webkit-transition-duration: 300ms;
      -webkit-transition-property: all;
      -moz-transition-timing-function: linear;
      -moz-transition-duration: 300ms;
      -moz-transition-property: all;
      -o-transition-timing-function: linear;
      -o-transition-duration: 300ms;
      -o-transition-property: all;
      -ms-transition-timing-function: linear;
      -ms-transition-duration: 300ms;
      -ms-transition-property: all;
      transition-timing-function: linear;
      transition-duration: 300ms;
      transition-property: all;
      /*
      						@include x-animation(2s ease-in-out 10s forwards blackHeading);
      						@include x-keyframes(blackHeading) {
      							0% {color: rgb(0, 0, 0);}
      							100% {color: rgb(255, 255, 255); }
      						}
      */ }
    .main .wrap .container.blackBg .hold ul li {
      color: white; }
      .main .wrap .container.blackBg .hold ul li.event h3 {
        color: #7d7d7d; }
      .main .wrap .container.blackBg .hold ul li.zodiac .eventDetail h4:before {
        background-color: white; }
      .main .wrap .container.blackBg .hold ul li.zodiac .eventDetail p {
        color: white; }

.what-is-this {
  color: white;
  font-family: 'Pitch-Medium';
  line-height: 1.5;
  text-align: center;
  padding: 18px 0;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 10000;
  background: black;
  height: 100vh;
  -webkit-transition-timing-function: linear;
  -webkit-transition-duration: 400ms;
  -webkit-transition-property: height;
  -moz-transition-timing-function: linear;
  -moz-transition-duration: 400ms;
  -moz-transition-property: height;
  -o-transition-timing-function: linear;
  -o-transition-duration: 400ms;
  -o-transition-property: height;
  -ms-transition-timing-function: linear;
  -ms-transition-duration: 400ms;
  -ms-transition-property: height;
  transition-timing-function: linear;
  transition-duration: 400ms;
  transition-property: height;
  cursor: pointer; }
  .what-is-this.is-closed {
    height: 55px; }
    .what-is-this.is-closed button, .what-is-this.is-closed p, .what-is-this.is-closed figure {
      display: none; }
  .what-is-this .wrap {
    overflow: auto;
    height: 100%; }
  .what-is-this figure {
    width: 121px;
    margin: 0 auto 30px auto; }
  .what-is-this button {
    padding: 0;
    margin: 0 auto 30px auto;
    text-indent: -99999px;
    width: 15px;
    height: 15px;
    position: relative; }
    .what-is-this button:after {
      background: url("../images/close.svg") no-repeat;
      width: 15px;
      height: 15px;
      content: ' ';
      display: block;
      position: absolute;
      top: 0;
      left: 0; }
  .what-is-this h2 {
    font-family: 'Pitch-Bold';
    font-size: 0.875rem;
    margin-bottom: 20px; }
    .what-is-this h2:after {
      content: ' ';
      width: 26px;
      border-bottom: 1px solid white;
      display: block;
      margin: 0px auto;
      height: 20px; }
  .what-is-this p {
    font-size: 0.875rem;
    width: 90%;
    max-width: 380px;
    margin: 0 auto; }
    .what-is-this p + p {
      margin-top: 14px; }
    .what-is-this p.slater {
      font-family: 'Pitch-Bold';
      margin-top: 0; }
  .what-is-this nav {
    margin-top: 40px; }
    .what-is-this nav a {
      font-size: 0.875rem;
      -webkit-transition-timing-function: linear;
      -webkit-transition-duration: 300ms;
      -webkit-transition-property: all;
      -moz-transition-timing-function: linear;
      -moz-transition-duration: 300ms;
      -moz-transition-property: all;
      -o-transition-timing-function: linear;
      -o-transition-duration: 300ms;
      -o-transition-property: all;
      -ms-transition-timing-function: linear;
      -ms-transition-duration: 300ms;
      -ms-transition-property: all;
      transition-timing-function: linear;
      transition-duration: 300ms;
      transition-property: all; }
      .what-is-this nav a + a:before {
        content: ' ';
        width: 20px;
        height: 1px;
        display: inline-block;
        vertical-align: middle;
        border-bottom: 1px solid rgba(255, 255, 255, 0.25);
        margin-left: 6px;
        margin-right: 14px; }

/*# sourceMappingURL=mobile.css.map */