/* =============================================================================
Design: MK @ RCA
Development: TheBlackCurrant.net
Phase 4.1: 2016-02-12
================================================================================ */


/* =============================================================================
 Base
================================================================================ */
html {font-family: 'Abel', sans-serif;box-sizing: border-box;-webkit-text-size-adjust: 100%;}
*,*:before,*:after {box-sizing: inherit;}
body {margin:0; background: black;line-height: 1.2;background:url('../img/moon/bg.jpg'); }

.header,
.newsletter,
.enter,
.footer {padding: 1.5em;  }
.header {background: none;}
.newsletter {background: none;}
.enter {background: none;}
.footer {background: none;}

a:hover {cursor: pointer;}


/* Selectors and Accessories */
::selection {background:none;}
::-moz-selection {  background:none; }

/* ____________________________________________________________________________ FALLBACKS */
#noJS, #no-audio {    position: fixed;
    z-index: 999999;
    top: 50%;
    left: 25%;
    right: 0;
    background: #A92727;
    width: 50%;
    color: white;
    text-align: center;
    padding: 20px;}
#no-audio {top:40%;}
#no-audio h1 {margin: 0; padding: 0; }
#no-audio a {color:white; }

#moon-loader.noAudio  {
  width: 100%;
  height: 100%;
  background:url('../img/moon/moon-mobile-fallback.jpg') no-repeat center center; background-size: cover;
  display: block;
}

/* Firefox super widescreen fallback */
#canvasContainer {overflow: hidden;}


/* PRELOADER */
.pace {
  -webkit-pointer-events: none;
  pointer-events: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

  z-index: 9999999999;
  background: black;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /*height: 1px;*/
  width: 100%;
  height: 100%;

  /*border: 1px solid #C73B05;*/

  overflow: hidden;
}

.pace .pace-progress {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);

  max-width: 100%;
  position: fixed;
  z-index: 2000;
  display: block;
  position: absolute;
  top: 50%;
  bottom:0;
  right: 100%;
  /*height: 100%;*/
  height:1px;
  width: 100%;
  background: #C73B05;
}

.pace {transition: all 0.2s;}
.pace.pace-inactive {
  /*display: none;*/
  background: rgba(0,0,0,0);
}
.pace.pace-inactive .pace-progress {display: none;}



a#newsletter,a#enter, .header .title, .footer .title {opacity: 0;filter: alpha(opacity=0);}
.pace-done a#newsletter, .pace-done a#enter,.pace-done .header .title, .pace-done .footer .title {opacity: 1; filter: alpha(opacity=100);}
#moon-loader {opacity: 0; filter: alpha(opacity=0); transition: opacity 1s ease-in;}
 .pace-done #moon-loader {opacity: 1;filter: alpha(opacity=100);}


.pace-done #newsletter,.pace-done #enter {transition: opacity 3s ease-in;}


.phase svg, .preroll, .fallback, #phase_two-psuedo, .av-controller, #phase_two-controller, #phase_two-psuedo {display:none ;}
.pace-done .phase svg, .pace-done .preroll, .pace-done .fallback, .pace-done #phase_two-psuedo, .pace-done .av-controller, .pace-done #phase_two-psuedo {display: block;}


 #activator-marketplace, #releasedate,img.prerollBlack, #phase_two-psuedo #video-placeholder {opacity: 0;}
 .pace-done #activator-marketplace, .pace-done #releasedate,.pace-done img.prerollBlack, .pace-done #phase_two-psuedo #video-placeholder {opacity: 1;}



#video-placeholder {display: none;}
.pace-done #video-placeholder {display: block;}




/* TOGGLERS */
.indicator_down {margin-bottom:-120px;}
.pace-done .indicator_down {margin-bottom: 0;}




/* CORE CONTAINER */
.content {display: flex;}
.content .phase_container {width:100%; height:auto;  position: relative !important; }

#phase_newsletter {
  background: white;
  position: absolute !important;
  z-index: 7;
  left: -100%;

  width: 100%;
  height: 100%;
  top:0 !important;
  overflow: hidden;
}


#phase_newsletter.active {left: 0;}
#enter {text-decoration: none; color: black; }
#enter.active {
  /*border:1px solid;*/
  /*box-shadow: 0px 0px 0px 1px;*/
  /*opacity: 0 !important;*/
  /*right:-100px;*/
  display: none;
}
/*.pace-done #enter.active {transition: all 0.2s;}*/

#enter.active:hover {background: black; color:white;}

a#newsletter {}
a#newsletter.active {opacity: 0;filter: alpha(opacity=0);display: none;}


#the_transporter {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-direction:column;
  flex-direction: column;
  /*min-height: 100vh;*/
  margin: 0;

  width: 100%;
  height: 100%;
  position: absolute;
}


.main {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-direction:column;
  flex-direction: column;

  -webkit-flex-grow:1;
  flex-grow: 1;
}
.content {
  -webkit-flex-grow:1;
  flex-grow: 1;
  padding: 0;
}
.newsletter {
  -webkit-order:-1;
  order: -1;
  flex-grow: 0;
}

.newsletter.active {
  flex-grow: 5;
  background:white;
}

.newsletter_close {
  position: absolute;
  padding: 0 23px;
  left: 0;
  top: 50%;
  opacity: 0;
  filter: alpha(opacity=0);
}
a.newsletter_close:hover {cursor: pointer;}

.active .newsletter_close {
  opacity: 1;filter: alpha(opacity=100);
  background: url('../img/controllers/marketplace-close.svg') no-repeat;
      height: 30px;
      width: 30px;
      left: 28px;

}


/* =============================================================================
 TRANSPORTER: Structure & Activators
================================================================================ */

#newsletter, #enter {
  position:absolute;
  top: 50%;
  width: 141px;
  padding: 6px 16px;
  display: block; text-transform: uppercase;text-align: center;
  letter-spacing: 0.11em;
  background: white;
  /*border: 1px solid rgba(0,0,0,0);*/
  transition: color 0.3s ease-in !important;

}

.one_two #newsletter:hover,.one_two #enter:hover {box-shadow: 0 0 0 1px rgba(255,255,255,0.75); color:white; background: none;}
.three_four a#newsletter:hover, .three_four a#enter:hover {
  /*color:#a42523; */
    color:#919191;
  /*opacity: 0.5 !important;*/
}

#newsletter {
  -ms-transform:rotate(-90deg); /* IE 9 */
  -webkit-transform: rotate(-90deg); /* Safari */
  transform: rotate(-90deg);
  left:-29px;
}

#enter {
  -ms-transform:rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Safari */
  transform: rotate(90deg);
  right:-29px;
}



.header,.footer,.newsletter, .aside, .phase {

/* Align and distribute flex items on the main axis (horizontally) */
-webkit-justify-content: center;
justify-content: center;

/* Align and distribute flex items on the cross axis (vertically) */
-webkit-align-items: center;
align-items: center;


display: -webkit-flex;	/* Chrome 21+ */
display: flex;
background:none;
}



/* ==========================================================================
 PHASES
 ========================================================================== */

/* Under Warez */
#phase_ouroboros,#phase_two-psuedo,#phase_three-video {height: 100%; width: 100%; margin:0; z-index: 2;   position: absolute;}
#phase_ouroboros,#phase_two-psuedo,#phase_three-video,#phase_two-controller {opacity: 0; filter: alpha(opacity=0);display: none;}
#phase_ouroboros.active,#phase_two-psuedo.active,#phase_three-video.active,#phase_two-controller.active {opacity: 1;display: block;}
#phase_ouroboros {overflow: hidden; /* fix for firefox superwidescreen*/}

