/*                                                                           #shows_flip */
  .showsflip-container {
    opacity: 0;
    position: fixed;top: 50%;left: 50%;z-index: 3;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -ms-perspective: 1000px;
    -o-perspective: 1000px;
    perspective: 1000px;
    width: 300px;height: 300px;
    width: 600px;height: 450px;
    margin-top: -150px;margin-left: -3000px;
    margin-top: -225px;
  }
  .showsflipper {
    position: relative;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }
  .showsfront {
    position: absolute;top: 0;left: 0;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
   width: 600px;height: 450px;
  }
  #collaborations-table {
    display: table;
    position: absolute;top: 50%;left: 50%;
    width: 600px;height: 450px;
    margin-left: -300px;margin-top: -225px;
    overflow: hidden;
  }


  #bewitched {display: table-cell;}


.golacki {
  display: none;opacity: 0;
  position: absolute;top: 50%;left: 50%;
  -webkit-transform: translate(-50%,-50%);
     -moz-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
       -o-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
  width: 600px;height: 450px;
  border: 3px solid #fff;
}

#golackicover,
#latenooncover,
#bewitchedcover {opacity: 1;z-index: 15} /* the top images */

#dreamtime1 {z-index: 8}
#dreamtime2 {z-index: 7}
#dreamtime3 {z-index: 6}
#tawe1      {z-index: 5}
#tawe1a      {z-index: 4}
#tawe2      {z-index: 3}
#passerby2  {z-index: 2}
#passerby1  {z-index: 1}

.bewitched {
  display: none;opacity: 0;
  position: absolute;top: 50%;left: 50%;
  -webkit-transform: translate(-50%,-50%);
     -moz-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
       -o-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
  width: 600px;height: 450px;
  border: 3px solid #fff;
}
#bewitched1 {z-index: 11}
#bewitched2 {z-index: 10}
#bewitched4 {z-index: 9}
#bewitched5 {z-index: 8}
#bewitched6 {z-index: 7}

#bewitched8 {z-index: 5}
#bewitched9 {z-index: 4}
#bewitched10 {z-index: 3}
#bewitched11 {z-index: 2}
//#bewitched12 {z-index: 1}



/*                                                                    titles */
#startmofo {display: block;opacity: 1;cursor: pointer;}

.titles,
.continue {
  display: none;cursor: pointer;
  opacity: 1;
  position: fixed;right: 1rem;bottom: 1rem;left: auto;z-index: 223;
  /*width: 300px;
  max-width: 100%;*/
  text-align: right;
  /*padding: .5rem;*/
  font-family: 'Mono',monospace;
  font-size: 1.25rem!important;
  font-weight: 400;
  color: #fff
}

.continue:hover {
  cursor: pointer;
  text-shadow: 0 0 27px #fff;
}
#stopmofo,
#continuemofo {display: none;cursor: pointer;}

  .mofo {color: #fff;font-size: 1.25rem!important;font-family: 'Mono',monospace!important;font-weight: 400}

  .mofo b {border-bottom: 1px dotted #fff;font-family: 'Mono',monospace!important;font-weight: 400}

  .mofo b:hover {border-bottom: 1px solid #fff}

  #golackicover,
  #bewitchedcover {transition: opacity 2s}

  .infotitle,
  .infocollab,
  .photocredit {font-family: 'Cursive Light',sans-serif!important;font-size: 110%}