Pen Settings

HTML

CSS

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

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

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.

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

              
                <!-- skip link navigation -->
<ul class="skip_links">
    <li><a class="skip" href="#skip_header">skip to header (banner)</a></li>
    <li><a class="skip" href="#skip_main">skip to main content (main)</a></li>
    <li><a class="skip" href="#skip_map">skip to "Displaying (Famous) Blocks" (article)</a></li>
    <li><a class="skip" href="#skip_bottom_line">skip to "Border Bottom Line" (article)</a></li>
    <li><a class="skip" href="#skip_footer">skip to footer (contentinfo)</a></li>
</ul>
<!-- start: site content -->
<!-- workaround. usually you put this on html tag -->
<!--[if lt IE 9]> <div class="ltie9 page"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]> <!--> <div class="page"> <!-- <![endif]-->
    <!-- start: header -->
    <header class="header" role="banner" id="skip_header">
        <h1 class="logo">
            <a href="/" title="CSS Off">
                <span>Css</span><span class="squeezed">Off</span>
            </a>
        </h1>

        <time class="episode" datetime="2013-09-03">Volume 3—September 2013</time>
        <!-- start: module barbie teaser -->
        <aside class="mod_teaser_barbie" role="complementary">
            <a class="teaser_pic" href="http://inventors.about.com/od/bstartinventions/a/The-History-Of-Barbie-Dolls.htm" title="read more about the History of barbie dolls"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/23546/img_barbie.png" alt="Barbie doll rocks in pink frame" width="403" height="347"></a>

            <h1 class="title"><a href="http://inventors.about.com/od/bstartinventions/a/The-History-Of-Barbie-Dolls.htm" title="read more about the History of barbie dolls">Box Model</a></h1>

            <p class="description">The Barbie doll was invented in 1959 by Ruth Handler (co-founder of Mattel), whose own daughter was called Barbara. Barbie was introduced to the world at the American Toy Fair in New York City. Barbie's job was teenage fashion doll. The full name of the first doll was Barbie Millicent Roberts, from Willows, Wisconsin.</p>
        </aside>
        <!-- end: module barbie teaser -->

        <!-- start: module feature -->
        <article class="mod_feature" role="article">
            <a class="feature_pic" href="http://www.neatorama.com/2006/08/29/the-wonderful-world-of-early-photography" title="read more about the wonderful world of early photography"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/23546/img_photo_relatives_3.jpg" alt="world’s first photomontage - a young girl dying of consumption" width="863" height="531"></a>

            <div class="wrapper">
                <em class="roofline">Feature</em>
                <h1 class="title"><a href="http://www.neatorama.com/2006/08/29/the-wonderful-world-of-early-photography" title="read more about the wonderful world of early photography">Positioning Relatives</a></h1>
                <p class="description">In 1858, English pictorial photographer Henry Peach Robinson created the world’s first photomontage by combining five different negatives to make one complete print of a young girl on her deathbed. “Fading Away”—Robinson’s first and most famous composite photo—depicts a young girl dying of consumption and was controversial when it was exhibited, with many believing it was not a suitable subject for photography.</p>
            </div>
        </article>
        <!-- end: module feature -->
    </header>
    <!-- end: header -->

    <!-- start: main content -->
    <main class="main" role="main" id="skip_main">

        <section class="row" role="region">
            <!-- start: module afloat -->
            <aside class="mod_afloat" role="complementary">
                <h1 class="title"><a href="http://www.nydailynews.com/new-york/lost-lobsterman-rescued-12-hours-sea-article-1.1408753" title="read more about a lost lobsterman rescued after being 12 hours at sea">Staying afloat</a></h1>
                <p class="description">Lobsterman John Aldridge fell into the shark-infested water of Long Island while his crewmates were asleep. He was kept afloat for more than 12 hours by his rubber boots, which he used as flotation devices. The coast guard rescued him 43 miles south of Montauk where he fell off his vessel.</p>
                <a class="deco_pic" href="http://www.nydailynews.com/new-york/lost-lobsterman-rescued-12-hours-sea-article-1.1408753" title="read more about a lost lobsterman rescued after being 12 hours at sea"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/23546/img_boots.png" alt="rubber boots in green used as flotation devices" width="200" height="200"></a>
            </aside>
            <!-- end: module afloat -->

            <!-- start: module ammunition -->
            <article class="mod_ammunition" role="article">
                <header class="ammunition_header">
                    <h1 class="title">List Style: Bullets.</h1>
                    <small class="small_print">A round-up of popular ammunition</small>
                </header>

                <ul class="bullet_list" role="list">
                    <li class="list_item" role="listitem">
                        <figure role="group">
                            <a href="http://www.bradycampaign.org/" class="bullet_pic" title="link to detail page"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/23546/img_bullet_223.png" alt=".223 Remington" width="84" height="218"></a>

                            <figcaption class="description">
                                <a href="http://www.bradycampaign.org/" class="detail_link" title="link to detail page">
                                    <strong class="size">.223</strong>
                                    <span class="use">Remington</span>
                                    <span class="weight">69gr BTHP</span>
                                </a>
                            </figcaption>
                        </figure>
                    </li>

                    <li class="list_item" role="listitem">
                        <figure role="group">
                            <a href="http://www.bradycampaign.org/" class="bullet_pic small" title="link to detail page"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/23546/img_bullet_308.png" alt=".308 Winchester" width="92" height="273"></a>

                            <figcaption class="description">
                                <a href="http://www.bradycampaign.org/" class="detail_link" title="link to detail page">
                                    <strong class="size">.308</strong>
                                    <span class="use">winchester</span>
                                    <span class="weight">168gr BTHP</span>
                                </a>
                            </figcaption>
                        </figure>
                    </li>

                    <li class="list_item" role="listitem">
                        <figure role="group">
                            <a href="http://www.bradycampaign.org/" class="bullet_pic large" title="link to detail page"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/23546/img_bullet_762_154.png" alt="7.62×39mm Russian" width="98" height="217"></a>

                            <figcaption class="description">
                                <a href="http://www.bradycampaign.org/" class="detail_link" title="link to detail page">
                                    <strong class="size small">7.62×39mm</strong>
                                    <span class="use large">Russian</span>
                                    <span class="weight middle">154gr JSP</span>
                                </a>
                            </figcaption>
                        </figure>
                    </li>

                    <li class="list_item" role="listitem">
                        <figure role="group">
                            <a href="http://www.bradycampaign.org/" class="bullet_pic large" title="link to detail page"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/23546/img_bullet_762_220.png" alt="7.62 Thumper 220gr" width="85" height="217"></a>

                            <figcaption class="description">
                                <a href="http://www.bradycampaign.org/" class="detail_link" title="link to detail page">
                                    <strong class="size large">7.62</strong>
                                    <span class="use small">Thumper</span>
                                    <span class="weight large">220gr RN</span>
                                </a>
                            </figcaption>
                        </figure>
                    </li>

                    <li class="list_item" role="listitem">
                        <figure role="group">
                            <a href="http://www.bradycampaign.org/" class="bullet_pic" title="link to detail page"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/23546/img_bullet_762_240.png" alt="7.62 Thumper 240gr" width="87" height="221"></a>

                            <figcaption class="description">
                                <a href="http://www.bradycampaign.org/" class="detail_link" title="link to detail page">
                                    <strong class="size large">7.62</strong>
                                    <span class="use small">Thumper</span>
                                    <span class="weight">240gr BTHP</span>
                                </a>
                            </figcaption>
                        </figure>
                    </li>
                </ul>
            </article>
            <!-- end: module ammunition -->
        </section>

        <!-- start: module famous blocks -->
        <article class="mod_famous_blocks" role="article" id="skip_map">
           <header>
               <h1 class="title"><a href="https://www.bbc.co.uk/news/uk-england-london-12059385" title="read more about Beatles' Abbey Road zebra crossing given listed status">Displaying (Famous) Blocks</a></h1>
           </header>

            <div class="map_teaser" role="application">
                <img class="map" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/23546/img_beatles.jpg" alt="the beatles crossing abbey road" width="960" height="635">
                <div class="page_turn js_page_turn" title="click here to open map" tabindex="0">
                    <span class="curve js_curve"></span>
                </div>
            </div>

           <p class="description">Abbey Road is a thoroughfare located in the borough of Camden and the City of Westminster in London, running roughly northwest to southeast through St. John’s Wood, near Lord’s Cricket Ground. It is part of the B507. This road is best known for the Abbey Road Studios and the 1969 album, Abbey Road, by The Beatles.
               <a href="https://goo.gl/h44dc9" title="link to source of image">Photo: goo.gl/h44dc9</a>
           </p>
        </article>
        <!-- end: module famous blocks -->

        <section class="row" role="region">
            <!-- start: module bottom line -->
            <article class="mod_bottom_line" role="article" id="skip_bottom_line">
                <header>
                    <h1 class="title"><a href="http://www.abovetopsecret.com/forum/thread568371/pg1" title="read more about sissification of a nation">Border Bottom Line</a></h1>
                    <h2 class="subheading"><a href="http://www.abovetopsecret.com/forum/thread568371/pg1" title="read more about sissification of a nation">Awful immigration laws from around the world.</a></h2>
                </header>

                <dl class="fact_list" role="list">
                    <dt>Italy</dt><dd>penalizes illegal immigrants with a fine of €5,000-10,000 and allows immigration officials to detain them for up to 6 months.</dd><dt>Switzerland</dt><dd>immediately deports all convicted criminals from other countries and potentially even their family members.</dd><dt>Australia</dt><dd>detains all non-citizens without a valid visa.</dd><dt>Japan</dt><dd>is allowed to pay $3,000 to each unemployed Latin American immigrant of Japanese descent and $2,000 to each of that unemployed worker’s family members to return to their country of origin.</dd><dt><span class="notstrong">The</span> United Arab Emirates</dt><dd>prohibits foreigners from engaging in any sort of labor union-like activity, resulting in harsh living conditions, 80-hour work weeks, back-breaking manual labor, and below-minimum-wage pay.</dd>
                </dl>

            </article>
            <!-- end: module bottom line -->

            <!-- start: module media teaser -->
            <aside class="mod_media_teaser" role="complementary">
                <a class="media_pic" href="http://www.amazon.com/Transformers-Revenge-Two-Disc-Special-Blu-ray/dp/B001KZIRM2/" title="amazon link to transformers blu ray"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/23546/img_transformers.png" alt="teaser picture transformers" width="338" height="445"></a>

                <header class="teaser_header">
                    <h1 class="title"><a href="http://www.amazon.com/Transformers-Revenge-Two-Disc-Special-Blu-ray/dp/B001KZIRM2/" title="amazon link to transformers blu ray">Transformers</a></h1>
                    <h2 class="subheading"><a href="http://www.amazon.com/Transformers-Revenge-Two-Disc-Special-Blu-ray/dp/B001KZIRM2/" title="amazon link to transformers blu ray">Revenge of the fallen</a></h2>
                </header>

                <p class="description">A noisy, underplotted, and overlong special effects extravaganza that lacks a human touch.</p>

                <div class="rating js_rating">
                    <a class="rating_link" href="http://www.rottentomatoes.com/m/transformers_revenge_of_the_fallen/" title="link to rotten tomato rating">Rotten Tomato<span>Rating</span></a>
                    <a class="rating_number js_rating_number" id="meter_label" href="http://www.rottentomatoes.com/m/transformers_revenge_of_the_fallen/" title="link to rotten tomato rating">20%</a>

                    <div class="meter js_meter" role="progressbar" aria-labelledby="meter_label" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                        <span class="value js_bar"></span>
                        <!-- better semantics but hardly stylable -->
                        <meter value="20" max="100" min="0"></meter>
                    </div>
                </div>

                <div class="additional_info">
                    <h3 class="intro">World premiere</h3>
                    <em class="venue">Den Haag theatre</em>
                    <span class="country">The netherlands</span>
                    <time class="date" datetime="2011-06-23">June 23, 2011</time>
                </div>
            </aside>
            <!-- end: module media teaser -->
        </section>

        <!-- start: module overflow -->
        <article class="mod_overflow" role="article">
            <p>On the night of Aug 8, 1975, a line of people frantically piled sandbags atop Henan Province's <strong>Banqiao Dam</strong> while being battered by the worst storm ever recorded in the region. They were in a race with the rapidly rising Ru River to save the dam and the millions of people that lay sleeping downstream. It was a race they were about to lose.</p>

            <p>Just after 1:00 am, the sky cleared and stars emerged from behind the storm clouds. There was an eerie calm as someone yelled, "The water level is going down! The flood is retreating!"</p>

            <p>There was little chance to enjoy that calm. One survivor recalled that a few seconds later it "sounded like the sky was collapsing and the earth was cracking." The equivalent of 280,000 Olympic-sized swimming pools burst through the crumbling dam, taking with it entire towns and as many as 171,000 lives. </p>
        </article>
        <!-- end: module overflow -->
    </main>
    <!-- end: main content -->

    <!-- start: footer -->
    <footer class="footer" role="contentinfo" id="skip_footer">
        <p class="copyright"><a href="http://www.unmatchedstyle.com/cssoff/" title="link to offical CSSOff 2013">2013 CSSOff,</a> Volume 3</p>

        <address class="contact">
            <strong>Route Gregory</strong>, <span class="inline">Building 31</span>
            <span>01630 Prévessin-Moëns, France</span>
            <span>+41 22 767 61 11</span>
        </address>
    </footer>
    <!-- end: footer -->
