Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <link href='https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,600,700,400italic,600italic' rel='stylesheet' type='text/css'>

<div class="header">
  <div class="wrapper">
    <div class="title">
         <h1>FANTASTIC MR. FOX</h1>
    </div>
    <div class="description" data-scroll-reveal>
         <p>Written by</p>
         <div class="authors"><p>Roald Dahl, Wes Anderson &amp; Noah Baumbach</p></div>
         <p class="date">March 4, 2007 </p>
    </div>
    <div class="characters" data-scroll-reveal>
         <p>Characters</p>
         <ul>
               <li class="modal-link" id="fox"><p>Fox</p></li>
               <li class="modal-link" id="mrs"><p>Mrs. Fox</p></li>
               <li class="modal-link" id="ash"><p>Ash</p></li>
         </ul>
    </div>
  </div>
</div>

<div class="progress"></div>


<div class="scroll" id="scroll-links">
     <ul>
          <li class="link-1"><p>Scene 1</p></li>
          <li class="link-2"><p>Scene 2</p></li>
          <li class="link-3"><p>Scene 3</p></li>
          <li class="link-4"><p>Scene 4</p></li>
          <li class="link-5"><p>Scene 5</p></li>
     </ul>
</div>

<div class="script">
<div class="scene">
<div class="description">
     <h3 id="scene-1" class="scene-holder">1</h3>
     <h1>EXT. WOODS. DAY</h1>
     <p>An apple tree stands alone at the top of a hill. A handsome fox dressed in an Edwardian-style navy velvet suit leans against it with his arms folded and his legs crossed, chewing on a reed of wild grass. He holds an apple core in his paw. He spits out a seed. He looks off across a meadow that descends into the valley below. A female fox strides briskly up the hill. Her coat is a paler, especially beautiful shade of fox-red, and she wears men's trousers and a dark tunic. Fox says as she approaches:</p>
</div>
<div class="speaking">
<div class="who fox modal-link" id="fox" data-scroll-reveal="enter left and move 100px over 0.3s">
     <h2>FOX</h2>
     <p>What'd the doctor say?</p>
</div>

<div class="who mrs modal-link" id="mrs" data-scroll-reveal="enter right and move 100px over 0.3s">
     <h2>MRS. FOX</h2>
     <p>Nothing. Supposedly, it's just a twenty-four hour bug. He gave me some pills.</p>
</div>

<div class="who fox modal-link" id="fox" data-scroll-reveal="enter left and move 100px over 0.3s">
     <h2>FOX</h2>
     <div class="how"><p>REASSURINGLY</p></div>
  <p>I told you. You probably just ate some bad gristle.</p>
  </div>
  <div class="acting"><p>Fox brushes the fur on Mrs. Fox's ears with his paws. They walk together along the crest of the hill to a fork in the path. Fox points:</p>
</div>

<div class="who fox modal-link" id="fox" data-scroll-reveal="enter left and move 100px over 0.3s">
     <h2>FOX</h2>
     <p>Should we take the short cut or the scenic route?</p>
</div>

<div class="who mrs modal-link" id="mrs" data-scroll-reveal="enter right and move 100px over 0.3s">
     <h2>MRS. FOX</h2>
     <p>Let's take the short cut.</p>
</div>

<div class="who fox modal-link" id="fox" data-scroll-reveal="enter left and move 100px over 0.3s">
     <h2>FOX</h2>
     <p>But the scenic route is so much prettier.</p>
</div>

<div class="who mrs modal-link" id="mrs" data-scroll-reveal="enter right and move 100px over 0.3s">
     <h2>MRS. FOX</h2>
     <div class="how"><p>SHRUGS</p></div>
     <p>OK, let's take the scenic route.</p>
</div>

<div class="who fox modal-link" id="fox" data-scroll-reveal="enter left and move 100px over 0.3s">
     <h2>FOX</h2>
     <p>Great. It's actually slightly quicker, anyway.</p>
</div>
     
<div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s">
     <p>Fox throws his apple core away over his shoulder and dances a quick circle around Mrs. Fox, wrapping his arm around her waist extravagantly and making her laugh as they start off down the scenic route.</p>
</div>

</div>
<div class="scene">
<div class="description">
     <h3 id="scene-2" class="scene-holder">2</h3>
     <h1>EXT. FARM. DAY</h1>
     <p>A rustic cottage surrounded by a small barn, a tin silo, and a rickity windmill. There is a sheep in a little pasture. A sign on a rail says Berkus Squab. Fox and Mrs. Fox watch from the bushes outside a fence.</p>