/* PHASE: THREE & FOUR
Playlist and Video Need to be within the content frame */
#phase_three-playlist, #phase_four-preorder {display: none;}
#phase_three-playlist.active, #phase_four-preorder.active {display: inherit; opacity: 1; filter: alpha(opacity=100);}


#phase_two-psuedo  {z-index: 3; overflow: hidden}
  /*#phase_two-psuedo #video-placeholder {background: url('../img/screens/video-placeholder.png') center; height: 100%; background-size: cover;}*/
  #phase_two-psuedo #video-placeholder {width: 100%;height: 100%;}

/*
  #phase_two-psuedo #video-placeholder {
    width: 180%;
    height: 180%;
    top: -40%;
    position: absolute;
    left: -40%;
  }
*/

  #phase_two-psuedo #video-placeholder {
    width: 160%;
    height: 160%;
    top: -30%;
    position: absolute;
    left: -30%;
    z-index: 1;
  }


div.preroll {background: url('../img/moon/moon-video-preroll2-bg.jpg') #000000; width: 100%; height: 100%; position: absolute; z-index: 2;}
img.preroll {opacity: 1;}
img.preroll, img.prerollBlack {position:absolute; z-index: 2;
    z-index: 4;
    left: 0;
    right: 0;
    top: 0;
    border: 0;
    margin: auto;
    height: 100%;
}
img.prerollBlack {z-index: 3;}





  /*#phase_two-psuedo img {position: absolute;}*/
#phase_three-playlist  {z-index: 4;background-color: #e6e6e7; transition: all  0.3s;}

#phase_three-playlist.shaded {background:rgba(0,0,0,0);}

#phase_three-video  {z-index: 5;background: black; background:orange;}
#phase_four-preorder  {z-index: 6; background: #101010; }

/* Over Warez */
#the_transporter {z-index: 9999; }

#phase_two-psuedo .video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* PHASE: Four */
#phase_four-preorder .cta {position: absolute; top:50%; width: 36.666%; text-align: center;}
#phase_four-preorder .pull--right {right:0;}
#phase_four-preorder a {display: block; text-decoration: none; color: #535353;}





/* INDICATORS: Phases */
#phase_one, #phase_two, #phase_three, #phase_four, #newsletter, #enter {z-index:9;}
#phase_one, #phase_two, #phase_three, #phase_four,.indicator_up, .indicator_down {height:21px; width:21px; display: block;}
/*#phase_one    {background: url('../img/controllers/phase_one.svg') no-repeat; background-size: 21px;}*/
/*#phase_two    {background: url('../img/controllers/phase_two.svg') no-repeat right; background-size: 21px;}*/
/*#phase_three  {background: url('../img/controllers/phase_three.svg') no-repeat; background-size: 21px;}*/
/*#phase_four   {background: url('../img/controllers/phase_four.svg') no-repeat right; background-size: 21px;}*/
.indicator_up {background: url('../img/controllers/arrow-t.svg') no-repeat center; background-size: 13px;}
.indicator_down {background: url('../img/controllers/arrow-d.svg') no-repeat center; background-size: 13px;}
.one_two .indicator_down {-webkit-filter:invert();}
.header .title, .footer .title {flex-grow: 2;}
.footer .title {margin-bottom: 6px; }
#phase_one, #phase_two, #phase_three, #phase_four,.indicator_up, .indicator_down {
  /*display: -webkit-box;*/
  display: -webkit-flex;
  display: flex;

  -webkit-flex-direction:column;
  flex-direction: column;

  -webkit-flex-grow:1;
  flex-grow: 1;
}


/* CLICKABLE Phase Indicators */
.phase {-webkit-transform: translateZ(0); transform: translateZ(0);}
#the_transporter.one_two .phase.clickable {fill:currentColor; color: #FFFFFF  !important; opacity: 1 !important;  }
#the_transporter.one_two .phase.clickable.active, #the_transporter.one_two .phase.clickable.active .label,#the_transporter.three_four .phase.clickable.active .label {color: #a42523 !important; }


.phase svg {width: 21px; height:21px; display: block;}
.phase {letter-spacing: 0.15em;font-size: 13px;}
.phase .label {color: #dadada !important;}


#phase_one  .label, #phase_three  .label {position: absolute;left: 35px; top: 4px; }
  #phase_one  .label em, #phase_three  .label em {margin-right: 8px;}
#phase_two  .label, #phase_four  .label {position: absolute;right: 35px; top: 4px;}
  #phase_two  .label em, #phase_four  .label em {margin-left: 8px;}


/*#the_transporter.one_two .phase.clickable {fill:currentColor; color: #FFFFFF  !important; opacity: 1 !important;  }*/
/*#the_transporter.one_two .phase.clickable.active {color: #a42523 !important; }*/


#the_transporter.one_two .phase.clickable .label, .phase .label {color: rgba(128, 128, 128, 0.32) !important;}
#the_transporter.three_four .phase.clickable .label {color:#e1e1e1 !important; }

.one_two .phase.clickable:hover {

  -webkit-filter: drop-shadow(0px 0px 4px rgba(255,255,255,0.95));
  filter: drop-shadow(0px 0px 4px rgba(255,255,255,0.95));
  -webkit-transform: translateZ(0)
}
.one_two #phase_one.clickable:hover {
  -webkit-filter: drop-shadow(0px 0px 3px rgba(255,255,255,1));
  filter: drop-shadow(0px 0px 3px rgba(255,255,255,1));
  -webkit-transform: translateZ(0)
}

#the_transporter.three_four .phase.clickable:hover {opacity: 0.5;}
#the_transporter.three_four .phase.clickable.active:hover {opacity: 1;}

#the_transporter.one_two #phase_one.clickable.active:hover, .phase.clickable.active:hover {-webkit-filter: none;filter: none;}






/* ==========================================================================
 The Transporter (Phase Controller)
 ========================================================================== */
 /* PreLoader */
 #loading.init {}
 #loading {position: absolute; width: 50%; height: 10%; left: 0; right:0; bottom:0; top: 0; margin: auto; z-index: 9999999;
   text-align: center;
   background:black;
   color:white;
   overflow: hidden;
   display: none;
 }
 #loading.loaded {height: 0; opacity: 0;filter: alpha(opacity=0);}

footer {overflow: hidden;}
/* Phase 1 & 2 */
#the_transporter.one_two .newsletter, #the_transporter.one_two .enter, #the_transporter.one_two .header, #the_transporter.one_two .footer {background: none !important;}
#the_transporter.one_two .title, #the_transporter.one_two .indicator_up, #the_transporter.one_two .indicator_down {-webkit-filter:invert();filter:invert(100%);}
#the_transporter.one_two .phase {color: #FFFFFF !important; fill:currentColor; }


/* Phase 3 & 4 */
#the_transporter.three_four .newsletter, #the_transporter.three_four .enter, #the_transporter.three_four .header, #the_transporter.three_four .footer {  background: white; }
/* Active State Icon */
#the_transporter .phase {opacity: .1;filter: alpha(opacity=10);}
#the_transporter.three_four .phase.clickable {opacity: 1;filter: alpha(opacity=100);}
#the_transporter.three_four .phase.active {opacity: 1;filter: alpha(opacity=100); color: #a42523 !important;fill:currentColor;}

