@keyframes coverone {
  0% { background-image: url('images/cover.jpg'); }
  49% {background-image: url('images/cover.jpg'); }
  50% { background-image: url('images/1.jpg'), url('images/3.jpg'); }
  100% { background-image: url('images/1.jpg'), url('images/3.jpg'); }
}
@keyframes twothree {
  0% { background-image: url('images/2.jpg'); }
  49% {background-image: url('images/2.jpg'); }
  50% { background-image: url('images/3.jpg'), url('images/5.jpg'); }
  100% { background-image: url('images/3.jpg'), url('images/5.jpg'); }
}
@keyframes fourfive {
  0% { background-image: url('images/4.jpg'), url('images/6.jpg'); }
  49% { background-image: url('images/4.jpg'), url('images/6.jpg'); }
  50% { background-image: url('images/5.jpg'), url('images/7.jpg'); }
  100% { background-image: url('images/5.jpg'), url('images/7.jpg'); }
}
@keyframes sixseven {
  0% { background-image: url('images/6.jpg'), url('images/8.jpg'); }
  49% { background-image: url('images/6.jpg'), url('images/8.jpg'); }
  50% { background-image: url('images/7.jpg'), url('images/9.jpg'); }
  100% { background-image: url('images/7.jpg'), url('images/9.jpg'); }
}
@keyframes eightnine {
  0% { background-image: url('images/8.jpg'), url('images/10.jpg'); }
  49% { background-image: url('images/8.jpg'), url('images/10.jpg'); }
  50% { background-image: url('images/9.jpg'), url('images/11.jpg'); }
  100% { background-image: url('images/9.jpg'), url('images/11.jpg'); }
}
@keyframes teneleven {
  0% { background-image: url('images/10.jpg'), url('images/12.jpg'); }
  49% { background-image: url('images/10.jpg'), url('images/12.jpg'); }
  50% { background-image: url('images/11.jpg'), url('images/13.jpg'); }
  100% { background-image: url('images/11.jpg'), url('images/13.jpg'); }
}
@keyframes twelvethirteen {
  0% { background-image: url('images/12.jpg'), url('images/14.jpg'); }
  49% { background-image: url('images/12.jpg'), url('images/14.jpg'); }
  50% { background-image: url('images/13.jpg'), url('images/15.jpg'); }
  100% { background-image: url('images/13.jpg'), url('images/15.jpg'); }
}
@keyframes fourteenfifteen {
  0% { background-image: url('images/14.jpg'), url('images/16.jpg'); }
  49% { background-image: url('images/14.jpg'), url('images/16.jpg'); }
  50% { background-image: url('images/15.jpg'), url('images/17.jpg'); }
  100% { background-image: url('images/15.jpg'), url('images/17.jpg'); }
}
@keyframes sixteenseventeen {
  0% { background-image: url('images/16.jpg'), url('images/18.jpg'); }
  49% { background-image: url('images/16.jpg'), url('images/18.jpg'); }
  50% { background-image: url('images/17.jpg'), url('images/19.jpg'); }
  100% { background-image: url('images/17.jpg'), url('images/19.jpg'); }
}
@keyframes eighteennineteen {
  0% { background-image: url('images/18.jpg'), url('images/20.jpg'); }
  49% { background-image: url('images/18.jpg'), url('images/20.jpg'); }
  50% { background-image: url('images/19.jpg'), url('images/21.jpg'); }
  100% { background-image: url('images/19.jpg'), url('images/21.jpg'); }
}
@keyframes twentytwentyone {
  0% { background-image: url('images/20.jpg'), url('images/22.jpg'); }
  49% { background-image: url('images/20.jpg'), url('images/22.jpg'); }
  50% { background-image: url('images/21.jpg'), url('images/23.jpg'); }
  100% { background-image: url('images/21.jpg'), url('images/23.jpg'); }
}
@keyframes twentytwotwentythree {
  0% { background-image: url('images/22.jpg'), url('images/24.jpg'); }
  49% { background-image: url('images/22.jpg'), url('images/24.jpg'); }
  50% { background-image: url('images/23.jpg'), url('images/25.jpg'); }
  100% { background-image: url('images/23.jpg'), url('images/25.jpg'); }
}
@keyframes twentyfourtwentyfive {
  0% {  background-image: url('images/24.jpg'), url('images/26.jpg'); }
  49% { background-image: url('images/24.jpg'), url('images/26.jpg'); }
  50% { background-image: url('images/25.jpg'), url('images/27.jpg'); }
  100% { background-image: url('images/25.jpg'), url('images/27.jpg'); }
}
@keyframes twentysixtwentyseven {
  0% {  background-image: url('images/26.jpg'), url('images/28.jpg'); }
  49% { background-image: url('images/26.jpg'), url('images/28.jpg'); }
  50% { background-image: url('images/27.jpg'), url('images/29.jpg'); }
  100% { background-image: url('images/27.jpg'), url('images/29.jpg'); }
}
@keyframes twentyeighttwentynine {
  0% {  background-image: url('images/28.jpg'), url('images/30.jpg'); }
  49% { background-image: url('images/28.jpg'), url('images/30.jpg'); }
  50% { background-image: url('images/29.jpg'), url('images/31.jpg'); }
  100% { background-image: url('images/29.jpg'), url('images/31.jpg'); }
}
@keyframes thirtythirtyone {
  0% {  background-image: url('images/30.jpg'), url('images/32.jpg'); }
  49% { background-image: url('images/30.jpg'), url('images/32.jpg'); }
  50% { background-image: url('images/31.jpg'), url('images/33.jpg'); }
  100% { background-image: url('images/31.jpg'), url('images/33.jpg'); }
}
@keyframes thirtytwothirtythree {
  0% {  background-image: url('images/32.jpg'), url('images/34.jpg'); }
  49% { background-image: url('images/32.jpg'), url('images/34.jpg'); }
  50% { background-image: url('images/33.jpg'), url('images/35.jpg'); }
  100% { background-image: url('images/33.jpg'), url('images/35.jpg'); }
}
@keyframes thirtyfourthirtyfive {
  0% {  background-image: url('images/34.jpg'), url('images/36.jpg'); }
  49% { background-image: url('images/34.jpg'), url('images/36.jpg'); }
  50% { background-image: url('images/35.jpg'); }
  100% { background-image: url('images/35.jpg'); }
}

