<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="wrapper-outer">
<div class="wrapper sectionTop" id="sectionFlyoutTop">
<p class="open-menu"><a href="#mobileMenu">☰ Menu </a></p>
<nav class="header-menu" role="navigation">
<h1 class="visuallyhidden">Main Navigation</h1>
<div class="header-menu-box">
<ul class="header-menu-inner clearfix">
<li><a href="#" id="sectionTop" class="header-menu-button">Home</a></li>
<li><a href="#" id="section1" class="header-menu-button">Positioning Relatives</a></li>
<li><a href="#" id="section2" class="header-menu-button">List Style: Bullets</a></li>
<li><a href="#" id="section3" class="header-menu-button">Abbey Road</a></li>
<li><a href="#" id="section4" class="header-menu-button">Border Bottom Line</a></li>
<li><a href="#" id="section5" class="header-menu-button end">Overflow</a></li>
</ul>
</div>
</nav>
<header role="banner" class="header">
<div class="inner-box">
<h1>CSS<span>Off</span></h1>
<p class="header-volume">Volume 3 - September 2013</p>
</div>
</header>
</div>
<main role="main" class="main-box">
<div class="wrapper">
<div class="feature-box section1" id="sectionFlyout1">
<!-- Featured Article -->
<article class="feature">
<div class="inner-box">
<figure>
<div class="feature-picto-box">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-feature-small.jpg"
data-responsimg480="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-feature-middle.jpg"
data-responsimg768="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-feature-large.jpg"
alt="a young girl on her deathbed surrounded by her family"
class="feature-picto responsimg">
</div>
</figure>
<div class="feature-box">
<p class="feature-subtitle">Feature</p>
<h2>Positioning relatives</h2>
<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>
</div>
</article>
<!-- Barbie -->
<article class="barbie">
<div class="inner-box">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-barbie-small.png"
data-responsimg480="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-barbie-middle.png"
data-responsimg768="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-barbie-large.png" alt="Barbie rocks"
class="barbie-picto responsimg">
<h2>Box Model</h2>
<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>
</div>
</article>
</div>
<div class="bullets-box section2" id="sectionFlyout2">
<!-- Staying Afloat -->
<article class="staying">
<div class="inner-box">
<div class="staying-content-box">
<h2>Staying afloat</h2>
<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>
<figure class="staying-picto-box">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-boots-small.png"
data-responsimg768="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-boots-large.png" alt="green rubber boots"
class="staying-picto responsimg">
</figure>
</div>
</article>
<!-- List Style Bullets -->
<article class="bullets">
<div class="inner-box">
<h2><span class="bullets-headline">List Style: Bullets.</span> <span class="bullets-headline-sub">A round-up of popular ammunition</span>
</h2>
<ul>
<li class="bullets-first">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-bullets-1-small.png"
data-responsimg768="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-bullets-1.png" alt="Remington 69gr bullet"
class="responsimg">
<figcaption><p><span class="bullets-caliber">.223</span> <span class="bullets-name">Remington</span>
69<abbr title="grain">gr</abbr> <abbr title="Boat Tail Hollow Point">BTHP</abbr></p>
</figcaption>
</figure>
</li>
<li class="bullets-second">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-bullets-2-small.png"
data-responsimg768="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-bullets-2.png"
alt="Winchester 168gr bullet" class="responsimg">
<figcaption><p><span class="bullets-caliber">.308</span> <span class="bullets-name">Winchester</span>
168gr BTHP</p></figcaption>
</figure>
</li>
<li class="bullets-third">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-bullets-3-small.png"
data-responsimg768="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-bullets-3.png" alt="Russian 154gr bullet"
class="responsimg">
<figcaption><p><span class="bullets-caliber">7.62×39<abbr
title="milimeter">mm</abbr></span> <span class="bullets-name">Russian</span>
154gr <abbr title="jacketed soft point">JSP</abbr></p></figcaption>
</figure>
</li>
<li class="bullets-fourth">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-bullets-4-small.png"
data-responsimg768="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-bullets-4.png" alt="Thumber 220gr bullet"
class="responsimg">
<figcaption><p><span class="bullets-caliber">7.62</span> <span class="bullets-name">Thumper</span>
220gr <abbr title="Round Nose">RN</abbr></p></figcaption>
</figure>
</li>
<li class="bullets-fifth last">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-bullets-5-small.png"
data-responsimg768="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-bullets-5.png" alt="Thumper 240gr bullet"
class="responsimg">
<figcaption><p><span class="bullets-caliber">7.62</span> <span class="bullets-name">Thumper</span>
240gr BTHP</p></figcaption>
</figure>
</li>
</ul>
</div>
</article>
</div>
</div>
<div class="wrapper section3 clearfix">
<!-- Abbey Road -->
<article class="road" id="sectionFlyout3">
<div class="inner-box">
<h2>Displaying (Famous) Blocks</h2>
<div class="road-picto-box">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-road-small.jpg"
data-responsimg480="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-road-middle.jpg"
data-responsimg768="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-road-large_1.jpg" alt="The Beatles crossing Abbey Road"
class="road-picto responsimg">
<a href="https://goo.gl/maps/tQW1F" title="Go to Google Maps" class="road-picto-map"><img
src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-map-preview-small.jpg"
data-responsimg480="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-map-preview-middle.jpg"
data-responsimg768="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-map-preview-large.jpg" alt="Google Map preview"
class="responsimg"></a>
</div>
<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 class="road-picto-source"><cite>
<small>Photo: <a href="https://goo.gl/h44dc9">goo.gl/h44dc9</a></small>
</cite></p>
</div>
</article>
</div>
<div class="wrapper wrapper-event section4" id="sectionFlyout4">
<div class="bottomline-box">
<!-- Border Bottom Line -->
<article class="bottomline">
<div class="bottomline-inner-box">
<h2>Border Bottom Line</h2>
<h3>Awful immigration laws from around the world.</h3>
<ul class="inner-box">
<li><strong>Italy</strong> penalizes illegal immigrants with a fine of €5,000-10,000 and allows
immigration officials to detain them for up to 6 months.
</li>
<li><strong>Switzerland</strong> immediately deports all convicted criminals from other
countries and potentially even their family members.
</li>
<li><strong>Australia</strong> detains all non-citizens without a valid visa.</li>
<li><strong>Japan</strong> 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.
</li>
<li><strong>The United Arab Emirates</strong> 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>
<!-- Event Calendar -->
<article class="events">
<div class="inner-box event-box clearfix">
<figure class="events-picto">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-events-small.png"
data-responsimg480="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-events-middle.png"
data-responsimg768="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-events-large.png" alt="Cover dvd box Transformers"
class="responsimg">
<figcaption><p class="events-rating-headline">Transformers <span>Revenge of the fallen</span>
</p></figcaption>
</figure>
<div class="events-rating clearfix" itemscope="itemscope"
itemtype="http://data-vocabulary.org/Review">
<h2 itemprop="itemreviewed" class="events-rating-headline">Transformers <span>Revenge of the fallen</span>
</h2>
<p itemprop="summary" class="events-summary">A noisy, underplotted, and overlong special effects
extravaganza that lacks a human touch.</p>
<div class="events-rating-review" itemprop="rating" itemscope="itemscope"
itemtype="http://data-vocabulary.org/Rating">
<div class="events-rating-review-box">
<h3 itemprop="reviewer">Rotten Tomato <span>Rating</span></h3>
<p itemprop="rating" class="events-rating-review-percent">20%</p>
</div>
<p class="events-rating-row"><span></span></p>
</div>
</div>
<div class="events-date clearfix" itemscope itemtype="http://schema.org/Event">
<h3 itemprop="description"><span>World premiere <span class="visuallyhidden" itemprop="name">Transformers Revenge of the fallen</span></span>
</h3>
<div itemprop="location" itemscope itemtype="http://schema.org/Place">
<p itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="addressLocality">Den Haag</span>
<span itemprop="name">theatre</span><br>
<span itemprop="addressCountry" class="events-country">The netherlands</span>
</p>
</div>
<span itemprop="startDate" class="events-time">June 23, 2011</span>
</div>
</div>
</article>
</div>
</div>
<!-- Overflow -->
<div class="section5">
<article class="water" id="sectionFlyout5">
<div class="wrapper">
<div class="inner-box">
<h2><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-headline-water-small.png"
data-responsimg768="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-headline-water.png" alt="Overflow"
class="responsimg"></h2>
<div class="water-boxes">
<div class="first">
<p class="fix">On the night of Aug 8, 1975, a line of people frantically piled sandbags atop
Henan Province's <b>Banqiao Dam</b> 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>
</div>
<div class="second">
<p class="fix">Just after 1:00 am, the sky cleared and stars emerged from behind the storm
clouds. There was an eerie calm as someone yelled, <q>The water level is going down! The
flood is retreating!</q></p>
</div>
<div class="third">
<p class="fix">There was little chance to enjoy that calm. One survivor recalled that a few
seconds later it <q>sounded like the sky was collapsing and the earth was cracking.</q>
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>
</div>
</div>
</div>
</div>
</article>
</div>
</main>
<div class="wrapper">
<footer role="contentinfo" itemscope itemtype="http://schema.org/ContactPoint" class="footer">
<div class="inner-box">
<p class="footer-copyright">
<small><span>2013 CSSOff,</span> Volume 3</small>
</p>
<address itemscope itemtype="http://schema.org/PostalAddress" class="footer-address">
<span itemprop="streetAddress"><b>Route Gregory</b>, Building 31</span><br>
<span itemprop="postalCode">01630</span> <span lang="fr"
itemprop="addressLocality">Prévessin-Moëns</span>, <span
itemprop="addressCountry">France</span><br>
<span itemprop="telephone">+41 22 767 61 11</span>
</address>
</div>
</footer>
</div>
<div id="mobileMenu">
<div class="mobile-menu-box">
<ul class="mobile-menu-inner clearfix">
<li><a href="#sectionFlyoutTop">Home</a></li>
<li><a href="#sectionFlyout1">Positioning Relatives</a></li>
<li><a href="#sectionFlyout2">List Style: Bullets</a></li>
<li><a href="#sectionFlyout3">Abbey Road</a></li>
<li><a href="#sectionFlyout4">Border Bottom Line</a></li>
<li><a href="#sectionFlyout5">Overflow</a></li>
</ul>
</div>
</div>
</div>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/jquery-1.10.2.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/plugins2.js"></script>
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
audio,
canvas,
video {
display: inline-block;
}
audio:not([controls]) {
display: none;
height: 0;
}
[hidden] {
display: none;
}
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
html,
button,
input,
select,
textarea {
font-family: sans-serif;
}
body {
margin: 0;
}
a:focus {
outline: thin dotted;
}
a:hover, a:active {
outline: 0;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
abbr[title] {
border-bottom: 1px dotted;
}
b,
strong {
font-weight: bold;
}
dfn {
font-style: italic;
}
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
mark {
background: #ff0;
color: #000;
}
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
pre {
white-space: pre-wrap;
}
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
small {
font-size: 75%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
img {
border: 0;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 0;
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0;
padding: 0;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
margin: 0;
}
button,
input {
line-height: normal;
}
button,
select {
text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
button[disabled],
html input[disabled] {
cursor: default;
}
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
input[type="search"] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
textarea {
overflow: auto;
vertical-align: top;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body, .events .events-rating .events-summary, .water {
font-family: 'Lora', serif;
font-weight: 400;
font-style: normal;
word-spacing: -2px;
word-spacing: -0.125rem;
}
.header {
font-family: 'Lora', serif;
font-weight: 400;
font-style: italic;
word-spacing: -2px;
word-spacing: -0.125rem;
}
.barbie h2 {
font-family: 'Lora', serif;
font-weight: 700;
font-style: italic;
word-spacing: -2px;
word-spacing: -0.125rem;
}
.feature, .road, .bottomline ul, .footer .footer-address {
font-family: 'Merriweather', serif;
font-weight: 300;
font-style: normal;
}
.feature .feature-subtitle {
font-family: 'Merriweather', serif;
font-weight: 400;
font-style: normal;
}
.bottomline li strong, .footer .footer-address b {
font-family: 'Merriweather', serif;
font-weight: 700;
font-style: normal;
}
.header-menu, .feature h2, .bullets, .bullets ul, .staying h2, .road h2, .bottomline h2, .bottomline h3, .events, .water h2 {
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-style: normal;
word-spacing: 1px;
word-spacing: 0.0625rem;
}
.barbie, .staying {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-style: normal;
word-spacing: 1px;
word-spacing: 0.0625rem;
}
.bullets h2 span.bullets-headline-sub {
font-family: 'Lato', sans-serif;
font-weight: 700;
font-style: normal;
word-spacing: 1px;
word-spacing: 0.0625rem;
}
.header h1 {
font-family: 'Lato', sans-serif;
font-weight: 100;
font-style: normal;
word-spacing: 1px;
word-spacing: 0.0625rem;
}
/* ==========================================================================
Helper classes
========================================================================== */
/* Prevent callout */
.nocallout {
-webkit-touch-callout: none;
}
.pressed {
background-color: rgba(0, 0, 0, 0.7);
}
/* A hack for HTML5 contenteditable attribute on mobile */
textarea[contenteditable] {
-webkit-appearance: none;
}
/*
* Image replacement
*/
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
.hidden {
display: none !important;
visibility: hidden;
}
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screenreaders, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
/* ==========================================================================
Browse Happy prompt
========================================================================== */
.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html,
button,
input,
select,
textarea {
color: #222;
}
html {
font-size: 1em;
line-height: 1.4;
}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between images, videos, audio and canvas and the bottom of
* their containers: h5bp.com/i/440
*/
audio,
canvas,
img,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
p {
margin-top: 0;
padding-top: 0;
padding-bottom: 15px;
padding-bottom: 0.9375rem;
}
ul {
list-style: none outside;
margin: 0;
padding: 0;
}
@media only screen and (min-width: 1024px) {
.fix {
/* FOR FIREFOX */
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
}
}
.inner-box {
padding: 0 15px;
padding: 0 0.9375rem;
}
@media only screen and (min-width: 768px) {
.inner-box {
padding: 0;
}
}
h1,
h2,
h3,
h4 {
margin: 0;
padding: 0;
}
main {
width: 100%;
float: right;
margin-right: 0;
}
a:hover, a:focus, a:active {
text-decoration: underline;
}
/* Main Navigation */
.open-menu {
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
}
.open-menu a {
display: block;
padding: 10px;
padding: 0.625rem;
}
@media only screen and (min-width: 768px) {
.open-menu {
display: none;
}
}
@media only screen and (min-width: 768px) {
#mobileMenu {
display: none;
}
}
.lt-ie9 #mobileMenu {
display: none;
}
.header-menu {
display: none;
max-width: 960px;
max-width: 60rem;
color: black;
}
@media only screen and (min-width: 768px) {
.header-menu {
display: block;
position: absolute;
top: 0 !important;
z-index: 1000;
width: 96.2%;
}
}
@media only screen and (min-width: 1024px) {
.header-menu {
width: 100%;
}
}
.header-menu-inner {
background: #e0e0e0;
width: 100%;
float: right;
margin-right: 0;
}
.header-menu-inner li {
text-align: center;
}
@media only screen and (min-width: 768px) {
.header-menu-inner li {
width: 15.3652%;
float: left;
margin-right: 1.56176%;
}
.header-menu-inner li:last-child {
width: 15.3652%;
float: right;
margin-right: 0;
}
}
.lt-ie9 .header-menu-inner li {
display: none;
}
.header-menu-button {
display: block;
text-decoration: none;
color: black;
}
@media only screen and (min-width: 768px) {
.header-menu-button {
font-size: 13px;
font-size: 0.8125rem;
padding: 8px 3px;
padding: 0.5rem 0.1875rem;
}
}
@media only screen and (min-width: 1024px) {
.header-menu-button {
font-size: 13px;
font-size: 0.8125rem;
padding: 8px 10px;
padding: 0.5rem 0.625rem;
}
}
.header-menu-button.active {
color: white;
background: black;
}
/* -------------------------------------------------------------------------*/
/* Layout */
html {
font-size: 100%;
}
body {
font-size: 16px;
font-size: 1rem;
line-height: 22px;
line-height: 1.375rem;
color: black;
background: white url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/header-bg.jpg') no-repeat 0 0;
-webkit-background-size: 42% 500px;
-moz-background-size: 42% 500px;
-o-background-size: 42% 500px;
background-size: 42% 500px;
}
@media only screen and (max-width: 320px) {
body {
-webkit-background-size: 46% 320px;
-moz-background-size: 46% 320px;
-o-background-size: 46% 320px;
background-size: 46% 320px;
}
}
@media only screen and (min-width: 768px) {
body {
-webkit-background-size: 42.3% 827px;
-moz-background-size: 42.3% 827px;
-o-background-size: 42.3% 827px;
background-size: 42.3% 827px;
}
}
@media only screen and (min-width: 1024px) {
body {
-webkit-background-size: 42.3% 907px;
-moz-background-size: 42.3% 907px;
-o-background-size: 42.3% 907px;
background-size: 42.3% 907px;
}
}
@media only screen and (min-width: 1330px) {
body {
-webkit-background-size: 46.3% 1007px;
-moz-background-size: 46.3% 1007px;
-o-background-size: 46.3% 1007px;
background-size: 46.3% 1007px;
}
}
.no-backgroundsize body {
background-repeat: repeat-x;
}
a {
text-decoration: none;
padding: 5px;
padding: 0.3125rem;
color: black;
}
a:hover, a:focus, a:active {
text-decoration: underline;
}
img,
video,
embed,
object,
iframe {
max-width: 100%;
height: auto;
}
@media only screen and (min-width: 768px) {
.wrapper {
max-width: 990px;
max-width: 61.9035rem;
padding-left: 15px;
padding-left: 0.9375rem;
padding-right: 15px;
padding-right: 0.9375rem;
margin-left: auto;
margin-right: auto;
}
.wrapper:after {
content: "";
display: table;
clear: both;
}
}
.header {
width: 100%;
float: right;
margin-right: 0;
color: #b0aeb8;
font-size: 12px;
font-size: 0.75rem;
line-height: 46px;
line-height: 2.875rem;
}
.header h1 {
width: 40.75564%;
float: left;
margin-right: 1.56176%;
}
.header .header-volume {
width: 57.6826%;
float: right;
margin-right: 0;
}
@media only screen and (min-width: 768px) {
.header h1 {
width: 66.14608%;
float: left;
margin-right: 1.56176%;
}
.header .header-volume {
width: 32.29216%;
float: right;
margin-right: 0;
}
}
.header h1 {
font-size: 90px;
font-size: 5.625rem;
line-height: 80px;
line-height: 5rem;
margin-top: 35px;
margin-top: 2.1875rem;
color: white;
letter-spacing: 10px;
letter-spacing: 0.625rem;
text-transform: uppercase;
position: relative;
z-index: 2;
}
@media only screen and (max-width: 320px) {
.header h1 {
font-size: 60px;
font-size: 3.75rem;
line-height: 60px;
line-height: 3.75rem;
margin-left: -9px;
margin-left: -0.5625rem;
}
}
@media only screen and (min-width: 768px) {
.header h1 {
margin-top: 0;
font-size: 150px;
font-size: 9.375rem;
line-height: 129px;
line-height: 8.0625rem;
margin: 37px 0 -70px -9px;
margin: 2.3125rem 0 -4.375rem -0.5625rem;
}
}
@media only screen and (min-width: 1024px) {
.header h1 {
font-size: 209px;
font-size: 13.0625rem;
line-height: 159px;
line-height: 9.9375rem;
margin: 37px 0 -120px -29px;
margin: 2.3125rem 0 -7.5rem -1.8125rem;
}
}
@media only screen and (min-width: 1330px) {
.header h1 {
font-size: 279px;
font-size: 17.4375rem;
line-height: 224px;
line-height: 14rem;
margin: 37px 0 -250px -49px;
margin: 2.3125rem 0 -15.625rem -3.0625rem;
}
}
.header h1 span {
display: block;
letter-spacing: 2px;
letter-spacing: 0.125rem;
}
@media only screen and (min-width: 768px) {
.header h1 span {
letter-spacing: -4px;
letter-spacing: -0.25rem;
}
}
@media only screen and (min-width: 768px) {
.header h1 span {
letter-spacing: -16px;
letter-spacing: -1rem;
}
}
.header .header-volume {
text-transform: uppercase;
text-align: right;
letter-spacing: 2px;
letter-spacing: 0.125rem;
word-spacing: -1px;
word-spacing: -0.0625rem;
line-height: 26px;
line-height: 1.625rem;
padding-top: 15px;
padding-top: 0.9375rem;
}
@media only screen and (min-width: 768px) {
.header .header-volume {
line-height: 46px;
line-height: 2.875rem;
padding-top: 125px;
padding-top: 7.8125rem;
}
}
@media only screen and (min-width: 768px) {
.feature-box {
width: 100%;
float: right;
margin-right: 0;
}
.feature-box .barbie {
width: 40.75564%;
float: left;
margin-right: 1.56176%;
}
.feature-box .feature {
width: 57.6826%;
float: right;
margin-right: 0;
}
}
.feature {
font-size: 20px;
font-size: 1.25rem;
line-height: 28px;
line-height: 1.75rem;
padding-top: 25px;
padding-top: 1.5625rem;
}
@media only screen and (min-width: 768px) {
.feature {
font-size: 25px;
font-size: 1.5625rem;
line-height: 33px;
line-height: 2.0625rem;
padding-top: 0;
}
}
.feature h2 {
font-size: 35px;
font-size: 2.1875rem;
line-height: 39px;
line-height: 2.4375rem;
color: #fdcd84;
text-transform: uppercase;
padding-bottom: 17px;
padding-bottom: 1.0625rem;
}
@media only screen and (min-width: 768px) {
.feature h2 {
font-size: 55px;
font-size: 3.4375rem;
line-height: 59px;
line-height: 3.6875rem;
}
}
@media only screen and (min-width: 1024px) {
.feature h2 {
font-size: 75px;
font-size: 4.6875rem;
line-height: 79px;
line-height: 4.9375rem;
}
}
.feature .feature-subtitle {
color: #cbb8a0;
font-size: 13px;
font-size: 0.8125rem;
line-height: 20px;
line-height: 1.25rem;
text-transform: uppercase;
margin: 0;
padding: 0;
letter-spacing: 2px;
letter-spacing: 0.125rem;
padding-left: 2px;
padding-left: 0.125rem;
}
.feature .feature-box {
padding-top: 25px;
padding-top: 1.5625rem;
}
@media only screen and (max-width: 320px) {
.feature .feature-box {
padding-top: 35px;
padding-top: 2.1875rem;
}
}
@media only screen and (min-width: 768px) {
.feature .feature-box {
position: relative;
padding-top: 0;
padding-left: 35px;
padding-left: 2.1875rem;
margin-top: -150px;
margin-top: -9.375rem;
}
}
@media only screen and (min-width: 1024px) {
.feature .feature-box {
margin-top: -185px;
margin-top: -11.5625rem;
}
}
@media only screen and (min-width: 1330px) {
.feature .feature-box {
margin-top: -179px;
margin-top: -11.1875rem;
}
}
.feature p {
margin-bottom: 0;
padding-bottom: 35px;
padding-bottom: 2.1875rem;
}
.feature .feature-picto-box {
padding-bottom: 25px;
padding-bottom: 1.5625rem;
padding-left: 90px;
padding-left: 5.625rem;
background: transparent url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-feature-bg.png') no-repeat left bottom;
}
@media only screen and (max-width: 320px) {
.feature .feature-picto-box {
padding-bottom: 0;
padding-left: 0;
background: transparent none;
}
}
.feature figure {
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
transform: rotate(-4deg);
position: relative;
margin: 0 40px 0 -40px;
margin: 0 2.5rem 0 -2.5rem;
}
@media only screen and (max-width: 320px) {
.feature figure {
margin: 0;
}
}
@media only screen and (min-width: 768px) {
.feature figure {
position: relative;
margin: -35px 0 0 -102px;
margin: -2.1875rem 0 0 -6.375rem;
}
}
@media only screen and (min-width: 1024px) {
.feature figure {
margin: -35px 0 0 -122px;
margin: -2.1875rem 0 0 -7.625rem;
}
}
@media only screen and (min-width: 1330px) {
.feature figure {
margin: -45px -159px 0 -172px;
margin: -2.8125rem -9.9375rem 0 -10.75rem;
}
}
.barbie {
font-size: 19px;
font-size: 1.1875rem;
line-height: 27px;
line-height: 1.6875rem;
color: #6e6c77;
word-spacing: -2px;
word-spacing: -0.125rem;
text-align: center;
}
@media only screen and (min-width: 768px) {
.barbie {
padding-top: 57px;
padding-top: 3.5625rem;
}
}
@media only screen and (min-width: 1024px) {
.barbie {
padding-top: 107px;
padding-top: 6.6875rem;
}
}
@media only screen and (min-width: 1330px) {
.barbie {
padding-top: 207px;
padding-top: 12.9375rem;
}
.barbie .inner-box {
padding-right: 10px;
padding-right: 0.625rem;
}
}
.barbie h2 {
font-size: 36px;
font-size: 2.25rem;
line-height: 45px;
line-height: 2.8125rem;
color: #5f5d66;
padding-bottom: 10px;
padding-bottom: 0.625rem;
text-align: left;
}
@media only screen and (min-width: 768px) {
.barbie h2 {
text-align: center;
}
}
.barbie p {
text-align: left;
}
@media only screen and (min-width: 768px) {
.barbie p {
text-align: center;
}
}
.barbie .barbie-picto {
margin: 0 0 4px 0;
margin: 0 0 0.25rem 0;
}
@media only screen and (min-width: 768px) {
.barbie .barbie-picto {
position: relative;
z-index: 3;
margin: -3px 0 4px -16px;
margin: -0.1875rem 0 0.25rem -1rem;
}
}
@media only screen and (min-width: 1024px) {
.barbie .barbie-picto {
margin: -3px 0 4px -56px;
margin: -0.1875rem 0 0.25rem -3.5rem;
}
}
@media only screen and (min-width: 1330px) {
.barbie .barbie-picto {
margin: -3px 0 4px -170px;
margin: -0.1875rem 0 0.25rem -10.625rem;
}
}
.bullets-box {
text-align: center;
width: 100%;
float: right;
margin-right: 0;
}
@media only screen and (min-width: 768px) {
.bullets-box .staying {
width: 100%;
float: right;
margin-right: 0;
}
.bullets-box .bullets {
width: 100%;
float: right;
margin-right: 0;
}
.bullets-box .bullets ul {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.bullets-box .bullets li {
-webkit-box-flex: auto;
-moz-box-flex: auto;
-webkit-flex: auto;
-ms-flex: auto;
flex: auto;
}
.no-flexbox .bullets-box .bullets li {
float: left;
}
}
@media only screen and (min-width: 1024px) {
.bullets-box .staying {
width: 15.3652%;
float: left;
margin-right: 1.56176%;
}
.bullets-box .bullets {
width: 83.07304%;
float: right;
margin-right: 0;
}
}
.bullets {
font-size: 15px;
font-size: 0.9375rem;
line-height: 24px;
line-height: 1.5rem;
word-spacing: -1px;
word-spacing: -0.0625rem;
letter-spacing: -1px;
letter-spacing: -0.0625rem;
color: #a97d35;
text-align: center;
}
.bullets .inner-box {
padding: 0;
}
@media only screen and (min-width: 768px) {
.bullets {
padding: 0 15px;
padding: 0 0.9375rem;
}
}
.bullets h2 {
text-transform: uppercase;
font-weight: normal;
font-size: 15px;
font-size: 0.9375rem;
line-height: 24px;
line-height: 1.5rem;
word-spacing: 2px;
word-spacing: 0.125rem;
padding: 8px 0 10px 0;
padding: 0.5rem 0 0.625rem 0;
border-top: 1px solid #e5e5e5;
border-top: 0.0625rem solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
border-bottom: 0.0625rem solid #e5e5e5;
}
.bullets h2 span {
display: inline-block;
vertical-align: middle;
}
.bullets h2 span.bullets-headline {
padding-right: 4px;
padding-right: 0.25rem;
}
.bullets h2 span.bullets-headline-sub {
font-size: 12px;
font-size: 0.75rem;
line-height: 19px;
line-height: 1.1875rem;
color: #e0c167;
letter-spacing: 1px;
letter-spacing: 0.0625rem;
word-spacing: 1px;
word-spacing: 0.0625rem;
}
.bullets ul {
color: #e0e0e0;
font-size: 26px;
font-size: 1.625rem;
line-height: 29px;
line-height: 1.8125rem;
padding: 15px 0 29px 0;
padding: 0.9375rem 0 1.8125rem 0;
}
@media only screen and (min-width: 1024px) {
.bullets ul {
font-size: 32px;
font-size: 2rem;
line-height: 35px;
line-height: 2.1875rem;
}
}
@media only screen and (min-width: 1024px) {
.bullets ul {
margin: 0 -15px 0 0;
margin: 0 -0.9375rem 0 0;
}
}
.bullets ul li {
padding: 14px 12px 28px 12px;
padding: 0.875rem 0.75rem 1.75rem 0.75rem;
}
@media only screen and (min-width: 768px) {
.bullets ul li {
border-right: 1px solid #e5e5e5;
border-right: 0.0625rem solid #e5e5e5;
}
}
.bullets ul li.bullets-first {
padding-left: 0;
}
.bullets ul li.last {
border-right: none;
padding-right: 0;
}
.bullets ul p {
margin: 0;
padding: 0;
}
@media only screen and (min-width: 768px) {
.bullets ul p {
margin-top: -45px;
margin-top: -2.8125rem;
}
}
@media only screen and (min-width: 1024px) {
.bullets ul p {
margin-top: -65px;
margin-top: -4.0625rem;
}
}
@media only screen and (min-width: 768px) {
.bullets ul figure img {
margin-top: -5px;
margin-top: -0.3125rem;
position: relative;
}
}
.bullets ul span {
display: block;
}
.bullets ul span.bullets-name {
text-transform: uppercase;
}
.bullets ul .bullets-first {
font-size: 28px;
font-size: 1.75rem;
line-height: 31px;
line-height: 1.9375rem;
}
.bullets ul .bullets-first .bullets-name {
font-size: 24px;
font-size: 1.5rem;
line-height: 30px;
line-height: 1.875rem;
}
@media only screen and (min-width: 1024px) {
.bullets ul .bullets-first {
font-size: 32px;
font-size: 2rem;
line-height: 35px;
line-height: 2.1875rem;
}
.bullets ul .bullets-first .bullets-name {
font-size: 28px;
font-size: 1.75rem;
line-height: 34px;
line-height: 2.125rem;
}
}
.bullets ul .bullets-second .bullets-name {
font-size: 24px;
font-size: 1.5rem;
line-height: 30px;
line-height: 1.875rem;
}
@media only screen and (min-width: 1024px) {
.bullets ul .bullets-second .bullets-name {
font-size: 28px;
font-size: 1.75rem;
line-height: 34px;
line-height: 2.125rem;
}
}
.bullets ul .bullets-third {
font-size: 31px;
font-size: 1.9375rem;
line-height: 33px;
line-height: 2.0625rem;
}
@media only screen and (min-width: 1024px) {
.bullets ul .bullets-third {
font-size: 39px;
font-size: 2.4375rem;
line-height: 40px;
line-height: 2.5rem;
}
}
@media only screen and (min-width: 768px) {
.bullets ul .bullets-third figure {
margin-top: 3px;
margin-top: 0.1875rem;
}
.bullets ul .bullets-third figcaption {
padding-top: 28px;
padding-top: 1.75rem;
}
}
@media only screen and (min-width: 1024px) {
.bullets ul .bullets-third figure {
margin-top: 7px;
margin-top: 0.4375rem;
}
.bullets ul .bullets-third figcaption {
padding-top: 24px;
padding-top: 1.5rem;
}
}
.bullets ul .bullets-third .bullets-caliber {
font-size: 27px;
font-size: 1.6875rem;
line-height: 32px;
line-height: 2rem;
}
@media only screen and (min-width: 1024px) {
.bullets ul .bullets-third .bullets-caliber {
font-size: 31px;
font-size: 1.9375rem;
line-height: 36px;
line-height: 2.25rem;
}
}
.bullets ul .bullets-third .bullets-name {
font-size: 36px;
font-size: 2.25rem;
line-height: 40px;
line-height: 2.5rem;
}
@media only screen and (min-width: 1024px) {
.bullets ul .bullets-third .bullets-name {
font-size: 40px;
font-size: 2.5rem;
line-height: 44px;
line-height: 2.75rem;
}
}
.bullets ul .bullets-fourth {
font-size: 32px;
font-size: 2rem;
line-height: 33px;
line-height: 2.0625rem;
}
@media only screen and (min-width: 768px) {
.bullets ul .bullets-fourth figure {
margin-top: 2px;
margin-top: 0.125rem;
}
.bullets ul .bullets-fourth p {
margin-top: -74px;
margin-top: -4.625rem;
}
}
@media only screen and (min-width: 1024px) {
.bullets ul .bullets-fourth {
font-size: 40px;
font-size: 2.5rem;
line-height: 41px;
line-height: 2.5625rem;
}
.bullets ul .bullets-fourth figure {
margin-top: -2px;
margin-top: -0.125rem;
}
.bullets ul .bullets-fourth p {
margin-top: -78px;
margin-top: -4.875rem;
}
}
.bullets ul .bullets-fourth .bullets-caliber {
font-size: 83px;
font-size: 5.1875rem;
line-height: 81px;
line-height: 5.0625rem;
}
@media only screen and (min-width: 1024px) {
.bullets ul .bullets-fourth .bullets-caliber {
font-size: 87px;
font-size: 5.4375rem;
line-height: 84px;
line-height: 5.25rem;
}
}
.bullets ul .bullets-fourth .bullets-name {
font-size: 34px;
font-size: 2.125rem;
line-height: 37px;
line-height: 2.3125rem;
}
@media only screen and (min-width: 1024px) {
.bullets ul .bullets-fourth .bullets-name {
font-size: 38px;
font-size: 2.375rem;
line-height: 41px;
line-height: 2.5625rem;
}
}
.bullets ul .bullets-fifth {
font-size: 24px;
font-size: 1.5rem;
line-height: 31px;
line-height: 1.9375rem;
}
@media only screen and (min-width: 768px) {
.bullets ul .bullets-fifth figure {
margin-top: -5px;
margin-top: -0.3125rem;
}
.bullets ul .bullets-fifth p {
margin-top: -62px;
margin-top: -3.875rem;
}
}
@media only screen and (min-width: 1024px) {
.bullets ul .bullets-fifth {
font-size: 32px;
font-size: 2rem;
line-height: 39px;
line-height: 2.4375rem;
}
.bullets ul .bullets-fifth figure {
margin-top: -9px;
margin-top: -0.5625rem;
}
.bullets ul .bullets-fifth p {
margin-top: -68px;
margin-top: -4.25rem;
}
}
.bullets ul .bullets-fifth .bullets-caliber {
font-size: 83px;
font-size: 5.1875rem;
line-height: 81px;
line-height: 5.0625rem;
}
@media only screen and (min-width: 1024px) {
.bullets ul .bullets-fifth .bullets-caliber {
font-size: 87px;
font-size: 5.4375rem;
line-height: 84px;
line-height: 5.25rem;
}
}
.bullets ul .bullets-fifth .bullets-name {
font-size: 34px;
font-size: 2.125rem;
line-height: 39px;
line-height: 2.4375rem;
}
@media only screen and (min-width: 1024px) {
.bullets ul .bullets-fifth .bullets-name {
font-size: 38px;
font-size: 2.375rem;
line-height: 43px;
line-height: 2.6875rem;
}
}
.bullets ul .bullets-caliber {
font-size: 67px;
font-size: 4.1875rem;
line-height: 79px;
line-height: 4.9375rem;
}
@media only screen and (min-width: 1024px) {
.bullets ul .bullets-caliber {
font-size: 79px;
font-size: 4.9375rem;
line-height: 83px;
line-height: 5.1875rem;
}
}
.staying {
padding-bottom: 25px;
padding-bottom: 1.5625rem;
font-size: 14px;
font-size: 0.875rem;
line-height: 19px;
line-height: 1.1875rem;
}
@media only screen and (min-width: 1024px) {
.staying {
text-align: right;
padding-bottom: 0;
}
}
.staying h2 {
color: #24795a;
font-size: 21px;
font-size: 1.3125rem;
line-height: 30px;
line-height: 1.875rem;
padding-bottom: 4px;
padding-bottom: 0.25rem;
text-align: left;
}
@media only screen and (min-width: 1024px) {
.staying h2 {
text-align: right;
}
}
.staying p {
text-align: left;
}
@media only screen and (min-width: 1024px) {
.staying p {
text-align: right;
padding-left: 20px;
padding-left: 1.25rem;
padding-bottom: 7px;
padding-bottom: 0.4375rem;
}
}
@media only screen and (min-width: 1024px) {
.staying .staying-picto {
margin-right: -5px;
margin-right: -0.3125rem;
margin-bottom: -29px;
margin-bottom: -1.8125rem;
position: relative;
}
}
@media only screen and (min-width: 768px) {
.staying .staying-content-box {
width: 66.14608%;
float: left;
margin-right: 1.56176%;
}
.staying .staying-picto-box {
width: 32.29216%;
float: right;
margin-right: 0;
}
}
@media only screen and (min-width: 1024px) {
.staying .staying-content-box,
.staying .staying-picto-box {
width: 100%;
float: right;
margin-right: 0;
}
}
.road {
background-color: #71625a;
color: white;
width: 100%;
float: right;
margin-right: 0;
}
@media only screen and (min-width: 1024px) {
.road {
margin: 0 -15px;
margin: 0 -0.9375rem;
}
}
@media only screen and (min-width: 1024px) {
.road {
margin: 0;
}
}
.road .inner-box {
padding: 0;
}
.road h2 {
font-size: 26px;
font-size: 1.625rem;
line-height: 35px;
line-height: 2.1875rem;
padding: 15px;
padding: 0.9375rem;
text-align: center;
text-transform: uppercase;
background-color: #524741;
}
@media only screen and (min-width: 768px) {
.road h2 {
font-size: 49px;
font-size: 3.0625rem;
line-height: 79px;
line-height: 4.9375rem;
padding: 18px 10px;
padding: 1.125rem 0.625rem;
}
}
.road p {
font-size: 16px;
font-size: 1rem;
line-height: 23px;
line-height: 1.4375rem;
padding: 15px 15px 0 15px;
padding: 0.9375rem 0.9375rem 0 0.9375rem;
margin-bottom: 5px;
margin-bottom: 0.3125rem;
}
@media only screen and (min-width: 768px) {
.road p {
font-size: 26px;
font-size: 1.625rem;
line-height: 35px;
line-height: 2.1875rem;
padding: 20px 26px 0 26px;
padding: 1.25rem 1.625rem 0 1.625rem;
margin-bottom: 15px;
margin-bottom: 0.9375rem;
}
}
.road p.road-picto-source {
padding-top: 0;
margin-bottom: 0;
padding-bottom: 10px;
padding-bottom: 0.625rem;
}
@media only screen and (min-width: 768px) {
.road p.road-picto-source {
padding-bottom: 10px;
padding-bottom: 0.625rem;
}
}
.road p cite,
.road p small,
.road p a {
color: rgba(255, 255, 255, 0.5);
font-style: normal;
}
@media only screen and (min-width: 768px) {
.road p cite,
.road p small,
.road p a {
font-size: 18px;
font-size: 1.125rem;
}
}
.road p a:hover, .road p a:focus, .road p a:active {
color: white;
}
.road-picto-box {
position: relative;
}
.road-picto-map {
position: absolute;
bottom: 0;
right: 0;
display: block;
padding: 0;
}
.bottomline-box {
background: transparent url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-heads-small.jpg') no-repeat top left;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
width: 100%;
float: right;
margin-right: 0;
}
@media only screen and (min-width: 768px) {
.bottomline-box {
background: transparent url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-heads-large.jpg') no-repeat top left;
}
}
@media only screen and (min-width: 1024px) {
.bottomline-box {
-webkit-background-size: auto auto;
-moz-background-size: auto auto;
-o-background-size: auto auto;
background-size: auto auto;
}
.bottomline-box .bottomline {
width: 74.60956%;
float: left;
margin-right: 1.56176%;
}
.bottomline-box .events {
width: 23.82868%;
float: right;
margin-right: 0;
}
}
.bottomline {
padding-bottom: 25px;
padding-bottom: 1.5625rem;
}
@media only screen and (min-width: 768px) {
.bottomline {
padding-bottom: 35px;
padding-bottom: 2.1875rem;
}
}
@media only screen and (min-width: 1024px) {
.bottomline {
padding-bottom: 0;
}
}
.bottomline h2 {
border-bottom: 21px solid black;
border-bottom: 1.3125rem solid black;
padding: 0 15px 17px 15px;
padding: 0 0.9375rem 1.0625rem 0.9375rem;
font-size: 26px;
font-size: 1.625rem;
text-transform: uppercase;
}
@media only screen and (min-width: 768px) {
.bottomline h2 {
font-size: 80px;
font-size: 5rem;
line-height: 88px;
line-height: 5.5rem;
padding: 0 0 17px 0;
padding: 0 0 1.0625rem 0;
}
}
.bottomline h3 {
border-bottom: 3px solid black;
border-bottom: 0.1875rem solid black;
padding: 10px 15px 19px 15px;
padding: 0.625rem 0.9375rem 1.1875rem 0.9375rem;
font-size: 22px;
font-size: 1.375rem;
word-spacing: -2px;
word-spacing: -0.125rem;
}
@media only screen and (min-width: 768px) {
.bottomline h3 {
font-size: 39px;
font-size: 2.4375rem;
line-height: 48px;
line-height: 3rem;
padding: 10px 0 19px 0;
padding: 0.625rem 0 1.1875rem 0;
}
}
.bottomline ul {
font-size: 16px;
font-size: 1rem;
line-height: 23px;
line-height: 1.4375rem;
padding-top: 12px;
padding-top: 0.75rem;
}
@media only screen and (min-width: 768px) {
.bottomline ul {
font-size: 22px;
font-size: 1.375rem;
line-height: 29px;
line-height: 1.8125rem;
}
}
.bottomline li {
display: inline;
background: transparent url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/list-tri.gif') no-repeat left center;
padding: 0 4px 0 23px;
padding: 0 0.25rem 0 1.4375rem;
}
.bottomline li:first-child {
background-image: none;
padding-left: 0;
}
.bottomline-inner-box {
padding-top: 95px;
padding-top: 5.9375rem;
}
@media only screen and (min-width: 481px) {
.bottomline-inner-box {
padding-top: 150px;
padding-top: 9.375rem;
}
}
@media only screen and (min-width: 641px) {
.bottomline-inner-box {
padding-top: 165px;
padding-top: 10.3125rem;
}
}
@media only screen and (min-width: 768px) {
.bottomline-inner-box {
padding-top: 165px;
padding-top: 10.3125rem;
}
}
@media only screen and (min-width: 1024px) {
.bottomline-inner-box {
padding-right: 15px;
padding-right: 0.9375rem;
background: transparent url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/artikel-seperator.png') no-repeat top right;
padding-top: 165px;
padding-top: 10.3125rem;
}
}
.events {
background-color: #3a83bb;
color: white;
padding-top: 15px;
padding-top: 0.9375rem;
margin-bottom: 25px;
margin-bottom: 1.5625rem;
font-size: 16px;
font-size: 1rem;
line-height: 24px;
line-height: 1.5rem;
width: 100%;
float: right;
margin-right: 0;
}
@media only screen and (min-width: 768px) {
.events .events-picto {
width: 32.29216%;
float: left;
margin-right: 1.56176%;
}
.events .events-rating {
width: 32.29216%;
float: left;
margin-right: 1.56176%;
}
.events .events-date {
width: 32.29216%;
float: right;
margin-right: 0;
}
}
@media only screen and (min-width: 1024px) {
.events {
margin-bottom: 0;
margin-top: 15px;
margin-top: 0.9375rem;
}
.events .events-picto,
.events .events-rating,
.events .events-date {
width: 100%;
float: right;
margin-right: 0;
}
}
.events figcaption {
display: none;
}
@media only screen and (min-width: 768px) {
.events figcaption {
display: block;
}
}
@media only screen and (min-width: 1024px) {
.events figcaption {
display: none;
}
}
.events figcaption p {
margin: 0;
padding: 0;
}
.events h2,
.events h3 {
font-weight: normal;
}
.events h2,
.events .events-rating-headline {
font-size: 31px;
font-size: 1.9375rem;
line-height: 40px;
line-height: 2.5rem;
text-transform: uppercase;
padding-bottom: 13px;
padding-bottom: 0.8125rem;
border-bottom: 8px solid #619cc9;
border-bottom: 0.5rem solid #619cc9;
}
@media only screen and (min-width: 768px) {
.events h2,
.events .events-rating-headline {
padding: 15px 0 13px 0;
padding: 0.9375rem 0 0.8125rem 0;
margin: 0 10px;
margin: 0 0.625rem;
}
}
.events h2 span,
.events .events-rating-headline span {
font-size: 21px;
font-size: 1.3125rem;
line-height: 30px;
line-height: 1.875rem;
display: block;
}
.events .events-picto {
text-align: center;
padding-bottom: 15px;
padding-bottom: 0.9375rem;
}
@media only screen and (min-width: 768px) {
.events .events-picto {
position: relative;
margin-top: -42px;
margin-top: -2.625rem;
}
}
@media only screen and (min-width: 1024px) {
.events .events-picto {
margin-top: -52px;
margin-top: -3.25rem;
}
}
@media only screen and (min-width: 768px) {
.events .events-picto img {
width: 68%;
}
}
@media only screen and (min-width: 1024px) {
.events .events-picto img {
width: auto;
}
}
.events .events-date,
.events .events-rating-review {
padding: 8px 0 15px 0;
padding: 0.5rem 0 0.9375rem 0;
}
@media only screen and (min-width: 768px) {
.events .events-date,
.events .events-rating-review {
padding: 8px 10px 15px 10px;
padding: 0.5rem 0.625rem 0.9375rem 0.625rem;
}
}
.events .events-rating .events-rating-review {
width: 100%;
float: right;
margin-right: 0;
border-top: 5px solid #3476a8;
border-top: 0.3125rem solid #3476a8;
border-bottom: 5px solid #3476a8;
border-bottom: 0.3125rem solid #3476a8;
}
@media only screen and (min-width: 768px) {
.events .events-rating .events-rating-review {
border-bottom: none;
}
}
@media only screen and (min-width: 1024px) {
.events .events-rating .events-rating-review {
border-bottom: 5px solid #3476a8;
border-bottom: 0.3125rem solid #3476a8;
}
}
.events .events-rating .events-rating-review h3 {
width: 40.75564%;
float: left;
margin-right: 1.56176%;
font-size: 14px;
font-size: 0.875rem;
line-height: 28px;
line-height: 1.75rem;
color: #88aed1;
}
@media only screen and (min-width: 768px) {
.events .events-rating .events-rating-review h3 {
width: 49.21912%;
float: left;
margin-right: 1.56176%;
}
}
.events .events-rating .events-rating-review h3 span {
font-size: 32px;
font-size: 2rem;
line-height: 25px;
line-height: 1.5625rem;
display: block;
}
.events .events-rating .events-rating-review .events-rating-review-percent {
width: 57.6826%;
float: right;
margin-right: 0;
font-size: 54px;
font-size: 3.375rem;
line-height: 61px;
line-height: 3.8125rem;
margin: 0;
padding: 0;
}
@media only screen and (min-width: 768px) {
.events .events-rating .events-rating-review .events-rating-review-percent {
width: 49.21912%;
float: right;
margin-right: 0;
}
}
.events .events-rating-review-box {
width: 100%;
float: right;
margin-right: 0;
}
@media only screen and (min-width: 1024px) {
.events .events-rating {
width: 100%;
float: right;
margin-right: 0;
}
}
@media only screen and (min-width: 768px) {
.events .events-rating h2 {
display: none;
}
}
@media only screen and (min-width: 1024px) {
.events .events-rating h2 {
display: block;
}
}
.events .events-rating h3 {
font-size: 21px;
font-size: 1.3125rem;
line-height: 30px;
line-height: 1.875rem;
text-transform: uppercase;
}
.events .events-rating .events-summary {
border-bottom: 2px dashed #234f70;
border-bottom: 0.125rem dashed #234f70;
margin-bottom: 0;
padding: 15px 0 22px 0;
padding: 0.9375rem 0 1.375rem 0;
}
@media only screen and (min-width: 768px) {
.events .events-rating .events-summary {
padding: 15px 10px 22px 10px;
padding: 0.9375rem 0.625rem 1.375rem 0.625rem;
}
}
.events .events-date {
border-top: 2px dashed #234f70;
border-top: 0.125rem dashed #234f70;
padding-bottom: 25px;
padding-bottom: 1.5625rem;
background: transparent url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-events-bg.png') no-repeat bottom center;
}
@media only screen and (min-width: 1024px) {
.events .events-date {
width: 100%;
float: right;
margin-right: 0;
}
}
@media only screen and (min-width: 768px) {
.events .events-date {
background: transparent none;
border-top: none;
padding-top: 6%;
padding-top: 6%;
padding-bottom: 0;
}
}
@media only screen and (min-width: 1024px) {
.events .events-date {
background: transparent url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-events-bg.png') no-repeat bottom center;
border-top: 2px dashed #234f70;
border-top: 0.125rem dashed #234f70;
padding-bottom: 25px;
padding-bottom: 1.5625rem;
padding-top: 0;
}
}
.events .events-date h3 {
text-transform: uppercase;
color: #88aed1;
font-size: 14px;
font-size: 0.875rem;
line-height: 14px;
line-height: 0.875rem;
margin: 12px 0 4px 0;
margin: 0.75rem 0 0.25rem 0;
padding: 0 26%;
padding: 0 26%;
text-align: center;
background: #619cc9;
}
@media only screen and (min-width: 768px) {
.events .events-date h3 {
padding: 0 39px;
padding: 0 2.4375rem;
}
}
.events .events-date h3 span {
background-color: #3a83bb;
display: block;
}
.events .events-date p {
margin: 0;
padding: 0;
text-align: center;
font-size: 27px;
font-size: 1.6875rem;
line-height: 33px;
line-height: 2.0625rem;
text-transform: uppercase;
}
.events .events-date p .events-country {
font-size: 28px;
font-size: 1.75rem;
line-height: 34px;
line-height: 2.125rem;
color: #88aed1;
margin-right: -3px;
margin-right: -0.1875rem;
}
.events .events-date .events-time {
font-size: 39px;
font-size: 2.4375rem;
line-height: 43px;
line-height: 2.6875rem;
text-transform: uppercase;
text-align: center;
display: block;
}
.events .events-rating-row {
margin: 11px 0 7px 0;
margin: 0.6875rem 0 0.4375rem 0;
padding: 0;
width: 100%;
float: right;
margin-right: 0;
background: #619cc9;
}
.events .events-rating-row span {
background-color: white;
display: block;
width: 20%;
height: 8px;
height: 0.5rem;
}
@media only screen and (min-width: 768px) {
.events .event-box {
background: transparent url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-events-bg.png') no-repeat bottom center;
}
}
@media only screen and (min-width: 1024px) {
.events .event-box {
width: 228px;
width: 14.25rem;
background: transparent none;
}
}
.water {
background: transparent url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-water-small.png') no-repeat top left;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
width: 100%;
float: right;
margin-right: 0;
padding: 0 0 0 0;
padding: 0 0 0 0;
font-style: italic;
font-size: 16px;
font-size: 1rem;
line-height: 25px;
line-height: 1.5625rem;
color: #5e6c74;
}
@media only screen and (min-width: 481px) {
.water {
padding: 12px 0 0 0;
padding: 0.75rem 0 0 0;
}
}
@media only screen and (min-width: 641px) {
.water {
padding: 35px 0 0 0;
padding: 2.1875rem 0 0 0;
}
}
@media only screen and (min-width: 768px) {
.water {
background: transparent url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-water-middle.png') no-repeat top center;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-size: 100% auto;
}
}
@media only screen and (min-width: 1024px) {
.water {
padding: 80px 0 0 25px;
padding: 5rem 0 0 1.5625rem;
background: transparent url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/85846/picto-water-large.png') no-repeat top center;
-webkit-background-size: auto auto;
-moz-background-size: auto auto;
-o-background-size: auto auto;
background-size: auto auto;
margin-top: -53px;
margin-top: -3.3125rem;
position: relative;
z-index: 99;
}
}
.water h2 {
color: #a0b4c0;
font-size: 82px;
font-size: 5.125rem;
margin-bottom: 18px;
margin-bottom: 1.125rem;
margin-top: 10px;
margin-top: 0.625rem;
}
@media only screen and (min-width: 768px) {
.water h2 {
margin-bottom: 18px;
margin-bottom: 1.125rem;
}
}
@media only screen and (min-width: 1024px) {
.water .first {
width: 74.60956%;
float: left;
margin-right: 1.56176%;
margin-left: 25.39044%;
text-align: right;
}
.water .first p {
padding: 0 18px 0 0;
padding: 0 1.125rem 0 0;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-ms-transform: rotate(2deg);
-o-transform: rotate(2deg);
transform: rotate(2deg);
}
}
@media only screen and (min-width: 1024px) {
.water .second {
width: 74.60956%;
float: left;
margin-right: 1.56176%;
margin-right: 25.39044%;
}
.water .second p {
padding: 0 15px 15px 0;
padding: 0 0.9375rem 0.9375rem 0;
margin-top: -20px;
margin-top: -1.25rem;
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
-ms-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
transform: rotate(-1deg);
}
}
@media only screen and (min-width: 1024px) {
.water .third {
width: 83.07304%;
float: left;
margin-right: 1.56176%;
margin-left: 8.46348%;
margin-right: 8.46348%;
}
.water .third p {
padding: 0 62px 0 33px;
padding: 0 3.875rem 0 2.0625rem;
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
-ms-transform: rotate(1deg);
-o-transform: rotate(1deg);
transform: rotate(1deg);
}
}
.footer {
font-size: 13px;
font-size: 0.8125rem;
line-height: 19px;
line-height: 1.1875rem;
color: #989898;
border-top: 1px solid #e5e5e5;
padding: 21px 0;
padding: 1.3125rem 0;
margin: 54px 0 35px 0;
margin: 3.375rem 0 2.1875rem 0;
width: 100%;
float: right;
margin-right: 0;
}
.footer .footer-copyright {
font-size: 17px;
font-size: 1.0625rem;
color: #8c8c8c;
padding-bottom: 0;
}
.footer .footer-copyright span {
color: #666666;
letter-spacing: 1px;
}
.footer .footer-copyright small {
font-size: 17px;
font-size: 1.0625rem;
}
@media only screen and (min-width: 768px) {
.footer .footer-copyright {
width: 74.60956%;
float: left;
margin-right: 1.56176%;
}
}
.footer .footer-address {
font-style: normal;
padding-top: 2px;
padding-top: 0.125rem;
}
@media only screen and (min-width: 768px) {
.footer .footer-address {
width: 23.82868%;
float: right;
margin-right: 0;
text-align: right;
}
}
/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important;
/* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links for images, or javascript/internal links
*/
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
/* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
$('.responsimg').responsImg({
allowDownsize: true
});
function loadMenu() {
// Mobile Menu
if(Modernizr.mq('only screen and (max-width: 767px)')) {
var $menu = $('#mobileMenu'),
$html = $('html, body');
$menu.mmenu();
$menu.find( 'li > a' ).on(
'click',
function()
{
var href = $(this).attr( 'href' );
// if the clicked link is linked to an anchor, scroll the page to that anchor
if ( href.slice( 0, 1 ) == '#' )
{
$menu.one(
'closed.mm',
function()
{
setTimeout(
function()
{
$html.animate({
scrollTop: $( href ).offset().top
});
}, 10
);
}
);
}
}
);
}
// Desktop Menu
if(Modernizr.mq('only screen and (min-width: 768px)')) {
$('.header-menu').smint({
'scrollSpeed' : 1000
});
}
}
loadMenu();
/* Resize function works not correct with or in codepen sorry */
$(window).resize(function() {
loadMenu();
});
// IE8 no Main Navigation
if (navigator.appVersion.indexOf("MSIE 8.")!=-1) {
$('.header-menu').hide();
}