#the_transporter.one_two .phase {opacity: 0.2;filter: alpha(opacity=20);}
#the_transporter .phase.active {opacity: 1;filter: alpha(opacity=100);}

.indicator_up, .indicator_down {opacity: 0;filter: alpha(opacity=0); cursor: default;}
header.up .indicator_up, footer.down .indicator_down {opacity: 1;filter: alpha(opacity=100);}








/* PHASE 2 */
.av-controller {
  text-align: center;
   /*left:calc(50% - 41px);*/
   top:calc(50% - 49px);
   /*top:50%;*/
  position: absolute;
  left:0;
  /*background: coral;*/
}
.av-controller a {padding: 30px;display: block}
.av-play {display: block; }
.av-play:hover {
  -webkit-filter: drop-shadow(0px 2px 11px rgba(255,255,255,0.75));
  filter: drop-shadow(0px 2px 11px rgba(255,255,255,0.75));
   -webkit-transform: translateZ(0)
}

.av-controller {height: 100%; width: 100%; top:0;}
.av-controller .av-play, .av-controller .av-pause {top:calc(50% - 35px); position: relative; width: 100px;left:calc(50% - 50px);}
.av-controller #prev, .av-controller #next {width: 30%; position: absolute; top:calc(50% - 30px); font-size: 23px;}
.av-controller #prev {left:0;}
.av-controller #next {right:0;}


.av-pause {opacity: 0;}
.av-pause:hover {opacity: 1; transition: all 0.3s ;}

.phase:hover {cursor: pointer;}
.phase.active:hover, .phase.deactivated:hover {cursor: default;}


body.light #the_transporter.one_two.phase_two .title, body.light #the_transporter.one_two.phase_two .indicator_up, body.light #the_transporter.one_two.phase_two .indicator_down{
  -webkit-filter: invert(0);
  filter: invert(0);
}

body.light #the_transporter.one_two.phase_two .phase.clickable {
  fill: currentColor;
  color: #000 !important;
  opacity: 1 !important;
}
body.light #activator-marketplace {
  color: #000;
  border:1px solid rgba(0, 0, 0, 0.51);
  opacity: 0;
}

body.light #the_transporter.one_two.phase_two .phase.clickable .label, body.light .phase .label {
  color: rgba(44,44,44, 0.72) !important;
}

body.light .av-play img, body.light .av-pause img {  -webkit-filter: invert();filter: invert(100%); }
body.light .av-controller #prev, body.light .av-controller #next {color:#606060;}
body.light .av-controller #prev, body.light .av-controller #next {color:#606060;}


#prev, #next {color:white; }
body.light .av-controller #prev.current, body.light .av-controller #next.current, .av-controller #prev.current,.av-controller #next.current {color:#a42523;}
a#prev:hover,a#next:hover {opacity: 0.5;}
#prev.current:hover,#next.current:hover {opacity: 1; cursor: default;}
#prev.current {}
#next.current {}



/* PHASE 4 */
.center {width: 100%; text-align: center;margin:0;}

a.cta-tour {color:#f4f4f4 !important; font-size: 15px; letter-spacing: 1.5px; text-transform: uppercase; }
a.cta-tour:hover {opacity: 0.5;transition: all 0.5s; }

/*#phase_four-preorder {transition: all 0.5s;}*/
/*#phase_four-preorder.threeify {background-color:#e6e6e7; }*/

#phase_four-preorder h2, .cta-tour, .preorder-available { position: absolute; }
#phase_four-preorder h2, .preorder-available {color: #7c777e;}
#phase_four-preorder h2 {    font-size: 24px;    letter-spacing: 0.2px; font-weight: normal; top:20%; }

#preorder-product-container {position: absolute; width: 100%; height: 69%; top:17%; overflow: hidden;
  /*background: coral;*/
}
.product.fifty-wide {width: 50%; float: left; height: 100%; position: relative; margin: auto;}
#digital {border-right: 1px solid #282828;}

.product.fifty-wide h3 {text-align: center; position: relative; top:0; z-index: 9999}



.product h3 {color: #5e5e5e; font-size: 17px; }
.product--image {display: block; margin:auto;
  /*width: 100%; */
  max-width: 430px;
  position: absolute;
  /*top: calc(50% - 170px); */
  top:10px;
  left: 0;
  right: 0;
  height: calc(100% - 100px);
}

@media only screen and (min-height: 830px) {
  .product--image {height:100% !important; max-height: 440px; max-width: inherit; }
}

.marketplaces-container {position: absolute; bottom:15px; left: 0; right: 0; margin: auto; width: auto;max-width: 490px; }
.marketplaces-container a {text-align: center; margin-top: 25px; transition: all 0.3s; width: 33%;}
.marketplaces-container a:hover {
  -webkit-filter: drop-shadow(0px 2px 8px rgba(255,255,255,0.75));
  filter: drop-shadow(0px 2px 8px rgba(255,255,255,0.75));
  -webkit-transform: translateZ(0)
}



.marketplaces-container a img {width: 63%;max-width: 150px; max-height: 40px;}
.marketplace-webstore {width: 70%; border:1px solid white; background:black; color:white !important;

      letter-spacing: 2.25px;
    font-size: 14px;
    text-align: center;
    margin:auto;
    display: block;
    padding: auto 20px;
    padding-top:8px;
    padding-bottom:8px;
 }
 .marketplace-webstore:hover {color:black !important; background:white; border:1px solid rgba(255,255,255,0);}


.store-row {clear: both; display: flex;}
#vinyl .store-row {margin: auto; width: 66.666%;}

.mast, .preorder-available {height:14%; width: 100%; position:absolute;}

.mast {height: 16%;
  /*background:orange;*/
}
 .preorder-available {
   /*background: lime; */
   bottom:5px;font-size: 30px; }
.center--absolute {position: absolute; bottom:calc(50% - 13px); margin: auto; left:0;right:0;}

.dim {opacity: 0.45;}

#digital, #vinyl {
  -webkit-transition: opacity 500ms cubic-bezier(0.610, 0.050, 0.740, 0.710);
     -moz-transition: opacity 500ms cubic-bezier(0.610, 0.050, 0.740, 0.710);
       -o-transition: opacity 500ms cubic-bezier(0.610, 0.050, 0.740, 0.710);
          transition: opacity 500ms cubic-bezier(0.610, 0.050, 0.740, 0.710); /* custom */

  -webkit-transition-timing-function: cubic-bezier(0.610, 0.050, 0.740, 0.710);
     -moz-transition-timing-function: cubic-bezier(0.610, 0.050, 0.740, 0.710);
       -o-transition-timing-function: cubic-bezier(0.610, 0.050, 0.740, 0.710);
          transition-timing-function: cubic-bezier(0.610, 0.050, 0.740, 0.710); /* custom */
}


@media only screen and (max-height: 700px) {
  #phase_four-preorder h2 {font-size: 20px;}
  #preorder-product-container {
    position: absolute;
    width: 100%;
    height: 64%;
    top: 20%;
  }

  .marketplace-webstore {font-size: 9px;}
}

@media only screen and (max-width: 1024px) {
  #phase_four-preorder h2 {font-size: 20px;}
}