@keyframes turnover {
  0% { transform: rotate3d(0, 1, 0, 0deg); }
  49% { transform: rotate3d(0, 1, 0, 0deg); }
  50% { transform: rotate3d(0, 1, 0, 180deg); }
  100% { transform: rotate3d(0, 1, 0, 180deg); }
}
@keyframes turnsover {
  0% { transform: rotate3d(0, 1, 0, 0deg); }
  49% { transform: rotate3d(0, 1, 0, 0deg); }
  50% { transform: rotate3d(0, 1, 0, 180deg); }
  100% { transform: rotate3d(0, 1, 0, 180deg); }
}

@keyframes onecover {
  0% { background-image: url('images/1.jpg'); }
  49% {background-image: url('images/1.jpg'); }
  50% { background-image: url('images/cover.jpg'); }
  100% { background-image: url('images/cover.jpg'); }
}

@keyframes threetwo {
  0% { background-image: url('images/3.jpg'); }
  49% {background-image: url('images/3.jpg'); }
  50% { background-image: url('images/2.jpg'); }
  100% { background-image: url('images/2.jpg'); }
}
@keyframes fivefour {
  0% { background-image: url('images/5.jpg'); }
  49% { background-image: url('images/5.jpg'); }
  50% { background-image: url('images/4.jpg'); }
  100% { background-image: url('images/4.jpg'); }
}
@keyframes sevensix {
  0% { background-image: url('images/7.jpg'); }
  49% { background-image: url('images/7.jpg'); }
  50% { background-image: url('images/6.jpg'); }
  100% { background-image: url('images/6.jpg'); }
}
@keyframes nineeight {
  0% { background-image: url('images/9.jpg'); }
  49% { background-image: url('images/9.jpg'); }
  50% { background-image: url('images/8.jpg'); }
  100% { background-image: url('images/8.jpg'); }
}
@keyframes eleventen {
  0% { background-image: url('images/11.jpg'); }
  49% { background-image: url('images/11.jpg'); }
  50% { background-image: url('images/10.jpg'); }
  100% { background-image: url('images/10.jpg'); }
}
@keyframes thirteentwelve {
  0% { background-image: url('images/13.jpg'); }
  49% { background-image: url('images/13.jpg'); }
  50% { background-image: url('images/12.jpg'); }
  100% { background-image: url('images/12.jpg'); }
}
@keyframes fifteenfourteen {
  0% { background-image: url('images/15.jpg'); }
  49% { background-image: url('images/15.jpg'); }
  50% { background-image: url('images/14.jpg'); }
  100% { background-image: url('images/14.jpg'); }
}
@keyframes seventeensixteen {
  0% { background-image: url('images/17.jpg'); }
  49% { background-image: url('images/17.jpg'); }
  50% { background-image: url('images/16.jpg'); }
  100% { background-image: url('images/16.jpg'); }
}
@keyframes nineteeneighteen {
  0% { background-image: url('images/19.jpg'); }
  49% { background-image: url('images/19.jpg'); }
  50% { background-image: url('images/18.jpg'); }
  100% { background-image: url('images/18.jpg'); }
}
@keyframes twentyonetwenty {
  0% { background-image: url('images/21.jpg'); }
  49% { background-image: url('images/21.jpg'); }
  50% { background-image: url('images/20.jpg'); }
  100% { background-image: url('images/20.jpg'); }
}
@keyframes twentythreetwentytwo {
  0% { background-image: url('images/23.jpg'); }
  49% { background-image: url('images/23.jpg'); }
  50% { background-image: url('images/22.jpg'); }
  100% { background-image: url('images/22.jpg'); }
}
@keyframes twentyfivetwentyfour {
  0% {  background-image: url('images/25.jpg'); }
  49% { background-image: url('images/25.jpg'); }
  50% { background-image: url('images/24.jpg'); }
  100% { background-image: url('images/24.jpg'); }
}
@keyframes twentyseventwentysix {
  0% {  background-image: url('images/27.jpg'); }
  49% { background-image: url('images/27.jpg'); }
  50% { background-image: url('images/26.jpg'); }
  100% { background-image: url('images/26.jpg'); }
}
@keyframes twentyninetwentyeight {
  0% {  background-image: url('images/29.jpg'); }
  49% { background-image: url('images/29.jpg'); }
  50% { background-image: url('images/28.jpg'); }
  100% { background-image: url('images/28.jpg'); }
}
@keyframes thirtyonethirty {
  0% {  background-image: url('images/31.jpg'); }
  49% { background-image: url('images/31.jpg'); }
  50% { background-image: url('images/30.jpg'); }
  100% { background-image: url('images/30.jpg'); }
}
@keyframes thirtythreethirtytwo {
  0% {  background-image: url('images/33.jpg'); }
  49% { background-image: url('images/33.jpg'); }
  50% { background-image: url('images/32.jpg'); }
  100% { background-image: url('images/32.jpg'); }
}
@keyframes thirtyfivethirtyfour {
  0% {  background-image: url('images/35.jpg'); }
  49% { background-image: url('images/35.jpg'); }
  50% { background-image: url('images/34.jpg'); }
  100% { background-image: url('images/34.jpg'); }
}

