Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

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

+ add another resource

Packages

Add Packages

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

Behavior

Auto Save

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

Auto-Updating Preview

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

Format on Save

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

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                <header class="page-header" role="banner">
	<div class="wrapper">

		<div class="logo">
			<span class="logo__chunk js_fit" data-k="0.172">CSS</span>
			<span class="logo__chunk js_fit" data-k="0.172">Off</span>
		</div>

		<p class="volume">
			Volume 3 - <time class="volume__date" datetime="2013-09-01">September 2013</time>
		</p>

	</div>
</header>

<main role="main">
	<div class="wrapper">

		<article class="featured-content" tabindex="1">
			<header class="featured-content__header">
				<h1 class="featured-content__title" data-category="Feature">Positioning relatives</h1>
				<img class="featured-content__image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/66450/old-photo_1.jpg" alt="Old photo">
			</header>
			<div class="featured-content__body">
				<p>In 1958, 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>

		<figure class="promoted-item" tabindex="2">
			<ul class="promoted-item__thumbs" tabindex="3">
				<li class="promoted-item__thumb promoted-item__thumb--a">
					<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/66450/barbie-front.jpg" alt="Barbie box - front">
				</li>
				<li class="promoted-item__thumb promoted-item__thumb--b">
					<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/66450/barbie-interior.jpg" alt="Barbie box - interior">
				</li>
			</ul>
			<figcaption class="promoted-item__desc">
				<h3 class="promoted-item__name">Box Model</h3>
				<p>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>
			</figcaption>
		</figure>

	</div>

	<div class="wrapper">
	
		<section class="showcase" tabindex="4">
			<header class="showcase__header">
				<h2 class="showcase__title">List style: bullets.</h2>
				<p class="showcase__tagline">A round-up of popular ammunition</p>
			</header>

			<ul class="showcase__items">
				<li class="showcase__item">
					<figure class="bullet" itemscope itemtype="http://schema.org/Product" tabindex="5">
						<div class="bullet__thumb">
							<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/66450/Remington-69gr.png" alt="Picture of .223 Remington 69gr BTHP bullet" itemprop="image">
						</div>
						<figcaption class="bullet__params" itemprop="name">
							<span class="bullet__param js_fit" data-k="0.17">.223</span>
							<span class="bullet__param js_fit" data-k="0.47">Remington</span>
							<span class="bullet__param js_fit" data-k="0.42">
								69<abbr class="unit" title="gram">gr</abbr> <abbr title="Boat Tailed Hollow Points">BTHP</abbr>
							</span>
						</figcaption>
					</figure>
				</li>
				<li class="showcase__item">
					<figure class="bullet" itemscope itemtype="http://schema.org/Product" tabindex="6">
						<div class="bullet__thumb">
							<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/66450/Winchester-168gr.png" alt="Picture of .308 Winchester 168gr BTHP bullet" itemprop="image">
						</div>
						<figcaption class="bullet__params" itemprop="name">
							<span class="bullet__param js_fit" data-k="0.175">.308</span>
							<span class="bullet__param js_fit" data-k="0.51">Winchester</span>
							<span class="bullet__param js_fit" data-k="0.45">
								168<abbr class="unit" title="gram">gr</abbr> <abbr title="Boat Tailed Hollow Points">BTHP</abbr>
							</span>
						</figcaption>
					</figure>
				</li>
				<li class="showcase__item">
					<figure class="bullet" itemscope itemtype="http://schema.org/Product" tabindex="7">
						<div class="bullet__thumb">
							<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/66450/Russian-154gr.png" alt="Picture of 7.62×39mm Russian 154gr JSP bullet" itemprop="image">
						</div>
						<figcaption class="bullet__params" itemprop="name">
							<span class="bullet__param js_fit" data-k="0.45">7.62×39<abbr class="unit" title="millimeter">mm</abbr></span>
							<span class="bullet__param js_fit" data-k="0.36">Russian</span>
							<span class="bullet__param js_fit" data-k="0.38">
								154<abbr class="unit" title="gram">gr</abbr> <abbr title="Jacketed Soft Point">JSP</abbr>
							</span>
						</figcaption>
					</figure>
				</li>
				<li class="showcase__item">
					<figure class="bullet" itemscope itemtype="http://schema.org/Product" tabindex="8">
						<div class="bullet__thumb">
							<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/66450/Thumper-220gr.png" alt="Picture of 7.62 Thumper 220gr RN bullet" itemprop="image">
						</div>
						<figcaption class="bullet__params" itemprop="name">
							<span class="bullet__param js_fit" data-k="0.17">7.62</span>
							<span class="bullet__param js_fit" data-k="0.39">Thumper</span>
							<span class="bullet__param js_fit" data-k="0.36">
								220<abbr class="unit" title="gram">gr</abbr> <abbr title="Round Nose">RN</abbr>
							</span>
						</figcaption>
					</figure>
				</li>
				<li class="showcase__item">
					<figure class="bullet" itemscope itemtype="http://schema.org/Product" tabindex="9">
						<div class="bullet__thumb">
							<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/66450/Thumper-240gr.png" alt="Picture of 7.62 Thumper 240gr BTHP bullet" itemprop="image">
						</div>
						<figcaption class="bullet__params" itemprop="name">
							<span class="bullet__param js_fit" data-k="0.17">7.62</span>
							<span class="bullet__param js_fit" data-k="0.39">Thumper</span>
							<span class="bullet__param js_fit" data-k="0.47">
								240<abbr class="unit" title="gram">gr</abbr> <abbr title="Boat Tailed Hollow Points">BTHP</abbr>
							</span>
						</figcaption>
					</figure>
				</li>
			</ul>
		</section>

		<aside class="related-content" tabindex="10">
			<h3 class="related-content__title">Staying afloat</h3>
			<div class="related-content__body">
				<p>	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>
			</div>
			<div class="related-content__thumb">
				<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/66450/boots_1.png" alt="Picture of green, rubber boots.">
			</div>
		</aside>

	</div>


	<div class="wrapper">

		<section class="featured-location" tabindex="11">
			<h1 class="featured-location__title">Displaying (famous) blocks</h1>

			<div class="location">
				<div id="map" class="location__map hidden js_map"></div>
				<div class="location__image">
					<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/66450/abbey-road_1.jpg" alt="Abbey Road">
				</div>
				<a class="location__toggle hidden js_map-toggle" href="#map" role="button" aria-label="Toggle map" tabindex="12"></a>
				<div class="location__preloader hidden js_map-preloader"></div>
			</div>

			<div class="featured-location__desc">
				<p>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.</p>
				<p>
					<a class="featured-location__source" href="https://goo.gl/h44dc9" target="_blank" tabindex="13">Photo: goo.gl/h44dc9</a>
				</p>
			</div>
		</section>

	</div>

	<div class="wrapper">

		<article class="secondary-content" tabindex="14">
			<header class="secondary-content__header">
				<img class="secondary-content__thumb" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/66450/faces_1.jpg" alt="Picure of people upside down">
				<h1 class="secondary-content__title js_fit" data-k="0.86">Border Bottom Line</h1>
				<p class="secondary-content__tagline js_fit" data-k="1.8">Awful immigration laws from around the world.</p>
			</header>
			<div class="secondary-content__body">
				<ul>
					<li><em>Italy</em> penalizes illegal immigrants with a fine of <abbr title="EUR">&euro;</abbr>5,000-10,000 and allows immigration officials to detain them for up to 6 months.</li>
					<li><em>Switzerland</em> immediately deports all convicted criminals from other countries and potentially even their family members.</li>
					<li><em>Australia</em> detains all non-citizens without a valid visa.</li>
					<li><em>Japan</em> is allowed to pay <abbr title="US dollar">$</abbr>3,000 to each unemployed Latin American immigrant of Japanese descent and <abbr title="US Dollar">$</abbr>2,000 to each of that unemployed worker’s family members to return to their country of origin.</li>
					<li>The <em>United Arab Emirates</em> 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.</li>
				</ul>
			</div>
		</article>

		<aside class="featured-movie" itemscope itemtype="http://schema.org/Movie" tabindex="15">
			<div class="featured-movie__thumb">
				<img itemprop="image" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/66450/transformers.png" alt="Transformers Revenge of the fallen - Blu-ray">
			</div>
			<h3 class="featured-movie__title" itemprop="name">
				<span class="js_fit" data-k="0.64">Transformers</span>
				<span class="js_fit" data-k="0.93">Revenge of the fallen</span>
			</h3>
			<blockquote class="featured-movie__review" itemprop="review" itemscope itemtype="http://schema.org/Review">
				<span itemprop="description">A noisy, underplotted, and overlong special effects extravaganza that lacks a human touch.</span>
			</blockquote>
			<dl class="featured-movie__rating" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
				<dt>
					<span class="js_fit" data-k="0.65">Rotten Tomato</span>
					<span class="js_fit" data-k="0.29">Rating</span>
				</dt>
				<dd class="js_fit" data-k="0.20">
					<meta itemprop="worstRating" content="0">
					<span itemprop="ratingValue">20</span>%
					<meta itemprop="bestRating" content="100">
				</dd>
				<dd>
					<meter class="rt-rank js_rt-rank" min="0" max="100" value="20" title="Rotten">20%</meter>
				</dd>
			</dl>
			<dl class="featured-movie__premiere">
				<dt>
					<span>World premiere</span>
				</dt>
				<dd class="js_fit" data-k="0.75">Den Haag theatre</dd>
				<dd class="js_fit" data-k="0.72">The netherlands</dd>
				<dd class="js_fit" data-k="0.51">
					<time datetime="2011-06-13">June 23, 2011</time>
				</dd>
			</dl>
		</aside>

	</div>

	<section class="featured-quotes" tabindex="16">
		<div class="wrapper">

			<h2 class="featured-quotes__title">Overflow</h2>
			
			<blockquote class="featured-quotes__item">On the night of <time datetime="1975-08-08">Aug 8, 1975</time>, a line of people frantically piled sandbags atop Henan Province's <em>Banqiao Dam</em> 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.</blockquote>
			
			<blockquote class="featured-quotes__item">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!"</blockquote>
			
			<blockquote class="featured-quotes__item">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.</blockquote>

		</div>
	</section>