@media only screen and (max-width: 1024px) and (max-height:777px) {
  #phase_four-preorder h2 {font-size: 20px;}
  .marketplace-webstore {font-size: 11px;}
  #phase_one .label em, #phase_three .label em, #phase_two .label em, #phase_four .label em {display: none;}
}

@media only screen and (max-width: 900px) {
  #phase_four-preorder h2 {font-size: 16px;}

}






/* ==========================================================================
 NEWSLETTER: Form Highlight
 ========================================================================== */
 .btn-submit   {font-family: 'Abel', sans-serif;  text-transform: uppercase; background:white; border: 1px solid #161417;
 font-size: 23px;
 letter-spacing: 3px;
 padding: 4px 35px;
 text-align: center;
 }
 .btn-submit:hover {cursor: pointer; background: #161417; color: white; }

 #afterSubmit  {
   opacity: 0;
   filter: alpha(opacity=0);
   width: 80%;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   margin: auto;
   z-index: 12;
   border: 0;
   position: absolute;
 }
 #afterSubmit {opacity: 1;filter: alpha(opacity=100);}


 #socials {width:250px; margin:0 auto; padding: 0;position: absolute;bottom: 20%;left: 0;right: 0;}
 #socials li {list-style-type: none; float: left; }
 #socials li a {display: block;}
 #socials li img {height:60px; opacity: 1; filter: alpha(opacity=100); transition: opacity 0.3s }
 #socials li a:hover img {opacity: 0.5;filter: alpha(opacity=50);}


.email-wrapper {
    width: 35%;
    top: 45%;
    position: absolute;
    left: 25%;
    right: 25%;
    margin: auto;
}

/* INPUTS */
.input-field {padding: 0 .5em 2em; flex: 2 0 100%;}

.text-center {text-align: center;}

label{
  display: block;
  position: relative;
  z-index: -9;
  top: 1.3rem;
  /*color: rgba(0,0,0,.3);*/
  color:#161417;
  font-size: 23px;
  font-weight: 400;
      letter-spacing: 0.01em;
  transition: top .3s ease, color .3s ease;
}
label.raised{  top: -.5rem;}
label.highlight{  color: #dadada; /*rgba(0,0,0,.15);*/}

[type="text"], [type="email"]{
  color: #161417;
  padding: .35rem 0;
  font-size: 1.25rem;
  font-weight: 400;
  width: 100%;
  border: none;
  border-bottom: 3px solid;
  background: none;
  transition: color .3s ease;
  text-align: center;
  -webkit-appearance: none;
}
[type="text"]:focus,
[type="email"]:focus{
  color: rgba(0,0,0,1);
  outline: 0;
}


input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {    background-color: none; -webkit-appearance: none; border-radius: 0;}

.hidden {display: none !important;}

.table {display: table; margin: 0 auto;}
.legal {
  position:absolute; bottom:22px;
  width: 100%;
  text-align: center; font-size: 12px;}
.legal p { color: #D0D0D0; margin: 6px 0 3px 0;}
.legal a {text-decoration: none; font-weight: bold; color: #BFBFBF;}
.legal .rca {display: block; margin-bottom: 20px;}
#phase_newsletter h2 {color:#E2E2E2; font-weight: normal; letter-spacing: 1px; font-size: 20px;
  font-weight: 100;
  letter-spacing: 0.01em;
  font-size: 31px;
}
.footer-links {margin: 0; padding: 0;list-style-type: none;}
.footer-links li {float: left; margin: 0 10px;}








/* ==========================================================================
 MARKETPLACE
 ========================================================================== */
.noselect {    -webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
  #activator-marketplace {position: absolute;z-index: 9999999; color: white; border: 1px solid rgba(255, 255, 255, 0.51);padding: 15px 40px; text-align: center;
    top:100px;
    margin:auto;
    left:0;
    right:0;
    width:300px;

    width:240px;
    padding:8px 18px;

    transition: all 0.3s ;

   }

   #activator-marketplace.active {
     background: url('../img/controllers/marketplace-close.svg') no-repeat;
     background-size: 30% 40%;
     background-position: center;
   margin-top: 16px;

   height: 20px;
max-width: 20px;
border: none;
text-indent: -999999px;
text-align: center;
padding: 45px 36%;
top:54px;
  border:1px solid rgba(0,0,0,0);
   } /* background will be the x */

   #activator-marketplace.active:hover {border:1px solid rgba(0,0,0,0);}

   #activator-marketplace:hover {
     /*-webkit-box-shadow: 0px 0px 60px 0px rgba(255,255,255,0.5);*/
     /*-moz-box-shadow: 0px 0px 60px 0px rgba(255,255,255,0.5);*/
     /*box-shadow: 0px 0px 60px 0px rgba(255,255,255,0.3);*/
     color: #a42523; border: 1px solid #a42523;

   }

   #activator-marketplace.active {
     -webkit-box-shadow:none;
     -moz-box-shadow:none;
     box-shadow: none;
   }

  #marketplace {position:absolute; z-index:0; background:#110e11; height: 100%; width: 100%;opacity: 0;  transition: all 0.35s ease-in-out;}
  #marketplace.active {opacity:1; z-index: 999999;}
  #marketplace .storesContainer {display: block; position: absolute; width:80%; height:46px; margin:auto; top:0; bottom: 0; left:0; right: 0; text-align: center;}
  #marketplace .stores {margin:0 auto;
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;
  }
  #marketplace .stores a {color:white !important; text-decoration: none; transition: all 0.3s ;
    -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;         /* OLD - Firefox 19- */
    -webkit-flex: 1;          /* Chrome */
    -ms-flex: 1;              /* IE 10 */
    flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-transform: translateZ(0)
  }

  #marketplace .stores a:hover {
    -webkit-filter: drop-shadow(0px 2px 20px rgba(255,255,255,0.5));
    filter: drop-shadow(0px 2px 20px rgba(255,255,255,0.5));

    margin-top:-3px;
  }
  #marketplace .stores a img {height:45px; width: auto; }

  #marketplace .artist, #marketplace .title {
    filter: invert(1);
    -webkit-filter: invert(1);
    -moz-filter: invert(1);
    -o-filter: invert(1);
    -ms-filter: invert(1);

    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    opacity: 0.2;
  }
  #marketplace .artist {top:24px; }
  #marketplace .title {bottom:27px;}


  #releasedate {position: absolute; z-index: 999998; color:#424041;
    width: 210px;
    font-size: 24px;
    /*text-transform: uppercase;*/
    bottom:87px;
    left:0; right:0; margin:0 auto;
    text-align: center;
    letter-spacing: 1px;
  }


  @media (max-width: 1200px) {
    /* Marketplace: Links */
    #marketplace .storesContainer {width:85%; }
    #marketplace .stores a img  { height:38px; }
  }


  @media (max-width: 1024px) {
    /* Marketplace: Links */
    #marketplace .storesContainer {width:95%; height:34px !important; margin: 0; top: calc(50% - 12px ) !important; }
    #marketplace .stores a img  { height:38px; }
  }

  @media (max-width: 850px ) {
    /* Marketplace: Links */
    #marketplace .storesContainer {top:180px;height: auto;}
    #marketplace .stores a {margin-bottom: 0px;}
    #marketplace .stores a img  { height:38px; }
  }

@media (max-width: 850px  ) {
  #marketplace .stores {flex-direction: row; height: auto;}
  #marketplace .stores a img {height:30px; }
}

@media (max-width: 500px  ) {
  #marketplace .stores {flex-direction: column; height: auto;}
}