@keyframes turnovers {
  0% { transform: rotate3d(0, 1, 0, 180deg); }
  49% { transform: rotate3d(0, 1, 0, 180deg); }
  50% { transform: rotate3d(0, 1, 0, 0deg); }
  100% { transform: rotate3d(0, 1, 0, 0deg); }
}
@keyframes turnsovers {
  0% { transform: rotate3d(0, 1, 0, 180deg); }
  49% { transform: rotate3d(0, 1, 0, 180deg); }
  50% { transform: rotate3d(0, 1, 0, 0deg); }
  100% { transform: rotate3d(0, 1, 0, 0deg); }
}

@keyframes flipforward {
  0% { 
    left: 0;
    width: 100%;
    transform: rotate3d(0, 1, 0, 0deg);
  }
  100% { 
    left: 0;
    width: 100%;
    transform: rotate3d(0, 1, 0, 180deg);
  }
}
@keyframes flipforwards {
  0% { 
    left: 0;
    width: 100%;
    transform: rotate3d(0, 1, 0, 0deg);
  }
  100% { 
    left: 0;
    width: 100%;
    transform: rotate3d(0, 1, 0, 180deg);
  }
}
@keyframes flipforwarded {
  0% { 
    left: 0;
    width: 100%;
    transform: rotate3d(0, 1, 0, 0deg);
  }
  100% { 
    left: 0;
    width: 100%;
    transform: rotate3d(0, 1, 0, 180deg);
  }
}