</div>

<div class="who mrs modal-link" id="mrs" data-scroll-reveal="enter right and move 100px over 0.3s">
     <h2>MRS. FOX</h2>
     <p>What is a squab?</p>
</div>

<div class="who fox modal-link" id="fox" data-scroll-reveal="enter left and move 100px over 0.3s">
     <h2>FOX</h2>
     <p>You know what a squab is. It's like a pigeon, I suppose. Anyway, it's a type of bird we can eat.</p>
</div>

<div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s">
     <p>Fox motions toward the edge of the property.</p>
</div>

<div class="who fox modal-link" id="fox" data-scroll-reveal="enter left and move 100px over 0.3s">
     <h2>FOX</h2>
     <p>Should we go through the hole under the horse fence or climb the rail over the bridle path?</p>
</div>

<div class="who mrs modal-link" id="mrs" data-scroll-reveal="enter right and move 100px over 0.3s">
     <h2>MRS. FOX</h2>
     <p>Well, I guess the horse fence would be a little safer.</p>
</div>

<div class="who fox modal-link" id="fox" data-scroll-reveal="enter left and move 100px over 0.3s">
     <h2>FOX</h2>
     <p>But the bridle path puts us out right next to the squab shack</p>
</div>

<div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s">
     <p>Mrs. Fox hesitates. She fiddles with her paws. She nods nervously. She shakes slightly. Fox looks at her funny.</p>
</div>

<div class="who fox modal-link" id="fox" data-scroll-reveal="enter left and move 100px over 0.3s">
     <h2>FOX</h2>
     <p>What's wrong? I've never seen you like this. You're acting all skittish. Don't worry. I've been stealing birds for a living since before I could trot.</p>
</div>

<div class="who mrs modal-link" id="mrs" data-scroll-reveal="enter right and move 100px over 0.3s">
     <h2>MRS. FOX</h2>
     <div class="how"><p>SHRUGS</p></div>
     <p>OK, let's take the --</p>
</div>

<div class="who fox modal-link" id="fox" data-scroll-reveal="enter left and move 100px over 0.3s">
     <h2>FOX</h2>
     <p>No, we'll do the horse fence. You gave me the scenic route already.</p>
</div>

<div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s">
     <p>Fox flashes a smile. He says suddenly:</p>
</div>

<div class="who fox modal-link" id="fox" data-scroll-reveal="enter left and move 100px over 0.3s">
     <h2>FOX</h2>
     <p>By the way, you look unbelievably beautiful tonight. You're practically glowing. Maybe it's the lighting.</p>
</div>

</div>

<div class="scene">
     <div class="description">
          <h3 id="scene-3" class="scene-holder">3</h3>
     </div>

     <div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s">
          <p>Mrs. Fox is, in fact, glowing, albeit ever so slightly. She stares at Fox enigmatically. Fox touches his paw to her cheek.</p>
     </div>

     <div class="note">
          <p>NOTE: an alternate version of Mrs. Fox will be used for this shot which can be literally lit from within.</p>
     </div>

     <div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s">
          <p>With the speed, grace, and precision of athletes, Fox and Mrs. Fox dart through a hole under a painted fence; race along a thin trail next to a garage; crawl beneath a window where a blonde woman serves an early dinner, dealing hamburgers like playing cards to three little, blond children; creep past a doghouse where a golden retriever sleeps with an airline sleeping mask over his eyes; and shimmy over a doorway outside a workshop where a blond, bearded farmer hacks into a stump with a hatchet, completely pulverizing it into sawdust. They arrive in front of a wooden shed. Fox whistles sharply with a half-chirp and performs a rapid reverse-flip with a flourish. Fox lifts a loose board. He looks to Mrs. Fox and puts his finger to his lips for her to be quiet. She shrugs impatiently. They duck inside. They come back out. Each holds a dead, bloody pigeon in his/her teeth. They start to run away. Fox looks up above them. He stops. He frowns. He takes the pigeon out of his mouth and says curiously, pointing toward the sky:</p>
     </div>

<div class="who fox modal-link" id="fox" data-scroll-reveal="enter left and move 100px over 0.3s">
     <h2>FOX</h2>
     <p>What's that? I think that's a fox-trap! Look at this.</p>
</div>

<div class="who mrs modal-link" id="mrs" data-scroll-reveal="enter right and move 100px over 0.3s">
     <h2>MRS. FOX</h2>
     <p>Get away from there.</p>
</div>

<div class="who fox modal-link" id="fox" data-scroll-reveal="enter left and move 100px over 0.3s">
     <h2>FOX</h2>
          <p>Is it spring-loaded? Yeah...</p>
          <div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s">
               <p>pointing to different spots</p>
          </div>
          <p>I guess if you come from over there, and you're standing at the door to the squab shack, this little gadget probably triggers the --</p>
          <div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s">
               <p>gesturing to Mrs. Fox</p>
          </div>
          <p>Move out of the way, darling. That's right where it's going to land.</p>
     </div>

     <div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s">
          <p>Mrs. Fox runs back to Fox and tugs at his arm.</p>
     </div>

<div class="who mrs modal-link" id="mrs" data-scroll-reveal="enter right and move 100px over 0.3s">
     <h2>MRS. FOX</h2>
          <p>Come on! Stop it! Let's go!</p>
     </div>
</div>

<div class="scene">
     <div class="description">
          <h3 id="scene-4" class="scene-holder">4</h3>
     </div>

     <div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s">
          <p>Fox pulls on a little, hanging wire. A chain unrolls rapidly from a pulley, and a steel cage falls slap down on top of them. A small tag on the base of it says Badoit et Fils. Fox and Mrs. Fox stand motionless, side by side, in disbelief.</p>
     </div>

<div class="who fox modal-link" id="fox" data-scroll-reveal="enter left and move 100px over 0.3s">
     <h2>FOX</h2>
          <p>No, it just falls straight down right here, doesn't it? I guess it's not spring-loaded.
     </div>

     <div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s">
          <p>Sounds come from around the farm: the dog barks, doors open, voices yell, lights come on. Mrs. Fox turns to Fox and says</p>
     </div>

<div class="who mrs modal-link" id="mrs" data-scroll-reveal="enter right and move 100px over 0.3s">
     <h2>MRS. FOX</h2>
     <div class="how"><p>QUIETLY</p></div>
          <p>I'm pregnant.</p>
     </div>

     <div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s">
          <p>Fox stares at Mrs. Fox. He is confused but moved.</p>
     </div>

<div class="who fox modal-link" id="fox" data-scroll-reveal="enter left and move 100px over 0.3s">
     <h2>FOX</h2>
     <p>Wow. We're going to have a cub. Honey, that's great news!</p>
</div>

<div class="who mrs modal-link" id="mrs" data-scroll-reveal="enter right and move 100px over 0.3s">
     <h2>MRS. FOX</h2>
     <p>If we're still alive tomorrow morning, I want you to find another line of work.</p>
</div>

     <div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s">
          <p>Pause. Fox nods.</p>
     </div>
</div>

<div class="scene">
     <div class="description valley">
     <h1>CUT TO:</h1>
     <p>A wide shot of the entire valley. There are thick woods, green and yellow fields, two ponds, a small village, and a river running through the middle.</p>
</div>

<div class="title">
     <h1>2 YEARS LATER ( 12 Fox-Years)</h1>
</div>

<div class="scene">
     <div class="description">
          <h1>EXT. HOLE. DAY</h1>
          <p>The entrance to a tunnel under a dirt mound covered with holly bushes.</p>
     </div>
</div>

<div class="scene">
     <div class="description">
          <h1>INT. HOLE. DAY</h1>
          <p>A small, comfortable kitchen off a living room with two bedrooms behind it. Fox sits at the kitchen table reading a newspaper called the Gazette. His fur has gone grey at the temples, and he now wears a dark, double-breasted, pin- striped suit with a conservative necktie. Mrs. Fox stands at the counter-top stirring something in a bowl with a whisk.</p>
          </div>
          </div>


<div class="scene">
     <div class="description">
          <h3 id="scene-5" class="scene-holder">5</h3>
          <p>She is dressed in a paint-splattered, cream-colored, Victorian-style dress.</p>
          <div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s">
               <p>INSERT:</p>
               <p>A column in the newspaper with Fox's picture at the top of it. The caption reads: <i>Fox about Town with Fantastic Mr. Fox</i>.</p>
     </div>
</div>

<div class="who fox modal-link" id="fox" data-scroll-reveal="enter left and move 100px over 0.3s">
     <h2>FOX</h2>
     <p>Does anybody actually read my column? Do your friends ever talk about it?</p>
</div>