</main>

<footer class="page-footer" role="contentinfo">
	<div class="wrapper">

		<div class="about" itemscope itemtype="http://schema.org/Organization">
			<p class="copyright">
				<span itemprop="name">2013 CSSOff,</span>
				Volume 3
			</p>
			<address class="contact" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
				<span itemprop="streetAddress"><em>Route Gregory</em>, Building 31</span>
				<span>
					<span itemprop="postalCode">01630</span>
					<span itemprop="addressLocality">Prévessin-Moëns, France</span>
				</span>
				<span itemprop="telephone">+41 22 767 61 11</span>
			</address>
		</div>

	</div>
</footer>

<!--[if lt IE 9]>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/66450/es5-shim.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/66450/es5-sham.min.js"></script>
<![endif]-->
              
            
!

CSS

              
                /* --------------------[ 0. Index ] */

/*

	 1. Settings
	 2. Helpers
	 3. Base styles
	 4. Header
	 5. Footer
	 6. Featured content
	 7. Promoted item
	 8. Showcase
	 9. Related content
	10. Featured location
	11. Secondary content
	12. Featured movie
	13. Featured quotes

*/


/* --------------------[ 1. Settings ] */

/* Browser support */

$legacy-ie-support   : true; /* Set me to false, please. */
$legacy-ie-classname : oldie;

/* Layout */

$bp-narrow : 35.5em bp-narrow; 
$bp-medium : 48em bp-medium;
$bp-wide   : 61em bp-wide;

/* Typography */

$base-font-size     : 10;
$font-size-fallback : true;

/* Colors */

$black        : #000;
$blue         : #3a83bb;
$blue-dark    : #234f70;
$blue-dirty   : #a0b4c0;
$blue-light   : #619cc9;
$brown        : #71625a;
$brown-dark   : #524741;
$gold         : #fdcd84;
$gold-dark    : #a97d35;
$gold-dirty   : #cbb8a0;
$gray         : #6e6c77;
$gray-dark    : #5e6c74;
$gray-darker  : #464646;
$gray-light   : #989898;
$gray-lighter : #e0e0e0;
$green        : #24795a;
$pink         : #df008b;
$purple       : #cdc9dd;
$purple-light : #d9d5e5;
$yellow       : #e0c167;
$white        : #fff;


/* --------------------[ 2. Helpers ] */

/* Misc */

%cf {

	&:before,
	&:after {
		content: " ";
		display: table;
	}

	&:after {
		clear: both;
	}
}

%ir {
	overflow: hidden;
	border: 0;
	background-color: transparent;

	&:before,
	&:after {
		content: "";
	}

	&:before {
		display: block;
		width: 0;
		height: 150%;
	}
}

%cover {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

@mixin visually-hidden {
	position: absolute;
	left: -99999px;
	top: -99999px;
}

%visually-hidden {
	@include visually-hidden;
}

.hidden {
	display: none;
}

/* Layout */

@mixin at-breakpoint-mq($w) {
	@media screen and (min-width: $w) {
		@content;
	}
}

@mixin at-breakpoint-legacy($c) {
	.#{$c} & {
		@content;
	}
}

@mixin at-breakpoint($bp) {
	@include at-breakpoint-mq(nth($bp, 1)) {
		@content;
	}

	@if legacy-ie-support {
		@include at-breakpoint-legacy(nth($bp, 2)) {
			@content;
		}
	}
}

@mixin at-narrow {
	@include at-breakpoint($bp-narrow) {
		@content;
	}
}

@mixin at-medium {
	@include at-breakpoint($bp-medium) {
		@content;
	}
}

@mixin at-wide {
	@include at-breakpoint($bp-wide) {
		@content;
	}
}

/* Fonts */