.phase-left {position:absolute; display: block; left:20px; height:20px; width:20px; }

#phase_one svg, #phase_three svg, #phase_two svg, #phase_four svg {position: absolute;}
/* before translateZ
#phase_one svg, #phase_three svg {left:21px;}
#phase_two svg, #phase_four svg {right:21px;}

#phase_one svg, #phase_two svg {top:21px;}
#phase_three svg, #phase_four svg {bottom:21px;}
*/

#phase_one svg, #phase_three svg {left:0;}
#phase_two svg, #phase_four svg {right:0;}

#phase_one svg, #phase_two svg {top:0;}
#phase_three svg, #phase_four svg {bottom:0;}














/* ==========================================================================
 Animations
 ========================================================================== */
a.phase,#afterSubmit {transition: all 0.3s ;}
#phase_newsletter {transition: all 0.25s ease-in-out;}
#the_transporter .newsletter, #the_transporter .enter, #the_transporter .header, #the_transporter .footer {transition: all 0.35s ;}
#the_transporter.one_two .phase,#the_transporter.one_two .title, #the_transporter.one_two .indicator_up,#the_transporter.three_four .indicator_up, #the_transporter.one_two .indicator_down {transition: all 0.3s ;}

#the_transporter .indicator_up, #the_transporter .indicator_down {transition:all 0.5s; }

.active .newsletter_close {transition: opacity 1.3s ;}
/*.content, #ouroboros_box {transition: all 1.3s ;}*/
.av-controller a {transition: all 0.2s;}
 #activator-marketplace {transition: box-shadow 0.2s;}
#activator-marketplace.active {transition: box-shadow 0s;}
#container--credits {transition: all 0.7s;}
.toggler {
  -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;

}







/* _____________________________________________________________________________ VISUALIZATION: Stage */
#bg {display: none;}
canvas {width: 100%; height: 100%; position: absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  z-index: 0;
}

/* _____________________________________________________________________________ VISUALIZATION: THE MOON */
/* Container */
#oru_moon-container {
  border:none;
  position:absolute;
  margin: auto;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 700px; width: 700px;
  overflow: hidden;
  /*transition: all 1.8s cubic-bezier(0.76, 0.06, 0.32, 0.82);*/
  /*transition: all 2s cubic-bezier(0.79,0.32, 0.82, 0.82);*/
  transition: all 2s cubic-bezier(0.79, 0.3, 0.47, 0.88);
  z-index: 999;
}
#oru_moon-container.init {
  transform: scale(0.85);
  -webkit-transform: scale(0.85);
  -moz-transform: scale(0.85) rotate(0.02deg);
  /*background: red;*/
  display: block;
  top: 0;
}

/* Moon Stuff */
#moon, #moon-light, #moon-eclipse, #moon-eclipse-mask,#moon-darkside {
 position: absolute;
  margin: auto;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;}
#moon {z-index: 9;opacity: 1;filter: alpha(opacity=1);}
#moon-darkside.init {opacity: 1;filter: alpha(opacity=1);}
#moon-darkside {
 mix-blend-mode: soft-light;
 z-index: 11;
 opacity: 0;
 filter: alpha(opacity=0);
 transition: opacity 1.0s ease-out;
}
#moon-light {
   z-index: 10;
   mix-blend-mode: soft-light;
   opacity: 0;
   filter: alpha(opacity=0);
}

#moon-eclipse.init {display: none;}
#moon-eclipse {z-index: 6; width: 100px;display: block;}
#moon-eclipse.active {width: 630px;    transition: width 0.3s ;  }

#moon-eclipse-mask.init { opacity: 0;filter: alpha(opacity=0);}
#moon-eclipse-mask {z-index:5; opacity: 1; filter: alpha(opacity=1);  transition: all 1.0s ease-out;}


#moon-box {
  width: 190px;
  z-index: 999999;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;

  border-radius: 360%;
  /*background: red;*/
height: 190px;
overflow: hidden;
transition: all 0.1s ;

}
#moon-box img {width: 100%; }




/* ____________________________________________________________________________ Audio Playback Controller (Mobile) */
.oru_controls {position: absolute; bottom:calc(50% - 29px); left:calc(50% - 11px); z-index: 9999;
  display: none !important;
}
/*.oru_controls.active {display: block !important;}*/

.oru_controls a {display: block; cursor: pointer;}
.oru_controls.hide, .oru_controls a.active {display: none !important;}


/* ____________________________________________________________________________ VISUALIZER: Feedback Messages */
/* Loader & Info */
#no-audio, #playcontrol {display: none;}



#activator-marketplace.hide, #releasedate.hide {display: none;}



/* PHASE 2 -> 3 ~ Lipht'd*/
#phase_two-psuedo #preroll_yt,#phase_two-psuedo img.prerollBlack {
  border-radius: 0;

  -webkit-transform: translate(0,0) scale(1,1); /* Safari */
  transform: translate(0,0)  scale(1,1);
  transition: transform 0.5s ease-out ;
}
#phase_two-psuedo.lifted #preroll_yt,#phase_two-psuedo.lifted img.prerollBlack {
  /* TODO: Conver the backing image and the black backer to a circle, then I won't have to do the border radius trick. Also, make the backing blacked out version with only the flare so the transition is even smoother. */
  border-radius: 500%;

  -webkit-transform: translate(0,-40px) scale(.45,.45); /* Safari */
  transform: translate(0,-40px)  scale(.45,.45);
  /*transition: transform 0.5s ease-out ;*/
}
/*#phase_two-psuedo.lifted img.prerollBlack {transition: all 0.5s ;}*/

#phase_two-psuedo.lifted #preroll_yt {
  -webkit-animation: fader 0.35s forwards;
  -moz-animation:    fader 0.35s forwards;
  -o-animation:      fader 0.35s forwards;
  animation:         fader 0.35s forwards;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count:1; /* Chrome, Safari, Opera */

}

@-webkit-keyframes fader {
  0% { opacity: 1; }
  10% { opacity: 1; }
  20% { opacity: 0.9; }
  30% { opacity: 0.6; }
  40% { opacity: 0.5; }
  50% { opacity: 0.4; }
  60% { opacity: 0.3; }
  70% { opacity: 0.2; }
  80% { opacity: 0.1; }
  100%   { opacity: 0; }

}
@-moz-keyframes fader {
  0% { opacity: 1; }
  10% { opacity: 1; }
  20% { opacity: 0.9; }
  30% { opacity: 0.6; }
  40% { opacity: 0.5; }
  50% { opacity: 0.4; }
  60% { opacity: 0.3; }
  70% { opacity: 0.2; }
  80% { opacity: 0.1; }
  100%   { opacity: 0; }

}
@-o-keyframes fader {
  0% { opacity: 1; }
  10% { opacity: 1; }
  20% { opacity: 0.9; }
  30% { opacity: 0.6; }
  40% { opacity: 0.5; }
  50% { opacity: 0.4; }
  60% { opacity: 0.3; }
  70% { opacity: 0.2; }
  80% { opacity: 0.1; }
  100%   { opacity: 0; }

}
@keyframes fader {
  0% { opacity: 1; }
  10% { opacity: 1; }
  20% { opacity: 0.9; }
  30% { opacity: 0.6; }
  40% { opacity: 0.5; }
  50% { opacity: 0.4; }
  60% { opacity: 0.3; }
  70% { opacity: 0.2; }
  80% { opacity: 0.1; }
  100%   { opacity: 0; }

}
/**/



#phase_two-psuedo.lifted .preroll.under {background: #e6e6e7; transition: all 0.2s ;}


/* _____________________________________________________________________________ PHASE: Three */
/* Record Container */
#ouroboros {position:absolute;height:100%; width:100%;}
#ouroboros_box {width:100%; height:100%; overflow: hidden; margin:0 auto; /*  background: #e6e6e7; */}



#ouroboros_box .toggler:hover  {opacity: 0.5;}
#ouroboros_box .toggler.show:hover  {opacity: 1;}
#ouroboros_box .toggler.show:hover, #ouroboros_box .toggler.show a:hover {cursor: default;}


/* Activators */
/* SIDE A */
#ouroboros_box.a #side_a .activator img.arrow {display:none;}
#ouroboros_box.a #side_a .activator .label img {left:0;}


/* SIDE B */
#ouroboros_box.b #side_b .activator img.arrow {display:none;}
#ouroboros_box.b #side_b .activator {
  position: relative;
  right: 50%;
}
#ouroboros_box.b #side_b .activator .label img {right:10px; }



.activator {width:25%;height:100%; max-width: 96px;}
#side_a .activator {float:left;}
#side_b .activator {float:right; position: relative; right:0; }


 .activator {transition: all 0.4s ease-out;}
 .activator .label img {transition: all 0.2s;}



#side_a .label_container {left:20px}
#side_b .label_container {right:40px}

.activator .label_container {
  height: 80px;
  width: 100%;
  display: block;
  position: relative;
  /*top:45%;*/
  top: calc(50% - 99px)
}

.activator .label {text-align: center; width:70%; }
#side_a .activator .label {float: right; }
#side_b .activator .label {float:left;}
.activator img {width: 13px; position: relative;}
.activator .label img {width: 150px; top:-9px; }
.activator img.arrow {height: 13px;}

#side_a .activator img {left:15px;}
#side_a .activator .label img {left:20px; }
#side_b .activator img {right:0px;}
#side_b .activator .label img {right:100px; }

.side, .letter {display: block; clear:both; }
.side {font-size: 14px; letter-spacing: 2px; }
.letter {font-size: 60px;margin-top: -10px;}

.inactive .side, .inactive .letter{color: white; }
.inactive img {
  /* v1
  filter: invert(1);
  -webkit-filter: invert(1);
  -moz-filter: invert(1);
  -o-filter: invert(1);
  -ms-filter: invert(1);
  */
}

.toggler a, .toggler a:visited, .toggler a:active {color: #161417;}
.toggler {width: 48%; height: 100%; position: absolute;top:0;z-index: 9;           cursor: pointer;}

#side_a.toggler {left:-50%;}
#side_a.toggler.active {left:0;}
#side_b.toggler {right:-50%;}
#side_b.toggler.active {right:0;}



/* TRACKLISTING */
.tracklisting {
  width:75%;
  padding: 0;
  /*display: none;*/
  transition: all 0.4s ease-out;
  opacity: 0;

  transform-origin: left top;
  transform: rotateY(-90deg);
  transition: all 0.5s cubic-bezier(.36,.64,.34,.96);

  position: relative;
  margin: 0;
  top:calc(44% - 100px)
}


.tracklisting li {list-style-type: none; font-size: 18px; color: #161417;}
.tracklisting li a {    padding-top: 6px;padding-bottom: 7px; width: 100%; display: block; }
.tracklisting li a:hover {cursor: default;}
.tracklisting li em {font-style: normal; padding-right: 23px; }
.active .tracklisting {right:0 !important;}

#side_a .tracklisting {transform-origin: left top;left: 160px; position: relative;float: left;}
#side_b .tracklisting {transform-origin: left top;     float: right; width: 40%; right: 50px;    left: inherit;}

#side_b .tracklisting
{
  float: none;
  /*right: 0;*/
  margin: 0;
  padding: 0;
  position: absolute;
  right:30px !important;
}


/*#side_b .activator img { -moz-transform: scaleX(-1);-o-transform: scaleX(-1);-webkit-transform: scaleX(-1);transform: scaleX(-1);filter: FlipH;-ms-filter: "FlipH";}*/

.show .tracklisting {
  /*display: block;*/
   opacity: 1;
   transform-origin: none;
   transform: none;
   transition: all 0.5s cubic-bezier(.36,.64,.34,.96);
}

.show .tracklisting li {-webkit-animation: FadeIn 1s linear;}
.show .tracklisting li:nth-child(1){ -webkit-animation-delay: .25s }


/* RECORDS */
/*#record {width:805px;height:642px;}*/
#record {width:745px;height:593px; margin: auto; }

#ouroboros_box  {transition: all 0.3s;background:rgba(0,0,0,0);}
#ouroboros_box.fade {background:rgba(0,0,0,1);}

.record_container  {
  -webkit-transition: all 0.6s !important;
    -moz-transition: all 0.6s !important;
  transition: all 0.6s !important;

}
#ouroboros_box.fade .record_container {opacity: 0;}


#record .face img {margin: 0 auto; display: block;}
#record .face {
   background: url(../img/merch/vinyl_shadow.png) center bottom no-repeat;
  /*width:805px;height:674px;*/
  width:100%;
  height:115%;
  position: absolute;top: 0px;left: 0px;
  -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
-webkit-transform: translateZ(0.1px);
    transform: translateZ(0.1px);

    background-size: 110%;
    background-position-y: bottom;
}

#record .face img {width:80%;}


#record .front {}
#record .back {
  -moz-transform: rotateY(180deg);
  -o-transform:rotateY(180deg);
  -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

#record .back img {
  /* Use the same artwork, just flip it with css:  */
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}


#record {
  /*margin:0 auto;*/
  /*position: absolute;*/
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.record_container {
  width: 800px;
  margin:0 auto;
  top: calc(50% - 392px);

  -webkit-transition: margin-left 0.5s;
  position: relative;
/* Firefox */
margin-left: -moz-calc(50% - 400px);
/* WebKit */
margin-left: -webkit-calc(50% - 400px);
/* Opera */
margin-left: -o-calc(50% - 400px);
/* Standard */
margin-left: calc(50% - 400px);
}

#ouroboros_box {position:relative;}
#ouroboros_box.a .record_container {
/* Firefox */
margin-left: -moz-calc(100% - 970px);
/* WebKit */
margin-left: -webkit-calc(100% - 970px);
/* Opera */
margin-left: -o-calc(100% - 970px);
/* Standard */
margin-left: calc(100% - 970px);
}


#ouroboros_box.b .record_container {
  /*margin-left:-65px; v1*/

  margin-left: -moz-calc(20% - 150px);
  margin-left: -webkit-calc(20% - 150px);
  margin-left: -o-calc(20% - 150px);
  margin-left: calc(20% - 150px);
}



/*#ouroboros_box .record_container  {-webkit-transition: all 1s ease-in;transition: all 1s ease-in;}*/
#ouroboros_box.a #record img {-webkit-animation: spin_left .5s  ease-out;}
#ouroboros_box.activated.a #record img {-webkit-animation: spin_none .5s  linear;}


@-webkit-keyframes spin_none {}
@-webkit-keyframes spin_left {
	0%  {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
}

#ouroboros_box.flip.a #record {
    -webkit-transform: rotateY(180deg);
            transform: perspective( 600px ) rotateY(180deg) ;
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s;
}

