Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <body class="rfont pageload" page="0000">
  <about>
    <a href="javascript:void(0)" title="About Deman Drawkcab">i</a>
    <a href="javascript:void(0)" title="Dismiss">&#10005;</a>
    <abouttext class="p-x-2 p-y-1 relative m-t-3 m-x-1">
      <h4>How it's made</h4>
      <p>
        This story is illustrated using only CSS. Every picture is built from layers of HTML. HTML elements which are normally rectangular have been stretched, skewed, angled and rounded to build up illustrations for each page. The Platitudinous Adventures of Deman Drawkcab is entirely drawn with CSS. This isn't necessarily a good idea, but that's what happened.
      </p>
    </abouttext>
  </about>
  <row>
    <background class="responsiveem abs-center d-block">
      <div>
        <i class="abs-center d-block bi0">
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
        </i>
        <i class="abs-center d-block bi1">
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
        </i>
        <i class="abs-center d-block bi2">
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
        </i>
      </div>
    </background>
    <column class="col-2 p-1 pull-right-lg">
      <picture class="responsiveem">
        <div>
          <i class="pi0">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
          </i>
          <i class="pi1">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
          </i>
          <i class="pi2">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
          </i>
          <i class="pi3">
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
          </i>
        </div>
      </picture>
    </column>
    <foreground class="responsiveem abs-center d-block">
      <div>
        <i class="abs-center d-block">
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
          <i></i>
        </i>
      </div>
    </foreground>

    <a copyright class="op05" href="http://www.tinydesign.co.uk/ben-evans-portfolio/index.html" title="(C) Copyright 2018 Ben Evans" target="_blank">&copy; Copyright 2018 Ben Evans</a>
  </row>
  <column class="col-2 flex-end p-x-1 p-t-1 flex">
    <text>
      <page id="page-0000" class="relative m-b-3">
        <div class="p-4">
          <h1>
            <span class="bg-body bg-hilite">The Platitudinous Adventures of Deman Drawkcab</span>
          </h1>
          <p class="line-height-1 op05 m-t-15">
            <span class="bg-body bg-hilite">Written, Illustrated & Produced by <a title="Ben Evans" href="http://www.tinydesign.co.uk">Ben Evans</a></span>
          </p>
        </div>
        <div id="scroll-note" class="text-center">
          READ ON
          <div class="m-t-2"></div>
        </div>
      </page>
      <page id="page-0001" class="relative m-b-3 not-story">
        <div class="p-4">
          <h1>
            Chapter One
          </h1>
          <h2>
            An Imponderable Inconvenience
          </h2>
        </div>
      </page>
      <page id="page-0002" class="relative p-t-2 p-x-2 p-b-1 m-b-3">
        <p>
          Deman Drawkcab is not your average cup of tea. He is slightly different to the established homo-sapien. Not utterly different but by no means run-of-the-mill.
        </p>
        <p>
          For example: Yesterday, Deman had just crossed through Green Park and was now walking up Piccadilly (a road in London). He stopped outside the Ritz (a well known hotel), on his way to a Police station. I should point out he wasn't going there to help out, he was in trouble, but I'll get to that later. Anyway, he was outside the Ritz, waiting to cross the road. The traffic lights to his right had, from his thinking, obviously turned red as the oncoming traffic had stopped, so he began to cross.
        </p>
        <p>
          Now the thing about these lights outside the Ritz is; they have a lovely pedestrian crossing marked on the road, but there is no, nice, green man available to suggest when to cross. Deman presumed it was good to go, as the traffic to his right had stopped and he only needed to make it to the central road reservation after all. But unfortunately the traffic had only stopped to let the vehicles from the junction in front of him out! This traffic roared from the junction, full of lorries, vans and taxis, eager to get where they need to be. It was too late for Deman to turn back now, he was half way across, a white van in the inside lane accelerated towards him fast...
        </p>
      </page>
      <page id="page-0003" class="relative p-t-2 p-x-2 p-b-1 m-b-3">
        <p>
          Sorry to stop at this rather inconvenient moment but I think I may have to fill you in with a few details. Deman Drawkcab is an odd looking man. He is tall, well built, but not visibly muscular, a large build, but not fat. He has a strange mullet hair cut which looks as if it was styled in the 1970's, he gives off the impression of being a bit simple and slow, like a man you wouldn't want to sit next to on the bus for fear you have no idea what he might do next. An inbred appearance might be cruel but the efficient way to describe him.
        </p>
        <p>
          Deman is very antisocial, he has no friends and only really talks in grunts, mainly due to laziness, he could probably hold a meaningful conversation, but anyone is yet to find out. His appearance is deceptive, not in the way you might think, for he is incredibly unfit and very easily gets out of breath, merely walking causes him suitable discomfort.
        </p>
      </page>
      <page id="page-0004" class="relative p-t-2 p-x-2 p-b-1 m-b-3">
        <p>
          He knows he is different, his parents were similar. He has noticed that with every generation the Drawkcab's were getting more and more different from the last, further from the norm, and different in quite an extraordinary way. With each member born into the family’s bloodline, their build has become slightly more bulkier than an average person, but that's pretty insignificant by all accounts. The strange thing is that their appearance doesn't really reflect their biggest difference.
        </p>
        <p>
          Unfortunately Deman has not been able to find any scales strong enough to way himself. Which gives you a clue to his unconventional characteristic. His mum being the curious type: A tall, voluptuous, but not obese, lady. Once had access to a weigh bridge and found she weighed a mere 6500 kg, around 6.5 tons or 1024 stone, that’s roughly 110 times heavier than you or I. Going by the effect he has on his immediate surroundings and over hearing that his mum was double the weight of his grandmother, Deman guessed that he was in fact double the weight of his mum. About the same weight as a double-decker bus!
        </p>
      </page>

      <page id="page-0005" class="relative p-t-2 p-x-2 p-b-1 m-b-3">
        <p>
          Obviously, being the same weight as a double-decker bus has its disadvantages. That much weight delivered through a relatively small footprint causes some issues. Simple things like; not being able to enjoy a nice day at the beach or a long walk in the park, not being able to enter the majority of shops or buildings for fear that the floor will collapse, not being able to cross many small bridges, drive, ride on public transport or indeed, fly in commercial airliners or any aircraft for that matter.
        </p>
        <p>
          But on the flip side it does have a fair number of advantages. Everything is relative and having all that mass compressed into such a small frame does enable him to lift things easily half his weight, such as a car, making changing a tyre a doddle, not that he needs to do this very often, not being able to drive. Also with this great bulk, compared to an average man he appears to be made of iron or in his case, lead, and fairly indestructible when he comes in contact with things that an average man would ever encounter on a day to day basis. Which leads us nicely back to where I interrupted…
        </p>
      </page>

      <page id="page-0006" class="relative p-t-2 p-x-2 p-b-1 m-b-3">
        <p>
          He was almost halfway across the road, a van in the inside lane accelerated towards him. Deman, not being physically fit and hampered by his extreme weight, could not escape the vehicle’s path. Unless this seemingly angry looking van driving noticed Deman and hit the brakes within the next second, there was definitely going to be a nasty accident. The inevitable collision seemed a slow and drawn out process. Deman knew this van would reach him at any second but he seemed pretty relaxed about the whole thing. Time seemed to be almost at a stand still as he watched a state of sheer panic pass onto the driver’s face. His eyes opened wide and fixed on Deman, as his mouth opened and worded some expletives whilst salivating uncontrollably.
        </p>
        <p>
          Deman thought to himself in a very calm, slow and considered manner, “It's not my fault the council didn't make this pedestrian crossing clear enough, is it," and carried on slowly plodding across the road, now looking down at the ground, knowing full well of the situation.
        </p>
      </page>

      <page id="page-0007" class="relative p-t-2 p-x-2 p-b-1 m-b-3">
        <p>
          Deman Drawkcab simply stopped, his oversized size 16 shoes creaking as he did so, extra wide shoes that he had specially made for him, to help spread his weight and stop him sinking into the ground.
        </p>
        <p>
          The van driver only had time to hit the horn, he tried to break but couldn't manoeuvre fast enough and “CRUNCH!” he hit the back of Deman's leg, just hitting his heel. The van jolted up into the air as the driver lost control and veered towards the side of the road where an open topped bus was parked. Deman swung around to his left, stretched out his arm as a far as he could reach and grabbed the vans rear bumper, stopping the van almost instantly and pulling Deman to the ground. This caused the ground to shake quite dramatically. The driver, after almost headbutting the steering wheel was seated, motionless, his jaw dropped, staring forwards, wide eyed, open mouthed, at the corner of the bus he narrowly missed. He still had his hand pressed firmly on the horn, clearly in a state of shock and confusion as to what just happen. Some passer-by ran from the kerb to check the van driver was okay, meanwhile Deman got to his feet, shook his head, brushed down his trousers, noticing he had slightly grazed his knee and scuffed his trouser leg. He promptly set off, leaving the van driver to it and carried on with his seemingly long walk to the police station.
        </p>
      </page>

      <page id="page-0008" transition class="relative p-t-2 p-x-2 p-b-1 m-b-3">
        <p>
          It was actually quite a long walk to the station, especially as didn't like walking much. He did, however, get quite a lot of practice at it, not being able to use many forms of transport.
        </p>
        <p>
          A man he once saved from a near collision wanted to return the favour and made a simple push along scooter for Deman to get around on. It was a massive engineering project and eventually it was designed in a way to withstand the 13 tonne Deman riding it. Unfortunately the small super strength wheels carved deep tracks in the road surface and caused a great deal of damage. He was banned from using it.
        </p>
        <p>
          Deman lives in an old converted train shed in Battersea, near the river. This, he found, was one of a few places with strong enough foundations near the area he grew up in. He liked London for solid floors. The countryside was like quicksand to him when it rained. DD made it habitable himself, most of the internal walls are made of slabs of concrete with the steel rods sticking out and forced into knots, tying together sections of brick wall from demolition sites. Deman makes extra cash by helping out in demolition and the removal of floors, walls and ceilings, it is something he is good at.

        </p>
      </page>
      <page id="page-0009" class="relative p-t-2 p-x-2 p-b-1 m-b-3">
        <p>
          His house is a dank, dingy, mess. There is no paint on the walls, apart from the odd bit of graffiti. It is lit by basic lighting recovered from a shop. Mould grows in the corners of every other room and everything is reinforced with rusty scaffolding, iron clad or made from concrete. Most of the existing train shed windows are boarded up and the only natural light comes from a few transparent panels of tatty plastic corrugated sheets in the roof. His heating is provided by a large, rusty, old, riveted iron boiler that looks as though it came from a ship or factory from the early 20th century. He doesn't really have any soft furnishings, a favourite arm chair of his is made from reinforced concrete with a thick rubber back and cork arms, and this is pretty soft to him. His parents made his bed for him, when he was about 12. And when I say 'made his bed' I mean; designed and built it, and not, just tucked in the sheets. It's made from layers of old woven, stretched out tyres with a steel girder frame. He used to hate the smell of sleeping on rubber when he was a little boy, but he finds it comforting now as it reminds him of his mum and dad.
        </p>
      </page>

      <page id="page-0010" transition class="relative p-t-2 p-x-2 p-b-1 m-b-3">
        <p>
          Walking into central London from his house always causes a few problems. It is quite a fair distance, usually taking a good hour and a half, with all manner of obstacles on the way. He would usually cross the river at Battersea Bridge as it is one of the quietest and strongest. With it being made of cast iron and granite, it seems perfectly able to carry Denam's weight. Chelsea Bridge is closer to his house but he does not quite trust this one, he needs to walk down the centre to be on the safe side (or not as it were), and this just gets annoying as the traffic toot at him a lot, but, if he is in a hurry, it does the job. From here he walks up the Kings road, on the pavement on the right side of the road as this seems rather well built, he has noticed that a lot of pavements can't quite support his weight but has found a route of paths that can lead him to this particular Police Station; up Cadogan Lane, around Belgrave Square, along the left pavement of Piccadilly, across the road and up through Burlington Arcade, one of the few shopping arcades that Deman can enter, it appears to have an incredibly strong floor. Then it’s just a short walk from there to the station.
        </p>
      </page>

      <page id="page-0011" class="relative p-t-2 p-x-2 p-b-1 m-b-3">
        <p>
          The police station was just off Regent Street. Deman had been asked to take part in a line up. 'Apparently' a cyclist was tripped over by a pedestrian! The police already knew it was Deman as this had happened before and this was all just a bit of a formality, to most involved, except the cyclist.
        </p>
        <p>
          To give you the full picture, the cyclist decided to cycle through a red light, at a pedestrian crossing and Deman stuck his foot out to prove the point. The 'victims' involved are usually in the wrong when it comes to these matters, there seems to be a slight loophole in the law when it comes to twenty ton men and the green cross code so he usually gets away with it on the odd occasion that he gets reported.
        </p>
      </page>

      <page class="relative p-t-2 p-x-2 p-b-1 m-b-3 not-story-dark text-white">
        <p>
          I'm writing and illustrating all this in my spare time because it's what I love to do. I am obviously going to continue writing but if you would like to help contribute to the domain costs or just buy me a pint to say thanks, you can do so below.
        </p>
        <div class="text-center m-b-1">
          <div class="d-inline-block bg-white br p-1">
            <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
              <input type="hidden" name="cmd" value="_s-xclick">
              <input type="hidden" name="hosted_button_id" value="FYNU5SPJ6LVXU">
              <input type="image" src="https://www.paypalobjects.com/en_US/GB/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online!">
              <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
            </form>
          </div>
        </div>
        <p>And if you have, thank you so much! I am forever indebted to you.</p>
      </page>
      
      <page id="pagex" class="relative p-t-2 p-x-2 p-b-1">

        <h3>To be continued...</h3>

      </page>

    </text>

  </column>




</body>
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Patua+One');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');


// _utilities.scss

$spacer:   1em !default;
$spacer-x: $spacer !default;
$spacer-y: $spacer !default;
$spacers: (
  0: (
    x: 0,
    y: 0
  ),
  1: (
    x: ($spacer-x * 1),
    y: ($spacer-y * 1)
  ),
  2: (
    x: ($spacer-x * 2),
    y: ($spacer-y * 2)
  ),
  3: (
    x: ($spacer-x * 3),
    y: ($spacer-y * 3)
  ),
  4: (
    x: ($spacer-x * 4),
    y: ($spacer-y * 4)
  ),
  5: (
    x: ($spacer-x * 5),
    y: ($spacer-y * 5)
  ) ) !default;

.m-x-auto {
  margin-right: auto;
  margin-left:  auto;
}

@each $prop, $abbrev in (margin: m, padding: p) {
  @each $size, $lengths in $spacers {
   $length-x:   map-get($lengths, x);
    $length-y:   map-get($lengths, y);

    .#{$abbrev}-#{$size} { #{$prop}: $length-y $length-x }
    .#{$abbrev}-t-#{$size} { #{$prop}-top: $length-y }
    .#{$abbrev}-r-#{$size} { #{$prop}-right: $length-x }
    .#{$abbrev}-b-#{$size} { #{$prop}-bottom: $length-y }
    .#{$abbrev}-l-#{$size} { #{$prop}-left: $length-x }

    // Axes
    .#{$abbrev}-x-#{$size} {
      #{$prop}-right: $length-x ;
      #{$prop}-left: $length-x ;
    }
    .#{$abbrev}-y-#{$size} {
      #{$prop}-top: $length-y ;
      #{$prop}-bottom: $length-y ;
    } } }

// responsive font

@mixin responsive-font($responsive, $min, $max: false, $fallback: false) {
  $responsive-unitless: $responsive / ($responsive - $responsive + 1);
  $dimension: if(unit($responsive) == 'vh', 'height', 'width');
  $min-breakpoint: $min / $responsive-unitless * 100;
  @media (max-#{$dimension}: #{$min-breakpoint}) {
    font-size: $min!important;
  }
  @if $max {
    $max-breakpoint: $max / $responsive-unitless * 100;
    @media (min-#{$dimension}: #{$max-breakpoint}) {
      font-size: $max!important;
    }
  }
  @if $fallback {
    font-size: $fallback!important;
  }
  font-size: $responsive!important;
}
.rfont {
  @include responsive-font(2vmin, 12px, 18px);
}

.d-inline-block{
    display:inline-block;
    vertical-align:top;
}
.w-auto{
    width:auto;
}
.w-25{
    width:25%;
}
.w-50{
    width:50%;
}
.width-100, .full-width, .w-100{
    width:100%;
}
.max-300{
    max-width:300px;
}
.min-100{
    min-width:100px;
}
.min-150{
    min-width:150px;
}
.w-100-50-sm{
    width:100px;
}
.mw{
    max-width:200px;
    overflow:hidden;
}

.w100-50-down{
    width:100px;
}
.z--1{
    z-index:-1;
}

/* ^ Can be replaced by Bootstrap 4 ^ */

.d-table, .d-true-table{
    display:table;
}
.d-table>*, .d-table-row>*{
    display:table-cell;
    vertical-align:middle;
}
.d-table-row{
    display:table-row;
}
.d-table-sm>*, .d-flex-sm, .d-block{
    display:block;
}
.d-flex, .d-flex-v-align, .d-flex-control {
    display: flex;
}
.d-flex>*, .flex-grow-1{
    flex-grow: 1;
}
.d-flex-control{
    flex-wrap: wrap;
}
.flex1{
    flex:1;
}
.flex-grow-0{
    flex-grow: 0
}
.flex-shrink-0{
    flex-shrink: 0
}
.d-flex-v-align{
    align-items:stretch;
}
.d-flex-v-align>*{
    margin:auto;
}
.flex-height {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
}
.v-align-t, .align-top, .table.v-align-t>tbody>tr>td {
    vertical-align:top;
}
.v-align-m, .align-middle{
    vertical-align:middle;
}
.v-align-b{
    vertical-align:bottom;
}
.br{
    border-radius:$spacer;
}
.br-t{
    border-radius:$spacer $spacer 0 0;
}
.br-b{
    border-radius:0 0 $spacer $spacer;
}
.br-0{
    border-radius:0;
}

.fixed{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:auto;
}