@mixin font-size( $size: 1 ) {
	@if $font-size-fallback {
		font-size: $base-font-size * $size * 1px;
	}
	font-size: $base-font-size / 16 * $size * 1rem;
}

%font-lato-regular {
	font-weight: 400;
	font-style: normal;
	font-family: Lato, sans-serif;
}

%font-lato-hairline {
	font-weight: 100;
	font-style: normal;
	font-family: Lato, sans-serif;
}

%font-oswald-regular {
	font-weight: 400;
	font-style: normal;
	font-family: Oswald, sans-serif;
}

%font-merriweather-regular {
	font-weight: 400;
	font-style: normal;
	font-family: Merriweather, serif;
}

%font-merriweather-light {
	font-weight: 300;
	font-style: normal;
	font-family: Merriweather, serif;
}

%font-lora-italic {
	font-weight: 400;
	font-style: italic;
	font-family: Lora, serif;
}

%font-lora-bold-italic {
	font-weight: 700;
	font-style: italic;
	font-family: Lora, serif;
}

/* Browser support */

@mixin legacy-ie {
	.#{$legacy-ie-classname} & {
		@content;
	}
}


/* --------------------[ 3. Base styles ] */

html {
	overflow-x: hidden;
	font-size: 100%;
}

body {
	@extend %font-lato-regular;

	overflow-x: hidden;
	line-height: 1.318;
	color: $black;
	background-color: $white;
}

a {
	text-decoration: none;
	color: $blue;

	&:hover {
		text-decoration: underline;
	}
}

img {
	max-width: 100%;
	vertical-align: middle;
}

abbr[title] {
	border: 0;
}

::-moz-selection {
	text-shadow: none;
	color: $white;
	background-color: $pink;
}

::selection {
	text-shadow: none;
	color: $white;
	background-color: $pink;
}

.wrapper {
	@extend %cf;

	max-width: 60em;
	padding: 0 .5em;
	margin: 0 auto;
	position: relative;
}


/* --------------------[ 4. Header ] */

.page-header {
	padding: .5em 0;
	margin-bottom: .5em;
	background-color: $purple;

	@include at-narrow {
		padding: 0;
		text-align: left;
		background: none;
	}
}

.logo {
	@extend %font-lato-hairline;

	width: 30%;
	margin: 0 auto .5em;
	line-height: .82;
	text-transform: uppercase;
	white-space: nowrap;
	color: $white;

	@include at-narrow {
		width: 45%;
		padding-top: 2em;
		margin: 0;
		position: relative;

		&:before {
			content: "";
			width: 1000%;
			padding-top: 226%;
			position: absolute;
			right: -.5%;
			top: 0;
			z-index: 0;
			background-color: $purple;
			background-image: -webkit-linear-gradient(top, $purple 64%, $purple-light 64%, $purple);
			background-image: linear-gradient(to bottom, $purple 64%, $purple-light 64%, $purple);
		}
	}

	@include at-medium {

		&:before {
			padding-top: 218%;
			background-image: -webkit-linear-gradient(top, $purple 70%, $purple-light 70%, $purple);
			background-image: linear-gradient(to bottom, $purple 70%, $purple-light 70%, $purple);
		}
	}

	@include at-wide {
		width: 50%;
		margin: 0 0 0 -5%;

		&:before {
			padding-top: 211%;
		}
	}
}

	.logo__chunk {
		display: block;
		position: relative;
		z-index: 10;
		letter-spacing: -.04em;

		&:first-child {
			letter-spacing: .06em;
		}
	}

.volume {
	@extend %font-lora-italic;

	@include font-size(1.2);

	margin: 0;
	letter-spacing: .2em;
	text-transform: uppercase;
	white-space: nowrap;
	text-align: center;
	color: $white;

	@include at-narrow {
		position: absolute;
		right: 1em;
		top: 28%;
		color: $gray-light;
	}
}

/* --------------------[ 5. Footer ] */

.page-footer {
	text-align: center;
	color: $gray-light;

	@include at-narrow {
		text-align: left;
	}
}

.about {
	@extend %cf;

	padding: 1.5em 0 4em;
	border-top: 1px solid $gray-lighter;
}

.copyright {
	@include font-size(1.7);

	margin: 0 0 .5em;

	> span {
		color: $black;
	}

	@include at-narrow {
		float: left;
	}
}

.contact {
	@extend %font-merriweather-light;

	@include font-size(1.3);

	> span {
		display: block;
	}

	em {
		font-style: normal;
		font-weight: 900;
	}

	@include at-narrow {
		float: right;
		text-align: right;
	}
}

/* --------------------[ 6. Featured content ] */