</div>
<!-- end: site content -->
              
            
!

CSS

              
                @import "compass/css3";

/*
 * CSS OFF 2013
 * Author: Stefanie Schneider
 * @lhtdesignde, www.lhtdesign.de
 *
 * Description: Responsive, accessible layout for latest phones and screen readers.
 * Works in all modern browsers, gracefully degraded for legacy ones like IE8.
 */

// Fonts workaround! Site is broken in codepen full and live view when font is only inserted in html <head>, otherwise NOT a good idea. VERY slow.
@import url(https://fonts.googleapis.com/css?family=Lato:400,100,700);
@import url(https://fonts.googleapis.com/css?family=Merriweather:400,700,300);
@import url(https://fonts.googleapis.com/css?family=Oswald);
@import url(https://fonts.googleapis.com/css?family=Lora:400italic,700italic);

//
// Compass Imports
//
@import "compass/support";
@import "compass/css3";


//
// Variables
//

// compass options
$legacy-support-for-ie: true;
$experimental-support-for-svg: true;

// fonts
$fontlato: "Lato", Tahoma, sans-serif; // 100, 400, 700
$fontmerriweather: "Merriweather", "Times New Roman", serif; // 300, 400, 700
$fontoswald: "Oswald", Verdana, sans-serif; // 400
$fontlora: "Lora", Georgia, serif; // 400i, 700i

// grid
$maingridwidth: 960px;

// breakpoints
$break_mobile: 600px;
$break_tablet: 800px;
$break_desktop: $maingridwidth;
$break_large_desktop: 1280px;


// helper mixins
@mixin clearfix {
    /* fix für safari */
    display: block;

    &:after {
        visibility: hidden;
        display: block;
        clear: both;
        height: 0;
        font-size: 0;
        content: ".";
    }
}

@mixin hyphens {
    -ms-word-break: break-all;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    word-break: break-all;
    hyphens: auto;
}


/*
 * Styles
 */


/* general */
body {
    font-family: $fontlato;
    font-size: 1em; /* 16px */
    line-height: 1.5em; /* 24px */
    text-align: left;
    color: #000;
    background-color: #fff;
    -webkit-tap-highlight-color: transparent;


    /* text renderings */
    strong {
        font-weight: 700;
    }

    em {
        font-style: italic;
    }

    address {
        font-style: normal;
    }

    /* links */
    a,
    a:visited {
        text-decoration: none;
    }

    a:hover,
    a:active,
    a:focus {
        text-decoration: underline;
        /* leave outline for better accessibility */
    }

    /* skip links for better accessibility */
    .skip {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .skip:focus,
    .skip:active {
        position: static;
        top: 0;
        left: 0;
    }

    .skip_links {
        position: absolute;
        top: 0;
        left: -9999px;
        z-index: 21;
        width: 100%;
    }

    .skip_links .skip:focus,
    .skip_links .skip:active {
        position: absolute;
        left: 9999px;
        width: 100%;
        outline: 0 none;
        padding: 10px 0;
        text-align: center;
        text-decoration: none;
        color: #5f5d66;
        background-color: #CDC9DD;
        background-color: rgba(205, 201, 221, 0.6);
    }
}

/* hover only for desktop/no-touch */
.no-touch {
    .mod_afloat .deco_pic:focus,
    .mod_afloat .deco_pic:hover {
        -webkit-animation-name: shake;
        -moz-animation-name: shake;
        -o-animation-name: shake;
        animation-name: shake;
        -webkit-animation-duration: 1.5s;
        -moz-animation-duration: 1.5s;
        -o-animation-duration: 1.5s;
        animation-duration: 1.5s;
        -webkit-animation-timing-function: ease-in-out;
        -moz-animation-timing-function: ease-in-out;
        -o-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        -o-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
    }

    .mod_afloat .deco_pic:focus {
        outline: none;
        border: 1px dotted #ccc;
    }

    .mod_ammunition .bullet_list .bullet_pic:focus,
    .mod_ammunition .bullet_list .bullet_pic:hover,
    .mod_ammunition .bullet_list .bullet_pic.small:focus,
    .mod_ammunition .bullet_list .bullet_pic.small:hover{
        @include transform(scale(1.2));
        @include transition-duration(400ms);
        @include transition-property(transform);
    }

    .mod_ammunition .bullet_list .list_item:hover .detail_link span,
    .mod_ammunition .bullet_list .list_item:hover .detail_link strong,
    .mod_ammunition .bullet_list .list_item .detail_link:focus span,
    .mod_ammunition .bullet_list .list_item .detail_link:focus strong {
        color: #a97d35;
        @include transition-duration(400ms);
        @include transition-property(color);
    }

    .mod_famous_blocks .map_teaser .page_turn:focus,
    .mod_famous_blocks .map_teaser .page_turn:focus .curve,
    .mod_famous_blocks .map_teaser:hover .page_turn,
    .mod_famous_blocks .map_teaser:hover .curve {
        @include transition-property(all);
        @include transition-duration(500ms);
        width: 200px;
        height: 200px;

        &.notransition {
            @include transition(none);
        }
    }

    .mod_media_teaser .media_pic:focus,
    .mod_media_teaser .media_pic:hover {
        @include transform(scale(1.1));
        @include transition-duration(400ms);
        @include transition-property(transform);
    }
}

/* only on touch gpu activation */
.touch {
    .header .mod_feature .feature_pic img {
        @include transform(rotate(-3.84deg) translate3d( 0, 0, 0));
    }
}

/* ie fallbacks and adjustments */
.ltie9 {
    /* ie8 can't do mediaqueries and won't be on any phone,
    let's not confuse it with fluidness */
    &.page {
        overflow: hidden;
        width: 1280px;
    }
  
    /* to avoid main tag */
    .row,
    .mod_famous_blocks,
    .mod_overflow {
      width: $maingridwidth;
      margin-left: auto;
      margin-right: auto;
    }

    .header {
        width: $maingridwidth;

        .logo a {
            width: 510px;
            height: auto;
            text-indent: -9999px;
            background: transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/23546/bg_fallback_logo.png) no-repeat scroll 25px 58px;
        }

        .mod_teaser_barbie .teaser_pic img {
            width: 403px;
            height: 347px;
        }
    }

    .mod_famous_blocks .map_teaser .curve {
        background: transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/23546/bg_fallback_curv.png) no-repeat scroll 0 0;
    }

    .mod_media_teaser .additional_info:after {
        background: transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/23546/bg_fallback_notch.png) no-repeat scroll 0 0;
    }

    .mod_overflow p,
    .mod_overflow p:first-child {
        margin-bottom: 15px;
    }
}


/* general - frame */
.page {
    position: relative;
    min-width: 320px;
    max-width: 1280px;
    margin: 0 auto;

    &:before {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 45.5469%; /* 583 */
        height: 1008px;
        background-color: #cdc9dd;
        content: "";
    }

    &:after {
        position: absolute;
        top: 698px;
        left: 0;
        width: 45.5469%; /* 583 */
        height: 310px;
        background-color: #d9d5e6;
        content: "";
        @include filter-gradient(#d9d5e6, #cecbde, vertical);
        @include background-image(linear-gradient(top, #d9d5e6 0%,#d8d6e4 16%,#d6d3e4 20%,#d7d4e5 29%,#cecbde 100%));
    }
}

.main {
    position: relative;
    clear: both;
    display: block; /* bugfix for ie11, safari 5, opera */
    max-width: $maingridwidth;
    margin: 0 auto;
}

.row {
    @include clearfix;
    width: 100%;
}

.header {
    @include clearfix;
    position: relative;
    max-width: $maingridwidth;
    margin: 0 auto;
    margin-bottom: 34px;

    .logo {
        width: 50%;
    }

    .logo a {
        overflow: hidden;
        position: relative;
        z-index: 12;
        display: block;
        margin-left: -38px;
        padding: 35px 0 2px;
        font-family: $fontlato;
        font-size: 17.4375em; /* 279px */
        font-weight: 100;
        line-height: 0.8065em; /* 225px */
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.04em; /* 40 */
        color: #fff;

        -webkit-animation-name: width;
        -moz-animation-name: width;
        -o-animation-name: width;
        animation-name: width;
        -webkit-animation-duration: 1.5s;
        -moz-animation-duration: 1.5s;
        -o-animation-duration: 1.5s;
        animation-duration: 1.5s;
        -webkit-animation-timing-function: ease-in-out;
        -moz-animation-timing-function: ease-in-out;
        -o-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: 1;
        -moz-animation-iteration-count: 1;
        -o-animation-iteration-count: 1;
        animation-iteration-count: 1;

        span {
            display: block;
        }

        .squeezed {
            letter-spacing: -0.05em; /* 50 */
        }
    }

    .episode {
        position: absolute;
        top: 138px;
        right: -1px;
        max-width: $maingridwidth;
        font-family: $fontlora;
        font-size: 0.75em; /* 12px */
        font-style: italic;
        line-height: 1.6667em; /* 20px */
        text-transform: uppercase;
        letter-spacing: 0.2em; /* 200 */
        color: #b0aeb8;
    }
}


.footer {
    @include clearfix;
    min-height: 135px;
    max-width: $maingridwidth;
    margin: 72px auto 0;
    border-top: 1px solid #e5e5e5;
    padding-top: 17px;
    color: #e5e5e5;

    .copyright {
        float: left;
        width: 50%;

        a {
            margin-right: 1px;
            color: #8d8d8d;
        }
    }

    .contact {
        float: right;
        width: 50%;
        margin-top: 3px;
        font-family: $fontmerriweather;
        font-size: 0.75em; /* 13px */
        line-height: 1.6667em; /* 19px */
        text-align: right;
        letter-spacing: 0.035em; /* 35 */
        color: #989898;

        /* ios links numbers */
        a {
            text-decoration: underline;
            color: #989898;
        }

        span {
            display: block;
            font-weight: 300;
        }

        .inline {
            display: inline;
        }
    }
}


/* general - modules */
.mod_teaser_barbie {
    position: relative;
    z-index: 13;
    float: left;
    width: 55%;
    margin: -46px 0 0 -102px;

    .teaser_pic {
        display: block;

        img {
            width: 100%;
            height: auto;
            max-width: 403px;
        }
    }

    .title a,
    .description {
        @include box-sizing(border-box);
        max-width: 423px;
        margin-left: 93px;
        padding: 0 29px;
        text-align: center;
    }

    .title a {
        display: block;
        margin-top: -15px;
        margin-bottom: 12px;
        font-family: $fontlora;
        font-size: 2.25em; /* 36px */
        font-weight: 700;
        font-style: italic;
        line-height: 1.1112em; /* 40px */
        color: #5f5d66;
    }

    .description {
        font-size: 1.1875em; /* 19px */
        line-height: 1.4211em; /* 27px */
        letter-spacing: -0.02em; /* -20 */
        color: #6e6c77;
    }
}

.mod_feature {
    position: relative;
    float: right;
    max-width: 50%;

    .feature_pic {
        position: absolute;
        top: -296px;
        left: -143px;
        width: 167%;
        max-width: 800px;

        &:after {
            position: absolute;
            bottom: -51px;
            left: -62px;
            z-index: 10;
            width: 543px;
            height: 46px;
            background: transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/23546/pseudo_shadow_photo_relatives.png) no-repeat scroll 0 0;
            content: "";
        }

        img {
            position: relative;
            z-index: 11;
            display: block;
            width: 100%;
            height: auto;
            max-width: 794px;
            padding: 10px;
            @include box-sizing(border-box);
            background: transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/23546/bg_photo_relatives_1.jpg) no-repeat scroll center center;
            @include transform(rotate(-3.84deg));
        }
    }

    .wrapper {
        width: 106%;
        max-width: 508px;
        margin: 49px 0 0 -27px;
    }

    .roofline {
        position: relative;
        z-index: 11;
        display: block;
        font-family: $fontmerriweather;
        font-size: 0.8125em; /* 13px */
        font-style: normal;
        line-height: 1.5385em; /* 20px */
        text-transform: uppercase;
        letter-spacing: 0.2em; /* 200 */
        color: #cbb8a0;
    }

    .title {
        position: relative;
        display: block;
        margin-bottom: 18px;
        font-family: $fontoswald;
        font-size: 4.6875em; /* 75px */
        line-height: 1.0534em; /* 79px */
        text-transform: uppercase;

        a {
            position: relative;
            z-index: 11;
            display: block;
            color: #fdcd84;
        }

        &:before {
            position: absolute;
            top: -30px;
            left: -84px;
            z-index: 11;
            width: 411px;
            height: 188px;
            background: transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/23546/pseudo_shadow_text_relatives.png) no-repeat scroll 0 0;
            content: "";
        }
    }

    .description {
        position: relative;
        z-index: 11;
        font-family: $fontmerriweather;
        font-size: 1.5625em; /* 25px */
        font-weight: 300;
        line-height: 1.32em; /* 33px */
        letter-spacing: -0.02em; /* -20 */
    }
}


.mod_afloat {
    float: left;
    width: 14.5834%; /* 140px */
    text-align: right;
    letter-spacing: -0.02em; /* -20 */

    .title a {
        display: block;
        margin-bottom: 5px;
        font-family: $fontoswald;
        font-size: 1.3125em; /* 21px */
        line-height: 1.2381em; /* 26px */
        color: #24795a;
    }

    .description {
        margin-bottom: 23px;
        padding-left: 19px;
        font-size: 0.875em; /* 14px */
        line-height: 1.3572em; /* 19px */
        color: #464646;
    }

    .deco_pic {
        position: relative;
        top: -5px;
        left: -27px;
        z-index: 11;
        display: block;
        max-width: 100%;
    }
}

.mod_ammunition {
    float: right;
    width: 83.3334%; /* 800px */

    .ammunition_header {
        border-top: 1px solid #e5e5e5;
        border-bottom: 1px solid #e5e5e5;
        padding: 10px 0;
        text-align: center;
        text-transform: uppercase;

        .title {
            display: inline-block;
            margin-right: 4px;
            font-family: $fontoswald;
            font-size: 0.9375em; /* 15px */
            line-height: 1.2667em; /* 19px */
            letter-spacing: 0.04em; /* 40 */
            color: #a97d35;
        }

        .small_print {
            display: inline-block;
            font-size: 0.75em; /* 12px */
            font-weight: 700;
            line-height: 1.5834em; /* 19px */
            letter-spacing: 0.08em; /* 80 */
            color: #e0c167;
        }
    }

    .bullet_list {
        @include clearfix;
        padding-top: 16px;

        .list_item {
            @include box-sizing(border-box);
            position: relative;
            float: left;
            width: 20%;
            min-height: 417px;
            border-left: 1px solid #e5e5e5;
            padding: 0 9px;
            text-align: center;

            &:first-child {
                border: 0 none;
                padding-left: 32px;
            }

            a {
                text-decoration: none;
            }

            strong,
            span {
                display: block;
                font-family: $fontoswald;
                font-weight: 400;
                letter-spacing: -0.025em; /* 25 */
                color: #e0e0e0;
            }
        }

        .bullet_pic {
            position: relative;
            z-index: 12;
            display: block;
            margin-top: 61px;
            @include transition-duration(400ms);
            @include transition-property(transform);

            &.small {
                margin-top: 8px;
                margin-left: 11px;
            }

            &.large {
                margin-top: 67px;
                margin-left: 13px;
            }
        }

        .description {
            position: absolute;
            bottom: 35px;
            left: 0;
            z-index: 11;
            width: 100%;
            white-space: nowrap;
        }

        .size {
            font-size: 4.9375em; /* 79px */
            line-height: 1em; /* 79px */

            &.small {
                font-size: 1.9375em; /* 31px */
                line-height: 1em; /* 31px */
            }

            &.large {
                font-size: 5.4375em; /* 87px */
                line-height: 1em; /* 87px */
            }
        }

        .use {
            font-size: 1.75em; /* 28px */
            line-height: 1.2143em; /* 34px */
            text-transform: uppercase;

            &.small {
                font-size: 2.375em; /* 38px */
                line-height: 1em; /* 38px */
            }

            &.large {
                font-size: 2.5em; /* 40px */
                line-height: 1.1em; /* 44px */
            }
        }

        .weight {
            font-size: 2em; /* 32px */
            line-height: 1em; /* 32px */

            &.middle {
                font-size: 2.4375em; /* 39px */
                line-height: 1.0257em; /* 40px */
            }

            &.large {
                font-size: 2.5em; /* 40px */
                line-height: 1.025em; /* 41px */
            }
        }
    }
}

.mod_famous_blocks {
    position: relative;
    top: -30px;
    color: #fff;

    .title a {
        display: block;
        padding: 19px 0 18px;
        font-family: $fontoswald;
        font-size: 3.0625em; /* 49px */
        line-height: 1.6123em; /* 79px */
        text-align: center;
        text-transform: uppercase;
        color: #fff;
        background-color: #524741;
    }

    .map_teaser {
        overflow: hidden;
        position: relative;

        .page_turn {
            overflow: hidden;
            position: absolute;
            right: 0;
            bottom: 0;
            width: 130px;
            height: 130px;
            background: transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/23546/bg_map.jpg) no-repeat scroll bottom right;
            cursor: pointer;
            @include box-shadow(rgba(0, 0, 0, 0.1) 0 0 0 8px inset);
            @include transition-property(all);
            @include transition-duration(500ms);
        }

        .curve {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 130px;
            height: 130px;
            @include background-image(linear-gradient(left top, rgba(164,152,146,1) 0%,rgba(107,93,86,1) 46%,rgba(131,119,113,1) 48%,rgba(0,0,0,0.1) 50%,rgba(0,0,0,0.1) 53%,rgba(0,0,0,0) 55%));
            @include transition-property(all);
            @include transition-duration(500ms);
        }

        img {
            height: auto;
        }
    }

    .map {
        display: block;
        width: 100%;
        min-height: 635px;
        background: transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/23546/preloader.gif) no-repeat scroll center center;
    }

    .description {
        @include box-sizing(border-box);
        padding: 20px 23px 23px 26px;
        font-family: $fontmerriweather;
        font-size: 1.625em; /* 26px */
        font-weight: 300;
        line-height: 1.3462em; /* 35px */
        letter-spacing: -0.02em; /* -20 */
        background-color: #71625a;

        a {
            display: block;
            width: 200px;
            margin-top: 19px;
            font-size: 0.6923em; /* 18px nested */
            line-height: 1.9445em; /* 35px */
            color: #b8b1ad;
        }
    }
}

