/*==================================================
 * PAGE SHADOW
 * ===============================================*/

.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #bd1c1c;
  -webkit-box-shadow: 0 15px 10px #000;
  -moz-box-shadow: 0 15px 10px #000;
  box-shadow: 0 15px 10px #000;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}







/* ==================================================
 * INTERSTITIAL
 * ==================================================*/


.content {
    display: block;
    font-style: normal;
    text-transform: uppercase;
    line-height: 0.8em;
    letter-spacing: 0.1em;
    font-weight: 800;
    font-size: 240px;
    color: #FFF;
    text-shadow: 0 0 150px #FFF, 0 0 60px #FFF, 0 0 10px #FFF;
  }



  /* ==================================================
   * D_ENGINE
   * ==================================================*/



.flipped_closed {
    transform:
    rotateX(-15deg)
    rotateY(-90deg)
    rotateZ(0deg);
}


.flipped_open {
    transform:
    rotateX(0deg)
    rotateY(0deg)
    rotateZ(0deg);
}

.flipped_closed_shadow {
    transform: skew(0deg,0deg);
}


.flipped_open_shadow {
    transform: skew(0deg,-45deg);
}

.flipped_closed_shadow_corner {
    transform: skew(0deg,0deg);
}


.flipped_open_shadow_corner {
    transform: skew(0deg,-45deg);
}


.button_lit {
animation: A_ontheblink 2s 1;
animation-fill-mode: forwards;
background-color: #15d615;
border: 2px inset #aa696c;
box-shadow: 0 0 4px #30a83c, 0 0 5px #fff, 0 0 6px #fff;
}


  @keyframes A_ontheblink {
    5%, 29%, 38%,40%,42%, 80%, 100%  {
        background-color: #15d615;
        box-shadow: 0 0 4px #15d615, 0 0 5px #fff, 0 0 6px #fff;
    }
     6%, 28%, 30%, 37%, 41%, 43%, 82%{
        background-color: #a83030;
        box-shadow: 0 0 4px #fff, 0 0 5px #15d615, 0 0 6px #15d615;
    }
}


.marquee {
    width: 114px;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}

.marquee span {
    display: inline-block;
    margin-left:5px;
    animation: marquee 15s linear infinite;
}

/*.marquee span:hover {
    animation-play-state: paused
}*/

/* Make it move */
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

/*==================================================
 * LETTER EFFECTS
 * ===============================================*/


 /*==================================================
  * FOLDOUT
  * ===============================================*/



 .letter_foldout:before, .letter_foldout:after{
   position:absolute;
   content: attr(data-number);
   transform-origin: top left;
   top:0;
   left:0;
 }
 .letter_foldout, .letter_foldout:before, .letter_foldout:after{
   transition: all 0.8s ease-in-out;
 }
 .letter_foldout:before{
   color: rgba(255,255,255,1);
   text-shadow:
     -1px 0px 1px rgba(255,255,255,.10),
     1px 0px 1px rgba(0,0,0,.2);
   z-index: 3;
   transform:
     rotateX(0deg)
     rotateY(-15deg)
     rotateZ(0deg);

 }
 .letter_foldout:after{
   color: rgba(0,0,0,.11);
   z-index:2;
   transform:
     scale(1.08,1)
     rotateX(0deg)
     rotateY(0deg)
     rotateZ(0deg)
     skew(0deg,1deg);
 }

.foldout_up0 {}


.foldout_up0:before{
   transform:
     rotateX(0deg)
     rotateY(-70deg)
     rotateZ(0deg);
color: rgba(255,255,255,.8);
 }
 .foldout_up0:after{
   transform:
     scale(1.08,1)
     rotateX(0deg)
     rotateY(40deg)
     rotateZ(0deg)
     skew(0deg,22deg);

 }

/*animation: A_foldout_after 0.8s ease-in-out;*/


 @keyframes A_foldout_before {
   to{
     transform:
       rotateX(0deg)
       rotateY(-70deg)
       rotateZ(0deg);
     }
 }

 @keyframes A_foldout_after {
   to{
     transform:
       scale(1.08,1)
       rotateX(0deg)
       rotateY(40deg)
       rotateZ(0deg)
       skew(0deg,22deg);
     }
 }




/* ==================================================
 * FOLD OUT
 * ==================================================*/