.featured-content {
	margin-bottom: 2em;

	@include at-narrow {
		width: 52%;
		margin: -6em 0 1em;
		float: right;
	}

	/* This might not be the prettiest solution... */
	@if $legacy-ie-support {
		.oldie.bp-narrow & {
			margin-top: -10em;
		}
	
		.oldie.bp-medium & {
			margin-top: -14em;
		}

		.oldie.bp-wide & {
			margin-top: -20em;
		}
	}
}

	.featured-content__header {
		position: relative;

		@include at-narrow {

			&:after {
				content: "";
				height: .000001em;
				position: absolute;
				left: -15%;
				right: 40%;
				bottom: 0;
				box-shadow: 0 0 2em .5em rgba(0, 0, 0, .6);
			}
		}

		@include at-wide {

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

		.featured-content__title {
			@extend %font-oswald-regular;

			@include font-size(3);

			margin: 0;
			position: absolute;
			left: .25em;
			right: .25em;
			bottom: .25em;
			z-index: 2;
			line-height: 1;
			text-transform: uppercase;
			color: $gold;

			&:before {
				@extend %font-merriweather-light;

				@include font-size(1.2);
				
				content: attr(data-category);
				display: block;
				margin-bottom: .25em;
				letter-spacing: .2em;
				color: $gold-dirty;

				@include at-medium {
					@include font-size(1.3);
				}
			}

			@include at-narrow {
				@include font-size(4.5);

				left: 0;
				right: 0;
				bottom: 0;
			}

			@include at-medium {
				@include font-size(6);
			}

			@include at-wide {
				@include font-size(7.5);
			}
		}

		.featured-content__image {
			position: relative;
			z-index: 1;

			@include at-narrow {
				-webkit-transform: translate(0%, -24%) rotate(-3deg) scale(1.32);
				-ms-transform: translate(0%, -24%) rotate(-3deg) scale(1.32);
				transform: translate(0%, -24%) rotate(-3deg) scale(1.32);
			}

			@include at-medium {
				-webkit-transform: translate(9%, -31%) rotate(-3deg) scale(1.45);
				-ms-transform: translate(9%, -31%) rotate(-3deg) scale(1.45);
				transform: translate(9%, -31%) rotate(-3deg) scale(1.45);
			}

			@include at-wide {
				-webkit-transform: translate(4%, -37%) rotate(-3deg) scale(1.6);
				-ms-transform: translate(4%, -37%) rotate(-3deg) scale(1.6);
				transform: translate(4%, -37%) rotate(-3deg) scale(1.6);
			}
		}

	.featured-content__body {
		@extend %font-merriweather-regular;

		word-wrap: break-word;

		@include at-narrow {
			@include font-size(1.8);
		}

		@include at-medium {
			@include font-size(2.1);
		}

		@include at-wide {
			@include font-size(2.5);
		}
	}


/* --------------------[ 7. Promoted item ] */

.promoted-item {
	padding: 1em;
	margin: 0 -.5em 2em;
	background-color: $purple-light;

	@include at-narrow {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		width: 44%;
		padding: 0 1em;
		margin: -2em 0 1em;
		float: left;
		background: none;
	}

	@include at-wide {
		padding: 0 1.25em;
	}
}

	.promoted-item__thumbs {
		padding-top: 50%;
		margin: 0;
		position: relative;
		z-index: 11;
		list-style: none;
    -webkit-transform: translateZ(0);

		@include at-narrow {
			margin: 0 -1em .25em;
			padding-top: 73%;
		}

		@include at-wide {
			padding-top: 84%;
			margin: 0 -1.25em .25em;
			right: 5.5em;
		}
	}

		.promoted-item__thumb {
			max-width: 28%;
			padding: 1%;
			position: absolute;
			border-radius: 1%;
			background-color: $white;
			box-shadow: 0 10px 10px -5px rgba(0, 0, 0, .4);
			-webkit-transition: all .3s;
			transition: all .3s;

			@include at-narrow {
				max-width: 38%;
			}

			@include at-wide {
				max-width: 45%;
			}
		}

		.promoted-item__thumb--a {
			left: 24%;
			top: 0;

			:hover > &,
			:focus > & {
				left: 19%;
				-webkit-transform: rotate(-2deg);
				-ms-transform: rotate(-2deg);
				transform: rotate(-2deg);

				@include at-narrow {
					left: 10%;
				}

				@include at-wide {
					left: 3%;
				}
			}

			@include at-narrow {
				left: 15%;
			}

			@include at-wide {
				left: 9%;
			}
		}

		.promoted-item__thumb--b {
			left: 47%;
			top: 5%;

			:hover > &,
			:focus > & {
				left: 52%;
				-webkit-transform: rotate(2deg);
				-ms-transform: rotate(2deg);
				transform: rotate(2deg);
			}
		}

	.promoted-item__desc {
		text-align: center;
		word-wrap: break-word;
		color: $gray;

		p {
			margin: .75em 0;
		}

		@include at-medium {
			@include font-size(1.9);
		}
	}

		.promoted-item__name {
			@extend %font-lora-bold-italic;

			@include font-size(3);

			margin: 0;
			color: $gray-darker;

			@include at-medium {
				@include font-size(3.6);
			}
		}


/* --------------------[ 8. Showcase ] */

.showcase {
	margin-bottom: 1.5em;

	@include at-wide {
		width: 83.33%;
		float: right;
	}
}

	.showcase__header {
		padding: .75em 0;
		border-top: 1px solid $gray-lighter;
		border-bottom: 1px solid $gray-lighter;
		text-transform: uppercase;
		text-align: center;

		@include at-narrow {
			margin-bottom: 1em;
		}
	}

		.showcase__title {
			@extend %font-oswald-regular;
			
			@include font-size(1.5);

			margin: 0 0 .5em;
			color: $gold-dark;

			@include at-narrow {
				display: inline;
				margin-right: .5em;
				vertical-align: middle;
			}
		}

		.showcase__tagline {
			@extend %font-oswald-regular;

			@include font-size(1.2);

			margin: 0;
			letter-spacing: .1em;
			color: $yellow;

			@include at-narrow {
				display: inline;
				vertical-align: middle;
			}
		}

	.showcase__items {
		@extend %cf;

		padding: 0;
		margin: 0;
		list-style: none;
	}

		.showcase__item {
			border: 1px solid $gray-lighter;
			border-width: 1px 0 0;

			&:first-child {
				border: 0;
			}
			
			@include at-narrow {
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
				width: 20%;
				float: left;
				border-width: 0 0 0 1px;
			}
		}


.bullet {
	@extend %cf;

	padding: .75em 0;
  margin: 0;

	@include at-narrow {
		padding: 261% 0 0;
		position: relative;
	}
}

	.bullet__thumb {
		width: 50%;
		padding-top: 42%;
		float: left;
		position: relative;

		> img {
			@extend %cover;

			max-height: 100%;
			margin: auto;
		}

		@include at-narrow {
			width: auto;
			padding: 185% 0 0;
			float: none;
			position: absolute;
			left: .25em;
			right: .25em;
			top: .5em;
			z-index: 2;
			-webkit-transition: top .3s;
			transition: top .3s;

			> img {
				margin: 0 auto;
				top: auto;
			}
		}

		:hover > &,
		:focus > & {
			@include at-narrow {
				top: -.25em;
			}
		}
	}

	.bullet__params {
		@extend %font-oswald-regular;

		width: 40%;
		margin: 0 5% 0 0;
		float: right;
		text-transform: uppercase;
		white-space: nowrap;
		color: $gray-lighter;

		.unit {
			text-transform: none;
		}

		@include at-narrow {
			width: auto;
			margin: 0;
			float: none;
			position: absolute;
			left: .5em;
			right: .5em;
			bottom: 1em;
			z-index: 1;
			-webkit-transition-property: bottom, color;
			transition-property: bottom, color;
			-webkit-transition-duration: .3s;
			transition-duration: .3s;
		}

		:hover > &,
		:focus > & {
			@include at-narrow {
				bottom: .25em;
				color: $black;
			}
		}
	}

		.bullet__param {
			display: block;
			line-height: 1;
		}


/* --------------------[ 9. Related content ] */

.related-content {
	@extend %cf;
	
	@include at-wide {
		width: 14.58%;
		float: left;
		text-align: right;
	}
}

	.related-content__title {
		@extend %font-oswald-regular;

		@include font-size(2.1);

		margin: 0;
		color: $green;
	}

	.related-content__body {
		@include font-size(1.4);

		line-height: 1.357;
		word-wrap: break-word;
		color: $gray-darker;

		p {
			margin: .5em 0;
		}

		@include at-narrow {
			width: 68%;
			float: left;
		}

		@include at-wide {
			width: auto;
			margin: 0 0 2em 1em;
			float: none;
		}
	}

	.related-content__thumb {
		margin-bottom: -.75em;
		position: relative;
		z-index: 2;
		text-align: center;

		@include at-narrow {
			width: 30%;
			margin: -2em 0 -.75em;
			float: right;
		}

		@include at-wide {
			width: auto;
			margin: 0 -.5em -.75em;
			float: none;
			text-align: right;
		}
	}


/* --------------------[ 10. Featured location ] */

.featured-location {
	margin: 0 -.5em;
	color: $white;
	background-color: $brown;

	@include at-narrow {
		margin: 0;
	}
}

	.featured-location__title {
		@extend %font-oswald-regular;

		@include font-size(2);

		padding: .69em .5em;
		margin: 0;
		line-height: 1;
		text-align: center;
		text-transform: uppercase;
		background-color: $brown-dark;

		@include at-narrow {
			@include font-size(3);
		}

		@include at-medium {
			@include font-size(4.9);
		}
	}

	.featured-location__desc {
		@extend %font-merriweather-light;
		
		padding: 0 .75em;
		overflow: hidden;

		p {
			margin: .75em 0;
		}

		@include at-narrow {
			@include font-size(1.8);
		}
		
		@include at-medium {
			@include font-size(2.6);
		}
	}

		.featured-location__source {
			@include font-size(1.4);

			color: $white;
			opacity: 0.5;

			@include legacy-ie {
				display: inline-block;
				filter: alpha(opacity=50);
			}

			@include at-medium {
				@include font-size(1.8);
			}
		}

.location {
	position: relative;

}

	.location__image {
		overflow: hidden;
		position: relative;
		z-index: 1;

		> img {
			box-shadow: 0 .5em rgba(0, 0, 0, .2) inset;
		}

		&:before {
			content: "";
			width: 100%;
			height: .5em;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 2;
			background-color: rgba(0, 0, 0, .1);
		}
	}

	.location__map {
		@extend %cover;

		z-index: 2;
		background-color: $white;

		img {
			max-width: none;
		}
	}

	.location__toggle {
		position: absolute;
		right: 0;
		z-index: 3;
		-webkit-touch-callout: none;
		cursor: pointer;
	}

	.location__toggle--show {
		bottom: 0;
		background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/66450/map-dummy.png) no-repeat 100% 100%;
		box-shadow: -.5em -.5em rgba(0, 0, 0, .1) inset;
		-webkit-transition-property: width, height;
		transition-property: width, height;
		-webkit-transition-duration: .3s;
		transition-duration: .3s;

		&:before {
			content: "";
			position: absolute;
			left: 0;
			top: 0;
		}

		.cssgradients & {
			width: 13.5%;
			height: 20.4%;

			&:before {
				width: 100%;
				height: 100%;
				background-image: -webkit-linear-gradient(-45deg, lighten($brown, 20%) 25%, $brown 48.75%, lighten($brown, 10%) 48.75%, lighten($brown, 10%) 49.75%, $brown 49.75%, $brown 50%, transparent 50%);
				background-image: linear-gradient(135deg, lighten($brown, 20%) 25%, $brown 48.75%, lighten($brown, 10%) 48.75%, lighten($brown, 10%) 49.75%, $brown 49.75%, $brown 50%, transparent 50%);
			}
		}

		.no-cssgradients & {
			width: 5em;
			height: 5em;

			&:before {
				border-left: 5em solid lighten($brown, 10%);
				border-bottom: 5em solid transparent;
			}
		}

		&:hover {

			.no-touch.cssgradients & {
				width: 15%;
				height: 22.67%;
			}

			.no-touch.no-cssgradients & {
				width: 6em;
				height: 6em;

				&:before {
					border-left-width: 6em;
					border-bottom-width: 6em;
				}
			}
		}
	}

	.location__toggle--hide {
		width: 2em;
		height: 2em;
		right: .5em;
		top: .5em;
		border-radius: 1em;
		line-height: 2;
		text-align: center;
		color: $white;
		background-color: $brown-dark;

		&:after {
			@include font-size(1.6);

			content: "\2715";
		}

		&:hover {
			text-decoration: none;

			.no-touch & {
				background-color: $brown;
			}
		}

		@include at-narrow {
			right: 1em;
			top: 1em;
		}
	}

	.location__preloader {
		@extend %cover;

		z-index: 4;
		background-color: $white;
	}

	.location__spinner {
		/* I just used !important. Naughty, naughty. */
		position: absolute !important;
		left: 50% !important;
		top: 50% !important;
		margin: auto;
	}


/* --------------------[ 11. Secondary content ] */

.secondary-content {
	margin-bottom: 6em;

	@include at-narrow {
		width: 65%;
		margin-bottom: 1em;
		float: left;
	}

	@include at-medium {
		width: 73%;
		margin-bottom: 2em;
	}

	@include at-wide {
		margin-bottom: -10em;
	}
}
	
	.secondary-content__header {
		margin-bottom: 1em;
	}

		.secondary-content__thumb {
			margin-bottom: .75em;

			@include at-wide {
				max-width: none;
			}
		}

		.secondary-content__title,
		.secondary-content__tagline {
			@extend %font-oswald-regular;

			margin: 0;
			white-space: nowrap;
		}

		.secondary-content__title {
			padding-bottom: .2em;
			border-bottom: .25em solid $black;
			line-height: 1;
			text-transform: uppercase;
		}

		.secondary-content__tagline {
			@extend %font-oswald-regular;

			border-bottom: 3px solid $black;
			line-height: 2;
		}

	.secondary-content__body {
		@extend %font-merriweather-light;

		word-wrap: break-word;

		em {
			font-style: normal;
			font-weight: 900;		
		}

		ul {
			padding: 0;
			list-style: none;
		}

		li {
			display: inline;

			&:before {
				@include font-size(3);

				content: "\2022";
				margin-right: .15em;
				vertical-align: middle;
				line-height: .1;
			}

			&:first-child {

				&:before {
					display: none;
				}
			}
		}

		@include at-narrow {
			@include font-size(1.8);
		}

		@include at-medium {
			@include font-size(2.2);

			letter-spacing: -.01em;
		}
	}


/* --------------------[ 12. Featured movie ] */

.featured-movie {
	padding: 1em;
	margin: 0 -.5em 2em;
	position: relative;
	background-color: $blue;

	&:after {
		content: "";
		width: 1.75em;
		height: .875em;
		margin-left: -.875em;
		position: absolute;
		left: 50%;
		bottom: 0;
		border-radius: .875em .875em 0 0;
		background-color: $white;
	}

	@include at-narrow {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		width: 32%;
		margin: 1em 0 0;
		float: right;
	}

	@include at-medium {
		width: 23.5%;
	}

	@include at-wide {
		
		&:before {
			content: "";
			width: 1px;
			position: absolute;
			left: -1em;
			top: -1em;
			bottom: 7em;
			background-color: $gray-lighter;
		}
	}
}

	.featured-movie__thumb {
		margin: -5em 0 1em;
		position: relative;
		text-align: center;

		> img {
			position: relative;
			z-index: 2;
		}

		&:after {
			content: "";
			height: .000001em;
			width: 14em;
			margin-left: -7em;
			position: absolute;
			left: 50%;
			bottom: .5em;
			z-index: 1;
			box-shadow: 0 0 2em .5em rgba(0, 0, 0, .6);
			-webkit-transform: rotate(-5deg);
			-ms-transform: rotate(-5deg);
			transform: rotate(-5deg);
		}
	}

	.featured-movie__title {
		@extend %font-oswald-regular;
		
		padding-bottom: .75em;
		margin: 0 0 .75em;
		border-bottom: 8px solid $blue-light;
		white-space: nowrap;
		text-transform: uppercase;
		color: $white;

		> span {
			display: block;
		}
	}

	.featured-movie__review {
		@extend %font-lora-italic;

		@include font-size(2);

		margin: 1em 0;
		line-height: 1.5;
		color: $white;

		@include at-narrow {
			@include font-size(1.6);
		}
	}

	.featured-movie__rating {
		@extend %font-oswald-regular;

		padding: 1.5em 1em;
		margin: 0 -1em;
		border-top: 2px dashed $blue-dark;
		border-bottom: 2px dashed $blue-dark;
		box-shadow: 0 5px rgba(0, 0, 0, .15) inset,
								0 -5px rgba(0, 0, 0, .15) inset;

		dt {
			width: 47%;
			float: left;
			line-height: 1.1;
			white-space: nowrap;
			text-transform: uppercase;
			color: $blue-light;

			> span {
				display: block;
			}

			& + dd {
				width: 49%;
				padding: 0;
				float: right;
				clear: none;
				line-height: 1;
				color: $white;
			}
		}

		dd {
			padding-top: 1em;
			margin: 0;
			clear: both;
		}
	}

	.featured-movie__premiere {
		@extend %font-oswald-regular;

		padding: 1.25em 0;
		margin: 0;
		text-transform: uppercase;
		white-space: nowrap;
		color: $blue-light;

		dt {
			@include font-size(1.4);

			margin-bottom: .5em;
			overflow: hidden;
			line-height: .9;
			text-align: center;

			> span {
				display: inline-block;
				position: relative;

				&:before,
				&:after {
					content: "";
					width: 500%;
					height: 100%;
					position: absolute;
					top: 0;
					background-color: $blue-light;
				}

				&:before {
					margin-right: .75em;
					right: 100%;
				}

				&:after {
					margin-left: .75em;
					left: 100%;
				}
			}
		}

		dd {
			margin: 0;
			line-height: 1.1;

			&:nth-of-type(odd) {
				color: $white;
			}

			@include legacy-ie {
				color: $white;
			}
		}
	}

.rt-rank {
	display: block;
	width: 100%;
	height: 8px;
	position: relative;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: help;

	.no-meter & {
		@extend %visually-hidden;
	}

	&::-webkit-meter-bar {
		height: .5em;
		background: $blue-light;
		border: 0;
	}

	&::-moz-meter-bar {
		background: $white;
	}

	&::-webkit-meter-optimum-value {
		background: $white;
	}

	&:-moz-meter-optimum {
		background: $blue-light;
	}
}

.rt-rank-dummy {
	display: block;
	height: 8px;
	position: relative;
	background-color: $blue-light;
	cursor: help;
}

	.rt-rank-dummy__val {
		@extend %ir;

		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		background-color: $white;
	}


/* --------------------[ 13. Featured quotes ] */

.featured-quotes {
	margin-bottom: 2em;
	text-align: center;
	background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/66450/overflow-lite.png) no-repeat 50% 0;

	@include at-narrow {
		text-align: left;
	}

	@include at-wide {
		padding-top: 11.5em;
		margin-top: -1.25em;
		position: relative;
		background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/66450/overflow.png);
		pointer-events: none;

		> .wrapper {
			pointer-events: auto;
		}
	}
}

	.featured-quotes__title {
		@extend %font-oswald-regular;
		
		@include font-size(5);

		margin: 0 0 .25em;
		text-transform: uppercase;
		color: $blue-dirty;

		@include at-narrow {
			@include font-size(6);

			margin-left: .5em;
			-webkit-transform: rotate(4deg);
			-ms-transform: rotate(4deg);
			transform: rotate(4deg);
		}

		@include at-medium {
			@include font-size(7);
		}

		@include at-wide {
			@include visually-hidden;
		}
	}

	.featured-quotes__item {
		@extend %font-lora-italic;

		@include font-size(1.5);

		margin: 0 2em 1em;
		line-height: 1.5;
		color: $gray-dark;

		> em {
			@extend %font-lora-bold-italic;
		}

		@include at-narrow {

			&:nth-of-type(1) {
				margin: 0 2em 2em 11em;
				text-align: right;
				-webkit-transform: rotate(2deg);
				-ms-transform: rotate(2deg);
				transform: rotate(2deg);
			}

			&:nth-of-type(2) {
				margin: 0 7em 2em 2em;
				-webkit-transform: rotate(-1deg);
				-ms-transform: rotate(-1deg);
				transform: rotate(-1deg);
			}

			&:nth-of-type(3) {
				margin: 0 2em 2em 7em;
				-webkit-transform: rotate(1deg);
				-ms-transform: rotate(1deg);
				transform: rotate(1deg);
			}
		}

		@include at-medium {
			@include font-size(1.6);

			&:nth-of-type(1) {
				margin: 0 2em 1em 11em;
			}

			&:nth-of-type(2) {
				margin: 0 14em 2em 2em;
			}

			&:nth-of-type(3) {
				margin: 0 8em 2em 7em;
			}
		}

		@include at-wide {
			
			&:nth-of-type(1) {
				margin: 0 0 0 14em;
			}

			&:nth-of-type(2) {
				margin: 0 17em 2em 0;
			}

			&:nth-of-type(3) {
				margin: 0 6.25em 2em 8em;
			}
		}
	}

              
            
