/* -----------------------------------------------------
Retail Offers
----------------------------------------------------- */
/* -----------------------------------------------------
Mixins
----------------------------------------------------- */
/* ---------- Flex ---------- */
/* ---------- Backgrounds ---------- */
/* ---------- Psuedo Elements ---------- */
/*ui code*/
/* -----------------------------------------------------
Fonts
----------------------------------------------------- */
/* Audi */
@font-face {
  font-family: 'Audi';
  src: url("../fonts/AudiType-Normal.eot");
  src: url("../fonts/AudiType-Normal.eot?#iefix") format("embedded-opentype"), url("../fonts/AudiType-Normal.svg#AudiType-Normal") format("svg"), url("../fonts/AudiType-Normal.ttf") format("truetype"), url("../fonts/AudiType-Normal.woff") format("woff"), url("../fonts/AudiType-Normal.woff2") format("woff2");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'Audi';
  src: url("../fonts/AudiType-Bold.eot");
  src: url("../fonts/AudiType-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/AudiType-Bold.svg#AudiType-Bold") format("svg"), url("../fonts/AudiType-Bold.ttf") format("truetype"), url("../fonts/AudiType-Bold.woff") format("woff"), url("../fonts/AudiType-Bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal; }
/* Audi Extended */
@font-face {
  font-family: 'Audi Extended';
  src: url("../fonts/AudiType-ExtendedNormal.eot");
  src: url("../fonts/AudiType-ExtendedNormal.eot?#iefix") format("embedded-opentype"), url("../fonts/AudiType-ExtendedNormal.svg#AudiType-ExtendedNormal") format("svg"), url("../fonts/AudiType-ExtendedNormal.ttf") format("truetype"), url("../fonts/AudiType-ExtendedNormal.woff") format("woff"), url("../fonts/AudiType-ExtendedNormal.woff2") format("woff2");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'Audi Extended';
  src: url("../fonts/AudiType-ExtendedBold.eot");
  src: url("../fonts/AudiType-ExtendedBold.eot?#iefix") format("embedded-opentype"), url("../fonts/AudiType-ExtendedBold.svg#AudiType-ExtendedBold") format("svg"), url("../fonts/AudiType-ExtendedBold.ttf") format("truetype"), url("../fonts/AudiType-ExtendedBold.woff") format("woff"), url("../fonts/AudiType-ExtendedBold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal; }
/* Audi Icons */
@font-face {
  font-family: 'Audi Icons';
  src: url("../fonts/AudiIcons.eot");
  src: url("../fonts/AudiIcons.eot?#iefix") format("embedded-opentype"), url("../fonts/AudiIcons.svg#AudiType-ExtendedNormal") format("svg"), url("../fonts/AudiIcons.ttf") format("truetype"), url("../fonts/AudiIcons.woff") format("woff");
  font-weight: normal;
  font-style: normal; }
/* -----------------------------------------------------
Device Input
----------------------------------------------------- */
body.pointer:not(.lock-scroll) {
  top: 0 !important; }
body.pointer.lock-scroll {
  position: fixed;
  overflow-y: scroll; }
body.pointer .menu-bar .nav-link,
body.pointer .cta-link .cta-label {
  transition: color 0.3s; }
body.pointer .menu-bar .nav-link:hover,
body.pointer .quick-nav .nav-link:hover span:before,
body.pointer .cta-link:hover .cta-label,
body.pointer .filter-btn:not(.active):hover {
  color: #464646; }
body.pointer .select-option:not(.selected):hover,
body.pointer .social-link:hover:before {
  color: #fff; }
body.pointer .suggestion-link:hover .suggestion-url {
  color: #bb0a30; }
body.pointer .btn-primary:hover,
body.pointer .tab-btn:hover {
  background-color: #333; }
body.pointer .cta-blocks-sml p {
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  overflow: hidden;
  transition: all 0.4s 0.2s ease-out, opacity 0.4s; }
body.pointer .cta-blocks-sml .cta-block:hover p {
  opacity: 1;
  max-height: 50px;
  padding-top: 8px;
  transition: all 0.4s, opacity 0.4s 0.2s; }
body.pointer .cta-block:hover {
  background-color: #33323A; }
body.pointer .wishlist-cta.red:hover .grid-box-solid {
  background-color: #CA0A37; }
body.pointer .suggestion-link:hover:before,
body.pointer .suggestion-link:hover:after {
  background-color: #fff; }
body.pointer .suggestion-link:hover,
body.pointer .select-option:not(.selected):hover {
  padding-left: 6px; }
body.pointer .btn-secondary:hover:not(.btn-white) {
  border-color: #464646;
  color: #464646; }
body.pointer .btn-secondary:hover.btn-white {
  background-color: #fff;
  color: #000; }
body.pointer .text-field .input:hover,
body.pointer .select-input:hover {
  border-bottom-color: #000; }
body.pointer .input:not(:checked):hover ~ .field-toggle:after {
  transform: scale(1.2);
  background-color: #464646; }
body.pointer .grey .input:not(:checked):hover ~ .field-toggle:after {
  background-color: #CFD3D2; }
body.pointer .grey .range-checkbox-set .input:not(:checked):hover ~ .field-label {
  color: #CFD3D2; }
body.pointer .expanding-btn:hover .btn-icon {
  transform: scale(1.1);
  background-color: #28272E; }
body.pointer .expanding-btn:hover .btn-label {
  color: #28272E; }
body.pointer .expanding-module.open .expanding-btn:hover .btn-icon {
  transform: scale(1.1) rotate(45deg); }
body.pointer .grey .text-field .input:hover,
body.pointer .grey .select-input:hover,
body.pointer .black .text-field .input:hover,
body.pointer .black .select-input:hover {
  border-bottom-color: #fff; }
body.pointer .model a:hover .img-src {
  transform: scale(1.15);
  transform-origin: center; }
body.pointer .model-grid .model a:hover .model-tags {
  padding-bottom: 20px; }
  body.pointer .model-grid .model a:hover .model-tags:before {
    width: 100%;
    transition: width 0.4s 0.2s; }
body.pointer .model-grid .model a:hover .model-controls {
  opacity: 1;
  z-index: 1; }
body.pointer .grid-prompt:hover .prompt-overlay {
  background-color: #28272E; }
body.pointer .grid-prompt:hover .img-src {
  opacity: 0.4; }
body.pointer .btn-go:hover,
body.pointer .grid-prompt:hover .btn-go {
  padding-right: 22px; }
body.pointer .carousel-arrow:hover {
  transform: scale(1.4); }
body.touch.lock-scroll {
  height: 100%;
  position: relative;
  overflow-y: hidden; }
body.touch .model-grid .model-controls {
  opacity: 1;
  z-index: 1; }

/* -----------------------------------------------------
Pages
----------------------------------------------------- */
/* ----- Range Page ----- */
/*.range {
    min-height: 84vh;
}*/
/* ----- Model Page ----- */
                            /*
.model-hero {
    .grid-model {
        position: relative;
    }
    .full-container {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .range-name,
    .model-name {
        transition: font-size $timeSlw;
    }
    .range-name {
        font-size: 70px;
    }
    .model-name {
        font-size: 40px;
        margin-top: 20px;
    }
    .model-controls {
         bottom: auto;
         top: 0;
    }
    .grid-prompt,
    .grid-hero {
        transition: width $timeSlw;
    }
    .grid-hero {
        width: 100%;
    }
    .grid-prompt {
        left: auto;
        width: 0;
    }
    .prompt-title {
        span {
            display: block;
        }
    }
    .reveal-prompt {
        .grid-prompt {
            width: 382px;
        }
        .grid-hero {
            width: calc(100% - 382px);
        }
        .range-name {
            font-size: 50px !important;
        }
        .model-name {
            font-size: 28px;
            display: block;
        }
    }
}
.hero-img {
    padding-bottom: 62vh;
    overflow: hidden;
    .img-src {
        transform: scale(1.2);
        animation: revealHero 1.2s forwards ease-out;
    }
}
.hero-buttons {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    [class*="btn-"] {
        @include flexwidth(240px);
        &:nth-last-child(n+2) {
            margin-right: 10px;
        }
    }
}
.variant-carousel {
    .carousel-container {
        background-color: $panelgrey;
    }
    .slick-track {
        background-color: $white;
        padding: 0 3px;
    }
    .slide-box-solid {
        background-color: $panelgrey;
        color: $grey;
        height: 200px;
        padding: 30px;
        position: relative;
        transition: background-color $timeStd, color $timeStd;
    }
    .slide-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        position: relative;
    }
    .model-controls {
        bottom: 0;
        right: 0;
        display: flex;
        position: absolute;
        transition: opacity $timeStd;
    }
    .btn-control {
        display: block;
        &:nth-last-child(n+2) {
            margin-right: 14px;
        }
    }
    .variant-name {
        line-height: 1.16;
    }
    .variant-price {
        font-size: 20px;
    }*/
    /*.variant-slide {
        width: 26vw;
        padding: 0 3px;
        cursor: pointer;
        // &:first-child {
        //     box-shadow: -3px 0 0 0 $white;
        // }
        // &:last-child {
        //     box-shadow: 3px 0 0 0 $white;
        // }
        &:not(.slick-current) {
            .model-controls {
                opacity: 0;
                pointer-events: none;
            }
        }
        &.slick-current {
            .slide-box-solid {
                background-color: transparent;
                color: $black;
            }
            .model-controls {
                opacity: 1;
            }
        }
    }
}
.compare-label {
    font-family: $standard;
}*/
/* ----- Recommended Offers ----- */
/*.recommended {
    background-color: $panelgrey;
    .grid-bar {
        .grid-box-solid {
            background-color: $black;
        }
        .grid-box {
            padding: 0;
        }
    }
    .grid-container {
        padding: 0;
        margin: 0;
    }
}*/
/*
.cards-carousel {
    padding: 3px 0;
    position: relative;
    overflow: hidden;
    .carousel-container {
        width: 100%;
        display: flex;
        position: relative;
        transition: left 1s;
    }
    .grid-info {
        padding-top: 34px;
    }
    .slide-content {
        position: relative;
    }
    .card-cover {
        height: 30vh;
        position: relative;
    }
    .card-finance {
        background-color: $white;
        color: $black;
        min-height: 320px;
        padding: 40px 30px 0 30px;
    }
    .card-overlay {
        background-color: $panelgrey;
        opacity: 0.7;
        right: auto;
        width: 100%;
        pointer-events: none;
        transition: opacity $timeStd;
    }
    .range-name {
        font-size: 31px;
        transition: font-size $timeStd;
    }
    .model-name {
        display: none;
    }
    .grid-info-inner,
    .finance-content {
        transition: max-height 0s $timeStd, opacity $timeStd $timeStd;
    }
    .finance-content {
        max-height: 280px;
    }
    .finance-label,
    .finance-value {
        transition: font-size $timeStd;
    }
    .finance-label {
        padding-bottom: 4px;
        font-size: 12px;
    }
    .finance-value {
        font-size: 14px;
        font-weight: bold;
    }
    .finance-item {
        padding-bottom: 20px;
        &:first-child {
            @include flexwidth(100%);
            padding-bottom: 30px;
            .finance-label {
                font-family: $extended;
                transition: max-height $timeStd, opacity 0s;
            }
            .finance-value {
                font-size: 16px;
            }
        }
        &:nth-child(n+2) {
            .finance-value,
            .finance-label {
                white-space: nowrap;
            }
            .finance-label {
                color: $grey;
                font-weight: normal;
            }
        }
    }
    .btn-go {
        color: $red;
        margin-top: 4px;
        padding-bottom: 10px;
        font-weight: bold;
        transition: padding-right $timeStd, opacity $timeStd;
        &:before,
        &:after {
            background-color: $red;
            height: 2px;
        }
        &:before {
            top: calc(50% - 2px);
        }
    }
}
.cards-slide {
    width: 0;
    flex-basis: auto;
    flex-grow: 1;
    transition: flex-grow $timeReveal;
    &:not(.active) {
        cursor: pointer;
        .model-controls {
            opacity: 0;
            pointer-events: none;
        }
        .finance-item {
            @include flexwidth(100%);
            &:first-child .finance-label,
            &:nth-child(4) {
                overflow: hidden;
                opacity: 0;
                max-height: 0;
            }
            &:nth-child(4) {
                @include flexwidth(0);
                transition: all 0s, opacity $timeStd;
            }
        }
        .btn-go {
            display: none;
        }
    }
    &.narrow {
        flex-grow: 0.3;
        .grid-info-inner,
        .finance-content {
            opacity: 0;
            @include flexwidth(0);
            max-height: 0;
            overflow: hidden;
            transition: max-height 0s, opacity 0s;
        }
        .range-name {
            font-size: 25px;
        }
    }
    &[class*="que-"] {
        flex-grow: 1.3;
        .card-overlay {
            opacity: 0.5;
        }
        .range-name {
            font-size: 40px;
        }
        .finance-item:first-child .finance-value {
            font-size: 18px;
        }
    }
    &.active {
        flex-grow: 2;
        .card-overlay {
            opacity: 0;
        }
        .img-src {
            transform: scale(1.2);
        }
        .range-name {
            font-size: 50px;
        }
        .model-name {
            font-size: 25px;
            display: block;
        }
        .finance-label {
            font-size: 14px;
        }
        .finance-value {
            font-size: 16px;
        }
        .finance-item:first-child {
            .finance-label {
                max-height: 22px;
                transition: max-height $timeStd, opacity $timeSlw $timeStd;
            }
            .finance-value {
                font-size: 22px;
            }
        }
    }
}
*/
/* ----- Get in Touch ----- */
/*
.contact-pref {
    .flex-row {
        align-items: center;
    }
    .fieldset {
        padding: 0;
        padding-left: 10vw;
        flex-grow: 1;
    }
    .form-field {
        text-align: center;
    }
    .field-toggle {
        display: block;
        margin: 20px auto 0;
    }
}
*/
/* ----- Error Pages ----- */
.error-body .grid-box-solid {
  background-color: #bb0a30;
  min-height: calc(100vh - 162px);
  display: flex;
  justify-content: center;
  align-items: center; }
.error-body .error-title {
  line-height: 0.8; }
.error-body .error-subtitle {
  margin-top: 24px; }
.error-body .error-content {
  max-width: 320px;
  margin: 5vh auto; }
.error-body .btn, .error-body .btn-primary {
  margin-top: 10px; }
.error-body p + p {
  margin-top: 14px; }

/* -----------------------------------------------------
Grid
----------------------------------------------------- */
.grid-container {
  color: #fff;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 3px;
  margin-top: -6px; }
  .grid-container .offwhite,
  .grid-container .white {
    color: #000; }

.grid-item {
  width: 100%;
  flex-basis: 100%; }
  .grid-item.hidden {
    display: none; }

.grid-item-container {
  position: relative; }

.grid-box {
  padding: 3px;
  position: relative; }

.grid-model,
.grid-prompt,
.grid-layer {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute; }

.grid-model {
  transition: left 0.6s, top 0.6s; }

.grid-prompt {
  transition: right 0.6s, bottom 0.6s; }
  .grid-prompt .grid-overlay {
    animation-duration: 0.6s; }

.grid-box-solid,
.grid-info-inner {
  position: relative;
  height: 100%; }

.page-title .grid-box-solid {
  padding-top: 5vh;
  padding-bottom: 7vh; }
.page-title p, .page-title .page-intro {
  margin-top: 20px; }

.section-title .grid-box-solid {
  padding: 50px 0;
  text-align: center; }

.grid-overlay {
  background-color: #fff;
  animation-name: revealOverlay;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
  animation-delay: 0.4s; }

.grid-info {
  padding: 44px 30px 34px 30px; }

/* ----- Grid Skins ----- */
.grid-box-solid {
  transition: background-color 0.4s; }

.offwhite .grid-box-solid {
  background-color: #f0f0f0; }

.grey .grid-box-solid,
.grid-bar .grid-box-solid,
.grid-title .grid-box-solid,
.grid-prompt .grid-box-solid {
  background-color: #000; }

.black .grid-box-solid {
  background-color: #000; }

.red .grid-box-solid {
  background-color: #bb0a30; }

/* ----- Grid Bar ----- */
.grid-bar {
  width: 100%;
  flex-basis: 100%;
  font-size: 14px; }
  .grid-bar .grid-box-solid {
    width: 100%;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between; }
  .grid-bar .bar-title {
    padding: 0 25px; }
  .grid-bar .bar-controls {
    display: flex;
    height: 100%; }
  .grid-bar .bar-control {
    border-left: 1px solid #404040;
    height: 100%;
    width: 320px;
    flex-basis: 320px;
    display: flex;
    align-items: center;
    justify-content: center; }
  .grid-bar.hidden-bar .grid-box {
    transition: padding 0.4s; }
  .grid-bar.hidden-bar .grid-box-solid {
    overflow: hidden;
    transition: width 0.6s, height 0.4s; }
  .grid-bar.hidden-bar .bar-title,
  .grid-bar.hidden-bar .bar-controls {
    opacity: 0;
    animation-duration: 0.6s;
    animation-fill-mode: forwards; }
  .grid-bar.hidden-bar .bar-title {
    animation-name: revealInfo;
    animation-delay: 0.4s; }
  .grid-bar.hidden-bar .bar-controls {
    animation-name: revealHidden;
    animation-delay: 0.6s; }
  .grid-bar.hidden-bar:not(.reveal-bar) .grid-box-solid {
    width: 0;
    height: 0; }
  .grid-bar.hidden-bar:not(.reveal-bar) .grid-box {
    padding-top: 0;
    padding-bottom: 0; }
  .grid-bar.hidden-bar:not(.reveal-bar) .bar-title,
  .grid-bar.hidden-bar:not(.reveal-bar) .bar-controls {
    display: none; }

/* ----- Grid Model ----- */
.range-name {
  font-size: 2.8vw; }

[data-toprow="true"] .range-name {
  font-size: 3.4vw; }

.model-name {
  font-size: 1.6vw;
  margin-top: 14px; }

.grid-model {
  overflow: hidden; }
  .grid-model .model-img {
    overflow: hidden; }
    .grid-model .model-img .img-src {
      animation-name: revealImg;
      animation-duration: 0.8s;
      animation-delay: 0.4s;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 100%; }
  .grid-model .range-name,
  .grid-model .model-name,
  .grid-model .model-tags {
    opacity: 0;
    animation-name: revealInfo;
    animation-duration: 0.6s;
    animation-fill-mode: forwards; }
  .grid-model .range-name,
  .grid-model .model-name {
    line-height: 0.9;
    animation-delay: 0.6s; }
  .grid-model .model-tags,
  .grid-model .model-controls {
    position: absolute;
    bottom: 0; }
  .grid-model .model-tags {
    left: 0;
    animation-delay: 0.8s; }
  .grid-model .model-tag {
    white-space: nowrap; }
  .grid-model .model-controls {
    right: 0;
    display: flex; }

/* ----- Grid prompt ----- */
.grid-prompt p, .grid-prompt .btn-secondary {
  letter-spacing: 0.3px; }
.grid-prompt .prompt-overlay {
  opacity: 0.6;
  background-color: #000;
  transition: background-color 0.4s; }
.grid-prompt .img-src {
  opacity: 0.7;
  transition: opacity 0.4s; }

.prompt-open {
  cursor: pointer; }

.prompt-message {
  opacity: 0; }
  .prompt-message .prompt-title {
    padding-bottom: 25px; }
  .prompt-message p:nth-of-type(n+2) {
    padding-top: 15px; }
  .prompt-message .btn-go {
    margin-top: 15px; }

.prompt-buttons,
.prompt-control {
  position: absolute;
  opacity: 0; }

.prompt-buttons {
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between; }
  .prompt-buttons [class^="btn"] {
    width: calc(50% - 5px);
    flex-basis: calc(50% - 5px);
    padding-left: 0;
    padding-right: 0; }

[data-toprow="true"] .grid-prompt,
.grid-prompt.prompt-full {
  bottom: 100%; }

.grid-item:not([data-toprow="true"]) .prompt-half {
  right: 100%; }
  .grid-item:not([data-toprow="true"]) .prompt-half .prompt-title {
    font-size: 24px; }

.reveal-prompt .range-name {
  font-size: 31px !important; }
.reveal-prompt .model-name {
  display: none; }
.reveal-prompt .prompt-message {
  animation: revealInfo 0.4s forwards;
  animation-delay: 0.6s; }
.reveal-prompt:not([data-toprow="true"]) .prompt-half {
  right: 50%; }
  .reveal-prompt:not([data-toprow="true"]) .prompt-half ~ .grid-model {
    left: 50%; }
    .reveal-prompt:not([data-toprow="true"]) .prompt-half ~ .grid-model .model-tag:not(.price) {
      max-width: 0;
      transition: max-width 0s; }
    .reveal-prompt:not([data-toprow="true"]) .prompt-half ~ .grid-model .model-controls {
      opacity: 0 !important;
      pointer-events: none; }
.reveal-prompt[data-toprow="true"] .prompt-half {
  bottom: 50%; }
  .reveal-prompt[data-toprow="true"] .prompt-half ~ .grid-model {
    top: 50%; }
.reveal-prompt .grid-prompt.prompt-full {
  bottom: 0; }
  .reveal-prompt .grid-prompt.prompt-full ~ .grid-model {
    top: 100%; }
    .reveal-prompt .grid-prompt.prompt-full ~ .grid-model .grid-info {
      display: none; }
.reveal-prompt .prompt-control,
.reveal-prompt .prompt-buttons {
  animation-name: revealHidden;
  animation-duration: 0.4s;
  animation-fill-mode: forwards;
  animation-delay: 0.6s; }
.reveal-prompt[data-assist="active"].prompt-top .grid-prompt {
  bottom: 0; }
.reveal-prompt[data-assist="active"].prompt-top .grid-model {
  top: 100%; }
.reveal-prompt[data-assist="active"].prompt-side .grid-prompt {
  right: 0; }
.reveal-prompt[data-assist="active"].prompt-side .grid-model {
  left: 100%; }

.hide-prompt .grid-prompt .grid-info {
  display: none; }

.prompt-components {
  display: none !important; }

[data-state="remove"] .grid-info {
  animation-name: revealInfo;
  animation-duration: 0.3s;
  animation-direction: reverse;
  animation-fill-mode: forwards; }
[data-state="remove"] .grid-model .grid-box-solid:after {
  content: "";
  background-color: #fff;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  animation-name: revealOverlay;
  animation-duration: 0.4s;
  animation-direction: reverse;
  animation-fill-mode: forwards;
  animation-delay: 0.4s; }
[data-state="remove"] .model-controls,
[data-state="remove"] .prompt-controls,
[data-state="remove"] .prompt-buttons {
  display: none; }

/* ----- Model Grid ----- */
.home .model-grid .grid-container {
  min-height: 50vw; }

.range .model-grid .grid-container {
  min-height: calc(30vw + 70px); }

.model-grid {
  /* Structure */
  /* Models */ }
  .model-grid .grid-container {
    align-content: flex-start; }
  .model-grid .grid-item {
    transition: width 0.6s, flex-basis 0.6s; }
    .model-grid .grid-item[data-span="1"] {
      width: 100%;
      flex-basis: 100%; }
  .model-grid .grid-item-container {
    padding-bottom: 20vw;
    transition: padding-bottom 0.4s; }
  .model-grid [data-toprow="true"] .grid-item-container {
    padding-bottom: 30vw; }
  .model-grid .btn-holder {
    padding-bottom: 0 !important; }
  .model-grid .range-name,
  .model-grid .model-name {
    transition: font-size 0.6s; }
  .model-grid .model-tags {
    font-size: 17px;
    transition: padding 0.4s; }
    .model-grid .model-tags:before {
      content: "";
      display: block;
      border-top: 4px solid #fff;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0px;
      transition: width 0s; }
  .model-grid .model-tag:not(.price) {
    max-width: 200px;
    overflow: hidden;
    transition: max-width 2s; }
  .model-grid .model-controls {
    opacity: 0;
    z-index: -1;
    transition: opacity 0.6s; }

/* -----------------------------------------------------
Keyframes
----------------------------------------------------- */
@keyframes btnResponse {
  100% {
    opacity: 0;
    width: 90px;
    height: 90px;
    border-width: 4px; } }
@keyframes controlResponse {
  0% {
    opacity: 0.15;
    width: 100%;
    height: 100%;
    border-width: 10px; }
  99% {
    opacity: 0;
    width: 200%;
    height: 200%;
    border-width: 1px; }
  100% {
    opacity: 0;
    width: 100%;
    height: 100%;
    border-width: 1px; } }
@keyframes revealOverlay {
  0% {
    top: 0; }
  100% {
    top: 100%; } }
@keyframes revealImg {
  0% {
    transform: scale(1.2);
    transform-origin: left center; }
  100% {
    transform: scale(1); } }
@keyframes revealInfo {
  0% {
    opacity: 0;
    transform: translateX(30px); }
  100% {
    opacity: 1;
    transform: translateX(0); } }
@keyframes revealHero {
  100% {
    transform: scale(1); } }
@keyframes revealExpanded {
  0% {
    opacity: 0;
    transform: translateY(30px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }
@keyframes revealStagger {
  0% {
    opacity: 0;
    transform: translateY(50px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }
@keyframes pulse {
  0%, 100% {
    transform: scale(1); }
  50% {
    transform: scale(1.2); } }
@keyframes badgeResponse {
  0%, 100% {
    transform: scale(1); }
  50% {
    transform: scale(1.3); } }
@keyframes slideIn {
  100% {
    transform: translateX(0); } }
@keyframes slideUp {
  0% {
    opacity: 1;
    transform: translateY(100%); }
  100% {
    opacity: 1;
    transform: translateY(0); } }
@keyframes removeItem {
  100% {
    padding-bottom: 0%; } }
@keyframes revealHidden {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes btnResponse {
  100% {
    opacity: 0;
    width: 90px;
    height: 90px;
    border-width: 4px; } }
/* -----------------------------------------------------
Forms
----------------------------------------------------- */
/* ----- Resets ----- */
/* ----- General ----- */
.form-subtitle {
  padding-bottom: 3vw; }

.fieldset {
  border: none; }

.fieldset + .form-subtitle {
  padding-top: 4vw; }

.page-title .fieldset {
  padding-top: 40px;
  width: calc(((100% + 200px) / 3 * 2 - 200px) / 2 - 22px); }

.flex-row .form-subtitle, .categories .form-subtitle {
  padding-bottom: 0; }

.form-field {
  font-size: 18px; }

.form-input,
.select-ul {
  position: relative; }

.text-field .input,
.text-field .field-label,
.select-input {
  height: 50px; }

.text-field .input,
.select-input {
  width: 100%;
  border-bottom: 1px solid #464646;
  transition: border 0.4s; }

/* ----- Text Fields ----- */
.text-field .input {
  display: block;
  box-shadow: 0 1px 0 0 rgba(146, 146, 146, 0) !important; }
.text-field .field-label,
.text-field .field-line {
  left: 0;
  position: absolute; }
.text-field .field-label {
  color: #464646;
  top: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 1;
  transition: all 0.4s; }
.text-field .field-line {
  width: 100%;
  bottom: 0;
  height: 2px;
  background-color: #464646;
  opacity: 0;
  transition: all 0.4s; }
.text-field .input:focus + .field-line {
  background-color: #000;
  opacity: 1; }
.text-field.active .input {
  border-bottom-color: #000; }
.text-field.active .field-label {
  height: 12px;
  top: -10px;
  font-size: 13px; }

/* ----- Select Fields ----- */
.select-input,
.select-option {
  cursor: pointer; }

.select-input {
  text-align: left;
  padding-right: 40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative; }
  .select-input.input-placeholder, .select-input span {
    color: #464646; }

.select-box,
.select-option.select-label span {
  background-color: #33323A; }

.select-box {
  color: #fff;
  padding: 18px 30px;
  width: 100%;
  max-height: 254px;
  left: 0;
  bottom: 1px;
  overflow-y: auto;
  overflow-x: hidden;
  transform: translateY(100%);
  position: absolute;
  display: none; }

.select-option {
  color: #CFD3D2;
  font-size: 15px;
  padding: 10px 0;
  animation: revealInfo 0.4s;
  transition: padding-left 0.6s;
  display: none; }
  .select-option.selected {
    color: #fff; }
  .select-option.select-placeholder {
    display: none !important; }
  .select-option.select-label {
    color: #464646;
    font-family: "Audi Extended", Arial, sans-serif;
    font-size: 13px;
    font-weight: normal;
    position: relative;
    pointer-events: none; }
    .select-option.select-label span {
      display: inline-block;
      padding-right: 10px;
      background-color: #4C4C4C;
      position: relative;
      z-index: 1; }
    .select-option.select-label:after {
      background-color: #404040;
      width: 100%;
      height: 1px;
      content: "";
      display: block;
      position: absolute;
      top: calc(50% + 1px);
      right: 0; }
    .select-option.select-label:after {
      top: 50%; }

.select-ul .arrow {
  position: absolute;
  right: 0;
  top: 50%; }
  .select-ul .arrow:before, .select-ul .arrow:after {
    content: "";
    width: 14px;
    border-bottom: 1px solid #404040;
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    transition: 0.4s; }
  .select-ul .arrow:before {
    transform: rotate(45deg);
    right: 10px; }
  .select-ul .arrow:after {
    transform: rotate(-45deg); }
.select-ul .select-close {
  background-color: rgba(0, 0, 0, 0.7);
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  position: fixed;
  display: none; }
  .select-ul .select-close:before, .select-ul .select-close:after {
    width: 20px;
    left: calc(50% - 10px);
    height: 1px;
    top: 50%; }
.select-ul.open {
  z-index: 10; }
  .select-ul.open .arrow:before {
    transform: rotate(135deg); }
  .select-ul.open .arrow:after {
    transform: rotate(-135deg); }
  .select-ul.open .select-box,
  .select-ul.open .select-option {
    display: block; }
  .select-ul.open .select-box,
  .select-ul.open .select-close {
    z-index: 100; }
.select-ul.disabled {
  pointer-events: none; }
.select-ul .simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
  top: 6px;
  bottom: 6px;
  opacity: 0.4; }

/* ----- Radios & Checkboxes ----- */
.control-field .input,
.control-field .field-label {
  cursor: pointer; }
.control-field .input {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0 !important;
  z-index: 1; }
.control-field .field-label {
  color: #464646;
  transition: color 0.4s; }
.control-field .input:checked ~ .field-label {
  color: #000; }

.field-toggle {
  width: 50px;
  height: 26px;
  border-radius: 13px;
  border: 1px solid #464646;
  position: relative;
  transition: border 0.4s; }
  .field-toggle:after {
    content: "";
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: 8px;
    border-radius: 100%;
    background-color: #CFD3D2;
    position: absolute;
    transition: all 0.4s; }

.input:checked ~ .field-toggle:after {
  background-color: #28272E;
  left: calc(100% - 18px);
  transform: scale(1.2); }

.control-row {
  text-align: center; }
  .control-row .field-toggle {
    margin: 14px auto 0; }

/* ----- Radio Fields ----- */
.radio-field .form-input {
  display: inline-block; }
.radio-field .field-label {
  display: block; }

/* ----- Checkbox Fields ----- */
.checkbox-list .check-field:nth-last-child(n+2) {
  margin-bottom: 40px; }
.checkbox-list .form-input {
  display: flex;
  justify-content: flex-start;
  align-items: center; }
.checkbox-list .field-label {
  flex-grow: 1;
  color: #464646; }

.range-checkbox-set .check-field .field-label {
  color: #464646;
  border: 1px solid #464646;
  width: 68px;
  height: 68px;
  border-radius: 100%;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.4s; }
.range-checkbox-set .check-field .input:checked ~ .field-label {
  border-color: #000;
  color: #000; }
.range-checkbox-set .flex {
  flex-wrap: wrap;
  width: 100%;
  justify-content: flex-start;
  align-items: flex-start; }
.range-checkbox-set .form-input {
  margin: 12px; }

/* ----- Range Fields ----- */
.range-field .field-label {
  color: #464646;
  padding-bottom: 30px;
  text-align: center;
  display: block; }

/* ----- Search Fields ----- */
.search-field {
  position: relative; }
  .search-field .input {
    width: 100%;
    display: block; }
    .search-field .input::-webkit-input-placeholder {
      color: #464646;
      opacity: 1; }
    .search-field .input::-moz-placeholder {
      color: #464646;
      opacity: 1; }
    .search-field .input:-ms-input-placeholder {
      color: #464646;
      opacity: 1; }
    .search-field .input:-moz-placeholder {
      color: #464646;
      opacity: 1; }
  .search-field .reset-form {
    position: absolute;
    width: 50px;
    height: 100%;
    top: 0;
    right: 0;
    color: #ffffff; }
    .search-field .reset-form:before, .search-field .reset-form:after {
      border-bottom: 1px solid #ffffff;
      width: 16px;
      top: 50%;
      left: calc(50% - 8px);
      position: absolute;
      display: block;
      content: ""; }
    .search-field .reset-form:before {
      transform: rotate(-45deg); }
    .search-field .reset-form:after {
      transform: rotate(45deg); }
  .search-field .input:placeholder-shown ~ .reset-form {
    display: none; }

/* ----- Autofill Fields ----- */
.input:-webkit-autofill,
input:-webkit-autofill, .input:-webkit-autofill,
input:-webkit-autofill:hover, .input:-webkit-autofill:hover,
input:-webkit-autofill:focus, .input:-webkit-autofill:focus,
textarea:-webkit-autofill, .textarea:-webkit-autofill,
textarea:-webkit-autofill:hover, .textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus, .textarea:-webkit-autofill:focus,
select:-webkit-autofill, .select:-webkit-autofill,
select:-webkit-autofill:hover, .select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: #000;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
  transition: background-color 5000s ease-in-out 0s;
  background-color: transparent !important; }

.offwhite input:-webkit-autofill,
.offwhite input:-webkit-autofill:hover,
.offwhite input:-webkit-autofill:focus
textarea:-webkit-autofill,
.offwhite textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
.offwhite select:-webkit-autofill,
.offwhite select:-webkit-autofill:hover,
.offwhite select:-webkit-autofill:focus {
  -webkit-text-fill-color: #000;
  -webkit-box-shadow: 0 0 0px 1000px #f0f0f0 inset;
  transition: background-color 5000s ease-in-out 0s;
  background-color: transparent !important; }

.grey input:-webkit-autofill,
.grey input:-webkit-autofill:hover,
.grey input:-webkit-autofill:focus
textarea:-webkit-autofill,
.grey textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
.grey select:-webkit-autofill,
.grey select:-webkit-autofill:hover,
.grey select:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0px 1000px #28272E inset;
  transition: background-color 5000s ease-in-out 0s;
  background-color: transparent !important; }

.black input:-webkit-autofill,
.black input:-webkit-autofill:hover,
.black input:-webkit-autofill:focus
textarea:-webkit-autofill,
.black textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
.black select:-webkit-autofill,
.black select:-webkit-autofill:hover,
.black select:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
  background-color: transparent !important; }

/* ----- Dark Skin ----- */
.grey .text-field .input,
.black .text-field .input,
.page-title .text-field .input {
  color: #fff; }
  .grey .text-field .input:focus + .field-line,
  .black .text-field .input:focus + .field-line,
  .page-title .text-field .input:focus + .field-line {
    background-color: #fff; }
.grey .text-field.active .input,
.black .text-field.active .input,
.page-title .text-field.active .input {
  border-bottom-color: #fff; }
.grey .select-ul .arrow:before, .grey .select-ul .arrow:after,
.black .select-ul .arrow:before,
.black .select-ul .arrow:after,
.page-title .select-ul .arrow:before,
.page-title .select-ul .arrow:after {
  border-bottom-color: #CFD3D2; }
.grey .select-ul .select-box,
.black .select-ul .select-box,
.page-title .select-ul .select-box {
  background-color: #33323A; }
.grey .control-field .input:checked ~ .field-label,
.black .control-field .input:checked ~ .field-label,
.page-title .control-field .input:checked ~ .field-label {
  border-color: #fff;
  color: #fff; }
.grey .field-toggle,
.black .field-toggle,
.page-title .field-toggle {
  border-color: #464646; }
  .grey .field-toggle:after,
  .black .field-toggle:after,
  .page-title .field-toggle:after {
    background-color: #464646; }
.grey .input:checked ~ .field-toggle:after,
.black .input:checked ~ .field-toggle:after,
.page-title .input:checked ~ .field-toggle:after {
  background-color: #fff; }

/* ----- Form validation ----- */
.text-field .input.error,
.select-ul.error .select-input,
.select-ul.error .arrow:before,
.select-ul.error .arrow:after {
  border-bottom-color: #bb0a30 !important;
  transition: border 0s; }

.text-field .input.error ~ .field-line {
  background-color: #bb0a30 !important; }

.error-msg,
.select-ul.error .select-input,
.input.error ~ .field-label,
.checkbox-set.set-error .field-label {
  color: #bb0a30 !important; }

.error-msg {
  font-family: "Audi", Arial, sans-serif;
  font-size: 14px;
  margin-top: 8px;
  display: block; }

.radio-set .error-msg,
.checkbox-set .error-msg {
  margin-top: 30px; }

.contact-pref .error-msg,
.model-checkbox-set .error-msg {
  margin-top: 30px;
  text-align: center; }

.input.error ~ .field-toggle,
.set-error .field-toggle,
.model-checkbox-set .input.error ~ .field-label,
.model-checkbox-set.set-error .field-label {
  border-color: #bb0a30 !important; }

.input.error ~ .field-toggle:after,
.set-error .field-toggle:after {
  background-color: #bb0a30; }

/* ----- Thank You ----- */
.thank-you .popup-box {
  text-align: center; }
.thank-you h5 {
  margin-top: 10px;
  font-weight: normal; }

/*****TYPOGRAPHY*****/
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  padding: 0;
  margin: 0; }

::-moz-selection {
  background: #CFD3D2;
  color: #000; }

::selection {
  background: #CFD3D2;
  color: #000; }

body, h1, h2, h3, h4, h5, h6, p, ul, ol, button, input, textarea, select {
  padding: 0;
  margin: 0; }

body, html {
  display: block;
  padding: 0;
  margin: 0 auto;
  font-family: "Audi Extended", Audi Extended, Arial, sans-serif, "Audi Type", AudiTypeExtended, Arial, sans-serif;
  font-size: 12px;
  font-weight: normal;
  line-height: 18px;
  color: #333333;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  overflow-x: hidden;
  position: relative; }

body {
  /*max-width: $document-max-width;*/
  font-weight: normal;
  background: #ffffff; }
  body.fixed {
    position: fixed; }
  @media screen and (max-width: 1080px) {
    body {
      padding-top: 68px; } }

input {
  font-family: "Audi Extended", Audi Extended, Arial, sans-serif, "Audi Type", AudiTypeExtended, Arial, sans-serif;
  background-color: transparent;
  border: none;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0;
  font-size: 17px;
  line-height: 17px; }

main, section {
  position: relative;
  padding-right: 0;
  padding-left: 0;
  width: 100%;
  display: block; }

img {
  display: block;
  max-width: 100%;
  height: auto;
  width: auto;
  margin: 0 auto; }

a, span, label, ul li, p {
  font-family: "Audi Extended", Audi Extended, Arial, sans-serif;
  font-size: 15px;
  line-height: 17px;
  color: #040505; }

p {
  font-size: 20px;
  line-height: 28px;
  font-weight: 400;
  margin-bottom: 16px; }
  p i {
    font-size: inherit;
    line-height: 29px;
    color: #666666; }

span {
  display: inline-block; }

label {
  display: block; }

textarea {
  padding: 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

i {
  font-size: 13px;
  line-height: 15px; }

ul.list-dash li {
  list-style: none;
  position: relative;
  padding-left: 20px; }
  ul.list-dash li:before {
    content: "- ";
    position: absolute;
    top: 0;
    left: 0; }
@media (max-width: 768px) {
  ul li {
    font-size: 14px; } }

hr {
  border: none;
  border-bottom: 1px solid #040505; }

blockquote {
  font-size: 22px;
  line-height: 26px;
  color: #040505;
  font-weight: 700;
  margin-bottom: 13px; }
  blockquote span {
    font-size: 13px; }

h1, h2, h3, h4, h5, h6, .aui-headline-1, .aui-headline-2, .aui-headline-3, .aui-headline-4, .aui-headline-5, .aui-headline-6, .aui-headline-7 {
  font-family: "Audi Extended", Audi Extended, Arial, sans-serif;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: #333333; }
  h1 span, h2 span, h3 span, h4 span, h5 span, h6 span, .aui-headline-1 span, .aui-headline-2 span, .aui-headline-3 span, .aui-headline-4 span, .aui-headline-5 span, .aui-headline-6 span, .aui-headline-7 span {
    font-weight: 400; }

h1, .h1 {
  font-size: 60px;
  line-height: 72px;
  margin-bottom: 10px; }

h2, .h2 {
  font-size: 47px;
  line-height: 47px; }

h3, .h3 {
  font-size: 24px;
  line-height: 27px; }

h4, .h4 {
  font-size: 26px;
  line-height: 25px; }

h5, .h5 {
  font-size: 24px;
  line-height: 27px; }

h6, .h6 {
  font-size: 18px;
  line-height: 21px; }

.aui-headline-1 {
  font-size: 54px;
  line-height: 65px;
  font-weight: 700; }

.aui-headline-2 {
  font-size: 40px;
  line-height: 40px; }

.aui-headline-3 {
  font-size: 20px;
  line-height: 24px; }

.aui-headline-4 {
  font-size: 16px;
  line-height: 21px; }

.aui-headline-5 {
  font-size: 13px;
  line-height: 16px; }

.aui-headline-6 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700; }

.aui-headline-7 {
  font-size: 22px;
  line-height: 24px; }

.field-label, .select-value {
  font-size: 18px;
  line-height: 21px; }
  @media (max-width: 640px) {
    .field-label, .select-value {
      font-size: 15px;
      line-height: 18px; } }

.text-field.active .field-label {
  font-size: 14px; }

/* Icons */
.social-link a, [class*="ico-"], .cta-icon, .social-item a {
  position: relative; }
  .social-link a:before, [class*="ico-"]:before, .cta-icon:before, .social-item a:before {
    font-family: "Audi Icons";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.4s; }

.social-link[title="Facebook"]:before {
  content: "\e904"; }

.social-link[title="Instagram"]:before {
  content: "\e903"; }

.social-link[title="Twitter"]:before {
  content: "\e901"; }

.social-link[title="YouTube"]:before {
  content: "\e900"; }

.social-link[title="LinkedIn"]:before {
  content: "\e902"; }

.ico-search:before {
  content: "\e905";
  color: black; }

@media screen and (max-width: 1300px) {
  .aui-headline-3 {
    font-size: 17px; }

  .select-value {
    font-size: 14px; }

  h6, .h6, .aui-headline-6 {
    font-size: 15px;
    line-height: 21px; } }
@media screen and (max-width: 1140px) {
  .aui-headline-2 {
    font-size: 25px;
    line-height: 30px; }

  .aui-headline-7 {
    font-size: 15px;
    line-height: 18px; }

  blockquote {
    font-size: 18px;
    line-height: 23px; }

  h1, .aui-headline-1 {
    font-size: 40px;
    line-height: 58px; }

  h2 {
    font-size: 36px;
    line-height: 46px; }

  h3 {
    font-size: 25px;
    line-height: 37px; }

  h4 {
    font-size: 20px;
    line-height: 27px; }

  h5, .h5 {
    font-size: 18px;
    line-height: 26px; }

  p, a {
    font-size: 16px;
    line-height: 20px; } }
@media (max-width: 640px) {
  h1, .aui-headline-1 {
    font-size: 28px;
    line-height: 34px; }

  h2 {
    font-size: 24px;
    line-height: 30px; }

  h3 {
    font-size: 20px;
    line-height: 25px; }

  h4 {
    font-size: 18px;
    line-height: 21px; }

  h5, .h5, .aui-headline-3 {
    font-size: 16px;
    line-height: 18px; }

  p, a {
    font-size: 14px;
    line-height: 17px; } }
@media screen and (max-width: 500px) {
  h1, .h1, .aui-headline-1 {
    margin-bottom: 20px;
    font-size: 26px;
    line-height: 32px; } }
/*****DEFAULTS*****/
img {
  max-width: 100%;
  display: block;
  height: auto; }
  img.non-responsive {
    width: auto;
    max-width: unset; }

.design-feedback-needed {
  background-color: red !important; }
  .design-feedback-needed:before {
    font-size: 30px;
    line-height: 30px;
    content: "design feedback needed"; }

/******DEFAULTS******/
.nav-list .nav-item {
  display: inline-block;
  vertical-align: middle; }
.nav-list .nav-link {
  display: block; }

.active-underline {
  position: absolute;
  display: block;
  border-bottom: 1px solid #000;
  width: 0;
  bottom: 0;
  transition: left 0.4s, width 0.4s; }

[class*="-value"].empty:after {
  content: "\2014"; }

.scroll-reveal > div {
  opacity: 0; }
  .scroll-reveal > div[data-state="reveal"] {
    animation: revealStagger 0.8s forwards; }

.scroll-reveal-row > div[data-state="reveal"] {
  animation: revealHidden 0.8s forwards; }
  .scroll-reveal-row > div[data-state="reveal"]:nth-child(2n) {
    animation-delay: 0.16s; }
  .scroll-reveal-row > div[data-state="reveal"]:nth-child(3n) {
    animation-delay: 0.24s; }
  .scroll-reveal-row > div[data-state="reveal"]:nth-child(4n) {
    animation-delay: 0.32s; }
  .scroll-reveal-row > div[data-state="reveal"]:nth-child(5n) {
    animation-delay: 0.4s; }
  .scroll-reveal-row > div[data-state="reveal"]:nth-child(6n) {
    animation-delay: 0.48s; }
  .scroll-reveal-row > div[data-state="reveal"]:nth-child(7n) {
    animation-delay: 0.56s; }
  .scroll-reveal-row > div[data-state="reveal"]:nth-child(8n) {
    animation-delay: 0.64s; }
  .scroll-reveal-row > div[data-state="reveal"]:nth-child(9n) {
    animation-delay: 0.72s; }
  .scroll-reveal-row > div[data-state="reveal"]:nth-child(10n) {
    animation-delay: 0.8s; }
  .scroll-reveal-row > div[data-state="reveal"]:nth-child(11n) {
    animation-delay: 0.88s; }
  .scroll-reveal-row > div[data-state="reveal"]:nth-child(12n) {
    animation-delay: 0.96s; }
  .scroll-reveal-row > div[data-state="reveal"]:nth-child(13n) {
    animation-delay: 1.04s; }
  .scroll-reveal-row > div[data-state="reveal"]:nth-child(14n) {
    animation-delay: 1.12s; }
  .scroll-reveal-row > div[data-state="reveal"]:nth-child(15n) {
    animation-delay: 1.2s; }
  .scroll-reveal-row > div[data-state="reveal"]:nth-child(16n) {
    animation-delay: 1.28s; }
  .scroll-reveal-row > div[data-state="reveal"]:nth-child(17n) {
    animation-delay: 1.36s; }
  .scroll-reveal-row > div[data-state="reveal"]:nth-child(18n) {
    animation-delay: 1.44s; }
  .scroll-reveal-row > div[data-state="reveal"]:nth-child(19n) {
    animation-delay: 1.52s; }
  .scroll-reveal-row > div[data-state="reveal"]:nth-child(20n) {
    animation-delay: 1.6s; }

.simplebar-track.simplebar-vertical {
  width: 20px; }
  .simplebar-track.simplebar-vertical .simplebar-scrollbar {
    width: 100%;
    right: 0; }
    .simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
      top: 0;
      bottom: 0;
      width: 8px;
      left: calc(50% - 4px);
      border-radius: 0;
      opacity: 0.2; }

.social-icons {
  display: block;
  position: relative;
  clear: both;
  float: none !important; }
  .social-icons::after {
    position: relative;
    content: '';
    display: table;
    clear: both; }
  .social-icons li {
    display: block;
    float: left; }
    .social-icons li a {
      width: 29px;
      height: 29px;
      background-image: url(../images/img.png);
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img.png', sizingMethod=scale);
      -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img.png', sizingMethod=scale)";
      background-repeat: no-repeat;
      background-position: center center;
      -webkit-background-size: auto auto;
      -moz-background-size: auto auto;
      -o-background-size: auto auto;
      background-size: auto auto; }

.clear-fix {
  position: relative;
  clear: both;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important; }
  .clear-fix::after {
    position: relative;
    content: '';
    display: table;
    clear: both; }

.background-image {
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='', sizingMethod=scale);
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='', sizingMethod=scale)";
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow: hidden; }
  .background-image.contain {
    background-size: contain; }
  .background-image img {
    -webkit-transform: scale(1, 1);
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
    -webkit-transition: all 600ms linear;
    -moz-transition: all 600ms linear;
    -ms-transition: all 600ms linear;
    -o-transition: all 600ms linear;
    transition: all 600ms linear; }
  @media (max-width: 768px) {
    .background-image {
      height: 75vh; }
      .background-image img {
        display: none; } }

.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; }

.nav-close {
  display: none;
  z-index: 9; }

.more-content {
  display: none;
  position: absolute;
  bottom: 36px;
  left: 50%;
  width: 78px;
  height: 78px;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  animation-name: bounce;
  animation-duration: 1800ms;
  animation-iteration-count: infinite; }
  .more-content:before, .more-content:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 40px;
    height: 1px;
    border-bottom: 1px solid #ffffff; }
  .more-content:before {
    left: 0;
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    transform: rotate(20deg); }
  .more-content:after {
    right: 0;
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    transform: rotate(-20deg); }
  @media screen and (max-width: 500px) {
    .more-content {
      display: block; } }

@-webkit-keyframes bounce {
  0% {
    bottom: 36px; }
  25% {
    bottom: 36px; }
  50% {
    bottom: 26px; }
  100% {
    bottom: 36px; } }
@-moz-keyframes bounce {
  0% {
    bottom: 36px; }
  25% {
    bottom: 36px; }
  50% {
    bottom: 26px; }
  100% {
    bottom: 36px; } }
@-ms-keyframes bounce {
  0% {
    bottom: 36px; }
  25% {
    bottom: 36px; }
  50% {
    bottom: 26px; }
  100% {
    bottom: 36px; } }
@keyframes bounce {
  0% {
    bottom: 36px; }
  25% {
    bottom: 36px; }
  50% {
    bottom: 26px; }
  100% {
    bottom: 36px; } }
/*****BUTTONS*****/
button, input[type="submit"] {
  font-family: "Audi Extended", Audi Extended, Arial, sans-serif, "Audi Type", AudiTypeExtended, Arial, sans-serif;
  background: transparent; }

.btn, .btn-primary, input[type="submit"] {
  display: inline-block;
  width: 295px;
  padding: 22px 32px;
  transition: background-color 0.3s;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  vertical-align: middle;
  overflow: hidden;
  border: none;
  outline: none;
  cursor: pointer;
  font-family: "Audi", Arial, sans-serif;
  font-size: 16px;
  line-height: 18px;
  font-weight: normal;
  text-align: center; }
  .btn .response, .btn-primary .response, input[type="submit"] .response {
    border-radius: 100%;
    border-color: #fff;
    border-style: solid;
    transform: translate(-50%, -50%);
    display: block;
    position: absolute;
    border-width: 15px;
    width: 30px;
    height: 30px;
    opacity: 0.2;
    animation: btnResponse 0.3s ease-out forwards; }
  .btn.disabled, .disabled.btn-primary, input[type="submit"].disabled {
    display: none; }
  .btn.bordered, .bordered.btn-primary, input[type="submit"].bordered {
    border: 1px solid #040505;
    background-color: transparent;
    color: #040505; }
    .btn.bordered:after, .bordered.btn-primary:after, input[type="submit"].bordered:after {
      display: none; }
  .btn.variation-1, .variation-1.btn-primary, input[type="submit"].variation-1 {
    background-color: #040505;
    color: #ffffff; }
  .btn.variation-2, .variation-2.btn-primary, input[type="submit"].variation-2 {
    background-color: transparent;
    font-size: 20px;
    text-align: center;
    color: #010101; }
  .btn.variation-3, .variation-3.btn-primary, input[type="submit"].variation-3 {
    background-color: transparent;
    border-color: #ffffff;
    color: #ffffff; }
  .btn.variation-4, .variation-4.btn-primary, input[type="submit"].variation-4 {
    background-color: #ffffff;
    color: #010101; }
  .btn.variation-5, .variation-5.btn-primary, .btn.secondary, .secondary.btn-primary, input[type="submit"].variation-5, input[type="submit"].secondary {
    background-color: transparent;
    border-color: #010101;
    color: #010101; }
  .btn.share, .share.btn-primary, input[type="submit"].share {
    width: 60px;
    height: 60px;
    padding: 0; }
  .btn.secondary, .secondary.btn-primary, input[type="submit"].secondary {
    background-color: #ACACAC;
    color: #040505; }
  .btn + .btn, .btn-primary + .btn, .btn + .btn-primary, .btn-primary + .btn-primary, input[type="submit"] + .btn, input[type="submit"] + .btn-primary {
    margin-left: 23px; }
  @media screen and (max-width: 1300px) {
    .btn, .btn-primary, input[type="submit"] {
      font-size: 14px;
      line-height: 18px; } }
  @media screen and (max-width: 500px) {
    .btn, .btn-primary, input[type="submit"] {
      width: 100%; } }

.btn-primary {
  background-color: #000;
  color: #fff; }
  .btn-primary:hover {
    background-color: #333; }

.btn-submit {
  width: calc(100% - 60px);
  max-width: 550px; }

.btn-primary .response,
.btn-bubble:before {
  border-radius: 100%;
  border-color: #fff;
  border-style: solid;
  transform: translate(-50%, -50%); }

.share-widget {
  display: inline-block;
  position: absolute;
  top: 34px;
  right: 0; }
  .share-widget span {
    line-height: 40px;
    vertical-align: top; }
  .share-widget .share-widget__expand-btn {
    height: 40px;
    line-height: 40px;
    border: none;
    border-radius: 20px;
    background: #ffffff;
    vertical-align: middle;
    box-shadow: none;
    padding: 0 10px;
    position: relative;
    z-index: 2;
    font-size: 12px;
    outline: 0;
    cursor: pointer; }
  .share-widget .share-widget__buttons {
    white-space: nowrap;
    height: 40px;
    line-height: 40px;
    background: #e5e5e5;
    padding: 0 20px 0 7px;
    border-radius: 20px 0 0 20px; }
  .share-widget .share-widget__panel {
    position: absolute;
    top: 0;
    right: calc(100% - 20px);
    height: 45px;
    overflow: hidden;
    max-width: 0;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
    z-index: 1; }
  .share-widget .SocialMediaShareButton {
    display: inline-block;
    height: 40px;
    margin-right: 10px;
    outline: 0;
    cursor: pointer; }
  .share-widget.expanded .share-widget__panel {
    max-width: 250px;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear; }
    @media (max-width: 768px) {
      .share-widget.expanded .share-widget__panel {
        height: 260px; } }
  .share-widget .aui-switch__track, .share-widget .share-widget .audiicon, .share-widget .social-link .audiicon {
    vertical-align: middle; }
  .share-widget .audiicon-small {
    width: 24px;
    height: 40px; }
  .share-widget .audiicon {
    display: inline-block;
    color: inherit;
    stroke-width: 1.1px; }
  @media (max-width: 768px) {
    .share-widget .share-widget__panel {
      right: 0;
      top: 2px;
      max-width: 40px;
      height: 0; }
    .share-widget .share-widget__buttons {
      height: auto;
      border-radius: 20px;
      padding: 40px 0 5px; }
    .share-widget .SocialMediaShareButton {
      width: 24px;
      height: 24px;
      margin: 5px 5px 10px; }
      .share-widget .SocialMediaShareButton:last-of-type {
        margin-bottom: 0; }
      .share-widget .SocialMediaShareButton svg {
        height: 24px; }
    .share-widget .SocialMediaShareButton {
      display: block; } }

/*****CONTAINERS FOR BUTTONS*****/
.bread-crumb-container {
  padding: 44px 100px 52px 0;
  vertical-align: middle;
  position: relative; }
  .bread-crumb-container a {
    padding-right: 5px; }
    .bread-crumb-container a:after {
      content: " >"; }
  .bread-crumb-container .btn, .bread-crumb-container .btn-primary {
    min-width: 128px;
    width: auto;
    padding: 10px 0;
    vertical-align: middle; }
  @media screen and (max-width: 900px) {
    .bread-crumb-container {
      padding: 30px 100px 0 0; }
      .bread-crumb-container .share-widget {
        top: 19px; } }
  @media screen and (max-width: 500px) {
    .bread-crumb-container {
      padding: 24px 100px 0 0; }
      .bread-crumb-container .bordered {
        display: block;
        margin: 0 auto 20px; }
      .bread-crumb-container .share-widget {
        top: 13px; } }

.btn-container {
  padding: 0 20px;
  cursor: pointer; }

/* ----- Cancel Form ----- */
.btn-bubble[data-state="active"]:before,
.btn-bubble.active:before {
  display: block; }

.btn-wishlist,
.btn-share,
.prompt-control.btn-bubble {
  width: 34px;
  height: 34px; }

.btn-wishlist:not(.ico-wishlist)[data-state="active"]:after {
  animation: pulse 0.4s; }
.btn-wishlist.ico-wishlist:before {
  font-size: 34px; }

.btn-share.ico-share:before {
  font-size: 28px; }

.btn-secondary {
  border: 1px solid #000;
  padding: 18px;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
  .btn-secondary.btn-white {
    border-color: #fff;
    color: #fff; }
  @media screen and (max-width: 500px) {
    .btn-secondary {
      width: 100%;
      text-align: center; } }

 /*
.btn-text {
  text-decoration: underline;
}*/
/*.btn-bubble {
  border: 1px solid $white;
  border-radius: 100%;
  position: relative;

  &:before,
  &:after {
    content: "";
  }
  &:before {
    position: absolute;
    left: 50%;
    right: 50%;
    pointer-events: none;
    animation: controlResponse $timeFst ease-out forwards;
    display: none;
  }
  &:after {
    @include sameposition;
    @include bgbase(contain);
  }
}*/
/* -----------------------------------------------------
Components
----------------------------------------------------- */
.expand-arrow {
  width: 20px;
  height: 50px;
  position: absolute;
  top: calc(50% - 25px);
  right: 0;
  position: absolute;
  z-index: 1; }
  .expand-arrow:before, .expand-arrow:after {
    transform-origin: unset; }
  .expand-arrow:before {
    transform: rotate(-45deg); }
  .expand-arrow:after {
    transform: rotate(45deg); }
  .expand-arrow:before, .expand-arrow:after {
    background-color: #404040;
    width: 14px;
    height: 1px;
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 0; }
  .expand-arrow:before {
    margin-top: 4.76px; }
  .expand-arrow:after {
    margin-top: -4.76px; }
  .expand-arrow:before, .expand-arrow:after {
    transition: transform 0.4s, background-color 0.4s; }

.active .expand-arrow:before,
.open .expand-arrow:before {
  transform: rotate(45deg); }
.active .expand-arrow:after,
.open .expand-arrow:after {
  transform: rotate(-45deg); }

.edit-reg-container {
  padding: 20px 0; }
  .edit-reg-container input[type="text"] {
    width: 100%;
    margin-bottom: 20px;
    padding: 5px 10px;
    border: 1px solid #040505; }
  .edit-reg-container input[type="submit"] {
    width: auto;
    padding: 13px 25px; }

.close-x {
  width: 50px;
  height: 50px;
  top: 20px;
  right: 20px;
  position: absolute;
  z-index: 1; }
  .close-x:before, .close-x:after {
    transform-origin: center; }
  .close-x:before {
    transform: rotate(-45deg); }
  .close-x:after {
    transform: rotate(-135deg); }
  .close-x:before, .close-x:after {
    background-color: #fff;
    width: 38px;
    height: 2px;
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - (2px / 2));
    right: calc(50% - (38px / 2)); }

.sml-x {
  top: 4px;
  right: 4px; }
  .sml-x:before, .sml-x:after {
    width: 16px;
    left: calc(50% - 8px); }

/* Images */
.img-src {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.4s; }

.img-holder:before,
.model-img:before {
  content: "";
  background-color: #CFD3D2;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 78px 27px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  display: block;
  z-index: -1; }

/******COLOURS******/
.background-grey {
  background-color: #D7D7D7; }

.variation-1, .variation-2, .variation-3 {
  max-width: unset; }
  .variation-1 > *, .variation-1 [class^="aui-headline"], .variation-1 h2, .variation-1 h6, .variation-1 ul, .variation-1 ul li, .variation-1 p, .variation-2 > *, .variation-2 [class^="aui-headline"], .variation-2 h2, .variation-2 h6, .variation-2 ul, .variation-2 ul li, .variation-2 p, .variation-3 > *, .variation-3 [class^="aui-headline"], .variation-3 h2, .variation-3 h6, .variation-3 ul, .variation-3 ul li, .variation-3 p {
    color: #ffffff; }

.variation-1 {
  background-color: #CF2033; }

.variation-2 {
  background-color: #B4B4B4; }

.variation-3 {
  background-color: #010101; }

.variation-4 {
  background-color: #D7D7D7;
  max-width: unset; }

/*****CONTAINERS*****/
.padded-container {
  position: relative;
  max-width: 1424px;
  padding: 0 72px;
  margin: 0 auto; }
  .padded-container .banner-container:hover .background-image img {
    -webkit-transform: scale(1.1, 1.1);
    -moz-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1); }
  .padded-container .banner-container h6 {
    font-weight: 400; }
  @media screen and (max-width: 1300px) {
    .padded-container {
      max-width: unset;
      padding: 0 90px; } }
  @media screen and (max-width: 1080px) {
    .padded-container {
      padding: 0 35px; } }
  @media (max-width: 768px) {
    .padded-container {
      margin-bottom: 20px;
      /*img{
      	display: none;
      }*/ }
      .padded-container img + .background-image {
        height: 50vh; }
      .padded-container .banner-container .copy.static {
        padding: 20px 0; }
      .padded-container .banner-container .copy.static .btn, .padded-container .banner-container .copy.static .btn-primary {
        position: static;
        top: auto;
        width: 100%;
        -webkit-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        margin-top: 20px; } }

.img-holder {
  position: relative;
  overflow: hidden; }
  .img-holder .img-src {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute; }

/*****AUDI ASSIST*****/
.roadside-assist-number-list {
  /*	padding-top: 60px;
  	padding-bottom: 60px;
  	margin-top: 50px;
  	margin-bottom: 30px;*/
  padding-top: 100px;
  padding-bottom: 100px;
  margin-top: 100px;
  margin-bottom: 100px; }
  .roadside-assist-number-list ul li {
    list-style: none;
    position: relative;
    padding-left: 100px;
    margin-bottom: 30px; }
    .roadside-assist-number-list ul li:last-of-type {
      margin-bottom: 0; }
    .roadside-assist-number-list ul li svg {
      position: absolute;
      top: 50%;
      left: 0;
      width: 50px;
      height: 50px;
      -webkit-transform: translate(0, -50%);
      -moz-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
      -o-transform: translate(0, -50%);
      transform: translate(0, -50%);
      fill: #ffffff; }
    .roadside-assist-number-list ul li p {
      margin-bottom: 0; }
      .roadside-assist-number-list ul li p a {
        color: #ffffff;
        font-weight: 600; }
  .roadside-assist-number-list + .padded-container p:last-of-type {
    margin-bottom: 30px; }
  @media (max-width: 768px) {
    .roadside-assist-number-list ul li {
      padding-left: 80px; }
      .roadside-assist-number-list ul li svg {
        width: 35px;
        height: 35px; } }
  @media screen and (max-width: 500px) {
    .roadside-assist-number-list {
      padding-top: 60px;
      padding-bottom: 60px;
      margin-top: 50px;
      margin-bottom: 30px; }
      .roadside-assist-number-list ul li {
        padding-left: 50px; }
        .roadside-assist-number-list ul li svg {
          width: 30px;
          height: 30px; } }

.copy {
  padding-bottom: 70px; }
  @media screen and (max-width: 500px) {
    .copy {
      padding-bottom: 30px; } }

/*****AUDI FREEWAY PLAN*****/
.audi-freeway-benefits {
  padding-top: 67px;
  padding-bottom: 67px;
  margin-bottom: 45px; }
  .audi-freeway-benefits + .padded-container p:last-of-type {
    margin-bottom: 58px; }
  .audi-freeway-benefits .aui-headline-3 {
    margin-bottom: 54px; }
  .audi-freeway-benefits .list-dash:last-of-type li {
    margin-left: 20px; }
  .audi-freeway-benefits .list-dash li {
    margin-bottom: 10px; }
  @media (max-width: 768px) {
    .audi-freeway-benefits {
      padding-top: 40px;
      padding-bottom: 30px;
      margin-bottom: 28px; }
      .audi-freeway-benefits .aui-headline-3 {
        margin-bottom: 34px; }
      .audi-freeway-benefits + .padded-container p:last-of-type {
        margin-bottom: 28px; }
      .audi-freeway-benefits .display-table {
        display: block; }
        .audi-freeway-benefits .display-table .table-cell {
          display: block; }
      .audi-freeway-benefits .list-dash:last-of-type li {
        margin-left: 0; } }
  @media screen and (max-width: 500px) {
    .audi-freeway-benefits {
      padding-top: 30px;
      margin-bottom: 18px; }
      .audi-freeway-benefits + .padded-container p:last-of-type {
        margin-bottom: 18px; } }

/*****BOOK A SERVICE*****/
.contact-details {
  padding-top: 64px;
  padding-bottom: 51px;
  margin-bottom: 80px; }
  .contact-details h5 {
    margin-bottom: 58px; }
  @media (max-width: 640px) {
    .contact-details {
      padding-top: 30px;
      padding-bottom: 0px;
      margin-bottom: 30px; }
      .contact-details h5 {
        margin-bottom: 30px; } }

.vehicle-details {
  padding-bottom: 100px; }
  .vehicle-details h5 {
    margin-bottom: 70px; }
  .vehicle-details .floated-two-col {
    max-width: 685px;
    margin: 0; }
    .vehicle-details .floated-two-col .col {
      width: 47%;
      margin-right: 3%; }
      .vehicle-details .floated-two-col .col:last-of-type {
        margin-right: 0;
        margin-left: 3%; }
  @media (max-width: 640px) {
    .vehicle-details {
      padding: 0;
      margin-bottom: 30px; }
      .vehicle-details h5 {
        margin-bottom: 30px; } }

.calendar {
  position: relative;
  padding-top: 70px;
  padding-bottom: 70px; }
  .calendar .flex > div {
    margin-right: 20px; }
    .calendar .flex > div:last-of-type {
      margin-right: 0;
      margin-left: 20px; }
  .calendar .field-group {
    max-width: 680px; }
  .calendar .form-input {
    float: none;
    width: auto; }
  .calendar .form {
    overflow: hidden; }
  .calendar .flex-split > div {
    width: calc(50% - 20px);
    flex-basis: calc(50% - 20px); }
  @media (max-width: 640px) {
    .calendar {
      padding: 30px 0; } }

.preferred-dealer {
  padding-top: 94px;
  padding-bottom: 96px; }
  .preferred-dealer h5 {
    margin-bottom: 60px; }
  .preferred-dealer .floated-two-col {
    max-width: 685px;
    margin: 0; }
    .preferred-dealer .floated-two-col .col {
      width: 47%;
      margin-right: 3%; }
      .preferred-dealer .floated-two-col .col:last-of-type {
        margin-right: 0;
        margin-left: 3%; }
  @media (max-width: 640px) {
    .preferred-dealer {
      padding: 30px 0; }
      .preferred-dealer h5 {
        margin-bottom: 30px; } }

/*****MORE ARTICLE*****/
.more-articles {
  display: block;
  margin-bottom: 80px; }
  .more-articles h4 {
    margin-bottom: 34px; }
  .more-articles a {
    width: 25%;
    padding-right: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
    .more-articles a h6 {
      margin: 14px 14px 0 0;
      word-break: break-all; }
    .more-articles a .background-image {
      width: 100%;
      height: 357px; }
      .more-articles a .background-image img {
        width: 100%; }
    .more-articles a:hover .background-image img {
      -webkit-transform: scale(1.1, 1.1);
      -moz-transform: scale(1.1, 1.1);
      -ms-transform: scale(1.1, 1.1);
      -o-transform: scale(1.1, 1.1);
      transform: scale(1.1, 1.1); }
  .more-articles .flex-row, .more-articles .categories {
    margin-bottom: 80px;
    align-items: flex-start; }
  @media screen and (max-width: 1300px) {
    .more-articles .more-article-slider {
      padding-right: 5px; }
      .more-articles .more-article-slider a {
        display: block;
        width: auto;
        padding-right: 0; }
        .more-articles .more-article-slider a .background-image {
          height: 320px; }
          .more-articles .more-article-slider a .background-image img {
            display: none; } }
  @media screen and (max-width: 1140px) {
    .more-articles {
      margin-bottom: 50px;
      		/*a {
      			width: 50%;
      
      			&:last-of-type, &:nth-last-of-type(2){
      				display: none;
      			}
      		}*/ }
      .more-articles h4 {
        text-align: left;
        padding-left: 90px; }
      .more-articles .btn, .more-articles .btn-primary {
        margin-left: 90px;
        margin-right: 90px; }
      .more-articles .padded-container {
        padding: 0;
        text-align: center; }
      .more-articles .flex-row, .more-articles .categories {
        margin-bottom: 30px;
        padding-left: 5px; } }
  @media screen and (max-width: 900px) {
    .more-articles h4 {
      padding-left: 35px; }
    .more-articles .btn, .more-articles .btn-primary {
      margin-left: 35px;
      margin-right: 35px; } }
  @media (max-width: 768px) {
    .more-articles .more-article-slider a .background-image {
      height: 210px; }
    .more-articles .flex-row, .more-articles .categories {
      padding: 0 35px; }
    .more-articles .owl-nav .owl-prev, .more-articles .owl-nav .owl-next {
      margin: 0 35px; } }
  @media screen and (max-width: 500px) {
    .more-articles {
      margin-bottom: 35px;
      /*a .background-image{
      	height: 227px;
      }*/ }
      .more-articles .btn, .more-articles .btn-primary {
        width: 86%;
        margin: 0 7%; } }

/*****ARTICLE COMPONENTS*****/
.article-details {
  position: relative;
  max-width: unset;
  padding: 90px 0 65px;
  margin: 0 auto 60px;
  color: #ffffff;
  background-color: #263D4E; }
  .article-details .padded-container:before {
    content: "";
    position: absolute;
    top: -36px;
    left: 90px;
    width: 86px;
    height: 3px;
    background-color: #ffffff; }
  .article-details blockquote, .article-details p {
    color: #ffffff; }
    .article-details blockquote strong, .article-details p strong {
      display: inline-block;
      min-width: 124px; }
  .article-details.date {
    background-color: #B09889; }
  @media screen and (max-width: 900px) {
    .article-details .padded-container:before {
      left: 35px; } }
  @media (max-width: 768px) {
    .article-details {
      padding: 60px 0 35px;
      margin-bottom: 30px; } }

.article-content {
  margin-bottom: 70px; }
  .article-content h1, .article-content h2, .article-content h3, .article-content h4, .article-content h5, .article-content h6 {
    margin-bottom: 20px; }
  .article-content img {
    display: inline;
    width: 628px;
    height: auto;
    float: right;
    padding: 20px 0 20px 75px; }
  @media screen and (max-width: 1300px) {
    .article-content {
      margin-bottom: 30px; }
      .article-content img {
        display: block;
        width: auto;
        float: none;
        padding: 0;
        margin: 40px auto; } }
  @media (max-width: 768px) {
    .article-content {
      margin-bottom: 0; }
      .article-content img {
        width: 100%;
        margin: 30px auto; } }

/*****MY CAR LIST*****/
.vehicle:nth-of-type(2n+1) {
  background-color: #D7D7D7;
  border-top: 1px solid #ffffff; }

.my-car-list .add-vin {
  margin-bottom: 0;
  border-top: 1px solid #ffffff; }
.my-car-list .padded-container {
  padding-top: 55px;
  padding-bottom: 55px;
  margin-bottom: 0; }
  .my-car-list .padded-container h3 {
    margin-bottom: 55px; }
  .my-car-list .padded-container h4 {
    margin-bottom: 34px; }
  .my-car-list .padded-container h5 {
    display: inline-block;
    font-weight: 400; }
  .my-car-list .padded-container h6 {
    margin-bottom: 10px;
    font-weight: 400;
    color: #A4A4A5; }
  .my-car-list .padded-container .btn-container h6 {
    color: #040505; }
  .my-car-list .padded-container > div div {
    float: left;
    width: 33%;
    padding-bottom: 50px; }
  .my-car-list .padded-container .edit-reg {
    color: #A4A4A5;
    display: inline-block;
    margin-left: 20px;
    text-decoration: underline;
    text-transform: capitalize; }
  .my-car-list .padded-container.text-center h6 {
    color: #333333; }
  .my-car-list .padded-container .btn, .my-car-list .padded-container .btn-primary {
    display: block; }
  .my-car-list .padded-container .icon-plus {
    display: block;
    position: relative;
    width: 40px;
    height: 40px;
    padding: 20px;
    margin: 0 auto 23px;
    background-color: #040505;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    color: #ffffff;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    transition: all 300ms linear; }
    .my-car-list .padded-container .icon-plus:before, .my-car-list .padded-container .icon-plus:after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      background-color: #ffffff; }
    .my-car-list .padded-container .icon-plus:before {
      width: 15px;
      height: 1px; }
    .my-car-list .padded-container .icon-plus:after {
      width: 1px;
      height: 15px; }
    .my-car-list .padded-container .icon-plus:hover {
      -webkit-transform: scale(1.2, 1.2);
      -moz-transform: scale(1.2, 1.2);
      -ms-transform: scale(1.2, 1.2);
      -o-transform: scale(1.2, 1.2);
      transform: scale(1.2, 1.2); }
@media screen and (max-width: 1300px) {
  .my-car-list .padded-container {
    padding-top: 35px;
    padding-bottom: 35px; }
    .my-car-list .padded-container h3 {
      margin-bottom: 35px; } }
@media (max-width: 768px) {
  .my-car-list .padded-container > div div {
    width: 50%;
    padding-right: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
  .my-car-list .vehicle:nth-of-type(2n+ 1) {
    background-color: #D7D7D7; } }
@media screen and (max-width: 500px) {
  .my-car-list .padded-container > div div {
    width: 100%; } }

/*****AUDI-SMART-SERVICE*****/
.smart-service {
  margin-bottom: 80px; }
  .smart-service h1 {
    margin: 0 0 20px; }
    .smart-service h1 span {
      font-size: inherit;
      font-weight: inherit;
      color: #C00425; }
  @media (max-width: 768px) {
    .smart-service {
      margin-bottom: 40px; } }

.service-cost {
  padding: 78px 0 120px; }
  .service-cost ul li {
    position: relative;
    list-style: none;
    margin-bottom: 13px;
    padding-left: 12px;
    font-weight: 400; }
    .service-cost ul li:before {
      position: absolute;
      top: 0;
      left: 0;
      content: '+ '; }
  .service-cost p {
    margin-bottom: 10px; }
  .service-cost .aui-headline-1 {
    margin-bottom: 50px; }
  .service-cost .aui-headline-4 {
    margin-bottom: 35px; }
  .service-cost .display-table .table-cell {
    width: 50%; }
  @media screen and (max-width: 1140px) {
    .service-cost {
      padding: 58px 0 80px; }
      .service-cost .aui-headline-1 {
        margin-bottom: 30px; }
      .service-cost .aui-headline-4 {
        margin-bottom: 20px; } }
  @media (max-width: 768px) {
    .service-cost {
      padding: 38px 0 20px; }
      .service-cost .display-table {
        display: block; }
        .service-cost .display-table .table-cell {
          display: block;
          width: 100%;
          margin-bottom: 30px; } }

.car-to-service {
  padding-top: 78px;
  padding-bottom: 78px; }
  .car-to-service > h5 {
    margin-bottom: 85px; }
  .car-to-service .flex-2 > div {
    width: 100%;
    flex-basis: 100%; }
  .car-to-service .select-a-car-container {
    display: flex;
    flex-direction: column; }
    .car-to-service .select-a-car-container .form-input {
      margin-bottom: 45px; }
  .car-to-service .flex-col {
    position: relative;
    clear: both;
    float: none !important; }
    .car-to-service .flex-col::after {
      position: relative;
      content: '';
      display: table;
      clear: both; }
  .car-to-service .form-field {
    float: left;
    width: 50%; }
    .car-to-service .form-field h6 {
      margin-bottom: 17px;
      color: #B3B4B4;
      font-weight: 400; }
  @media (max-width: 768px) {
    .car-to-service {
      padding-top: 38px;
      padding-bottom: 28px; }
      .car-to-service > h5, .car-to-service .select-a-car-container .form-input {
        margin-bottom: 25px; }
      .car-to-service .form-field {
        float: none;
        width: 100%; } }
  @media screen and (max-width: 500px) {
    .car-to-service .select-a-car-container .form-input {
      width: 100%; } }

/*****FIND A DEALER*****/
.dealer-container {
  width: calc(100% - 50px);
  flex-basis: calc(100% - 50px);
  max-width: 640px;
  width: 100%;
  margin: 0 auto; }

.dealer-tabs {
  border-bottom: 1px solid #28272E;
  width: 100%; }
  .dealer-tabs .tab-item {
    width: 100%; }
    .dealer-tabs .tab-item.active {
      display: flex;
      justify-content: flex-start;
      align-items: center; }

.filter-container {
  width: 100% !important;
  flex-basis: 100% !important;
  overflow-y: auto; }
  .filter-container .simplebar-track.simplebar-vertical {
    opacity: 0 !important;
    width: 10px; }
  .filter-container .simplebar-track.simplebar-horizontal {
    height: 1px; }
    .filter-container .simplebar-track.simplebar-horizontal .simplebar-scrollbar {
      top: auto;
      bottom: 0;
      height: 100%; }
      .filter-container .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {
        background-color: #28272E;
        height: 100%;
        right: 25px;
        left: 25px;
        bottom: 0;
        border-radius: 0;
        opacity: 1;
        transition: height 0.4s; }

.dealer-filter {
  width: 1280px;
  padding: 0 25px;
  padding-top: 2px !important;
  height: calc(100% - 2px);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer; }
  .dealer-filter .filter-options {
    width: 100%;
    flex-basis: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between; }
  .dealer-filter .filter-btn {
    padding: 10px 0;
    transition: color 0.4s; }
    .dealer-filter .filter-btn.active {
      font-weight: bold; }
  .dealer-filter .active-underline {
    bottom: calc(50% - 14px); }
  .dealer-filter ::-moz-selection {
    background: transparent;
    color: inherit; }
  .dealer-filter ::selection {
    background: transparent;
    color: inherit; }

.dealer-search .input::-ms-clear, .dealer-search .input::-ms-reveal, .dealer-search .input::-webkit-search-decoration, .dealer-search .input::-webkit-search-cancel-button, .dealer-search .input::-webkit-search-results-button, .dealer-search .input::-webkit-search-results-decoration {
  display: none;
  width: 0;
  height: 0; }
.dealer-search .input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 50px #000000 inset; }
.dealer-search .input {
  height: 56px;
  padding: 0 60px 2px 50px;
  color: #ffffff;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  -o-appearance: textfield;
  outline: none;
  outline-offset: -2px; }
.dealer-search .ico-search:before {
  width: 50px;
  font-weight: bold;
  font-size: 16px; }

.dealer-results .search-empty {
  padding: 40px 100px; }
  .dealer-results .search-empty p {
    margin-top: 14px; }

.dealer-results {
  height: 55vh;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative; }
  .dealer-results .simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
    top: 6px;
    bottom: 0;
    left: auto;
    right: 0;
    opacity: 0.2; }
  @media screen and (max-width: 1300px) {
    .dealer-results {
      height: auto; } }

.dealer-name,
.dealer-address {
  font-size: 12px; }

.dealer-name {
  animation: revealHidden 0.8s forwards; }

.dealer-address,
.dealer-tel {
  animation: revealInfo 0.6s forwards; }

.dealer-address {
  margin-top: 8px; }

.dealer-tel {
  margin-top: 24px;
  display: inline-block; }

.dealer-hours {
  font-size: 12px; }

.hours-label {
  color: #464646;
  font-family: "Audi", Arial, sans-serif;
  font-weight: normal; }

.web-site, .email-address {
  display: block;
  color: #ffffff;
  margin-bottom: 5px; }

.hours-column {
  opacity: 0; }

.dealer-item {
  padding: 30px 0 10px;
  position: relative;
  cursor: pointer;
  transition: color 0.3s; }
  .dealer-item:before {
    content: "";
    display: block;
    position: absolute; }
  .dealer-item:before {
    background-color: #28272E;
    top: 0;
    left: 0;
    bottom: 0;
    width: 0;
    transition: width 0.3s;
    z-index: 1; }
  .dealer-item .dealer-info {
    right: 0;
    position: relative;
    z-index: 2; }
    .dealer-item .dealer-info .web-site, .dealer-item .dealer-info .email-address {
      font-size: 16px;
      font-weight: normal; }
    .dealer-item .dealer-info .btn-secondary {
      display: inline-block; }
  .dealer-item .dealer-name,
  .dealer-item .dealer-address {
    padding-right: 80px;
    padding-left: 30px; }
  .dealer-item:not(.hidden) ~ .dealer-item:not(.hidden) .dealer-info:after {
    content: "";
    border-top: 1px solid #CFD3D2;
    top: -30px;
    left: 0;
    width: 100%;
    display: block;
    position: absolute;
    z-index: 0; }
  .dealer-item.hidden,
  .dealer-item .dealer-popup-info {
    display: none;
    padding-left: 30px;
    padding-right: 30px; }
  .dealer-item.active {
    color: #fff; }
    .dealer-item.active:before {
      width: 100%; }
    .dealer-item.active .dealer-info:after {
      opacity: 0 !important; }
    .dealer-item.active .dealer-name, .dealer-item.active .dealer-address, .dealer-item.active .dealer-tel {
      color: #ffffff; }
    .dealer-item.active .expand-arrow:before, .dealer-item.active .expand-arrow:after {
      background-color: #fff; }
    .dealer-item.active .hours-column {
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      filter: alpha(opacity=100);
      -moz-opacity: 1;
      opacity: 1; }
  @media screen and (max-width: 1300px) {
    .dealer-item.active .dealer-popup-info {
      display: block; }
    .dealer-item.active .dealer-info .web-site, .dealer-item.active .dealer-info .email-address {
      display: block; } }

.dealer-right .img-src {
  transform: scale(1);
  transform-origin: left center;
  transition: transform 0.6s ease-out; }
  .dealer-right .img-src[data-state="active"] {
    transform: scale(1.1); }
.dealer-right .dealer-name {
  font-size: 16px;
  font-weight: normal; }
.dealer-right .dealer-hours {
  margin: 40px 0; }
.dealer-right .popup-box {
  background-color: rgba(0, 0, 0, 0.86);
  padding: 40px; }
.dealer-right .popup-close {
  top: 16px;
  right: 16px; }
  .dealer-right .popup-close:before, .dealer-right .popup-close:after {
    width: 30px;
    left: calc(50% - 15px); }
.dealer-right .popup.open .dealer-name,
.dealer-right .popup.open .dealer-directions {
  animation: revealHidden 0.6s forwards; }
.dealer-right .popup.open .hours-column {
  animation: revealInfo 0.4s forwards ease-out; }
  .dealer-right .popup.open .hours-column:nth-child(2) {
    animation-delay: 0.1s; }

.dealer-container {
  margin: 0 auto; }
  .dealer-container .expand-arrow {
    right: 42px; }

.filter-container {
  width: 100% !important;
  flex-basis: 100% !important;
  overflow-y: auto;
                 /*
&:before,
&:after {
	content: "";
	position: absolute;
	top: 10px;
	bottom: 10px;
	width: 25px;
	pointer-events: none;
	z-index: 1;
}
&:before {
	left: 0;
	background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
&:after {
	right: 0;
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
}*/ }
  .filter-container .simplebar-track.simplebar-vertical {
    opacity: 0 !important;
    width: 10px; }
  .filter-container .simplebar-track.simplebar-horizontal {
    height: 1px; }
    .filter-container .simplebar-track.simplebar-horizontal .simplebar-scrollbar {
      top: auto;
      bottom: 0;
      height: 100%; }
      .filter-container .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {
        background-color: #28272E;
        height: 100%;
        right: 25px;
        left: 25px;
        bottom: 0;
        border-radius: 0;
        opacity: 1;
        transition: height 0.4s; }

.tab-module .tab-nav {
  background-color: #28272E;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; }

.tab-module .tab-item:not(.active) {
  display: none; }

.dealer-filter .filter-options {
  width: 100%;
  flex-basis: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between; }
.dealer-filter .filter-btn {
  padding: 30px 0;
  transition: color 0.4s; }
  .dealer-filter .filter-btn.active {
    font-weight: bold; }
.dealer-filter .active-underline {
  bottom: calc(50% - 14px); }
.dealer-filter ::-moz-selection {
  background: transparent;
  color: inherit; }
.dealer-filter ::selection {
  background: transparent;
  color: inherit; }

.dealer-search {
  position: relative;
  clear: both;
  float: none !important; }
  .dealer-search::after {
    position: relative;
    content: '';
    display: table;
    clear: both; }
  .dealer-search .ico-search:before {
    width: 50px;
    font-weight: bold;
    font-size: 16px; }

.dealer-search .input {
  border: 1px solid #CFD3D2;
  height: 56px;
  padding: 0 60px 2px 50px; }

.dealer-tabs .tab-item {
  height: 120px;
  width: 100%; }

.dealer-results .search-empty {
  padding: 40px 100px; }
  .dealer-results .search-empty p {
    margin-top: 14px; }

.dealer-name,
.dealer-address {
  font-size: 12px; }

.dealer-name {
  animation: revealHidden 0.8s forwards; }

.dealer-address,
.dealer-tel {
  animation: revealInfo 0.6s forwards; }

.dealer-address {
  margin-top: 8px; }

.dealer-tel {
  margin-top: 24px;
  margin-left: 30px;
  margin-bottom: 5px;
  display: inline-block; }

.dealer-hours,
.dealer-directions {
  letter-spacing: 0.4px; }
  .dealer-hours .btn-secondary,
  .dealer-directions .btn-secondary {
    display: inline-block; }

.dealer-hours {
  margin: 20px 0; }

.hours-label {
  color: #464646;
  font-family: "Audi", Arial, sans-serif;
  font-weight: normal; }

.hours-day, .hours-value {
  font-size: 12px; }

.hours-day {
  width: 40px;
  display: inline-block; }

.hours-list li {
  margin-top: 6px;
  display: block; }

  /*
	padding: 30px 0;
	position: relative;
	cursor: pointer;
	transition: color $timeFst;
*/
  /*
	.dealer-name,
	.dealer-address {
		padding-right: 40px;
		padding-left: 40px;
	}*/
	/*&:before {
		content: "";
		display: block;
		position: absolute;
	}
	&:before {
		background-color: $panelgrey;
		top: 0;
		left: 0;
		bottom: 0;
		width: 0;
		transition: width $timeFst;
		z-index: 1;
	}
	.dealer-info {
		right: 0;
		position: relative;
		z-index: 2;
	}

	&:not(.hidden) ~ .dealer-item:not(.hidden) .dealer-info:after {
		content: "";
		border-top: 1px solid $lightgrey;
		top: -30px;
		left: 0;
		width: 100%;
		display: block;
		position: absolute;
		z-index: 0;
	}
	&.hidden,
	.dealer-popup-info {
		display: none;
	}
	&.active {
		color: $white;
		&:before {
			width: 100%;
		}
		.dealer-info:after {
			opacity: 0 !important;
		}
		.expand-arrow {
			&:before,
			&:after {
				background-color: $white;
			}
		}
	}*/
.my-audi-world-container {
  display: block;
  height: auto; }

.display-table {
  display: table;
  width: 100%; }
  .display-table > a, .display-table div, .display-table .table-cell {
    display: table-cell; }

.two-col .flex, .contact-container .my-details .flex {
  flex-direction: row; }
.two-col .flex-2 > div, .contact-container .my-details .flex-2 > div {
  max-width: unset;
  width: calc(50% - 22px);
  flex-basis: calc(50% - 22px); }
.two-col .form-input, .contact-container .my-details .form-input {
  width: 100%; }

.three-col .flex-2 > div {
  display: flex;
  width: calc(100% - 22px);
  flex-basis: calc(100% - 22px);
  max-width: 680px; }
.three-col .form-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 33.3%;
  justify-content: space-between; }
  .three-col .form-field .form-input {
    flex-direction: column;
    float: none; }
    .three-col .form-field .form-input label {
      margin-bottom: 26px; }
  .three-col .form-field .checkbox-list .check-field {
    margin-bottom: 40px; }

.floated-two-col {
  position: relative;
  clear: both;
  float: none !important; }
  .floated-two-col::after {
    position: relative;
    content: '';
    display: table;
    clear: both; }
  .floated-two-col .col {
    display: block;
    float: left;
    width: 50%; }

.flex-row, .categories {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end; }

.full-image-container, .banner-container {
  background-image: url(../images/img.png);
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img.png', sizingMethod=scale);
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img.png', sizingMethod=scale)";
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: relative; }
  .full-image-container img, .banner-container img {
    width: 100%; }
  .full-image-container .copy.static, .banner-container .copy.static {
    position: relative;
    min-height: 94px;
    padding: 20px 300px 40px 0; }
    .full-image-container .copy.static img, .banner-container .copy.static img {
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      -moz-opacity: 0;
      opacity: 0; }
    .full-image-container .copy.static .aui-headline-3, .banner-container .copy.static .aui-headline-3 {
      margin-bottom: 12px; }
    .full-image-container .copy.static .btn, .banner-container .copy.static .btn, .full-image-container .copy.static .btn-primary, .banner-container .copy.static .btn-primary {
      position: absolute;
      right: 0;
      top: 20px; }
  .full-image-container .copy.absolute, .banner-container .copy.absolute {
    position: absolute;
    top: 82px;
    left: 0;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
    .full-image-container .copy.absolute > *, .banner-container .copy.absolute > * {
      color: #ffffff; }
  @media screen and (max-width: 1080px) {
    .full-image-container.banner-container .copy.static, .banner-container .copy.static {
      min-height: unset; } }
  @media screen and (max-width: 500px) {
    .full-image-container, .banner-container {
      background-position: center top; } }

.content-area.max-width-500 {
  max-width: 500px; }

/*****COMPONENTS*****/
.text-center, .text-left {
  text-align: center; }
  .text-center .btn, .text-center .btn-primary, .text-left .btn, .text-left .btn-primary {
    display: block;
    max-width: 467px;
    margin: 60px auto; }
  @media screen and (max-width: 500px) {
    .text-center .btn, .text-center .btn-primary, .text-left .btn, .text-left .btn-primary {
      margin: 30px 0; } }

.text-left {
  text-align: left; }
  .text-left .btn, .text-left .btn-primary {
    margin: 60px 0; }

.select-vehicle {
  /*	padding-top: 40px;
  	padding-bottom: 30px;*/
  padding-top: 100px;
  padding-bottom: 90px; }
  .select-vehicle h5, .select-vehicle h6, .select-vehicle p {
    color: #040505; }
  .select-vehicle h5 {
    margin-bottom: 30px; }
  .select-vehicle h6 {
    margin-bottom: 10px; }
  .select-vehicle .fieldset {
    margin-bottom: 40px;
    max-width: 385px; }
  @media screen and (max-width: 500px) {
    .select-vehicle {
      padding-top: 40px;
      padding-bottom: 30px; } }

.calculate-fuel-plan {
  background-color: #D7D7D7;
  padding-top: 60px;
  padding-bottom: 60px; }
  .calculate-fuel-plan .padded-container .extension, .calculate-fuel-plan .padded-container .fieldset {
    max-width: 620px; }
  .calculate-fuel-plan h5 {
    margin-bottom: 70px; }
    .calculate-fuel-plan h5:last-of-type {
      display: inline-block;
      margin-bottom: 0;
      padding-bottom: 10px;
      border-bottom: 1px solid #333333; }
      .calculate-fuel-plan h5:last-of-type:before {
        content: "R  "; }
  .calculate-fuel-plan p {
    margin-bottom: 20px; }
  .calculate-fuel-plan .fieldset + h5 {
    margin-top: 70px; }
  .calculate-fuel-plan .extension .year, .calculate-fuel-plan .extension .mileage {
    margin-bottom: 55px; }
  .calculate-fuel-plan .extension .year {
    padding-right: 12px; }
  .calculate-fuel-plan .extension .mileage {
    padding-left: 12px; }
  .calculate-fuel-plan .btn, .calculate-fuel-plan .btn-primary {
    margin-bottom: 50px; }
  @media (max-width: 768px) {
    .calculate-fuel-plan {
      padding-top: 40px;
      padding-bottom: 30px; }
      .calculate-fuel-plan h5 {
        margin-bottom: 30px; }
      .calculate-fuel-plan .fieldset + h5 {
        margin-top: 30px; }
      .calculate-fuel-plan .floated-two-col .col {
        float: none;
        width: 100%;
        padding-left: 0;
        padding-right: 0; }
      .calculate-fuel-plan .extension .year, .calculate-fuel-plan .extension .mileage {
        margin-bottom: 30px; }
      .calculate-fuel-plan .padded-container .extension, .calculate-fuel-plan .padded-container .fieldset {
        max-width: unset; } }

/*****HOME*****/
.last-serviced-period {
  width: 50%;
  float: left; }
  .last-serviced-period h6, .last-serviced-period h5 {
    font-weight: 400;
    color: #000000; }
  .last-serviced-period h5 {
    margin-bottom: 20px; }
  @media screen and (max-width: 1300px) {
    .last-serviced-period h5 {
      margin-bottom: 10px; } }
  @media screen and (max-width: 500px) {
    .last-serviced-period {
      width: auto;
      float: none;
      margin-bottom: 35px; }
      .last-serviced-period:last-of-type {
        margin-bottom: 0; } }

.welcome-user {
  padding-top: 72px;
  padding-bottom: 72px; }
  .welcome-user .aui-headline-2 {
    position: relative; }
  .welcome-user .fieldset {
    width: 100%;
    margin-bottom: 30px; }
  .welcome-user .content-area {
    padding-left: 17px;
    width: 475px; }
  .welcome-user .btn, .welcome-user .btn-primary {
    vertical-align: top; }
  @media screen and (max-width: 1300px) {
    .welcome-user .btn-primary, .welcome-user .btn, .welcome-user .btn-primary {
      width: 196px; } }
  @media screen and (max-width: 1140px) {
    .welcome-user .row {
      width: 50%; }
    .welcome-user .content-area {
      padding-left: 30px;
      width: 450px; } }
  @media screen and (max-width: 1080px) {
    .welcome-user .flex-row, .welcome-user .categories {
      flex-direction: column-reverse; }
    .welcome-user .row {
      width: 100%; }
    .welcome-user .content-area {
      padding-left: 0;
      margin-bottom: 40px; }
    .welcome-user .btn-primary, .welcome-user .btn, .welcome-user .btn-primary {
      width: 295px; } }
  @media screen and (max-width: 900px) {
    .welcome-user {
      padding-top: 35px;
      padding-bottom: 35px;
      position: static; }
      .welcome-user .row:not(.content-area) {
        display: flex;
        flex-direction: row; }
      .welcome-user .btn-primary, .welcome-user .btn, .welcome-user .btn-primary {
        width: 49%;
        margin-right: 1%; }
        .welcome-user .btn-primary:last-of-type, .welcome-user .btn:last-of-type, .welcome-user .btn-primary:last-of-type {
          margin-right: 0;
          margin-left: 1%; } }
  @media screen and (max-width: 600px) {
    .welcome-user {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 9;
      background-color: #fff;
      height: auto;
      padding-top: 30px;
      padding-bottom: 30px; }
      .welcome-user .row:not(.content-area) {
        display: flex;
        flex-direction: column; }
      .welcome-user .btn-primary, .welcome-user .btn, .welcome-user .btn-primary {
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px; }
        .welcome-user .btn-primary:last-of-type, .welcome-user .btn:last-of-type, .welcome-user .btn-primary:last-of-type {
          margin-right: 0;
          margin-left: 0;
          margin-bottom: 0; } }

.audi-free-plan-notification {
  background-color: #010101;
  padding-top: 72px;
  padding-bottom: 72px; }
  .audi-free-plan-notification * {
    color: #ffffff; }
  .audi-free-plan-notification .btn, .audi-free-plan-notification .btn-primary {
    border-bottom: 2px solid #ffffff; }
  @media screen and (max-width: 1300px) {
    .audi-free-plan-notification {
      padding: 72px 0; }
      .audi-free-plan-notification .btn, .audi-free-plan-notification .btn-primary, .audi-free-plan-notification .btn-primary {
        width: 200px;
        padding: 22px 10px; } }
  @media screen and (max-width: 1080px) {
    .audi-free-plan-notification .flex-row, .audi-free-plan-notification .categories {
      flex-direction: column; }
    .audi-free-plan-notification .row {
      display: flex;
      width: 100%; }
      .audi-free-plan-notification .row:first-of-type {
        margin-bottom: 40px; }
    .audi-free-plan-notification .btn-primary, .audi-free-plan-notification .btn, .audi-free-plan-notification .btn-primary {
      padding: 22px 32px;
      width: 295px; } }
  @media screen and (max-width: 900px) {
    .audi-free-plan-notification .btn-primary, .audi-free-plan-notification .btn, .audi-free-plan-notification .btn-primary {
      width: 49%;
      margin-right: 1%; }
      .audi-free-plan-notification .btn-primary:last-of-type, .audi-free-plan-notification .btn:last-of-type, .audi-free-plan-notification .btn-primary:last-of-type {
        margin-right: 0;
        margin-left: 1%; } }
  @media (max-width: 768px) {
    .audi-free-plan-notification .padded-container {
      margin-bottom: 0; } }
  @media screen and (max-width: 500px) {
    .audi-free-plan-notification {
      padding: 40px 0 65px !important; }
      .audi-free-plan-notification .row {
        display: flex;
        flex-direction: column; }
      .audi-free-plan-notification .btn-primary, .audi-free-plan-notification .btn, .audi-free-plan-notification .btn-primary {
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px; }
        .audi-free-plan-notification .btn-primary:last-of-type, .audi-free-plan-notification .btn:last-of-type, .audi-free-plan-notification .btn-primary:last-of-type {
          margin-right: 0;
          margin-left: 0;
          margin-bottom: 0; } }

/*****CATEGORIES*****/
.categories {
  padding: 80px 0 0;
  margin-bottom: 54px;
  align-items: flex-start; }
  .categories > a {
    padding-right: 4px;
    width: 25%; }
    .categories > a .background-image {
      display: block;
      width: 100%;
      margin-bottom: 20px; }
      .categories > a .background-image img {
        width: 100%; }
    .categories > a p {
      margin-bottom: 16px; }
      .categories > a p:last-of-type {
        margin-bottom: 0; }
    .categories > a .tittle {
      margin-bottom: 16px; }
    .categories > a .tittle, .categories > a .category-copy {
      padding-right: 20px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box; }
    .categories > a .category-copy {
      font-weight: 400; }
    .categories > a:hover .background-image img {
      -webkit-transform: scale(1.1, 1.1);
      -moz-transform: scale(1.1, 1.1);
      -ms-transform: scale(1.1, 1.1);
      -o-transform: scale(1.1, 1.1);
      transform: scale(1.1, 1.1); }
  @media (max-width: 768px) {
    .categories {
      padding: 40px 0 0;
      margin: 0 auto;
      flex-wrap: wrap; }
      .categories > a {
        width: 50%;
        padding-right: 10px;
        margin-bottom: 20px; }
        .categories > a:nth-of-type(2n+2) {
          padding-right: 0;
          padding-left: 10px; } }
  @media screen and (max-width: 500px) {
    .categories {
      /*padding-bottom: 0;
      margin-bottom: 0;*/ }
      .categories > a {
        width: 100%;
        padding: 0;
        margin-bottom: 40px; }
        .categories > a .tittle, .categories > a .category-copy {
          padding-right: 0; }
        .categories > a:nth-of-type(2n+2) {
          padding: 0; }
        .categories > a:last-of-type {
          margin-bottom: 20px; } }

/*****BANNER CONTAINER*****/
.banner-container .padded-container {
  height: 100%;
  max-width: 1600px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box; }
.banner-container .copy.absolute {
  margin: 0 auto;
  left: auto;
  -webkit-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  transform: translate(0, 0); }
  .banner-container .copy.absolute > * {
    display: block; }
  .banner-container .copy.absolute h5 {
    position: relative;
    padding-left: 138px; }
    .banner-container .copy.absolute h5:before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      -webkit-transform: translate(0, -50%);
      -moz-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
      -o-transform: translate(0, -50%);
      transform: translate(0, -50%);
      width: 115px;
      height: 3px;
      background-color: #ffffff; }
@media screen and (max-width: 1300px) {
  .banner-container .copy.absolute {
    left: 90px;
    right: 90px; } }
@media screen and (max-width: 900px) {
  .banner-container .copy.absolute {
    left: 35px;
    right: 35px; } }
@media screen and (max-width: 500px) {
  .banner-container .copy.absolute {
    top: 35px; }
    .banner-container .copy.absolute h5 {
      padding-left: 0;
      padding-top: 20px; }
      .banner-container .copy.absolute h5:before {
        top: 0; } }

/*****SLIDERS*****/
.slider-variation-1 {
  height: 380px;
  margin-bottom: 100px;
  position: relative; }
  .slider-variation-1 .slide {
    background-image: url(../images/img.png);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img.png', sizingMethod=scale);
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img.png', sizingMethod=scale)";
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%; }
  .slider-variation-1 .owl-item {
    height: 380px; }
  .slider-variation-1 .owl-dots {
    text-align: center;
    margin-top: 36px;
    line-height: 0; }
    .slider-variation-1 .owl-dots button {
      margin: 0 2px; }
      .slider-variation-1 .owl-dots button span {
        display: block;
        width: 33px;
        height: 7px;
        background-color: #ACACAC;
        -webkit-transition: all 600ms linear;
        -moz-transition: all 600ms linear;
        -ms-transition: all 600ms linear;
        -o-transition: all 600ms linear;
        transition: all 600ms linear; }
      .slider-variation-1 .owl-dots button.active span {
        background-color: #040505; }
  @media (max-width: 768px) {
    .slider-variation-1 {
      margin-bottom: 80px; } }

.owl-nav {
  position: relative;
  clear: both;
  float: none !important;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px; }
  .owl-nav::after {
    position: relative;
    content: '';
    display: table;
    clear: both; }
  .owl-nav button {
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    position: relative;
    width: 60px;
    height: 80px; }
    .owl-nav button:after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 27px;
      height: 10px;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      background-image: url(../images/svg/ico-carousel-arrow.svg);
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='svg/ico-carousel-arrow.svg', sizingMethod=scale);
      -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='svg/ico-carousel-arrow.svg', sizingMethod=scale)";
      background-repeat: no-repeat;
      background-position: center center;
      -webkit-background-size: contain;
      -moz-background-size: contain;
      -o-background-size: contain;
      background-size: contain; }
    .owl-nav button span {
      display: none; }
  .owl-nav .owl-prev {
    float: left;
    margin-left: 10px; }
  .owl-nav .owl-next {
    float: right;
    -webkit-transform: translate(0, -50%) rotate(180deg);
    -moz-transform: translate(0, -50%) rotate(180deg);
    -ms-transform: translate(0, -50%) rotate(180deg);
    -o-transform: translate(0, -50%) rotate(180deg);
    transform: translate(0, -50%) rotate(180deg);
    margin-right: 10px; }

/* -----------------------------------------------------
Structure
----------------------------------------------------- */
/* Content Container */
/*.content-container,
.popup-box {
	@include flexwidth(calc(100% - 200px));
}*/
.page-intro {
  margin-top: 50px;
  margin-bottom: 50px; }
  .page-intro p {
    margin-bottom: 40px; }
    .page-intro p:last-of-type {
      margin-bottom: 0; }
  .page-intro .btn, .page-intro .btn-primary {
    margin-top: 40px; }
  @media (max-width: 768px) {
    .page-intro {
      margin-bottom: 30px;
      margin-top: 30px; }
      .page-intro h1 {
        margin-bottom: 28px; }
      .page-intro p {
        margin-bottom: 10px; } }
  @media screen and (max-width: 500px) {
    .page-intro p {
      margin-bottom: 20px; } }

.full-container {
  padding-left: 30px;
  padding-right: 30px; }

.error-container {
  max-width: 550px;
  text-align: center; }

/* Flex */
.flex {
  display: flex;
  flex-direction: row; }
  .flex[class*="flex-"] {
    justify-content: space-between;
    flex-wrap: wrap; }
  .flex.flex-row, .flex.categories {
    flex-wrap: nowrap; }

.flex-2 > div {
  width: calc(50% - 22px);
  flex-basis: calc(50% - 22px); }

.flex-split > div {
  width: calc(50% - 3px);
  flex-basis: calc(50% - 3px); }

.flex-equal > div {
  width: 0;
  flex-basis: auto;
  flex-grow: 1; }

.flex-mix {
  min-height: 30vw; }
  .flex-mix .mix-img {
    width: calc((100% / 3) - 3px);
    flex-basis: calc((100% / 3) - 3px); }
  .flex-mix .mix-text {
    width: calc((100% / 3 * 2) - 3px);
    flex-basis: calc((100% / 3 * 2) - 3px);
    display: flex;
    align-items: center; }
    .flex-mix .mix-text > div {
      width: 100%; }
  .flex-mix .grid-box-solid {
    height: auto; }
  .flex-mix.img-left .mix-img {
    order: 1; }
  .flex-mix.img-left .mix-text {
    order: 2; }

/*.flex-stagger {
    flex-direction: column;
    flex-wrap: wrap;
    & > div {
        width: calc(70% - 22px);
        &:nth-child(even) {
            align-self: flex-end;
        }
        &:nth-last-child(n+2) {
            padding-bottom: 40px;
        }
    }
}*/
/*

!* Sections *!
section {
    &.solid {
        padding: 15vh 0;
    }
    &.solid + .solid {
        padding-top: 0 !important;
    }
}
*/
.tab-module .tab-btn,
.grid-bar .grid-box-solid {
  height: 58px; }

.tab-btn {
  float: left;
  width: 50%;
  color: #ffffff;
  background-color: #000; }

.form-input {
  float: left;
  width: 50%; }

.dealer-search .form-input {
  float: none;
  width: 100%; }

/* ----- Popup Module ----- */
.popup {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center; }
  .popup.popup-screen {
    background-color: transparent;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: background-color 0.3s; }
  .popup:not(.open) {
    display: none; }

.popup-box {
  max-width: 500px;
  width: 430px;
  position: relative; }
  .popup-box.clear-box {
    max-width: 860px;
    color: #fff;
    opacity: 0; }
  .popup-box.white-box {
    background-color: #fff;
    padding: 30px; }

.popup-content p {
  margin-top: 20px; }
  .popup-content p a {
    color: #bb0a30;
    font-weight: bold; }

.popup.open.popup-screen {
  background-color: rgba(0, 0, 0, 0.86); }
.popup.open .popup-box.clear-box {
  animation: revealExpanded 0.6s forwards; }

/*****HEADER*****/
.relative {
  position: relative; }

.bordered {
  max-width: unset;
  margin-bottom: 0; }
  .bordered:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    z-index: 10;
    background-color: #040505; }
  @media screen and (max-width: 1080px) {
    .bordered:after {
      display: none; } }

/*****NAVIGATION*****/
.navigation {
  max-width: 1600px;
  z-index: 10;
  vertical-align: middle;
  padding: 20.5px 0;
  margin: 0 auto;
  -webkit-transition: all 600ms linear;
  -moz-transition: all 600ms linear;
  -ms-transition: all 600ms linear;
  -o-transition: all 600ms linear;
  transition: all 600ms linear;
  position: relative;
  clear: both;
  float: none !important;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  .navigation::after {
    position: relative;
    content: '';
    display: table;
    clear: both; }
  .navigation:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: #ffffff; }
  .navigation > a {
    position: relative;
    z-index: 2;
    height: 27px;
    float: left; }
  .navigation .audi-icon {
    width: 67px;
    float: right;
    background-image: url(../images/img.png);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img.png', sizingMethod=scale);
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img.png', sizingMethod=scale)";
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain; }
  .navigation .my-audi-logo {
    width: 173px;
    background-image: url(../images/img.png);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img.png', sizingMethod=scale);
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img.png', sizingMethod=scale)";
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain; }
  .navigation .burger-menu {
    width: 29px;
    height: 20px;
    margin: 4px 36px 3px 0; }
    .navigation .burger-menu span {
      display: block;
      position: absolute;
      left: 0;
      top: 1%;
      width: 100%;
      height: 1px;
      -webkit-transform: translate(0, -50%);
      -moz-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
      -o-transform: translate(0, -50%);
      transform: translate(0, -50%);
      -webkit-transition: all 600ms linear;
      -moz-transition: all 600ms linear;
      -ms-transition: all 600ms linear;
      -o-transition: all 600ms linear;
      transition: all 600ms linear;
      -webkit-transition-delay: 0s;
      -o-transition-delay: 0s;
      transition-delay: 0s;
      background-color: #000; }
      .navigation .burger-menu span:nth-of-type(2) {
        top: 50%; }
      .navigation .burger-menu span:last-of-type {
        top: 99%; }
    .navigation .burger-menu.activeButton span:first-of-type {
      top: 50%;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg); }
    .navigation .burger-menu.activeButton span:nth-of-type(2) {
      width: 0; }
    .navigation .burger-menu.activeButton span:last-of-type {
      top: 50%;
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg); }
  @media screen and (max-width: 1300px) {
    .navigation:before {
      left: -20%;
      width: 140%; } }
  @media screen and (max-width: 1080px) {
    .navigation {
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: auto;
      background: #ffffff;
      overflow-y: hidden;
      overflow-x: hidden;
      text-align: center;
      height: 68px; }
      .navigation li {
        position: relative; }
        .navigation li:before {
          content: "";
          position: absolute;
          bottom: 0;
          left: 35px;
          right: 35px;
          height: 1px;
          background-color: #040505; }
        .navigation li ul li:before {
          background-color: #ffffff; }
      .navigation .sub-menu {
        position: relative; }
        .navigation .sub-menu > span:before {
          top: 0;
          -webkit-transition: all 600ms linear;
          -moz-transition: all 600ms linear;
          -ms-transition: all 600ms linear;
          -o-transition: all 600ms linear;
          transition: all 600ms linear; }
        .navigation .sub-menu.active ul li:last-of-type a {
          border-bottom: none; }
        .navigation .sub-menu.active > span:before {
          height: 0;
          top: 50%; }
      .navigation .sub-menu > span {
        position: absolute;
        top: 20px;
        right: 35px;
        width: 20px;
        height: 20px;
        padding: 0;
        margin: 0; }
        .navigation .sub-menu > span:before, .navigation .sub-menu > span:after {
          position: absolute;
          display: block;
          content: "";
          background-color: #000; }
        .navigation .sub-menu > span:before {
          width: 1px;
          height: 20px;
          top: 0;
          left: 50%; }
        .navigation .sub-menu > span:after {
          width: 20px;
          height: 1px;
          top: 50%;
          left: 0; }
      .navigation .audi-icon {
        margin-right: 90px; }
      .navigation .burger-menu {
        margin-left: 35px; }
      .navigation:before {
        display: none; }
      .navigation .my-audi-logo {
        float: none;
        position: absolute;
        top: 33.5px;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
      .navigation.open {
        bottom: 0;
        height: auto;
        overflow-y: scroll; }
        .navigation.open h6 {
          color: #040505; }
        .navigation.open .sub-menu ul {
          background-color: #040505; }
          .navigation.open .sub-menu ul li, .navigation.open .sub-menu ul li a {
            color: #ffffff; }
        .navigation.open .mega-menu {
          display: block; }
          .navigation.open .mega-menu.slideDownActive {
            top: auto; }
      .navigation .audi-icon {
        margin-right: 0;
        position: absolute;
        top: 20.5px;
        right: 90px; } }
  @media screen and (max-width: 1080px) {
    .navigation .burger-menu {
      position: absolute;
      float: none;
      z-index: 3; }
    .navigation.open .mega-menu {
      -webkit-transform: translate(0, 0);
      -moz-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
      -o-transform: translate(0, 0);
      transform: translate(0, 0); }
    .navigation .audi-icon {
      right: 35px; } }
  @media screen and (max-width: 500px) {
    .navigation .my-audi-logo {
      width: 120px; } }

.login_form {
  position: relative;
  float: right;
  margin-right: 38px;
  vertical-align: top;
  z-index: 2;
  width: auto;
  height: 27px;
  order: 2;
  line-height: 27px;
  -webkit-transition: all 600ms linear;
  -moz-transition: all 600ms linear;
  -ms-transition: all 600ms linear;
  -o-transition: all 600ms linear;
  transition: all 600ms linear; }
  .login_form p {
    display: inline-block;
    vertical-align: top;
    margin-bottom: 0;
    line-height: 26px; }
  .login_form a {
    padding: 0 13px 0 0;
    font-size: 14px;
    line-height: 26px; }
    .login_form a:last-of-type {
      padding: 0 0 0 13px; }
  .login_form .login {
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
    display: none;
    width: 0;
    margin-left: 20px;
    vertical-align: middle;
    height: 27px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 600ms linear;
    -moz-transition: all 600ms linear;
    -ms-transition: all 600ms linear;
    -o-transition: all 600ms linear;
    transition: all 600ms linear; }
    .login_form .login input {
      display: inline-block;
      height: 26px;
      border: 1px solid #040505;
      padding: 0 10px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      font-size: 13px;
      line-height: 23px; }
      .login_form .login input::-webkit-input-placeholder {
        color: inherit;
        font-size: inherit;
        line-height: inherit; }
      .login_form .login input::-moz-placeholder {
        color: inherit;
        font-size: inherit;
        line-height: inherit; }
      .login_form .login input:-ms-input-placeholder {
        color: inherit;
        font-size: inherit;
        line-height: inherit; }
      .login_form .login input:-moz-placeholder {
        color: inherit;
        font-size: inherit;
        line-height: inherit; }
      .login_form .login input[type='submit'] {
        padding: 0 17px; }
    .login_form .login .flex[class*="flex-"] {
      flex-wrap: nowrap; }
    .login_form .login .text-field:not(.date-field) .input {
      padding-right: 5px; }
    .login_form .login .flex-2 > div {
      width: auto;
      flex-basis: auto;
      margin: -2px 5px; }
      .login_form .login .flex-2 > div .form-input {
        float: none;
        width: auto; }
    .login_form .login .flex-2 .text-field:not(.date-field) .form-input:after {
      right: 8px; }
    .login_form .login .flex-2 .text-field .field-label {
      display: none;
      height: inherit;
      font-size: 13px;
      line-height: 26px;
      top: 3px;
      left: 12px; }
    .login_form .login .btn, .login_form .login .btn-primary {
      width: auto;
      min-width: unset; }
  .login_form.open {
    padding-right: 570px; }
    .login_form.open .login {
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      filter: alpha(opacity=100);
      -moz-opacity: 1;
      opacity: 1;
      width: 76%; }
  .login_form #register {
    border-right: 1px solid #040505; }
  @media screen and (max-width: 1400px) {
    .login_form {
      margin-right: 25px; } }
  @media screen and (max-width: 1300px) {
    .login_form {
      margin-right: 10px;
      height: auto; }
      .login_form .login input {
        width: 134px; }
      .login_form.open {
        padding-right: 370px; }
        .login_form.open .login {
          width: 70%; }
          .login_form.open .login input::placeholder {
            color: transparent;
            display: none; }
          .login_form.open .login input[type="submit"] {
            width: auto;
            padding: 0 10px; } }
  @media screen and (max-width: 1080px) {
    .login_form {
      display: none;
      text-align: left;
      margin: 0;
      order: 2;
      float: none; }
      .login_form.open {
        display: block;
        padding-right: 0; }
        .login_form.open .login {
          width: auto;
          height: 0; }
          .login_form.open .login.open {
            height: auto; }
          .login_form.open .login .flex {
            flex-direction: column; }
        .login_form.open .login input, .login_form.open .login input[type="submit"] {
          width: 100%;
          height: 60px;
          padding: 0;
          color: #ffffff; }
          .login_form.open .login input::-webkit-input-placeholder, .login_form.open .login input[type="submit"]::-webkit-input-placeholder {
            color: inherit;
            font-size: inherit;
            line-height: inherit; }
          .login_form.open .login input::-moz-placeholder, .login_form.open .login input[type="submit"]::-moz-placeholder {
            color: inherit;
            font-size: inherit;
            line-height: inherit; }
          .login_form.open .login input:-ms-input-placeholder, .login_form.open .login input[type="submit"]:-ms-input-placeholder {
            color: inherit;
            font-size: inherit;
            line-height: inherit; }
          .login_form.open .login input:-moz-placeholder, .login_form.open .login input[type="submit"]:-moz-placeholder {
            color: inherit;
            font-size: inherit;
            line-height: inherit; }
        .login_form.open .login input[type="submit"] {
          border: none;
          background-color: #ffffff;
          color: #040505;
          margin: 20px 0;
          height: 40px; }
      .login_form p {
        display: block;
        padding: 20px 0;
        margin: 0 35px;
        border-bottom: 1px solid #040505; }
        .login_form p .profile {
          padding: 0; }
      .login_form .login {
        display: block;
        position: relative;
        margin-left: 0;
        padding: 0 35px;
        background-color: #040505;
        overflow: hidden;
        height: 0;
        -webkit-transition: all 600ms linear;
        -moz-transition: all 600ms linear;
        -ms-transition: all 600ms linear;
        -o-transition: all 600ms linear;
        transition: all 600ms linear; }
        .login_form .login .flex-2 > div {
          width: 100%;
          margin: 0; }
          .login_form .login .flex-2 > div:last-of-type {
            border-bottom: 1px solid #ffffff; }
        .login_form .login .text-field.active .input {
          border-color: #ffffff !important; }
        .login_form .login input {
          display: block;
          width: 100%;
          border: none;
          border-bottom: 1px solid #ffffff;
          color: #ffffff; }
          .login_form .login input::placeholder {
            color: #ffffff;
            display: block; } }

.register {
  display: none;
  position: relative;
  clear: both;
  float: none !important;
  position: absolute;
  top: -1000px;
  left: -72px;
  right: auto;
  z-index: 1;
  width: 1100px;
  padding: 50px 72px;
  background-color: #ffffff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 600ms linear;
  -moz-transition: all 600ms linear;
  -ms-transition: all 600ms linear;
  -o-transition: all 600ms linear;
  transition: all 600ms linear; }
  .register::after {
    position: relative;
    content: '';
    display: table;
    clear: both; }
  .register > div {
    float: left;
    width: 50%; }
    .register > div:last-of-type p + h3 {
      margin-top: 40px; }
    .register > div .btn, .register > div .btn-primary {
      margin: 30px 0 30px; }
  .register input {
    display: block;
    border-bottom: 1px solid #040505;
    padding: 10px 20px 10px 0; }
  .register h2 {
    margin-bottom: 40px; }
  .register h3 {
    margin-bottom: 30px; }
  .register .text-field .input::placeholder, .register .select-input::placeholder {
    color: #ffffff !important;
    display: block; }
  .register.open {
    top: 100%; }
  .register .flex-2 > div {
    width: 100%;
    flex-basis: 100%;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    position: relative; }
  .register .form-input {
    width: 80%; }
  .register .error-msg {
    position: absolute;
    top: 100%; }
  @media screen and (max-width: 1300px) {
    .register {
      width: auto;
      left: -90px;
      right: -90px;
      padding: 50px 0 50px 90px; }
      .register > div {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding-right: 90px; }
      .register .text-field:not(.date-field) .input, .register .text-field input[type="password"].input {
        padding-right: 20px; }
      .register .form-input {
        width: auto; } }
  @media screen and (max-width: 1080px) {
    .register {
      display: block;
      position: relative;
      padding: 0;
      order: 3;
      overflow: hidden;
      height: 0;
      top: 0;
      left: 0;
      right: auto;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      -moz-opacity: 0;
      opacity: 0; }
      .register.open {
        top: 0;
        left: 0;
        right: auto;
        height: auto;
        overflow: visible;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        -moz-opacity: 1;
        opacity: 1; }
      .register p, .register h2, .register h3 {
        display: none; }
      .register > div {
        float: none;
        width: auto;
        padding: 0 35px;
        background-color: #040505; }
        .register > div:first-of-type {
          padding-top: 27px; }
        .register > div:last-of-type {
          padding-bottom: 10px; }
        .register > div .text-field .input, .register > div .select-input {
          border-color: #ffffff !important;
          color: #ffffff;
          font-size: 13px;
          line-height: 23px; }
          .register > div .text-field .input::placeholder, .register > div .select-input::placeholder {
            color: #ffffff !important;
            display: block; }
        .register > div .text-field .field-label {
          display: none; }
        .register > div .btn, .register > div .btn-primary {
          display: block;
          width: 100%;
          background-color: #ffffff;
          color: #040505; } }

.site-search-bar {
  position: relative;
  display: block;
  height: 27px;
  font-size: 27px;
  float: right;
  margin-right: 40px;
  line-height: 27px;
  z-index: 2;
  order: 1;
  -webkit-transition: all 600ms linear;
  -moz-transition: all 600ms linear;
  -ms-transition: all 600ms linear;
  -o-transition: all 600ms linear;
  transition: all 600ms linear; }
  .site-search-bar.ico-search:before {
    z-index: 1; }
  .site-search-bar input {
    line-height: 27px;
    vertical-align: top;
    -webkit-transition: all 600ms linear;
    -moz-transition: all 600ms linear;
    -ms-transition: all 600ms linear;
    -o-transition: all 600ms linear;
    transition: all 600ms linear; }
    .site-search-bar input[type='text'] {
      position: absolute;
      z-index: 0;
      left: -10px;
      width: 0;
      height: 27px;
      border: 1px solid #040505;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      -moz-opacity: 0;
      opacity: 0;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-transition: all 600ms linear;
      -moz-transition: all 600ms linear;
      -ms-transition: all 600ms linear;
      -o-transition: all 600ms linear;
      transition: all 600ms linear; }
    .site-search-bar input[type='submit'] {
      width: 27px;
      height: 27px;
      position: relative;
      top: 0;
      padding: 0;
      margin-right: 10px;
      z-index: 2; }
  .site-search-bar .fieldset label {
    display: none; }
  .site-search-bar .text-field:not(.date-field) .input {
    padding-right: 0; }
  .site-search-bar.open {
    margin-left: 204px; }
    .site-search-bar.open input[type='text'] {
      width: 210px;
      left: -220px;
      padding: 0 10px;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
      filter: alpha(opacity=100);
      -moz-opacity: 1;
      opacity: 1; }
  @media screen and (max-width: 1400px) {
    .site-search-bar {
      margin-right: 25px; } }
  @media screen and (max-width: 1300px) {
    .site-search-bar {
      margin-right: 10px; }
      .site-search-bar.open input[type='text'] {
        width: 180px;
        left: -190px; }
        .site-search-bar.open input[type='text']::placeholder {
          color: transparent;
          display: none; } }
  @media screen and (max-width: 1080px) {
    .site-search-bar {
      display: none;
      padding: 50px 0 20px;
      float: none;
      height: auto;
      order: 1;
      border-bottom: 1px solid #040505; }
      .site-search-bar .form-input {
        padding-right: 50px; }
      .site-search-bar .form-input, .site-search-bar .flex-2 > div {
        width: 100%;
        flex-basis: 100%; }
      .site-search-bar.open {
        display: block;
        margin: 0 35px; }
        .site-search-bar.open.ico-search:before {
          position: absolute;
          top: 50px;
          left: auto;
          right: -3px;
          content: "\e905";
          z-index: 2;
          color: #ffff;
          width: 33px;
          height: 33px;
          font-size: 17px;
          background-color: #040505; }
        .site-search-bar.open input[type='text'] {
          display: block;
          position: relative;
          left: auto;
          width: 100%;
          font-size: 14px;
          line-height: 18px;
          height: 33px;
          opacity: 1 !important; }
          .site-search-bar.open input[type='text']::-webkit-input-placeholder {
            color: #040505;
            font-size: inherit;
            line-height: inherit; }
          .site-search-bar.open input[type='text']::-moz-placeholder {
            color: #040505;
            font-size: inherit;
            line-height: inherit; }
          .site-search-bar.open input[type='text']:-ms-input-placeholder {
            color: #040505;
            font-size: inherit;
            line-height: inherit; }
          .site-search-bar.open input[type='text']:-moz-placeholder {
            color: #040505;
            font-size: inherit;
            line-height: inherit; }
        .site-search-bar.open input[type="submit"] {
          position: absolute;
          top: 52px;
          margin-right: 0;
          right: 0;
          background-color: transparent; }
        .site-search-bar.open .fieldset label {
          display: block; }
        .site-search-bar.open .text-field .field-label {
          display: none;
          top: 2px;
          left: 10px;
          font-size: 16px;
          line-height: 27px;
          height: auto; }
        .site-search-bar.open .text-field.active .field-label {
          top: -22px; }
        .site-search-bar.open .field-line {
          display: none; } }

/*****MEGA-MENU*****/
.mega-menu {
  display: none;
  position: absolute;
  top: -450px;
  left: 50%;
  z-index: 1;
  order: 3;
  flex-direction: row;
  max-width: 1600px;
  width: 100%;
  justify-content: space-between;
  padding: 30px 75px 70px;
  background-color: #ffffff;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-transition: all 600ms linear;
  -moz-transition: all 600ms linear;
  -ms-transition: all 600ms linear;
  -o-transition: all 600ms linear;
  transition: all 600ms linear; }
  .mega-menu.open {
    top: 100%; }
  .mega-menu > ul:first-of-type > li > a {
    font-weight: 700; }
  .mega-menu ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between; }
    .mega-menu ul li {
      flex-direction: column;
      list-style: none; }
      .mega-menu ul li h6 {
        margin-bottom: 30px; }
      .mega-menu ul li a {
        display: block; }
      .mega-menu ul li ul {
        display: block; }
        .mega-menu ul li ul li {
          margin-bottom: 10px; }
          .mega-menu ul li ul li a {
            position: relative;
            -webkit-transition: all 100ms linear;
            -moz-transition: all 100ms linear;
            -ms-transition: all 100ms linear;
            -o-transition: all 100ms linear;
            transition: all 100ms linear;
            left: 0; }
            .mega-menu ul li ul li a:hover {
              color: #D7D7D7;
              left: 10px; }
              .mega-menu ul li ul li a:hover:before {
                content: "- ";
                position: absolute;
                top: 0;
                left: -10px; }
  @media screen and (max-width: 1300px) {
    .mega-menu {
      width: calc(100% + 110px);
      padding: 30px 60px 70px; } }
  @media screen and (max-width: 1140px) {
    .mega-menu {
      padding: 30px 35px 70px; } }
  @media screen and (max-width: 1080px) {
    .mega-menu {
      position: relative;
      top: auto;
      left: 0;
      text-align: left;
      padding: 0 0 50px;
      height: auto;
      order: 4;
      width: 100%; }
      .mega-menu > ul:first-of-type > li > a {
        font-weight: 400; }
      .mega-menu ul {
        display: block;
        width: 100%; }
        .mega-menu ul li {
          margin-bottom: 0; }
          .mega-menu ul li h6, .mega-menu ul li a {
            font-weight: 400;
            padding: 20px 0;
            font-size: 16px;
            line-height: 20px;
            margin: 0 35px; }
          .mega-menu ul li ul li {
            margin-bottom: 0; }
          .mega-menu ul li:last-of-type a {
            border-bottom: none; }
          .mega-menu ul li:last-of-type:before {
            display: none; }
      .mega-menu .sub-menu {
        /*
border-bottom: none;*/ }
        .mega-menu .sub-menu ul {
          display: none; } }
  @media screen and (max-width: 900px) {
    .mega-menu {
      padding: 0 0; } }

.mega-menu-close-btn, .close-reg {
  position: absolute;
  bottom: 40px;
  right: 72px;
  width: 20px;
  height: 20px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg); }
  .mega-menu-close-btn:before, .mega-menu-close-btn:after, .close-reg:before, .close-reg:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #040505; }
  .mega-menu-close-btn:before, .close-reg:before {
    height: 1px;
    width: 100%; }
  .mega-menu-close-btn:after, .close-reg:after {
    height: 100%;
    width: 1px; }
  @media screen and (max-width: 1080px) {
    .mega-menu-close-btn, .close-reg {
      display: none; } }

.close-reg {
  bottom: auto;
  top: 40px;
  right: 40px; }
  @media screen and (max-width: 1080px) {
    .close-reg {
      display: block;
      top: 13px; }
      .close-reg:before, .close-reg:after {
        background-color: #fff; } }

/*****FOOTER*****/
.footer {
  background-color: black;
  color: grey;
  padding: 46px 0 62px 0;
  position: relative;
  box-shadow: 0 100px 0 0 black; }
  .footer h6 {
    margin-bottom: 40px; }
  .footer li {
    font-family: "Audi Extended", Audi Extended, Arial, sans-serif;
    font-size: 15px;
    line-height: 17px;
    font-weight: 400;
    color: #ACACAC; }
  .footer .nav-list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    font-family: "Audi Extended", Audi Extended, Arial, sans-serif, "Audi Type", AudiTypeExtended, Arial, sans-serif;
    font-size: 10px;
    color: #ACACAC; }
  .footer .nav-item {
    line-height: 2; }
  .footer .current-year, .footer .nav-link {
    display: inline-block;
    color: #ACACAC; }
  .footer .nav-item:nth-last-child(n+2):after {
    content: "|";
    display: inline-block;
    padding: 0 10px;
    color: #ACACAC; }
  .footer .social-list {
    display: flex;
    margin-right: -7px; }
  .footer .social-item {
    display: inline-block; }
    .footer .social-item:nth-last-child(n+2) {
      margin-right: 14px; }
  .footer .social-link {
    width: 40px;
    height: 30px;
    display: block; }
    .footer .social-link:before {
      color: grey;
      font-size: 40px; }
  @media screen and (max-width: 500px) {
    .footer h6 {
      margin-bottom: 20px; }
    .footer .nav-list .nav-item {
      width: 50%; }
      .footer .nav-list .nav-item:after {
        content: ""; } }

.footer-panel {
  display: flex;
  justify-content: space-between;
  align-items: center; }
  @media screen and (max-width: 900px) {
    .footer-panel {
      flex-direction: column;
      align-items: flex-start; }
      .footer-panel .panel-left {
        margin-bottom: 40px; } }
  @media screen and (max-width: 500px) {
    .footer-panel .panel-left {
      margin-bottom: 20px; } }

.terms {
  font-family: "Audi Extended", Audi Extended, Arial, sans-serif, "Audi Type", AudiTypeExtended, Arial, sans-serif;
  font-size: 10px; }
  .terms .terms-inner {
    border-top: 1px solid lightgray;
    padding: 40px; }
  .terms p:nth-last-child(n+2) {
    margin-bottom: 10px; }

.footer,
.terms {
  padding-left: 6px;
  padding-right: 6px; }

/* -----------------------------------------------------
Main Search
----------------------------------------------------- */
.search-popup {
  align-items: flex-start; }
  .search-popup .popup-box {
    height: 100%; }
  .search-popup .popup-content {
    height: 100%;
    display: flex;
    flex-direction: column; }
  .search-popup .main-search {
    padding-top: 14vh; }
  .search-popup .input {
    padding: 20px 80px 20px 30px;
    border-bottom: 1px solid #fff;
    color: #fff;
    font-size: 30px; }
  .search-popup .search-field .reset-form {
    right: 30px; }
    .search-popup .search-field .reset-form:before, .search-popup .search-field .reset-form:after {
      width: 20px;
      left: auto;
      right: 0;
      border-bottom-color: #fff; }
  .search-popup .search-suggestions {
    padding: 30px 30px 14vh 30px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden; }
  .search-popup .suggestion-link {
    padding: 20px 0;
    position: relative;
    transition: padding 0.4s;
    display: none; }
    .search-popup .suggestion-link:nth-last-child(n+2) {
      border-bottom: 1px solid #404040; }
    .search-popup .suggestion-link:before, .search-popup .suggestion-link:after {
      content: "";
      width: 10px;
      height: 1px;
      position: absolute;
      display: block;
      right: 0;
      top: 50%;
      background-color: #464646; }
    .search-popup .suggestion-link:before {
      transform: rotate(-45deg);
      transform-origin: right; }
    .search-popup .suggestion-link:after {
      transform: rotate(45deg);
      transform-origin: right; }
    .search-popup .suggestion-link[data-search="match"] {
      display: block; }
  .search-popup .suggestion-title {
    font-weight: normal; }
  .search-popup .suggestion-url {
    color: #464646;
    font-size: 14px;
    text-decoration: underline;
    margin-top: 6px;
    opacity: 0;
    transition: color 0.4s;
    animation: revealInfo 0.8s forwards; }
  .search-popup .simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
    top: 6px;
    bottom: 6px;
    right: 0;
    left: auto;
    opacity: 0; }
  .search-popup .simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-visible:before {
    opacity: 1; }
  .search-popup .search-empty b {
    color: #bb0a30; }

/*****ARTICLE TEMPLATE*****/
.article-template .page-intro h2, .article-template .page-intro h4 {
  margin-bottom: 20px; }
.article-template .page-intro h4 {
  font-weight: 400; }
@media screen and (max-width: 500px) {
  .article-template .page-intro h2, .article-template .page-intro h4 {
    margin-bottom: 10px; } }

/*****HOME TEMPLATE*****/
.home {
  	/*.banner-container{
  
  		.copy.static{
  			padding-bottom: 0;
  		}
  	}*/
  /*>.banner-container{
  	margin-bottom: 89px;
  }*/ }
  .home .welcome-user .flex-row, .home .welcome-user .categories {
    max-width: 1200px; }
  .home .audi-free-plan-notification .flex-row, .home .audi-free-plan-notification .categories {
    max-width: 1170px; }

/*****PARENT PAGE TEMPLATE*****/
.parent-page > .banner-container {
  margin-bottom: 43px; }
  .parent-page > .banner-container img {
    margin-bottom: 25px; }
@media (max-width: 768px) {
  .parent-page {
    		/*.page-intro{
    			margin-bottom: 30px;
    
    			h1{
    				margin-bottom: 0;
    			}
    		}*/ }
    .parent-page > .banner-container {
      margin-bottom: 20px; } }

/*****AUDI FREEWAY PLAN TEMPLATE*****/
.audi-free-way-plan .banner-container {
  margin-bottom: 46px; }
.audi-free-way-plan .page-intro {
  margin-bottom: 77px; }
@media (max-width: 768px) {
  .audi-free-way-plan .page-intro {
    margin-bottom: 50px; }
    .audi-free-way-plan .page-intro h1 {
      margin-bottom: 20px; }
  .audi-free-way-plan .banner-container {
    margin-bottom: 30px; } }
@media screen and (max-width: 500px) {
  .audi-free-way-plan .page-intro {
    margin-bottom: 35px; }
  .audi-free-way-plan .banner-container {
    margin-bottom: 25px; } }

/*****AUDI SMAR SERVICE TEMPLATE*****/
.audi-smart-service .text-center .btn, .audi-smart-service .text-center .btn-primary {
  margin-bottom: 0;
  width: 100%; }
.audi-smart-service .banner-container {
  margin-bottom: 42px; }
@media (max-width: 768px) {
  .audi-smart-service .banner-container {
    margin-bottom: 22px; } }

/*****MY CAR LIST TEMPLATE*****/
.my-cars .banner-container {
  margin-bottom: 55px; }
.my-cars .page-intro {
  margin-bottom: 55px; }
  .my-cars .page-intro h6, .my-cars .page-intro h1 {
    margin-bottom: 10px; }
@media screen and (max-width: 1140px) {
  .my-cars .banner-container {
    margin-bottom: 35px; } }

/*****BOOK A SERVICE*****/
.book-a-service .banner-container {
  margin-bottom: 36px; }
.book-a-service .page-intro {
  padding-top: 0;
  padding-bottom: 0; }
.book-a-service .fieldset .flex {
  max-width: 685px; }
.book-a-service .two-col .flex-2 > div, .book-a-service .contact-container .my-details .flex-2 > div, .contact-container .book-a-service .my-details .flex-2 > div {
  margin-bottom: 50px; }
.book-a-service .calendar-copy {
  /*		padding-top: 55px;
  		padding-bottom: 60px;*/
  padding-top: 100px;
  padding-bottom: 100px;
  position: relative; }
  .book-a-service .calendar-copy .padded-container:before {
    content: "";
    position: absolute;
    bottom: -144px;
    width: 40px;
    height: 40px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    background-color: #ffffff; }
  .book-a-service .calendar-copy h5 {
    margin-bottom: 12px; }
  .book-a-service .calendar-copy p {
    margin-bottom: 20px; }
.book-a-service .three-col {
  padding-top: 77px;
  padding-bottom: 87px; }
  .book-a-service .three-col h5 {
    margin-bottom: 60px; }
  .book-a-service .three-col .checkbox-list .check-field, .book-a-service .three-col .checkbox-list .check-field:nth-last-child(n+2) {
    margin-bottom: 0; }
  .book-a-service .three-col .form-field .form-input {
    align-items: baseline; }
.book-a-service .confirm-booking {
  padding-top: 77px;
  padding-bottom: 80px; }
  .book-a-service .confirm-booking h5 {
    margin-bottom: 58px; }
  .book-a-service .confirm-booking .field-label {
    font-family: "Audi Type", AudiTypeExtended, Arial, sans-serif; }
  .book-a-service .confirm-booking .floated-two-col .form-input {
    width: 90%; }
  .book-a-service .confirm-booking .fieldset .flex {
    max-width: 840px; }
    .book-a-service .confirm-booking .fieldset .flex > div {
      width: 100%;
      flex-basis: 100%; }
@media (max-width: 640px) {
  .book-a-service .two-col .flex-2 > div, .book-a-service .contact-container .my-details .flex-2 > div, .contact-container .book-a-service .my-details .flex-2 > div {
    width: 100%;
    flex-basis: 100%;
    margin: 0 0 30px; }
  .book-a-service .vehicle-details .floated-two-col .col:last-of-type, .book-a-service .vehicle-details .floated-two-col .col, .book-a-service .floated-two-col .col:last-of-type, .book-a-service .floated-two-col .col {
    width: 100%;
    margin: 0 0 30px; }
  .book-a-service .form-input, .book-a-service .confirm-booking .floated-two-col .form-input {
    width: 100%; }
  .book-a-service .three-col .flex-2 > div {
    width: 100%;
    flex-basis: 100%; }
  .book-a-service .preferred-dealer .floated-two-col .col {
    width: 100%;
    margin-right: 0; }
    .book-a-service .preferred-dealer .floated-two-col .col:last-of-type {
      margin-left: 0; }
  .book-a-service .calendar .flex-split > div, .book-a-service .calendar .flex-split > div:last-of-type {
    width: 100%;
    flex-basis: 100%;
    margin: 0 0 30px; }
  .book-a-service .three-col .form-field .form-input {
    align-items: center; }
  .book-a-service .three-col .form-field:last-of-type .form-input {
    align-items: flex-end; }
  .book-a-service .three-col .form-field:first-of-type .form-input {
    align-items: flex-start; }
  .book-a-service .three-col, .book-a-service .confirm-booking {
    padding: 30px 0; }
    .book-a-service .three-col h5, .book-a-service .confirm-booking h5 {
      margin-bottom: 30px; } }

/*****CONTACT PAGE*****/
.contact-container .page-intro {
  padding-top: 97px;
  margin-bottom: 90px; }
  .contact-container .page-intro .padded-container {
    padding-top: 0;
    padding-bottom: 0; }
.contact-container .padded-container {
  padding-top: 70px;
  padding-bottom: 70px;
  margin-bottom: 0; }
  .contact-container .padded-container h5 {
    margin-bottom: 48px; }
.contact-container .flex-2 > div {
  display: flex;
  width: calc(100% - 22px);
  flex-basis: calc(100% - 22px);
  align-items: baseline;
  max-width: 680px; }
.contact-container .form-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 33.3%;
  margin-bottom: 0; }
  .contact-container .form-field .form-input {
    flex-direction: column;
    float: none;
    align-items: baseline; }
    .contact-container .form-field .form-input label {
      margin-bottom: 26px; }
  .contact-container .form-field .checkbox-list .check-field {
    margin-bottom: 40px; }
.contact-container .contact-method {
  align-items: baseline; }
.contact-container .my-details .padded-container .form-field {
  width: 100%; }
.contact-container .my-details .input {
  padding-right: 0; }
.contact-container .my-details .form-input {
  width: 100%; }
.contact-container .my-details .fieldset .flex {
  max-width: 685px;
  flex-direction: row; }
.contact-container .my-details .form-field.text-field, .contact-container .my-details .form-field.select-field {
  margin: 0 0 40px; }
  .contact-container .my-details .form-field.text-field:nth-of-type(3), .contact-container .my-details .form-field.text-field:nth-of-type(4), .contact-container .my-details .form-field.select-field:nth-of-type(3), .contact-container .my-details .form-field.select-field:nth-of-type(4) {
    margin-bottom: 0; }
.contact-container .news-letter .form-field .form-input {
  flex-direction: row;
  width: auto;
  align-items: center; }
  .contact-container .news-letter .form-field .form-input label {
    margin: 0 26px;
    line-height: 26px; }
.contact-container .confirm-booking .flex-2 > div {
  max-width: unset; }
.contact-container .confirm-booking .form-field {
  width: 50%; }
  .contact-container .confirm-booking .form-field .form-input {
    flex-direction: row; }
    .contact-container .confirm-booking .form-field .form-input label {
      margin-bottom: 0; }
.contact-container .subject label, .contact-container .subject textarea {
  display: block; }
.contact-container .subject label {
  margin-bottom: 47px; }
.contact-container .subject textarea {
  border: 1px solid #050708;
  width: 100%;
  max-width: 100%;
  min-height: 260px; }
.contact-container .car-to-service .flex-2 > div {
  max-width: unset; }
.contact-container .car-to-service .form-field {
  justify-content: center;
  width: 50%; }
  .contact-container .car-to-service .form-field .form-input {
    flex-direction: row;
    align-items: center;
    width: 300px; }
    .contact-container .car-to-service .form-field .form-input label {
      margin-bottom: 0; }
.contact-container .text-center.padded-container {
  padding-top: 0;
  padding-bottom: 0; }
@media screen and (max-width: 1080px) {
  .contact-container .page-intro {
    padding-top: 17px; } }
@media (max-width: 768px) {
  .contact-container .page-intro {
    padding-top: 0;
    margin: 30px 0; }
  .contact-container .padded-container {
    padding-top: 40px;
    padding-bottom: 40px; }
    .contact-container .padded-container h5 {
      margin-bottom: 28px; }
  .contact-container .car-to-service .flex-2 > div {
    flex-direction: column; }
  .contact-container .contact-method .form-field {
    align-items: center;
    margin-bottom: 0; }
    .contact-container .contact-method .form-field:first-of-type .form-input {
      align-items: flex-start; }
    .contact-container .contact-method .form-field:last-of-type .form-input {
      align-items: flex-end; }
    .contact-container .contact-method .form-field .form-input {
      align-items: center;
      width: 100%; }
  .contact-container .my-details .form-field.text-field, .contact-container .my-details .form-field.text-field:nth-child(n+2), .contact-container .my-details .form-field.select-field:nth-child(n+2) {
    margin: 0 0 30px; }
    .contact-container .my-details .form-field.text-field:last-of-type, .contact-container .my-details .form-field.text-field:nth-child(n+2):last-of-type, .contact-container .my-details .form-field.select-field:nth-child(n+2):last-of-type {
      margin-bottom: 0; }
  .contact-container .my-details .fieldset .flex {
    flex-direction: column; } }
@media screen and (max-width: 500px) {
  .contact-container .flex-2 > div, .contact-container .car-to-service .form-field {
    width: 100%;
    flex-basis: 100%; }
    .contact-container .flex-2 > div .form-input, .contact-container .car-to-service .form-field .form-input {
      width: 100%;
      flex-basis: 100%; }
    .contact-container .flex-2 > div .subject textarea, .contact-container .car-to-service .form-field .subject textarea {
      min-height: 100px; }
    .contact-container .flex-2 > div .subject label, .contact-container .car-to-service .form-field .subject label {
      margin-bottom: 27px; } }

/*****AUDI ASSIST*****/
.audi-assist .banner-container {
  margin-bottom: 55px; }
@media (max-width: 768px) {
  .audi-assist .page-intro h1 {
    margin-bottom: 20px; }
  .audi-assist .banner-container {
    margin-bottom: 20px; } }

/*****FIND A DEALER*****/
.find-dealer {
  padding-top: 90px;
  padding-bottom: 90px; }
  .find-dealer h1, .find-dealer h5, .find-dealer span, .find-dealer ul li, .find-dealer li, .find-dealer p {
    color: #ffffff; }
  .find-dealer .dealer-container {
    margin: 0 auto; }
  .find-dealer .flex {
    display: flex;
    flex-direction: row; }
  @media screen and (max-width: 1300px) {
    .find-dealer {
      padding-top: 70px;
      padding-bottom: 70px; }
      .find-dealer .flex {
        flex-direction: column; }
      .find-dealer .dealer-container {
        max-width: unset; }
      .find-dealer .dealer-left {
        width: 100%; }
      .find-dealer .dealer-right {
        display: none; } }
  @media screen and (max-width: 1300px) {
    .find-dealer .btn, .find-dealer .btn-primary, .find-dealer .btn-secondary, .find-dealer .btn-white {
      display: inline-block;
      margin: 0 20px  20px 0; }
    .find-dealer .flex-2 > div {
      width: 100%;
      flex-basis: 100%; } }

/*****OWNERS MANUAL*****/
.owners-manual .page-intro {
  padding-top: 47px;
  padding-bottom: 80px; }
  .owners-manual .page-intro p {
    margin-bottom: 50px; }
  .owners-manual .page-intro .aui-headline-3 {
    margin-bottom: 15.5px; }
  .owners-manual .page-intro .fieldset {
    max-width: 410px;
    margin-bottom: 67px; }
@media screen and (max-width: 1300px) {
  .owners-manual .page-intro {
    padding-bottom: 47px;
    margin-bottom: 0;
    padding-top: 0; }
    .owners-manual .page-intro .fieldset {
      max-width: 350px; } }
@media screen and (max-width: 500px) {
  .owners-manual .page-intro {
    padding-bottom: 30px; }
    .owners-manual .page-intro p {
      margin-bottom: 20px; }
    .owners-manual .page-intro .fieldset {
      max-width: unset;
      margin-bottom: 0; } }

/*****PROFILE PAGE*****/
.profile-container h5 {
  margin-bottom: 57px; }
.profile-container .banner-container {
  margin-bottom: 30px; }
.profile-container .fieldset {
  max-width: 680px; }
.profile-container .form-input {
  margin-bottom: 50px;
  float: none;
  width: auto; }
.profile-container .my-details {
  padding-top: 67px;
  padding-bottom: 55px; }
.profile-container .contact-details {
  margin-bottom: 0;
  padding-top: 50px;
  padding-bottom: 90px; }
@media (max-width: 640px) {
  .profile-container h5 {
    margin-bottom: 28px; }
  .profile-container .flex {
    flex-direction: column; }
  .profile-container .flex-2 > div {
    flex-basis: 100%;
    width: 100%; }
    .profile-container .flex-2 > div .form-input {
      flex-basis: 100%;
      width: 100%;
      margin-bottom: 30px; }
  .profile-container .my-details, .profile-container .address, .profile-container .communication, .profile-container .security, .profile-container .contact-details {
    padding-top: 37px;
    padding-bottom: 1px; } }

.address {
  padding-top: 45px;
  padding-bottom: 40px; }
  .address .flex-2 > div {
    width: 100%;
    flex-basis: 100%; }

.communication {
  padding-top: 50px;
  padding-bottom: 80px; }
  .communication .flex-2 > div {
    width: 25%;
    flex-basis: 25%;
    display: flex;
    flex-direction: row;
    justify-content: center; }
  .communication .fieldset {
    max-width: unset; }
    .communication .fieldset .field-label {
      margin-bottom: 60px; }
  .communication .form-input {
    margin-bottom: 0;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 20px;
    text-align: center; }
  .communication .flex {
    justify-content: space-evenly;
    align-items: unset; }
  .communication .flex-col:first-of-type .form-input {
    padding-left: 0; }
  .communication .flex-col:last-of-type .form-input {
    padding-right: 0; }
  @media screen and (max-width: 900px) {
    .communication .flex-2 > div {
      width: 50%;
      flex-basis: 50%;
      margin-bottom: 20px; }
    .communication .fieldset .field-label {
      margin-bottom: 20px; } }
  @media (max-width: 640px) {
    .communication .flex-2 > div {
      width: 100%;
      flex-basis: 100%; }
    .communication .fieldset .field-label {
      margin-bottom: 30px; }
    .communication .fieldset .form-input {
      max-width: unset;
      height: auto;
      padding: 0; } }

.security {
  padding-top: 67px;
  padding-bottom: 50px; }

/*# sourceMappingURL=styles.css.map */