.foldout{
  display: inline-block;
  font-weight: 900;
  font-size: 8em;
  margin: 0;
  position: relative;
  color: #00B4F1;
  transform-style: preserve-3d;
  perspective: 400;
  z-index: 1;
  /*background: url(images/fire.jpg) no-repeat;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;*/
}
.foldout:before, .foldout:after{
  position:absolute;
  content: attr(data-letter);
  transform-origin: top left;
  top:0;
  left:0;
}
.foldout, .foldout:before, .foldout:after{
  transition: all 0.8s ease-in-out;
}
.foldout:before{
  color: #fff;
  text-shadow:
    -1px 0px 1px rgba(255,255,255,.8),
    1px 0px 1px rgba(0,0,0,.8);
  z-index: 3;
  transform:
    rotateX(0deg)
    rotateY(-15deg)
    rotateZ(0deg);
}
.foldout:after{
  color: rgba(0,0,0,.11);
  z-index:2;
  transform:
    scale(1.08,1)
    rotateX(0deg)
    rotateY(0deg)
    rotateZ(0deg)
    skew(0deg,1deg);
}



.foldout_up:before{
  color: #fafafa;
  transform:
    rotateX(0deg)
    rotateY(-70deg)
    rotateZ(0deg);
}
.foldout_up:after{
  transform:
    scale(1.08,1)
    rotateX(0deg)
    rotateY(40deg)
    rotateZ(0deg)
    skew(0deg,22deg);
}


/*==================================================
 * LEGACY BELOW
 * ===============================================*/


 @keyframes A_press_enter {
  /*from {background: url('../img/sprite/keyboard_sheet.png') no-repeat -594px -347px;}
  to {background: url('../img/sprite/keyboard_sheet.png') no-repeat  -228px -101px;}*/
  /*from {background-position:  -594px -347px;}*/
  to {background-position: 140px 147px;}  /*no idea why tf these are the numbers that work*/
 }

.gold {
	color: #D2D174;
	 -webkit-animation-play-state: paused;
    animation-play-state: paused;
}


.gold_pressed0 {
color: #333 !important;
 text-shadow:
 0 0 10px #000,
 0 0 20px #000,
 0 0 10px #000,
 0 0 40px #fff,
 0 0 70px #fff,
 0 0 10px #FFDD1B,
 0 0 10px #FFDD1B,
 0 0 10px #FFDD1B;
 animation:none !important;
}

.gold_primed0 {
 text-shadow:
 0 0 10px #000,
 0 0 20px #000,
 0 0 10px #000,
 0 0 40px #fff,
 0 0 70px #fff,
 0 0 10px #FFDD1B,
 0 0 10px #FFDD1B,
 0 0 10px #FFDD1B;
 animation: A_gold_primed0 3s ease-in-out infinite alternate;
}

.gold_animation0 {
  -webkit-animation: neon_gold 2s ease-in-out infinite alternate;
  -moz-animation: neon_gold 2s ease-in-out infinite alternate;
  animation: neon_gold 2s ease-in-out infinite alternate;
}

.gold_pressed1 {

 text-shadow: 0 0 10px #000, 0 0 20px #000, 0 0 10px #000, 0 0 40px #fff, 0 0 70px #fff, 0 0 10px #FFDD1B, 0 0 10px #FFDD1B, 0 0 10px #FFDD1B;
}

.gold_animation1 {
  -webkit-animation: neon_gold 1.5s ease-in-out infinite alternate;
  -moz-animation: neon_gold 1.5s ease-in-out infinite alternate;
  animation: neon_gold 1.5s ease-in-out infinite alternate;
}

.gold_pressed2 {

 text-shadow: 0 0 10px #000, 0 0 20px #000, 0 0 10px #000, 0 0 40px #fff, 0 0 70px #fff, 0 0 10px #FFDD1B, 0 0 10px #FFDD1B, 0 0 10px #FFDD1B;
}

.gold_animation2 {
  -webkit-animation: neon_gold 1.5s ease-in-out infinite alternate;
  -moz-animation: neon_gold 1.5s ease-in-out infinite alternate;
  animation: neon_gold 1.5s ease-in-out infinite alternate;
}

@keyframes A_gold_primed0 {
 to {
    text-shadow:
    0 0 10px #fff,
    0 0 10px #fff,
    0 0 5px #fff,
    0 0 20px #FFDD1B,
    0 0 60px #FFDD1B,
    0 0 10px #FFDD1B,
    0 0 10px #FFDD1B,
    0 0 10px #FFDD1B;
  }
}

@keyframes neon_gold {
 from {
    text-shadow:
    0 0 10px #fff,
    0 0 10px #fff,
    0 0 5px #fff,
    0 0 7px #ffdd1b,
    0 0 5px #ffdd1b,
    0 0 1px #000;
  }
  to {
   text-shadow:
   0 0 5px #fff,
   0 0 10px #fff,
   0 0 5px #fff,
   0 0 40px #FFDD1B,
   0 0 40px #FFDD1B,
   0 0 5px #FFDD1B,
   0 0 10px #FFDD1B,
   0 0 5px #FFDD1B;
  }
}