!

JS

              
                /*!
* FitText.js 1.0 jQuery free version
*
* Copyright 2011, Dave Rupert http://daverupert.com 
* Released under the WTFPL license 
* http://sam.zoy.org/wtfpl/
* Modified by Slawomir Kolodziej http://slawekk.info
*
* Date: Tue Aug 09 2011 10:45:54 GMT+0200 (CEST)
*/

(function(){var f=function(a,c,b){a.addEventListener?a.addEventListener(c,b,!1):a.attachEvent("on"+c,b)},g=function(a,c){for(key in c)c.hasOwnProperty(key)&&(a[key]=c[key]);return a};window.fitText=function(a,c,b){var e=g({minFontSize:-1/0,maxFontSize:1/0},b);b=function(a){var b=c||1,d=function(){a.style.fontSize=Math.max(Math.min(a.clientWidth/(10*b),parseFloat(e.maxFontSize)),parseFloat(e.minFontSize))+"px"};d();f(window,"resize",d)};if(a.length)for(var d=0;d<a.length;d++)b(a[d]);else b(a);return a}})();

/*!
 * spin.js
 *
 * Copyright (c) 2011-2013 Felix Gnass
 * Licensed under the MIT license
 */
(function(t,e){if(typeof exports=="object")module.exports=e();else if(typeof define=="function"&&define.amd)define(e);else t.Spinner=e()})(this,function(){"use strict";var t=["webkit","Moz","ms","O"],e={},i;function o(t,e){var i=document.createElement(t||"div"),o;for(o in e)i[o]=e[o];return i}function n(t){for(var e=1,i=arguments.length;e<i;e++)t.appendChild(arguments[e]);return t}var r=function(){var t=o("style",{type:"text/css"});n(document.getElementsByTagName("head")[0],t);return t.sheet||t.styleSheet}();function s(t,o,n,s){var a=["opacity",o,~~(t*100),n,s].join("-"),f=.01+n/s*100,l=Math.max(1-(1-t)/o*(100-f),t),u=i.substring(0,i.indexOf("Animation")).toLowerCase(),d=u&&"-"+u+"-"||"";if(!e[a]){r.insertRule("@"+d+"keyframes "+a+"{"+"0%{opacity:"+l+"}"+f+"%{opacity:"+t+"}"+(f+.01)+"%{opacity:1}"+(f+o)%100+"%{opacity:"+t+"}"+"100%{opacity:"+l+"}"+"}",r.cssRules.length);e[a]=1}return a}function a(e,i){var o=e.style,n,r;i=i.charAt(0).toUpperCase()+i.slice(1);for(r=0;r<t.length;r++){n=t[r]+i;if(o[n]!==undefined)return n}if(o[i]!==undefined)return i}function f(t,e){for(var i in e)t.style[a(t,i)||i]=e[i];return t}function l(t){for(var e=1;e<arguments.length;e++){var i=arguments[e];for(var o in i)if(t[o]===undefined)t[o]=i[o]}return t}function u(t){var e={x:t.offsetLeft,y:t.offsetTop};while(t=t.offsetParent)e.x+=t.offsetLeft,e.y+=t.offsetTop;return e}function d(t,e){return typeof t=="string"?t:t[e%t.length]}var p={lines:12,length:7,width:5,radius:10,rotate:0,corners:1,color:"#000",direction:1,speed:1,trail:100,opacity:1/4,fps:20,zIndex:2e9,className:"spinner",top:"auto",left:"auto",position:"relative"};function c(t){if(typeof this=="undefined")return new c(t);this.opts=l(t||{},c.defaults,p)}c.defaults={};l(c.prototype,{spin:function(t){this.stop();var e=this,n=e.opts,r=e.el=f(o(0,{className:n.className}),{position:n.position,width:0,zIndex:n.zIndex}),s=n.radius+n.length+n.width,a,l;if(t){t.insertBefore(r,t.firstChild||null);l=u(t);a=u(r);f(r,{left:(n.left=="auto"?l.x-a.x+(t.offsetWidth>>1):parseInt(n.left,10)+s)+"px",top:(n.top=="auto"?l.y-a.y+(t.offsetHeight>>1):parseInt(n.top,10)+s)+"px"})}r.setAttribute("role","progressbar");e.lines(r,e.opts);if(!i){var d=0,p=(n.lines-1)*(1-n.direction)/2,c,h=n.fps,m=h/n.speed,y=(1-n.opacity)/(m*n.trail/100),g=m/n.lines;(function v(){d++;for(var t=0;t<n.lines;t++){c=Math.max(1-(d+(n.lines-t)*g)%m*y,n.opacity);e.opacity(r,t*n.direction+p,c,n)}e.timeout=e.el&&setTimeout(v,~~(1e3/h))})()}return e},stop:function(){var t=this.el;if(t){clearTimeout(this.timeout);if(t.parentNode)t.parentNode.removeChild(t);this.el=undefined}return this},lines:function(t,e){var r=0,a=(e.lines-1)*(1-e.direction)/2,l;function u(t,i){return f(o(),{position:"absolute",width:e.length+e.width+"px",height:e.width+"px",background:t,boxShadow:i,transformOrigin:"left",transform:"rotate("+~~(360/e.lines*r+e.rotate)+"deg) translate("+e.radius+"px"+",0)",borderRadius:(e.corners*e.width>>1)+"px"})}for(;r<e.lines;r++){l=f(o(),{position:"absolute",top:1+~(e.width/2)+"px",transform:e.hwaccel?"translate3d(0,0,0)":"",opacity:e.opacity,animation:i&&s(e.opacity,e.trail,a+r*e.direction,e.lines)+" "+1/e.speed+"s linear infinite"});if(e.shadow)n(l,f(u("#000","0 0 4px "+"#000"),{top:2+"px"}));n(t,n(l,u(d(e.color,r),"0 0 1px rgba(0,0,0,.1)")))}return t},opacity:function(t,e,i){if(e<t.childNodes.length)t.childNodes[e].style.opacity=i}});function h(){function t(t,e){return o("<"+t+' xmlns="urn:schemas-microsoft.com:vml" class="spin-vml">',e)}r.addRule(".spin-vml","behavior:url(#default#VML)");c.prototype.lines=function(e,i){var o=i.length+i.width,r=2*o;function s(){return f(t("group",{coordsize:r+" "+r,coordorigin:-o+" "+-o}),{width:r,height:r})}var a=-(i.width+i.length)*2+"px",l=f(s(),{position:"absolute",top:a,left:a}),u;function p(e,r,a){n(l,n(f(s(),{rotation:360/i.lines*e+"deg",left:~~r}),n(f(t("roundrect",{arcsize:i.corners}),{width:o,height:i.width,left:i.radius,top:-i.width>>1,filter:a}),t("fill",{color:d(i.color,e),opacity:i.opacity}),t("stroke",{opacity:0}))))}if(i.shadow)for(u=1;u<=i.lines;u++)p(u,-2,"progid:DXImageTransform.Microsoft.Blur(pixelradius=2,makeshadow=1,shadowopacity=.3)");for(u=1;u<=i.lines;u++)p(u);return n(e,l)};c.prototype.opacity=function(t,e,i,o){var n=t.firstChild;o=o.shadow&&o.lines||0;if(n&&e+o<n.childNodes.length){n=n.childNodes[e+o];n=n&&n.firstChild;n=n&&n.firstChild;if(n)n.opacity=i}}}var m=f(o("group"),{behavior:"url(#default#VML)"});if(!a(m,"transform")&&m.adj)h();else i=a(m,"animation");return c});