@keyframes lpga {
  0% {  background-image: url('images/lookyloo.jpg'); }
  99% {  background-image: url('images/lookyloo.jpg'); }
  100% {  background-image: url('images/1.jpg'); }
}
@keyframes lpgb {
  0% {  background-image: url('images/1.jpg'); }
  99% {  background-image: url('images/1.jpg'); }
  100% {  background-image: url('images/3.jpg'); }
}
@keyframes lpgc {
  0% {  background-image: url('images/3.jpg'); }
  99% {  background-image: url('images/3.jpg'); }
  100% {  background-image: url('images/5.jpg'); }
}
@keyframes lpgd {
  0% {  background-image: url('images/5.jpg'); }
  99% {  background-image: url('images/5.jpg'); }
  100% {  background-image: url('images/7.jpg'); }
}
@keyframes lpge {
  0% {  background-image: url('images/7.jpg'); }
  99% {  background-image: url('images/7.jpg'); }
  100% {  background-image: url('images/9.jpg'); }
}
@keyframes lpgf {
  0% {  background-image: url('images/9.jpg'); }
  99% {  background-image: url('images/9.jpg'); }
  100% {  background-image: url('images/11.jpg'); }
}
@keyframes lpgg {
  0% {  background-image: url('images/11.jpg'); }
  99% {  background-image: url('images/11.jpg'); }
  100% {  background-image: url('images/13.jpg'); }
}
@keyframes lpgh {
  0% {  background-image: url('images/13.jpg'); }
  99% {  background-image: url('images/13.jpg'); }
  100% {  background-image: url('images/15.jpg'); }
}
@keyframes lpgi {
  0% {  background-image: url('images/15.jpg'); }
  99% {  background-image: url('images/15.jpg'); }
  100% {  background-image: url('images/17.jpg'); }
}
@keyframes lpgj {
  0% {  background-image: url('images/17.jpg'); }
  99% {  background-image: url('images/17.jpg'); }
  100% {  background-image: url('images/19.jpg'); }
}
@keyframes lpgk {
  0% {  background-image: url('images/19.jpg'); }
  99% {  background-image: url('images/19.jpg'); }
  100% {  background-image: url('images/21.jpg'); }
}
@keyframes lpgl {
  0% {  background-image: url('images/21.jpg'); }
  99% {  background-image: url('images/21.jpg'); }
  100% {  background-image: url('images/23.jpg'); }
}
@keyframes lpgm {
  0% {  background-image: url('images/23.jpg'); }
  99% {  background-image: url('images/23.jpg'); }
  100% {  background-image: url('images/25.jpg'); }
}
@keyframes lpgn {
  0% {  background-image: url('images/25.jpg'); }
  99% {  background-image: url('images/25.jpg'); }
  100% {  background-image: url('images/27.jpg'); }
}
@keyframes lpgo {
  0% {  background-image: url('images/27.jpg'); }
  99% {  background-image: url('images/27.jpg'); }
  100% {  background-image: url('images/29.jpg'); }
}
@keyframes lpgp {
  0% {  background-image: url('images/29.jpg'); }
  99% {  background-image: url('images/29.jpg'); }
  100% {  background-image: url('images/31.jpg'); }
}
@keyframes lpgq {
  0% {  background-image: url('images/31.jpg'); }
  99% {  background-image: url('images/31.jpg'); }
  100% {  background-image: url('images/33.jpg'); }
}
@keyframes lpgr {
  0% {  background-image: url('images/33.jpg'); }
  99% {  background-image: url('images/33.jpg'); }
  100% {  background-image: url('images/35.jpg'); }
}

