figure,figcaption {margin: 0}
figcaption {opacity: 0}
#spiritfigure,
#foxfigure,
#chairfigure,
#rockfigure,
#veilfigure,
#woolfigure,
#axefigure,
#butohfigure {
  opacity: 0;
  transition: opacity .65s;
  display: block;
  position: absolute;top: 50%;left: 50%;z-index: 12;
  transform: translate(-50%,-50%);
  width: 600px;height: 450px;
}
#foxfigure   {top: calc(1500px + 100%)}
#chairfigure {top: calc(2400px + 100%)}
#rockfigure  {top: calc(3300px + 100%)}
#veilfigure  {top: calc(4200px + 100%)}
#woolfigure  {top: calc(5100px + 100%)}
#axefigure   {top: calc(6000px + 100%)}
#butohfigure {top: calc(6900px + 100%);width: 600px}
#butohfigure img {margin-bottom: 77rem}/*bottom of page, forget doing it on body*/
.akfigure img {/*  make a class so stops affecting video icone etc. PLEASE*/
  opacity: 0;
  display: block;
  position: absolute;top: 50%;left: 50%;
  transform: translate(-50%,-50%);
  width: 600px;height: 450px;
  //width: 100%;
  //max-width: 90vw;//height: auto;/* media query this for mob -600px etc.! ???*/
}  
    #fuck1      {
      z-index: 6; 
      animation-name: carouselspirit;
      animation-duration: 42s;
      animation-delay:  0s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
    #fuck2      {
      z-index: 5; 
      animation-name: carouselspirit;
      animation-duration: 42s;
      animation-delay:  6s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
    #spiritimg2 {
      z-index: 4; 
      animation-name: carouselspirit;
      animation-duration: 42s;
      animation-delay: 12s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
    #spiritimg3 {
      z-index: 3; 
      animation-name: carouselspirit;
      animation-duration: 42s;
      animation-delay: 18s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
    #spiritimg4 {z-index: 2; 
      animation-name: carouselspirit;
      animation-duration: 42s;
      animation-delay: 24s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
    #spiritimg5 {z-index: 1; 
      animation-name: carouselspirit;
      animation-duration: 42s;
      animation-delay: 30s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
    #spiritimg6 {
      z-index: 1; 
      animation-name: carouselspirit;
      animation-duration: 42s;
      animation-delay: 36s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
    #foximg1 {
      z-index: 12;
      animation-name: carouselfox;
      animation-duration: 72s;
      animation-delay:  0s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
    #foximg2 {
      z-index: 11;
      animation-name: carouselfox;
      animation-duration: 72s;
      animation-delay:  6s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
    #foximg3 {
      z-index: 10;
      animation-name: carouselfox;
      animation-duration: 72s;
      animation-delay: 12s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
    #foximg4 {
      z-index: 9; 
      animation-name: carouselfox;
      animation-duration: 72s;
      animation-delay: 18s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
    #foximg5 {
      z-index: 8; 
      animation-name: carouselfox;
      animation-duration: 72s;
      animation-delay: 24s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
    #foximg6 {
      z-index: 7; 
      animation-name: carouselfox;
      animation-duration: 72s;
      animation-delay: 30s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
    #foximg7 {
      z-index: 6; 
      animation-name: carouselfox;
      animation-duration: 72s;
      animation-delay: 36s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
    #foximg8 {
      z-index: 5; 
      animation-name: carouselfox;
      animation-duration: 72s;
      animation-delay: 42s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
    #foximg9 {
      z-index: 4; 
      animation-name: carouselfox;
      animation-duration: 72s;
      animation-delay: 48s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
    #foximg10 {
      z-index: 3; 
      animation-name: carouselfox;
      animation-duration: 72s;
      animation-delay: 54s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
    #foximg10a {
      z-index: 2; 
      animation-name: carouselfox;
      animation-duration: 72s;
      animation-delay: 60s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
    #foximg11 {
      z-index: 1; 
      animation-name: carouselfox;
      animation-duration: 72s;
      animation-delay: 66s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
    #chairimg1 {
      z-index: 10;
      animation-name: carouselchair;
      animation-duration: 60s;
      animation-delay:  0s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
    #chairimg2 {
      z-index: 9; 
      animation-name: carouselchair;
      animation-duration: 60s;
      animation-delay:  6s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
    #chairimg3 {
      z-index: 8; 
      animation-name: carouselchair;
      animation-duration: 60s;
      animation-delay: 12s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
    #chairimg4 {
      z-index: 7; 
      animation-name: carouselchair;
      animation-duration: 60s;
      animation-delay: 18s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
    #chairimg5 {
      z-index: 6; 
      animation-name: carouselchair;
      animation-duration: 60s;
      animation-delay: 24s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
    #chairimg6 {
      z-index: 5; 
      animation-name: carouselchair;
      animation-duration: 60s;
      animation-delay: 30s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
    #chairimg7 {
      z-index: 4; 
      animation-name: carouselchair;
      animation-duration: 60s;
      animation-delay: 36s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
    #chairimg8 {
      z-index: 3; 
      animation-name: carouselchair;
      animation-duration: 60s;
      animation-delay: 42s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
    #chairimg9 {
      z-index: 2; 
      animation-name: carouselchair;
      animation-duration: 60s;
      animation-delay: 48s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
    #chairimg10 {
      z-index: 1; 
      animation-name: carouselchair;
      animation-duration: 60s;
      animation-delay: 54s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