var App = App || {};

(function (window, document, undefined) {
	'use strict';

	// if (typeof Modernizr === 'undefined') return;


	/* Utils */

	App.utils = {};

	App.utils.noop = function () {};

	App.utils.supplant = function (str, data) {
		return str.replace(/{([^{}]*)}/g, function (a, b) {
			var r = data[b];
			return typeof r === 'string' || typeof r === 'number' ? r : a;
		});
	};

	App.utils.addEvent = function (el, event, fn, capture) {
		if (el.addEventListener) {
			el.addEventListener(event, fn, capture || false);
		} else if (el.attachEvent) {
			el.attachEvent('on' + event, fn);
		}
	};
	
	App.utils.hasClass = function (el, className) {
		return el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
	};

	App.utils.addClass = function (el, className) {
		if (el.classList) {
			el.classList.add(className);
		} else if (!App.utils.hasClass(el, className)) {
			el.className += ' ' + className;
		}
	};
	
	App.utils.removeClass = function (el, className) {
		if (el.classList) {
			el.classList.remove(className);
		} else if (App.utils.hasClass(el, className)) {
			el.className = el.className.replace(new RegExp('(\\s|^)' + className + '(\\s|$)'), ' ');
		}
	};


	/* Widgets */

	App._widgets = [];
	
	App.registerWidget = function (widget) {
		this._widgets.push(widget);
		return this;
	};

	App.init = function () {
		this._widgets.filter(function (widget) {
			return widget.isEnabled();
		}).forEach(function (widget) {
			widget.init();
		});
	};


	/* Generic widget */

	var genericWidget = {};

	genericWidget._config = {
		enabled: true
	};

	genericWidget.isEnabled = function () {
		return this._config.enabled;
	};

	genericWidget.init = App.utils.noop;


	/* oldIE */

	var oldIE = Object.create(genericWidget);

	oldIE._config = {
		className: 'oldie',
		treshold: 8
	};

	oldIE.isEnabled = function () {
		var version;
		var re;

		if (navigator.appName == 'Microsoft Internet Explorer') {
			re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
			if (re.exec(navigator.userAgent) != null) version = parseFloat(RegExp.$1);
		}

		return version && version <= this._config.treshold;
	};

	oldIE.init = function () {
		App.utils.addClass(document.documentElement, this._config.className);
	};


	/* mq */

	var mq = Object.create(genericWidget);

	mq._config = {
		enabled: !Modernizr.mq('only all'),
		base: 16,
		breakpoints: [
			{ name: 'bp-narrow', size: 35.5 },
			{ name: 'bp-medium', size: 48 },
			{ name: 'bp-wide', size: 61 }
		]
	};

	mq._update = function () {
		var root = document.documentElement;
		var docWidth = root.offsetWidth;

		this._config.breakpoints.forEach(function (bp) {
			App.utils[docWidth / this._config.base >= bp.size ?
				'addClass' : 'removeClass'](root, bp.name);
		}.bind(this));
	};

	mq.init = function () {
		App.utils.addEvent(window, 'resize', this._update.bind(this));
		this._update();
	};


	/* fit */

	var fit = Object.create(genericWidget);

	fit._initOne = function (el) {
		var kompressor = +el.getAttribute('data-k');
		fitText(el, kompressor || 1);
	};

	fit.init = function () {
		Array.prototype.forEach.call(document.querySelectorAll('.js_fit'),
				this._initOne.bind(this));
	};


	/* touch */

	var touch = Object.create(genericWidget);

	touch._config = {
		enabled: Modernizr.touch
	};

	touch.init = function () {
		// hackin'
		App.utils.addEvent(document, 'touchstart', App.utils.noop, true);
	};


	/* map */

	var map = Object.create(genericWidget);

	map._busy = false;
	map._visible = false;
	map._loaded = false;

	map._gmapInstance = null;
  map._gmapLocation = null; 
	map._gmapMarker = null;

	map._mapContainer = null;
	map._mapToggle = null;
	map._preloader = null;
	map._spinner = null;
	
	map._config = {
		enabled: true,
    libUrl: '//maps.googleapis.com/maps/api/js?v=3.exp' +
				'&sensor=false&callback=window.App.callbacks.map',
		mapOptions: {
			zoom: 16,
			scrollwheel: false,
			streetViewControl: false,
			mapTypeControl: false,
			panControl: false,
			zoomControl: true,
			scaleControl: true
		},
		spinOptions: {
			className: 'location__spinner',
			color: '#71625a'
		},
		coords: {
			lat: 51.533139,
			lng: -0.1785
		}
	};

	map._toggle = function (e) {
		var event = e || window.event;

		if (typeof event.preventDefault !== 'undefined') {
			event.preventDefault();
		} else {
			event.returnValue = false;
		}

		if (this._busy) return;
		this._busy = true;

		this[this._visible ? '_hide' : '_show']();
	};

	map._hide = function () {
		this._updateView(false);
	};

	map._load = function () {
		var script = document.createElement('script');
		script.src = this._config.libUrl;
		document.body.appendChild(script);

		this._spinner = new Spinner(this._config.spinOptions)
				.spin(this._preloader);

		App.utils.removeClass(this._preloader, 'hidden');
	};

	map._show = function () {
		if (!this._loaded) {
			this._load();
		} else {
			this._updateView(true);
			this._reset();			
		}
	};

	map._setup = function () {
		this._gmapInstance = new google.maps.Map(this._mapContainer,
				this._config.mapOptions);
		this._gmapLocation = new google.maps.LatLng(this._config.coords.lat,
				this._config.coords.lng);
		this._gmapMarker = new google.maps.Marker({
			map: this._gmapInstance,
			position: this._gmapLocation,
			animation: google.maps.Animation.DROP
		});

		this._gmapInstance.setCenter(this._gmapLocation);
		this._spinner.stop();
		this._preloader.parentNode.removeChild(this._preloader);
		this._loaded = true;
		this._updateView(true);
	};

	map._reset = function () {
		google.maps.event.trigger(this._gmapInstance, 'resize');
		this._gmapInstance.setZoom(this._config.mapOptions.zoom);
		this._gmapInstance.setCenter(this._gmapLocation);
	};

	map._updateView = function (visible) {
		App.utils[visible ? 'removeClass' : 'addClass'](this._mapContainer,
				'hidden');
		App.utils[visible ? 'removeClass' : 'addClass'](this._mapToggle, 
				'location__toggle--show');
		App.utils[visible ? 'addClass' : 'removeClass'](this._mapToggle,
				'location__toggle--hide');

		this._visible = visible;
		this._busy = false;
	};

	map.init = function () {
		this._mapContainer = document.querySelector('.js_map');
		this._mapToggle = document.querySelector('.js_map-toggle');
		this._preloader = document.querySelector('.js_map-preloader');

		this._updateView(false);

		App.callbacks = App.callbacks || {};
		App.callbacks.map = this._setup.bind(this);
		App.utils.removeClass(this._mapToggle, 'hidden');
		App.utils.addEvent(this._mapToggle, 'click', this._toggle.bind(this));
	};


	/* rtRank */

	var rtRank = Object.create(genericWidget);

	rtRank._config = {
		enabled: !Modernizr.meter,
		template: [
			'<span class="rt-rank-dummy" title="{title}" role="progressbar" ' +
					'aria-valuenow="{value}" aria-valuemin="0" aria-valuemax="100">',
				'<span class="rt-rank-dummy__val" style="width: {value}%;">{value}%</span>',
			'</span>'
		].join('')
	};

	rtRank._initOne = function (el) {
		el.setAttribute('aria-hidden', true);
		el.insertAdjacentHTML('afterend',
			App.utils.supplant(this._config.template, {
				value: el.getAttribute('value'),
				title: el.getAttribute('title')
			}));
	};

	rtRank.init = function () {
		Array.prototype.forEach.call(document.querySelectorAll('.js_rt-rank'), 
				this._initOne.bind(this));
	};


	/* Init */

	App
		.registerWidget(oldIE)
		.registerWidget(mq)
		.registerWidget(fit)
		.registerWidget(touch)
		.registerWidget(map)
		.registerWidget(rtRank)
		.init();

}(window, document));

              
            
!
999px

Console