/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
/* line 14, ../sass/main.scss */
html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */
/* line 28, ../sass/main.scss */
::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */
/* line 37, ../sass/main.scss */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */
/* line 52, ../sass/main.scss */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */
/* line 65, ../sass/main.scss */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */
/* line 75, ../sass/main.scss */
textarea {
  resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */
/* line 83, ../sass/main.scss */
.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
/* line 134, ../sass/main.scss */
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* line 138, ../sass/main.scss */
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* line 144, ../sass/main.scss */
body {
  background-color: #000;
  font-family: "bagatela", serif !important;
  font-weight: 500;
  color: #fff;
  min-height: 670px;
}
@media (max-width: 1023px) {
  /* line 144, ../sass/main.scss */
  body {
    min-height: initial;
  }
}

/* line 156, ../sass/main.scss */
a {
  text-decoration: none;
  color: inherit;
}

/* line 161, ../sass/main.scss */
.main {
  position: relative;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 0;
  -moz-transition: opacity 0.5s linear;
  -o-transition: opacity 0.5s linear;
  -webkit-transition: opacity 0.5s linear;
  transition: opacity 0.5s linear;
}
/* line 170, ../sass/main.scss */
.main .background-wrapper {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/* line 178, ../sass/main.scss */
.main .background {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/background.jpg");
  background-size: cover;
  background-position: 50% 20%;
  -moz-transform-origin: 40% 50%;
  -ms-transform-origin: 40% 50%;
  -webkit-transform-origin: 40% 50%;
  transform-origin: 40% 50%;
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  -webkit-transform: scale(2);
  transform: scale(2);
  -moz-transition: all 5s cubic-bezier(0, 0.72, 0.21, 0.99);
  -o-transition: all 5s cubic-bezier(0, 0.72, 0.21, 0.99);
  -webkit-transition: all 5s cubic-bezier(0, 0.72, 0.21, 0.99);
  transition: all 5s cubic-bezier(0, 0.72, 0.21, 0.99);
}
@media (max-width: 1023px) {
  /* line 178, ../sass/main.scss */
  .main .background {
    background-position: 15% 20%;
  }
}
/* line 197, ../sass/main.scss */
.main .space {
  position: relative;
  height: 50%;
}
@media (min-width: 1680px) {
  /* line 197, ../sass/main.scss */
  .main .space {
    height: 65%;
  }
}
/* line 206, ../sass/main.scss */
.main .panel {
  position: relative;
  background-color: #ff8683;
  text-align: center;
  padding: 20px 10px;
  opacity: 0;
  -moz-transform: translateY(-100px);
  -ms-transform: translateY(-100px);
  -webkit-transform: translateY(-100px);
  transform: translateY(-100px);
  -moz-transition: all 5s cubic-bezier(0, 0.72, 0.21, 0.99) 0s;
  -o-transition: all 5s cubic-bezier(0, 0.72, 0.21, 0.99) 0s;
  -webkit-transition: all 5s cubic-bezier(0, 0.72, 0.21, 0.99);
  -webkit-transition-delay: 0s;
  transition: all 5s cubic-bezier(0, 0.72, 0.21, 0.99) 0s;
}
@media (max-width: 1023px) {
  /* line 206, ../sass/main.scss */
  .main .panel {
    display: none;
  }
}
/* line 221, ../sass/main.scss */
.main .panel .player {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 352px;
}
@media (max-width: 1200px) {
  /* line 221, ../sass/main.scss */
  .main .panel .player {
    width: 281.6px;
    vertical-align: top;
  }
}
/* line 232, ../sass/main.scss */
.main .panel .player img {
  width: 100%;
  height: auto;
}
/* line 237, ../sass/main.scss */
.main .panel .player .player-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
/* line 245, ../sass/main.scss */
.main .panel .player .player-overlay svg {
  fill: #fff;
  width: 63px;
  height: auto;
  -moz-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  -webkit-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}
/* line 254, ../sass/main.scss */
.main .panel .player .player-overlay:hover svg {
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
/* line 261, ../sass/main.scss */
.main .panel .tt-container {
  display: inline-block;
  vertical-align: middle;
  width: 336px;
  padding: 0 20px;
}
@media (max-width: 1200px) {
  /* line 261, ../sass/main.scss */
  .main .panel .tt-container {
    width: 268.8px;
    padding: 0 20.8px;
    vertical-align: top;
  }
}
/* line 273, ../sass/main.scss */
.main .panel .tt-container .artists {
  color: #fff;
  font-size: 41px;
  line-height: 46px;
  text-transform: uppercase;
}
@media (max-width: 1200px) {
  /* line 273, ../sass/main.scss */
  .main .panel .tt-container .artists {
    font-size: 34px;
    line-height: 38px;
  }
}
/* line 285, ../sass/main.scss */
.main .panel .tt-container .line {
  width: 134px;
  height: 3px;
  background-color: #fff;
  margin: 10px auto;
}
/* line 292, ../sass/main.scss */
.main .panel .tt-container .tt {
  color: #142a3c;
  font-size: 41px;
  line-height: 46px;
  text-transform: uppercase;
}
/* line 299, ../sass/main.scss */
.main .panel .tt-container .subline {
  color: #fff;
  font-size: 23px;
  text-transform: uppercase;
}
/* line 306, ../sass/main.scss */
.main .panel .copy-container {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  padding: 0 20px 0 0;
  text-align: left;
}
@media (max-width: 1200px) {
  /* line 306, ../sass/main.scss */
  .main .panel .copy-container {
    width: 240px;
    padding: 0 20.8px 0 0;
    vertical-align: top;
  }
}
/* line 319, ../sass/main.scss */
.main .panel .copy-container .copy {
  color: #000;
  font-size: 15px;
  line-height: 19px;
}
/* line 325, ../sass/main.scss */
.main .panel .copy-container .button {
  display: inline-block;
  background-color: #fff;
  margin-top: 15px;
  border: 2px solid #fff;
  border-radius: 17px;
  font-size: 13px;
  line-height: 30px;
  letter-spacing: 2.6px;
  color: #ff8683;
  padding: 0 15px;
  text-transform: uppercase;
  text-align: center;
  -moz-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  -webkit-transition: all 0.25s linear;
  transition: all 0.25s linear;
}
/* line 341, ../sass/main.scss */
.main .panel .copy-container .button:hover {
  color: #fff;
  background-color: #ff8683;
}
/* line 348, ../sass/main.scss */
.main .panel .cover-container {
  display: inline-block;
  vertical-align: middle;
  width: 199px;
}
@media (max-width: 1200px) {
  /* line 348, ../sass/main.scss */
  .main .panel .cover-container {
    width: 159.2px;
    vertical-align: top;
  }
}
/* line 358, ../sass/main.scss */
.main .panel .cover-container img {
  width: 100%;
  height: auto;
}
/* line 365, ../sass/main.scss */
.main .footer {
  position: relative;
  padding: 20px 20px;
  max-width: 1226px;
  margin: 0 auto;
  height: calc(50% - 256px);
  opacity: 0;
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  -moz-transition: all 4s cubic-bezier(0, 0.72, 0.21, 0.99) 1s;
  -o-transition: all 4s cubic-bezier(0, 0.72, 0.21, 0.99) 1s;
  -webkit-transition: all 4s cubic-bezier(0, 0.72, 0.21, 0.99);
  -webkit-transition-delay: 1s;
  transition: all 4s cubic-bezier(0, 0.72, 0.21, 0.99) 1s;
}
@media (min-width: 1680px) {
  /* line 365, ../sass/main.scss */
  .main .footer {
    height: calc(35% - 256px);
  }
}
@media (max-width: 1023px) {
  /* line 365, ../sass/main.scss */
  .main .footer {
    display: none;
  }
}
@media (max-width: 1200px) {
  /* line 365, ../sass/main.scss */
  .main .footer {
    height: calc(50% - 279px);
  }
}
/* line 389, ../sass/main.scss */
.main .footer .footer-left {
  display: inline-block;
  vertical-align: middle;
  width: 35%;
}
/* line 395, ../sass/main.scss */
.main .footer .footer-center {
  display: inline-block;
  vertical-align: middle;
  width: 30%;
  text-align: center;
  font-size: 10px;
  opacity: 0.5;
}
/* line 403, ../sass/main.scss */
.main .footer .footer-center span {
  font-size: 12px;
}
/* line 408, ../sass/main.scss */
.main .footer .footer-right {
  display: inline-block;
  vertical-align: middle;
  width: 35%;
  text-align: right;
}
/* line 415, ../sass/main.scss */
.main .footer .button {
  display: inline-block;
  border: 2px solid #fff;
  border-radius: 18px;
  font-size: 14px;
  line-height: 32px;
  letter-spacing: 2.8px;
  color: #fff;
  padding: 0 25px;
  text-transform: uppercase;
  text-align: center;
  -moz-transition: all 0.25s linear;
  -o-transition: all 0.25s linear;
  -webkit-transition: all 0.25s linear;
  transition: all 0.25s linear;
}
/* line 429, ../sass/main.scss */
.main .footer .button:hover {
  color: #000;
  background-color: #fff;
}
/* line 436, ../sass/main.scss */
.main .mobile {
  position: relative;
  display: none;
  text-align: center;
}
@media (max-width: 1023px) {
  /* line 436, ../sass/main.scss */
  .main .mobile {
    display: block;
  }
}
/* line 445, ../sass/main.scss */
.main .mobile .tt-container {
  display: inline-block;
  vertical-align: middle;
  width: 80.72917vw;
  margin: 0 auto;
  opacity: 0;
  -moz-transform: scale(0.7);
  -ms-transform: scale(0.7);
  -webkit-transform: scale(0.7);
  transform: scale(0.7);
  -moz-transition: all 5s cubic-bezier(0, 0.72, 0.21, 0.99) 0s;
  -o-transition: all 5s cubic-bezier(0, 0.72, 0.21, 0.99) 0s;
  -webkit-transition: all 5s cubic-bezier(0, 0.72, 0.21, 0.99);
  -webkit-transition-delay: 0s;
  transition: all 5s cubic-bezier(0, 0.72, 0.21, 0.99) 0s;
}
/* line 456, ../sass/main.scss */
.main .mobile .tt-container .artists {
  color: #fff;
  font-size: 11.19792vw;
  line-height: 12.10938vw;
  text-transform: uppercase;
}
/* line 463, ../sass/main.scss */
.main .mobile .tt-container .line {
  width: 35.28646vw;
  height: 0.78125vw;
  background-color: #fff;
  margin: 3.90625vw auto;
}
/* line 470, ../sass/main.scss */
.main .mobile .tt-container .tt {
  color: #ff8683;
  font-size: 10.80729vw;
  line-height: 12.10938vw;
  text-transform: uppercase;
}
/* line 477, ../sass/main.scss */
.main .mobile .tt-container .subline {
  color: #fff;
  font-size: 6.11979vw;
  text-transform: uppercase;
}
/* line 484, ../sass/main.scss */
.main .mobile .mobile-panel {
  background-color: #ff8683;
  margin-top: 6.51042vw;
  padding: 7.8125vw;
  -moz-transform: translateY(100px);
  -ms-transform: translateY(100px);
  -webkit-transform: translateY(100px);
  transform: translateY(100px);
  -moz-transition: all 5s cubic-bezier(0, 0.72, 0.21, 0.99) 0s;
  -o-transition: all 5s cubic-bezier(0, 0.72, 0.21, 0.99) 0s;
  -webkit-transition: all 5s cubic-bezier(0, 0.72, 0.21, 0.99);
  -webkit-transition-delay: 0s;
  transition: all 5s cubic-bezier(0, 0.72, 0.21, 0.99) 0s;
}
/* line 493, ../sass/main.scss */
.main .mobile .mobile-panel .copy-container {
  padding: 0 5.20833vw;
}
/* line 496, ../sass/main.scss */
.main .mobile .mobile-panel .copy-container .copy {
  color: #000;
  font-size: 4.6875vw;
  line-height: 5.46875vw;
}
/* line 502, ../sass/main.scss */
.main .mobile .mobile-panel .copy-container .button {
  display: inline-block;
  background-color: #fff;
  margin-top: 3.90625vw;
  border: 0.39063vw solid #fff;
  border-radius: 4.81771vw;
  font-size: 3.64583vw;
  line-height: 9.11458vw;
  letter-spacing: 0.72917vw;
  color: #ff8683;
  padding: 0 3.90625vw;
  text-transform: uppercase;
  text-align: center;
}
/* line 518, ../sass/main.scss */
.main .mobile .mobile-panel .player {
  position: relative;
  margin: 10.41667vw auto;
}
/* line 522, ../sass/main.scss */
.main .mobile .mobile-panel .player img {
  width: 100%;
  height: auto;
}
/* line 527, ../sass/main.scss */
.main .mobile .mobile-panel .player .player-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
/* line 535, ../sass/main.scss */
.main .mobile .mobile-panel .player .player-overlay svg {
  fill: #fff;
  width: 18.61979vw;
  height: auto;
}
/* line 543, ../sass/main.scss */
.main .mobile .mobile-panel .button {
  display: inline-block;
  border: 0.39063vw solid #fff;
  border-radius: 4.81771vw;
  font-size: 3.64583vw;
  line-height: 9.11458vw;
  letter-spacing: 0.72917vw;
  color: #fff;
  width: 61.97917vw;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 5.20833vw;
}
/* line 557, ../sass/main.scss */
.main .mobile .mobile-panel .footer-center {
  font-size: 2.60417vw;
  opacity: 0.5;
  margin-top: 5.20833vw;
}
/* line 562, ../sass/main.scss */
.main .mobile .mobile-panel .footer-center span {
  font-size: 2.86458vw;
}

/* line 570, ../sass/main.scss */
.video-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 1000;
  overflow: hidden;
  pointer-events: none;
}

/* line 582, ../sass/main.scss */
.video-overlay-inner {
  height: 100%;
  width: 0%;
  background-color: #000;
  overflow: hidden;
  margin: auto;
  -moz-transition: width 0.35s ease-in;
  -o-transition: width 0.35s ease-in;
  -webkit-transition: width 0.35s ease-in;
  transition: width 0.35s ease-in;
}

/* line 592, ../sass/main.scss */
.youtube-video {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
}

/* line 598, ../sass/main.scss */
.youtube-video iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* line 606, ../sass/main.scss */
.outer {
  display: table;
  position: relative;
  height: 100%;
  width: 100%;
}

/* line 613, ../sass/main.scss */
.middle {
  display: table-cell;
  vertical-align: middle;
}

/* line 618, ../sass/main.scss */
.inner {
  margin-left: auto;
  margin-right: auto;
}

/* line 623, ../sass/main.scss */
.close {
  position: absolute;
  right: 32px;
  top: 32px;
  width: 32px;
  height: 32px;
  opacity: 1;
  cursor: pointer;
  display: none;
  -moz-transition: opacity 0.25s linear;
  -o-transition: opacity 0.25s linear;
  -webkit-transition: opacity 0.25s linear;
  transition: opacity 0.25s linear;
}
/* line 633, ../sass/main.scss */
.close svg {
  fill: #ff8683;
}
/* line 640, ../sass/main.scss */
.close:hover {
  opacity: 0.6;
}

/* line 646, ../sass/main.scss */
.overlay body {
  overflow-y: scroll;
  min-height: auto;
}
/* line 651, ../sass/main.scss */
.overlay .main {
  overflow: hidden;
}
/* line 655, ../sass/main.scss */
.overlay .video-overlay {
  height: 100%;
  pointer-events: all;
}
/* line 660, ../sass/main.scss */
.overlay .video-overlay-inner {
  width: 100%;
  -moz-transition: width 1s;
  -o-transition: width 1s;
  -webkit-transition: width 1s;
  transition: width 1s;
}
/* line 665, ../sass/main.scss */
.overlay .close {
  display: block;
}

/* line 670, ../sass/main.scss */
.show {
  /*.title {
    @include animation(title-animation 1s ease-out 0s 1 normal forwards);

    @include keyframes (title-animation) {
      0% {
        opacity: 0;
        @include transform(scale(.9));
      }
      100% {
        opacity: 1;
        @include transform(scale(1));
      }
    }
  }*/
}
/* line 671, ../sass/main.scss */
.show .main {
  opacity: 1;
}
/* line 675, ../sass/main.scss */
.show .background {
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
}
/* line 679, ../sass/main.scss */
.show .panel {
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
  opacity: 1;
}
/* line 684, ../sass/main.scss */
.show .footer {
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
  opacity: 1;
}
/* line 690, ../sass/main.scss */
.show .mobile .tt-container, .show .mobile .mobile-panel {
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
  opacity: 1;
}