/* SPECIAL PANEL RESET */

@media only screen and (max-width: 640px) {
	.panel,
	#artist-info {
		display: none !important;
	}
}


@font-face {
    font-family: 'GTCinetypeLight-Italic';
    src: url('font/GT-Cinetype-Light-Italic.eot?#iefix') format('embedded-opentype') 
        url('font/GT-Cinetype-Light-Italic.woff') format('woff'), 
        url('font/GT-Cinetype-Light-Italic.ttf')  format('truetype'),
        url('font/GT-Cinetype-Light-Italic.svg#GT-Cinetype-Light-Italic') format('svg');
}

body {
   background-color: black;
}

@media screen and (min-width: 640px) {
  #text {
   font-size: 1.5rem;
 }
}

#text{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 1rem 0;
   position: absolute;
   z-index: 100;
   top: 0;
   left: 5%;
   width: 90%;
   max-height: 100vh;
   overflow: scroll;
   font-family: 'GTCinetypeLight-Italic', "Helvetica Neue Light", sans-serif;
   font-size: 1.125rem;
   -webkit-font-smoothing: none;
}
.touch #text{
   -webkit-overflow-scrolling: touch;
}
@media screen and (min-width: 640px) {
  #text{
     position: absolute;
     z-index: 100;
     top: 48%;
     left: 50%;
     width: 55%;
     -webkit-transform: translate3d(-50%,-50%,0);
     transform: translate3d(-50%,-50%,0);
    }
}

#text.selected-text a,#text.selected-text span {
    opacity: .125;
}

#text.selected-text .selected-link {
    opacity: 1;
}

#text p {
   color: white;
   text-align: center;
   line-height: 1;
}

#text p > a {
    color: white;
    text-decoration: none;
    display: inline-block;
    padding: .375rem .25rem .5rem;
    margin-bottom: .5rem;
    border-bottom: 1px dashed rgba(255,255,255,.75);
    position: relative;
}

@-webkit-keyframes text-border {
    0% { opacity: 0; }
    65.99% { opacity: 0; }
    66% { opacity: .6; }
    66.87% { opacity: .6; }
    66.88% { opacity: 0; }
    98.99% { opacity: 0; }
    99% { opacity: 1; }
    100% {opacity: 1; }
}

@-keyframes text-border {
    0% { opacity: 0; }
    65.99% { opacity: 0; }
    66% { opacity: .6; }
    66.87% { opacity: .6; }
    66.88% { opacity: 0; }
    98.99% { opacity: 0; }
    99% { opacity: 1; }
    100% {opacity: 1; }
}

@-keyframes text-shadow {
    0% { 
      text-shadow: 0px 0px 0 rgba(0,255,0,0), 0px 0px 0 rgba(255,0,0,0);
    }
    65.99% { text-shadow: 0px 0px 0 rgba(0,255,0,0), 0px 0px 0 rgba(255,0,0,0); }
    66% { text-shadow: -1px -1px 0 rgba(0,255,0,.5), 2px 1px 0 rgba(255,0,0,.6); }
    66.87% { text-shadow: -1px -1px 0 rgba(0,255,0,.5), 2px 1px 0 rgba(255,0,0,.6); }
    66.88% { text-shadow: 0px 0px 0 rgba(0,255,0,0), 0px 0px 0 rgba(255,0,0,0); }
    98.99% {
      text-shadow: 0px 0px 0 rgba(0,255,0,0), 0px 0px 0 rgba(255,0,0,0);
    }
    99% {
      text-shadow: -1px -1px 0 rgba(0,255,0,.875), 2px 1px 0 rgba(255,0,0,1);
    }
    100% {
      text-shadow: -1px -1px 0 rgba(0,255,0,.875), 2px 1px 0 rgba(255,0,0,1);
    }
}

@-webkit-keyframes text-shadow {
    0% { 
      text-shadow: 0px 0px 0 rgba(0,255,0,0), 0px 0px 0 rgba(255,0,0,0);
    }
    65.99% { text-shadow: 0px 0px 0 rgba(0,255,0,0), 0px 0px 0 rgba(255,0,0,0); }
    66% { text-shadow: -1px -1px 0 rgba(0,255,0,.5), 2px 1px 0 rgba(255,0,0,.6); }
    66.87% { text-shadow: -1px -1px 0 rgba(0,255,0,.5), 2px 1px 0 rgba(255,0,0,.6); }
    66.88% { text-shadow: 0px 0px 0 rgba(0,255,0,0), 0px 0px 0 rgba(255,0,0,0); }
    98.99% {
      text-shadow: 0px 0px 0 rgba(0,255,0,0), 0px 0px 0 rgba(255,0,0,0);
    }
    99% {
      text-shadow: -1px -1px 0 rgba(0,255,0,.875), 2px 1px 0 rgba(255,0,0,1);
    }
    100% {
      text-shadow: -1px -1px 0 rgba(0,255,0,.875), 2px 1px 0 rgba(255,0,0,1);
    }
}