@keyframes rpga {
  0% {  background-image: url('images/2.jpg'); }
  99% {  background-image: url('images/2.jpg'); }
  100% {  background-image: url('images/4.jpg'); }
}
@keyframes rpgb {
  0% {  background-image: url('images/4.jpg'); }
  99% {  background-image: url('images/4.jpg'); }
  100% {  background-image: url('images/6.jpg'); }
}
@keyframes rpgc {
  0% {  background-image: url('images/6.jpg'); }
  99% {  background-image: url('images/6.jpg'); }
  100% {  background-image: url('images/8.jpg'); }
}
@keyframes rpgd {
  0% {  background-image: url('images/8.jpg'); }
  99% {  background-image: url('images/8.jpg'); }
  100% {  background-image: url('images/10.jpg'); }
}
@keyframes rpge {
  0% {  background-image: url('images/10.jpg'); }
  99% {  background-image: url('images/10.jpg'); }
  100% {  background-image: url('images/12.jpg'); }
}
@keyframes rpgf {
  0% {  background-image: url('images/12.jpg'); }
  99% {  background-image: url('images/12.jpg'); }
  100% {  background-image: url('images/14.jpg'); }
}
@keyframes rpgg {
  0% {  background-image: url('images/14.jpg'); }
  99% {  background-image: url('images/14.jpg'); }
  100% {  background-image: url('images/16.jpg'); }
}
@keyframes rpgh {
  0% {  background-image: url('images/16.jpg'); }
  99% {  background-image: url('images/16.jpg'); }
  100% {  background-image: url('images/18.jpg'); }
}
@keyframes rpgi {
  0% {  background-image: url('images/18.jpg'); }
  99% {  background-image: url('images/18.jpg'); }
  100% {  background-image: url('images/20.jpg'); }
}
@keyframes rpgj {
  0% {  background-image: url('images/20.jpg'); }
  99% {  background-image: url('images/20.jpg'); }
  100% {  background-image: url('images/22.jpg'); }
}
@keyframes rpgk {
  0% {  background-image: url('images/22.jpg'); }
  99% {  background-image: url('images/22.jpg'); }
  100% {  background-image: url('images/24.jpg'); }
}
@keyframes rpgl {
  0% {  background-image: url('images/24.jpg'); }
  99% {  background-image: url('images/24.jpg'); }
  100% {  background-image: url('images/26.jpg'); }
}
@keyframes rpgm {
  0% {  background-image: url('images/26.jpg'); }
  99% {  background-image: url('images/26.jpg'); }
  100% {  background-image: url('images/28.jpg'); }
}
@keyframes rpgn {
  0% {  background-image: url('images/28.jpg'); }
  99% {  background-image: url('images/28.jpg'); }
  100% {  background-image: url('images/30.jpg'); }
}
@keyframes rpgo {
  0% {  background-image: url('images/30.jpg'); }
  99% {  background-image: url('images/30.jpg'); }
  100% {  background-image: url('images/32.jpg'); }
}
@keyframes rpgp {
  0% {  background-image: url('images/32.jpg'); }
  99% {  background-image: url('images/32.jpg'); }
  100% {  background-image: url('images/34.jpg'); }
}
@keyframes rpgq {
  0% {  background-image: url('images/34.jpg'); }
  99% {  background-image: url('images/34.jpg'); }
  100% {  background-image: url('images/36.jpg'); }
}

html.embed { 
  overflow:hidden;
  cursor: url('../../assets/images/cursor_hand.png'),auto;
}

.embed img, .storybook-fullscreen img, #click-left, #click-right { 
  width: 50%; 
  background-size: cover;
  background-position-x: right;
  background-position-y: top;
  background-repeat: no-repeat;
  position:absolute; 
}

.turnablepage, #third, #second, #first {
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-play-state: paused;
  animation-fill-mode: both;
}

#click-left, #first {  left:0; }
#click-right, #second, #third { left: 50%; }
.turnablepage { animation-name: flipforward; }

#click-right { cursor: url('../../assets/images/cursor-R.png'), pointer; }

#first { 
  animation-name: lpga; 
   background-image: url('images/lookyloo.jpg'); 
}
#second {
  animation-name: coverone, turnover;  
  background-image: url('images/cover.jpg');
}
.embed #second { width: 51.1%; }
#third { background-image: url('images/2.jpg'); }

.storybook-fullscreen img, .storybook-fullscreen #first, .storybook-fullscreen #third { transition-duration: 0s; }