.relative, .square{
    position:relative;
}
.overflow-hidden{
    overflow:hidden;
}
small{
    font-size: 80%!important;
}
.font-weight-normal{
    font-weight: normal !important;
}
.cover{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.border-l{
    border-left:1px solid rgba(0,0,0,0.1);
}
.border-r{
    border-right:1px solid rgba(0,0,0,0.1);
}
.no-list{
    margin:0;
    padding:0;
    list-style:none;
}
.square:before, .circle:before, [class^="circle-"]:before, [class*=" circle-"]:before{
    content:'';
    padding-top:100%;
    display:block;
}
.square>*, .abs-center, .circle>*, [class^="circle-"]>*, [class*=" circle-"]>*, [class^="circle-"]>*>*, [class*=" circle-"]>*>*{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    margin:auto;
}
.op0, .op-0{
    opacity:0;
}
.op025, .op-025{
    opacity:.25;
}
.op05, .op-05{
    opacity:.5;
}
.op09, .op-09{
    opacity:.8;
}
.line-height-1{
    line-height:1!important;
}
.shadow-b-10, .shadow-t-10{
    box-shadow:0 10px 0 0 rgba(0,0,0,0.1);
    z-index:999;
    position:relative;
}
.shadow-t-10{
    box-shadow:10px 0 0 0 rgba(0,0,0,0.1);
}

.break-word{
    word-wrap : break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

.fadein{
    opacity:0;
}

/*colours*/
/*colours*/
/*colours*/

.bg-white{
    background-color:#fff;
}
.bg-dark-025{
    background-color:rgba(0,0,0,0.025);
}
.bg-dark-05, .btn-default{
    background-color:rgba(0,0,0,0.05);
}
.bg-grad-dark-05{
    background:linear-gradient( rgba(0,0,0,0.05), rgba(0,0,0,0));
}
.bg-dark-2{
    background-color:rgba(0,0,0,0.2)!important;
}
.bg-dark-1{
    background-color:rgba(0,0,0,0.1)!important;
}
.bg-light-75{
    background-color:rgba(255,255,255,.75);
}
.bg-light-95{
    background-color:rgba(255,255,255,.95);
}
.bg-grey{
    background:#F3F3F3;
}
.hide {
  display:none;
}
.text-center {
  text-align:center;
}
$animate: all .25s ease-in-out;
//colours
$body: #190d23;
$rail: #190d23;
$stroke: #190d23;
$body50: rgba($body, .5);
$shadow: #1d2049;
$skin: #efd4c6;
$top: #8E7A5D;
$radius: 1em;
$tree1: #683f44;
$tree2: #20112a;
$tree3: #444a2f;
$tree4: #23241a;
$horizon: #1d2049;
$none: rgba(0,0,0,0);
$dark: rgba(0,0,0,0.25);
$shadow50: rgba($shadow, .5);
$skin50: rgba($skin, .5);
$zero: 0;

body {
    & *, & *:before, & *:after {
        box-sizing: border-box;
        display: block;
    }
}

[page="0000"], [page="0001"], [page="0002"], [page="0003"], [page="0004"], [page="0005"], [page="0006"], [page="0007"], [page="0008"], [page="0009"], [page="0010"], [page="0011"], [page="0012"], [page="0013"] {
    & *:before, & *:after {
        box-sizing: content-box;
    }
}

html, body {
    padding: 0;
    margin: 0;
    min-height: 100vh;
    font-family: 'Patua One', cursive;
    color: $body;
    background: $body;
    line-height: 1.7em;
    font-size: 1vmin;
}
html, body, main {
    width: 100%;
    flex-direction: column;
    display: flex;
    flex-wrap: wrap;
}

main {
    flex-grow: 1;
}

row {
    overflow: hidden;
    position: relative;
    min-height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

text, picture {
    width: 100%;
}

picture {
    position: relative;
    width: 100%;
    height: 100%;
}

picture:before {
    content: '';
    padding-top: 100%;
    display: block;
}

picture *, picture *:before, picture *:after, background *,
background *:before, background *:after, foreground *, foreground *:before, foreground *:after, transition:before, transition:after {
    position: absolute;
    content: '';
}

picture *, picture *:before, picture *:after, background *, background *:before, background *:after, foreground *, foreground *:before, foreground *:after {
    top: 0;
    left: 0;
}

picture, background, foreground, text {
    perspective: 5000px;
    perspective-origin: 50% 50%;
}

picture, picture *, foreground, foreground *, background, background * {
    transform-style: preserve-3d;
    /*backface-visibility: hidden;*/
}

picture > *, transition, transition:before, transition:after {
    position: absolute;
    top: 0;
    left: 0;
}

picture > *, background > *, foreground > * {
    width: 100%;
    height: 100%;
}

body {
    & background .bi0 {
        transform: translateZ(-12px);
    }

    & background .bi1 {
        transform: translateZ(-11px);
    }

    & background .bi2 {
        transform: translateZ(-10px);
    }

    & picture i.pi0 {
        transform: translateZ(-5px);
    }

    & picture i.pi1 {
        transform: translateZ(1px);
    }

    & picture i.pi2 {
        transform: translateZ(12px);
    }

    & picture i.pi3 {
        transform: translateZ(13px);
    }

    & text {
        transform: translateZ(0);
        text-rendering: optimizeSpeed;
    }
}
/*resets*/
p {
    margin: 0 0 1em;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

a, a:visited, a:hover {
    text-decoration: none;
    color: inherit;
    box-shadow: inset 0 0 0 0 rgba(0,0,0,0), 0 0 0 30px rgba(0,0,0,0);
    transition: $animate;
    display: inline-block;
    border-radius: $radius;
}

a:hover {
    box-shadow: inset 0 0 0 60px rgba(0,0,0,0.2), 0 0 0 5px rgba(0,0,0,0.2);
}

column {
    scroll-snap-type: y mandatory;
}

text {
    position: relative;
    z-index: 100;
    /*overflow:hidden;*/
}

page {
    scroll-snap-align: start;
}
//other pages
.not-story:before {
    background: rgba(245,245,245,.5) !important;
}

.not-story:after {
    background: rgba(0, 0, 0, 0.05) !important;
}

.not-story-dark {
    color: #fff !important;
}

.not-story-dark:before {
    background: $body !important;
    border: 1px solid #fff;
}

//last page
page#pagex {
    &:before, &:after {
        transform: rotate(0) !important;
    }

    &:after {
        height: calc(100% - 2em) !important;
    }

    &, &:before, &:after {
        border-radius: 1em 1em 0 0 !important;
    }
}
//about and index
about, index {
    z-index: 99;
    position: fixed;
    top: 0;
    right: 0;
    height: 0;
}

about a, index > a {
    width: 1.5em;
    height: 1.5em;
    background: #fff;
    text-align: center;
    line-height: 1.5em;
    border-radius: 50%;
    position: absolute;
    top: 1em;
    right: 1em;
    opacity: .5;
    cursor: pointer;
}

about a + a, index > a + a {
    transform: scale(0);
}

abouttext, indexlist {
    transform: scaleY(0);
    transition: $animate;
    transform-origin: 100% 0;
}

about a:first-of-type:focus ~ abouttext, index > a:first-of-type:focus-within ~ indexlist, indexlist:focus-within {
    transform: scaleY(1);
}

about a:focus, index > a:focus {
    transform: scale(0);
}

about a:focus + a, index > a:focus + a {
    transform: scale(1);
}

.not-top about a, .not-top index > a {
    transform: scale(0) rotate(360deg);
    box-shadow: inset 0 0 0 0 rgba(0,0,0,0.2), 0 0 0 30px rgba(0,0,0,0.5);
}

index > a:nth-of-type(1) {
    text-shadow: 0 .2em 0 currentColor, 0 -.2em 0 currentColor;
    line-height: 1.3em;
}

indexlist a {
    display: block;
}
//copyright
a[copyright] {
    position: absolute;
    left: 6px;
    top: 6px;
    transform: translate(0, 132px) rotate(-90deg);
    font-size: 7px !important;
    line-height: 1;
    font-weight: 100;
    z-index: 99999999999;
    transform-origin: left top 0;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #fff !important;
    box-shadow: none !important;
}

.pageload picture, .pageload foreground, .pageload text {
    opacity: 0 !important;
}

picture {
    opacity: 1;
    transition: opacity .25s ease-in-out;
}

foreground {
    opacity: 1;
    transition: opacity .25s ease-in-out .25s;
}

text {
    opacity: 1;
    transition: opacity .25s ease-in-out .5s;
}

testtop, testbottom, testdiv {
    background: red;
    height: 1px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

[scrolling="true"] *, [scrolling="true"] *:before, [scrolling="true"] *:after {
    animation-play-state: paused !important;
    /*-webkit-box-reflect:unset!important;*/
}

@keyframes transition {
    0% {
        transform: translate3d(100%,0,0) skew(-45deg);
    }

    50% {
        transform: translate3d(-100%,0,0) skew(-45deg);
    }

    100% {
        transform: translate3d(100%,0,0) skew(-45deg);
    }
}

@keyframes more {
    100% {
        transform: scaleY(1) translateY(10px);
    }
}

@keyframes more2 {
    100% {
        transform: scaleY(-1) translateY(110px);
    }
}
// page-0
// page-0
// page-0

[page="0000"],
[page="0001"],
[page="0002"],
[page="0003"],
[page="0004"],
[page="0005"],
[page="0006"],
[page="0007"] {
    & row {
        background: #EBEBCA;
    }
}

[scrolling="false"][page="0000"], [scrolling="false"][page="0001"] {
    & picture {
        animation: breath 3s infinite alternate;
    }
}

[page="0000"], [page="0001"] {
    & picture > i {
        width: 100%;
    }
}

[page="0000"], [page="0001"] {
    & picture > i:before {
        padding-top: 100%;
        position: relative;
    }
}

#page-0000 {
    min-height: calc(100vh - 3em);
}

#page-0000 background {
    background: #EBEBCA;
}
//
//
//
//top of head
[page="0000"], [page="0002"], [page="0006"], [page="0007"], [page="0012"], [page="0013"] {
    & picture i.pi2 i:nth-of-type(4) {
        width: 28em;
        height: 30em;
        background: $skin;
        transform: translate3d(32em,10em,-1px) skew(-30deg) rotate(-10deg);
        border-radius: 10% 30%;
        border-top: 2em solid $stroke;
        border-left: 2em solid $stroke;
    }
    //hair
    & picture i.pi2 i:nth-of-type(4):after {
        width: 10em;
        height: 2em;
        background: $stroke;
        transform: translate3d(-3em,-3em,$zero) rotate(-20deg);
        border-radius: 30%;
        box-shadow: 1em 1em 0 $stroke;
    }

    & picture i.pi2 i:nth-of-type(4):before {
        width: 12em;
        height: 4em;
        background: $stroke;
        transform: translate3d(5.2em,-4.9em,$zero) skew(30deg) rotate(-8deg);
        border-radius: 10%;
    }

    & picture i.pi2 i:nth-of-type(5) {
        width: 25em;
        height: 2em;
        transform: translate3d(57em,6em,$zero) rotate(10deg);
        border-radius: 10%;
        box-shadow: -3em 3em 0 -2em $stroke;
    }
}

[page="0000"], [page="0001"], [page="0002"], [page="0003"], [page="0004"], [page="0005"], [page="0006"], [page="0007"], [page="0012"], [page="0013"] {
    & picture i.pi2 i:nth-of-type(5):after,
    & picture i.pi2 i:nth-of-type(5):before,
    & picture i.pi2 i:nth-of-type(5),
    & picture i.pi2 i:nth-of-type(6):after,
    & picture i.pi2 i:nth-of-type(6):before,
    & picture i.pi2 i:nth-of-type(6),
    & picture i.pi2 i:nth-of-type(7):after,
    & picture i.pi2 i:nth-of-type(7):before,
    & picture i.pi2 i:nth-of-type(7) {
        transform-origin: 0 0;
        background: $stroke;
    }
}
//eye
@keyframes blink {
    0% {
        transform: scaleY(1) translateZ(2px); //look
    }

    96% {
        transform: scaleY(1) translateZ(2px);
    }

    98% {
        transform: scaleY(.1) translateZ(2px);
    }
}

[page="0000"], [page="0002"], [page="0006"], [page="0007"], [page="0012"], [page="0013"] {
    & picture i.pi2 i:nth-of-type(5):before {
        width: 28em;
        height: 2em;
        transform: translate3d(5em,0em,$zero) rotate(12deg);
        border-radius: 40%;
    }

    & picture i.pi2 i:nth-of-type(5):after {
        width: 30em;
        height: 2em;
        transform: translate3d(5em,0em,$zero) rotate(20deg);
    }

    & picture i.pi2 i:nth-of-type(6) {
        width: 22em;
        height: 2em;
        transform: translate3d(65em,10em,$zero) rotate(40deg);
        border-radius: 10%;
    }

    & picture i.pi2 i:nth-of-type(6):before {
        width: 19em;
        height: 2em;
        transform: translate3d(0em,0em,$zero) rotate(12deg);
        border-radius: 40%;
    }

    & picture i.pi2 i:nth-of-type(6):after {
        width: 18em;
        height: 2em;
        transform: translate3d(0em,0em,$zero) rotate(25deg);
    }

    & picture i.pi2 i:nth-of-type(7) {
        width: 17em;
        height: 2em;
        transform: translate3d(65em,10em,$zero) rotate(80deg);
        border-radius: 10%;
    }

    & picture i.pi2 i:nth-of-type(7):before {
        width: 19em;
        height: 2em;
        transform: translate3d(0em,0em,$zero) rotate(12deg);
        border-radius: 40%;
    }

    & picture i.pi2 i:nth-of-type(7):after {
        width: 22em;
        height: 2em;
        transform: translate3d(0em,0em,$zero) rotate(25deg);
    }

    & picture i.pi2 i:nth-of-type(8) {
        width: 10em;
        height: 20em;
        background: rgba(0,0,0,0.05);
        transform: translate3d(52em,8em,$zero) skew(-25deg);
        border-radius: 0 50% 0 0;
        border-top: 3em solid $stroke;
        border-right: 1.5em solid $stroke;
    }
    //eyebrow
    & picture i.pi2 i:nth-of-type(10) {
        width: 10em;
        height: 2em;
        background: $stroke;
        transform: translate3d(31em,25em,1px) skew(-45deg) rotate(-5deg);
        border-radius: 2em;
    }

    & picture i.pi2 i:nth-of-type(10):after {
        width: 5em;
        height: 2em;
        border-radius: 50%;
        background: $stroke;
        transform: translate3d(0em,2em,2px) rotate(-45deg);
    }

    & picture i.pi2 i:nth-of-type(11) {
        width: 2em;
        height: 3em;
        left: 35em;
        top: 30em;
        border-radius: 2em 2em 50% 100%;
        background: $stroke;
        transform: scaleY(1) translateZ(1px); //look
        animation: blink 9s infinite;
    }

    & picture i.pi2 i:nth-of-type(11):before {
        width: 3em;
        height: 1em;
        left: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        border-radius: 50%;
        background: $stroke;
    }
    //nose
    & picture i.pi2 i:nth-of-type(9) {
        width: 16em;
        height: 16em;
        transform: translate3d(22em,28em,1px) skew(-40deg) rotate(0deg);
        border-radius: 3em;
        background: $skin;
        border: 1.5em solid $stroke;
        border-top: none;
        opacity: .99;
    }

    & picture i.pi2 i:nth-of-type(9):before {
        width: 10em;
        height: 14em;
        background: $skin;
        transform: translate3d(5em,-1em,$zero) rotate(30deg);
    }
    //lip
    & picture i.pi2 i:nth-of-type(3) {
        width: 10em;
        height: 14em;
        transform: translate3d(26em,40em,$zero) skew(-5deg) rotate(-20deg);
        background: $skin;
        border: 1.5em solid $stroke;
        border-top-color: rgba(0,0,0,0);
        border-right-color: rgba(0,0,0,0);
        border-radius: 1em;
    }

    & picture i.pi2 i:nth-of-type(3):before {
        width: 13em;
        height: 14em;
        transform: translate3d(6em,-3em,$zero) rotate(20deg);
        background: $skin;
        border-radius: 1em;
    }

    & picture i.pi2 i:nth-of-type(3):after {
        width: 7em;
        height: 12em;
        transform: translate3d(4em,12.5em,$zero) skew(20deg);
        background: $skin;
        border-left: 1.7em solid $stroke;
        border-radius: 0 0 2em 0;
    }

    & picture i.pi2 i:nth-of-type(1) {
        width: 10em;
        height: 10em;
        background: $skin;
        transform: translate3d(36em,45em,$zero);
    }
    //ear
    & picture i.pi2 i:nth-of-type(12) {
        width: 15em;
        height: 14em;
        transform: translate3d(46em,30em,$zero) skew(-5deg) rotate(10deg);
        background: $skin;
        border: 1.5em solid $stroke;
        border-bottom-color: rgba(0,0,0,0);
        border-left-color: rgba(0,0,0,0);
        border-radius: 10em 5em 12em 0;
    }

    & picture i.pi2 i:nth-of-type(13) {
        width: 10em;
        height: 10em;
        transform: translate3d(40em,42em,$zero) rotate(15deg);
        background: $skin;
        border-right: 1.5em solid $stroke;
    }

    & picture i.pi2 i:nth-of-type(13):before {
        width: 9em;
        height: 10em;
        transform: translate3d(9em,-11.5em,$zero) rotate(47deg);
        background: $skin;
        border-right: 1.7em solid $stroke;
        transform-origin: 0 0;
        border-radius: 1em;
        border-bottom: none;
    }

    & picture i.pi2 i:nth-of-type(13):after {
        width: 10em;
        height: 5em;
        transform: translate3d(-1em,11em,$zero) skew(10deg) rotate(-10deg);
        background: $skin;
        border-right: 1.7em solid $stroke;
        transform-origin: 0 0;
        border-bottom: none;
    }
}
//v-neck
[page="0000"], [page="0001"], [page="0002"], [page="0003"], [page="0004"], [page="0005"], [page="0006"], [page="0007"] {
    & picture > * {
        transform: scale(1) translate3d(0,0,1px);
        transform-origin: 50% 0;
    }

    & picture i.pi2 i:nth-of-type(2) {
        width: 12em;
        height: 10em;
        transform: translate3d(38em,56em,$zero) rotate(-15deg) skewY(-50deg);
        background: $skin;
        border-bottom: 2em solid $stroke;
        border-left: 1.5em solid $stroke;
    }
}
//shadows
[page="0000"], [page="0002"], [page="0006"], [page="0007"], [page="0012"], [page="0013"] {
    & picture i.pi3 i:nth-of-type(1) {
        width: 9em;
        height: 23em;
        background: rgba(40,10,0,0.05);
        transform: translate3d(53em,10em,$zero) skew(-28deg) rotate(-10deg);
        border-radius: 0 0 2em 0;
    }

    & picture i.pi3 i:nth-of-type(1):before {
        width: 9em;
        height: 25em;
        background: rgba(40,10,0,0.05);
        background: linear-gradient( rgba(0,0,0,0.05), rgba(0,0,0,0));
        transform: translate3d(-1.5em,35em,$zero) rotate(-10deg);
    }

    & picture i.pi3 i:nth-of-type(1):after {
        width: 15em;
        height: 13em;
        transform: translate3d(-4em,22em,$zero) skew(-5deg) rotate(-10deg);
        background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.05));
        background: rgba(40,10,0,0.05);
        border-radius: 10em 5em 12em 0;
    }

    & picture i.pi3 i:nth-of-type(2) {
        width: 3em;
        height: 23em;
        background: rgba(40,10,0,0.05);
        transform: translate3d(58em,10em,$zero) skew(-30deg) rotate(-10deg);
        border-radius: 0 0 2em 0;
    }

    & picture i.pi3 i:nth-of-type(2):before {
        width: 6em;
        height: 25em;
        background: rgba(40,10,0,0.05);
        background: linear-gradient( rgba(0,0,0,0.05), rgba(0,0,0,0));
        transform: translate3d(-1.5em,35em,$zero) rotate(-10deg);
    }

    & picture i.pi3 i:nth-of-type(2):after {
        width: 11em;
        height: 13em;
        transform: translate3d(-4em,22em,$zero) skew(-5deg) rotate(-10deg);
        background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.05));
        background: rgba(40,10,0,0.05);
        border-radius: 10em 5em 12em 0;
    }
}
//top
[page="0000"], [page="0001"], [page="0002"], [page="0003"], [page="0005"], [page="0006"], [page="0007"], [page="0012"], [page="0013"] {
    & picture i.pi1 i:nth-of-type(7) {
        width: 15em;
        height: 36em;
        transform: translate3d(34em,58em,1px) rotate(10deg) skewY(-20deg);
        background: $top;
        border-radius: 2em;
        border-top: 1.5em solid $stroke;
    }

    & picture i.pi1 i:nth-of-type(7):before {
        width: 10em;
        height: 15em;
        transform: translate3d(19.5em,9em,4px) rotate(-20deg) skewY(30deg);
        background: #78674d;
        border-radius: 1em 1em 10em 2em;
        border-right: 1.5em solid $stroke;
        border-bottom: 2em solid $stroke;
    }

    & picture i.pi1 i:nth-of-type(7):after {
        width: 17em;
        height: 10em;
        transform: translate3d(15em,-1em, 4px) rotate(38deg);
        background: #78674d;
        border-top: 1.7em solid $stroke;
        transform-origin: 0 0;
        border-radius: 1em 1em 1em 4em;
    }

    & picture i.pi1 i:nth-of-type(8) {
        width: 10em;
        height: 36em;
        transform: translate3d(37em,60em,$zero) rotate(-30deg);
        background: $top;
        border-radius: 2em;
        border-top: 1.5em solid $stroke;
    }

    & picture i.pi1 i:nth-of-type(8):before {
        width: 10em;
        height: 10em;
        transform: translate3d(-6em,1em,$zero) rotate(-40deg);
        background: $top;
        border-radius: 5em 2em 0 0;
        border-top: 1.5em solid $stroke;
        border-left: 1.5em solid $stroke;
    }

    & picture i.pi1 i:nth-of-type(9) {
        width: 20em;
        height: 20em;
        transform: translate3d(30em,68em,$zero) rotate(10deg);
        background: $top;
        border-radius: 2em 2em 0 0;
        border-left: 1.2em solid $stroke;
    }

    & picture i.pi1 i:nth-of-type(9):before {
        width: 5em;
        height: 6em;
        transform: translate3d(-3em,19em,$zero) rotate(30deg);
        background: $top;
        border-radius: 2em 0 0 4em;
        border-left: 1.2em solid $stroke;
    }

    & picture i.pi1 i:nth-of-type(9):after {
        width: 20em;
        height: 10em;
        transform: translate3d(-3em,22em,-1px) rotate(5deg);
        background: $top;
        border-radius: 5em 2em 2em 2em;
        border-left: 1.2em solid $stroke;
    }

    & picture i.pi1 i:nth-of-type(10) {
        width: 5em;
        height: 8em;
        transform: translate3d(51em,73em,5px) rotate(10deg) skewX(13deg);
        background: $top;
        border-radius: 1em 0 0 2em;
        border-left: 1.2em solid $stroke;
        border-bottom: 1.7em solid $stroke;
    }

    & picture i.pi1 i:nth-of-type(10):before {
        width: 20em;
        height: 30em;
        transform: translate3d(-12em,0em,-5px) rotate(0deg);
        background: $top;
        border-right: 1.7em solid $stroke;
    }
    //near arm
    & picture i.pi1 i:nth-of-type(11) {
        width: 14em;
        height: 20em;
        transform: translate3d(52em,72em,4px) rotate(0deg);
        background: $skin;
        border-radius: 3em;
        border-left: 1.6em solid $stroke;
        border-right: 1.4em solid $stroke;
    }

    & picture i.pi1 i:nth-of-type(11):before {
        width: 8.5em;
        height: 25em;
        transform: translate3d(0em,18em,-1px) rotate(0deg) skewY(-12deg);
        background: $skin;
        border-radius: 3em;
        border-left: 1.6em solid $stroke;
        border-right: 1.4em solid $stroke;
        transform-origin: 100% 0;
    }

    & picture i.pi1 i:nth-of-type(11):after {
        width: 4em;
        height: 5em;
        transform: translate3d(6em,42em,-1px) rotate(-10deg) skewY(20deg);
        background: $skin;
        border-radius: 3em;
        border-top: 1.3em solid $stroke;
        border-right: 1.4em solid $stroke;
    }

    & picture i.pi1 i:nth-of-type(6) {
        width: 8em;
        height: 12em;
        transform: translate3d(56em,113em,1px) rotate(-20deg) skewY(1deg);
        background: $skin;
        border-radius: 0 0 1em 1em;
        border-left: 1.6em solid $stroke;
        border-right: 1.4em solid $stroke;
    }

    & picture i.pi1 i:nth-of-type(6):before {
        width: 3em;
        height: 8em;
        transform: translate3d(2.5em,8em,-1px) rotate(-85deg) skewY(-45deg);
        background: $skin;
        border-radius: 1em 2em 4em 2em;
        border: 1.3em solid $stroke;
    }
    //far arm
    & picture i.pi1 i:nth-of-type(4) {
        width: 12em;
        height: 20em;
        transform: translate3d(27em,72em,-10px) rotate(-15deg);
        background: $skin;
        border-radius: 3em;
        border-left: 1.3em solid $stroke;
        border-right: 1.3em solid $stroke;
        transform-origin: 0 0;
    }

    & picture i.pi1 i:nth-of-type(4):before {
        width: 7em;
        height: 25em;
        transform: translate3d(0em,18em,-1px) rotate(15deg) skewY(-12deg);
        background: $skin;
        border-radius: 3em;
        border-left: 1.4em solid $stroke;
        border-right: 1.3em solid $stroke;
        transform-origin: 0 0;
    }
    //hand
    & picture i.pi1 i:nth-of-type(4):after {
        width: 9em;
        height: 9em;
        transform: translate3d(-5em,36em,-2px) rotate(20deg) skewY(20deg);
        background: $skin;
        border-radius: 3em 3em 7em 3em;
        border: 1.3em solid $stroke;
    }

    & picture i.pi1 i:nth-of-type(1) {
        width: 40em;
        height: 8em;
        transform: translate3d(24.5em,97em,-1px) rotate(1deg);
        background: $top;
        border-radius: 1em 0 0 2em;
        border-left: 1.2em solid $stroke;
    }

    & picture i.pi1 i:nth-of-type(1):after {
        width: 20em;
        height: 15em;
        transform: translate3d(9em,4.5em,$zero) rotate(-45deg) skewY(45deg);
        background: $top;
        border-radius: 2em 0 100% 100%;
        border-left: 1.2em solid $stroke;
        border-bottom: 1.3em solid $stroke;
    }
    //shadows
    & picture i.pi1 i:nth-of-type(2) {
        width: 18em;
        height: 56em;
        background: #78674d;
        border-radius: 0 9em 9em 0em;
        border-right: 1.3em solid $stroke;
        transform: translate3d(44em,58em,2px) rotate(-10deg) skewY(6deg);
    }

    & picture i.pi1 i:nth-of-type(2):before {
        width: 0;
        height: 0;
        transform: translate3d(-11em, 27em,$zero) rotate(-5deg) skewY(10deg);
        border-radius: 0 0 14em 0;
        border: 15em solid rgba(0,0,0,0.1);
        border-top-color: rgba(0,0,0,0);
        border-left-color: rgba(0,0,0,0);
    }

    & picture i.pi1 i:nth-of-type(3) {
        width: 35em;
        height: 15em;
        transform: translate3d(28em, 82em,1px) rotate(10deg) skewY(10deg);
        background: rgba(0, 0, 0, 0.1);
        border-radius: 0 10em 10em 0;
        opacity: 0;
    }

    & picture i.pi1 i:nth-of-type(3):before {
        width: 29em;
        height: 26em;
        transform: translate3d(-5em, -25em,10px) skewY(-10deg) rotate(15deg);
        border-radius: 10em;
        border: 5em solid rgba(0, 0, 0, 0.1);
        /*border-top-color: rgba(0, 0, 0, 0);*/
        border-left-color: rgba(0, 0, 0, 0);
    }

    & picture i.pi1 i:nth-of-type(12) {
        width: 5em;
        height: 57em;
        transform: translate3d(50em,58em,2px) rotate(3deg);
        background: rgba(0,0,0,0.1);
        border-radius: 0 10em 2em 2em;
        opacity: 1;
    }

    & picture i.pi1 i:nth-of-type(12):before {
        width: 5em;
        height: 57em;
        transform: translate3d(10em,6em,4px) rotate(-3deg) skewY(45deg);
        background: rgba(0,0,0,0.1);
        border-radius: 0 2em 2em 2em;
        border-color: rgba(0,0,0,0);
        opacity: 1;
    }

    & picture i.pi1 i:nth-of-type(5) {
        width: 25em;
        height: 10em;
        transform: translate3d(25em, 87em,8px) rotate(-35deg) skewY(25deg);
        background: rgba(0, 0, 0, 0);
        border-radius: 0 0 0 5em;
    }
}
//trousers