#rockimg1 {
  z-index: 4; 
  animation-name: carouselrock;
  animation-duration: 24s;
  animation-delay:  0s;
  animation-iteration-count: infinite;
  animation-play-state: paused
}
#rockimg2 {
  z-index: 3; 
  animation-name: carouselrock;
  animation-duration: 24s;
  animation-delay:  6s;
  animation-iteration-count: infinite;
  animation-play-state: paused
}
#rockimg3 {
  z-index: 2; 
  animation-name: carouselrock;
  animation-duration: 24s;
  animation-delay: 12s;
  animation-iteration-count: infinite;
  animation-play-state: paused
}
#rockimg4 {
  z-index: 1; 
  animation-name: carouselrock;
  animation-duration: 24s;
  animation-delay: 18s;
  animation-iteration-count: infinite;
  animation-play-state: paused
}
#veilimg2 {
  z-index: 5; 
  animation-name: carouselveil;
  animation-duration: 30s;
  animation-delay:  0s;
  animation-iteration-count: infinite;
  animation-play-state: paused
}
#veilimg3 {
  z-index: 4; 
  animation-name: carouselveil;
  animation-duration: 30s;
  animation-delay:  6s;
  animation-iteration-count: infinite;
  animation-play-state: paused
}
#veilimg4 {
  z-index: 3; 
  animation-name: carouselveil;
  animation-duration: 30s;
  animation-delay: 12s;
  animation-iteration-count: infinite;
  animation-play-state: paused
}
#veilimg5 {
  z-index: 2; 
  animation-name: carouselveil;
  animation-duration: 30s;
  animation-delay: 18s;
  animation-iteration-count: infinite;
  animation-play-state: paused
}
#veilimg6 {
  z-index: 1; 
  animation-name: carouselveil;
  animation-duration: 30s;
  animation-delay: 24s;
  animation-iteration-count: infinite;
  animation-play-state: paused
}
#woolimg1 {
  z-index: 4; 
  animation-name: carouselwool;
  animation-duration: 24s;
  animation-delay:  0s;
  animation-iteration-count: infinite;
  animation-play-state: paused
}
#woolimg2 {
  z-index: 3; 
  animation-name: carouselwool;
  animation-duration: 24s;
  animation-delay:  6s;
  animation-iteration-count: infinite;
  animation-play-state: paused
}
#woolimg3 {
  z-index: 2; 
  animation-name: carouselwool;
  animation-duration: 24s;
  animation-delay: 12s;
  animation-iteration-count: infinite;
  animation-play-state: paused
}
#woolimg4 {
  z-index: 1; 
  animation-name: carouselwool;
  animation-duration: 24s;
  animation-delay: 18s;
  animation-iteration-count: infinite;
  animation-play-state: paused
}
    #axeimg2 {
      z-index: 4; 
      animation-name: carouselaxe;
      animation-duration: 24s;
      animation-delay:  0s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
    #axeimg3 {
      z-index: 3; 
      animation-name: carouselaxe;
      animation-duration: 24s;
      animation-delay:  6s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
    #axeimg4 {
      z-index: 2; 
      animation-name: carouselaxe;
      animation-duration: 24s;
      animation-delay: 12s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
    #axeimg5 {
      z-index: 1; 
      animation-name: carouselaxe;
      animation-duration: 24s;
      animation-delay: 18s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
    #butohimg1 {
      z-index: 3; 
      animation-name: carouselbutoh;
      animation-duration: 18s;
      animation-delay:  0s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
    #butohimg2 {
      z-index: 2; 
      animation-name: carouselbutoh;
      animation-duration: 18s;
      animation-delay:  6s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
    #butohimg3 {
      z-index: 1; 
      animation-name: carouselbutoh;
      animation-duration: 18s;
      animation-delay: 12s;
      animation-iteration-count: infinite;
      animation-play-state: paused
    }
    /*        4images    25%    50%
    /*        5images    20%    40%       */  
    /* 6s ... 6images 0% 16.67% 33.33% to */
    /*        7 images   14.29% 28.58%    */
    /* 9 images 11.11%  22.22% 
       12 images 8.33  16.66*/
   @keyframes carouselspirit  {
        0% {opacity: 0}
    14.29% {opacity: 1} 
    28.58% {opacity: 0}                
      100% {opacity: 0} 
    }
    @keyframes carouselfox {
        0% {opacity: 0}
     8.33% {opacity: 1} 
    16.66% {opacity: 0}                
      100% {opacity: 0} 
    }
    @keyframes carouselchair {
        0% {opacity: 0}
       10% {opacity: 1} 
       20% {opacity: 0}                
      100% {opacity: 0} 
    }
    @keyframes carouselrock {
        0% {opacity: 0}
       25% {opacity: 1} 
       50% {opacity: 0}
      100% {opacity: 0} 
    }
    @keyframes carouselveil {
        0% {opacity: 0}
       20% {opacity: 1} 
       40% {opacity: 0}                
      100% {opacity: 0} 
    }
    @keyframes carouselwool {
        0% {opacity: 0}
       25% {opacity: 1} 
       50% {opacity: 0}
      100% {opacity: 0} 
    }
    @keyframes carouselaxe {
        0% {opacity: 0}
       25% {opacity: 1} 
       50% {opacity: 0}
      100% {opacity: 0} 
    }
    @keyframes carouselbutoh {
        0% {opacity: 0}
       33% {opacity: 1}
       66% {opacity: 0}
      100% {opacity: 0} 
    }
  .carouselcntrl {
    cursor: pointer;
    display: block;
    position: absolute;bottom: 3px;left: 3px;z-index: 999;
    color: #fff;
    transition: color .3s;
    font-size: 1rem;font-family: 'Mono Light',monospace;font-weight: 300;
    padding: 2rem 2rem .5rem .5rem;
    background: rgba(0,0,0,0)
  }
  .carouselcntrl:hover {color: #ccc}
  .button.play {
    padding: 0;cursor: pointer;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border-style: solid;
    border-width: 7px 0px 7px 14px;
    border-color: transparent transparent transparent #fff;
    transform: translateY(.2rem);
    background: transparent
  }
  .button.play:hover {border-color: transparent transparent transparent #ccc}
  .button.pause {
    display: block;padding: 0;
    box-sizing: border-box;
    transform: translateY(.2rem);
    width: 12px;cursor: pointer;
    height: 12px;
    border-style: double;
    border-width: 0 0 0 12px;
    border-color: #fff;
    background: transparent
  }
  .button.pause:hover {border-color: #ccc}
  .infotitle {font-size: 110%;font-family: 'Cursive',sans-serif!important}
  .info {/*                                                            the i */
    display: block;
    position: absolute;bottom: 0;right: 0;z-index: 999;
    padding: 2rem .5rem .25rem 2rem;
    font-size: 1.25rem;
    font-family: 'Mono',monospace;
    color: #fff;
    transition: color .3s;
    background: rgba(0,0,0,0);
    cursor: pointer
  }
  .infoscreen {/*                                   black bg screen for info */
    position: absolute;bottom: 0;right: 0;z-index: 9999;
    width: 100%;height: 0;
    overflow: hidden;
    background: rgba(0,0,0,.35);
    color: #fff;
    transition: height 3s;
    font-size: 1.25rem;
    font-family: 'Cursive Light',monospace;
    font-weight: 300; 
  }
  .infoscreencontent {
    position: relative;top: 0;left: 0;z-index: 9000;
    width: 100%;height: 100%;
    overflow: hidden;/* overflow-y: auto; adjust later */
    padding-top: 1.5rem;padding-left: 1.5rem;
    color: #fff
  }
  .photocredit {
    opacity: 0;
    transition: opacity 1s 1s;
    display: inline-block;
    position: absolute;bottom: 1rem;left: 1.5rem;
  }
  .closeinfo {/*                                               the closing x */
    opacity: 0;
    transition: opacity 1s;
    display: inline-block;
    position: absolute;top: -2rem;right: -1.25rem;z-index: 10000;
    transform: translateX(-5000px) rotate(45deg);
    padding: 2rem;
    color: #fff;
    font-size: 2rem;
    font-family: 'Mono',monospace;
    cursor: pointer;
  }
  a:link.nounderline {display: block;text-decoration: none}
  .vidcam {
    position: absolute;top: auto!important;right: 46px;bottom: 8px!important;left: auto!important;z-index: 10999;
    transform: none!important;
    opacity: 1!important;
    height: 16px!important;width: 31px!important
  }
  #spiritblurb,
  #foxblurb,
  #chairblurb {
    max-width: 95%;
    font-family: 'Cursive Light',sans-serif!important;font-weight: 300;
    letter-spacing: .085rem
  }
  #spiritlogo,
  #foxlogo {/*                                                     A&D logo */
    opacity: 1!important;
    position: absolute;
    top: auto!important;
    right: .5rem!important;
    bottom: .5rem!important;
    left: auto!important;
    z-index: 200000;
    width: 64px!important;height: 48px!important;max-width: 64px!important;max-height: 48px!important;
    transform: none!important
  }
  #playspirit,
  #playfox,
  #playchair, 
  #playrock,
  #playveil,
  #playwool,
  #playaxe,
  #playbutoh {display: none}


  .perfmobtxtspaceaftrname {display: block;height: 1rem;}

@media only screen and (max-width :  600px) {/* too many bloody importants */
  #spiritfigure,
  #foxfigure,
  #chairfigure,
  #rockfigure,
  #veilfigure,
  #woolfigure,
  #axefigure,
  #butohfigure,
  .akfigure img,
  #message,
  #messagebg {
    width: 300px!important;height: 225px!important
  }
  .vidcam,
  #vidcamfox,
  #vidcamspirit,
  #vidcamchair {
    position: absolute;top: auto!important;right: 46px;bottom: 8px!important;left: auto!important;z-index: 10999;
    transform: none!important;
    opacity: 1!important;
    height: 16px!important;width: 31px!important;
  }
  #photocreditbutoh {font-size: 85%}
  .blurb {/*display: none!important*/font-size: .5rem}
  #spiritblurb{line-height: 1.4}
  #foxblurb {line-height: 1.5}
  .perfmobtxtspaceaftrname {height: .05rem;}
  #message,
  #message span {font-size: 90%!important;}

  .infoscreen {
    font-size: 1rem!important;font-family: 'Cursive Light',sans-serif;font-weight: 300
  }
  #spiritlogo,
  #foxlogo {
    opacity: 1!important; 
    position: absolute;bottom: .5rem!important;right: 1rem!important;left: auto!important;z-index: 200000;
    transform: none!important;
    width: 32px!important;height: 24px!important;
  }
}/*                                             /600px  */