.mod_bottom_line {
    position: relative;
    top: -30px;
    float: left;
    width: 75%;
    padding-top: 169px;
    background: transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/23546/bg_deco_bottom_line.png) no-repeat scroll 0 0;
    background-size: 100% auto;

    &:after {
        position: absolute;
        top: 0;
        right: 0;
        z-index: -1;
        width: 1px;
        height: 620px;
        border-right: 1px solid #e5e5e5;
        content: "";
    }

    .title a {
        display: block;
        max-width: 97%;
        border-bottom: 21px solid #000;
        padding-bottom: 20px;
        font-family: $fontoswald;
        font-size: 5.125em; /* 82px */
        line-height: 1em; /* 82px */
        text-transform: uppercase;
        white-space: nowrap;
        color: #000;
    }

    .subheading a {
        display: block;
        max-width: 97%;
        margin-bottom: 15px;
        border-bottom: 3px solid #000;
        font-family: $fontoswald;
        font-size: 2.4375em; /* 39px */
        line-height: 2em; /* 78px */
        white-space: nowrap;
        color: #000;
    }

    .fact_list {
        padding-right: 4%;

        dt, dd {
            display: inline;
            font-family: $fontmerriweather;
            font-size: 1.375em; /* 22px */
            line-height: 1.3182em; /* 29px */
            letter-spacing: -0.02em; /* -20 */
        }

        dt {
           padding-right: 7px;
           font-weight: 700;

            &:before {
                position: relative;
                padding: 0 10px;
                text-align: center;
                content: "•";
            }

            &:first-child:before {
                padding: 0;
                content: "";
            }

            .notstrong {
                font-weight: 300;
            }
        }

        dd {
            font-weight: 300;
        }
    }
}

.mod_media_teaser {
    position: relative;
    top: -15px;
    float: right;
    width: 23.4375%; /* 225px */
    background-color: #3a83bb;

    .media_pic {
        position: relative;
        top: -67px;
        display: block;
        max-width: 187px;
        margin: 0 auto;
        @include transition-duration(400ms);
        @include transition-property(transform);

        &:after {
            position: absolute;
            bottom: -122px;
            left: -55px;
            z-index: 10;
            width: 298px;
            height: 190px;
            background: transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/23546/pseudo_shadow_media.png) no-repeat scroll 0 0;
            content: "";
        }

        img {
            position: relative;
            z-index: 11;
            display: block;
            width: 100%;
            height: auto;
            max-width: 187px;
        }
    }

    .teaser_header {
        position: relative;
        z-index: 11;
        width: 88%;
        margin: -48px auto 15px;
        border-bottom: 8px solid #619cc9;
        padding-bottom: 14px;
        font-family: $fontoswald;
        text-align: center;
        text-transform: uppercase;
    }

    .title a {
        font-size: 1.9375em; /* 31px */
        line-height: 1em; /* 31px */
        color: #fff;
    }

    .subheading a {
        font-size: 1.3125em; /* 21px */
        line-height: 1.4286em; /* 30px */
        white-space: nowrap;
        color: #fff;
    }

    .description {
        border-bottom: 2px dashed #234f70;
        padding: 0 6% 23px;
        font-family: $fontlora;
        font-style: italic;
        letter-spacing: -0.02em; /* -20 */
        color: #fff;
    }

    .rating {
        position: relative;
        height: 113px;
        border-top: 5px solid #3476a8;
        border-bottom: 5px solid #3476a8;
        padding: 0 6%;
        font-family: $fontoswald;

        .rating_link {
            display: block;
            width: 90px;
            margin: 16px 0 17px;
            font-size: 0.875em; /* 14px */
            line-height: 1.0714em; /* 15px */
            text-transform: uppercase;
            color: #75a8d0;

            span {
                display: block;
                font-size: 2.2857em; /* 32px nested */
                line-height: 1.0625em; /* 34px */
            }
        }

        .rating_number {
            position: absolute;
            top: 11px;
            right: 6px;
            font-size: 3.375em; /* 54px */
            font-weight: 400;
            line-height: 1em; /* 54px */
            color: #fff;
        }

        .meter {
            position: relative;
            width: 191px;
            height: 8px;
            margin-left: -1px;
            background-color: #619cc9;

            .value {
                display: block;
                width: 20%;
                height: 8px;
                background-color: #fff;
            }

            meter {
                opacity: 0;
                position: absolute;
                top: 0;
                left: 0;
                height: 8px;
                width: 100%;
            }
        }
    }

    .additional_info {
        border-top: 2px dashed #234f70;
        padding: 15px 5% 25px;
        font-family: $fontoswald;
        text-align: center;
        text-transform: uppercase;

        &:after {
            @include border-radius(13px 13px 0 0);
            position: absolute;
            bottom: -1px;
            left: 50%;
            width: 28px;
            height: 13px;
            margin-left: -14px;
            background-color: #fff;
            content: "";
        }

        .intro {
            position: relative;
            display: block;
            font-size: 0.875em; /* 14px */
            line-height: 1.6429em; /* 23px */
            color: #88aed1;

            &:before {
                position: absolute;
                bottom: 4px;
                left: 0;
                width: 20%;
                height: 13px;
                background-color: #619cc9;
                content: "";
            }

            &:after {
                position: absolute;
                right: 0;
                bottom: 4px;
                width: 20%;
                height: 13px;
                background-color: #619cc9;
                content: "";
            }
        }

        .venue {
            display: block;
            font-size: 1.6875em; /* 27px */
            font-style: normal;
            line-height: 1.2223em; /* 33px */
            color: #fff;
        }

        .country {
            display: block;
            font-size: 1.75em; /* 28px */
            line-height: 1.2143em; /* 34px */
            color: #88aed1;
        }

        .date {
            font-size: 2.4375em; /* 39px */
            line-height: 1.1026em; /* 43px */
            color: #fff;
        }
    }
}

.mod_overflow {
    position: relative;
    padding-top: 126px;

    &:after {
        position: absolute;
        top: -55px;
        right: -75px;
        left: -22px;
        z-index: 11;
        width: 1058px;
        height: 407px;
        background: transparent url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/23546/bg_overflow.png) no-repeat scroll center 0;
        content: "";

    	-webkit-animation-name: shake;
    	-moz-animation-name: shake;
        -ms-animation-name: shake;
        animation-name: shake;
    	-webkit-animation-duration: 6000ms;
    	-moz-animation-duration: 6000ms;
    	-ms-animation-duration: 6000ms;
    	animation-duration: 6000ms;
        -webkit-animation-timing-function: ease-in-out;
        -moz-animation-timing-function: ease-in-out;
        -ms-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite;
        -ms-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
    }

    &:hover:after {
        -webkit-animation-play-state: paused;
        -moz-animation-play-state: paused;
        -ms-animation-play-state: paused;
        animation-play-state: paused;
    }

    p {
        position: relative;
        z-index: 12;
        clear: right;
        font-family: $fontlora;
        font-size: 1em; /* 16px */
        font-style: italic;
        line-height: 1.625em; /* 26px */
        text-align: left;
        letter-spacing: -0.02em; /* -20 */
        color: #5e6c74;
    }

    p:first-child {
        @include transform(rotate(2.10deg));
        float: right;
        width: 72.9167%; /* 700px */
        margin-right: 15px;
        margin-bottom: -7px;
        text-align: right;
    }

    p:nth-child(2) {
        @include transform(rotate(-0.73deg));
        width: 69.6875%; /* 669px */
        margin-bottom: 29px;
        margin-left: 7px;
    }

    p:nth-child(3) {
        @include transform(rotate(0.94deg));
        width: 72.1875%; /* 693px */
        margin-left: 124px;
    }
}


/*
 * mediaqueries
 */

@media screen and (max-width: $break_large_desktop) {
    .page {
        overflow: hidden;
    }
}

/* desktop - small fluidness correctios */
@media screen and (max-width: $break_desktop) {

    /* modules */
    .mod_famous_blocks {

        .map {
            min-height: 530px;
        }

        .map_teaser {
            width: 100%;
            height: auto;
            background-size: cover;
        }
    }

    .mod_bottom_line {
        .title a,
        .subheading a {
            white-space: normal;
        }

        .subheading a {
            padding: 10px 0;
            line-height: 1.3em;
        }
    }
}

/* tablets and small desktops */
@media screen and (max-width: $break_tablet) {

    /* frame */
    .page {
        @include box-sizing(border-box);
        padding: 0 3%;

        &:before {
            height: 400px;
        }

        &:after {
            top: 400px;
            height: 350px;
        }
    }

    .header {
        max-height: 850px;

        .logo a {
            margin-left: 0;
            padding-top: 22px;
            font-size: 11em;
        }

        .episode {
            top: 40px;
            right: 0;
        }
    }

    .mod_teaser_barbie {
        top: 20px;
        width: 45%;
        margin: 0;
        font-size: 0.9em;

        .teaser_pic {
            width: 100%;
            margin-left: -25px;
        }

        .title a,
        .description {
            max-width: none;
            margin-left: 0;
            margin-top: 0;
            padding: 0;
        }

        .description {
            padding-right: 2%;
            padding-left: 0;
        }
    }

    .mod_feature {
        width: 48%;
        margin-top: -160px;
        padding-top: 20%;

        .feature_pic {
            top: 0;
            left: -20%;
            width: 140%;

            &:after {
                bottom: -19%;
                left: -5%;
                background-size: 58% auto;
            }
        }

        .wrapper {
            font-size: 0.8em;
        }

        .title {
            &:before {
                top: -10px;
                left: -11px;
                background-size: 65% auto;
            }
        }
    }

    .mod_afloat {
        @include clearfix;
        float: none;
        width: 100%;
        font-size: 1.1em;
        text-align: left;

        .description {
            float: left;
            width: 70%;
            padding-left: 0;
        }

        .deco_pic {
            top: -10px;
            left: 0;
            float: right;
            width: 30%;

            img {
                width: 70%;
                height: auto;
            }
        }
    }

    .mod_ammunition {
        float: none;
        width: 100%;

        .bullet_list {
            margin-bottom: 15px;

            .list_item {
                @include clearfix;
                width: 50%;
                min-height: 225px;
                border: 0 none;

                &:nth-child(2n+1) {
                    @include box-sizing(border-box);
                    border-right: 1px solid #e5e5e5;
                    padding-right: 10px;
                }

                .bullet_pic {
                    @include transform(scale(0.7));
                    float: left;
                    width: 45%;
                    margin-top: -20px;
                    text-align: left;

                    &.small {
                        @include transform(scale(0.6));
                        margin-top: -48px;
                    }
                }

                .description {
                    position: relative;
                    bottom: auto;
                    left: auto;
                    float: right;
                    width: 50%;
                }
            }
        }
    }

    .mod_famous_blocks {
        font-size: 0.8em;

        .map_teaser .page_turn,
        .map_teaser .curve {
            width: 100px;
            height: 100px;
        }

        .map {
            min-height: 374px;
        }
    }

    .mod_bottom_line {
        font-size: 0.9em;
        padding-top: 18.5%;

        .title a {
            border-bottom: 12px solid #000;
            font-size: 3.5em;
        }

        .subheading a {
            line-height: 1.2em;
        }

        .title a,
        .subheading a {
            white-space: normal;
        }

        .fact_list {
            @include hyphens;
            font-size: 0.9em;
        }
    }

    .mod_media_teaser {
        .media_pic {
            width: 95%;
            height: auto;

            &:after {
                left: -59%;
            }
        }

        .additional_info .intro:before,
        .additional_info .intro:after {
            height: 7px;
        }

        .rating {
            height: 95px;
            font-size: 0.7em;

            .meter {
                width: 100%;
            }
        }

        .teaser_header,
        .additional_info {
            font-size: 0.62em;
        }
    }

    .mod_overflow {
        top: -40px;

        &:after {
            top: -39px;
            right: 0;
            left: 0;
            background-position: 0 0;
            background-size: 72% auto;
            -webkit-animation-play-state: paused;
            -moz-animation-play-state: paused;
            -ms-animation-play-state: paused;
            animation-play-state: paused;
            -webkit-animation-fill-mode: forwards;
        }

        p,
        p:nth-child(n) {
            float: none;
            width: 100%;
            margin: 0 0 10px 0;
            padding: 0 1%;
            text-align: left;
            @include box-sizing(border-box);
            @include transform-origin(0);
            @include transform(rotate(0));
        }
    }
}