[page="0000"], [page="0001"], [page="0002"], [page="0003"], [page="0004"], [page="0012"], [page="0013"] {
    & picture i.pi0 i:nth-of-type(1) {
        width: 25em;
        height: 30em;
        transform: translate3d(25em,100em,-2px) rotate(-20deg);
        background: #294748;
        border-left: 1.2em solid $stroke;
        transform-origin: 0 0;
    }

    & picture i.pi0 i:nth-of-type(1):before {
        width: 10em;
        height: 30em;
        transform: translate3d(19em,20em,$zero) rotate(23deg);
        background: #294748;
        border-right: 1.2em solid $stroke;
        transform-origin: 0 0;
    }

    & picture i.pi0 i:nth-of-type(1):after {
        width: 10em;
        height: 19em;
        transform: translate3d(10em,40em,$zero) rotate(20deg);
        background: #294748;
        border-right: 1.2em solid $stroke;
        transform-origin: 0 0;
    }

    & picture i.pi0 i:nth-of-type(2) {
        width: 10em;
        height: 20em;
        transform: translate3d(47em,131em,$zero) rotate(-10deg);
        background: #294748;
        border-left: 1.2em solid $stroke;
    }

    & picture i.pi0 i:nth-of-type(2):before {
        width: 10em;
        height: 13em;
        transform: translate3d(-3em,-13em,$zero) rotate(-20deg);
        background: #294748;
        border-left: 1.2em solid $stroke;
    }

    & picture i.pi0 i:nth-of-type(2):after {
        width: 7em;
        height: 5em;
        transform: translate3d(-8em,-17em,$zero) rotate(13deg);
        background: #294748;
        border-bottom: 1.2em solid $stroke;
        border-radius: 50%;
    }
    //left leg
    & picture i.pi0 i:nth-of-type(3) {
        width: 15em;
        height: 20em;
        transform: translate3d(36em,125em,-1px) rotate(-5deg);
        background: #294748;
        border-left: 1.5em solid $stroke;
        border-right: 1.5em solid $stroke;
    }

    & picture i.pi0 i:nth-of-type(3):before {
        width: 12em;
        height: 17em;
        transform: translate3d(-2em,19em,$zero) rotate(5deg);
        background: #294748;
        border-left: 1.5em solid $stroke;
        border-right: 1.5em solid $stroke;
    }

    & picture i.pi0 i:nth-of-type(3):before {
        width: 12em;
        height: 17em;
        transform: translate3d(-3em,18em,$zero) rotate(5deg) skewX(-5deg);
        background: #294748;
        border-left: 1.5em solid $stroke;
        border-right: 1.5em solid $stroke;
    }

    & picture i.pi0 i:nth-of-type(4) {
        width: 17em;
        height: 5em;
        transform: translate3d(34em,159em,1px) rotate(6deg) skewX(-8deg);
        background: #294748;
        border: 1.3em solid $stroke;
    }
    // left shoe
    & picture i.pi0 i:nth-of-type(5) {
        width: 27em;
        height: 10em;
        transform: translate3d(24em,160em,$zero) skewX(-15deg);
        background: #302824;
        border: 1.1em solid $stroke;
        border-radius: 4em 2em 1em 3em;
    }

    & picture i.pi0 i:nth-of-type(5):before {
        width: 7em;
        height: 7em;
        transform: translate3d(6em,-2em,5px) skewX(15deg) rotate(45deg);
        background: #302824;
        border-top: 1.4em solid $stroke;
        border-radius: 50%;
    }
    /*& picture i.pi0 i:nth-of-type(5):after {
            width: 4em;
            height: 6em;
            left: 4px;
            top: 0em;
            transform: translateZ(6px) skewX(15deg) rotate(-45deg);
            border-right: 1.2em solid $stroke;
            border-radius: 50%;
        }*/
    //right leg
    & picture i.pi0 i:nth-of-type(6) {
        width: 10em;
        height: 17em;
        transform: translate3d(47em,150em,2px) rotate(5deg) skewX(-5deg);
        background: #294748;
        border-left: 1.5em solid $stroke;
    }

    & picture i.pi0 i:nth-of-type(6):before {
        width: 7em;
        height: 19em;
        transform: translate3d(5em,-2em,1px) rotate(-12deg) skewX(8deg);
        background: #294748;
        border-right: 1.3em solid $stroke;
    }

    & picture i.pi0 i:nth-of-type(6):after {
        width: 17em;
        height: 3em;
        transform: translate3d(-2em,16em,1px) rotate(-6deg) skewX(-8deg);
        background: #294748;
        border: 1.1em solid $stroke;
    }
    // right shoe
    & picture i.pi0 i:nth-of-type(7) {
        width: 17em;
        height: 22em;
        transform: translate3d(45em,164em,$zero) skewX(-10deg);
        background: #302824;
        border: 1.3em solid $stroke;
        border-radius: 6em;
    }

    & picture i.pi0 i:nth-of-type(7):before {
        width: 7em;
        height: 7em;
        transform: translate3d(4em,4em,5px) skewX(10deg);
        background: #302824;
        border-top: 1.2em solid $stroke;
        border-radius: 50%;
    }

    & picture i.pi0 i:nth-of-type(7):after {
        width: 10em;
        height: 7em;
        transform: translate3d(2em,12em,1px) skewX(10deg);
        border-top: 1.2em solid $stroke;
        border-radius: 50%;
    }
    //shadows
    & picture i.pi0 i:nth-of-type(8) {
        width: 10em;
        height: 35em;
        transform: translate3d(37em,120em,-1px) rotate(-20deg);
        background: rgba(0,0,0,0.25);
        transform-origin: 0 0;
    }

    & picture i.pi0 i:nth-of-type(8):before {
        width: 10em;
        height: 30em;
        transform: translate3d(3em,20em,$zero) rotate(30deg);
        background: rgba(0,0,0,0.15);
        transform-origin: 0 0;
    }

    & picture i.pi0 i:nth-of-type(9) {
        width: 5em;
        height: 75em;
        transform: translate3d(55em,110em,5px);
        background: rgba(0,0,0,0.1);
        transform-origin: 0 0;
        border-radius: 0 0 50% 0;
    }

    & picture i.pi0 i:nth-of-type(9):before {
        width: 0;
        height: 0;
        transform: translate3d(-8em,0em,$zero);
        transform-origin: 0 0;
        border: 6.5em solid rgba(0,0,0,0.1);
        border-bottom-color: rgba(0,0,0,0);
        border-left-color: rgba(0,0,0,0);
        border-top-width: 25em;
    }

    & picture i.pi0 i:nth-of-type(9):after {
        width: 0;
        height: 0;
        transform: translate3d(5em,35em,$zero);
        transform-origin: 0 0;
        border: 23em solid rgba(0,0,0,0);
        border-left: 5em solid rgba(0,0,0,0.15);
        border-bottom-width: 16em;
    }

    & picture i.pi0 i:nth-of-type(10) {
        width: 200em;
        height: 30em;
        transform: translate3d(25em,150em,-1px) rotate(10deg);
        background: rgba(0,0,0,0.1);
        transform-origin: 0 0;
        border-radius: 50%;
    }

    & picture i.pi0 i:nth-of-type(10):after {
        width: 200em;
        height: 50em;
        transform: translate3d(10em,-10em,-1px) rotate(15deg);
        background: rgba(0,0,0,0.1);
        transform-origin: 0 0;
        border-radius: 50%;
    }
}
//
//
//
//
//
//background
[page="0000"], [page="0001"], [page="0002"], [page="0003"], [page="0004"], [page="0005"], [page="0006"], [page="0007"] {
    & background > * {
        opacity: .5;
        transform: scale(1.1);
    }
}

[page="0000"] {
    & background .bi0 i:nth-of-type(1) {
        width: 100%;
        height: 70em;
        background: #EC821B;
        transform: translateZ(-10px);
    }

    & background .bi0 i:nth-of-type(1):before {
        width: 100%;
        height: 100%;
        background: linear-gradient(#5fadaf,rgba(0,0,0,0) );
        opacity: 1;
    }

    & background .bi0 i:nth-of-type(1):after {
        width: 100%;
        height: 100%;
        background: linear-gradient(#5f7caf,rgba(0,0,0,0) );
        opacity: 0;
    }

    & background .bi1 i, & background .bi1 i:before, & background .bi1 i:after {
        background: #A43F1B;
    }
}

[page="0000"], [page="0001"], [page="0002"], [page="0003"], [page="0004"], [page="0005"], [page="0006"], [page="0007"] {
    // bg layer 1
    //not in use
    // bg layer 2
    & background .bi1 i:nth-of-type(15) {
        background: linear-gradient(rgba(0,0,0,0), #270d3d );
        width: calc(100% + 100em);
        height: 100%;
        transform: translate3d(-50em,0em,$zero);
    }

    & background .bi1 i:nth-of-type(11) {
        width: calc(100% + 100em);
        height: 100%;
        transform: translate3d(-50em,60em,$zero);
    }

    & background .bi1 i:nth-of-type(11):before {
        width: 20em;
        height: 15em;
        transform: translate3d(45em,-5em,$zero) rotate(45deg) skew(-5deg);
        border-radius: 3em;
    }

    & background .bi1 i:nth-of-type(11):after {
        width: 40em;
        height: 15em;
        transform: translate3d(55em,-5em,$zero) rotate(10deg) skew(-50deg);
        border-radius: 6em;
    }

    & background .bi1 i:nth-of-type(10) {
        width: 10em;
        height: 10em;
        border-radius: 50%;
        transform: translate3d(4em,53em,$zero);
    }

    & background .bi1 i:nth-of-type(2) {
        width: 2em;
        height: 10em;
        border-radius: .25em;
        transform: translate3d(30em,55em,$zero);
    }

    & background .bi1 i:nth-of-type(2):before {
        width: 2em;
        height: 10em;
        border-radius: .25em;
        transform: translate3d(3em,.1em,$zero);
    }

    & background .bi1 i:nth-of-type(2):after {
        width: 2em;
        height: 10em;
        border-radius: .25em;
        transform: translate3d(4em,-1em,$zero);
    }

    & background .bi1 i:nth-of-type(3) {
        width: 10em;
        height: 10em;
        border-radius: .25em;
        transform: translate3d(40em,56em,$zero);
    }

    & background .bi1 i:nth-of-type(3):before {
        width: 20em;
        height: 10em;
        border-radius: 50%;
        transform: translate3d(16em,2em,$zero);
    }

    & background .bi1 i:nth-of-type(3):after {
        width: 40em;
        height: 10em;
        border-radius: 50%;
        transform: translate3d(40em,3em,$zero);
    }

    & background .bi1 i:nth-of-type(4) {
        width: 5em;
        height: 10em;
        border-radius: 50%;
        transform: translate3d(70em,56em,$zero);
    }

    & background .bi1 i:nth-of-type(4):before {
        width: 5em;
        height: 14em;
        border-radius: 50%;
        transform: translate3d(8em,-5em,$zero);
    }

    & background .bi1 i:nth-of-type(4):after {
        width: 6em;
        height: 10em;
        border-radius: 50%;
        transform: translate3d(10em,-1em,$zero);
    }

    & background .bi1 i:nth-of-type(6) {
        width: 20em;
        height: 15em;
        transform: translate3d(195em,60em,$zero) rotate(-60deg) skew(-5deg);
        border-radius: 4em;
    }

    & background .bi1 i:nth-of-type(6):before {
        width: 20em;
        height: 15em;
        border-radius: 50%;
        transform: translate3d(10em,5em,$zero);
    }

    & background .bi1 i:nth-of-type(6):after {
        width: 10em;
        height: 15em;
        border-radius: 50%;
        transform: translate3d(-9em,-1em,$zero);
    }

    & background .bi1 i:nth-of-type(7) {
        width: 60em;
        height: 15em;
        border-radius: 50%;
        transform: translate3d(200em,59em,$zero);
    }
    //sticks
    & background .bi1 i:nth-of-type(8) {
        width: 2em;
        height: 10em;
        border-radius: .25em;
        transform: translate3d(193em,50em,$zero);
    }

    & background .bi1 i:nth-of-type(8):before {
        width: 2em;
        height: 10em;
        border-radius: .25em;
        transform: translate3d(3em,.1em,$zero) rotate(10deg);
    }

    & background .bi1 i:nth-of-type(8):after {
        width: 2em;
        height: 10em;
        border-radius: .25em;
        transform: translate3d(5em,-1em,$zero);
    }

    & background .bi1 i:nth-of-type(9) {
        width: 2em;
        height: 10em;
        border-radius: .25em;
        transform: translate3d(190em,51em,$zero);
    }

    & background .bi1 i:nth-of-type(9):before {
        width: 1.5em;
        height: 10em;
        border-radius: .25em;
        transform: translate3d(-3em,1em,$zero);
    }

    & background .bi1 i:nth-of-type(10) {
        width: 100em;
        height: 10em;
        border-radius: 50%;
        transform: translate3d(120em,56em,$zero) rotate(-5deg);
    }
}
//background layer 2
[page="0000"], [page="0001"] {
    & background .bi2 i {
        opacity: 0;
    }

    & background .bi2 {
        transform: skewY(-2deg) translateX(-200%) scale(0); //look
    }

    & background .bi0 i:not(:nth-of-type(1)) {
        transform: scale(0);
    }
}

[page="0002"] {
    & background .bi2 {
        transform: skewY(-2deg) scale(1.3) translateX(0); //look
    }
}

[page="0002"], [page="0003"], [page="0004"], [page="0005"], [page="0006"], [page="0007"] {
    & background .bi2 i {
        opacity: 1;
    }
    //footpath
    & background .bi2 i:nth-of-type(15) {
        width: calc(100% + 500em);
        height: 50%;
        transform: translate3d(-100em,78em,1px);
        background: linear-gradient( #98603D, rgba(0,0,0,0));
    }

    & background .bi2 i:nth-of-type(15):before {
        width: 200%;
        height: 200%;
        transform: translate3d(-50%,25em,10px);
        background: #98603D;
    }

    & background .bi2 i:nth-of-type(15):after {
        width: 100%;
        height: 4em;
        transform: translate3d(0,25em,20px);
        background: $shadow;
        opacity: .9;
        box-shadow: 0 3em 0 rgba(26,32,73,.5), 0 4em 4em 4em rgba(26,32,73,.5);
    }

    & background .bi2 i:nth-of-type(16) {
        width: calc(100% + 100em);
        height: 30em;
        transform: translate3d(0,46em,1px);
        background-image: linear-gradient(90deg, $rail 11.11%, rgba(0,0,0,0) 11.11%, rgba(0,0,0,0) 50%, $rail 50%, $rail 61.11%, rgba(0,0,0,0) 61.11%, rgba(0,0,0,0) 100%);
        background-size: 10em 10em;
    }

    & background .bi2 i:nth-of-type(16):before {
        width: calc(100% + 100em);
        height: 1em;
        transform: translate3d(0,0,1px);
        background: $rail;
    }

    & background .bi2 i:nth-of-type(16):after {
        width: calc(100% + 100em);
        height: 1em;
        transform: translate3d(0,30em,1px);
        background: $rail;
    }

    & background .bi2 i:nth-of-type(17) {
        width: calc(100% + 100em);
        height: 30em;
        transform: translate3d(-50em,80em,1px) skew(10deg);
        background-image: linear-gradient(45deg, $shadow 11.11%, rgba(0,0,0,0) 11.11%, rgba(0,0,0,0) 50%, $shadow 50%, $shadow 61.11%, rgba(0,0,0,0) 61.11%, rgba(0,0,0,0) 100%);
        background-size: 5em 5em;
        opacity: 0.1;
    }

    & background .bi2 i:nth-of-type(17):before {
        width: calc(100% + 100em);
        height: 1em;
        transform: translate3d(0,-1em,1px);
        background: $shadow;
    }

    & background .bi2 i:nth-of-type(17):after {
        width: calc(100% + 100em);
        height: 1em;
        transform: translate3d(0,30em,1px);
        background: $shadow;
    }
    // street furniture
    & background .bi2 i:nth-of-type(18) {
        width: 5em;
        height: 81em;
        transform: translate3d(110em,0,5px);
        background: $rail;
        border-radius: 2em;
        overflow: hidden;
    }

    & background .bi2 i:nth-of-type(18):before {
        width: 3em;
        height: 110%;
        transform: translate3d(2em,0,0);
        background: $shadow;
        opacity: .3;
    }

    & background .bi2 i:nth-of-type(19) {
        width: 7em;
        height: 81em;
        transform: translate3d(108em,79em,1px) skewX(60deg);
        background: rgba(0,0,0,0.25);
        border-radius: 3em;
        transform-origin: 0 0;
    }

    & background .bi2 i:nth-of-type(20) {
        width: 7em;
        height: 81em;
        transform: translate3d(149em,107em,21px) skewX(60deg);
        background: rgba(0,0,0,0.2);
        transform-origin: 0 0;
    }
    //tree
    //trunk
    & background .bi2 i:nth-of-type(2) {
        width: 7em;
        height: 35em;
        transform: translate3d(170em,40em,$zero) skewX(-2deg) skewY(-15deg);
        background: $tree1;
        transform-origin: 0 0;
        border-radius: 0 0 0 5em;
    }

    & background .bi2 i:nth-of-type(2):before {
        width: 7em;
        height: 35em;
        transform: translate3d(4em,0em,$zero) skewX(3deg);
        background: $tree2;
        transform-origin: 0 0;
        border-radius: 0 0 4em 0;
    }

    & background .bi2 i:nth-of-type(7) {
        width: 5em;
        height: 20em;
        transform: translate3d(160em,38em,$zero) rotate(-40deg) skew(5deg);
        background: $tree2;
        transform-origin: 0 0;
    }

    & background .bi2 i:nth-of-type(7):before {
        width: 4em;
        height: 20em;
        transform: translate3d(0em,0em,$zero) rotate(15deg);
        background: $tree1;
        transform-origin: 0 0;
    }

    & background .bi2 i:nth-of-type(8) {
        width: 2em;
        height: 15em;
        transform: translate3d(151em,33em,$zero) rotate(-55deg);
        background: $tree1;
        transform-origin: 0 0;
        border-radius: 7em 0 0 0;
    }

    & background .bi2 i:nth-of-type(8):before {
        width: 2em;
        height: 20em;
        transform: translate3d(1em,0em,$zero) rotate(-2deg);
        background: $tree2;
        transform-origin: 0 0;
        border-radius: 0 7em 0 0;
    }

    & background .bi2 i:nth-of-type(4) {
        width: 5em;
        height: 15em;
        transform: translate3d(170.75em,32em,$zero) rotate(-10deg);
        background: $tree2;
        transform-origin: 0 0;
    }

    & background .bi2 i:nth-of-type(4):before {
        width: 4em;
        height: 15em;
        transform: translate3d(-2em,0em,$zero) rotate(3deg);
        background: $tree1;
        transform-origin: 0 0;
    }

    & background .bi2 i:nth-of-type(3) {
        width: 5em;
        height: 15em;
        transform: translate3d(182em,32em,$zero) rotate(30deg);
        background: $tree2;
        transform-origin: 0 0;
    }

    & background .bi2 i:nth-of-type(3):before {
        width: 3em;
        height: 15em;
        transform: translate3d(-2em,0em,$zero) rotate(3deg);
        background: $tree1;
        transform-origin: 0 0;
    }

    & background .bi2 i:nth-of-type(9) {
        width: 2em;
        height: 15em;
        transform: translate3d(182em,20em,$zero) rotate(30deg);
        background: $tree2;
        transform-origin: 0 0;
        border-radius: 0 7em 0 0;
    }

    & background .bi2 i:nth-of-type(9):before {
        width: 3em;
        height: 20em;
        transform: translate3d(-2em,0em,$zero) rotate(3deg);
        background: $tree1;
        transform-origin: 0 0;
        border-radius: 7em 0 0 0;
    }

    & background .bi2 i:nth-of-type(10) {
        width: 17em;
        height: 4em;
        transform: translate3d(181em,31em,$zero) rotate(6deg);
        background: $tree1;
        transform-origin: 0 0;
    }

    & background .bi2 i:nth-of-type(10):before {
        width: 15em;
        height: 4em;
        transform: translate3d(2em,4em,$zero) rotate(-5deg);
        background: $tree2;
        transform-origin: 0 0;
        border-radius: 0 0 7em 0;
    }

    & background .bi2 i:nth-of-type(11) {
        width: 3em;
        height: 10em;
        transform: translate3d(194em,25em,$zero) rotate(10deg);
        background: $tree1;
        transform-origin: 0 0;
        border-radius: 7em;
    }

    & background .bi2 i:nth-of-type(11):before {
        width: 3em;
        height: 14em;
        transform: translate3d(2em,0em,$zero) rotate(-5deg);
        background: $tree2;
        transform-origin: 0 0;
        border-radius: 0 7em 7em 0;
    }
    //leaves
    & background .bi2 i:nth-of-type(6) {
        width: 30em;
        height: 20em;
        transform: translate3d(140em,21em,$zero) rotate(-11deg);
        background: $tree4;
        transform-origin: 0 0;
        border-radius: 8em;
    }

    & background .bi2 i:nth-of-type(6):before {
        width: 30em;
        height: 17em;
        transform: translate3d(-1.5em,-3em,1px) rotate(-5deg);
        transform-origin: 0 0;
        background: $tree3;
        border-radius: 8em;
    }

    & background .bi2 i:nth-of-type(5) {
        width: 35em;
        height: 19em;
        transform: translate3d(160em,0em,$zero) rotate(15deg);
        background: $tree4;
        transform-origin: 0 0;
        border-radius: 8em;
    }

    & background .bi2 i:nth-of-type(5):before {
        width: 35em;
        height: 17em;
        transform: translate3d(-2em,0em,2px) rotate(-7deg);
        transform-origin: 0 0;
        background: $tree3;
        border-radius: 8em;
    }

    & background .bi2 i:nth-of-type(12) {
        width: 20em;
        height: 19em;
        transform: translate3d(185em,15em,-1px) rotate(-20deg);
        background: $tree4;
        transform-origin: 0 0;
        border-radius: 8em;
    }

    & background .bi2 i:nth-of-type(12):before {
        width: 21em;
        height: 14em;
        transform: translate3d(2em,-5em,1px) rotate(10deg);
        transform-origin: 0 0;
        background: $tree3;
        border-radius: 8em;
    }

    & background .bi2 i:nth-of-type(13) {
        width: 10em;
        height: 35em;
        transform: translate3d(167em, 72em,-1px) rotate(-70deg);
        background: $body;
        transform-origin: 0 0;
        border-radius: 4em;
        opacity: .5;
    }

    & background .bi2 i:nth-of-type(21) {
        width: 100em;
        height: 100em;
        transform: translate3d(-110em, -10em,1px) rotate(0deg);
        background: $body;
        transform-origin: 0 0;
    }

    & background .bi2 i:nth-of-type(21):before {
        width: 10em;
        height: 100em;
        transform: translate3d(100em, 0em,1px) rotate(0deg) skewY(-45deg);
        background: $body;
        transform-origin: 0 0;
    }

    & background .bi2 i:nth-of-type(21):after {
        width: 100em;
        height: 100em;
        transform: translate3d(10em, 90em,2px) rotate(0deg) skewX(45deg);
        background: $body50;
        transform-origin: 0 0;
    }
}
//
//
//
//
//foreground
[page="0000"], [page="0001"], [page="0002"], [page="0003"], [page="0004"], [page="0005"], [page="0006"] {
    & foreground > * {
        box-shadow: inset 0px 0px 200px $stroke;
    }

    & foreground i i:nth-of-type(1) {
        width: calc(100% + 200em);
        height: 100%;
        right: -100em;
        top: 57em;
        left: auto;
        background: $stroke;
        transform: rotate(-10deg);
        transform-origin: 100% 100%;
    }

    & foreground i i:nth-of-type(4) {
        width: 20em;
        height: 5em;
        right: 0;
        top: 72em;
        background: $stroke;
        transform: rotate(-9deg);
        border-radius: 1em 50% 1em 1em;
        box-shadow: 1.1em .8em 0 rgba(0,0,0,0.2);
        left: auto;
    }

    & foreground i i:nth-of-type(4):before {
        width: 20em;
        height: 5em;
        right: 20em;
        top: .5em;
        background: $stroke;
        border-radius: 1em 50% 1em 1em;
        box-shadow: 1em .7em 0 rgba(0,0,0,0.2);
        left: auto;
    }

    & foreground i i:nth-of-type(4):after {
        width: 20em;
        height: 5em;
        right: 40em;
        top: 1em;
        background: $stroke;
        border-radius: 1em 50% 1em 1em;
        box-shadow: .8em .9em 0 rgba(0,0,0,0.2);
        left: auto;
    }

    & foreground i i:nth-of-type(3) {
        width: 20em;
        height: 5em;
        right: 60em;
        top: 82em;
        background: $stroke;
        transform: rotate(-9deg);
        border-radius: 1em 50% 1em 1em;
        box-shadow: .7em .7em 0 rgba(0,0,0,0.2);
        left: auto;
    }

    & foreground i i:nth-of-type(3):before {
        width: 20em;
        height: 5em;
        right: 20em;
        top: .5em;
        background: $stroke;
        border-radius: 1em 50% 1em 1em;
        box-shadow: 1em .9em 0 rgba(0,0,0,0.2);
        left: auto;
    }

    & foreground i i:nth-of-type(3):after {
        width: 20em;
        height: 5em;
        right: 40em;
        top: 1em;
        background: $stroke;
        border-radius: 1em 50% 1em 1em;
        box-shadow: .7em .5em 0 rgba(0,0,0,0.2);
        left: auto;
    }

    & foreground i i:nth-of-type(5) {
        width: 20em;
        height: 5em;
        right: 120em;
        top: 92em;
        background: $stroke;
        transform: rotate(-9deg);
        border-radius: 1em 50% 1em 1em;
        box-shadow: .7em .7em 0 rgba(0,0,0,0.2);
        left: auto;
    }

    & foreground i i:nth-of-type(5):before {
        width: 20em;
        height: 5em;
        right: 20em;
        top: .5em;
        background: $stroke;
        border-radius: 1em 50% 1em 1em;
        box-shadow: 1em .9em 0 rgba(0,0,0,0.2);
        left: auto;
    }

    & foreground i i:nth-of-type(5):after {
        width: 20em;
        height: 5em;
        right: 40em;
        top: 1em;
        background: $stroke;
        border-radius: 1em 50% 1em 1em;
        box-shadow: .7em .1em 0 rgba(0,0,0,0.2);
        left: auto;
    }

    & foreground i i:nth-of-type(7) {
        width: 20em;
        height: 5em;
        right: 180em;
        top: 102.5em;
        background: $stroke;
        transform: rotate(-9deg);
        border-radius: 1em 50% 1em 1em;
        box-shadow: .7em .7em 0 rgba(0,0,0,0.2);
        left: auto;
    }

    & foreground i i:nth-of-type(7):before {
        width: 20em;
        height: 5em;
        right: 20em;
        top: .5em;
        background: $stroke;
        border-radius: 1em 50% 1em 1em;
        box-shadow: 1em .9em 0 rgba(0,0,0,0.2);
        left: auto;
    }

    & foreground i i:nth-of-type(7):after {
        width: 20em;
        height: 5em;
        right: 40em;
        top: 1em;
        background: $stroke;
        border-radius: 1em 50% 1em 1em;
        box-shadow: .7em .1em 0 rgba(0,0,0,0.2);
        left: auto;
    }

    & foreground i i:nth-of-type(6) {
        width: 20%;
        height: 100%;
        left: 20%;
        top: 0;
        background: linear-gradient(#ffe47a, rgba(255,255,255,0));
        transform: skewX(45deg);
        box-shadow: none;
        opacity: .1;
    }

    & foreground i i:nth-of-type(6):before {
        width: 50%;
        height: 100%;
        left: 120%;
        top: 0;
        background: linear-gradient(#ffe879, rgba(255,255,255,0));
        box-shadow: none;
        transform: skewX(5deg);
    }

    & foreground i i:nth-of-type(6):after {
        width: 200%;
        height: 100%;
        left: -220%;
        top: 0;
        background: linear-gradient($skin, rgba(255,255,255,0));
        box-shadow: none;
        transform: skewX(-1deg);
    }
}
//
//
//
//
@function multiple-box-shadow ($n) {
    $value: '#{random(2000)}px #{random(2000)}px rgba(0,0,0,0.025)';

    @for $i from 2 through $n {
        $value: '#{$value} , #{random(2000)}px #{random(2000)}px rgba(0,0,0,0.05)';
    }

    @return unquote($value);
}

$rain: multiple-box-shadow(2000);
//
//
//
//
[page="0000"], [page="0001"], [page="0002"], [page="0003"], [page="0004"], [page="0005"], [page="0006"], [page="0007"] {
    & background .bi1 i:nth-of-type(5) {
        width: 2px;
        height: 200px;
        background: transparent;
        box-shadow: $rain;
        transform: rotate(-45deg);
    }
}

#scroll-note {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    color: #fff;
    letter-spacing: .04em;
}

@media (orientation:landscape) {
    #scroll-note {
        bottom: 50px;
    }
}

#scroll-note div {
    animation: more 1s infinite alternate ease-in-out;
    transition: all 1s ease-in-out;
    transform: scaleY(1) translateY(0);
}

.not-top #scroll-note div {
    transform: scaleY(-1) translateY(100px);
    animation: more2 1s infinite alternate ease-in-out;
}

@media (orientation:portrait) {
    .not-top #scroll-note div {
        margin-top: 5em;
    }
}

#scroll-note div:after, #scroll-note div:before {
    content: '';
    display: block;
    height: 4px;
    width: 20px;
    border-radius: 2px;
    background: #fff;
    transform: rotate(45deg) translateX(-9px);
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
}

#scroll-note div:after {
    transform: rotate(-45deg) translateX(9px);
}

@media (orientation:portrait) {
    #page-0000 {
        color: #fff !important;
        text-shadow: 2px 2px 0 $body, 0 0 10px $body;
    }

    #page-0000 {
        min-height: 0;
        padding-bottom: 5em;
    }
}

@keyframes breath {
    100% {
        transform: translateX(2px);
    }
}
// page-1
// page-1
// page-1


//deman
[page="0001"], [page="0003"] {
    & picture i.pi2 i:nth-of-type(4) {
        width: 31em;
        height: 24em;
        background: $skin;
        transform: translate3d(33.5em,10em,-1px) skewX(-30deg);
        border-radius: 10% 10% 5% 5%;
        border-top: 2em solid $stroke;
        border-left: 2em solid $stroke;
    }
        //hair
        & picture i.pi2 i:nth-of-type(4):after {
            width: 10em;
            height: 2em;
            background: $stroke;
            transform: translate3d(-3em,-3em,0) rotate(-20deg);
            border-radius: 30%;
            box-shadow: 1em 1em 0 $stroke;
        }

        & picture i.pi2 i:nth-of-type(4):before {
            width: 14em;
            height: 4em;
            background: $stroke;
            transform: translate3d(5.2em,-4.9em,0) skew(30deg) rotate(-8deg);
            border-radius: 10%;
            z-index: -1;
        }

    & picture i.pi2 i:nth-of-type(5) {
        width: 20em;
        height: 2em;
        transform: translate3d(60em,6em,0) rotate(20deg);
        border-radius: 10%;
        box-shadow: -3em 3em 0 -2em $stroke;
    }

        & picture i.pi2 i:nth-of-type(5):before {
            width: 25em;
            height: 2em;
            transform: rotate(11deg);
            border-radius: 40%;
        }

        & picture i.pi2 i:nth-of-type(5):after {
            width: 24em;
            height: 2em;
            transform: rotate(19deg);
        }

    & picture i.pi2 i:nth-of-type(6) {
        width: 17em;
        height: 2em;
        transform: translate3d(65em,10em,0) rotate(50deg);
        border-radius: 10%;
    }

        & picture i.pi2 i:nth-of-type(6):before {
            width: 17em;
            height: 2em;
            transform: rotate(12deg);
            border-radius: 40%;
        }

        & picture i.pi2 i:nth-of-type(6):after {
            width: 6em;
            height: 6em;
            border-radius: 50%;
        }

    & picture i.pi2 i:nth-of-type(7) {
        width: 17em;
        height: 2em;
        transform: translate3d(66em,10em,0) rotate(80deg);
        border-radius: 10%;
    }

        & picture i.pi2 i:nth-of-type(7):before {
            width: 19em;
            height: 2em;
            transform: rotate(12deg);
            border-radius: 40%;
        }

        & picture i.pi2 i:nth-of-type(7):after {
            width: 22em;
            height: 2em;
            transform: rotate(20deg);
        }

    & picture i.pi2 i:nth-of-type(8) {
        width: 5em;
        height: 25em;
        background: rgba(0,0,0,0.05);
        border-radius: 0 50% 0 0;
        border-top: 3em solid $stroke;
        border-right: 1.5em solid $stroke;
        transform: translate3d(58em,9.1em,0) rotate(3deg);
    }
    //eyebrow
    & picture i.pi2 i:nth-of-type(10) {
        width: 10em;
        height: 2em;
        background: $stroke;
        transform: translate3d(41em,25em,2px) skew(30deg) rotate(15deg);
        border-radius: 2em;
    }

        & picture i.pi2 i:nth-of-type(10):before {
            width: 9em;
            height: 2em;
            border-radius: 1.5em;
            background: $stroke;
            transform: translate3d(-10em,2em,0) rotate(-20deg);
        }
    //eye
    & picture i.pi2 i:nth-of-type(11) {
        width: 2em;
        height: 3em;
        left: 41em;
        top: 30em;
        border-radius: 50% .5em 50% 50%;
        background: $stroke;
        animation: blink 9s infinite;
        transform: scaleY(1) translateZ(2px);
    }

        & picture i.pi2 i:nth-of-type(11):before {
            width: 2.5em;
            height: 1em;
            left: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            border-radius: 50%;
            background: $stroke;
        }

        & picture i.pi2 i:nth-of-type(11):after {
            width: 2em;
            height: 2.5em;
            margin: auto;
            border-radius: 50% .5em 50% 50%;
            background: $stroke;
            transform: translate3d(-10em,.25em,0);
        }
    //nose
    & picture i.pi2 i:nth-of-type(9) {
        width: 13em;
        height: 16em;
        transform: translate3d(31em,28em,1px) skew(-28deg) rotate(0deg);
        border-radius: 3em;
        background: $skin;
        border: 1.5em solid $stroke;
        border-top: none;
    }

        & picture i.pi2 i:nth-of-type(9):before {
            width: 15em;
            height: 14em;
            left: 50%;
            top: -20%;
            background: $skin;
            transform: translate3d(0,0,0) rotate(30deg);
        }

        & picture i.pi2 i:nth-of-type(9):after {
            width: 14em;
            height: 13em;
            background: $skin;
            transform: translate3d(-5em,-1em,-3px) rotate(-40deg);
            border-left: 1.3em solid $stroke;
            border-radius: 1.5em;
        }
    //lip
    & picture i.pi2 i:nth-of-type(3) {
        width: 10em;
        height: 14em;
        transform: translate3d(30em,40em,0) skew(-5deg) rotate(-10deg);
        background: $skin;
        border: 1.5em solid $stroke;
        border-top-color: rgba(0,0,0,0);
        border-right-color: rgba(0,0,0,0);
        border-radius: 1em;
    }

        & picture i.pi2 i:nth-of-type(3):before {
            width: 13em;
            height: 14em;
            transform: translate3d(6em,-4em,0) rotate(20deg);
            background: $skin;
            border-radius: 1em;
        }

        & picture i.pi2 i:nth-of-type(3):after {
            width: 7em;
            height: 12em;
            transform: translate3d(4em,12em,0) skew(15deg);
            background: $skin;
            border-left: 1.7em solid $stroke;
            border-radius: 0 0 50% 0;
        }

    & picture i.pi2 i:nth-of-type(1) {
        width: 10em;
        height: 10em;
        background: $skin;
        transform: translate3d(37em,45em,0);
    }
    //ear
    & picture i.pi2 i:nth-of-type(12) {
        width: 12em;
        height: 15em;
        transform: translate3d(51.5em,30em,0) skew(-5deg) rotate(10deg);
        background: $skin;
        border: 1.5em solid $stroke;
        border-bottom-color: rgba(0,0,0,0);
        border-left-color: rgba(0,0,0,0);
        border-radius: 10em 5em 12em 0;
    }

    & picture i.pi2 i:nth-of-type(13) {
        width: 10em;
        height: 15em;
        transform: translate3d(41em,42em,0) rotate(15deg);
        background: $skin;
        border-right: 1.5em solid $stroke;
    }

        & picture i.pi2 i:nth-of-type(13):before {
            width: 9em;
            height: 11em;
            transform: translate3d(10em,-11em,0) rotate(50deg);
            background: $skin;
            border-right: 1.7em solid $stroke;
            transform-origin: 0 0;
            border-radius: 1em;
            border-bottom: none;
        }

        & picture i.pi2 i:nth-of-type(13):after {
            width: 10em;
            height: 5em;
            transform: translate3d(-1em,11em,0) skew(10deg) rotate(-10deg);
            background: $skin;
            border-right: 1.7em solid $stroke;
            transform-origin: 0 0;
            border-bottom: none;
            opacity:0;
        }
}

//shadows

[page="0001"], [page="0003"] {
    & picture i.pi3 i:nth-of-type(1) {
        width: 9em;
        height: 23em;
        background: rgba(40,10,0,0.05);
        transform: translate3d(54em,10em,2px) skew(-20deg);
        border-radius: 0 0 2em 0;
    }

        & picture i.pi3 i:nth-of-type(1):before {
            width: 9em;
            height: 25em;
            background: rgba(40,10,0,0.05);
            background: linear-gradient( rgba(0,0,0,0.05), rgba(0,0,0,0));
            transform: rotate(-10deg);
            transform: translate3d(-1.5em,35em,0) rotate(-10deg);
        }

        & picture i.pi3 i:nth-of-type(1):after {
            width: 15em;
            height: 13em;
            transform: translate3d(-4em,22em,0) skew(-5deg) rotate(-10deg);
            background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.05));
            background: rgba(40,10,0,0.05);
            border-radius: 10em 5em 12em 0;
        }

    & picture i.pi3 i:nth-of-type(2) {
        width: 3em;
        height: 23em;
        background: rgba(40,10,0,0.05);
        transform: translate3d(58em,10em,0) skew(-20deg);
        border-radius: 0 0 2em 0;
    }

        & picture i.pi3 i:nth-of-type(2):before {
            width: 6em;
            height: 25em;
            background: rgba(40,10,0,0.05);
            background: linear-gradient( rgba(0,0,0,0.05), rgba(0,0,0,0));
            transform: translate3d(-1.5em,35em,0) rotate(-10deg);
        }

        & picture i.pi3 i:nth-of-type(2):after {
            width: 15em;
            height: 13em;
            transform: translate3d(-4em,22em,0) skew(-5deg) rotate(-10deg);
            background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.05));
            background: rgba(40,10,0,0.05);
            border-radius: 10em 5em 12em 0;
        }
}

