A Pen by Al Baj

HTML

              
                <!DOCTYPE html>
<html lang="en">
<head>

  <!-- Basic Page Needs
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta charset="utf-8">
  <title>Bringing the Ice Age to Life</title>
  <meta name="description" content="Bringing together digital technology and a profound sense of wonder about evolution">
  <meta name="author" content="Michelle María Early Capistrán">

  <!-- Mobile Specific Metas
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- FONT
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">

  <!-- CSS
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/skeleton.css">

  <!-- Favicon
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="icon" type="image/png" href="http://storybench.org/favicon.ico">

  <!-- OG tags
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <link rel="canonical" href="http://www.storybench.org/bringing-ice-age-life/" />
  <meta property="og:locale" content="en_US" />
  <meta property="og:type" content="article" />
  <meta property="og:title" content="Bringing the Ice Age to life - Storybench" />
  <meta property="og:description" content="The deep past is fertile ground for the imagination: a world of gigantic beasts and long-extinct forests, smoking volcanoes and deadly tar pits. It was precisely these fantastical landscapes and gargantuan mammals of the Pleistocene that captured the childhood imagination of artist Sergio de la Rosa... " />
  <meta property="og:url" content="http://www.storybench.org/bringing-ice-age-life/" />
  <meta property="og:site_name" content="Storybench" />
  <meta property="article:publisher" content="https://www.facebook.com/storybench" />
  <meta property="article:tag" content="3d modeling technology" />
  <meta property="article:tag" content="ice age illustration" />
  <meta property="article:tag" content="ice age science" />
  <meta property="article:tag" content="maya 3d art" />
  <meta property="article:tag" content="maya 3d science" />
  <meta property="article:tag" content="paleoart technology" />
  <meta property="article:tag" content="science illustration" />
  <meta property="article:tag" content="techniques in paleoart" />
  <meta property="article:section" content="Behind the scenes" />
  <meta property="article:published_time" content="2015-08-18T14:09:18+00:00" />
  <meta property="article:modified_time" content="2015-08-18T16:02:45+00:00" />
  <meta property="og:updated_time" content="2015-08-18T16:02:45+00:00" />
  <meta property="og:image" content="http://www.storybench.org/wp-content/uploads/2015/08/edadcover.jpg" />
  <meta name="twitter:card" content="summary_large_image"/>
  <meta name="twitter:description" content="The deep past is fertile ground for the imagination: a world of gigantic beasts and long-extinct forests, smoking volcanoes and deadly tar pits. It was precisely these fantastical landscapes and gargantuan mammals of the Pleistocene that captured the childhood imagination of artist Sergio de la Rosa... "/>
  <meta name="twitter:title" content="Bringing the Ice Age to life - Storybench"/>
  <meta name="twitter:site" content="@storybench"/>
  <meta name="twitter:domain" content="Storybench"/>
  <meta name="twitter:image:src" content="http://www.storybench.org/wp-content/uploads/2015/08/edadcover.jpg"/>
  <meta name="twitter:creator" content="@storybench"/>