#ouroboros_box.flip.b #record {
    -webkit-transform: rotateY(-180deg);
            transform: perspective( 600px ) rotateY(-180deg) ;
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s;
}


#container--credits {
  position: absolute;
  bottom: -150px;
  min-height: 150px;
  width: 100%;
  font-size: 13px;
  color: #6F6F6F;
}
#container--credits.active {bottom:0}

.col {
  /*flex: 1;*/
  position: absolute;
}
.col-left   {width: 22%; left:35px;     line-height: 160%;}
.col-mid    {width:44%; left: calc(50% - 22%);}
.col-right  {/*width: 23%; */ width:auto;right:40px;}

.row {margin-bottom: 10px; }
.row:after {content: " ";  display: block; clear:both;}
.row em, .row p {display: block; margin: 0; padding: 0; float:left; }
.row em {width: 22%;  left: 0; font-style: inherit; font-size: 15px;}
.row p  {width: 78%; left: 30%; display: block; line-height: 160%; }

/*
.col-right .row em {width: 26%;}
.col-right .row p {width: 64%}
*/
.col-right .row em {width: 116px;}
.col-right .row p {width: auto;}










/*
                                                                                RECORD MQs: HEIGHTS
*/


@media only screen and (max-height: 925px) {

  .record_container {    top: calc(50% - 352px);   }

  #record {width:695px; height: 553px; }
  .activator .label_container {top: calc(50% - 80px); }
  .tracklisting {top: calc(44% - 92px); }

/*.activated #side_a .label_container {left:30px; }*/


  #container--credits { min-height: 135px;}

}




@media only screen and (max-height: 885px) {

  #record {width:695px; height: 553px; }
  .activator .label_container {top: calc(50% - 88px); }
  .tracklisting {top: calc(44% - 103px); }

/*.activated #side_a .label_container {left:30px; }*/


  /*#ouroboros_box.b .record_container {margin-left:-110px;}*/

}



@media only screen and (max-height: 850px) {
  #record {width:640px; height: 508px;}
  .record_container {    top: calc(50% - 322px);   }

  .activator .label_container {top: calc(50% - 80px); }
  .tracklisting {top: calc(44% - 94px); }

/*.activated #side_a .label_container {left:30px; }*/

  #ouroboros_box.a .record_container {
  /* Firefox */
  margin-left: -moz-calc(100% - 930px);
  /* WebKit */
  margin-left: -webkit-calc(100% - 930px);
  /* Opera */
  margin-left: -o-calc(100% - 930px);
  /* Standard */
  margin-left: calc(100% - 930px);
  }

  /*#ouroboros_box.b .record_container {margin-left:-110px;}*/

}





@media only screen and (max-height: 810px) {
  .record_container {
    top: calc(50% - 292px);
    margin-left:calc(50% - 400px);
  }

  #record {    width: 560px;height: 444px; }
  .activator .label_container {top: calc(50% - 57px); }
  .tracklisting {top:calc(44% - 87px); }


    /*#ouroboros_box.b #side_b .activator {right: 66%;}
  .activated #side_a .label_container {left:30px; }
    #ouroboros_box.a .record_container {
    margin-left: -moz-calc(100% - 660px);
    margin-left: -webkit-calc(100% - 660px);
    margin-left: -o-calc(100% - 660px);
    margin-left: calc(100% - 660px);
    }

    #ouroboros_box.b .record_container {margin-left:-144px;}
*/

    .activator .label img {width: 130px;}
    #side_b .activator .label img {right: 80px;}

    #container--credits {    font-size: 12px; min-height: 120px; }
    .row {margin-bottom: 5px;}
    .row em {font-size: 13px;}

}





@media only screen and (min-width: 1660px) {
  #ouroboros_box.a .record_container {
    margin-left: -moz-calc(100% - 1100px);
    margin-left: -webkit-calc(100% - 1100px);
    margin-left: -o-calc(100% - 1100px);
    margin-left: calc(100% - 1000px)
  }
  #ouroboros_box.b .record_container {margin-left: 215px;}

   .inactive .activator img  {
   filter: invert(0);
   -webkit-filter: invert(0);
   -moz-filter: invert(0);
   -o-filter: invert(0);
   -ms-filter: invert(0);
 }

}


/*
                                                                                RECORD MQs: WIDTHS
*/

@media only screen and (max-width: 1400px) {

  /*.record_container {     background: red;   }*/

  .record_container {
    top: calc(50% - 282px);
    margin-left:calc(50% - 400px);
  }

  #record {  width: 560px;height: 444px; }



  #side_a .tracklisting {left:130px;}
  #side_b .tracklisting {right:0px;}
  #side_b .label_container {right: 30px;}
}

@media only screen and (max-width: 1300px) {

  /*#ouroboros_box.a .record_container { }*/
  #side_a .tracklisting {left:140px;}
  .tracklisting li {font-size:16px;}

}



@media only screen and (max-width: 1288px) {

  /*.record_container {background: lime;  }*/


  #ouroboros_box.a .record_container {
    margin-left: -moz-calc(100% - 860px);
    margin-left: -webkit-calc(100% - 860px);
    margin-left: -o-calc(100% - 860px);
    margin-left: calc(100% - 860px);
  }

  .activator .label img {width: 130px;}
  #side_b .activator .label img {right: 73px;}
  .activator img.arrow {top: -2px;}


  .tracklisting li {font-size: 15px;}
  #side_a .tracklisting {left:130px;width: 45%;}
  #side_b .tracklisting {width: 35%; right:0px !important;}

  /*.activated #side_a .label_container {left: 20px;}*/


  #side_b .label_container {right:20px; }
  #side_b.show .label_container {right: -19px;}

  #ouroboros_box.b #side_b .activator .label img {right:20px; }

}


@media only screen and (max-width: 1177px) {
  /*#ouroboros_box.b .record_container {    margin-left: -85px;}*/

  /*.record_container {background: orange;  }*/


  .record_container {
    top: calc(50% - 282px) !important;
    margin-left:calc(50% - 400px);
  }


    #record {  width: 520px;height: 415px; }



  #ouroboros_box.a .record_container {
    margin-left: -moz-calc(100% - 830px);
    margin-left: -webkit-calc(100% - 830px);
    margin-left: -o-calc(100% - 830px);
    margin-left: calc(100% - 830px);
  }
  #ouroboros_box.b .record_container {
    margin-left: -moz-calc(20% - 170px);
    margin-left: -webkit-calc(20% - 170px);
    margin-left: -o-calc(20% - 170px);
    margin-left: calc(20% - 170px);
}

#side_b .activator .label img {right: 67px;}


  #container--credits {font-size: 12px;}
  .col-left {left:30px !important;}
  .col-right {right:30px;width: auto;}
  .col-right .row {right:10px;}
  .col-right .row em {width: 105px;}
  .row em {font-size: 14px; }


  #side_a .label_container {    left: 10px;}


  #ouroboros_box.b #side_b .activator {   right: 50%;}
  #side_a .tracklisting {width: 40%;left: 93px;}
  #side_b .tracklisting {    width: 37%;right: 10px !important;}
  .tracklisting li {font-size: 14px;}

}