#text a {
  -webkit-animation: text-shadow 5s linear 0s infinite;
  animation: text-shadow 5s linear 0s infinite;
}

#text a.selected-link, .no-touch #text a.selected-link:hover {
  border-bottom: 0;
  text-shadow: -1px -1px 0 rgba(0,255,0,0), 2px 1px 0 rgba(255,0,0,0);
  -webkit-animation: none;
  animation: none;
}

.no-touch #text a:hover {
   text-shadow: -1px -1px 0 rgba(0,255,0,.875), 2px 1px 0 rgba(255,0,0,1);
   -webkit-animation: none;
  animation: none;
}

#text a:before, #text a:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height:100%;
}

#text a:before {
    top: 1px;
    left: 2px;
   border-bottom: 1px dashed rgba(255,0,0,1);
   opacity: 0;
}

#text a:after {
    top: -1px;
    left: -2px;
   border-bottom: 1px dashed rgba(0,255,0,.75);
   opacity: 0;
}

#text a:before, #text a:after {
  -webkit-animation: text-border 5s linear 0s infinite;
  animation: text-border 5s linear 0s infinite;
}

#text a.selected-link:before, #text a.selected-link:after, .no-touch #text a.selected-link:hover:before, .no-touch #text a.selected-link:hover:after {
  opacity: 0;
  -webkit-animation: none;
  animation: none;
}

.no-touch #text a:hover:before, .no-touch #text a:hover:after {
  opacity: 1;
  -webkit-animation: none;
  animation: none;
}

#text a.selected-link {
  position: relative;
}

#text a.selected-link:before,.no-touch #text a.selected-link:hover:before {
  opacity: 1;
  background-color: black;
  width: 120%;
  left: -10%;
  z-index:-1;
  border: 0;
  -webkit-transform: skew(-9deg);
  transform: skew(-9deg);
}

.artboard {
    position: absolute;
    top: 0;
    left: 0;
	height: 100vh;
    width: 100vw;
    display: none;
    z-index: 50;
}

.artboard > canvas {
  -webkit-transform-origin: top left;
  transform-origin: top left;
}

.artboard > video {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate3d(-50%,-50%,0);
  transform: translate3d(-50%,-50%,0);
}

.artboard .svg-wrapper {
  position: relative;
  padding-top: 100%;
  -webkit-transform: scale(.5);
}

.artboard .svg-wrapper svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.artboard.selected {
    display: block;
}

/* 000X */
#x {
  background: transparent url(../img/000-sm.png) no-repeat center center;
  background-size: contain;
}

@media screen and (min-width: 640px) {
  #x {
    background-image: url(../img/000.jpg);
  }
}

/* First */
@-webkit-keyframes first-opacity {
    0% { opacity: 0; }
    100% {opacity: 1; }
}
@keyframes first-opacity {
    from { opacity: 0; }
    to {opacity: 1; }
}
@-webkit-keyframes bottom-first-move {
    from { -webkit-transform: translate3d(-50%,calc(-50vh + -50%),0);transform: translate3d(-50%,calc(-50vh + -50%),0);  }
    to { -webkit-transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0);  }
}

@-webkit-keyframes top-first-move {
    from { 
        -webkit-transform: translate3d(-50%,-50%,0); transform: translate3d(-50%,-50%,0);
    }
    to { 
        -webkit-transform: translate3d(-50%,calc(50vh + -50%),0);transform: translate3d(-50%,calc(50vh + -50%),0);
    }
}

#first .top,#first .bottom,#first .top:before, #first .bottom:before {
    position: absolute;
    height: 50vh;
    width: 100vw;
    left: 0;
    overflow: hidden;
}
#first .top:before, #first .bottom:before, #first .top:after, #first .bottom:after {
    content: '';
    display: block;
}
#first .top:before, #first .bottom:before {
    -webkit-animation: first-opacity 2s ease-in-out 0s infinite alternate;
    animation: first-opacity 2s ease-in-out 0s infinite alternate;
}
#first .top:after, #first .bottom:after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8rem;
    height: 8rem;
    border-radius: 4rem;
    -webkit-transform: translate3d(-50%,-50%,0); 
    transform: translate3d(-50%,-50%,0); 
}
#first .top, #first .top:before {
    top: 0;
}
#first .top{
    background-color: #F79837;
}
#first .top:before {
    background-color: #0E1030;
}
#first .top:after {
    background-color: #EE3967;
    -webkit-animation: top-first-move 2s ease-in-out 0s infinite alternate;
    animation: top-first-move 2s ease-in-out 0s infinite alternate;
}
#first .bottom {
    top: 50vh;
    background-color: #46C7F4;
}
#first .bottom:before {
    background-color: #1B3564;
}
#first .bottom:after {
    background-color: #FCF8CE;
    -webkit-animation: bottom-first-move 2s ease-in-out 0s infinite alternate;
    animation: bottom-first-move 2s ease-in-out 0s infinite alternate;
}
/* Went */
#went {
  background: black url(../img/went-sm.jpg) no-repeat center center;
  background-size: cover;
}