</head>
<body>  

  <!-- Header
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <div class="top-nav">
    <div class="container">
      <div>
        <span><a href="http://www.storybench.org">
          <img class="logo" src="http://www.storybench.org/skeleton_iceage/images/watermarklogo.png" />
        </a> 
        </span> 
        <a href="https://www.facebook.com/share.php?s=100&p[url]=http://www.storybench.org/?p=2916"  target="_blank"><img class="icons" src="http://www.storybench.org/skeleton_iceage/images/facebook.svg"></a>
        <a href="https://twitter.com/intent/tweet?text=Bringing%20the%20Ice%20Age%20to%20Life%20from%20Storybench&url=http://www.storybench.org/?p=2973&tw_p=tweetbutton" target="_blank"><img class="icons" src="http://www.storybench.org/skeleton_iceage/images/twitter.svg"></a>
      </div>
    </div>
  </div>
  
  <!-- Hero image
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <div id="hero-image">
  </div>

  <!-- Primary Page Layout
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <div class="container">
    <div class="row">
      <div class="column" style="margin-top: 5%">
        <h1>Bringing the Ice Age to Life</h1>
        <h6>by Michelle María Early Capistrán <br />August 18, 2015</h6>

        <p class="after-image"><span class="dropcap">T</span>he deep past is fertile ground for the imagination: a world of gigantic beasts and long-extinct forests, smoking volcanoes and deadly tar pits. It was precisely these fantastical landscapes and gargantuan mammals of the Pleistocene that captured the childhood imagination of artist Sergio de la Rosa who, together with his wife Reyna Luz Jasso, a sculptor, creates vivid digital artwork and sculptures that re-create a lost world.</p> 

        <p>De la Rosa has produced scientific illustrations for <em>National Geographic en Español</em> and Mexico’s National Council on Biodiversity (<a href="http://www.biodiversidad.gob.mx/biodiversidad/edadHielo.html">CONABIO</a>) and has provided base art for computer graphic animators for the documentary series “<a href="https://www.youtube.com/watch?v=wCuTLkodDNs">Mexico en la Edad de Hielo</a>” (Mexico in the Ice Age), produced by Mexico’s Instituto Politécnico Nacional. As a couple, they have created life-sized sculptures of Pleistocene megafauna (large animals) for museums and parks across Mexico.</p>

        <p>Their artwork brings together digital technology and a profound sense of wonder about evolution. It feels like an interface between modern digital media and prehistoric rock painting.</p>

          <div class="row">
            <img class="column" src="http://www.storybench.org/wp-content/uploads/2015/08/atwork.png" />
            <div class="caption">
              <p>Sergio de la Rosa and Reyna Luz Jasso in the studio.</p>
            </div>
          </div>

        <h4 class="after-image">A childhood interest</h4>

        <p>De la Rosa’s interest in capturing nature in art began as a boyhood fascination with wildlife.  How do animals behave? How do they interact? His special fondness for the Pleistocene comes from a desire for the general public to learn about the fascinating animals that once lived in Mexico, ones we will never encounter: mastodons, gomphotheres, and saber-toothed cats, among others.</p>

          <div class="one-half column u-pull-right">
            <h3>It feels like an interface between modern digital media and prehistoric rock painting</h3>
          </div>

        <p>“It’s a fantastic world,” says de la Rosa. As an art student, he started creating paleoart for the fun of it. His first large project was a series of illustrations for the <a href="http://rewilding.org/rewildit/the-pleistocene-wildife-art-of-sergio-de-la-rosa/">Rewilding Institute</a>, a think tank focused on conservation. From there, he worked with biologist Carlos Galindo to create illustrations for scientific articles-like a recent one about prehistoric humans and ancient elephant associations discovered in Sonora, Mexico—and various print media.</p>

        <h4>Working for that moment of awe</h4>

        <p>De la Rosa and his wife’s work is part of an effort to introduce these ancient animals—and their biology—to the general public. In this sense, sculpture is an ideal medium: it provides a tangible proximity to the long-extinct fauna.</p>

        <p>One of the most gratifying elements of her work, says Jasso, is seeing people’s reactions to a life-sized sculpture: they are often surprised by how much grander these animals were than how they had imagined them. On one occasion, at the Cenote de Dos Ojos site museum, the couple encouraged a young little girl to touch a sculpture of a gomphothere: she dared not get too close because she was afraid it would move. Creating this proximity and generating this sense of awe is something that motivates them to move on to bigger and more ambitious projects.</p>

        <div class="row">
          <div class="one-half column">
            <img class="u-max-full-width" src="http://www.storybench.org/wp-content/uploads/2015/08/43.jpg">
          </div>

          <div class="one-half column">
            <img class="u-max-full-width" src="http://www.storybench.org/wp-content/uploads/2015/08/DSC_0394-500x331.jpg">
          </div>

          <div class="caption">
            <p>Sergio de la Rosa and Reyna Luz Jasso in front of their work.</p>
          </div>
        
        </div>

        <h4 class="after-image">How they do it</h4>

        <p>The couple’s creative process always begins with extensive research. By studying fossils and mounted skeletons, they can infer the approximate weight and volume of prehistoric animals.</p>

        <p>Next, the artists research the anatomy of the extinct animal’s closest living relatives. In the case of the Giant Sloth, for example, the analyzed the basic anatomy of the two extant species of arboreal sloths. Based on the similarities and differences between the two modern species, they can infer the proportions and shapes of the muscles on a much more robust animal.</p>

        <p>Then, the artists are able to produce a sketch in two and three dimensions that can be applied to sculpture or digital art. This process allows seemingly cold, technical topics like fossil morphology to come to life.</p>

        <h4>Digital tools</h4>

        <p>Using Adobe Photoshop, 3D design with a graphic program called Zbrush, putty and resin, the artists experiment with animal forms while respecting the work of findings published by biologists and paleontologists. Technology is vital to this process: the Internet allows access not only to scientific discoveries, but also to digital tools and techniques that can be maximized in order to create a meeting point between science and art which can be easily adapted as new discoveries are made.</p>

          <div class="one-half column u-pull-right">
            <h3>Science, art and technology all came together in the series “Mexico in the Ice Age”</h3>
          </div>

        <p>The artists’ illustrations and sculptures start out as two dimensional sketches in Adobe Photoshop and, occasionally, Adobe Illustrator. De la Rosa has never gotten used to drawing on digital tablets; he prefers a mouse. From there, they create 3D models in Zbrush, an intuitive platform that De la Rosa likens to working with putty or clay. Starting with a digital sphere, he can pull and mold pixels, creating spikes, shapes, and variations in volume. Occasionally, they use Adobe After Effects and Adobe Premiere for editing, but Photoshop is De la Rosa’s preferred platform for posters, calendars, and other 2D media. </p>

        <h4>Animating 3D models</h4>

        <p>Science, art and technology all came together in the series “Mexico in the Ice Age,” in which de la Rosa worked with paleontologists and digital animators at M31 Medios to recreate the region’s Ice Age, which occurred around 10,000 years ago. De la Rosa provided images to start with and, together with scientists, helped refine the appearance of the animals’ behavior and movements.</p>

        <p>The workflow started with De la Rosa’s 3D models in Zbrush, which a team of animators transferred to Maya, 3D Max, and Cinema 4D. Each team member focused on a specific task with a specific platform. For example, one would model the animal’s extremities, another its muscles, and a third created the fur and other textures. In the end, the joint efforts created a completed piece.</p>  

        <p>Although bound by television’s time constraints, the team tried to capture aspects of prehistoric life that would most spark the viewer’s interest, giving the public a visual narrative of what is in books and scientific articles. Their objective is to help scientific research go hand-in-hand with graphic art.</p>

        <p>“I think art and science must build these bridges where knowledge has a graphic output,” says de la Rosa. “Not everyone will be as excited as a paleoartist when they see an elephant, but it can create an interest in some people. The conjunction of art and science can help promote consciousness of evolutionary processes, of how rich the natural world is.”</p>

        <h4>We’ve always told prehistoric stories</h4>

        <p>New technologies are helping paleoartists recreate ancient worlds in dynamic, multisensory ways, seen in exhibits like St. Louis Zoo’s 4D safari where visitors interact with life-size animatronic dinosaurs. However, de la Rosa says, paleoart has been somewhat frowned upon by artists, some of whom consider it outdated or even Victorian. While contemporary art tends towards conceptual work, de la Rosa says that creating and conserving paleoart keeps us in touch with the essence of art itself. The first artists, he estimates, created cave paintings and rock art out of a sense of splendor and appreciation of the natural world, capturing their impressions of what affected them.</p>

        <p>“A cave artist tracing an image on a wall. That is the origin of art,” says de la Rosa. With digital technologies and conceptual trends in contemporary art, more and more of that primordial artistic process has been demoted.</p>

          <div class="one-half column u-pull-right">
            <h3>“A cave artist tracing an image on a wall. That is the origin of art.”</h3>
          </div>

        <p>It shouldn’t be that way, he says. “The joy of trying to express what you love about the world, the impression of meeting with wildlife or the sense of wonder you’ve had since childhood—trying to capture that on a piece of paper, that’s what should keep manifesting itself.”</p>

        <p>That’s how you awake in people a sense of wonder about the natural world.</p>

        <p>That’s how you begin to tell a prehistoric story.</p>     

      </div>
    </div>
  </div>