[page="0001"] {
    & background .bi0 i:nth-of-type(1) {
        width: 100%;
        height: 70em;
        background: #896776;
        transform: translateZ(-10px);
    }

        & background .bi0 i:nth-of-type(1):before {
            width: 100%;
            height: 100%;
            background: linear-gradient(#5fadaf,rgba(0,0,0,0) );
            opacity: 0;
        }

        & background .bi0 i:nth-of-type(1):after {
            width: 100%;
            height: 100%;
            background: linear-gradient(#5fadaf,#f39e66,#B56554, rgba(0,0,0,0) );
            opacity: 1;
        }

    & background .bi1 i, & background .bi1 i:before, & background .bi1 i:after {
        background: #6B5365;
    }
}
// page-2
// page-2
// page-2



[page="0002"] picture > i:before {
    padding-top: 100%;
    position: relative;
}

//background

[page="0002"] {

    & background > * {
        opacity: .8;
        transform: scale(1.1);
    }

    & background .bi0 i:nth-of-type(1) {
        width: 100%;
        height: 70em;
        background: #B9B3A7;
        transform: translateZ(-10px);
    }

    & background .bi0 i:nth-of-type(1):before {
        width: 100%;
        height: 100%;
        background: linear-gradient(#5F3D6F, rgba(0,0,0,0) );
        opacity: 1;
    }

    & background .bi0 i:nth-of-type(1):after {
        width: 100%;
        height: 100%;
        background: linear-gradient(#5fadaf,#f39e66,#B56554, rgba(0,0,0,0) );
        opacity: 0;
    }

    & background .bi1 i, & background .bi1 i:before, & background .bi1 i:after {
        background: #453541;
    }
}

[page="0002"], [page="0003"], [page="0004"], [page="0005"], [page="0006"], [page="0007"] {
    & background .bi0 {
        opacity: .7;
    }

    & background .bi0 i:not(:nth-of-type(1)), & background .bi0 i:not(:nth-of-type(1)):before, & background .bi0 i:not(:nth-of-type(1)):after {
        background: $horizon;
        border-radius: 50%;
    }
    //horizon
    & background .bi0 i:nth-of-type(2) {
        width: calc(100% + 100em);
        height: 50%;
        transform: translate3d(-50em,58em,-1px);
        border-radius: 0;
    }

    & background .bi0 i:nth-of-type(3) {
        width: 10em;
        height: 11em;
        transform: translate3d(0em,50em,0);
        box-shadow: -8em 1.5em 0 $horizon, 7em 1em 0 $horizon, 15em 1.5em 0 $horizon, 20em -1em 0 $horizon, 27em 1em 0 $horizon, 32em 1em 0 $horizon, 40em 1em 0 $horizon, 45em .5em 0 $horizon;
    }

    & background .bi0 i:nth-of-type(3):before {
        width: 10em;
        height: 11em;
        transform: translate3d(60em,0em,0);
        box-shadow: -8em 1.5em 0 $horizon, 7em 2em 0 $horizon, 15em 1.5em 0 $horizon, 20em 1em 0 $horizon, 27em 0 0 $horizon, 32em .5em 0 $horizon, 40em 1em 0 $horizon, 45em .5em 0 $horizon;
    }

    & background .bi0 i:nth-of-type(3):after {
        width: 10em;
        height: 11em;
        transform: translate3d(120em,0em,0);
        box-shadow: -8em 1.5em 0 $horizon, 7em 1em 0 $horizon, 15em 1.5em 0 $horizon, 20em 3em 0 $horizon, 27em 1.2em 0 $horizon, 32em .5em 0 $horizon, 40em 1.2em 0 $horizon, 45em .5em 0 $horizon;
    }

    & background .bi0 i:nth-of-type(4) {
        width: 10em;
        height: 11em;
        transform: translate3d(180em,50em,0);
        box-shadow: -8em 1.5em 0 $horizon, 7em 1em 0 $horizon, 15em 1.5em 0 $horizon, 20em -1em 0 $horizon, 27em 1em 0 $horizon, 32em 1em 0 $horizon, 40em 1em 0 $horizon, 45em .5em 0 $horizon;
    }

    & background .bi0 i:nth-of-type(4):before {
        width: 10em;
        height: 11em;
        transform: translate3d(60em,0em,0);
        box-shadow: -8em 1.5em 0 $horizon, 7em 2em 0 $horizon, 15em 1.5em 0 $horizon, 20em 1em 0 $horizon, 27em 0 0 $horizon, 32em .5em 0 $horizon, 40em 1em 0 $horizon, 45em .5em 0 $horizon;
    }

    & background .bi0 i:nth-of-type(4):after {
        width: 10em;
        height: 11em;
        transform: translate3d(120em,0em,0);
        box-shadow: -8em 1.5em 0 $horizon, 7em 1em 0 $horizon, 15em 1.5em 0 $horizon, 20em 3em 0 $horizon, 27em 1.2em 0 $horizon, 32em .5em 0 $horizon, 40em 1.2em 0 $horizon, 45em .5em 0 $horizon;
    }
}

//
//
//
//

//foreground
[page="0002"], [page="0003"], [page="0004"] {
    & foreground i {
        /*box-shadow: inset 0px 0px 0rgba(0,0,0,0);*/
        transform: scale(2) translateY(10vh);
    }
}
// page-3
// page-3
// page-3

//page stuff

[page="0003"], [page="0004"] {
    & picture > * {
        transform: scale(.5) translate3d(0,0,1px);
        transform-origin: 50% 0;
    }
}

//background

/*[page="0003"] background > * {
    opacity: .7;
    transform:scale(1);
}

[page="0003"] background i i:nth-of-type(1){
    width:100%;
    height:70em;
    background:linear-gradient(#EBEBCA,#EC821B );
}*/
/*[page="0003"] background i i, [page="0003"] background i i:before ,[page="0003"] background i i:after{
    background:#A43F1B;
}*/

[page="0003"], [page="0004"] {
    & background .bi2 {
        transform: skewY(-2deg) scale(1);
    }
}

[page="0003"], [page="0004"] {

    & background > * {
        opacity: .8;
        transform: scale(1.1);
    }

    & background .bi0 i:nth-of-type(1) {
        width: 100%;
        height: 70em;
        background: #a4846d;
        transform: translateZ(-100px);
    }

        & background .bi0 i:nth-of-type(1):before {
            width: 100%;
            height: 100%;
            background: linear-gradient(#5F3D6F, rgba(0,0,0,0) );
            opacity: 0;
        }

        & background .bi0 i:nth-of-type(1):after {
            width: 100%;
            height: 100%;
            background: linear-gradient(rgb(101, 98, 125), rgba(0,0,0,0) );
            opacity: 1;
        }

    & background .bi1 i, & background .bi1 i:before, & background .bi1 i:after {
        background: #453541;
    }
}

// page-4
// page-4
// page-4

//eyebrows
@keyframes raise {
    0% {
        transform: translate3d(43em, 25em,10px) skew(30deg) rotate(11deg);
    }

    6% {
        transform: translate3d(43em, 24em,10px) skew(0deg) rotate(11deg);
    }

    20% {
        transform: translate3d(43em, 25em,10px) skew(30deg) rotate(11deg);
    }
}

//deman looking towards cam
[page="0004"], [page="0005"] {

    & picture i.pi2 i:nth-of-type(4) {
        width: 31em;
        height: 24em;
        background: $skin;
        transform: translate3d(30em,10em,0) skewX(-10deg);
        border-radius: 10% 10em 5% 5%;
        border-top: 2em solid $stroke;
        border-left: 2em solid $stroke;
    }
    //hair
    & picture i.pi2 i:nth-of-type(4):after {
        width: 10em;
        height: 2em;
        background: $stroke;
        transform: translate3d(-3em,-3em,0) rotate(-20deg);
        border-radius: 30%;
        box-shadow: 1em 1em 0 $stroke;
    }

    & picture i.pi2 i:nth-of-type(4):before {
        width: 14em;
        height: 4em;
        background: $stroke;
        transform: translate3d(5.2em,-4.9em,0) skew(30deg) rotate(-8deg);
        border-radius: 10%;
        z-index: -1;
    }
    //sticky out bits
    & picture i.pi2 i:nth-of-type(5) {
        width: 12em;
        height: 2em;
        transform: translate3d(50em,6em,0) rotate(10deg);
        border-radius: 10%;
        box-shadow: 0 2em 0 0 $stroke;
    }

    & picture i.pi2 i:nth-of-type(5):before {
        width: 13em;
        height: 2em;
        transform: translate3d(5em,0em,0) rotate(10deg);
        border-radius: 40%;
    }

    & picture i.pi2 i:nth-of-type(5):after {
        width: 13em;
        height: 2em;
        transform: translate3d(5em,0em,0) rotate(19deg);
    }

    & picture i.pi2 i:nth-of-type(6) {
        width: 9em;
        height: 2em;
        transform: translate3d(64em,11em,0) rotate(47deg);
        border-radius: 10%;
    }

    & picture i.pi2 i:nth-of-type(6):before {
        width: 11em;
        height: 2em;
        transform: rotate(16deg);
        border-radius: 40%;
    }

    & picture i.pi2 i:nth-of-type(6):after {
        width: 6em;
        height: 6em;
        border-radius: 50%;
        transform: translate3d(-3em,-1em,0);
    }

    & picture i.pi2 i:nth-of-type(7) {
        width: 17em;
        height: 2em;
        transform: translate3d(64em,10em,0) rotate(80deg);
        border-radius: 10%;
    }

    & picture i.pi2 i:nth-of-type(7):before {
        width: 19em;
        height: 2em;
        transform: rotate(12deg);
        border-radius: 40%;
    }

    & picture i.pi2 i:nth-of-type(7):after {
        width: 22em;
        height: 2em;
        transform: rotate(20deg);
    }

    & picture i.pi2 i:nth-of-type(8) {
        width: 5em;
        height: 25em;
        background: rgba(0,0,0,0.05);
        border-radius: 0 50% 0 0;
        border-top: 3em solid $stroke;
        border-right: 3em solid $stroke;
        transform: translate3d(56em,9.1em,0) rotate(3deg);
    }
    //eyebrows
    & picture i.pi2 i:nth-of-type(10) {
        width: 10em;
        height: 2em;
        background: $stroke;
        transform: translate3d(43em,25em,10px) skew(30deg) rotate(11deg);
        border-radius: 2em;
        animation: raise 10s infinite;
    }

    & picture i.pi2 i:nth-of-type(10):before {
        width: 9em;
        height: 2em;
        border-radius: 1.5em;
        background: $stroke;
        transform: translate3d(-11em,2em,0) rotate(-18deg);
    }
    //eye
    & picture i.pi2 i:nth-of-type(11) {
        width: 3em;
        height: 3em;
        left: 45em;
        top: 30em;
        border-radius: 50% .5em 50% 50%;
        background: $stroke;
        animation: blink 9s infinite;
        transform: scaleY(1) translateZ(2px);
    }

    & picture i.pi2 i:nth-of-type(11):before {
        width: 4.5em;
        height: 1em;
        left: -1em;
        top: 0;
        bottom: 0;
        right: -1em;
        margin: auto;
        border-radius: 50%;
        background: $stroke;
    }

    & picture i.pi2 i:nth-of-type(11):after {
        width: 2em;
        height: 2.5em;
        margin: auto;
        border-radius: 50% .5em 50% 50%;
        background: $stroke;
        transform: translate3d(-10em,.25em,0);
    }
    //nose
    & picture i.pi2 i:nth-of-type(9) {
        width: 10em;
        height: 16em;
        transform: translate3d(35em,28em,1px) skew(-20deg) rotate(0deg);
        border-radius: 3em;
        background: $skin;
        border: 1.5em solid $stroke;
        border-top: none;
    }

    & picture i.pi2 i:nth-of-type(9):before {
        width: 15em;
        height: 14em;
        background: $skin;
        transform: translate3d(3em,0em,0) rotate(30deg);
    }

    & picture i.pi2 i:nth-of-type(9):after {
        width: 10em;
        height: 10em;
        background: #efd4c6;
        transform: translate3d(-9em,6em,-1px) rotate(-35deg);
        border-left: 1.5em solid #190d23;
        border-radius: 1.5em;
        transform-origin: 0 0;
    }
    //lip
    & picture i.pi2 i:nth-of-type(3) {
        width: 14em;
        height: 14em;
        transform: translate3d(32em,40em,0) skewX(10deg);
        background: $skin;
        border: 1.5em solid $stroke;
        border-top-color: rgba(0,0,0,0);
        border-right-color: rgba(0,0,0,0);
        border-radius: 0 0 0 1em;
    }

    & picture i.pi2 i:nth-of-type(3):before {
        width: 13em;
        height: 14em;
        transform: translate3d(6em,-4em,0) rotate(20deg);
        background: $skin;
        border-radius: 1em;
    }

    & picture i.pi2 i:nth-of-type(3):after {
        width: 5em;
        height: 12em;
        transform: translate3d(2em,12em,0) skew(1deg);
        background: $skin;
        border-left: 1.7em solid $stroke;
        border-radius: 0 0 50% 0;
    }

    & picture i.pi2 i:nth-of-type(1) {
        width: 10em;
        height: 10em;
        background: $skin;
        transform: translate3d(37em,45em,0);
    }
    //ear
    & picture i.pi2 i:nth-of-type(12) {
        width: 8em;
        height: 15em;
        transform: translate3d(53em,30em,0) skew(-5deg) rotate(10deg);
        background: $skin;
        border: 1.5em solid $stroke;
        border-left-color: rgba(0,0,0,0);
        border-radius: 10em 5em 12em 0;
    }

    & picture i.pi2 i:nth-of-type(12):before {
        width: 8em;
        height: 15em;
        transform: translate3d(-8em,0em,0);
        background: $skin;
    }
    //neck
    & picture i.pi2 i:nth-of-type(13) {
        width: 10em;
        height: 10em;
        transform: translate3d(43em,42em,0) rotate(20deg);
        background: $skin;
        border-right: 1.5em solid $stroke;
    }

    & picture i.pi2 i:nth-of-type(13):before {
        width: 5em;
        height: 4em;
        transform: translate3d(6em, -4em,0) rotate(30deg);
        background: #efd4c6;
        border-right: 1.7em solid #190d23;
        transform-origin: 0 0;
        border-radius: 1em;
        border-bottom: none;
    }

    & picture i.pi2 i:nth-of-type(13):after {
        width: 8em;
        height: 6em;
        transform: translate3d(.5em, 9em,0) rotate(3deg);
        background: #efd4c6;
        border-right: 1.5em solid #190d23;
        transform-origin: 0 0;
        border-bottom: none;
    }
    //shadows
    & picture i.pi3 i:nth-of-type(1) {
        width: 7em;
        height: 23em;
        background: rgba(40,10,0,0.05);
        transform: translate3d(54em,10em,10px) skew(-20deg);
        border-radius: 0 0 2em 3em;
    }

    & picture i.pi3 i:nth-of-type(1):before {
        width: 7em;
        height: 25em;
        background: linear-gradient( rgba(0,0,0,0.05), rgba(0,0,0,0));
        transform: rotate(-10deg);
        transform: translate3d(1.5em,35em,0) rotate(-10deg);
    }

    & picture i.pi3 i:nth-of-type(1):after {
        width: 12em;
        height: 13em;
        transform: translate3d(-1em,22em,0) skew(-5deg) rotate(-10deg);
        background: rgba(40,10,0,0.05);
        border-radius: 10em 5em 12em 0;
    }

    & picture i.pi3 i:nth-of-type(2) {
        width: 3em;
        height: 23em;
        background: rgba(40,10,0,0.05);
        transform: translate3d(58em,10em,10px) skew(-20deg);
        border-radius: 0 0 2em 0;
    }

    & picture i.pi3 i:nth-of-type(2):before {
        width: 4em;
        height: 25em;
        background: rgba(40,10,0,0.05);
        background: linear-gradient( rgba(0,0,0,0.05), rgba(0,0,0,0));
        transform: translate3d(1.5em,35em,0) rotate(-10deg);
    }

    & picture i.pi3 i:nth-of-type(2):after {
        width: 10em;
        height: 13em;
        transform: translate3d(-1em,22em,0) skew(-5deg) rotate(-5deg);
        background: rgba(40,10,0,0.05);
        border-radius: 10em 5em 12em 0;
    }
}

//top
//top
//top
//top
//top
//top
//top
//top
[page="0004"] {
    & picture i.pi1 i:nth-of-type(7) {
        width: 15em;
        height: 36em;
        transform: translate3d(34em,58em,1px) rotate(10deg) skewY(-20deg);
        background: $top;
        border-radius: 2em;
        border-top: 1.5em solid $stroke;
    }

        & picture i.pi1 i:nth-of-type(7):before {
            width: 10em;
            height: 15em;
            transform: translate3d(19.5em,9em,10px) rotate(-20deg) skewY(30deg);
            background: #78674d;
            border-radius: 1em 1em 10em 2em;
            border-right: 1.5em solid $stroke;
            border-bottom: 2em solid $stroke;
        }

        & picture i.pi1 i:nth-of-type(7):after {
            width: 17em;
            height: 10em;
            transform: translate3d(15em,-1em,4px) rotate(38deg);
            background: #78674d;
            border-top: 1.7em solid $stroke;
            transform-origin: 0 0;
            border-radius: 1em 1em 1em 4em;
        }

    & picture i.pi1 i:nth-of-type(8) {
        width: 10em;
        height: 36em;
        transform: translate3d(37em,60em,0) rotate(-30deg);
        background: $top;
        border-radius: 2em;
        border-top: 1.5em solid $stroke;
    }

        & picture i.pi1 i:nth-of-type(8):before {
            width: 10em;
            height: 10em;
            transform: translate3d(-6em,1em,0) rotate(-40deg);
            background: $top;
            border-radius: 5em 2em 0 0;
            border-top: 1.5em solid $stroke;
            border-left: 1.5em solid $stroke;
        }

    & picture i.pi1 i:nth-of-type(9) {
        width: 20em;
        height: 20em;
        transform: translate3d(30em,68em,1px) rotate(10deg);
        background: $top;
        border-radius: 2em 2em 0 0;
        border-left: 1.2em solid $stroke;
    }

        & picture i.pi1 i:nth-of-type(9):before {
            width: 5em;
            height: 6em;
            transform: translate3d(-3em,19em,1px) rotate(30deg);
            background: $top;
            border-radius: 2em 0 0 4em;
            border-left: 1.2em solid $stroke;
        }

        & picture i.pi1 i:nth-of-type(9):after {
            width: 20em;
            height: 10em;
            transform: translate3d(-3em,22em,0) rotate(5deg);
            background: $top;
            border-radius: 5em 2em 2em 2em;
            border-left: 1.2em solid $stroke;
        }

    & picture i.pi1 i:nth-of-type(10) {
        width: 5em;
        height: 8em;
        transform: translate3d(51em,73em,11px) rotate(10deg) skewX(13deg);
        background: $top;
        border-radius: 1em 0 0 2em;
        border-left: 1.2em solid $stroke;
        border-bottom: 1.7em solid $stroke;
    }

        & picture i.pi1 i:nth-of-type(10):before {
            opacity: 0;
            width: 0;
        }
    //near arm
    & picture i.pi1 i:nth-of-type(11) {
        width: 14em;
        height: 20em;
        transform: translate3d(50em,72em,10px) rotate(20deg);
        background: $skin;
        border-radius: 3em 3em 2em 3em;
        border-left: 1.6em solid $stroke;
        border-right: 1.4em solid $stroke;
    }

        & picture i.pi1 i:nth-of-type(11):before {
            width: 8.5em;
            height: 32em;
            transform: translate3d(-2.5em, 28em,-1px) rotate(100deg) skewY(12deg);
            background: $skin;
            border-radius: 3em 10em 7em 7em;
            border: 1.3em solid $stroke;
            transform-origin: 100% 0;
        }
        //hand
        & picture i.pi1 i:nth-of-type(11):after {
            width: 4em;
            height: 5em;
            transform: translate3d(-16em,12em,-11px) rotate(-10deg) skewY(20deg);
            background: $skin;
            border-radius: 3em;
            border-top: 1.3em solid $stroke;
            border-right: 1.4em solid $stroke;
        }

    & picture i.pi1 i:nth-of-type(6) {
        transform: translate3d(30em,70em,1px) rotate(-20deg) skewY(1deg);
        opacity: 0;
    }
    //far arm
    & picture i.pi1 i:nth-of-type(4) {
        width: 12em;
        height: 25em;
        transform: translate3d(28em,69em,0) rotate(20deg);
        background: $skin;
        border-radius: 7em;
        border: 1.3em solid $stroke;
        transform-origin: 0 0;
    }

        & picture i.pi1 i:nth-of-type(4):before {
            width: 7em;
            height: 20em;
            transform: translate3d(4em,25em,9px) rotate(-120deg) skewY(12deg);
            background: $skin;
            border-radius: 3em;
            border-left: 1.4em solid $stroke;
            border-right: 1.3em solid $stroke;
            transform-origin: 0 0;
        }
        //hand
        & picture i.pi1 i:nth-of-type(4):after {
            width: 9em;
            height: 9em;
            transform: translate3d(20em, -2em,21px) rotate(0deg) skewY(0deg);
            background: $skin;
            border-radius: 3em 3em 7em 3em;
            border: 1.3em solid $stroke;
        }

    & picture i.pi1 i:nth-of-type(1) {
        width: 40em;
        height: 8em;
        transform: translate3d(24.5em,97em,-1px) rotate(1deg);
        background: $top;
        border-radius: 1em 0 0 2em;
        border-left: 1.2em solid $stroke;
    }

        & picture i.pi1 i:nth-of-type(1):after {
            width: 20em;
            height: 15em;
            transform: translate3d(9em,4.5em,0) rotate(-45deg) skewY(45deg);
            background: $top;
            border-radius: 2em 0 100% 100%;
            border-left: 1.2em solid $stroke;
            border-bottom: 1.3em solid $stroke;
        }
    //shadows
    & picture i.pi1 i:nth-of-type(2) {
        width: 18em;
        height: 56em;
        background: #78674d;
        border-radius: 0 9em 9em 0em;
        border-right: 1.3em solid $stroke;
        transform: translate3d(44em,58em,2px) rotate(-10deg) skewY(6deg);
    }

        & picture i.pi1 i:nth-of-type(2):before {
            width: 0;
            height: 0;
            transform: translate3d(-11em, 27em,0) rotate(-5deg) skewY(10deg);
            border-radius: 0 0 14em 0;
            border: 15em solid rgba(0,0,0,0.1);
            border-top-color: rgba(0,0,0,0);
            border-left-color: rgba(0,0,0,0);
        }

        & picture i.pi1 i:nth-of-type(2):after {
            width: 7em;
            height: 28em;
            transform: translate3d(11em, 27em,0) skewY(-10deg);
            border-radius: 0 0 14em 0;
            background: rgba(0, 0, 0, 0.1);
        }

    & picture i.pi1 i:nth-of-type(3) {
        width: 35em;
        height: 15em;
        transform: translate3d(28em, 82em,1px) rotate(10deg) skewY(10deg);
        background: rgba(0, 0, 0, 0.1);
        border-radius: 0 10em 10em 0;
        opacity: 1;
    }

        & picture i.pi1 i:nth-of-type(3):before {
            width: 29em;
            height: 26em;
            transform: translate3d(-5em, -25em,10px) skewY(-10deg) rotate(15deg);
            border-radius: 10em;
            border: 5em solid rgba(0, 0, 0, 0.1);
            /*border-top-color: rgba(0, 0, 0, 0);*/
            border-left-color: rgba(0, 0, 0, 0);
        }

    & picture i.pi1 i:nth-of-type(5) {
        width: 25em;
        height: 10em;
        transform: translate3d(25em, 87em,8px) rotate(-35deg) skewY(25deg);
        background: rgba(0, 0, 0, 0.1);
        border-radius: 0 0 0 5em;
    }

    & picture i.pi1 i:nth-of-type(12) {
        width: 5em;
        height: 57em;
        transform: translate3d(50em,58em,2px) rotate(3deg);
        background: rgba(0,0,0,0.1);
        border-radius: 0 10em 2em 2em;
        opacity: 0;
    }

        & picture i.pi1 i:nth-of-type(12):before {
            width: 5em;
            height: 57em;
            transform: translate3d(10em,6em,4px) rotate(-3deg) skewY(45deg);
            background: rgba(0,0,0,0.1);
            border-radius: 0 2em 2em 2em;
            border-color: rgba(0,0,0,0);
            opacity: 0;
        }
}
// page-5
// page-5
// page-5


//page stuff

[page="0005"], [page="0006"], [page="0007"] {
    & background .bi2 {
        transform: skewY(3deg) scale(.95) translate3d(20em,-20em,0);
    }

    & background .bi1 {
        transform: translate3d(10em,-10em,0);
    }

    & background .bi0 {
        transform: translate3d(5em,-5em,0);
    }
}

[page="0005"], [page="0006"]{
    & foreground i {
        transform: scale(3) translateY(10vh);
    }
    }
    [page="0005"], [page="0006"], [page="0007"] {
    //road
    & background .bi2 i:nth-of-type(15) {
        background: linear-gradient( #483343, #2D2234);
    }

        & background .bi2 i:nth-of-type(15):before {
            background: linear-gradient( #30222d, #2D2234);
        }

        & background .bi2 i:nth-of-type(15):after {
            background: $body;
            opacity: .7;
            box-shadow: 0 3em 0 $body50, 0 4em 4em 4em $body50;
        }
    //background
    & background > * {
        opacity: .8;
        transform: scale(1.1);
    }

    & background .bi0 i:nth-of-type(1) {
        width: 100%;
        height: 70em;
        background: #7a8986;
        transform: translateZ(-100px);
    }

        & background .bi0 i:nth-of-type(1):before {
            width: 100%;
            height: 100%;
            background: linear-gradient(#210057, rgba(0,0,0,0) );
            opacity: 1;
        }

        & background .bi0 i:nth-of-type(1):after {
            width: 100%;
            height: 100%;
            background: linear-gradient(rgb(101, 98, 125), rgba(0,0,0,0) );
            opacity: 0;
        }
    //grass
    & background .bi1 i, & background .bi1 i:before, & background .bi1 i:after {
        background: #442B0E;
    }
}

//near arm

[page="0005"], [page="0006"], [page="0007"] {
    //upper arm
    & picture i.pi1 i:nth-of-type(11) {
        width: 14em;
        height: 20em;
        transform: translate3d(52em,72em,4px) rotate(0deg);
        background: $skin;
        border-radius: 3em;
        border-left: 1.6em solid $stroke;
        border-right: 1.4em solid $stroke;
    }
        //forearm
        & picture i.pi1 i:nth-of-type(11):before {
            width: 8.5em;
            height: 25em;
            transform: translate3d(0em,20em,0) rotate(13deg) skewY(0deg);
            background: $skin;
            border-radius: 3em;
            border-left: 1.6em solid $stroke;
            border-right: 1.4em solid $stroke;
            transform-origin: 100% 0;
        }
        /*& picture i.pi1 i:nth-of-type(5):after {
        width: 4em;
        height: 5em;
        transform: translate3d(6em,42em) rotate(-10deg) translateZ(-1px) skewY(20deg);
        background: $skin;
        border-radius: 3em;
        border-top: 1.3em solid $stroke;
        border-right: 1.4em solid $stroke;
    }*/
        //hand
        & picture i.pi1 i:nth-of-type(11):after {
            width: 8em;
            height: 9em;
            transform: translate3d(-10em, 40em,-2px) rotate(10deg) skew(-20deg);
            background: $skin;
            border-radius: 3em;
            border: 1.3em solid $stroke;
        }

    & picture i.pi1 i:nth-of-type(6) {
        width: 11em;
        height: 10em;
        transform: translate3d(46em, 114em,3px) rotate(15deg) skewY(-20deg);
        background: $skin;
        border-radius: 3em 0 3em 0;
        border-top: 1.3em solid $none;
        border-right: 1.4em solid $stroke;
        border-left: 1.4em solid $stroke;
    }

        & picture i.pi1 i:nth-of-type(6):before {
            width: 10em;
            height: 5em;
            transform: translate3d(-4em, 4em,-1px) rotate(15deg) skewY(-20deg);
            background: #cab4a1;
            border-radius: 4em;
            border: 1.3em solid #190d23;
        }

    picture i.pi1 i:nth-of-type(12):before {
        width: 5em;
        height: 27em;
        transform: translate3d(10em, 6em,4px) rotate(-3deg) skewY(45deg);
        background: rgba(0, 0, 0, 0.1);
        border-radius: 0 2em 2em 2em;
        border-color: rgba(0, 0, 0, 0);
    }

    picture i.pi1 i:nth-of-type(12):after {
        width: 5em;
        height: 35em;
        transform: translate3d(6em, 31em,4px) rotate(11deg) skewY(-45deg);
        background: rgba(0, 0, 0, 0.1);
        border-radius: 1em;
        border-color: rgba(0, 0, 0, 0);
    }
}

[page="0005"], [page="0006"], [page="0007"] {

    & picture i.pi0 i:nth-of-type(1) {
        width: 25em;
        height: 28em;
        transform: translate3d(25em,100em,0) rotate(-20deg);
        background: #294748;
        border-left: 1.2em solid $stroke;
        transform-origin: 0 0;
    }

        & picture i.pi0 i:nth-of-type(1):before {
            width: 10em;
            height: 30em;
            transform: translate3d(20em, 20em,0) rotate(17deg);
            background: #294748;
            border-right: 1.2em solid $stroke;
            transform-origin: 0 0;
        }

        & picture i.pi0 i:nth-of-type(1):after {
            width: 10em;
            height: 19em;
            transform: translate3d(14em, 40em,0) rotate(15deg);
            background: #294748;
            border-right: 1.2em solid $stroke;
            transform-origin: 0 0;
        }

    & picture i.pi0 i:nth-of-type(2) {
        width: 10em;
        height: 20em;
        transform: translate3d(51em,131em,0) rotate(-20deg);
        background: #294748;
        border-left: 1.2em solid $stroke;
    }

        & picture i.pi0 i:nth-of-type(2):before {
            width: 10em;
            height: 13em;
            transform: translate3d(-3em,-13em,0) rotate(-10deg);
            background: #294748;
            border-left: 1.2em solid $stroke;
        }

        & picture i.pi0 i:nth-of-type(2):after {
            width: 7em;
            height: 5em;
            transform: translate3d(-8em,-17em,0) rotate(13deg);
            background: #294748;
            border-bottom: 1.2em solid $stroke;
            border-radius: 50%;
        }
    //left leg
    & picture i.pi0 i:nth-of-type(3) {
        width: 15em;
        height: 22em;
        transform: translate3d(33em,124em,-1px) rotate(9deg);
        background: #294748;
        border-left: 1.5em solid $stroke;
        border-right: 1.5em solid $stroke;
    }

        & picture i.pi0 i:nth-of-type(3):before {
            width: 12em;
            height: 17em;
            transform: translate3d(0em,20em,2px) rotate(-15deg) skewX(-5deg);
            background: #294748;
            border-left: 1.5em solid $stroke;
            border-right: 1.5em solid $stroke;
        }

    & picture i.pi0 i:nth-of-type(4) {
        width: 17em;
        height: 5em;
        transform: translate3d(31em, 160em,1px) rotate(3deg) skewX(-8deg);
        background: #294748;
        border: 1.3em solid $stroke;
    }
    // left shoe
    & picture i.pi0 i:nth-of-type(5) {
        width: 27em;
        height: 10em;
        transform: translate3d(19em,162em,0) skewX(-15deg) rotate(-12deg);
        background: #302824;
        border: 1.1em solid $stroke;
        border-radius: 4em 2em 1em 3em;
    }

        & picture i.pi0 i:nth-of-type(5):before {
            width: 7em;
            height: 7em;
            transform: translate3d(6em,-2em,5px) skewX(15deg) rotate(45deg);
            background: #302824;
            border-top: 1.4em solid $stroke;
            border-radius: 50%;
        }
    /*& picture i.pi0 i:nth-of-type(5):after {
            width: 4em;
            height: 6em;
            left: 4px;
            top: 0em;
            transform: translateZ(6px) skewX(15deg) rotate(-45deg);
            border-right: 1.2em solid $stroke;
            border-radius: 50%;
        }*/
    //right leg
    & picture i.pi0 i:nth-of-type(6) {
        width: 10em;
        height: 17em;
        transform: translate3d(54em,150em,2px) rotate(-5deg) skewX(-5deg);
        background: #294748;
        border-left: 1.5em solid $stroke;
    }

        & picture i.pi0 i:nth-of-type(6):before {
            width: 7em;
            height: 19em;
            transform: translate3d(5em,-2em,1px) rotate(-12deg) skewX(8deg);
            background: #294748;
            border-right: 1.3em solid $stroke;
        }

        & picture i.pi0 i:nth-of-type(6):after {
            width: 17em;
            height: 3em;
            transform: translate3d(-2em,16em,1px) rotate(-1deg) skewX(-8deg);
            background: #294748;
            border: 1.1em solid $stroke;
        }
    // right shoe
    & picture i.pi0 i:nth-of-type(7) {
        width: 17em;
        height: 22em;
        transform: translate3d(52em,164em,0) skewX(-20deg) rotate(10deg);
        background: #302824;
        border: 1.3em solid $stroke;
        border-radius: 6em;
    }

        & picture i.pi0 i:nth-of-type(7):before {
            width: 7em;
            height: 7em;
            transform: translate3d(4em,4em,5px) skewX(10deg);
            background: #302824;
            border-top: 1.2em solid $stroke;
            border-radius: 50%;
        }

        & picture i.pi0 i:nth-of-type(7):after {
            width: 10em;
            height: 7em;
            transform: translate3d(2em,12em,1px) skewX(10deg);
            border-top: 1.2em solid $stroke;
            border-radius: 50%;
        }
    //shadows
    & picture i.pi0 i:nth-of-type(8) {
        width: 8em;
        height: 25em;
        transform: translate3d(37em,120em,-1px) rotate(-20deg) skewY(-60deg);
        background: rgba(0,0,0,0.25);
        transform-origin: 0 0;
    }

        & picture i.pi0 i:nth-of-type(8):before {
            width: 10em;
            height: 25em;
            background: rgba(0,0,0,0.15);
            transform-origin: 0 0;
            transform: translate3d(8em, 12em,2px) rotate(60deg) skewY(0deg);
        }

    & picture i.pi0 i:nth-of-type(9) {
        width: 5em;
        height: 76em;
        transform: translate3d(58em,110em,5px) rotate(-1deg);
        background: rgba(0,0,0,0.1);
        transform-origin: 0 0;
        border-radius: 0 0 5em 0;
    }

        & picture i.pi0 i:nth-of-type(9):before {
            width: 0;
            height: 0;
            transform: translate3d(-8em,0em,0);
            transform-origin: 0 0;
            border: 6.5em solid rgba(0,0,0,0.1);
            border-bottom-color: rgba(0,0,0,0);
            border-left-color: rgba(0,0,0,0);
            border-top-width: 25em;
        }

        & picture i.pi0 i:nth-of-type(9):after {
            width: 0;
            height: 0;
            transform: translate3d(5em,35em,0);
            transform-origin: 0 0;
            border: 23em solid rgba(0,0,0,0);
            border-left: 8em solid rgba(0,0,0,0.15);
            border-bottom-width: 16em;
        }

    & picture i.pi0 i:nth-of-type(10) {
        width: 200em;
        height: 30em;
        transform: translate3d(25em,150em,-1px) rotate(10deg);
        background: rgba(0,0,0,0.1);
        transform-origin: 0 0;
        border-radius: 50%;
    }

        & picture i.pi0 i:nth-of-type(10):after {
            width: 200em;
            height: 50em;
            transform: translate3d(10em,-10em,-1px) rotate(15deg);
            background: rgba(0,0,0,0.1);
            transform-origin: 0 0;
            border-radius: 50%;
        }
}

/*[page="0005"] {
    & picture > * {
        transform: scale(.5);
        transform-origin: 50% 0;
    }
}*/
// page-6
// page-6
// page-6


[page="0006"], [page="0007"] {
    & picture i.pi2 i:nth-of-type(3) {
        width: 10em;
        height: 14em;
        transform: translate3d(26em,40em,0) skewY(25deg) rotate(-20deg);
        background: $skin;
        border: 1.5em solid $stroke;
        border-top-color: rgba(0,0,0,0);
        border-right-color: rgba(0,0,0,0);
        border-radius: 1em;
    }

        & picture i.pi2 i:nth-of-type(3):before {
            width: 15em;
            height: 14em;
            transform: translate3d(6em,-5em,0) rotate(20deg) skewY(-25deg);
            background: $skin;
            border-radius: 1em;
        }

        & picture i.pi2 i:nth-of-type(3):after {
            width: 7em;
            height: 10em;
            transform: translate3d(4em,12.5em,0) skew(20deg);
            background: $skin;
            border-left: 1.7em solid $stroke;
            border-radius: 0 0 7em 0;
        }
}
//v-neck
[page="0006"], [page="0007"] {
    picture i.pi2 i:nth-of-type(2) {
        width: 12em;
        height: 12em;
        transform: translate3d(38em,54em,0) rotate(-15deg) skewY(-50deg);
        background: $skin;
        border-bottom: 2em solid $stroke;
        border-left: 1.5em solid $stroke;
    }
}
// page-7
// page-7
// page-7

//page stuff

[page="0007"] {
    & picture > * {
        transform: scale(.5);
        transform-origin: 50% 0;
    }

    background .bi0 {
        transform: translate3d(5em, -50em,-12px);
    }

    background .bi1 {
        transform: translate3d(10em, -50em,-11px);
    }

    & background .bi2 {
        transform: skewY(4deg) scale(0.7) translate3d(20em, -20em,-10px);
        transform-origin: 50% 0;
    }

    & background > * {
        opacity: 1;
        transform: scale(1);
    }

    & picture i.pi0 i:nth-of-type(10) {
        width: 200em;
        height: 30em;
        transform: translate3d(21em, 156em,-1px) rotate(10deg);
        background: rgba(25, 13, 35,0.3);
        transform-origin: 0 0;
        border-radius: 50%;
    }

        & picture i.pi0 i:nth-of-type(10):after {
            width: 200em;
            height: 50em;
            transform: translate3d(10em, -10em,-1px) rotate(15deg);
            background: rgba(25, 13, 35,0.3);
            transform-origin: 0 0;
            border-radius: 50%;
        }

    & foreground i i:nth-of-type(6), & foreground i i:nth-of-type(7) {
        width: 0;
        height: 10em;
        border: 300em solid $none;
        border-left: none;
        border-top-width: 75em !important;
        border-bottom-width: 75em !important;
        border-right-color: #ffe47a !important;
        transform: translate3d(-20em, -28em,0) rotate(2deg);
        /*mask-image: linear-gradient(to right, rgba(0,0,0,.1), rgba(0,0,0,0));
        -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,.1), rgba(0,0,0,0));*/
        opacity: .05;
    }

    & foreground i i:nth-of-type(7) {
        top: 20em;
    }
}

[scrolling="false"][page="0007"] {
    & foreground i i:nth-of-type(6), & foreground i i:nth-of-type(7) {
        animation: headlights 1s alternate infinite;
    }
}

@keyframes headlights {
    100% {
        opacity: .01;
        border-right-width: 350em;
    }
}
// page-8
// page-8
// page-8

@media  (orientation:landscape){

#page-0008, #page-0009 {
    transform: translateX(100%);
}
[page="0008"], [page="0009"] {
    & picture {
        transform: translateX(-100%);
    }
}
}
[page="0008"], [page="0009"], [page="0014"] {
    & *, & *:before, & *:after {
        box-sizing: border-box;
        display: block;
        }
    & background .bi0 {
        background: radial-gradient( circle at 20% 50em, #6d6355, #000);
    }
    & background .bi1 {
        opacity: .9;
        /*background: #5C5449;
            background: radial-gradient( circle at 20% 50em, #6d6355, #000);*/
    }
        //ceiling
        & background .bi1 i:nth-of-type(12) {
            transform: translate3d(-50%,-100em,0);
            width: 200%;
            height: 115.5em;
            background: radial-gradient( circle at 20% 50em, $none, #000);
            opacity: .9;
        }

        & background .bi1 i:nth-of-type(2) {
            transform: translate3d(-50%,-100em,0);
            width: 200%;
            height: 108em;
            background: #2e2823;
            background-image: linear-gradient(to right, rgba(0,0,0,0.1) 11.11%, rgba(0,0,0,0) 11.11%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1) 61.11%, rgba(0,0,0,0) 61.11%, rgba(0,0,0,0) 100%);
            background-size: 5em 5em;
        }

            & background .bi1 i:nth-of-type(2):before {
                transform: translate3d(0,108em,0);
                width: 200%;
                height: 1.5em;
                background: #11100f;
            }

            & background .bi1 i:nth-of-type(2):after {
                transform: translate3d(0,109.5em,0);
                width: 200%;
                height: 6em;
                background: #494039;
                opacity: .8;
                box-shadow: 0 .5em 0 rgba(0,0,0,0.5),0 1.5em 0 rgba(0,0,0,0.5);
                background-image: linear-gradient(to right, rgba(0,0,0,0.1) 11.11%, rgba(0,0,0,0) 11.11%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1) 61.11%, rgba(0,0,0,0) 61.11%, rgba(0,0,0,0) 100%);
                background-size: 5em 5em;
            }
        //windows
        & background .bi1 i:nth-of-type(3),
        & background .bi1 i:nth-of-type(4),
        & background .bi1 i:nth-of-type(5),
        & background .bi1 i:nth-of-type(6),
        & background .bi1 i:nth-of-type(7),
        & background .bi1 i:nth-of-type(8) {
            transform: translate3d(10em,20em,0);
            width: 20em;
            height: 45em;
            background: #312b25;
            border-radius: .5em;
            box-shadow: inset -5em 2em .1em rgba(0,0,0,0.25);
            overflow: hidden;
        }

            & background .bi1 i:nth-of-type(3):before,
            & background .bi1 i:nth-of-type(4):before,
            & background .bi1 i:nth-of-type(5):before,
            & background .bi1 i:nth-of-type(7):before,
            & background .bi1 i:nth-of-type(8):before {
                transform: translate3d(2em,2em,0);
                width: 4em;
                height: 9em;
                background: #000;
                border-radius: .5em;
                box-shadow: -.25em -.25em 0 rgba(0,0,0,0.5), 5em 0 0 #000, 4.75em -.25em 0 rgba(0,0,0,0.5), 10em 0 0 #000, 9.75em -.25em 0 rgba(0,0,0,0.5), 15em 0 0 #000, 14.75em -.25em 0 rgba(0,0,0,0.5), 0em 10em 0 #000, -.25em 9.75em 0 rgba(0,0,0,0.5), 5em 10em 0 #000, 4.75em 9.75em 0 rgba(0,0,0,0.5), 10em 10em 0 #000, 9.75em 9.75em 0 rgba(0,0,0,0.5), 15em 10em 0 #000, 14.75em 9.75em 0 rgba(0,0,0,0.5), 0em 22em 0 #000, -.25em 21.75em 0 rgba(0,0,0,0.5), 5em 22em 0 #000, 4.75em 21.75em 0 rgba(0,0,0,0.5), 10em 22em 0 #000, 9.75em 21.75em 0 rgba(0,0,0,0.5), 15em 22em 0 #000, 14.75em 21.75em 0 rgba(0,0,0,0.5), 0em 32em 0 #000, -.25em 31.75em 0 rgba(0,0,0,0.5), 5em 32em 0 #000, 4.75em 31.75em 0 rgba(0,0,0,0.5), 10em 32em 0 #000, 9.75em 31.75em 0 rgba(0,0,0,0.5), 15em 32em 0 #000, 14.75em 31.75em 0 rgba(0,0,0,0.5);
            }

        & background .bi1 i:nth-of-type(4) {
            transform: translate3d(-15em,20em,0);
        }

        & background .bi1 i:nth-of-type(5) {
            transform: translate3d(50em,20em,0);
        }

        & background .bi1 i:nth-of-type(6) {
            transform: translate3d(75em,20em,0);
        }

        & background .bi1 i:nth-of-type(7) {
            transform: translate3d(115em,20em,0);
        }

        & background .bi1 i:nth-of-type(8) {
            transform: translate3d(140em,20em,0);
        }

        & background .bi1 i:nth-of-type(5):before {
            transform: translate3d(1em,2em,0);
        }

        & background .bi1 i:nth-of-type(7):before {
            transform: translate3d(0em,2em,0);
        }

        & background .bi1 i:nth-of-type(8):before {
            transform: translate3d(-1em,2em,0);
        }
        //floor
        & background .bi1 i:nth-of-type(10) {
            transform: translate3d(-50%,70em,0);
            width: 200%;
            height: 100em;
            background: radial-gradient( circle 100em at 60% 50em, #6d6355, #000);
        }
}

    [page="0008"] picture .pi3 {
        //lamp
        & i:nth-of-type(2) {
            transform: translate3d(40em,-3em,0);
            width: 1em;
            height: 5em;
            background: $rail;
        }

            & i:nth-of-type(2):before {
                transform: translate3d(-2em,5em,0);
                width: 5em;
                height: 2em;
                background: $rail;
                border-radius: 2em 2em 0 0;
            }

            & i:nth-of-type(2):after {
                transform: translate3d(-2.3em,7em,0);
                width: 5.5em;
                border: solid 4em rgba(0,0,0,0);
                border-top: none;
                border-left-width: .3em;
                border-right-width: .3em;
                border-bottom-color: $rail;
            }

        & i:nth-of-type(3) {
            transform: translate3d(33em,7em,0);
            width: 15em;
            height: 4em;
            background: $rail;
            border-radius: 4em 4em 0 0;
        }

            & i:nth-of-type(3):before {
                transform: translate3d(0,3em,0);
                width: 15em;
                height: 2em;
                background: linear-gradient(to right, #F2CB91, #fff, #F2CB91);
                border-radius: 50%;
            }

            & i:nth-of-type(3):after {
                transform: translate3d(6em,3em,0);
                width: 3em;
                height: 3em;
                background: linear-gradient(#F2CB91, #fff);
                border-radius: 50%;
            }

        & i:nth-of-type(1) {
            height: 0;
            width: 93em !important;
            border: 82em solid rgba(0, 0, 0, 0);
            border-top: none;
            border-right-width: 40em;
            border-left-width: 40em;
            border-bottom-color: #ffe47a;
            transform: translate3d(-6em, 9em,0);
            mask-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
            -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
        }

        & i:nth-of-type(4) {
            height: 0;
            width: 50em;
            border: 130em solid rgba(0, 0, 0, 0);
            border-top: none;
            border-right-width: 40em;
            border-left-width: 40em;
            border-bottom-color: #ffe47a;
            transform: translate3d(60em, -47em,0) rotate(25deg);
            mask-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
            -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
        }
    }

    [page="0008"] picture .pi0 {

        & i:nth-of-type(10) {
            width: 90em;
            height: 40em;
            transform: translate3d(-5em,72em,0);
        }

            & i:nth-of-type(10):before {
                width: 100%;
                height: 100%;
                background: #F2CB91;
                border-radius: 50%;
                opacity: .25;
            }

            & i:nth-of-type(10):after {
                width: 120%;
                height: 120%;
                background: #F2CB91;
                border-radius: 50%;
                opacity: .25;
                /*transform: translate3d(-10%,-10%);*/
            }

        & i:nth-of-type(11) {
            width: 60em;
            height: 15em;
            transform: translate3d(15em, 82em,0);
        }

            & i:nth-of-type(11):before {
                width: 100%;
                height: 100%;
                background: $body;
                border-radius: 50%;
                opacity: .4;
            }

        & i:nth-of-type(5) {
            width: 300em;
            height: 3em;
            transform: translate3d(20em, 85em,0);
            background: rgba(0,0,0,0.3);
            box-shadow: inset 0 1em rgba(0,0,0,0.5);
        }

            & i:nth-of-type(5):after {
                width: 300em;
                height: 4em;
                transform: translate3d(0, 5em,0);
                background: rgba(0,0,0,0.3);
                box-shadow: inset 0 1em rgba(0,0,0,0.5);
            }
    }

[page="0008"], [page="0009"] {
    //scooter
    //base
    & picture .pi2 {
        transform: translate3d(10em, 20em,10px) scale(.75);
    }

        & picture .pi2 i:nth-of-type(1) {
            width: 45em;
            height: 8em;
            transform: translate3d(30em,78em,0) skewX(-10deg);
            background: #6d6355;
            border: 1em solid $stroke;
            border-radius: 1em;
            border-right: none;
            transform-origin: 0 0;
        }

            & picture .pi2 i:nth-of-type(1):after {
                width: 10em;
                height: 8em;
                transform: translate3d(41em,-1em,0) skewX(11deg);
                background: #6d6355;
                border: 1em solid $stroke;
                border-radius: 1em;
                border-left: none;
                transform-origin: 0 0;
            }

        & picture .pi2 i:nth-of-type(2) {
            width: 53.2em;
            height: 3em;
            transform: translate3d(28.9em,85em,0);
            background: #2e2823;
            border: 1em solid $stroke;
            border-radius: 0 0 1em 1em;
            border-top: none;
            transform-origin: 0 0;
        }

        & picture .pi2 i:nth-of-type(3) {
            width: 45em;
            height: 6em;
            transform: translate3d(10em, 81em,-1px) skewX(-30deg);
            background: #2e2823;
            border: 1em solid $stroke;
            border-radius: 1em;
            transform-origin: 0 0;
        }

            & picture .pi2 i:nth-of-type(3):after {
                width: 45em;
                height: 6em;
                transform: translate3d(29em, -1em,-1px) skewX(35deg);
                background: #2e2823;
                border: 1em solid #190d23;
                border-radius: 1em;
                transform-origin: 0 0;
            }

        & picture .pi2 i:nth-of-type(4) {
            width: 78.4em;
            height: 2em;
            transform: translate3d(7.1em, 86.5em,-1px);
            background: #190d23;
            border-radius: 0 0 1em 1em;
            transform-origin: 0 0;
        }

            & picture .pi2 i:nth-of-type(4):after {
                width: 72em;
                height: 4em;
                transform: translate3d(4em, 2em,-3px);
                background: #190d23;
                border-radius: 0 0 1em 1em;
                transform-origin: 0 0;
            }
        //wheels
        & picture .pi2 i:nth-of-type(5) {
            width: 10em;
            height: 9em;
            transform: translate3d(72em, 89em,-2px) rotate(-2deg);
            background: #1a1714;
            border: solid 1em $stroke;
            border-radius: 50%;
            box-shadow: inset 0 0 0 2em #1a1714, inset 0 -.5em 0 3em $stroke;
        }

            & picture .pi2 i:nth-of-type(5):before {
                width: 10em;
                height: 9em;
                transform: translate3d(-.9em, -5em,-1px);
                background: linear-gradient(to right, #1a1714, $stroke);
                border: solid .9em $stroke;
                transform-origin: 0 0;
            }

        & picture .pi2 i:nth-of-type(6) {
            width: 10em;
            height: 9em;
            transform: translate3d(52em, 89em,-2px) rotate(4deg);
            background: #1a1714;
            border: solid 1em $stroke;
            border-radius: 50%;
            box-shadow: inset 0 0 0 2em #211c19, inset 0 -.5em 0 3em $stroke;
        }

            & picture .pi2 i:nth-of-type(6):before {
                width: 10em;
                height: 9em;
                transform: translate3d(-.9em, -5em,-1px);
                background: linear-gradient(to right, #1d1916, $stroke);
                border: solid .9em $stroke;
                transform-origin: 0 0;
            }

        & picture .pi2 i:nth-of-type(7) {
            width: 10em;
            height: 9em;
            transform: translate3d(32em, 89em,-2px) rotate(8deg);
            background: #1a1714;
            border: solid 1em $stroke;
            border-radius: 50%;
            box-shadow: inset 0 0 0 2em #211c19, inset 0 -.5em 0 3em $stroke;
        }

            & picture .pi2 i:nth-of-type(7):before {
                width: 10em;
                height: 9em;
                transform: translate3d(-.9em, -5em,-1px);
                background: linear-gradient(to right, #1d1916, $stroke);
                border: solid .9em $stroke;
                transform-origin: 0 0;
            }

        & picture .pi2 i:nth-of-type(8) {
            width: 10em;
            height: 9em;
            transform: translate3d(12em, 89em,-2px) rotate(15deg);
            background: #1a1714;
            border: solid 1em $stroke;
            border-radius: 50%;
            box-shadow: inset 0 0 0 2em #211c19, inset 0 -.5em 0 3em $stroke;
        }

            & picture .pi2 i:nth-of-type(8):before {
                width: 10em;
                height: 9em;
                transform: translate3d(-.9em, -5em,-1px);
                background: linear-gradient(to right, #1d1916, $stroke);
                border: solid .9em $stroke;
                transform-origin: 0 0;
            }
        //handle
        & picture .pi2 i:nth-of-type(9) {
            width: 4em;
            height: 38em;
            transform: translate3d(10em, 48em,2px);
            background: linear-gradient(to right, #1d1916, #6d6355);
            border: solid .7em $stroke;
            border-radius: 1.75em;
        }

            & picture .pi2 i:nth-of-type(9):before {
                width: 3em;
                height: 37em;
                transform: translate3d(2em, -2em,-1px);
                background: linear-gradient(to right, #1d1916, #38332c);
                border: solid .4em $stroke;
                border-radius: 1.75em;
            }

        & picture .pi2 i:nth-of-type(11) {
            width: 4em;
            height: 60em;
            transform: translate3d(20em, 26em,2px);
            background: linear-gradient(to right, #1d1916, #6d6355);
            border: solid .7em $stroke;
            border-radius: 1.75em;
        }

            & picture .pi2 i:nth-of-type(11):before {
                width: 3em;
                height: 58em;
                transform: translate3d(2em, -1em,-1px);
                background: linear-gradient(to right, #1d1916, #38332c);
                border: solid .4em $stroke;
                border-radius: 1.75em;
            }

            & picture .pi2 i:nth-of-type(11):after {
                width: 3em;
                height: 59em;
                transform: translate3d(-2em, -1em,-1px) skew(-5deg);
                background: $stroke;
                border-radius: 1.5em;
            }
        /*& picture .pi2 i:nth-of-type(10):after {
                width: 4em;
                height: 8em;
                transform: translate3d(2em, -1em) translateZ(1px) rotate(10deg);
                background: linear-gradient(to right, #38332c, #1d1916);
                border: solid .4em $stroke;
                border-radius: 1.75em;
                transform-origin: 0 0;
            }*/
        & picture .pi2 i:nth-of-type(12) {
            width: 10em;
            height: 3em;
            transform: translate3d(12em, 70em,2px);
            background: linear-gradient( #6d6355, #1d1916);
            border: solid .7em $stroke;
            border-radius: 1.75em;
        }

            & picture .pi2 i:nth-of-type(12):before {
                width: 10em;
                height: 3em;
                transform: translate3d(1em, -2em,-2px);
                background: linear-gradient( #38332c, #1d1916);
                border: solid .5em $stroke;
                border-radius: 1.75em;
            }

            & picture .pi2 i:nth-of-type(12):after {
                width: 0;
                height: 0;
                content: 'X';
                font-size: 20em;
                transform: translate3d(-.1em, .3em,-1px);
                font-family: Arial;
                font-style: normal;
            }

        & picture .pi2 i:nth-of-type(13) {
            width: 10em;
            height: 3em;
            transform: translate3d(12em, 50em,2px);
            background: linear-gradient( #6d6355, #1d1916);
            border: solid .7em $stroke;
            border-radius: 1.75em;
        }

            & picture .pi2 i:nth-of-type(13):before {
                width: 10em;
                height: 3em;
                transform: translate3d(1em, -2em,-2px);
                background: linear-gradient( #38332c, #1d1916);
                border: solid .5em $stroke;
                border-radius: 1.75em;
            }

            & picture .pi2 i:nth-of-type(13):after {
                width: 0;
                height: 0;
                content: 'X';
                font-size: 20em;
                transform: translate3d(-.1em, .3em,-1px) scaleY(1.8);
                font-family: Arial;
                font-style: normal;
            }

        & picture .pi2 i:nth-of-type(10) {
            width: 4em;
            height: 26em;
            transform: translate3d(21em, 25.5em,2px) rotate(10deg) skewX(-15deg);
            background: linear-gradient(to right, #1d1916,#6d6355);
            border: solid 0.7em #190d23;
            border-radius: 1.5em;
            transform-origin: 0 0;
            border-bottom: none;
        }
        /*& picture .pi2 i:nth-of-type(13):before {
                width: 10em;
                height: 3em;
                transform: translate3d(1em, -2em) translateZ(-1px);
                background: linear-gradient( #38332c, #1d1916);
                border: solid .5em $stroke;
                border-radius: 1.75em;
            }*/
        & picture .pi2 i:nth-of-type(14) {
            width: 4em;
            height: 10em;
            transform: translate3d(25em, 22em,2px) rotate(45deg);
            background: linear-gradient(to right, #1d1916,#190d23);
            border: solid 0.7em #190d23;
            border-radius: 1.5em;
            transform-origin: 0 0;
            border-bottom: none;
        }

        & picture .pi2 i:nth-of-type(15) {
            width: 6em;
            height: 6em;
            transform: translate3d(17em, 27em,3px);
            background: #1d1916;
            border: solid 0.7em $stroke;
            border-radius: 50%;
        }

            & picture .pi2 i:nth-of-type(15):before {
                width: 5em;
                height: 5em;
                transform: translate3d(5em, -5em,-2px);
                background: #1d1916;
                border: solid 0.7em $stroke;
                border-radius: 50%;
            }

        & picture .pi2 i:nth-of-type(16) {
            width: 4em;
            height: 25em;
            transform: translate3d(26em, 58em,1px) skewX(25deg);
            background: linear-gradient(to right, #1d1916, #6d6355);
            border: solid .7em $stroke;
            border-radius: 1.75em;
        }
}

    [page="0008"], [page="0009"] {
        & foreground i, & foreground i:before, & foreground i:after {
            box-shadow: inset 0px 0px 200px $stroke, inset 0px 0px 100px $stroke;
        }
    }
    //
    //
    //
    //
    @function multiple-box-shadow ($n) {
        $value: '#{random(2000)}px #{random(2000)}px rgba(0,0,0,0.025)';

        @for $i from 2 through $n {
            $value: '#{$value} , #{random(2000)}px #{random(2000)}px rgba(0,0,0,0.05)';
        }

        @return unquote($value);
    }

    $brick: multiple-box-shadow(2000);
    //
    //
    //
    //
    [page="0008"], [page="0009"] {
        & background .bi1 i:nth-of-type(1) {
            width: 20em;
            height: 6em;
            background: transparent;
            box-shadow: $brick;
            border-radius: .5em;
            transform: translate3d(-100em, 0,0);
        }
    }

        [page="0008"] picture i.pi0 {
            animation: light1 1s alternate infinite;
        }

    @keyframes light1 {
        100% {
            transform: translate(.1em,0,-2px);
        }
    }
// page-9
// page-9
// page-9


[page="0009"] {
    & background .bi1 {
        transform: translate3d(100em, 0,0);
    }
    //wall
    & picture .pi0 {
        transform: translate3d(0, 0,0);

        i:nth-of-type(3) {
            transform: translate3d(60em, 70em,0) skewY(45deg);
            height: 10em;
            width: 20em;
            background: #708a9f;
            border-radius: 1em;
        }

            i:nth-of-type(3):before {
                transform: translate3d(0, 0,0) skewY(-45deg) skewX(45deg);
                height: 20em;
                width: 20em;
                background: #808080;
                border-radius: 1em;
                transform-origin: 0 0;
            }

            i:nth-of-type(3):after {
                transform: translate3d(20em, 0em,0) skewY(-45deg);
                height: 10em;
                width: 20em;
                background: #4b4343;
                border-radius: 1em;
                transform-origin: 0 0;
            }

        i:nth-of-type(4) {
            transform: translate3d(65em, 57em,0) skewY(40deg);
            height: 13em;
            width: 18em;
            background: #798d9d;
            border-radius: 1em;
        }

            i:nth-of-type(4):before {
                transform: translate3d(0, 0,0) skewY(-40deg) skewX(45deg) rotate(-10deg);
                height: 16em;
                width: 18em;
                background: #676060;
                border-radius: 1em;
                transform-origin: 0 0;
            }

            i:nth-of-type(4):after {
                transform: translate3d(18em, 0em,0) skewY(-45deg);
                height: 13em;
                width: 15em;
                background: #463838;
                border-radius: 1em;
                transform-origin: 0 0;
            }

        i:nth-of-type(5) {
            transform: translate3d(62em, 45em,0) skewY(43deg);
            height: 8em;
            width: 16em;
            background: #7e8d9a;
            border-radius: 1em;
        }

            i:nth-of-type(5):before {
                transform: translate3d(0, 0,0) skewY(-43deg) skewX(45deg) rotate(-5deg);
                height: 16em;
                width: 16em;
                background: #675b5b;
                border-radius: 1em;
                transform-origin: 0 0;
            }

            i:nth-of-type(5):after {
                transform: translate3d(16em, 0em,0) skewY(-45deg);
                height: 8em;
                width: 15em;
                background: #413737;
                border-radius: 1em;
                transform-origin: 0 0;
            }

        i:nth-of-type(6) {
            transform: translate3d(65em, 30em,0) skewY(43deg);
            height: 12em;
            width: 10em;
            background: #7b8b98;
            border-radius: 1em;
        }

            i:nth-of-type(6):before {
                transform: translate3d(0, 0,0) skewY(-20deg);
                height: 12em;
                width: 10em;
                background: #7b8b98;
                border-radius: 1em;
                transform-origin: 0 0;
            }

            i:nth-of-type(6):after {
                transform: translate3d(10em, -4em,0) skewY(-45deg);
                height: 16em;
                width: 12em;
                background: #463838;
                border-radius: 1em;
                transform-origin: 0 0;
            }

        i:nth-of-type(7) {
            transform: translate3d(65em, 25em,0) skewX(60deg) rotate(-2.5deg);
            height: 6em;
            width: 12em;
            background: #676060;
            border-radius: 1em;
            transform-origin: 0 0;
        }

        i:nth-of-type(8) {
            transform: translate3d(68em, 20em,0) skewY(25deg);
            height: 8em;
            width: 8em;
            background: #798d9d;
            border-radius: 1em;
        }

            i:nth-of-type(8):before {
                transform: translate3d(0, 0,0) skewY(-20deg);
                height: 8em;
                width: 8em;
                background: #798d9d;
                border-radius: 1em;
                transform-origin: 0 0;
            }

            i:nth-of-type(8):after {
                transform: translate3d(8em, -3em,0) skewY(-25deg);
                height: 11em;
                width: 8em;
                background: #463838;
                border-radius: 1em;
                transform-origin: 0 0;
            }

        i:nth-of-type(9) {
            transform: translate3d(67em, 18em,0) skewX(85deg) rotate(-2.5deg);
            height: 1em;
            width: 8em;
            background: #676060;
            border-radius: 1em;
            transform-origin: 0 0;
        }
        //this tthis this
        //this tthis this
        //this tthis this


        i:nth-of-type(2) {
            transform: translate3d(75em, 1em,0) rotate(-20deg);
            width: .5em;
            height: 18em;
            background: #371e0e;
            border-radius: .25em;
        }

            i:nth-of-type(2):before {
                transform: translate3d(-1em, -.5em,0) rotate(-2deg);
                width: .5em;
                height: 18em;
                background: #371e0e;
                border-radius: .25em;
            }

            i:nth-of-type(2):after {
                transform: translate3d(-3em, -.5em,0) rotate(-10deg);
                width: .5em;
                height: 18em;
                background: #371e0e;
                border-radius: .25em;
            }

        & i:nth-of-type(11) {
            width: 60em;
            height: 15em;
            transform: translate3d(120em, 80em,-30px);
        }

            & i:nth-of-type(11):before {
                width: 100%;
                height: 100%;
                background: $body;
                border-radius: 50%;
                opacity: .4;
            }
    }
}

[page="0009"] {
    //bed
    & picture .pi1 {

        & i:nth-of-type(3) {
            transform: translate3d(5em,65em,0);
            width: 50em;
            height: 5em;
            background: $rail;
            box-shadow: inset 0 0 0 1em $rail, inset 2em 2em 2em #000, inset -2em -2em 2em rgba(0,0,0,0.5);
        }

        & i:nth-of-type(2) {
            transform: translate3d(0em,65em,0);
            width: 5em;
            height: 10em;
            background: $rail;
            box-shadow: inset 0 0 0 1em $rail, inset 2em 2em 2em #000, inset -2em -2em 2em rgba(0,0,0,0.5);
        }

            & i:nth-of-type(2):before {
                transform: translate3d(5em,0,0) skewY(-60deg);
                width: 1em;
                height: 10em;
                background: #000;
                transform-origin: 0 0;
            }

        & i:nth-of-type(1) {
            transform: translate3d(55em,65em,0);
            width: 5em;
            height: 10em;
            background: $rail;
            box-shadow: inset 0 0 0 1em $rail, inset 2em 2em 2em #000, inset -2em -2em 2em rgba(0,0,0,0.5);
        }

            & i:nth-of-type(1):before {
                transform: translate3d(-1em,0,0) skewY(70deg);
                width: 1em;
                height: 10em;
                background: #000;
                transform-origin: 100% 100%;
            }

        & i:nth-of-type(4) {
            transform: translate3d(0em,63em,0);
            width: 60em;
            height: 2em;
            background: $rail;
            border-top: .5em solid #224132;
            box-shadow: inset 0 -1em 0 rgba(0,0,0,0.5);
        }

        & i:nth-of-type(5) {
            transform: translate3d(0em,53em,0);
            width: 60em;
            height: 10em;
            overflow: hidden;
        }

            & i:nth-of-type(5):before {
                transform: translate3d(-10em,-10em,0) skewX(-45deg);
                width: 20em;
                height: 30em;
                border-radius: 50%;
                border: 5em solid $none;
                border-right-color: #191d1b;
            }

            & i:nth-of-type(5):after {
                transform: translate3d(-4.9em,-10em,0) skewX(-44deg);
                width: 20em;
                height: 30em;
                border-radius: 50%;
                border: 5em solid $none;
                border-right-color: #161a18;
            }

        & i:nth-of-type(6) {
            transform: translate3d(0em,53em,0);
            width: 60em;
            height: 10em;
            overflow: hidden;
        }

            & i:nth-of-type(6):before {
                transform: translate3d(0em,-10em,0) skewX(-40deg);
                width: 20em;
                height: 30em;
                border-radius: 50%;
                border: 5em solid $none;
                border-right-color: #191d1b;
            }

            & i:nth-of-type(6):after {
                transform: translate3d(5.1em,-10em,0) skewX(-38deg);
                width: 20em;
                height: 30em;
                border-radius: 50%;
                border: 5em solid $none;
                border-right-color: #120e0e;
            }

        & i:nth-of-type(7) {
            transform: translate3d(0em,53em,0);
            width: 60em;
            height: 10em;
            overflow: hidden;
        }

            & i:nth-of-type(7):before {
                transform: translate3d(10em,-10em,0) skewX(-30deg);
                width: 20em;
                height: 30em;
                border-radius: 50%;
                border: 5em solid $none;
                border-right-color: #121715;
            }

            & i:nth-of-type(7):after {
                transform: translate3d(15.1em,-10em,0) skewX(-20deg);
                width: 20em;
                height: 30em;
                border-radius: 50%;
                border: 5em solid $none;
                border-right-color: #151716;
            }

        & i:nth-of-type(8) {
            transform: translate3d(0em,53em,0);
            width: 60em;
            height: 10em;
            overflow: hidden;
        }

            & i:nth-of-type(8):before {
                transform: translate3d(20em,-10em,0) skewX(-15deg);
                width: 20em;
                height: 30em;
                border-radius: 50%;
                border: 5em solid $none;
                border-right-color: #131916;
            }

            & i:nth-of-type(8):after {
                transform: translate3d(24.1em,-10em,0) skewX(0deg);
                width: 20em;
                height: 30em;
                border-radius: 50%;
                border: 5em solid $none;
                border-right-color: #171a19;
            }

        & i:nth-of-type(9) {
            transform: translate3d(35em,52.5em,0) skewX(30deg);
            width: 24em;
            height: 11em;
            overflow: hidden;
            background: #373e2d;
            border-radius: 3em;
            box-shadow: inset -1em -1em 0 rgba(0,0,0,0.1);
        }

            & i:nth-of-type(9):before {
                transform: translate3d(0em,0em,0) skewX(0deg);
                width: 4em;
                height: 10em;
                background: #41483a;
                border-radius: 3em 3em 5em 5em;
            }

        & i:nth-of-type(10) {
            transform: translate3d(0em,53em,-1px);
            width: 60em;
            border: 10em solid $none;
            border-bottom-color: #000;
            border-top: none;
            box-shadow: 0 10em 0 rgba(0,0,0,0.5);
        }
    }
}

    [page="0009"] picture .pi3 {
        //lamp
        & i:nth-of-type(6) {
            transform: translate3d(40em,-3em,0);
            width: 1em;
            height: 5em;
            background: $rail;
        }

            & i:nth-of-type(6):before {
                transform: translate3d(-2em,5em,0);
                width: 5em;
                height: 2em;
                background: $rail;
                border-radius: 2em 2em 0 0;
            }

            & i:nth-of-type(6):after {
                transform: translate3d(-2.3em,7em,0);
                width: 5.5em;
                border: solid 4em rgba(0,0,0,0);
                border-top: none;
                border-left-width: .3em;
                border-right-width: .3em;
                border-bottom-color: $rail;
            }

        & i:nth-of-type(7) {
            transform: translate3d(33em,7em,-10px);
            width: 15em;
            height: 4em;
            background: $rail;
            border-radius: 4em 4em 0 0;
        }

            & i:nth-of-type(7):before {
                transform: translate3d(0,3em,0);
                width: 15em;
                height: 2em;
                background: linear-gradient(to right, #F2CB91, #fff, #F2CB91);
                border-radius: 50%;
                animation: light2 5s alternate infinite;
            }

            & i:nth-of-type(7):after {
                transform: translate3d(6em,3em,0);
                width: 3em;
                height: 3em;
                background: linear-gradient(#F2CB91, #fff);
                border-radius: 50%;
                animation: light2 5s alternate infinite;
            }

        & i:nth-of-type(5) {
            height: 0;
            width: 93em !important;
            border: 82em solid rgba(0, 0, 0, 0);
            border-top: none;
            border-right-width: 40em;
            border-left-width: 40em;
            border-bottom-color: #ffe47a;
            transform: translate3d(-6em, 9em,-10px);
            mask-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
            -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
            animation: light2 5s alternate infinite;
        }
        //lamp 2
        //lamp 2
        & i:nth-of-type(2) {
            transform: translate3d(146em,-3em,-20px);
            width: 1em;
            height: 5em;
            background: $rail;
        }

            & i:nth-of-type(2):before {
                transform: translate3d(-2em,5em,0);
                width: 5em;
                height: 2em;
                background: $rail;
                border-radius: 2em 2em 0 0;
            }

            & i:nth-of-type(2):after {
                transform: translate3d(-2.3em,7em,0);
                width: 5.5em;
                border: solid 4em rgba(0,0,0,0);
                border-top: none;
                border-left-width: .3em;
                border-right-width: .3em;
                border-bottom-color: $rail;
            }

        & i:nth-of-type(3) {
            transform: translate3d(139em,7em,0);
            width: 15em;
            height: 4em;
            background: $rail;
            border-radius: 4em 4em 0 0;
        }

            & i:nth-of-type(3):before {
                transform: translate3d(0,3em,0);
                width: 15em;
                height: 2em;
                background: linear-gradient(to right, #F2CB91, #fff, #F2CB91);
                border-radius: 50%;
            }

            & i:nth-of-type(3):after {
                transform: translate3d(6em,3em,0);
                width: 3em;
                height: 3em;
                background: linear-gradient(#F2CB91, #fff);
                border-radius: 50%;
            }

        & i:nth-of-type(1) {
            height: 0;
            width: 93em !important;
            border: 82em solid rgba(0, 0, 0, 0);
            border-top: none;
            border-right-width: 40em;
            border-left-width: 40em;
            border-bottom-color: #ffe47a;
            transform: translate3d(100em, 9em,0);
            mask-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
            -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
        }
    }

    [page="0009"] picture .pi0 {

        & i:nth-of-type(1) {
            width: 90em;
            height: 40em;
            transform: translate3d(-5em,72em,-10px);
            animation: light2 5s alternate infinite;
        }

            & i:nth-of-type(1):before {
                width: 100%;
                height: 100%;
                background: #F2CB91;
                border-radius: 50%;
                opacity: .1;
            }
        /*& i:nth-of-type(1):after {
                width: 120%;
                height: 120%;
                background: #F2CB91;
                border-radius: 50%;
                opacity: .1;
            }*/
        & i:nth-of-type(10) {
            width: 90em;
            height: 40em;
            transform: translate3d(102em,72em,-30px);
        }

            & i:nth-of-type(10):before {
                width: 100%;
                height: 100%;
                background: #F2CB91;
                border-radius: 50%;
                opacity: .15;
            }

            & i:nth-of-type(10):after {
                width: 120%;
                height: 120%;
                background: #F2CB91;
                border-radius: 50%;
                opacity: .15;
                /*transform: translate3d(-10%,-10%);*/
            }
    }

    [page="0009"] picture .pi2 {
        transform: translate3d(120em, 30em,-10px) scale(0.6)
    }

/*[page="0009"] picture i.pi0 {
        animation: light2 1s alternate infinite;
        transform: translateX(105em) translateZ(-2px);
    }*/

@keyframes light2 {
    79% {
        opacity:1;
    }
    80% {
        opacity: 0;
    }
    81% {
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
    100% {
        opacity:0;
    }
}
// page-10
// page-10
// page-10
[page="0010"], [page="0011"] {
    & background .bi0 {
        //sky
        & i:nth-of-type(1) {
            background: linear-gradient(to right, #9B999E, #677081 );
            width: calc(100% + 100em);
            height: 100%;
            transform: translate3d(-50em,0em,-5px);
        }
            & i:nth-of-type(1):after {
                background: linear-gradient( #4f0c3d, #777D80);
                width: calc(100% + 100em);
                height: 60em;
                opacity: .2;
                transform: translateZ(20px);
            }
    }
}
@media (orientation:landscape) {
    [page="0010"], [page="0011"] {
        & background .bi0 {
            & i:nth-of-type(3) {
                background: #48515A;
                height: 15em;
                width: 3em;
                box-shadow: inset -.5em 0 0 #262F40;
                transform: translate3d(100em,45em,0);
                -webkit-box-reflect: below 0em;
            }
                & i:nth-of-type(3):before {
                    background: #48515A;
                    height: 2em;
                    width: 2em;
                    box-shadow: inset -.5em 0 0 #262F40;
                    transform: translate3d(.5em,-2em,0);
                }
                & i:nth-of-type(3):after {
                    background: #48515A;
                    height: 15em;
                    width: 2em;
                    box-shadow: inset -.5em 0 0 #262F40;
                    transform: translate3d(-5em,5em,0);
                }
            & i:nth-of-type(2) {
                background: #565752;
                height: 8em;
                width: 30em;
                transform: translate3d(69em,52em,0);
                -webkit-box-reflect: below 0em;
            }
                & i:nth-of-type(2):before {
                    background: #565752;
                    height: 8em;
                    width: 30em;
                    transform: translate3d(4em,1em,0);
                }
                & i:nth-of-type(2):after {
                    background: #565752;
                    height: 8em;
                    width: 30em;
                    transform: translate3d(7em,2em,0);
                }
            & i:nth-of-type(4) {
                background: #565752;
                height: 20em;
                width: 30em;
                transform: translate3d(20em,40em,0);
                -webkit-box-reflect: below 0em;
            }
                & i:nth-of-type(4):before {
                    background: #B6B8B5;
                    height: 20em;
                    width: 3em;
                    transform: translate3d(30em,0em,0) skewY(15deg);
                    transform-origin: 0 0;
                }
            & i:nth-of-type(5) {
                background: #777375;
                height: 10em;
                width: 2em;
                transform: translate3d(110em,50em,0);
                box-shadow: -1em 0 0 #2A2A34;
                -webkit-box-reflect: below 0em;
            }
                & i:nth-of-type(5):before {
                    background: #2A2A34;
                    height: 10em;
                    width: 3em;
                    transform: translate3d(3em,1.5em,-2px);
                    box-shadow: inset -1em 0 0 #777375;
                }
                & i:nth-of-type(5):after {
                    background: #2A2A34;
                    height: 10em;
                    width: 2em;
                    transform: translate3d(1.5em,-2em,-2px);
                    box-shadow: inset -.5em 0 0 #777375;
                }
        }
    }
}
[page="0010"], [page="0011"] {
    & background .bi1 {
        width: 220em;
        left: auto;
        & i:nth-of-type(1) {
            background: $body;
            height: 5em;
            width: 1em;
            transform: translate3d(120em,55em,0);
            box-shadow: 1em 0 0 #2A2A34;

        }
            & i:nth-of-type(1):before {
                background: $body;
                height: 5em;
                width: 3em;
                transform: translate3d(3em,.5em,0);
                box-shadow: 1em 0 0 #2A2A34;
            }
            & i:nth-of-type(1):after {
                background: #544B48;
                height: 10em;
                width: 1em;
                transform: translate3d(2em,-5em,0);
                box-shadow: -.5em 0 0 #2A2A34;
            }
        & i:nth-of-type(2) {
            background: $body;
            height: 5em;
            width: 4em;
            transform: translate3d(125em,55em,0);
            box-shadow: 1em 0 0 #2A2A34;

        }
            & i:nth-of-type(2):before {
                background: $body;
                height: 5em;
                width: 3em;
                transform: translate3d(5em,1em,0);
                box-shadow: .5em 0 0 #544B48;
            }
            & i:nth-of-type(2):after {
                background: $body;
                height: 5em;
                width: 1em;
                transform: translate3d(7em,-.5em,0);
                box-shadow: .5em 0 0 #544B48;
            }
        & i:nth-of-type(4) {
            background: #323A44;
            height: 10em;
            width: 10em;
            transform: translate3d(140em,53em,0);
            box-shadow: 1em 0 0 #A0A19C;

        }
            & i:nth-of-type(4):before {
                background: #323A44;
                height: 5em;
                width: 20em;
                transform: translate3d(15em,3em,0);
                box-shadow: 2em 0 0 #A0A19C;
            }
            & i:nth-of-type(4):after {
                transform: translate3d(15em,2em,0);
                border: solid 11em $none;
                border-bottom-color: #50191B;
                border-bottom-width: 1em;
                border-top: none;
            }
    }
}
[page="0010"], [page="0011"] {
    & background .bi1 {
        width: 220em;
        left: auto;
        //battersea
        //1
        & i:nth-of-type(5) {
            background: #9A6246;
            width: 10em;
            height: 20em;
            transform: translate3d(190em,40em,0);

        }
            & i:nth-of-type(5):before {
                background: #292324;
                width: 5em;
                height: 20em;
                transform: translate3d(-5em,0em,0) skewY(-15deg);
                transform-origin: 100% 0;
            }
            & i:nth-of-type(5):after {
                background-image: linear-gradient(90deg, #292324 16.67%, $none 16.67%, $none 50%, #292324 50%, #292324 66.67%, $none 66.67%, $none 100%);
                background-size: 1em 1em;
                width: 8em;
                height: 4em;
                transform: translate3d(1em,1em,0);
            }
        & i:nth-of-type(6) {
            background: #9A6246;
            width: 8em;
            height: 5em;
            transform: translate3d(191em,35em,0);

        }
            & i:nth-of-type(6):before {
                background: #292324;
                width: 4em;
                height: 5em;
                transform: translate3d(-4em,0em,0) skewY(-25deg);
                transform-origin: 100% 0;
            }
            & i:nth-of-type(6):after {
                background-image: linear-gradient(90deg, #292324 16.67%, $none 16.67%, $none 50%, #292324 50%, #292324 66.67%, $none 66.67%, $none 100%);
                background-size: 2em 2em;
                width: 6em;
                height: 2em;
                transform: translate3d(1em,1em,0);
            }
        & i:nth-of-type(7) {

            background: linear-gradient(to right, #403A37, #FEE1B6);
            width: 3.9em;
            height: 10em;
            transform: translate3d(191.2em,12em,-1px);
            border-radius: .5em;
        }
            & i:nth-of-type(7):before {
                background: #FEE1B6;
                width: 4em;
                height: 30em;
                transform: translate3d(.2em,3em,0) rotate(-1.5deg);
                border-radius: .5em;
                transform-origin: 0 0;
            }
            & i:nth-of-type(7):after {
                background: linear-gradient(to right, #403A37, #E6CCAB, #FEE1B6);
                width: 4em;
                height: 30em;
                transform: translate3d(-.2em,3em,0) rotate(1.5deg);
                border-radius: .5em;
                transform-origin: 0 0;
            }
        //2
        //2
        //2
        & i:nth-of-type(8) {
            background: #9A6246;
            width: 10em;
            height: 25em;
            transform: translate3d(200em,35em,0);

        }
            & i:nth-of-type(8):before {
                background: #292324;
                width: 5em;
                height: 25em;
                transform: translate3d(-5em,0em,0) skewY(-20deg);
                transform-origin: 100% 0;
            }
            & i:nth-of-type(8):after {
                background-image: linear-gradient(90deg, #292324 16.67%, $none 16.67%, $none 50%, #292324 50%, #292324 66.67%, $none 66.67%, $none 100%);
                background-size: 1em 1em;
                width: 8em;
                height: 4em;
                transform: translate3d(1em,1em,0);
            }
        & i:nth-of-type(9) {
            background: #9A6246;
            width: 8em;
            height: 5em;
            transform: translate3d(201em,30em,0);

        }
            & i:nth-of-type(9):before {
                background: #292324;
                width: 4em;
                height: 5em;
                transform: translate3d(-4em,0em,0) skewY(-30deg);
                transform-origin: 100% 0;
            }
            & i:nth-of-type(9):after {
                background-image: linear-gradient(90deg, #292324 16.67%, $none 16.67%, $none 50%, #292324 50%, #292324 66.67%, $none 66.67%, $none 100%);
                background-size: 2em 2em;
                width: 6em;
                height: 2em;
                transform: translate3d(1em,1em,0);
            }
        & i:nth-of-type(10) {

            background: linear-gradient(to right, #403A37, #FEE1B6);
            width: 3.9em;
            height: 10em;
            transform: translate3d(201.2em,7em,-1px);
            border-radius: .5em;
        }
            & i:nth-of-type(10):before {
                background: #FEE1B6;
                width: 4em;
                height: 30em;
                transform: translate3d(.2em,3em,0) rotate(-1.5deg);
                border-radius: .5em;
                transform-origin: 0 0;
            }
            & i:nth-of-type(10):after {
                background: linear-gradient(to right, #403A37, #E6CCAB, #FEE1B6);
                width: 4em;
                height: 30em;
                transform: translate3d(-.2em,3em,0) rotate(1.5deg);
                border-radius: .5em;
                transform-origin: 0 0;
            }
        & i:nth-of-type(11) {
            background: #9A6246;
            width: 100em;
            height: 18em;
            transform: translate3d(200em, 40em,-2px);

        }
            & i:nth-of-type(11):after {
                background: #403A37;
                width: 12em;
                height: 100%;

                opacity: .5;
            }
    }
}
[page="0010"], [page="0011"] {
    & background .bi2 {
        & i:nth-of-type(1) {
            background: linear-gradient(to right, #988673, #29404C );
            width: calc(100% + 100em);
            height: 100%;
            transform: translate3d(-50em,60em,-5px);
 }
        & i:nth-of-type(2) {
            background: linear-gradient(to right, rgba(152,134,115,0.7), rgba(41,64,76,0.9));
            width: calc(100% + 100em);
            height: 100%;
            transform: translate3d(-50em,60em,2px);
            box-shadow: 0 -1em 2em $body, 0 -2em 2em $tree3, inset 0 1em 4em $tree3, inset 0 1em 6em $body, inset 0 1em 8em $body, inset 0 2em 10em #6C5838;
        }
            & i:nth-of-type(2):before {
                transform: translate3d(50em, -10em,-3px);
                border: 10em solid $none;
                border-right: 200em solid $body;
                border-left: 200em solid #6C5838;
            }
            & i:nth-of-type(2):after {
                transform: translate3d(0, -20em,-5px);
                border: 20em solid $none;
                border-left: 200em solid $body;
            }
        & i:nth-of-type(5) {
            background: $tree3;
            border-radius: 50%;
            width: 20em;
            height: 20em;
            transform: translate3d(-5em,35em,0);

            box-shadow: -2em 2em rgba(0,0,0,0.2);
        }
            & i:nth-of-type(5):before {
                background: $tree3;
                border-radius: 50%;
                width: 18em;
                height: 18em;
                transform: translate3d(13em,2em,-5px);
                box-shadow: -2em 2em rgba(0,0,0,0.2);
            }
            & i:nth-of-type(5):after {
                background: $tree3;
                border-radius: 50%;
                width: 12em;
                height: 12em;
                transform: translate3d(28em,8em,0);
                box-shadow: -2em 2em rgba(0,0,0,0.2);
            }
        & i:nth-of-type(6) {
            background: $tree3;
            border-radius: 50%;
            width: 15em;
            height: 15em;
            transform: translate3d(33em,41em,0);

            box-shadow: -2em 2em rgba(0,0,0,0.2);
        }
            & i:nth-of-type(6):before {
                background: $tree3;
                border-radius: 50%;
                width: 17em;
                height: 17em;
                transform: translate3d(13em,2em,-5px);
                box-shadow: -2em 2em rgba(0,0,0,0.2);
            }
            & i:nth-of-type(6):after {
                background: $tree3;
                border-radius: 50%;
                width: 12em;
                height: 12em;
                transform: translate3d(28em,2em,-5px);
                box-shadow: -2em 2em rgba(0,0,0,0.2);
            }
        & i:nth-of-type(7) {
            background: $tree3;
            border-radius: 50%;
            width: 10em;
            height: 10em;
            transform: translate3d(70em,47em,0);
            box-shadow: -1.5em 1.5em rgba(0,0,0,0.2);
        }
            & i:nth-of-type(7):before {
                background: $tree3;
                border-radius: 50%;
                width: 7em;
                height: 7em;
                transform: translate3d(7em,2em,-5px);
                box-shadow: -1.5em 1.5em rgba(0,0,0,0.2);
            }
            & i:nth-of-type(7):after {
                background: $tree3;
                border-radius: 50%;
                width: 9em;
                height: 9em;
                transform: translate3d(12em,0em,-5px);
                box-shadow: -1.5em 1.5em rgba(0,0,0,0.2);
            }
        & i:nth-of-type(8) {
            background: $tree3;
            border-radius: 50%;
            width: 5em;
            height: 5em;
            transform: translate3d(90em,51em,0);
            box-shadow: -1em 1em rgba(0,0,0,0.2);
        }
            & i:nth-of-type(8):before {
                background: $tree3;
                border-radius: 50%;
                width: 4em;
                height: 4em;
                transform: translate3d(3em,2em,-5px);
                box-shadow: -1em 1em rgba(0,0,0,0.2);
            }
            & i:nth-of-type(8):after {
                background: $tree3;
                border-radius: 50%;
                width: 3.5em;
                height: 3.5em;
                transform: translate3d(6em,2em,-5px);
                box-shadow: -1em 1em rgba(0,0,0,0.2);
            }
    }
}
[page="0010"], [page="0011"] {
    & picture .pi1 {
        /*opacity:0;*/
        transform: scale(1.2) translate3d(-5em,3em,-10px);
        & i:nth-of-type(4) {
            background: linear-gradient(to right, #0F110B, #81694A );
            width: 10em;
            height: 5em;
            transform: translate3d(50em,60em,0);
            border-top: 1em solid #988673;
            border-bottom: 1em solid $body;
            border-radius: 1em 1em 0 0;

        }
            & i:nth-of-type(4):before {
                border: 2.5em solid #38342c;
                border-left: 2em solid $none;
                border-right: 2em solid $none;
                transform: translate3d(2.5em,-6em,0);
               width: 1em;
            }
            & i:nth-of-type(4):after {
                background: #38342c;
                width: 5em;
                height: 4em;
                transform: translate3d(2.5em,-10em,0);
            }

        & i:nth-of-type(9) {
            background: #a19882;
            width: 5em;
            height: 33em;
            transform: translate3d(52.5em,15em,0);
            border-top: 4em solid #a89e89;
            border-radius: 1em 1em 0 0;
  }
        & i:nth-of-type(7) {
            width: 250em;
            height: 100em;
            transform: translate3d(-175em,-62em,0);
            border: .5em solid $none;
            border-bottom-color: #c7332d;
            border-radius: 50%;
    }
            & i:nth-of-type(7):after {
                width: 250em;
                height: 250em;
                transform: translate3d(195em,-136em,0);
                border: .5em solid $none;
                border-bottom-color: #cb302a;
                border-radius: 50%;
        }
        & i:nth-of-type(11) {
            background: #a79c87;
            width: .5em;
            height: 25em;
            transform: translate3d(40em,22.5em,-1px);
            border-radius: 1em 1em 0 0;
      }
            & i:nth-of-type(11):before {
                background: #a19882;
                width: .5em;
                height: 22em;
                transform: translate3d(-8em,3em,-1px);
                border-radius: 1em 1em 0 0;
        }
            & i:nth-of-type(11):after {
                background: #a19882;
                width: .5em;
                height: 20em;
                transform: translate3d(-16em,5.5em,-1px);
                border-radius: 1em 1em 0 0;
         }

        & i:nth-of-type(13) {
            background: #a19882;
            width: .5em;
            height: 16em;
            transform: translate3d(-8em,35em,-1px);
            border-radius: 1em;
      }
            & i:nth-of-type(13):before {
                background: #a19882;
                width: .5em;
                height: 12em;
                transform: translate3d(-8em,1em,-1px);
                border-radius: 1em;
          }
            & i:nth-of-type(13):after {
                background: #a19882;
                width: .5em;
                height: 15em;
                transform: translate3d(-16em,2em,-1px);
                border-radius: 1em;
           }
        & i:nth-of-type(14) {
            background: #a19882;
            width: .5em;
            height: 15em;
            transform: translate3d(-32em,37.5em,-1px);
            border-radius: 1em;
        }
            & i:nth-of-type(14):before {
                background: #a19882;
                width: .5em;
                height: 15em;
                transform: translate3d(-8em,.5em,-1px);
                border-radius: 1em;
          }
            & i:nth-of-type(14):after {
                background: #a19882;
                width: .5em;
                height: 15em;
                transform: translate3d(-16em,0,-1px);
                border-radius: 1em;
           }
        & i:nth-of-type(15) {
            background: #a19882;
            width: .5em;
            height: 15em;
            transform: translate3d(-56em,38em,-1px);
            border-radius: 1em;
       }
            & i:nth-of-type(15):before {
                background: #a19882;
                width: .5em;
                height: 15em;
                transform: translate3d(-8em,0em,-1px);
                border-radius: 1em;
           }
            & i:nth-of-type(15):after {
                background: #a19882;
                width: .5em;
                height: 15em;
                transform: translate3d(-16em,-1em,-1px);
                border-radius: 1em;
           }
        & i:nth-of-type(16) {
            background: #a19882;
            width: .5em;
            height: 20em;
            transform: translate3d(70em,28em,-1px);
            border-radius: 1em;
      }
            & i:nth-of-type(16):before {
                background: #a19882;
                width: .5em;
                height: 15em;
                transform: translate3d(8em,5.5em,-1px);
                border-radius: 1em;
          }
            & i:nth-of-type(16):after {
                background: #a19882;
                width: .5em;
                height: 10em;
                transform: translate3d(16em,10em,-1px);
                border-radius: 1em;
           }
        & i:nth-of-type(3) {
            background: #a19882;
            width: .5em;
            height: 30em;
            transform: translate3d(48em,18.5em,-1px);
            border-radius: 1em 1em 0 0;
       }
            & i:nth-of-type(3):before {
                background: #a19882;
                width: .5em;
                height: 28em;
                transform: translate3d(14em,2.5em,-1px);
                border-radius: 1em 1em 0 0;
         }
    }
}
[page="0010"], [page="0011"] {
    & picture .pi2 {
        /*opacity: 0;*/
        transform: scale(1.3) translate3d(-5em,1em,0);
        & i:nth-of-type(4) {
            background: linear-gradient(to right, #0F110B, #81694A );
            width: 10em;
            height: 5em;
            transform: translate3d(50em,60em,0);
            border-top: 1em solid #988673;
            border-bottom: 1em solid $body;
            border-radius: 1em 1em 0 0;
      }
            & i:nth-of-type(4):before {
                border: 2.5em solid #C2B79F;
                border-left: 2em solid $none;
                border-right: 2em solid $none;
                transform: translate3d(2.5em,-6em,0);
              width: 1em;
            }
            & i:nth-of-type(4):after {
                background: #C2B79F;
                width: 5em;
                height: 4em;
                transform: translate3d(2.5em,-10em,0);
               box-shadow: 0 -4em 0 #ad9983, -1em -4em 0 rgba(0,0,0,0.3), -.5em 0 0 #545259;
            }
        & i:nth-of-type(3) {
            background: #A79179;
            width: 400em;
            height: 2.5em;
            transform: translate3d(-200em,48.5em,0);
            box-shadow: inset 0 1em 0 rgba(0,0,0,0.3);
           overflow: hidden;
        }
            & i:nth-of-type(3):before {
                height: 5.5em;
                width: 100%;
                background: linear-gradient(225deg, rgba(0,0,0,0.5) 25%, transparent 25%);
                background-size: 8em 8em;
                transform: translate3d(-.5em,-2em,0);
            }
            & i:nth-of-type(3):after {
                height: 5.5em;
                width: 100%;
                background: linear-gradient(135deg, #C2B79F 25%, transparent 25%);
                background-size: 8em 8em;
                transform: translate3d(-.5em,-2em,0);
            }
        & i:nth-of-type(20) {
            background: #C2B79F;
            width: 400em;
            height: 3em;
            transform: translate3d(-200em,45.5em,0);
       }
            & i:nth-of-type(20):after {
                background: rgba(0,0,0,0.1);
                width: 400em;
                height: 3em;
                transform: translate3d(0,17em,0);
            }
        & i:nth-of-type(9) {
            background: #dbd0b9;
            width: 5em;
            height: 33em;
            transform: translate3d(52.5em,15em,0);
            border-top: 4em solid #C2B79F;
            border-radius: 1em 1em 0 0;
           box-shadow: -1em 0 0 -.5em #545259;
        }
        & i:nth-of-type(7) {
            width: 250em;
            height: 100em;
            transform: translate3d(-175em,-62em,0);
            border: .5em solid $none;
            border-bottom-color: #F93D36;
            border-radius: 50%;
       }
            & i:nth-of-type(7):after {
                width: 250em;
                height: 250em;
                transform: translate3d(195em,-136em,0);
                border: .5em solid $none;
                border-bottom-color: #F93D36;
                border-radius: 50%;
       }
        & i:nth-of-type(11) {
            background: #dbd0b9;
            width: .5em;
            height: 25em;
            transform: translate3d(40em,22.5em,-1px);
            border-radius: 1em 1em 0 0;
      }
            & i:nth-of-type(11):before {
                background: #dbd0b9;
                width: .5em;
                height: 22em;
                transform: translate3d(-8em,3em,-1px);
                border-radius: 1em 1em 0 0;
          }
            & i:nth-of-type(11):after {
                background: #dbd0b9;
                width: .5em;
                height: 20em;
                transform: translate3d(-16em,5.5em,-1px);
                border-radius: 1em 1em 0 0;
           }
        & i:nth-of-type(12) {
            background: #dbd0b9;
            width: .5em;
            height: 20em;
            transform: translate3d(16em,30em,-1px);
            border-radius: 1em;
       }
            & i:nth-of-type(12):before {
                background: #dbd0b9;
                width: .5em;
                height: 18em;
                transform: translate3d(-8em,2em,-1px);
                border-radius: 1em;
          }
            & i:nth-of-type(12):after {
                background: #dbd0b9;
                width: .5em;
                height: 16em;
                transform: translate3d(-16em,4em,-1px);
                border-radius: 1em;
           }
        & i:nth-of-type(13) {
            background: #dbd0b9;
            width: .5em;
            height: 16em;
            transform: translate3d(-8em,35em,-1px);
            border-radius: 1em;
      }
            & i:nth-of-type(13):before {
                background: #dbd0b9;
                width: .5em;
                height: 12em;
                transform: translate3d(-8em,1em,-1px);
                border-radius: 1em;
         }
            & i:nth-of-type(13):after {
                background: #dbd0b9;
                width: .5em;
                height: 10em;
                transform: translate3d(-16em,2em,-1px);
                border-radius: 1em;
          }
        & i:nth-of-type(14) {
            background: #dbd0b9;
            width: .5em;
            height: 9em;
            transform: translate3d(-32em,37.5em,-1px);
            border-radius: 1em;
       }
            & i:nth-of-type(14):before {
                background: #dbd0b9;
                width: .5em;
                height: 8em;
                transform: translate3d(-8em,.5em,-1px);
                border-radius: 1em;
           }
            & i:nth-of-type(14):after {
                background: #dbd0b9;
                width: .5em;
                height: 8em;
                transform: translate3d(-16em,0,-1px);
                border-radius: 1em;
          }
        & i:nth-of-type(15) {
            background: #dbd0b9;
            width: .5em;
            height: 8em;
            transform: translate3d(-56em,38em,-1px);
            border-radius: 1em;
       }
            & i:nth-of-type(15):before {
                background: #dbd0b9;
                width: .5em;
                height: 9em;
                transform: translate3d(-8em,0em,-1px);
                border-radius: 1em;
          }
            & i:nth-of-type(15):after {
                background: #dbd0b9;
                width: .5em;
                height: 10em;
                transform: translate3d(-16em,-1em,-1px);
                border-radius: 1em;
           }
        & i:nth-of-type(16) {
            background: #dbd0b9;
            width: .5em;
            height: 20em;
            transform: translate3d(70em,28em,-1px);
            border-radius: 1em;
      }
            & i:nth-of-type(16):before {
                background: #dbd0b9;
                width: .5em;
                height: 15em;
                transform: translate3d(8em,5.5em,-1px);
                border-radius: 1em;
            }
            & i:nth-of-type(16):after {
                background: #dbd0b9;
                width: .5em;
                height: 10em;
                transform: translate3d(16em,10em,-1px);
                border-radius: 1em;
          }
        & i:nth-of-type(17) {
            background: #dbd0b9;
            width: .5em;
            height: 30em;
            transform: translate3d(48em,18.5em,-1px);
            border-radius: 1em 1em 0 0;
       }
            & i:nth-of-type(17):before {
                background: #dbd0b9;
                width: .5em;
                height: 28em;
                transform: translate3d(14em,2.5em,-1px);
                border-radius: 1em 1em 0 0;
           }
    }
}
@media (orientation:landscape) {
    [page="0010"], [page="0011"] {
        & background .bi1 {
            & i:nth-of-type(1) {
                -webkit-box-reflect: below 0em;
            }
            & i:nth-of-type(2) {
                -webkit-box-reflect: below 0em;
            }
            & i:nth-of-type(4) {
                -webkit-box-reflect: below -5em;
            }
            & i:nth-of-type(5) {
                -webkit-box-reflect: below 0em;
            }
            & i:nth-of-type(6) {
                -webkit-box-reflect: below 40em;
            }
            & i:nth-of-type(7) {
                -webkit-box-reflect: below 80em;
            }
            & i:nth-of-type(8) {
                -webkit-box-reflect: below 0em;
            }
            & i:nth-of-type(9) {
                -webkit-box-reflect: below 50em;
            }
            & i:nth-of-type(10) {
                -webkit-box-reflect: below 90em;
            }
            & i:nth-of-type(11) {
                -webkit-box-reflect: below 0em;
            }
        }
        & background .bi2 {
            & i:nth-of-type(5) {
                -webkit-box-reflect: below 8em;
            }
            & i:nth-of-type(6) {
                -webkit-box-reflect: below 7em;
            }
            & i:nth-of-type(7) {
                -webkit-box-reflect: below 5em;
            }
            & i:nth-of-type(8) {
                -webkit-box-reflect: below 7em;
            }
        }
        & picture .pi1 {
            & i:nth-of-type(4) {
                -webkit-box-reflect: below 0 linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.5));
            }
            & i:nth-of-type(9) {
                -webkit-box-reflect: below 36.5em linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.1));
            }
            & i:nth-of-type(7) {
                -webkit-box-reflect: below 56em linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.1));
            }
            & i:nth-of-type(11) {
                -webkit-box-reflect: below 37em linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.1));
            }
            & i:nth-of-type(13) {
                -webkit-box-reflect: below 33em linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.1));
            }
            & i:nth-of-type(14) {
                -webkit-box-reflect: below 36em linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.1));
            }
            & i:nth-of-type(15) {
                -webkit-box-reflect: below 36em linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.1));
            }
            & i:nth-of-type(16) {
                -webkit-box-reflect: below 36em linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.1));
            }
            & i:nth-of-type(3) {
                -webkit-box-reflect: below 37em linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.1));
            }
        }
        & picture .pi2 {
            & i:nth-of-type(4) {
                -webkit-box-reflect: below 0 linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.5));
            }
            & i:nth-of-type(3) {
                -webkit-box-reflect: below 28em linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1));
            }
            & i:nth-of-type(20) {
                -webkit-box-reflect: below 33em linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1));
            }
            & i:nth-of-type(9) {
                -webkit-box-reflect: below 36.5em linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.1));
            }
            & i:nth-of-type(7) {
                -webkit-box-reflect: below 56em linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.1));
            }
            & i:nth-of-type(11) {
                -webkit-box-reflect: below 37em linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.1));
            }
            & i:nth-of-type(12) {
                -webkit-box-reflect: below 34.5em linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.1));
            }
            & i:nth-of-type(13) {
                -webkit-box-reflect: below 33em linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.1));
            }
            & i:nth-of-type(14) {
                -webkit-box-reflect: below 36em linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.1));
            }
            & i:nth-of-type(15) {
                -webkit-box-reflect: below 36em linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.1));
            }
            & i:nth-of-type(16) {
                -webkit-box-reflect: below 36em linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.1));
            }
            & i:nth-of-type(17) {
                -webkit-box-reflect: below 37em linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.1));
            }
        }
        & picture .pi2 {
            //car
            & i:nth-of-type(18) {
                background: #000;
                width: 5em;
                height: 2em;
                transform: translate3d(100em,44em,-2px);
                border-radius: 1em 1em 0 0;
                animation: car 7s alternate infinite;
            }
        }
    }
}
@function multiple-box-shadow ($n) {
    $value: '#{random(200)}em #{random(200)}em rgba(155,153,158,0.1)';
    @for $i from 2 through $n {
        $value: '#{$value} , #{random(200)}em #{random(200)}em rgba(155,153,158,0.1)';
    }
    @return unquote($value);
}
$water: multiple-box-shadow(200);
[page="0010"], [page="0011"] {
    & background .bi2 i:nth-of-type(3) {
        width: 30em;
        height: 2em;
        background: transparent;
        box-shadow: $water;
        border-radius: 1em;
        top: 60em;
        transform: translateZ(2px);
    }
}
//foreground
@media (orientation:landscape) {
    [page="0010"], [page="0011"] {
        & foreground i, & foreground i:before, & foreground i:after {
            box-shadow: inset 0px 0px 200px $stroke;
        }
            & foreground i i:nth-of-type(1) {
                width: 50%;
                height: 200%;
                left: 93%;
                bottom: 0;
                border-radius: 50%;
                background: $tree3;
            }
            & foreground i i:nth-of-type(2) {
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                border: 100em solid $stroke;
                border-radius: 50%;
                box-sizing: content-box;
                transform: translate3d(-70em, 0,0);
            }
    }
}
@keyframes car {
    100% {
        transform: translate3d(-100em,45em,-2px);
    }
}
row{
    transition:opacity .5s linear;
    opacity:1;
}
body[transition="true"] row { 
    opacity:0;
}


body[transition="true"] {
    & picture,
    & picture *,
    & picture *:before,
    & picture *:after,
    & background,
    & background *,
    & background *:before,
    & background *:after,
    & foreground,
    & foreground *,
    & foreground *:before,
    & foreground *:after {
        transition-duration: 0!important;
    }
}
@media (orientation:landscape) {
    .pull-right-lg {
        float: right;
    }
    .flex-end {
        justify-content: flex-end;
    }
    .col-2 {
        width: 50%;
    }
    .col-2 > * {
        max-width: 700px;
    }
    .flex {
        display: flex;
        flex-wrap: wrap;
    }
    .flex > * {
        flex: 1;
    }
    row {
        flex-direction: row-reverse;
    }
    .flex-column {
        flex-direction: column;
    }
    /*body:not(.pageload):not([transition="true"]) {
        & picture,
        & picture *,
        & picture *:before,
        & picture *:after,
        & background,
        & background *,
        & background *:before,
        & background *:after,
        & foreground,
        & foreground *,
        & foreground *:before,
        & foreground *:after {
            transition-property: transform, width, height, border-radius, opacity;
            transition-duration: .25s;
            transition-timing-function: linear;
            will-change: scroll-position;
        }
    }*/

    body:not(.pageload):not([transition="true"]) {
        & picture,
        & picture *,
        & picture *:before,
        & picture *:after,
        & background,
        & background *,
        & background *:before,
        & background *:after,
        & foreground,
        & foreground *,
        & foreground *:before,
        & foreground *:after {
            transition-property: transform;
            transition-duration: .15s;
            transition-timing-function: linear;
            will-change: scroll-position;
        }
    }
    body:not(.pageload):not([transition="true"]) {
        & background,
        & background *,
        & background *:before,
        & background *:after {
            transition-delay: .3s;
        }
    }
    body:not(.pageload):not([transition="true"]) {
        & foreground,
        & foreground *,
        & foreground *:before,
        & foreground *:after {
            transition-delay: .6s;
        }
    }

    @media screen and (-webkit-min-device-pixel-ratio:0) {
        body:not(.pageload):not([transition="true"]) {
            & picture,
            & picture *,
            & picture *:before,
            & picture *:after,
            & background,
            & background *,
            & background *:before,
            & background *:after,
            & foreground,
            & foreground *,
            & foreground *:before,
            & foreground *:after {
                transition-property: width, height, border-radius, opacity, transform, background, left;
            }
        }
    }

    about {
        max-width: 50%;
    }
    page:not(#page-0000), abouttext, indexlist {
        &:before, &:after {
            content: '';
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        &:before {
            z-index: -1;
            transform: rotate(-.5deg);
            background: rgba(245,245,245,.95);
            top: 0;
            left: 0;
        }
        &:after {
            background: rgba(0,0,0,0.1);
            z-index: -2;
            top: 2em;
            left: 2em;
            transform: rotate(2deg);
        }
        &, &:before, &:after {
            border-radius: 1em;
        }
    }
    page:not(#page-0000):nth-of-type(even), abouttext {
        &:before {
            transform: rotate(.5deg);
        }
        &:after {
            transform: rotate(-2deg);
        }
    }
}
@media (orientation:portrait) {
    text {
        margin-top: 50vh;
    }
    body {
        background: $body;
    }
    page:not(#page-0000), abouttext, indexlist {
        background: #fff;
        border-radius: 1em;
    }
    page#pagex {
        border-radius: 1em 1em 0 0;
    }
    page {
        opacity: 1;
        transform: rotateX(0deg) translate3d(0,0,0);
        transition: all .5s ease-in-out .25s;
        transform-origin: 0 100%;
    }
    page[inview="no"] {
        opacity: 0;
        transform: rotateX(180deg) translate3d(0,0,0);
    }
    page.not-story-dark {
        background: $body !important;
        border: 1px solid #fff;
    }
}

script{
  display:none;
}
            
          
!
            
              //sort out picture size
function responsiveem() {
    var fontsize = $('picture').width() / 100;
    $('.responsiveem').css('font-size', fontsize);
    setTimeout(function () {
        $('body').removeClass('pageload');
    }, 500);
}
$(document).ready(responsiveem);
$(window).resize(responsiveem);

// show which picture
function pages() {

    var windowtop = $(window).scrollTop();
    if (windowtop > 0) {
        $('body').addClass('not-top');
    }
    else {
        $('body').removeClass('not-top');
    }
    var windowbottom = windowtop + $(window).height() - 100;
    clearTimeout($.data(this, 'scrollTimer2'));
    $.data(this, 'scrollTimer2', setTimeout(function () {
    $('page').each(function () {
        var page = $(this);
        var offsetfix = Math.round($(window).height() - $('#page-0000').outerHeight() + ($(window).width() / 3));
        var pagebottom = page[0].offsetTop + offsetfix + page.height();
        if (pagebottom < windowbottom) {
            page.attr('inview', 'no');
        }
        else {
            page.attr('inview', 'yes');
        }
    });
    var inview = $('page[inview="yes"]:first');
    var id = inview.attr('id') || 'page-' + $('body').attr('page');
    var pageref = id.split(/\-/)[1];
        if (inview.is('[transition]')) {
            if ($('body').attr('translock') === 'false') {
            $('body').attr('transition', 'true');
            }
            $('body').attr('translock', 'true');
            clearTimeout($.data(this, 'scrollTimer2'));
            $.data(this, 'scrollTimer2', setTimeout(function () {
                $('body').attr('page', pageref);
                setTimeout(function () {
                    $('body').attr('transition', 'false');
                }, 500);
            }, 200));
        }
        else {
            $('body').attr('transition', 'false').attr('translock', 'false').attr('page', 'transition').attr('page', pageref);
        }
    }, 100));
}
$(window).scroll(pages);
$(window).resize(pages);
$(document).ready(pages);
// top margin amount
function topmargin() {
    $('text').css('margin-top', Math.round(($(window).height() - $('#page-0000').outerHeight()) - 24));
}
$(document).ready(topmargin);
$(window).resize(topmargin);

$(window).scroll(function () {
    $('body').attr('scrolling', 'true');
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function () {
        $('body').attr('scrolling', 'false');
    }, 1000));
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console