@charset "UTF-8";
/*
VW Brand Colors
===============

    <a href="#" class="color-showcase brand-blue"></a>
    <a href="#" class="color-showcase brand-black"></a>
    <a href="#" class="color-showcase brand-grey"></a>
    <a href="#" class="color-showcase brand-white"></a>
*/
.color-showcase {
  display: inline-block;
  width: 150px;
  height: 50px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #0057a7;
  /*

Grey
=========

    <a href="#" class="color-showcase darker-grey"></a>
    <a href="#" class="color-showcase dark-grey"></a>
    <a href="#" class="color-showcase blueish-grey"></a>
    <a href="#" class="color-showcase light-grey"></a>
    <a href="#" class="color-showcase lighter-grey"></a>
    <a href="#" class="color-showcase whiteish-grey"></a>
*/
  /*

Blue
=========

    <a href="#" class="color-showcase darker-blue"></a>
    <a href="#" class="color-showcase dark-blue"></a>
    <a href="#" class="color-showcase matt-blue"></a>
    <a href="#" class="color-showcase light-blue"></a>
    <a href="#" class="color-showcase cerulean-blue"></a>
    <a href="#" class="color-showcase viking-blue"></a>
*/
  /*

Orange
=========

    <a href="#" class="color-showcase brown"></a>
    <a href="#" class="color-showcase bright-orange"></a>
    <a href="#" class="color-showcase light-orange"></a>
    <a href="#" class="color-showcase yellow"></a>
*/
  /*

Red
=========

    <a href="#" class="color-showcase dark-red"></a>
    <a href="#" class="color-showcase classic-red"></a>
    <a href="#" class="color-showcase bright-red"></a>
    <a href="#" class="color-showcase light-red"></a>
*/ }
  .color-showcase:before {
    color: #fff; }
  .color-showcase.brand-blue:before {
    content: "Blue, #0057a7"; }
  .color-showcase.brand-black {
    background-color: #111; }
    .color-showcase.brand-black:before {
      content: "Black, #111"; }
  .color-showcase.brand-grey {
    background-color: #bac2c5; }
    .color-showcase.brand-grey:before {
      content: "Grey, #bac2c5"; }
  .color-showcase.brand-white {
    background-color: #fff; }
    .color-showcase.brand-white:before {
      content: "White, #fff";
      color: #111; }
  .color-showcase.darker-grey {
    background-color: #2e2e2e; }
    .color-showcase.darker-grey:before {
      content: "Darker grey, #2e2e2e"; }
  .color-showcase.dark-grey {
    background-color: #3a3d40; }
    .color-showcase.dark-grey:before {
      content: "#3a3d40"; }
  .color-showcase.blueish-grey {
    background-color: #757f8f; }
    .color-showcase.blueish-grey:before {
      content: "#757f8f"; }
  .color-showcase.light-grey {
    background-color: #b8c5ca; }
    .color-showcase.light-grey:before {
      content: "#b8c5ca"; }
  .color-showcase.lighter-grey {
    background-color: #e3ebee; }
    .color-showcase.lighter-grey:before {
      content: "#e3ebee"; }
  .color-showcase.whiteish-grey {
    background-color: #edf4f6; }
    .color-showcase.whiteish-grey:before {
      content: "#edf4f6"; }
  .color-showcase.darker-blue {
    background-color: #003c65; }
    .color-showcase.darker-blue:before {
      content: "#003c65"; }
  .color-showcase.dark-blue {
    background-color: #0057a7; }
    .color-showcase.dark-blue:before {
      content: "#0057a7"; }
  .color-showcase.matt-blue {
    background-color: #1b72ae; }
    .color-showcase.matt-blue:before {
      content: "#1b72ae"; }
  .color-showcase.light-blue {
    background-color: #00a8ec; }
    .color-showcase.light-blue:before {
      content: "#00a8ec"; }
  .color-showcase.cerulean-blue {
    background-color: #1bb2ee; }
    .color-showcase.cerulean-blue:before {
      content: "#1bb2ee"; }
  .color-showcase.viking-blue {
    background-color: #73b1dd; }
    .color-showcase.viking-blue:before {
      content: "#73b1dd"; }
  .color-showcase.brown {
    background-color: #8c5a28; }
    .color-showcase.brown:before {
      content: "#8c5a28"; }
  .color-showcase.bright-orange {
    background-color: #ff871f; }
    .color-showcase.bright-orange:before {
      content: "#ff871f"; }
  .color-showcase.light-orange {
    background-color: #faaa00; }
    .color-showcase.light-orange:before {
      content: "#faaa00"; }
  .color-showcase.yellow {
    background-color: #ffd100; }
    .color-showcase.yellow:before {
      content: "#ffd100"; }
  .color-showcase.dark-red {
    background-color: #730019; }
    .color-showcase.dark-red:before {
      content: "#730019"; }
  .color-showcase.classic-red {
    background-color: #c82d20; }
    .color-showcase.classic-red:before {
      content: "#c82d20"; }
  .color-showcase.bright-red {
    background-color: #e4002c; }
    .color-showcase.bright-red:before {
      content: "#e4002c"; }
  .color-showcase.light-red {
    background-color: #ea4f44; }
    .color-showcase.light-red:before {
      content: "#ea4f44"; }
  .color-showcase.error-red {
    background-color: #de182a; }
    .color-showcase.error-red:before {
      content: "#de182a"; }

/*

Grid
==================

Viewport sizes
--------

- $vp-xsmall: 480px;
- $vp-small: 768px;
- $vp-medium: 992px;
- $vp-large: 1170px;
- $vp-xlarge: 1400px;

*/
/*

Grid properties
--------

- column width: 92px ($col-width)
- gutter: 6px ($gutter)
- number of columns: 12 ($columns)
- padding: 50px ($padding)

Those are used when building the grid and may be used in any .scss file.
*/
/*

Useful mixins / helpers
=============

size()
-------
Creates a box with defined width and height.

#### @params
`$width, $height`

#### example
`@include size(50px, 50px);`
*/
/*
linear-gradient()
-----------------
Creates a linear gradient using CSS3 background-image property. Adds vendor prefixes automatically.

#### @params
`$direction, $from, $to`

#### example
`@include linear-gradient(top, $brand-white 0%, $brand-blue 15%);`
*/
/*
border-radius()
-----------------
Creates a border-radius property. Adds vendor prefixes automatically.

#### @params
`$val`

#### example
`@include border-radius(4px);`
*/
/*
transition()
-----------------
Creates a CSS3 transition property. Adds vendor prefixes automatically.

#### @params
`$val` *(string)*

#### example
`@include transition("color 0.3s ease-in-out");`
*/
/*
transform()
----------------
Creates a CSS3 transform property. Adds vendor prefixes automatically.

#### @params
`$val` *(string)*

#### example
`@include transform("scale(1.1)");`
*/
/*
font-size-in-rem()
-----------------
Calculates font size in rem doing a simple "/16" calculation.

#### @params
`$px`

#### example
`@include font-size-in-rem(14px);`

### output
`font-size: 0.875rem;`
*/
/*
font-props()
------------

### @params
`$font-style` - e.g normal, italic, oblique ...; `$font-weight` - number or normal, bold ...; `$font-size` - number with size in pixels, e.g: 12; `$line-height` - string with line height and unit, e.g: 1.2em

### example
`@include font-props(normal, normal, 12, 1.2em);`

### output
`font-style: normal;`
`font-weight: normal;`
`font-size: 0.75rem;`
`line-height: 1.2em;`
*/
/*
mq()
-----------------
Creates a @media query.

#### @params
`$type, $viewport1, $viewport2: null`

#### example
`@include mq('min-width', $vp-small) {`
`.elem { display: block; }`
`}`

### output
`@media only screen and (min-width: 768px) {`
`.elem { display: block; }`
`}`
*/
/*

Grid
====

Clearfix
--------

To use clearfix, simply add `@include clearfix();` while writing CSS for element.
*/
.col-1 {
  float: none;
  width: 100%; }
  @media screen and (min-width: 480px) {
    .col-1 {
      float: left;
      margin-left: 1.0256410256%;
      width: 100%; }
      .col-1:first-child {
        margin-left: 0; } }
  @media screen and (min-width: 768px) {
    .col-1 {
      float: left;
      margin-left: 1.0256410256%;
      width: 100%; }
      .col-1:first-child {
        margin-left: 0; } }
  @media screen and (min-width: 992px) {
    .col-1 {
      width: 7.8632478632%;
      margin-left: 0.5128205128%; }
      .col-1:first-child {
        margin-left: 0; } }

.col-2 {
  float: none;
  width: 100%; }
  @media screen and (min-width: 480px) {
    .col-2 {
      float: left;
      margin-left: 1.0256410256%;
      width: 100%; }
      .col-2:first-child {
        margin-left: 0; } }
  @media screen and (min-width: 768px) {
    .col-2 {
      float: left;
      margin-left: 1.0256410256%;
      width: 24.4871794872%; }
      .col-2:first-child {
        margin-left: 0; } }
  @media screen and (min-width: 992px) {
    .col-2 {
      width: 16.2393162393%;
      margin-left: 0.5128205128%;
      width: 24.4871794872%; }
      .col-2:first-child {
        margin-left: 0; } }

.col-3 {
  float: none;
  width: 100%; }
  @media screen and (min-width: 480px) {
    .col-3 {
      float: left;
      margin-left: 1.0256410256%;
      width: 49.4871794872%; }
      .col-3:first-child {
        margin-left: 0; } }
  @media screen and (min-width: 768px) {
    .col-3 {
      float: left;
      margin-left: 1.0256410256%;
      width: 49.4871794872%; }
      .col-3:first-child {
        margin-left: 0; } }
  @media screen and (min-width: 992px) {
    .col-3 {
      width: 24.6153846154%;
      margin-left: 0.5128205128%; }
      .col-3:first-child {
        margin-left: 0; } }

.col-4 {
  float: none;
  width: 100%; }
  @media screen and (min-width: 480px) {
    .col-4 {
      float: left;
      margin-left: 1.0256410256%;
      width: 49.4871794872%; }
      .col-4:nth-child(odd) {
        margin-left: 0; }
      .col-4:first-child {
        margin-left: 0; } }
  @media screen and (min-width: 768px) {
    .col-4 {
      float: left;
      margin-left: 1.0256410256%;
      width: 32.4871794872%; }
      .col-4:nth-child(n) {
        margin-left: 1.0256410256%; }
      .col-4:nth-child(3n+4) {
        margin-left: 0; }
      .col-4:first-child {
        margin-left: 0; } }
  @media screen and (min-width: 992px) {
    .col-4 {
      width: 32.9914529915%;
      margin-left: 0.5128205128%;
      width: 32.4871794872%; }
      .col-4:nth-child(n) {
        margin-left: 1.0256410256%; }
      .col-4:nth-child(3n+4) {
        margin-left: 0; }
      .col-4:first-child {
        margin-left: 0; } }

.col-5 {
  float: none;
  width: 100%; }
  @media screen and (min-width: 480px) {
    .col-5 {
      float: left;
      margin-left: 1.0256410256%;
      width: 100%; }
      .col-5:first-child {
        margin-left: 0; } }
  @media screen and (min-width: 768px) {
    .col-5 {
      float: left;
      margin-left: 1.0256410256%;
      width: 100%; }
      .col-5:first-child {
        margin-left: 0; } }
  @media screen and (min-width: 992px) {
    .col-5 {
      width: 41.3675213675%;
      margin-left: 0.5128205128%; }
      .col-5:first-child {
        margin-left: 0; } }

.col-6 {
  float: none;
  width: 100%; }
  @media screen and (min-width: 480px) {
    .col-6 {
      float: left;
      margin-left: 1.0256410256%;
      margin-left: 0; }
      .col-6:first-child {
        margin-left: 0; } }
  @media screen and (min-width: 768px) {
    .col-6 {
      float: left;
      margin-left: 1.0256410256%;
      width: 49.4871794872%; }
      .col-6:nth-child(n) {
        margin-left: 0.5128205128%; }
      .col-6:nth-child(odd) {
        margin-left: 0; }
      .col-6:first-child {
        margin-left: 0; } }
  @media screen and (min-width: 992px) {
    .col-6 {
      width: 49.7435897436%;
      margin-left: 0.5128205128%; }
      .col-6:nth-child(n) {
        margin-left: 0.5128205128%; }
      .col-6:nth-child(odd) {
        margin-left: 0; }
      .col-6:first-child {
        margin-left: 0; } }

.col-7 {
  float: none;
  width: 100%; }
  @media screen and (min-width: 480px) {
    .col-7 {
      float: left;
      margin-left: 1.0256410256%;
      width: 100%; }
      .col-7:first-child {
        margin-left: 0; } }
  @media screen and (min-width: 768px) {
    .col-7 {
      float: left;
      margin-left: 1.0256410256%;
      width: 100%; }
      .col-7:first-child {
        margin-left: 0; } }
  @media screen and (min-width: 992px) {
    .col-7 {
      width: 58.1196581197%;
      margin-left: 0.5128205128%; }
      .col-7:first-child {
        margin-left: 0; } }

.col-8 {
  float: none;
  width: 100%; }
  @media screen and (min-width: 480px) {
    .col-8 {
      float: left;
      margin-left: 1.0256410256%;
      width: 99.4871794872%; }
      .col-8:first-child {
        margin-left: 0; } }
  @media screen and (min-width: 768px) {
    .col-8 {
      float: left;
      margin-left: 1.0256410256%;
      width: 66.4871794872%; }
      .col-8:first-child {
        margin-left: 0; } }
  @media screen and (min-width: 992px) {
    .col-8 {
      width: 66.4957264957%;
      margin-left: 0.5128205128%; }
      .col-8:first-child {
        margin-left: 0; } }

.col-9 {
  float: none;
  width: 100%; }
  @media screen and (min-width: 480px) {
    .col-9 {
      float: left;
      margin-left: 1.0256410256%;
      width: 100%; }
      .col-9:first-child {
        margin-left: 0; } }
  @media screen and (min-width: 768px) {
    .col-9 {
      float: left;
      margin-left: 1.0256410256%;
      width: 100%; }
      .col-9:first-child {
        margin-left: 0; } }
  @media screen and (min-width: 992px) {
    .col-9 {
      width: 74.8717948718%;
      margin-left: 0.5128205128%; }
      .col-9:first-child {
        margin-left: 0; } }

.col-10 {
  float: none;
  width: 100%; }
  @media screen and (min-width: 480px) {
    .col-10 {
      float: left;
      margin-left: 1.0256410256%;
      width: 100%; }
      .col-10:first-child {
        margin-left: 0; } }
  @media screen and (min-width: 768px) {
    .col-10 {
      float: left;
      margin-left: 1.0256410256%;
      width: 100%; }
      .col-10:first-child {
        margin-left: 0; } }
  @media screen and (min-width: 992px) {
    .col-10 {
      width: 83.2478632479%;
      margin-left: 0.5128205128%; }
      .col-10:first-child {
        margin-left: 0; } }

.col-11 {
  float: none;
  width: 100%; }
  @media screen and (min-width: 480px) {
    .col-11 {
      float: left;
      margin-left: 1.0256410256%;
      width: 100%; }
      .col-11:first-child {
        margin-left: 0; } }
  @media screen and (min-width: 768px) {
    .col-11 {
      float: left;
      margin-left: 1.0256410256%;
      width: 100%; }
      .col-11:first-child {
        margin-left: 0; } }
  @media screen and (min-width: 992px) {
    .col-11 {
      width: 91.6239316239%;
      margin-left: 0.5128205128%; }
      .col-11:first-child {
        margin-left: 0; } }

.col-12 {
  float: none;
  width: 100%; }
  @media screen and (min-width: 480px) {
    .col-12 {
      float: left;
      width: 100%; }
      .col-12:first-child {
        margin-left: 0; } }
  @media screen and (min-width: 768px) {
    .col-12 {
      float: left;
      width: 100%; }
      .col-12:first-child {
        margin-left: 0; } }
  @media screen and (min-width: 992px) {
    .col-12 {
      width: 100%; }
      .col-12:first-child {
        margin-left: 0; } }

/*

Typography mixins / helpers
=======

font-face
--------------

Creates a @font-face in CSS while keeping in mind the $path. Creates .eot, .eot?#iefix, .woff, .ttf, .svg sources for the font. Usage:

    @include font-face(
        'VWHead',
        '../font/VWHeadWeb-Regular'
    );
*/
/*

font-family
---------------------

Creates `font-family` in CSS with defined font family and weight of font.

    @include font-family("VWHead", "bold");
*/
/*
Grid elements
=============

There are two types of container. `.container-full` and `.container`.

`.container-full` is just wrapper which stretches to 100% width.

`.container` uses max width of the grid and `margin: 0 auto` to center it. So on desktop, it would be 1170px wide element centered in browser.

    <div class="container-full"></div>
    <div class="container"></div>
*/
.container-full {
  width: 100%; }

.container {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0;
  -webkit-animation: fadein 2s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s;
  /* Firefox < 16 */
  -ms-animation: fadein 2s;
  /* Internet Explorer */
  -o-animation: fadein 2s;
  /* Opera < 12.1 */
  animation: fadein 2s;
  /* Firefox < 16 */
  /* Safari, Chrome and Opera > 12.1 */
  /* Internet Explorer */
  /* Opera < 12.1 */ }

@keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@-moz-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@-webkit-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

@-ms-keyframes fadein {
  .container from {
    opacity: 0; }
  .container to {
    opacity: 1; } }

@-o-keyframes fadein {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
  @media screen and (min-width: 768px) {
    .container {
      padding: 0; } }
  .container * {
    box-sizing: border-box; }

/*

Rows
----

Wrap your columns to rows. Introducing `.row`.

    <div class="row"></div>
*/
.row {
  margin-bottom: 0;
  zoom: 1; }
  .row:before, .row:after {
    content: "";
    display: table; }
  .row:after {
    clear: both; }

.wrap {
  padding-left: 15px;
  padding-right: 15px; }

/*

Columns
-------

`.col-1` to be 1/12 of the 1170px on desktop while `.col-12` is 1170px wide column. Ignore inline styles, that's just to center the numbers within columns.

    <div class="row" style="margin-bottom: 25px">
        <div class="col-12" style="text-align: center">12</div>
    </div>

    <div class="row" style="margin-bottom: 25px">
        <div class="col-6" style="text-align: center">6</div>
        <div class="col-6" style="text-align: center">6</div>
    </div>

    <div class="row" style="margin-bottom: 25px">
        <div class="col-4" style="text-align: center">4</div>
        <div class="col-4" style="text-align: center">4</div>
        <div class="col-4" style="text-align: center">4</div>
    </div>

    <div class="row" style="margin-bottom: 25px">
        <div class="col-3" style="text-align: center">3</div>
        <div class="col-3" style="text-align: center">3</div>
        <div class="col-3" style="text-align: center">3</div>
        <div class="col-3" style="text-align: center">3</div>
    </div>

    <div class="row" style="margin-bottom: 25px">
        <div class="col-2" style="text-align: center">2</div>
        <div class="col-2" style="text-align: center">2</div>
        <div class="col-2" style="text-align: center">2</div>
        <div class="col-2" style="text-align: center">2</div>
        <div class="col-2" style="text-align: center">2</div>
        <div class="col-2" style="text-align: center">2</div>
    </div>

    <div class="row">
        <div class="col-1" style="text-align: center">1</div>
        <div class="col-1" style="text-align: center">1</div>
        <div class="col-1" style="text-align: center">1</div>
        <div class="col-1" style="text-align: center">1</div>
        <div class="col-1" style="text-align: center">1</div>
        <div class="col-1" style="text-align: center">1</div>
        <div class="col-1" style="text-align: center">1</div>
        <div class="col-1" style="text-align: center">1</div>
        <div class="col-1" style="text-align: center">1</div>
        <div class="col-1" style="text-align: center">1</div>
        <div class="col-1" style="text-align: center">1</div>
        <div class="col-1" style="text-align: center">1</div>
    </div>
*/
.push-left {
  float: left; }

.push-right {
  float: right; }

.clear-left {
  clear: left; }

.clear-right {
  clear: right; }

.clear-both {
  clear: both; }

[class*='col-'].split-half > * {
  float: left;
  width: 50%; }

[class*='col-'].no-margin {
  margin-left: 0; }

.visible-tablet {
  display: block; }
  @media screen and (min-width: 992px) {
    .visible-tablet {
      display: none; } }

.visible-mobile {
  display: block; }
  @media screen and (min-width: 768px) {
    .visible-mobile {
      display: none; } }

/*

Buttons
=======

Primary button
--------------

Creates a button using a `.vw-button` class. This creates a primary button by default.

    <a class="vw-button" href="#">Primary button</a>
*/
.vw-new-button {
  background: transparent;
  background-image: none;
  box-shadow: none;
  border: 0;
  display: inline-block;
  min-width: 200px;
  padding: 15px 20px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  font-family: "VWHeadBold";
  font-size: 0.8125rem !important;
  /* @include font-size-in-rem(13); */
  -moz-transition: background-color 0.3s ease-in-out;
  -webkit-transition: background-color 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
  text-align: center;
  color: #fff !important;
  text-decoration: none;
  background-color: #00a8ec; }
  .vw-new-button:hover {
    color: #fff;
    background-color: #1bb2ee; }
  .vw-new-button a {
    color: #fff; }
    .vw-new-button a:hover {
      color: #fff; }

.vw-button--wide {
  width: 100%; }

.vw-button--narrow {
  min-width: inherit; }

/*

Secondary button
----------------

To create a secondary button, add `.vw-button--secondary` to class of an anchor.

    <a class="vw-button vw-button--secondary" href="#">Secondary</a>
*/
.vw-button--secondary {
  min-width: 0;
  padding: 10px 15px;
  font-size: 0.8125rem; }

/*

Button colors
=============

Blue button
-----------

Add `.vw-button-blue` class to anchor to create a blue button. This works for both primary and secondary buttons.

    <a class="vw-button vw-button--blue" href="#">Primary button</a>
    <a class="vw-button vw-button--secondary vw-button--blue" href="#">Secondary</a>
*/
.vw-button--blue {
  background-color: #00a8ec; }
  .vw-button--blue:hover {
    color: #fff;
    background-color: #1bb2ee; }

/*
Red button
-----------

Add `.vw-button-red` class to anchor to create a red button. This works for both primary and secondary buttons.

    <a class="vw-button vw-button--red" href="#">Primary button</a>
    <a class="vw-button vw-button--secondary vw-button--red" href="#">Secondary</a>
*/
.vw-button--red {
  background-color: #c82d20; }
  .vw-button--red:hover {
    color: #fff;
    background-color: #ea4f44; }

/*

White transparent button
------------

Button with class `.vw-button--white_transparent` is 35% opacity of white using rgba(). On hover it transitions to 55%.

    <a class="vw-button vw-button--white_transparent" href="#">Primary button</a>
*/
.vw-button--white_transparent {
  background-color: rgba(255, 255, 255, 0.15); }
  .vw-button--white_transparent:hover {
    background-color: rgba(255, 255, 255, 0.25); }

/*

Black transparent button
------------

Button with class `.vw-button--black_transparent`. 25% opacity for default state, 45% for hover state.

    <a class="vw-button vw-button--black_transparent" href="#">Primary button</a>
    <a class="vw-button vw-button--secondary vw-button--black_transparent" href="#">Secondary</a>
*/
.vw-button--black_transparent {
  background-color: rgba(17, 17, 17, 0.25); }
  .vw-button--black_transparent:hover {
    background-color: rgba(17, 17, 17, 0.45); }

.vw-button-blank {
  background-color: #fff; }
  .vw-button-blank:hover {
    background-color: #fff; }

.tabs {
  background-color: #fff;
  border-top: 1px solid #ced7da;
  border-bottom: 1px solid #ced7da;
  font-size: 0; }
  .tabs.tabs--alt {
    border: 0;
    background: none;
    margin-bottom: 10px; }

.nav-tabs {
  padding: 0 15px; }

.nav-tabs__items {
  border-right: 1px solid #ced7da;
  padding: 0;
  margin: 0;
  display: table;
  width: 100%;
  box-sizing: border-box; }
  .tabs--alt .nav-tabs__items {
    border: 0; }

.nav-tabs__item {
  transition: none !important;
  display: table-cell;
  vertical-align: middle;
  list-style: none;
  width: 16.666666667%;
  box-sizing: border-box;
  text-align: center;
  border-left: 1px solid #ced7da;
  border-bottom: 0 solid #2e2e2e;
  font-size: 14px; }
  .nav-tabs__item.is-active {
    border-bottom-width: 5px;
    font-weight: bold; }
  .nav-tabs__item:hover {
    background: #dbe4e9; }
  .tabs--alt .nav-tabs__item {
    width: 14.285714285%;
    background-color: #d2dce0;
    border-left: 0; }
    .tabs--alt .nav-tabs__item:first-child {
      border-radius: 4px 0 0 4px; }
    .tabs--alt .nav-tabs__item:last-child {
      border-radius: 0 4px 4px 0; }
    .tabs--alt .nav-tabs__item.is-active {
      background-color: #bcc7cc; }
  .tabs--alt .nav-tabs__item + .nav-tabs__item {
    border-left: 1px solid #c3ced2; }

.nav-tabs__item--parent.is-active {
  border-bottom: 5px solid #bcc7cc; }

.nav-tabs__link {
  transition: none !important;
  color: #2e2e2e;
  font-size: em(14px, 14px);
  padding: 15px 5px;
  display: block;
  box-sizing: border-box;
  line-height: 1.2; }
  .is-active .nav-tabs__link,
  .no-touch .nav-tabs__link:hover,
  .no-touch .nav-tabs__link:focus {
    color: #2e2e2e; }
  .is-active .nav-tabs__link {
    padding-bottom: 10px; }

/* radio */
.jcf-radio {
  vertical-align: middle;
  display: inline-block;
  position: relative;
  overflow: hidden;
  cursor: default;
  background: #fff;
  border: 1px solid #777;
  border-radius: 9px;
  margin: 0 3px 0 0;
  height: 16px;
  width: 16px; }

.jcf-radio span {
  display: none;
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  background: #777;
  border-radius: 100%; }

.jcf-radio input[type="radio"] {
  position: absolute;
  height: 100%;
  width: 100%;
  border: 0;
  margin: 0;
  left: 0;
  top: 0; }

.jcf-radio.jcf-checked span {
  display: block; }

/* checkbox */
.jcf-checkbox {
  vertical-align: middle;
  display: inline-block;
  position: relative;
  overflow: hidden;
  cursor: default;
  background: #fff;
  border: 1px solid #e3ebee;
  margin: -1px 0 0 10px;
  height: 16px;
  width: 16px; }
  .jcf-checkbox span {
    position: absolute;
    display: none;
    height: 4px;
    width: 8px;
    top: 50%;
    left: 50%;
    margin: -7px 0 0 -6px;
    border: 2px solid #00a8eb;
    border-width: 0 0 2px 2px;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')"; }
    :root .jcf-checkbox span {
      margin: -4px 0 0 -5px; }
  .jcf-checkbox.jcf-checked span {
    display: block; }
  .jcf-checkbox input[type="checkbox"] {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
    left: 0;
    top: 0; }
  .engine-panel .jcf-checkbox {
    float: left;
    margin: 0;
    margin-right: 10px;
    margin-top: 2px; }
  @media screen and (min-width: 992px) {
    .jcf-checkbox {
      float: left;
      margin: 0;
      margin-right: 10px; }
      .engine-panel .jcf-checkbox {
        margin-top: 0; } }

.highlight-differences-toggle {
  float: right;
  font-size: em(14px);
  font-family: "VWHeadRegular" Arial, sans-serif;
  margin-right: 15px;
  cursor: pointer;
  color: #717e90;
  line-height: 1;
  transition: color .2s linear; }
  .fixed-compare-panels .highlight-differences-toggle {
    margin: 5px 0; }
  .highlight-differences-toggle:hover, .highlight-differences-toggle.jcf-label-active {
    color: #2e2e2e; }
  @media screen and (min-width: 992px) {
    .highlight-differences-toggle {
      font-size: em(12px);
      float: right;
      text-align: right; }
      .fixed-compare-panels .highlight-differences-toggle {
        font-size: 0;
        text-indent: -9999px;
        margin: 0; } }
  .highlight-differences-toggle .jcf-checkbox {
    vertical-align: middle;
    display: inline-block;
    position: relative;
    overflow: hidden;
    cursor: default;
    margin: 0 0 0 10px;
    width: 37px;
    height: 19px;
    border: 0;
    background: url(plugins/vw-plugin-cps-vw-section-new-cars-5.0.1.19/images/which-model-upgrade/icon-toggle.png) no-repeat left top; }
    @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
      .highlight-differences-toggle .jcf-checkbox {
        width: 54px;
        height: 27px;
        background-image: url(plugins/vw-plugin-cps-vw-section-new-cars-5.0.1.19/images/which-model-upgrade/icon-toggle@2x.png);
        background-size: 54px 54px;
        margin-right: 0;
        vertical-align: -4px; } }
    @media screen and (min-width: 992px) {
      .highlight-differences-toggle .jcf-checkbox {
        float: right;
        margin: 0 0 10px 10px; }
        .fixed-compare-panels .highlight-differences-toggle .jcf-checkbox {
          margin-top: 10px;
          margin-right: 15px; } }
    .highlight-differences-toggle .jcf-checkbox.jcf-checked {
      background-position: 0 -19px; }
      @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
        .highlight-differences-toggle .jcf-checkbox.jcf-checked {
          background-position: 0 -27px; } }
    .highlight-differences-toggle .jcf-checkbox span {
      display: none; }
    .highlight-differences-toggle .jcf-checkbox.jcf-checked span {
      display: none; }
    .highlight-differences-toggle .jcf-checkbox input[type="checkbox"] {
      position: absolute;
      width: 100%;
      height: 100%;
      border: 0;
      margin: 0;
      left: 0;
      top: 0;
      cursor: pointer; }

/* select */
.jcf-select {
  display: block;
  vertical-align: top;
  position: relative;
  background: #fff;
  margin: 6px 0;
  height: 45px;
  box-sizing: border-box;
  border-radius: 4px;
  text-align: left; }

.jcf-select-mobile-only {
  display: none; }
  @media screen and (min-width: 992px) {
    .jcf-select-mobile-only {
      display: block; } }

.jcf-select select {
  z-index: 1;
  left: 0;
  top: 0; }

.jcf-select .jcf-select-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: default;
  line-height: 45px;
  margin: 0 55px 0 15px;
  box-sizing: border-box;
  color: #111;
  font-family: VWHeadBold;
  font-size: 14px; }

.js-select-tabs .jcf-select .jcf-select-text {
  display: block; }

.jcf-select .jcf-select-opener {
  box-sizing: border-box;
  position: absolute;
  text-align: center;
  width: 45px;
  bottom: 0;
  right: 0;
  top: 0;
  border-radius: 0 4px 4px 0;
  background: url(plugins/vw-plugin-cps-vw-section-new-cars-5.0.1.19/images/which-model-upgrade/icon-arrow--down.png) no-repeat center #2e2e2e; }
  @media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx) {
    .jcf-select .jcf-select-opener {
      background-image: url(plugins/vw-plugin-cps-vw-section-new-cars-5.0.1.19/images/which-model-upgrade/icon-arrow--down@2x.png);
      background-size: 9px 6px; } }

body > .jcf-select-drop {
  position: absolute;
  margin: -1px 0 0;
  z-index: 9999; }

body > .jcf-select-drop.jcf-drop-flipped {
  margin: 1px 0 0; }

.jcf-select .jcf-select-drop {
  position: absolute;
  margin-top: 0px;
  z-index: 9999;
  top: 100%;
  left: -1px;
  right: -1px; }

.jcf-select .jcf-drop-flipped {
  bottom: 100%;
  top: auto; }

.jcf-select.jcf-compact-multiple {
  max-width: 220px; }

.jcf-select.jcf-compact-multiple .jcf-select-opener:before {
  display: inline-block;
  padding-top: 2px;
  content: '...'; }

.jcf-select-drop .jcf-select-drop-content {
  border: 1px solid #f00; }

.jcf-select-drop.jcf-compact-multiple .jcf-hover {
  background: none; }

.jcf-select-drop.jcf-compact-multiple .jcf-selected {
  background: #e6e6e6;
  color: #000; }

.jcf-select-drop.jcf-compact-multiple .jcf-selected:before {
  display: inline-block;
  content: '';
  height: 4px;
  width: 8px;
  margin: -7px 5px 0 -3px;
  border: 3px solid #777;
  border-width: 0 0 3px 3px;
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')"; }

/* multiple select styles */
.jcf-list-box {
  overflow: hidden;
  display: inline-block;
  border: 1px solid #b8c3c9;
  min-width: 200px;
  margin: 0 15px; }

/* select options styles */
.jcf-list {
  display: inline-block;
  vertical-align: top;
  position: relative;
  background: #fff;
  line-height: 14px;
  font-size: 12px;
  width: 100%; }

.jcf-list .jcf-list-content {
  vertical-align: top;
  display: inline-block;
  overflow: auto;
  width: 100%; }

.jcf-list ul {
  list-style: none;
  padding: 0;
  margin: 0; }

.jcf-list ul li {
  overflow: hidden;
  display: block; }

.jcf-list .jcf-overflow {
  overflow: auto; }

.jcf-list .jcf-option {
  white-space: nowrap;
  overflow: hidden;
  cursor: default;
  display: block;
  padding: 5px 9px;
  color: #656565;
  min-height: 14px;
  height: 1%; }

.jcf-list .jcf-disabled {
  background: #fff !important;
  color: #aaa !important; }

.jcf-select-drop .jcf-hover,
.jcf-list-box .jcf-selected {
  background: #e6e6e6;
  color: #000; }

.jcf-list .jcf-optgroup-caption {
  white-space: nowrap;
  font-weight: bold;
  display: block;
  padding: 5px 9px;
  cursor: default;
  color: #000; }

.jcf-list .jcf-optgroup .jcf-option {
  padding-left: 30px; }

.no-js .js-select {
  display: none; }

.js #car-range {
  visibility: hidden; }

.range-monthly-tabs {
  background-color: #fff;
  font-size: 0; }

.range-monthly-tabs {
  padding: 0 20px; }

.range-monthly-tabs__items {
  padding: 0;
  margin: 0;
  display: table;
  width: 100%;
  box-sizing: border-box; }

.range-monthly-tabs__item {
  display: table-cell;
  list-style: none;
  box-sizing: border-box;
  text-align: center;
  border-bottom: 5px solid #fff;
  font-size: 14px; }
  .range-monthly-tabs__item.is-active {
    border-bottom: 5px solid #2e2e2e;
    font-weight: bold; }
  .range-monthly-tabs__item:hover {
    border-bottom: 5px solid #2e2e2e; }

.range-monthly-tabs__link {
  color: #2e2e2e;
  font-size: em(14px, 14px);
  padding: 15px 5px;
  font-family: "VWHeadRegular" Arial, sans-serif;
  display: inline-block;
  box-sizing: border-box;
  line-height: 1.2; }
  .is-active .range-monthly-tabs__link,
  .no-touch .range-monthly-tabs__link:hover,
  .no-touch .range-monthly-tabs__link:focus {
    color: #2e2e2e;
    font-family: "VWHeadBold" Arial, sans-serif; }
  .is-active .range-monthly-tabs__link {
    padding-bottom: 10px; }

.range-monthly-tabs__shortlink {
  padding-left: 20px;
  padding-right: 20px; }
  #range-monthly-budget-filter-buttons .range-monthly-tabs__shortlink {
    padding-left: 16px;
    padding-right: 16px; }

.price-filters-unavailable {
  background: #fff;
  text-align: center;
  padding: 15px; }

body.car-range-full {
  background: #edf4f6; }
  body.car-range-full #page.page-container {
    margin: 0 auto;
    max-width: none;
    padding: 0 15px; }
    @media screen and (min-width: 992px) {
      body.car-range-full #page.page-container {
        max-width: 1170px; } }
  body.car-range-full #footer {
    background: #fff;
    margin-bottom: 0; }

body.sector-landing-page {
  background: #edf4f6; }
body.sector-landing-page #page.page-container {
  margin: 0 auto;
  max-width: none;
  padding: 20px 15px; }
@media screen and (min-width: 992px) {
  body.sector-landing-page #page.page-container {
    max-width: 1170px; } }
body.car-range-full #footer {
  background: #fff;
  margin-bottom: 0; }
body.sector-landing-page h1 {
  color: #2e2e2e;
  font-family: VWHeadBold,Arial,sans-serif;
  font-size: 2.5em;
  line-height: 1;
  margin: 25px 0 10px;
  text-align: center; }
@media screen and (min-width: 992px) {
  body.sector-landing-page h1 {
    margin: 30px 0 10px;
    font-size: 3.4em; } }
body.sector-landing-page .sub-heading {
  color: #2e2e2e;
  margin: 12px 0 30px;
  text-align: center; }
body.sector-landing-page p.info {
  color: #2e2e2e;
  margin: 30px auto 30px;
  text-align: center;
  width: 90%;
  font-size: 1.5em; }
 @media screen and (min-width: 900px) {
   body.sector-landing-page p.info {
     width: 760px;
   }
 }
body.sector-landing-page hr {
  border: 0;
  height: 4px;
  background: #00a8eb;
  width: 100px;
}

#car-range {
  font-family: "VWTextRegular" Arial, sans-serif;
  color: #333; }
  #car-range .header-bar {
    text-align: center; }
  #car-range .header-bar > span {
    display: none;
  }
  #car-range h1 {
    color: #2e2e2e;
    font-family: VWHeadBold,Arial,sans-serif;
    font-size: 2.5em;
    line-height: 1;
    margin: 25px 0 25px;
    text-align: center; }
    @media screen and (min-width: 992px) {
      #car-range h1 {
        margin: 50px 0;
        font-size: 3.4em; } }
  #car-range .nav-tabs {
    padding: 0; }

#model-range {
  overflow: hidden; }
  #model-range ul {
    padding: 0; }
  #model-range li {
    list-style: none;
    background: #e8eff2;
    margin-bottom: 6px; }
    @media screen and (min-width: 768px) {
      #model-range li {
        margin-bottom: 30px; } }
    #model-range li .model {
      cursor: pointer;
      display: block;
      padding: 25px 30px;
      height: 220px;
      box-sizing: border-box;
      position: relative;
      background-repeat: no-repeat; }
      @media screen and (min-width: 480px) {
        #model-range li .model {
          height: 265px; } }
      #model-range li .model > h2 {
        color: #2e2e2e;
        font-family: VWHeadBold,Arial,sans-serif;
        font-size: 1.5em; }
      #model-range li .model img {
        display: block;
        width: 80%;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto; }
        @media screen and (min-width: 480px) {
          #model-range li .model img {
            top: -20px; } }
        @media screen and (min-width: 768px) {
          #model-range li .model img {
            top: 0; } }
    #model-range li .finance-calculator-button {
      background: #f8fbfb;
      font-size: 1.2em;
      color: #333;
      text-align: center;
      font-weight: bold;
      padding: 18px 0;
      display: none; }
      #model-range li .finance-calculator-button:hover {
        background: #fff; }
    #model-range li .finance-coming-soon {
      background: #f8fbfb;
      font-size: 1.2em;
      color: #333;
      text-align: center;
      font-weight: bold;
      padding: 18px 0; }

.model__price {
  font-size: 1.2em;
  color: #333; }

.model__performance {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center; }
  .model__performance p {
    font-size: 1.2em;
    color: #333; }

.model-hover {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  padding: 25px 30px;
  box-sizing: border-box;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: 0 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  cursor: pointer;
  /*@include mq('min-width', $vp-xsmall) {

        background-position: -330px -180px;
    }

    @include mq('min-width', $vp-small) {
        background-position: -425px -180px;
    }*/ }
  @media screen and (min-width: 992px) {
    .model-hover {
      background-size: auto auto;
      background-position: -350px -180px; } }
  @media screen and (min-width: 1170px) {
    .model-hover {
      background-position: -330px -180px; } }

@media screen and (min-width: 992px) {
  .model-hover__copy {
    width: 40%;
    float: right; } }

.model-hover__copy .model-hover__title {
  font-size: 1.3em;
  color: #00a8ec;
  font-weight: bold;
  margin-bottom: 20px; }

.model-hover__price {
  position: absolute;
  bottom: 30px;
  margin: 0;
  font-size: 1.2em;
  color: #333; }

.model-hover__tag-line {
  font-size: 1.2em;
  color: #7e8896; }

.model__link {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block; }

/* car-range.css */
/* Filter */
#range-filter-container {
  margin: 0 auto 30px;
  max-width: 820px; }
  @media screen and (min-width: 1170px) {
    #range-filter-container {
      margin: 0 auto 60px; } }

#range-filter-container select {
  cursor: pointer; }

#range-filter-container label,
#range-filter-container .input-select span {
  color: #4c4d4e;
  font-family: VWHeadlineBookRegular, Arial, sans-serif; }

#range-filter-container label {
  font-size: 1.1667em;
  /*14px*/ }

#range-filter-container option[value="min-business-payment"],
#range-filter-container a[data-value="min-business-payment"] {
  display: none; }

.ccd-customer #range-filter-container option[value="min-business-payment"],
.ccd-customer #range-filter-container a[data-value="min-business-payment"] {
  display: block; }

.ccd-customer #range-filter-container option[value="hero-trim-private-payment"],
.ccd-customer #range-filter-container a[data-value="hero-trim-private-payment"] {
  display: none; }

#uniform-range-filter,
#uniform-range-monthly-budget-filter {
  display: block; }

@media screen and (min-width: 768px) {
  #range-filter-container #uniform-range-filter,
  #range-filter-container #uniform-range-monthly-budget-filter,
  #uniform-range-bodystyle-filter {
    display: none; } }

/* Filter buttons */
#range-filter-buttons {
  position: relative;
  display: none; }
  @media screen and (min-width: 768px) {
    #range-filter-buttons {
      display: block; } }

#range-filter-buttons span.label {
  font-family: VWHeadlineSemiboldRegular, Arial, sans-serif;
  line-height: 30px;
  font-size: 1.333em;
  float: left;
  margin: 0 12px 0 0; }

body.disable-monthly-budget-filter .monthly-budget-filter-option {
  display: none !important; }

/* Temporary disabler for monthly budget filter when browsed by ccd customers */
body.disable-monthly-budget-filter-ccd-customer.ccd-customer .monthly-budget-filter-option {
  display: none !important; }

/* Monthly budget filter */
.range-monthly-budget-filter-container {
  display: none; }

#range-filter-container[data-active-filter='hero-trim-private-payment'] .range-monthly-budget-filter-container,
#range-filter-container[data-active-filter='min-business-payment'] .range-monthly-budget-filter-container {
  display: block; }

/* Monthly budget filter buttons */
#range-monthly-budget-filter-buttons {
  display: none; }

/* Bodystyle filter */
.range-bodystyle-filter-container {
  display: none; }

#range-filter-container[data-active-filter='body'] .range-bodystyle-filter-container,
#range-filter-container[data-active-filter='body'] .range-bodystyle-filter-container {
  display: block; }

/* Monthly budget filter buttons */
#range-bodystyle-filter-buttons {
  display: none; }

@media screen and (min-width: 768px) {
  #range-monthly-budget-filter-buttons {
    display: block; }
  #range-bodystyle-filter-buttons {
    display: block; } }

.prices-copy {
  margin: 1.5em 0 0;
  text-align: center;
  color: #9299a0; }

.prices-copy p {
  margin: 0 0 40px 0;
  font-size: 0.9em; }

.prices-copy p.default {
  display: block; }

.prices-copy p.monthly-budget-filter-selected {
  display: none; }

body[data-active-range-filter="hero-trim-private-payment"] .prices-copy p.default,
body[data-active-range-filter="min-public-payment"] .prices-copy p.default {
  display: none; }

body[data-active-range-filter="hero-trim-private-payment"] .prices-copy p.monthly-budget-filter-selected,
body[data-active-range-filter="min-public-payment"] .prices-copy p.monthly-budget-filter-selected {
  display: block; }

/* Ad banner */
.page-full-width-ad-banner {
  padding: 20px;
  background: #f1f1f1; }

.page-full-width-ad-banner h2 {
  margin: 0 0 10px; }

.page-full-width-ad-banner.header {
  margin: 0 0 20px; }

/* model-range.css */
#model-range .finance-calculator {
  display: none; }
  #model-range .finance-calculator p {
    margin: 0;
    font-size: 1.2em; }

#model-range ul.sort-hero-trim-private-payment .finance-calculator-button,
#model-range ul.sort-hero-trim-private-payment .finance-calculator,
#model-range ul.sort-min-business-payment .finance-calculator {
  display: block; }

#model-range .is-offer {
  color: #ff871f; }

.ccd-customer #model-range .sort-price .price .ccd {
  display: inline; }

#model-range .price,
#model-range .performance,
#model-range .efficiency,
#model-range .emissions,
.ccd-customer #model-range .sort-efficiency .efficiency.pc,
#model-range .size,
#model-range .hero-trim-private-payment,
#model-range .min-business-payment,
#model-range .body {
  display: none; }

#model-range .sort-price .price,
#model-range .sort-performance .performance,
#model-range .sort-efficiency .efficiency.pc,
.ccd-customer #model-range .sort-efficiency .efficiency.pc,
#model-range .sort-emissions .emissions.ccd,
#model-range .sort-size .size,
#model-range .sort-hero-trim-private-payment .hero-trim-private-payment,
#model-range .sort-min-business-payment .min-business-payment,
#model-range .sort-body .body {
  display: block; }

/* Promo */
.range-promo {
  padding: 20px;
  min-height: 200px;
  box-sizing: border-box;
  background-repeat: no-repeat;
  background-color: #111;
  background-size: cover; }
  @media screen and (min-width: 768px) {
    .range-promo {
      height: 400px;
      padding: 110px 55px 0; } }

.range-promo__right {
  float: right; }

.range-promo--title {
  font-size: 1.5em;
  color: #fff;
  font-family: VWHeadBold;
  max-width: 75%; }
  @media screen and (min-width: 992px) {
    .range-promo--title {
      font-size: 2.5em;
      max-width: inherit; } }

.range-promo--text {
  font-size: 1.1em;
  color: #fff;
  max-width: 60%; }
  @media screen and (min-width: 992px) {
    .range-promo--text {
      font-size: 1.7em; } }