/* smartphones */
@media screen and (max-width: $break_mobile) {
    /* frame */
    .page {
        max-width: 440px;

        &:before {
            width: 100%;
            height: 180px;
        }

        &:after {
            top: 180px;
            width: 100%;
            height: 300px;
        }
    }

    .row aside,
    .row article {
        float: none;
        width: 100%;
    }


    .header .logo,
    .mod_teaser_barbie,
    .mod_feature {
        float: none;
        width: 100%;
        max-width: 100%;
    }

    .header {
        max-height: none;

       .logo a {
            text-align: center;

            span {
                display: inline;
            }
        }

        .episode {
            top: 14.5%;
            padding: 0 6px;
            background-color: #fff;
        }
    }

    /* modules */
    .mod_teaser_barbie {
        @include clearfix;
        margin: 60px 0 0 0;
        font-size: 0.8em;

        .teaser_pic {
            float: left;
            width: 54%;
            margin: 0 10px -10px 0;
        }

        .title a {
            overflow: hidden;
        }

        .title a,
        .description {
            text-align: left;
        }

        .description {
            padding-left: 6%;
        }
    }

    .mod_feature {
        margin-top: 0;
        padding-top: 42%;

        .feature_pic {
            top: 20px;
            left: 0;
            width: 100%;

            &:after {
                bottom: -19%;
                left: -5%;
                background-size: 58% auto;
            }
        }

        .wrapper {
            width: 96%;
            margin: 0;
            font-size: 0.6em;
        }

        .roofline {
            padding-left: 15px;
        }

        .title {
            padding-left: 10px;

            &:before {
                top: -10px;
                left: 13px;
                background-size: 55% auto;
            }
        }
    }

    .mod_afloat .deco_pic img {
        width: 115%;
    }

    .mod_ammunition .bullet_list .list_item {
        width: 100%;
        min-height: 200px;

        &:nth-child(n) {
            border: 0 none;
        }
    }

    .mod_famous_blocks {
        font-size: 0.65em;

        .map_teaser .page_turn,
        .map_teaser .curve {
            width: 80px;
            height: 80px;
        }

        .map {
            min-height: 199px;
        }
    }z

    .mod_bottom_line {
        font-size: 0.8em;
        padding-top: 24%;
    }

    .mod_media_teaser {
        top: 45px;

        .media_pic {
            width: 40%;
        }

        .teaser_header,
        .description,
        .rating,
        .additional_info {
            max-width: 210px;
            margin-right: auto;
            margin-left: auto;
            padding-right: 0;
            padding-left: 0;
            font-size: 1em;
        }

        .additional_info .intro:before,
        .additional_info .intro:after {
            height: 13px;
        }

        .rating {
            height: 113px;
        }
    }

    .mod_overflow {
        top: 30px;
    }
}