@media screen and (min-width: 640px) {
  #went {
    background-image: url(../img/went.jpg);
  }
}

/* Looking */
#looking {
  background: black url(../img/looking-sm.png) no-repeat center center;
  background-size: contain;
}
@media screen and (min-width: 640px) {
  #looking {
    background-image: url(../img/looking.jpg);
  }
}

/* After */
#after {
  background: transparent url(../img/after-sm.png) no-repeat center center;
  background-size: cover;
}
@media screen and (min-width: 640px) {
  #after {
    background-image: url(../img/after.jpg);
  }
}

/* Lockbox */
#lockbox {
  background: transparent url(../img/lockbox.svg) no-repeat center center;
  background-size: auto 80%;
}
#machines {
  background-color: #A084BC;
}

/* smartest */
#smartest {
  background: #efdeec url(../img/smartest-sm.jpg) no-repeat center center;
  background-size: auto 50%;
}
@media screen and (min-width: 640px) {
  #smartest {
    background-image: url(../img/smartest.jpg);
  }
}

/* Doctor */
#doctor {
  background: rgb(45,45,45) url(../img/doctor-sm.jpg) no-repeat center center;
  background-size: auto 90%;
}
@media screen and (min-width: 640px) {
  #doctor {
    background-image: url(../img/doctor.jpg);
  }
}
/* struwwelpeter  */
#struwwelpeter {
  background: transparent url(../img/strup-sm.jpg) repeat center center;
  background-size: cover;
}
@media screen and (min-width: 640px) {
  #struwwelpeter {
    background-image: url(../img/strup.jpg);
  }
}

/* Late */
@-webkit-keyframes spin {
    0% { -webkit-transform: rotateX(0deg); }
    100% { -webkit-transform: rotateX(360deg); }
}
@keyframes spin {
    0% { transform: rotateX(0deg); }
    100% { transform: rotateX(360deg); }
}
#late-group {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: visible;
  -webkit-perspective: 800px;
  perspective: 800px;
  -webkit-perspective-origin: 50% 50% 50%;
  perspective-origin: 50% 50% 50%;
  transform-origin: 50% 50% 50%;
  -webkit-transform-style:preserve-3d;
  transform-style:preserve-3d;
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);

  -webkit-animation: spin 8s linear 0s infinite;
  animation: spin 8s linear 0s infinite;
}

#late-group > div {
  position: absolute;
  height: 50%;
  width: 50%;
  left: 25%;
  -webkit-transform-origin: bottom center;
  transform-origin: bottom center;
  -webkit-transform-style:preserve-3d;
  transform-style:preserve-3d;
  background: transparent url(../img/late/late1.png) no-repeat center -100px;
  -webkit-background-size: cover;
  background-size: cover;
  overflow: visible;
}

/* Wednesday */
#wednesday {
  background-color: #D6C1CE;
}
#wednesday .hidden {
   display: none !important;
   visibility: hidden;
}
#img-map,#img-source {
  /*display: none;*/
}
#wednesday #canvas {
  position: absolute;
  top: 50vh;
  left: 50vw;
  -webkit-transform: translate3d(-50%,-50%,0);
  transform: translate3d(-50%,-50%,0);
  height: 500px;
  width: 500px;
}

/* Chapel */
#collapsed {
  background: white url(../img/collapsed-sm.jpg) no-repeat center center;
  background-size: contain;
}
@media screen and (min-width: 640px) {
  #collapsed {
    background-image: url(../img/collapsed.jpg);
  }
}

/* Chapel */
#chapel {
  background: transparent url(../img/chapel.gif) no-repeat center center;
  background-size: cover;
}
/* Chapel */
#straightened {
  background: transparent url(../img/straightened-sm.gif) repeat center center;
  background-size: 250px 250px;
}
@media screen and (min-width: 640px) {
  #straightened {
    background-image: url(../img/straightened.gif);
  }
}
/* Early */
#early {
  background: transparent url(../img/early-sm.jpg) no-repeat center bottom;
  background-size: cover;
}
@media screen and (min-width: 640px) {
  #early {
    background-image: url(../img/early.jpg);
  }
}

/* Chiba */
#chiba {
  background: transparent url(../img/chiba.jpg) no-repeat center bottom;
  background-size: cover;
}
@media screen and (min-width: 640px) {
  #chiba {
    background-image: url(../img/chiba.jpg);
  }
}
/* Forest */
#forest {
  background: transparent url(../img/forest-sm.jpg) no-repeat center bottom;
  background-size: cover;
}
@media screen and (min-width: 640px) {
  #forest {
    background-image: url(../img/forest.jpg);
  }
}
/* Incantations */
#incantations {
  background: white;
}
#incantations > div {
  position: absolute;
  top: 10vh;
  left: 50%;
  height: 75vh;
  width: 75vh;
  -webkit-transform: translate3d(-50%,0,0);
  transform: translate3d(-50%,0,0);
  -webkit-transition: opacity .125s linear;
  transition: opacity 1s linear;
  opacity: 0;
}
#incantations > div.incant {
  opacity: 1;
}
#incantation1 {
  background: transparent url(../img/incantations/1-sm.jpg) no-repeat center bottom;
  background-size: cover;
}
#incantation2 {
  background: transparent url(../img/incantations/2-sm.jpg) no-repeat center bottom;
  background-size: cover;
}
#incantation3 {
  background: transparent url(../img/incantations/3-sm.jpg) no-repeat center bottom;
  background-size: cover;
}
#incantation4 {
  background: transparent url(../img/incantations/4-sm.jpg) no-repeat center bottom;
  background-size: cover;
}
#incantation5 {
  background: transparent url(../img/incantations/5-sm.jpg) no-repeat center bottom;
  background-size: cover;
}
#incantation6 {
  background: transparent url(../img/incantations/6-sm.jpg) no-repeat center bottom;
  background-size: cover;
}
@media screen and (min-width: 640px) {
  #incantation1 {
    background-image: url(../img/incantations/1.jpg);
  }
  #incantation2 {
    background-image: url(../img/incantations/2.jpg);
  }
  #incantation3 {
    background-image: url(../img/incantations/3.jpg);
  }
  #incantation4 {
    background-image: url(../img/incantations/4.jpg);
  }
  #incantation5 {
    background-image: url(../img/incantations/5.jpg);
  }
  #incantation6 {
    background-image: url(../img/incantations/6.jpg);
  }
}

/* Wish */
#wish {
  background: transparent url(../img/wish.gif) repeat center center;
  background-size: 250px auto;
}

/* standing */
#standing {
  background: #091e2f url(../img/standing/bg.jpg) repeat center center;
  background-size: auto 168px;
}
#standing > div {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  display: none;
}
#standing > div.stand {
  display: block;
}
#standing1 {
  background: transparent url(../img/standing/1-sm.jpg) no-repeat center center;
  background-size: auto 75%;
}
#standing2 {
  background: transparent url(../img/standing/2.jpg) no-repeat center center;
  background-size: auto 75%;
}
#standing3 {
  background: transparent url(../img/standing/3.jpg) no-repeat center center;
  background-size: auto 75%;
}
#standing4 {
  background: transparent url(../img/standing/4.jpg) no-repeat center center;
  background-size: auto 75%;
}
#standing5 {
  background: transparent url(../img/standing/5.jpg) no-repeat center center;
  background-size: auto 75%;
}
/* Haptics */
#haptics {
  background: transparent url(../img/haptics.gif) no-repeat center center;
  background-size: cover;
}
/* map */
#mapping {
  background: black url(../img/map-sm.jpg) no-repeat center center;
  background-size: auto 75%;
}
@media screen and (min-width: 640px) {
  #mapping {
    background-image: url(../img/map.jpg);
  }
}
/* victory */
#victory {
  background: rgb(105,105,95) url(../img/victory-sm.png) no-repeat center center;
  background-size: auto 50%;
}
@media screen and (min-width: 640px) {
  #victory {
    background-image: url(../img/victory.png);
  }
}
/* Along */
#along {
  background: transparent url(../img/along-sm.jpg) repeat center center;
  background-size: contain;
}
@media screen and (min-width: 640px) {
  #along {
    background-image: url(../img/along.jpg);
  }
}
/* China */
#china {
  background: transparent url(../img/china-sm.jpg) repeat center top;
  background-size: cover;
}
@media screen and (min-width: 640px) {
  #china {
    background-image: url(../img/china.jpg);
  }
}