<div class="who mrs modal-link" id="mrs" data-scroll-reveal="enter right and move 100px over 0.3s">
     <h2>MRS. FOX</h2>
     <div class="how"><p>STILL STIRRING</p></div>
     <p>Of course. In fact, Rabbit's ex- girlfriend just said to me last week, "I should read Foxy's column," but they don't get the Gazette.</p>
     <div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s">
          <p>yelling into the next room</p>
     </div>
     <p>Ash! Let's get cracking!</p>
</div>

<div class="who fox modal-link" id="fox" data-scroll-reveal="enter left and move 100px over 0.3s">
     <h2>FOX</h2>
     <p>Why would they? It's a rag-sheet.</p>
     <div class="how"><p>SIGHS</p></div>
     <p>I want to say I hate my job, but that would make it seem more important to me than I want people to think it is.</p>
</div>

<div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s">
     <p>Mrs. Fox puts down her bowl and starts slicing a loaf of bread. A small, narrow fox cub comes out of one of the bedrooms wearing white pants and no shirt. His hair is smashed all onto one side sticking up wrong. He is Ash.</p>
</div>

<div class="who ash modal-link" id="ash" data-scroll-reveal="enter left and move 100px over 0.3s">
     <h2>ASH</h2>
     <p>I'm sick.</p>
</div>

<div class="who mrs modal-link" id="mrs" data-scroll-reveal="enter right and move 100px over 0.3s">
     <h2>MRS. FOX</h2>
     <p>You're not sick.</p>
</div>

<div class="who ash modal-link" id="ash" data-scroll-reveal="enter left and move 100px over 0.3s">
     <h2>ASH</h2>
     <p>I have a temperature.</p>
</div>

<div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s">
     <p>Mrs. Fox goes quickly over to Ash and puts her paw to his forehead.</p>
</div>

<div class="who mrs modal-link" id="mrs" data-scroll-reveal="enter right and move 100px over 0.3s">
     <h2>MRS. FOX</h2>
     <p>You don't have a temperature.</p>
</div>

<div class="acting" data-scroll-reveal="enter left and move 0px over 0.6s">
     <p>Ash turns away and says as he goes back into his bedroom:</p>
</div>

<div class="who ash modal-link" id="ash" data-scroll-reveal="enter left and move 100px over 0.3s">
     <h2>ASH</h2>
     <p>I don't want to go.</p>
</div>
</div>
  
<div class="footer"></div>
  
<div class="modal">
  <div class="overlay"></div>
  <div class="wrapper">
    <div class="close"><p>x</p></div>
    <div class="img">
      <div class="who-fox hide">
      </div>
      <div class="who-mrs hide">
    </div>
      <div class="who-ash hide">
      </div>
    </div>
    <div class="text">
      <div class="who-fox hide">
        <h1>Mr. Fox</h1>
        <p>A handsome fox dressed in an Edwardian-style navy velvet suit.</p>
      </div>
      <div class="who-mrs hide">
        <h1>Mrs. Fox</h1>
        <p>A female fox whose coat is a paler, especially beautiful shade of fox-red.</p>
      </div>
      <div class="who-ash hide">
        <h1>Ash</h1>
        <p>A small, narrow fox cub.</p>
      </div>
    </div>
  </div>
</div>
  
  <script type="text/javascript" src="//use.typekit.net/luh3pgk.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
              
            
!

CSS

              
                @import "lesshat";

//@bgc: #e5ded6;
@bgc: #eff1f4;
@tc: #4a463d;

@ac1: rgba(190, 203, 226, 0.3);
@ac2: #f26c22;
@ac3: #7b1317;
@ac4: #f4a41f;
@ac5: #4a463d;

@grey: #afb0b2;


svg path {
  .transition(all 0.2s ease-out);
}

path:hover {
  //.scale(1.1);
}

.progress {
  position: fixed;
  z-index: 300;
  top: 0;
  left: 0;
  width: 3px;
  height: 20vh;
  background: @ac2;
  z-index: 400;
}

body {
  background: @bgc;
  font-size: 16px;
  line-height: 1.618em;
  font-family: 'Josefin Sans', sans-serif;
  overflow-x: hidden;
}

h1 {
  font-size: 2.58em;
  color: @ac2;
  line-height: 1.618em;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 800;
}
h2 {
  font-size: 1.618em;
  line-height: 1.6em;
}