<!-- End Document
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
</body>
  
  <footer>
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'TKTKTKTK', 'auto');
      ga('send', 'pageview');

    </script>
  </footer>
  
</html>

CSS

              
                /*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* https://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Custom CSS by Storybench
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/

/* Custom CSS by Storybench
–––––––––––––––––––––––––––––––––––––––––––––––––– */

#hero-image {
  height: 590px;
  padding-top: 80px;
  background: #ffffff url("http://www.storybench.org/skeleton_iceage/images/edadcover3.jpg") no-repeat center;
}

.after-image {
  padding-top: 50px;
}

.dropcap {
  font-size: 6em;
  float: left;
  line-height: 0.9;
  margin-right: 15px;
  margin-top: 0px;
}

.caption{
  text-align: center; 
  color: #A9A9A9;
}

@media (max-width: 400px) {
  .u-pull-right h3{font-size: 1.5em; text-align:right;}
}

.icons{
  padding: 9px 5px 0px 5px;
  height:30px;
  float: right;
}

.logo{
  padding: 3px 0px 0px 0px;
  height: 45px;
}

.top-nav {
  height:50px;
  width: 100%;
  background-color: white;
  position:fixed; 
  z-index:100;
}

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 80%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #222; }


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0; }


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #1EAEDB; }
a:hover {
  color: #0FA0CE; }


/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: #555;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid #bbb;
  cursor: pointer;
  box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #333;
  border-color: #888;
  outline: 0; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;
  background-color: #33C3F0;
  border-color: #33C3F0; }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;
  background-color: #1EAEDB;
  border-color: #1EAEDB; }


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0; }
label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle inside; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; }


/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem; }


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}



/*! normalize.css v3.0.2 | MIT License | git.io/normalize */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

JS

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

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

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions