/*! HTML5 Boilerplate v5.1.0 | MIT License | https://html5boilerplate.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 {
    color: #222;
    font-size: 1em;
    line-height: 1.66em;
}
/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * 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
 */
/* hello */
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}
/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}
/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}
/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}
/* ==========================================================================
    Fonts
    ========================================================================= */
/*
    Example:

    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-family: 'Roboto', sans-serif;

    h1 { font-family: ‘Metrophobic’, Arial, serif; font-weight: 400; }

*/

body {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 1em;
    line-height: 1.125em;
}
/* Helper Classes */
/* Not in use
.r_100 {
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
}
*/

/* Not in use 
.r_100_I {
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    font-style: italic;
}
*/

.r_300 {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

.r_300_I {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-style: italic;
}
/* Not in use
.r_400 {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}
*/

/* Not in use
.r_400_I {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: italic;
}
*/
.r_500 {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
}

.r_500_I {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-style: italic;
}

.r_700 {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
}
/* Not in use
.r_700_I {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    font-style: italic;
}
*/

/* Not in use
.r_900 {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
}
*/

/* Not in use
.r_900_I {
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    font-style: italic;
}
*/

/* Not in use
.yk_200 {
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-weight: 200;
}
*/

/* Not in use 
.yk_300 {
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-weight: 300;
}
*/

.yk_400 {
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-weight: 400;
}

.yk_700 {
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-weight: 700;
}

.handStyle {
    font-family: 'Mr Dafoe', cursive;
    font-weight: 400;
    font-size: 1.6em;
    line-height: 1em;
    margin: 0.66em 0;
    text-shadow: 0 1px 2px #fff;
    color: black;
}

a {
    color: rgb(183, 41, 53);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

button,
a.primary {
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-weight: 400;
}

b,
strong {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
}

i,
em {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-style: italic;
}
/*  If theres a bold italic text we set it to bold, but force the
        italicisation. provided both orders so any order of html
        would work and it doesnt matter if you put
        STRONG EM or EM STRONG
    */

strong em,
em strong,
b em,
em b,
strong i,
i strong,
b i,
i b {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-style: italic;
}
/*em strong,
    em b,
    i strong,
    i b {
        font-family:'Roboto',sans-serif;
        font-weight:500;
        font-style: italic;
    }*/
/* ==========================================================================
   Author's custom styles - Feature phone
   ========================================================================== */

.globalWrapper > header,
.globalWrapper > footer {
    padding: 0.5em;
}

.globalWrapper > #endFooter {
    padding: 50px 0.5em;
}

.globalWrapper > * {
    padding: 25px 0.5em 45px;
    overflow: hidden;
}

img {
    max-width: 100%;
}

#hero:before,
#hero:after,
#aboutJeff:before,
#aboutJeff:after,
#drivingConditions:before,
#drivingConditions:after,
#mediaGallery:before,
#mediaGallery:after,
#aboutCar:before,
#aboutCar:after {
    content: " ";
    /* 1 */

    display: table;
    /* 2 */
}

#hero:after,
#aboutJeff:after,
#drivingConditions:after,
#mediaGallery:after,
#aboutCar:after {
    clear: both;
}

.logo {
    width: 233px;
    height: 61px;
}

#hero {
    padding: 0.5em;
}

h1,
h2,
h4,
h5,
h6 {
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-weight: 700;
    line-height: 1.33em;
}

h1 {
    font-size: 2em;
    color: #fff;
    font-weight: 400;
    text-transform: uppercase;
}

h2 {
    /*color: #582d31;*/
    color: #B72937;
    font-size: 2.4em;
    text-transform: uppercase;
    margin: 0em 0 0.8em;
}

#hero h1 span {
    color: #fff;
}

#hero h3 {
    background-color: #83bfdb;
    font-weight: normal;
    font-size: 0.875em;
    color: #fff;
    padding: 0.4em;
    -moz-border-top-left-radius: 8px;
    -webkit-border-top-left-radius: 8px;
    border-top-left-radius: 8px;

    -moz-border-top-right-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    border-top-right-radius: 8px;
}

img {
    display: block;
    max-width: 100%;
}

p {
    color: rgb(161, 161, 161);
}

nav ul li {
    margin: 0.66em 0;
}

nav a {
    color: rgb(59, 59, 61);
    border-bottom: 1px solid #fff;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.8571428571428571em;
}

nav a:hover,
nav a.active {
    text-decoration: none;
    color: rgb(183, 41, 53);
    border-bottom: 1px solid rgb(183, 41, 53);
}

nav a.active {
    border-bottom: 4px solid rgb(183, 41, 53);
    font-weight: 700;
}

p.details {
    color: rgb(11, 145, 183);
    margin: 0 0 0 25px;
    font-size: 1.3em;
    font-weight: bold;
}

.telephone,
.mail {
    text-decoration: none;
    color: inherit;
}
/*HERO*/

#hero {
    background: rgb(11, 145, 183);
}

#hero h2 {
    background-color: rgb(130, 190, 216);
}
/* MEET JEFF */

.overlay,
.modal {
    display: none;
    cursor: pointer;
}

.modal p {
    color: black;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 60;
}
/* Modal size and position is set via JS but we provide a fallback here */

.modal {
    border: 2px solid rgb(183, 41, 53);
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    /*height: 200px;*/

    margin-left: -150px;
    margin-top: -100px;
    padding: 1em;
    font-size: 0.8571428571428571em;
    background-color: #fff;
    text-align: left;
    color: black;
    z-index: 70;
    /* keep on top of other elements on the page */

    overflow-y: scroll;
}

.modal:after {
    position: absolute;
    top: 5px;
    right: 5px;
    color: rgb(183, 41, 53);
    display: block;
    text-align: center;
    content: 'X';
    border: 2px solid rgb(183, 41, 53);
    -moz-border-radius:50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    height: 2em;
    width: 2em;
    font-weight: 700;
    line-height: 1.9em;
}
/* BUTTONS */

button.tertiary {
    min-width: 114px;
    cursor: pointer;
    border: none;
    outline: none;
    color: #fff;
    font-size: 1.45em;
    /** Desired font size / parent font size = EM value */

    text-align: center;
    text-transform: uppercase;
    padding: 0.22em 5% 0.22em 0.33em;
    margin: 1em 0;
    background: #0991b7 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAUCAYAAABvVQZ0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wQaEB0wIAvqoQAABg9JREFUOBEBBAb7+QEMkLf//gMAAP7/AAACAAMA/v/7AAABAQAD/gMADQgCAC8VCwD/AQMA7/n5ANTq9QAB//4A/gICAAEA/wAA/wEABAABAP7+/gAAAgEABP8BAAAA/f8AAQEBAAEA/AARBwYAbC8kAF0qFQAdDQsA/wEAAAH+/wAAAgEA/wAAALbc6wCU0uEAwuXvAP7//gD8AwAAAAABAAAB/QABCZG5/wAA/gAD/wAASSMVAJ1ELwANCAQA/gD/AAIAAQAA/wAAAAEAAAD/AAD/AP8AAAH/AAD/AQCm1+YAdcPXAPD6+wAA/wMA///9AAIAAP4A//8BAFoqGwCqTC8ADQgEAAD/AAABAAEA/wAAAAABAAD+AP8AAAH+AAABAQABAAIAAQEBAFoqGQC6UjcAEAUHAAAA/gAAAgEAAgMBAAA+HhEAmUMsAP8ABAD+APsAAAEAAAH/AAAB/gAAAAAAAAIAAQAAAAIAAQAAAAAAAAAAAP4AAQACACwVDQCbRSsAAgAAAP///wAC/P/+AJpEKwD/AgEAAQAAAAIABQAA/wAA/wEAANPt9QC03+gA////AAAAAAAA/wAAAP8AAAAAAgD/AAAAAP0AAEsjFwBcKBoABQECAAJeKR8AHgwLAAEA/gAA/wAA/wAAAAAB/gDU6/UARq/FAFiz0ACk2OYAAAAAAAAB/gAA//8A/wD+AAAAAAAAAgAA/wD+AGkzHwD//gEABEsjFAABAQAAAAAAAAABAAABAPwAAAAEAKLX3wDx+AIAAv8AAGe70wAAAAAAXSkbAAACAAABAP8AAAAAAAAB/gABAAAALRIPAB8PCQACPxoVAAAA/gAAAAIAAAAAAAAABAD/AAAAiz4sAF8pFQD/APwAAAAAAGe70wCm1uQAAAAAAAAAAgAA/wAA/wACAP7+AAACAAAAPhkPAAIPCAIA/gABAAAA/gAAAP4AAP4AAAH/AAAA/wAAk0UuAFsrHQAAAAAAAv8CAGe91QCl1ucAAAAAAAABAAAA/wAAAQICAP0BAAAcDwcAAgAA/gAC/wEAAAACAAD/AgD9Av4AAAAAAAAB/gAE/wEAAP/9AAEBAQABAP4A/v79AP4B/gAA/wAAAP8AAAABAAABAP4AAgAAAAEBAQAC8fn+AAABAAAAAAAA/wAAAAMAAAD/Af4AAAAAAGa91QCm1uoAAf//AP4CAwCZRC0AXCkZAP8A/wAAAQAAAQD+AP///wABAAAA4/L3AALC5O0AAAAAAP8A/gAAAQAAAP8CAAAAAgB3wdwApNfgAAAAAAD+AAAAmEQpAFsrHQABAAAAAQABAP8AAAD/AAAAAQEBAAAA/gDP6/YAArTe6gAA/gAAAAACAAD/AAD9AQAAAQAAAF4oGAAPCAoA/QD9AJhGKgBdKBwAAQD8AP7/AgAAAQAAAQAAAAAAAgD+AAEA4vD7ANHt8wAACZK2/+Lx9v/+/vz///7/////+////////v///9Hp8/+z3en///7////+/////v////7///7//f////3///3////+//9lus7/CZG3/wL/AAAAd8LYAAEBAwD/AQAAAAAEAP8AAAAB/wAALBYLAEsiFgAAAf4AAAAAAAABAAAAAAAAAAACAAAAAgD/Av4AwuXuAKTZ7AAD/wAAAgH/AwCw3+gAaLnUAAEA/AAA/wAAAQAAAP0BAAAC/wEAAf4AAP8AAgD/AQAAAAAAAP8B/gABAP4AAAD+ANPq9gBYtc4AAP/8AP8BAAACAv8AAAL/AACi2uMAZ7vZAPH6/AAAAAAAAgD+AAAAAAD/AgAAAAAAAAEA/gAA/wAAAf4BAAD/AgCy3usASq7IAPD5/gAC/wAA/gAAAAELkLn//gL9AAL/AAAA/wMADgcEAGwxHABbKR8AHw0FAP8AAQABAP8A/wECAAD//QC33u8AkdLcAMPk7wABAQEAAP3+AP8CAQAC/wEAAQmStv//AAAAAAABAAEA/wD///8ABAEDAP0A/gAgCwwAHREHAAMAAQD8//4AxOXsAP/+AgABAQMAAgD+AP/+AQD+A/4AA/8BAAH/AABsxrx5726AnwAAAABJRU5ErkJggg==) no-repeat 96% 50%;
    border: 2px solid #0991b7;
}

button.tertiary:hover {
    border: 2px solid #8DD1EB;
}

/* Facebook Recommend */

.facebookRecommend {
    width: 268px;
    margin: 1em auto;
}
/* TESTIMONIALS */

.testimonial {
    position: relative;
    height: 250px;
    width: 250px;
    background: #f3f3f5;
    padding: 5px;
    margin: 1em 0;
    /* Clearfix */
}

.testimonial:after {
    position: absolute;
    top: 1em;
    right: 1em;
    z-index: 20;
    display: block;
    /*content:url('../img/generic-icon.png');*/

    width: 25px;
    height: 20px;
}

.testimonial.male:after {
    content: url('../img/comment_male.png');
}

.testimonial.female:after {
    content: url('../img/comment_female.png');
}

.testimonial p.reviewerName {
    color: black;
    font-weight: 700;
    font-size: 12px;
    line-height: 1.4em;
    text-transform: uppercase;
    margin: 0;
}

.testimonial blockquote {
    font-style: italic;
    font-size: 12px;
    line-height: 1.4em;
    margin: 0;
    padding-bottom: 30px;
}

.testimonial > ul {
    position: absolute;
    left: 0;
    padding: 3px 0 0;
    bottom:0;
    display: block;
    margin: 0 auto;
    padding: 2px 0 2px;
    z-index: 11;
    width: 250px;
    background: #FCFCFC;
    border-top: 1px solid #e1e1e1;
}

.testimonial ul li {
    display: block;
    float: left;
    margin: 0 6px;
    padding: 0;
}

.testimonial ul li:last-child {
    margin-right: 0;
}

.testimonial ul li a {
    display: block;
}

.icon {
    display: block;
    height: 20px;
    width: 20px;
    margin: 0;
    padding: 0;
}

.icon.profile {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    overflow: hidden;
}

.icon.facebook {
    background: url(../img/facebook.svg) no-repeat center center;
}
.icon.twitter {
    background: url(../img/twitter.svg) no-repeat center center;
}
.icon.instagram {
    background: url(../img/insta.svg) no-repeat center center;
}
.icon.facebook:hover {
    background: #e1e1e1 url(../img/facebook.svg) no-repeat center center;
}
.icon.twitter:hover {
    background: #e1e1e1 url(../img/twitter.svg) no-repeat center center;
}
.icon.instagram:hover {
    background: #e1e1e1 url(../img/insta.svg) no-repeat center center;
}


/* If the testimonial doesnt have a hover capability, we show the content */

.testimonial .reveal {
    height: 100%;
    width: 100%;
    opacity: 1;
    padding: 0.75em;
    overflow-y: auto;
    overflow-x: hidden;
}
/*If the box has a hover capability then we hide the reveal */

.testimonial.hasHover .reveal {
    opacity: 0;
    color: #fff;
}
/* Reveal the content on hover */

.testimonial.hasHover:hover .reveal {
    opacity: 1;
    -webkit-transition: 0.25s;
    -o-transition: 0.25s;
    transition: 0.25s;
    position: relative;
    float: left;
    z-index: 10;
    background: rgba(2, 72, 82, 0.9);
}

.testimonial.hasHover:hover ul {
    background: rgba(26,89, 98, 1);
    border-top: 1px solid #3E7D86;
}

.testimonial.hasHover:hover .reveal .reviewerName {
    color: #fff;
}

/*Change the url to image to use the _white version*/
.testimonial.hasHover:hover .icon.facebook {
    background: url(../img/facebook_white.svg) no-repeat center center;
}
.testimonial.hasHover:hover .icon.twitter {
    background: url(../img/twitter_white.svg) no-repeat center center;
}
.testimonial.hasHover:hover .icon.instagram {
    background: url(../img/insta_white.svg) no-repeat center center;
}
/*Change the hover BG on the icons for POPUP */
.testimonial.hasHover:hover .icon.facebook:hover {
    background: #1F6974 url(../img/facebook_white.svg) no-repeat center center;
}

.testimonial.hasHover:hover .icon.twitter:hover {
    background: #1F6974 url(../img/twitter_white.svg) no-repeat center center;
}
.testimonial.hasHover:hover .icon.instagram:hover {
    background: #1F6974 url(../img/insta_white.svg) no-repeat center center;
}


/* Testimonial animation */
/*
.testimonial.hasHover .reveal,
.testimonial.hasHover:hover .reveal .reviewerName {
  -webkit-animation: fadeInOutTestimonial 10s infinite;  Safari 4+
  -moz-animation:    fadeInOutTestimonial 10s infinite;  Fx 5+
  -o-animation:      fadeInOutTestimonial 10s infinite;  Opera 12+
  animation:         fadeInOutTestimonial 10s infinite;  IE 10+, Fx 29+
}
@-webkit-keyframes fadeInOutTestimonial {
  0%, 100%  { opacity: 0; }
  25%, 75% { opacity: 1; }
}

*/
/* End of testimonials */
/* DRIVING CONDITIONS  */

.summerContent,
.winterContent {
    display: none;
}

.summerContent.currentSeason,
.winterContent.currentSeason {
    display: block;
}

.winterContent p {
    color: #fff;
    text-shadow: 0px 1px #346163;
}
.summerContent p {
    color: black;
}

#drivingConditions {
    background: #83B6C9 url('../img/winter_background.jpg') no-repeat;
    background-size: 100% 100%;
}
#drivingConditions.js-summerTheme {
    background: #83B6C9 url('../img/summer_background.png') no-repeat;
    background-size: 100% 100%;

}
/* Buttons */

button.primary {
    font-size: 1.6em;
    width: 250px;
    padding: 0.4em 1em;
    margin: 0;
    border: none;
    text-transform: uppercase;
    -moz-box-shadow:1px 1px 5px 1px #f1f1f1;
    -webkit-box-shadow: 1px 1px 5px 1px #f1f1f1;
    box-shadow: 1px 1px 1px #f1f1f1;
}

button.primary.showWinter {
    background-color: #fff;
    border: 2px solid #fff;
    color: lightblue;
    -webkit-box-shadow: 1px 1px 5px 1px #c7e8f7;
    -moz-box-shadow:1px 1px 5px 1px #c7e8f7;
    box-shadow: 1px 1px 5px 1px #c7e8f7;
}

button.primary.showWinter:hover {
    border: 2px solid #8DD1EB;
}

button.primary.showSummer {
    background-color: #F68C28;
    border: 2px solid #F68C28;
    color: #fff;
    -webkit-box-shadow: 1px 1px 5px 1px #c4b08d;
    -moz-box-shadow:1px 1px 5px 1px #c4b08d;
    box-shadow: 1px 1px 5px 1px #c4b08d;
}

button.primary.showSummer:hover {
    border: 2px solid #FBBD86;
}

button.primary.red {
    background: #981832;
    color: #fff;
    width: 280px;
    font-size: 1.2em;
}
/* ABOUT CAR  */

#aboutCar {
    background-color: #981832;
    background: url('../img/JeffsCarBlur.jpg');
    background-repeat:no-repeat;
    background-position:80% 100%; 
    background-size: cover;
    color: #fff;
}

#aboutCar h2 {
    color: #ffffff;
}

#aboutCar ul li {
    /* Stop blurryness http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ */
    background: rgba(0,0,0,0.4);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: relative;
    list-style: none;
    width: 190px;
    padding: 0 2em 0;
    border: 2px solid rgba(0,0,0,0);
    float: left;
    height: 230px;
    margin: 45px 40px 10px 0px;
}

#aboutCar img {
    box-sizing: content-box;
    position: absolute;
    top: -30px;
    left: 25%;
    right: 25%;
    z-index: 10;
    height: 56px;
    /* Icon size (56px) + border*/

    width: 56px;
    display: block;
    margin: 0 auto;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

#aboutCar ul li:last-child {
    margin: 45px 0 10px 0;
}

#aboutCar ul li p {
    /* Valign the text */

    position: relative;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    line-height: 1.5em;
    text-align: center;
    font-size: 0.75em;
    /* 12px */
}

#aboutCar ul li img {}
/* End Footer */
/* FOOTER */

footer {
    background: #DCDDDE;
}

footer p {
    color: #232236;
}
/* ==========================================================================
   Helper classes
   ========================================================================== */
/*
 * Hide visually and from screen readers:
 */

.hidden {
    display: none !important;
}
/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.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:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}
/*
 * Hide visually and from screen readers, 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;
}
/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}
/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */

        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 that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }
    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }
    tr,
    img {
        page-break-inside: avoid;
    }
    img {
        max-width: 100% !important;
    }
    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }
    h2,
    h3 {
        page-break-after: avoid;
    }
}
/* PROFILE PICS */

.testimonial {
    background-repeat: no-repeat;
}

.allan {
    background-image: url('../img/optimised/allan.jpg');
}

.amy {
    background-image: url('../img/optimised/amy.jpg');
}

.chris {
    background-image: url('../img/optimised/chris.jpg');
}

.sunil_mark-singh {
    background-image: url('../img/optimised/sunil_mark-singh.jpg');
}

.sandeep_mangat {
    background-image: url('../img/optimised/sandeep_mangat.jpg');
}

.jamie {
    background-image: url('../img/optimised/jamie.jpg');
}

.jake_wood {
    background-image: url('../img/optimised/jake_wood.jpg');
}

/*@keyframes profileFadeInOut {
    0% {
    opacity: 1;
    position: relative;
    float: left;
    z-index: 10;
    background: rgba(2, 72, 82, 0.9);
    }
    45% {
    opacity:1;
    }
    55% {
    opacity:0;
    }
    100% {
    opacity:0;
    }
}*/

/*Working and pretty cool - to add later. A fade-in-fade-out effect
.testimonial.hasHover .reveal {
animation-name: profileFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 3s;
animation-direction: alternate;
}
.testimonial.hasHover:hover .reveal {
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused; 
    animation-play-state:paused;
}*/


@media screen and (min-width: 20em) {
    /*320px :: portrait ~ 1stGen smartphones*/

    body {
        font-size: 0.875em;
        line-height: 1.642857142857143em;
    }
    body.devMode:before {
        position: fixed;
        display: block;
        border: 1px solid black;
        opacity: 0.5;
        content: '20em 320px';
        z-index: 999;
    }
    .globalWrapper > * {
        position: relative;
        padding: 25px 0.5em 10px;
    }
    .globalWrapper > #endFooter {
        padding: 15px 0.5em 10px;
    }
    footer {
        font-size: 0.75em;
    }
    footer p {
        margin: 0;
    }
    /* 20EM HEADER */
    #hero {
        padding: 0.5em 0.5em 0;
    }
    #hero h3 {
        margin:1em 0 0;
    }
    .logo,
    header .contentContainer > p {
        display: block;
        margin: auto;
        text-align: center;
    }
    p.details {
        font-size: 1em;
    }
    .mail,
    .telephone {
        display: block;
    }
    h2 {
        margin: 0em;
    }
    nav ul {
        list-style: none;
        padding-left: 0;
    }
    nav ul a {
        width: 100%;
        text-align: center;
        display: block;
        white-space: nowrap;
    }
    nav ul a.active:hover {
        width: 100%;
    }
    nav ul a:hover {
        width: 70%;
        margin: 0 auto;
        -webkit-transition: width 0.2s;
        -o-transition: width 0.2s;
        transition: width 0.2s;
    }
    h1,
    h3 {
        text-align: center;
    }
    h3 strong {
        display: block;
    }
    /* 20EM SLIDERS and modal*/

    .royalSliderContainer {
        width: 100%;
        /*display: none;*/
    }

    .royalSlider {
        width: 100%;
    }
    .sliderContainer {
        padding: 0 25px;
    }
    #aboutJeff .modal {
        height: 500px;
        width: 280px;
        margin-left: -140px;
        margin-top: -250px;
    }
    /* 20EM ABOUT JEFF*/

    button.primary,
    button.tertiary {
        display: block;
        width: 100%;
        margin: 1em auto;
        padding: 0.44em 5%;
    }
    a.primary {
        display: block;
        text-align: center;
        color: #fff;
        width: 280px;
        font-size: 1.2em;
        padding: 0.44em 5%;
        margin: 0 auto;
    }
    a.red {
        background: #981832;
    }
    /* 20EM DRIVING CONDITIONS */

    #drivingConditions button.primary {
        float: left;
        width: 50%;
        padding: 0.4em 0;
        margin: 0em;
    }
    #drivingConditions .testimonial {
        margin: 1em auto;
    }

    /*20em About car */

    #aboutCar ul {
        margin-top: 70px;
        padding: 0;
    }

    #aboutCar ul li {
        width: 100%;
        height: auto;
        float: none;
        margin: 60px 0;
    }

    #aboutCar ul li p {
        font-size: 1em;
        top: 0;
        transform: translateY(0);
        color: #fff;
        line-height: 1.5em;
        text-align: center;
        margin: 70px 0 1em;
    }
    #mediaGallery .collage {
        margin: 0 auto;
    }
    #mediaGallery p {
        text-align: center;
    }
    /*20em About car */

    #aboutCar {
    background-color: #981832;
    background: url('../img/JeffsCarBlur.jpg');
    background-repeat:no-repeat;
    background-position:70% 100%; 
    background-size: cover;
    color: #fff;
    }

    /* 20EM MEDIA GALLERY */
    #mediaGallery {
        padding-top: 35px;
    }

    #mediaGallery .collage {
        margin: 0 auto;
    }
    #mediaGallery p {
        text-align: center;
    }

    /*20 EM Marmelade*/
    section.marmelade {
        padding: 15px 0.5em;
    }
    section.marmelade .marmelade_text {
        font-size: 0.75em;
        text-align: center;
    }
    .horz {
        width: 100%;
        max-width: 728px;
        margin: 0 auto;
    }


    
}
/*Close Media query 20em*/

@media (min-width: 30em) {
    /* 480px :: landscape ~ 1stGen smartphones, portrait ~ 1stGen small tablets */

    body.devMode:before {
        content: '30em 480px';
    }
    body {
        font-size: 1em;
    }
    /* Buttons */
    button.primary,
    button.tertiary {
        width: 86%;
    }
    header .logo,
    #endFooter .logo {
        float: left;
    }
    header p.details {
        float: right;
        width: 47%;
        margin: 9px 0 10px;
    }
    nav {
        clear: both;
    }
    .royalSliderContainer {
        display: block;
    }
    .royalSlider {
        margin: 0 auto;
        width:60%;
        max-width: 500px;
        
    }
    /*30em about car */
    #aboutCar {
    background-color: #981832;
    background: url('../img/JeffsCarBlur.jpg');
    background-repeat:no-repeat;
    background-position:50% 100%; 
    background-size: cover;
    color: #fff;
    }
}
/*Close Media query 30em*/

@media (min-width: 40em) {
    /* 640px :: portrait ~ 2ndGen tablets, retina display phones*/

    body.devMode:before {
        content: '40em 640px';
    }
    .sliderContainer {
        padding: 0 45px;
    }

  .royalSlider {
        width: 80%;
    }
}
/*Close Media query 40em*/