.header {
  position: relative;
  padding: 4em 0;
  margin-bottom: -3em;
  background: @ac1;
  color: @ac2;
  background-image: url(https://24.media.tumblr.com/7187613f05d6d015c2e06ea126a1fb0c/tumblr_mvyxwqmRrn1st5lhmo1_1280.jpg);
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  text-align: center;
  z-index: 1;
  & > * {
    position: relative;
    z-index: 2;
  }
  .wrapper {
  //  max-width: 600px;
    margin: auto;
  }
  p {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    color: @grey;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    font-size: 0.6em;
  }
  h3 {
    margin: 0;
    padding: 0.6em 0;
    line-height: 1.618em;
    color: #fff;
  }
  h1 {
    color: #fff;
    font-size: 5em;
    line-height: 1.2em;
    margin: 0;
    padding: 0;
    opacity: 0.7;
  }
  &:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.4);
  }
  .description {
    position: absolute;
    width: 200px;
    right: 1em;
    top: 12em;
    background: #dedfe0;
    padding: 1em 1em;
    .authors p {
      color: #fff;
      font-size: 1em;
      text-transform: none;
    }
  }
  .characters {
    position: absolute;
    width: 200px;
    right: 1em;
    top: 23em;
    padding: 1em;
    background: #dedfe0;
    p {
      margin-bottom: 0.9em;
    }
    li.modal-link {
      cursor: pointer;
      p {
        padding: 0;
        margin: 0;
        color: #fff;
        font-size: 1em;
        text-transform: none;
      }
      &:hover p {
        color: @grey;
      }
    }
  }
}
.title {
  h1 {
    
  }
}

.scene {
  margin-top: 6em;
}

.description {
    text-align: center;
  h1 {
  }
  h3 {
    color: @grey;
  }
}