/* content aware mediaqueries */
@media screen and (max-width: 768px) {
    .header .logo a { font-size: 10em; }
}

@media screen and (max-width: 700px) {
    .header .logo a { font-size: 9em; }
}

@media screen and (max-width: 640px) {
    .header .logo a { font-size: 8em; }
}

@media screen and (max-width: $break_mobile) {
    .header .logo a { font-size: 6.7em; }
}

@media screen and (max-width: 430px) {
    .header .logo a { font-size: 6.6em; }
}

@media screen and (max-width: 420px) {
    .header .logo a { font-size: 6.2em; }
}

@media screen and (max-width: 395px) {
    .header .logo a { font-size: 5.7em; }
}

@media screen and (max-width: 359px) {
    .header .logo a { font-size: 4.8em; }
    .header .episode { top: 12%; }
}


/* animations */
@keyframes shake {
    50% { transform:rotate(2deg); }
}

@-moz-keyframes shake {
    50% { -moz-transform:rotate(2deg); }
}

@-o-keyframes shake {
    50% { transform:rotate(2deg); }
}

@-webkit-keyframes shake {
    50% { -webkit-transform:rotate(2deg); }
}

@keyframes width {
    0% { width: 0 }
    100% { width: 100%; }
}

@-moz-keyframes width {
    0% { width: 0 }
    100% { width: 100%; }
}

@-o-keyframes width {
    0% { width: 0 }
    100% { width: 100%; }
}

@-webkit-keyframes width {
    0% { width: 0 }
    100% { width: 100%; }
}
              
            
!

JS

              
                // make sure browsers are aware of the main element
document.createElement('main');

// initialize project object
window.project = (window.project) ? window.project : {};

var Project = function() {

    var that = this;

    // variables
    this.pageTurnSpeed = 1000;
    this.ratingBar = null;
    this.ratingBarSpeed = 2500;
    this.ratingOffset = 0;
    this.ratingShown = false;

    // initialize
    this.init = function() {
        that.mapInit();
        that.ratingInit();
    };

    // map revelation part
    this.mapInit = function() {
        $('.js_page_turn').on('click keydown', function(e) {
            if (e.type === 'click' || (e.type === 'keydown' && (e.which === 13 || e.which === 37 || e.which === 38))) {
                e.preventDefault();

                // variables
                var $this = $(this);
                var curve = $this.find('.js_curve');
                var map = $this.parent();
                var width = map.width();
                var height = map.height();

                // disable transition
                $this.addClass('notransition');
                curve.addClass('notransition');

                // animate the page turn effect and load google map iframe
                if (Modernizr.touch) {
                    // css3 transition for touch devices
                    $this.css({
                        '-webkit-transition-property': 'all',
                        '-moz-transition-property': 'all',
                        '-o-transition-property': 'all',
                        'transition-property': 'all',
                        '-webkit-transition-duration': that.pageTurnSpeed + 'ms',
                        '-moz-transition-duration': that.pageTurnSpeed + 'ms',
                        '-o-transition-duration': that.pageTurnSpeed + 'ms',
                        'transition-duration': that.pageTurnSpeed + 'ms',
                        'width': (2 * width) + 'px',
                        'height': (2 * width) + 'px'
                    });
                    curve.css({
                        '-webkit-transition-property': 'all',
                        '-moz-transition-property': 'all',
                        '-o-transition-property': 'all',
                        'transition-property': 'all',
                        '-webkit-transition-duration': that.pageTurnSpeed + 'ms',
                        '-moz-transition-duration': that.pageTurnSpeed + 'ms',
                        '-o-transition-duration': that.pageTurnSpeed + 'ms',
                        'transition-duration': that.pageTurnSpeed + 'ms',
                        'width': (2 * width) + 'px',
                        'height': (2 * width) + 'px'}).on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function() {
                        map.replaceWith('<iframe class="map" width="' + width + '" height="' + height + '" frameborder="0" allowtransparency="true" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;q=Abbey+Road+Studios,+Abbey+Road,+London,+United+Kingdom&amp;z=16&amp;iwloc=near&amp;output=embed"></iframe>');
                    });
                } else {
                    // js animation for non-touch devices
                    $this.animate({
                        'width': (2 * width) + 'px',
                        'height': (2 * width) + 'px'
                    }, that.pageTurnSpeed);
                    curve.animate({
                        'width': (2 * width) + 'px',
                        'height': (2 * width) + 'px'
                    }, that.pageTurnSpeed, function() {
                        map.replaceWith('<iframe class="map" width="' + width + '" height="' + height + '" frameborder="0" allowtransparency="true" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;q=Abbey+Road+Studios,+Abbey+Road,+London,+United+Kingdom&amp;z=16&amp;iwloc=near&amp;output=embed"></iframe>');
                    });
                }

                // unbind events
                $this.off('click keydown');
            }
        });
    };

    // rating revelation part
    this.ratingInit = function() {
        // variables
        var rating = $('.js_rating');
        var rating_number = rating.find('.js_rating_number');
        var meter = rating.find('.js_meter');
        var meter_bar = meter.find('.js_bar');
        var meter_semantic = meter.find('meter');
        var meter_initial_value = meter_semantic.attr('value');
        var $window = $(window);

        // global
        that.ratingBar = rating_number;
        that.ratingOffset = rating_number.offset().top;

        // reset
        rating_number.text('%');
        meter.attr('aria-valuenow', 0);
        meter_bar.css('width', 0);
        meter_semantic.attr('value', 0);

        // prepare on scroll trigger
        $window.on('scroll', function() {
            // rating revelation
            if ($window.scrollTop() + $window.height() > that.ratingOffset) {
                if (that.ratingShown === false) {
                    // flag as shown
                    that.ratingShown = true;

                    // animate
                    meter_bar.animate({
                        'width': meter_initial_value + '%'
                    }, {
                        'duration': that.ratingBarSpeed,
                        'step': function(step) {
                            // update values
                            var fixed = step.toFixed();
                            rating_number.text(fixed + '%');
                            meter.attr('aria-valuenow', fixed);
                            meter_semantic.attr('value', fixed);
                        }
                    });
                }
            } else {
                if (that.ratingShown === true) {
                    // flag as not shown
                    that.ratingShown = false;

                    // stop animation
                    meter_bar.stop(true, true);

                    // reset
                    rating_number.text('%');
                    meter.attr('aria-valuenow', 0);
                    meter_bar.css('width', 0);
                    meter_semantic.attr('value', 0);
                }
            }
        });
    };

    // offset correction
    this.offsetCorrection = function() {
        that.ratingOffset = that.ratingBar.offset().top;
    };

    // on DOM ready
    $(document).ready(function() {
        that.init();
    });

    // on window loaded
    $(window).load(function() {
        that.offsetCorrection();
    });
};

window.project = new Project();
              
            
!
999px

Console