@media (min-width: 768px) {
    body.devMode:before {
        content: '768px';
    }
    .globalWrapper > header,
    .globalWrapper > footer {
        padding: 0.5em 0.5em 0;
    }
    .globalWrapper > #endFooter {
        padding: 50px 0.5em;
    }
    .globalWrapper > * {
        padding: 65px 0.5em 45px;
        overflow: hidden;
    }
    header p.details {
        font-size: 0.85em;
        margin-top: 20px;
        text-align: right;
        width: auto;
    }
    .mail,
    .telephone {
        display: inline;
        margin: 0 1em;
    }
    .telephone {
        margin: 0 0 0 1em;
    }
    nav {
        clear: right;
        padding-top: 0px;
        width: 73.19727891156463%;
        margin-left: 26.80272108843537%;
        padding-top: 7px;
    }
    nav ul {
        font-size: 1em;
        position: relative;
        text-align: right;
        margin: 0;
    }
    nav ul li {
        display: inline-block;
        margin: 0 10px;
    }
    nav ul li:last-child {
        margin: 0 0 0 20px;
    }
    nav ul li a {
        display: block;
        width: auto;
        padding-bottom: 10px;
    }
    nav ul a:hover {
        width: auto;
    }
    #hero {
        position: relative;
    }
    h1 {
        width: 55%;
    }
    h1,
    h3 {
        text-align: left;
        float: left;
    }
    .modal h3 {
        float: none;
    }
    #hero h3 {
        position: absolute;
        width: 40%;
        bottom: 0;
        right: 5%;
        margin: 0;
    }
    .jeffCol button.tertiary {
        display: block;
        width: 100%;
    }
    button.tertiary {
        display: inline-block;
        padding: 0.22em 5% 0.22em 0.33em;
        margin: 0;
    }
    .jeffCol {
        float: left;
        width: 36.59863945578231%;
        padding-right: 1em;
    }
    .royalSliderContainer {
        width: 63.40136054421769%;
        float: left;
    }
    .royalSlider {}
    #slider {
        margin: 65px 0 25px;
        clear: both;
    }
    .sliderContainer {
        padding: 0 45px;
    }
    #drivingConditions aside,
    .testimonial {
        width: 250px;
        float: right;
        margin-bottom: 8px;
    }
    #drivingConditions .testimonial {
        margin: 0;
        float: right;
        clear: right;
    }
    #drivingConditions button.primary {
        width: 100%;
        margin: 8px 0;
    }
    .winterContent,
    .summerContent,
    #drivingConditions h2 {
        float: left;
        width: 65.98639455782313%;
        padding-right: 5em;
        margin: 0;
    }
    #drivingConditions h2 {
        padding-right: 2em;
    }
    #aboutCar ul li {
        width: 49%;
        height: 230px;
        float: left;
        margin: 45px 1% 10px 0px;
        padding: 0 2em 0;
    }
    #aboutCar ul ul:nth-child(even) {
        margin-right: 0;
    }
}
/*Close Media query 767px*/

@media (min-width: 60em) {
    /*960px :: landcsape ~ retina display phones*/

    body.devMode:before {
        content: '60em 960px';
    }
    .contentContainer {
        position: relative;
        width: 940px;
        margin: 0 auto;
    }
    .contentContainer:before,
    .contentContainer:after {
        content: " ";
        /* 1 */

        display: table;
        /* 2 */
    }
    .contentContainer:after {
        clear: both;
    }
    #hero {
        padding: 0.5em 0.5em 0;
    }
    #mediaGallery {}
    #mediaGallery .lCol,
    #mediaGallery .rCol {
        float: left;
    }
    #mediaGallery .lCol {
        width: 581px;
    }
    #mediaGallery .rCol {
        width: 38.19148936170213%;
        padding-left: 5%;
    }
    #mediaGallery p {
        text-align: left;
    }
    #aboutCar {
        background-color: #981832;
        background: url('../img/JeffsCarBlur.jpg');
        background-repeat:no-repeat;
        background-position:10% 70%; 
        background-size: cover;
        color: #fff;
    }
    #aboutCar ul li {
        font-size: 0.75em;
        width: 204px;
        height: 230px;
        padding: 0 2em 0;
        margin: 45px 40px 10px 0px;
    }
    #aboutCar ul li:last-child {
        margin-right: 0;
    }
}
/*Close Media query 60em*/

@media (min-width: 75em) {
    /*1200px :: landcsape ~ retina display phones*/

    body.devMode:before {
        content: '1200px';
    }
    body {
        font-size: 1.125em;
    }
    .globalWrapper,
    #hero {
        width: 1200px;
        margin: 0 auto;
    }
}
/*Close Media query 60em */