.script {
  max-width: 600px;
  color: @tc;
  margin: auto;
}
.how {
  position: relative;
  font-style: italic;
  color: @grey;
  letter-spacing: 0.02em;
  p {
    position: relative;
    z-index: 20;
    color: @grey !important;
  }
}
.acting {
  position: relative;
  padding: 0.618em 0;
  margin: 0.618em 0;
  p {
    position: relative;
    color: @tc !important;
    z-index: 2;
  }
  &:before {
    content: "";
    position: absolute;
    top: 0;
    left: -100vw;
    height: 100%;
    width: 200vw;
    background: @ac1;
    z-index: 0;
  }
}
.who {
  position: relative;
  padding: 0.8em 1em;
  margin: 1em 0;
  background: #fff;
  cursor: pointer;
  .border-radius(1em);
  &:before {
    content: "";
    position: absolute;
    height: 4em;
    width: 4em;
    top: -0.1em;
    left: -5em;
    cursor: pointer;
    -webkit-background-size: contain;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    .transition(all 0.2s ease-out);
  }
  &:after {
    content: "";
    position: absolute;
    left: -1.6em;
    top: 1em;
    border: 0.9em solid transparent;
    border-top-width: 0.6em;
    border-bottom-width: 0.6em;
    border-right-color: #fff;
  }
  &.fox {
    p {
      color: @ac2;
    }
    &:before {
      background-image: url(http://www.wattenberger.com/img/doodles/mrfox-small.png);
    }
  }
  &.mrs {
    h2 {
      left: auto;
      right: -6.2em;
    }
    p {
      color: @ac4;
    }
    &:before {
      top: -0.4em;
      left: auto;
      right: -5em;
      background-image: url(http://www.wattenberger.com/img/doodles/msfox-small.png);
    }
    &:after {
      left: auto;
      right: -1.6em;
      border-right-color: transparent;
      border-left-color: #fff;
    }
  }
  &.ash {
    p {
      color: @grey;
    }
    &:before {
      top: -0.4em;
      background-image: url(http://www.wattenberger.com/img/doodles/ash.png);
    }
  }
  h2 {
    position: absolute;
    top: 3.4em;
    left: -4.7em;
    text-align: center;
    font-size: 0.8em;
    z-index: 20;
  }
  &:hover {
    background: #fafafa;
    &:after {
      border-right-color: #fafafa;
    }
    &:before {
      .scale(1.2);
    }
  }
  &.mrs:hover:after {
    border-right-color: transparent;
    border-left-color: #fafafa;
  }
}

.scroll {
  position: absolute;
  z-index: 300;
  .transition(background 0.4s ease-out);
  &.fixed-to-left {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    background: rgba(255,255,255,0.2);
    &:hover {
      background: #fff;
    }
  }
  ul {
    margin-top: 20vh;
    padding: 0;
  }
  li {
    color: @grey;
    cursor: pointer;
    margin-top: 3vh;
    padding: 0 1.6em;
    .transition(color 0.2s ease-out);
    &:hover {
      color: @ac5;
    }
    &.passed {
      color: @ac5;
      &:hover {
        color: @ac5;
      }
    }
  }
}

.footer {
  height: 60px;
  width: 100vw;
  
  background-image: url();
  -webkit-background-size: cover;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  text-align: center;
  overflow: hidden;
  position: absolute;
  left: 0;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  z-index: 400;
  opacity: 0;
  .transition(opacity 0.2s ease-out);
  .overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 300;
    background: rgba(0,0,0,0.6);
    overflow: hidden;
    opacity: 0;
    cursor: pointer;
    .transition(opacity 1s ease-out);
  }
  &.show, &.show .overlay {
    display: block;
    opacity: 1;
  }
  .wrapper {
    position: absolute;
    top: 10vh;
    left: 10vw;
    height: 80vh;
    width: 80vw;
    background: #fafafa;
    z-index: 400;
    .close {
      position: absolute;
      top: -0.4em;
      right: -0.4em;
      background: @tc;
      text-align: center;
      color: #fff;
      font-weight: 800;
      height: 2em;
      width: 2em;
      line-height: 2em;
      cursor: pointer;
      .border-radius(2em);
      .transition(background 0.2s ease-out);
      &:hover {
        background: #666;
      }
    }
    .img {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      height: 70vh;
      width: 30vw;
      margin-top: 5vh;
      .hide {
        height: 70vh;
        width: 30vw;
        -webkit-background-size: contain;
        background-size: contain;
        background-position: center center;
        background-repeat: no-repeat;
      }
      .who-fox {
        background-image: url(http://www.wattenberger.com/img/doodles/mrfox-large.png);
      }
      .who-mrs {
        background-image: url(http://www.wattenberger.com/img/doodles/msfox-large.png);
      }
      .who-ash {
        background-image: url(http://www.wattenberger.com/img/doodles/ash-large.png);
      }
    }
    .text {
      display: inline-block;
      vertical-align: middle;
      height: 70vh;
      width: 30vw;
      margin-top: 5vh;
      margin-left: 5vw;
    }
  }
}

@media all and (max-width: 1100px) {
  .header .description, .header .characters {
    margin: 40px auto 0 auto;
    top: auto;
    right: auto;
    display: inline-block;
    position: relative;
    height: 126px;
    vertical-align: top;
    background: rgba(0,0,0,0.4);
  }
}
@media all and (max-width: 1000px) {
  .scroll {
    display: none;
  }
}
              
            
!

JS

              
                var config = {
        reset: true,
        init: true
      };


window.scrollReveal = new scrollReveal(config);

$(".scroll li").click(function() {
  var elem = $(this),
      class_name = elem.attr("class"),
      scene_num = class_name.substr(5,1),
      target = $("#scene-" + scene_num);

  $('html, body').animate({ scrollTop: (target.offset().top - 22) }, 'fast');
});

var fix_offset = $("#scroll-links").offset().top;

var fix_to_left = function() {
    var y = $(window).scrollTop();
    if ($("#scroll-links").length > 0) {
        if( y > fix_offset ){
            $("#scroll-links").addClass("fixed-to-left");
        } else {
            $("#scroll-links").removeClass("fixed-to-left");
        }
    }
 };

var which_scene = function() {
  var y = $(window).scrollTop();
  for (var i = 1, len = $(".scene-holder").length; i <= len; i++) {
    var offset = $("#scene-"+ i).offset().top - ($(window).height() / 2);
    if( y > offset){
          $("#scroll-links li:nth-of-type("+ i +")").addClass("passed");
      } else {
          $("#scroll-links li:nth-of-type("+ i +")").removeClass("passed");
      }
  };
  $(".progress").css("height",((y + $(window).height()) / $("body").height() * 100) + "vh")
 };

 $(window).scroll(function(){
    fix_to_left();
   which_scene();
 });

$(".modal-link").click(function() {
  var elem = $(this),
      who = elem.attr("id");
  $(".modal").addClass("show");
  $(".hide").hide();
  $(".who-"+ who).show();
  $(".close, .overlay").click(function() {
    $(".modal").removeClass("show");
  });
});
              
            
!
999px

Console