@media only screen and (max-width: 1083px) {

  /*.record_container {background: pink}*/
  .record_container {    margin-left:calc(50% - 400px);  }

  #record {      width: 395px;       height: 313px;   }

  .record_container {top:calc(50% - 222px) !important;}

  .activator .label_container {top: calc(50% - 77px);}
  .tracklisting {top: calc(44% - 97px);}
  .activator .label img {width: 110px;}
  #side_b .activator .label img {right:55px; }
  .activator img.arrow {top: -4px;}

  #ouroboros_box.a .record_container {        margin-left: calc(100% - 756px);   }
  #ouroboros_box.b .record_container {
    margin-left: -moz-calc(20% - 216px);
    margin-left: -webkit-calc(20% - 216px);
    margin-left: -o-calc(20% - 216px);
    margin-left: calc(20% - 216px);
   }


   #container--credits {font-size: 10px;}
   .row em {width: 23.5%; font-size: 12px;}
   .row p {width: 76%; line-height: 150%;}



}



@media only screen and (max-height: 750px) {

  .record_container { top: calc(50% - 362px);
     /*background: coral;*/
   }

  #record {      width: 445px;       height: 353px;   }
  .record_container {top:calc(50% - 252px) !important;}

  .activator .label_container {    top: calc(50% - 87px); }

  .tracklisting {     top: calc(44% - 108px); }
  .tracklisting li {font-size: 14px;}
  #side_b .tracklisting {width: 37%;right: 10px !important;}

  #container--credits {min-height: 110px;}
}




@media only screen and (max-height: 750px) and (max-width: 1024px) {

  /*.record_container {  background: gold}*/

  #record {width: 385px;height: 306px;}

  .record_container {top:calc(50% - 232px) !important;}

  .activator .label_container {    top: calc(50% - 85px);}

  .tracklisting {top:calc(44% - 111px); }
  .tracklisting li {font-size: 14px; }

  #container--credits {    min-height: 110px;}

}

@media only screen and (max-height: 750px) and (max-width: 990px) {
  /*#ouroboros .activator .label img {width: 110px !important;}*/
  .activator .label img {width: 110px;}

  .activator img.arrow {top: -4px;}

  #side_a .activator .label img {left: 14px;}
  #side_b .activator .label img {right: 53px;}
  #side_a .tracklisting {width: 35%;left: 75px;}
  #side_b.show .label_container {right: -40px;}

}








/* =============================================================================
MEDIA QUERIES
 =============================================================================== */

@media only screen and (max-height: 700px) {
  #oru_moon-container {height:auto;}
}

@media only screen and (min-width: 700px) {
.main {
  -webkit-flex-direction:row;
  flex-direction: row;

  -webkit-flex-grow:1;
  flex-grow: 1;
}

.header,.footer,.newsletter,.enter {
  -webkit-flex:0 0 5em;
  -ms-flex: 0 0 5em;
  flex: 0 0 5em;
}

}


/* MOBILE */
.mobile-close {display: none; background: url('../img/controllers/marketplace-close.svg') no-repeat;
    height: 30px;
    width: 30px;
    top: 40px;
    left: calc(50% - 15px);
    position: absolute;
}




/* ____________________________________________________________________________ All Devices ~ Portrait and Landscape */
@media only screen and (max-width : 750px)  {


.preroll, .phase {display: none !important;}

/* Phase Two ~ On click of play button, we'll raise the video to above everything */
#phase_two-psuedo.active .fallback {z-index:99999;}
#phase_two-psuedo .mobile-close {display:none;}

#phase_two-psuedo.active #video-placeholder {z-index: 9;}
#phase_two-psuedo.playing .fallback {z-index:9;display: none;}
#phase_two-psuedo.playing {z-index: 999999999999999; background: rgba(0,0,0,1);}
#phase_two-psuedo.playing .mobile-close {display:block;}

#phase_two-psuedo.targetted {z-index: 9999999;}
#phase_two-psuedo.playing #video-placeholder {
    top: 40%;
    left: 0;
    width: 100%;
    height: auto;

  }



    /* Exterior */
      .title, #emailDiv h2, #marketplace img.artist,#marketplace img.title  {height: 24px;}
      #marketplace .artist {top: 23px;}

      /* Moonstuff */
      /* Since there is no hover state to initite rotation for the moon, we'll use a fallback to hide all of the div contents and display a mobile-friendly background image */
      #moon-loader > div {display: none;}
      #moon-loader, .fallback {
        position: absolute;
        width: 100%;
        height: 100%;
        background:url('../img/moon/moon-mobile-fallback.jpg') no-repeat center center; background-size: cover;
      }

      #moon, #moon-light, #moon-darkside {width: 50% !important;}
      #oru_moon-container, #moon-eclipse, #moon-eclipse-mask {width:100% !important;}

      /* NEWSLETTER */
      .legal p {margin: 2px;}
      .input-field {padding:0 .5em 1em;}

      .oru_controls {position: absolute;z-index: 99999; }
      .pace-done .oru_controls {display: initial;}
      .oru_controls.hideOnMobile {display: none !important;}


      .oru_controls.hide {display: none !important;}


}


/* ____________________________________________________________________________ MOBILE: Landscape */
@media only screen
  and (min-device-width: 320px)
  and (max-device-width: 700px)
  and (orientation: landscape) {

/* NEWSLETTER */
    #newsletter, #enter {top:47%; }
    .email-wrapper {top:25%; width: 50%; left:15%; right:15%; }
    .newsletter_close {    padding: 10% 23px; top: 25%; }

    #afterSubmit {width:80%; height:64%; }
    .input-field {padding-bottom: 1em;}
    .legal p {margin: 2px; font-size: 11px;}
    .legal .rca {margin-bottom: 1px;}
    .legal .rca img {width: 55px; }

    #socials {display: none;}


    #phase_two-psuedo.playing #video-placeholder {
        top: 30%;
        left: 0;
        width: 100%;
        height: auto;
      }

}


/* ____________________________________________________________________________ MOBILE: Portrait */
@media only screen and (max-width: 700px) and (orientation: portrait){

#activator-marketplace {top:70px !important;}
#activator-marketplace.active {top: 35px !important}

#marketplace .storesContainer {top:150px !important;}
#marketplace .stores a {margin-bottom: 30px;}

#releasedate {bottom:66px !important; font-size: 18px; }

#marketplace img.artist {    height: 24px;top: 23px;}
#marketplace img.title { height:24px; bottom:27px;}

/* Newsletter: Activators */
#newsletter,#enter {margin: 0 auto;}



/* Newsletter */
/* Mobile version previous~Coming in from the top:
#phase_newsletter {left: 0 ;top:-100%;}
#phase_newsletter.active {top:0 ;}
.newsletter_close {left: 38%;top: 10%; padding: 10%;}
*/

.email-wrapper {width: 70%; left:15%; right:15%; top:30%; }
.footer-links li {float:none;}
#afterSubmit {width:80%; height:51%; }

/* Newsletter: Socials */
#socials {bottom:33%; }


/* The Moon! */
#oru_moon-container {width:100%;}
.av-controller {    top: calc(50% - 35px);}

}


@media screen and (max-aspect-ratio: 8/5) and (max-width:1000px) {

#phase_two-psuedo #video-placeholder {
    width: 340%;
    height: 340%;
    top: -120%;
    position: absolute;
    left: -120%;
}
}

/****** END: Mobile Responsiveness *******/






.faded {opacity: 0.5 !important;}
.deactivated.faded {opacity:0 !important;}
.deactivated:hover {cursor: default;}