@font-face {
    font-family: 'AudiTypeExtended';
    src: url('auditype_extendednormal.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'AudiTypeExtended';
    src: url('auditype_extendedbold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'AudiType';
    src: url('AudiTypeVF_4.033.ttf') format('truetype');
    font-weight: 100 900;
    font-stretch: 100% 130%;
    font-style: normal;
}

@keyframes grow-label {
    0% {
        width: 75%;
        font-size: var(--font2-size);
    }
        
    1% {
        width: 100%;
        font-size: var(--font1-size);
        transform: translateY(calc((var(--font1-size) - var(--font2-size)) / 2)) scale(0.75);
    }   

    100% {
        width: 100%;
        font-size: var(--font1-size);
        transform: translateY(calc((var(--font1-lineHeight) + (var(--font1-size) - var(--font2-size)) / 2)));
    }   
}

@keyframes shrink-label {
    0% {
        width: 100%;
        font-size: var(--font1-size);
        transform: translateY(calc((var(--font1-lineHeight) + (var(--font1-size) - var(--font2-size)) / 2)));
    }

    1% {
        width: 75%;
        font-size: var(--font2-size);
        transform: translateY(calc((var(--font1-lineHeight) + (var(--font1-size) - var(--font2-size)) / 2) - (var(--font1-size) - var(--font2-size)))) scale(1.3333333333333333);
    }
    
    100% {
        width: 75%;
        font-size: var(--font2-size);
    }
}

:root {
    --audi-red: #f50537;
    --easing: cubic-bezier(0.75, 0.02, 0.5, 1);
    --primary-border: #d9d9d9;
    --primary-default: #000;
    --primary-inverted: #fff;
    --primary-hover: #4c4c4c;
    --primary-hover-inverted: #b3b3b3;
    --secondary-default: #666666;
    --secondary-hover: #000;
    --font1-size: 16px;
    --font1-lineHeight: 24px;
    --font2-size: 12px;
    --font2-lineHeight: 20px;
    --svg-arrow-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13'%3E%3Cpath stroke='currentColor' stroke-width='1px' fill='none' d='M1.5,1l5.485,5.504l-5.48,5.496'%3E%3C/path%3E%3C/svg%3E");
    --svg-clear: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.9,17.1 L17.1,5.9 M5.9,5.9 L17.1,17.1' stroke='currentColor' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
    --svg-facebook: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M12.97 19.94a8 8 0 1 0-2.9-.17v-5.33H8.42V12h1.65v-1.05c0-2.73 1.23-3.99 3.9-3.99.51 0 1.39.1 1.74.2v2.22a9.92 9.92 0 0 0-.92-.03c-1.31 0-1.82.5-1.82 1.79V12h2.62l-.45 2.44h-2.17v5.5Z' style='fill: %23ffffff;'/%3E%3C/svg%3E");
    --svg-geofence: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M11.5 1.8h.01c3.57.1 6.5 3.23 6.29 6.72 0 .9-.4 2.1-.95 3.33a39.86 39.86 0 0 1-2.02 3.85 75.97 75.97 0 0 1-2.85 4.49l-.05.07-.02.02-.41-.28-.41.29v-.01l-.02-.02-.05-.07a47.4 47.4 0 0 1-.84-1.26 75.92 75.92 0 0 1-2.01-3.23 39.86 39.86 0 0 1-2.02-3.85A9.24 9.24 0 0 1 5.2 8.5a6.59 6.59 0 0 1 6.28-6.71h.02Zm0 18.2-.41.29.41.58.41-.58-.41-.29Zm0-.89a75.8 75.8 0 0 0 2.47-3.91 38.87 38.87 0 0 0 1.97-3.76c.54-1.22.86-2.25.86-2.94v-.03a5.52 5.52 0 0 0-5.3-5.67 5.59 5.59 0 0 0-5.3 5.68v.02c0 .69.32 1.72.86 2.94.54 1.2 1.25 2.53 1.97 3.76a74.92 74.92 0 0 0 2.47 3.91Zm0-12.61c-1.12 0-2 .88-2 2s.88 2 2 2 2-.88 2-2-.88-2-2-2Zm-3 2c0-1.68 1.32-3 3-3s3 1.32 3 3-1.32 3-3 3-3-1.32-3-3ZM2.07 20.62c-.24.22-.27.35-.27.38 0 .07.06.27.54.55.45.27 1.13.52 2.02.74 1.76.44 4.22.71 6.94.71 2.72 0 5.2-.27 7-.71.9-.22 1.59-.48 2.04-.74.5-.29.56-.49.56-.55 0-.04-.03-.17-.27-.38a4.3 4.3 0 0 0-1.11-.63c-1-.43-2.46-.8-4.18-1l.12-.99c1.78.2 3.33.6 4.45 1.06.55.24 1.03.5 1.37.8.33.3.62.68.62 1.14 0 .64-.51 1.1-1.05 1.41-.58.34-1.38.62-2.32.85-1.89.46-4.45.74-7.23.74-2.78 0-5.32-.28-7.18-.74a8.8 8.8 0 0 1-2.29-.85C1.3 22.1.8 21.63.8 21c0-.47.29-.85.62-1.14.35-.3.83-.56 1.4-.8 1.15-.47 2.74-.85 4.63-1.06l.1 1c-1.82.2-3.32.56-4.35.99-.51.21-.89.43-1.13.63Z'/%3E%3C/svg%3E");
    --svg-instagram: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M12.67 6c1.03 0 1.26.01 1.8.04a4.4 4.4 0 0 1 1.46.28c.4.15.73.35 1.06.69.34.33.54.67.7 1.06.14.38.24.82.27 1.46.03.64.04.84.04 2.47 0 1.63 0 1.83-.04 2.47a4.4 4.4 0 0 1-.28 1.46c-.15.4-.35.73-.69 1.06-.33.34-.67.54-1.06.7a4.4 4.4 0 0 1-1.46.27c-.64.03-.84.04-2.47.04-1.63 0-1.83 0-2.47-.04a4.4 4.4 0 0 1-1.46-.28c-.4-.15-.73-.35-1.06-.69a2.94 2.94 0 0 1-.7-1.06 4.4 4.4 0 0 1-.27-1.46C6 13.93 6 13.7 6 12.67v-1.34c0-1.03.01-1.26.04-1.8a4.4 4.4 0 0 1 .27-1.46c.16-.4.36-.73.7-1.06.33-.34.67-.54 1.06-.7a4.4 4.4 0 0 1 1.46-.27c.54-.03.77-.04 1.8-.04h1.34Zm0 1.08h-1.33c-1.01 0-1.23.01-1.76.04-.59.02-.9.12-1.12.2a1.96 1.96 0 0 0-1.14 1.15c-.08.2-.18.52-.2 1.1-.03.54-.04.76-.04 1.77v1.32c0 1.01.01 1.23.04 1.76.02.59.12.9.2 1.12a1.96 1.96 0 0 0 1.15 1.14c.2.08.52.18 1.1.2.54.03.76.04 1.77.04h1.32c1.01 0 1.23-.01 1.76-.04.59-.02.9-.12 1.12-.2a1.96 1.96 0 0 0 1.14-1.15c.08-.2.18-.52.2-1.1.03-.54.04-.76.04-1.77v-1.32c0-1.01-.01-1.23-.04-1.76-.02-.59-.12-.9-.2-1.12a1.88 1.88 0 0 0-.45-.69 1.86 1.86 0 0 0-.7-.45 3.32 3.32 0 0 0-1.1-.2c-.54-.03-.76-.04-1.77-.04ZM12 8.92a3.08 3.08 0 1 1 0 6.16 3.08 3.08 0 0 1 0-6.16ZM12 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm3.2-1.92a.72.72 0 1 1 0 1.44.72.72 0 0 1 0-1.44Z' style='fill: %23ffffff;'/%3E%3C/svg%3E");
    --svg-linkedin: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M17.1 6H6.9c-.5 0-.9.4-.9.9v10.3c0 .4.4.8.9.8h10.2c.5 0 .9-.4.9-.9V6.9c0-.5-.4-.9-.9-.9M9.6 16.2H7.8v-5.7h1.8zm-.9-6.5a1 1 0 0 1 0-2c.5 0 1 .5 1 1 0 .6-.5 1-1 1m7.5 6.5h-1.8v-2.8c0-.7 0-1.5-.9-1.5s-1.1.7-1.1 1.5v2.8h-1.8v-5.7h1.7v.8c.2-.4.8-.9 1.7-.9 1.8 0 2.1 1.2 2.1 2.7v3.1z' style='fill: %23ffffff;'/%3E%3C/svg%3E");
    --svg-location: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='none' stroke='currentColor' d='M11.5 17v6zm0-17v6zM23 11.5h-6zm-17 0H0zm14.5 0c0 5-4 9-9 9s-9-4-9-9 4-9 9-9 9 4 9 9z'%3E%3C/path%3E%3C/svg%3E");
    --svg-search: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22,22 L13.7,13.7 L22,22 Z M15.5,9 C15.6,12.5 12.9,15.4 9.4,15.5 C9.3,15.5 9.1,15.5 9,15.5 C5.4,15.5 2.5,12.6 2.5,9 C2.5,5.4 5.4,2.5 9,2.5 C12.6,2.5 15.5,5.4 15.5,9 C15.5,9 15.5,9 15.5,9 Z' stroke='currentColor' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
    --svg-voice-call-1: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M5.42 2.9c.14.04.3.11.43.25l3 3c.14.13.2.3.24.43a1.56 1.56 0 0 1 0 .84c-.03.14-.1.3-.24.43l-1 1c0 .05.02.12.06.21.2.53.9 1.64 3.04 3.79l.5.5c2.1 2.09 3.25 2.8 3.84 3 .22.08.33.08.37.08l1.5-1.3a1 1 0 0 1 .42-.22 1.56 1.56 0 0 1 .84 0c.14.03.3.1.43.24l3 3c.14.13.2.3.24.43a1.56 1.56 0 0 1 0 .85.8.8 0 0 1-.24.42v.01l-4.27 4.06-.33-.18A50.2 50.2 0 0 1 4.6 13.4 49.79 49.79 0 0 1 .3 7.79l-.02-.02v-.01L.7 7.5l-.43.26-.2-.33 4.08-4.28c.13-.14.3-.2.43-.24a1.56 1.56 0 0 1 .84 0ZM1.33 7.57a22.53 22.53 0 0 0 .85 1.25c.71.98 1.77 2.36 3.17 3.93 2.74 3.09 6.8 6.9 12.07 9.94l3.7-3.52.01-.01a.57.57 0 0 0 .02-.15.57.57 0 0 0-.02-.17l-2.96-2.96h-.02a.57.57 0 0 0-.15-.02.57.57 0 0 0-.17.02l-1.47 1.28a.88.88 0 0 1-.4.23c-.26.08-.59.06-1-.08-.81-.3-2.1-1.14-4.21-3.25l-.5-.5c-2.16-2.15-3-3.39-3.28-4.14-.14-.38-.17-.7-.05-.98a.76.76 0 0 1 .27-.33l.94-.93v-.02A.57.57 0 0 0 8.15 7a.57.57 0 0 0-.02-.17L5.17 3.87h-.02A.57.57 0 0 0 5 3.85a.57.57 0 0 0-.16.02l-3.5 3.7Zm16.85 8.32Z'/%3E%3C/svg%3E");
    --svg-weblink: url("data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='currentColor' d='M16.1 7h1.2l1.1 2.7 1-2.7h1.3l1 2.7L22.8 7H24l-1.7 3.8H21l-1-2.6-1 2.6h-1.3L16.1 7ZM8 7h1.2l1.1 2.7 1-2.7h1.3l1 2.7L14.8 7H16l-1.7 3.8H13l-1-2.6-1 2.6H9.7L8 7ZM0 7h1.2l1.1 2.7 1-2.7h1.3l1 2.7L6.7 7h1.2l-1.7 3.8H5L4 8.2l-1 2.6H1.7L0 7Zm16.43 5.15 4.86 1.99-.38.92-3.3-1.35 2.65 6.6-.93.38-2.64-6.56-1.33 3.26-.92-.38 1.99-4.86Z'/%3E%3C/svg%3E");
    --svg-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M13.59 10.94 18.65 5H16.3l-3.8 4.47L9.22 5H4.5l5.6 7.64L4.76 19h2.3l4.16-4.89L14.83 19h4.67zM7.17 6.35h1.37L16.8 17.6h-1.27z' style='fill: %23ffffff;'/%3E%3C/svg%3E"); 
    --svg-youtube: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M18.9 9.1s-.1-1-.6-1.4c-.5-.6-1.1-.6-1.4-.6C14.9 7 12 7 12 7s-2.9 0-4.9.1c-.3 0-.9 0-1.4.6-.4.4-.6 1.4-.6 1.4S5 10.2 5 11.3v1.1c0 1.1.1 2.3.1 2.3s.1 1 .6 1.4c.5.6 1.2.5 1.5.6 1.1.1 4.8.1 4.8.1s2.9 0 4.9-.1c.3 0 .9 0 1.4-.6.4-.4.6-1.4.6-1.4s.1-1.1.1-2.3v-1.1c0-.7-.1-1.5-.1-2.2m-8.3 4.6V9.8l3.8 2z' style='fill: %23ffffff;'/%3E%3C/svg%3E");
}

* {
    padding: 0;
    margin: 0;
}

a,
.d2-form a{
    color: var(--primary-default);
    text-decoration: none;
}

a:hover,
.d2-form a:hover {
    color: var(--primary-hover);
    text-decoration: none;
}

body {
    font-family: AudiType, sans-serif;
    color: var(--primary-default);
    font-stretch: 105%;
}

body, html {
    font-size: 16px;
}

ul, label {
    margin-bottom: 0;
}

#dealership-list > :not(:last-child) {
    border-bottom: 1px solid var(--primary-border);
}

.btn-audi-primary {
    display: inline-block;
    background-color: var(--primary-default);
    color: var(--primary-inverted);
    cursor: pointer;
    padding: 1em 2em;
    border: medium;
    text-decoration: none;
    font-stretch: 105%;
    font-family: AudiType, sans-serif;
    transition-timing-function: var(--easing);
    transition-duration: 0.25s;
    transition-property: color, background-color, box-shadow;
    box-shadow: inset 0 0 0 1px var(--primary-default);
}

.btn-audi-primary:hover {
    color: var(--primary-inverted);
    background-color: var(--primary-hover);
    cursor: pointer;
    text-decoration: none;
    box-shadow: inset 0 0 0 1px var(--primary-hover);
}

.btn-audi-primary-inverted {
    display: inline-block;
    background-color: var(--primary-inverted);
    color: var(--primary-default);
    cursor: pointer;
    padding: 1em 2em;
    border: medium;
    text-decoration: none;
    font-stretch: 105%;
    font-family: AudiType, sans-serif;
    transition-timing-function: var(--easing);
    transition-duration: 0.25s;
    transition-property: color, background-color, box-shadow;
    box-shadow: inset 0 0 0 1px var(--primary-inverted);
}

.btn-audi-primary-inverted:hover {
    color: var(--primary-default);
    background-color: var(--primary-hover-inverted);
    cursor: pointer;
    text-decoration: none;
    box-shadow: inset 0 0 0 1px var(--primary-hover-inverted);
}

.btn-audi-secondary {
    display: inline-block;
    background-color: var(--primary-inverted);
    color: var(--primary-default);
    cursor: pointer;
    padding: 1em 2em;
    border: medium;
    text-decoration: none;
    font-stretch: 105%;
    font-family: AudiType, sans-serif;
    transition-timing-function: var(--easing);
    transition-duration: 0.25s;
    transition-property: color, background-color, box-shadow;
    box-shadow: inset 0 0 0 1px var(--primary-default);
}

.btn-audi-secondary:hover {
    color: var(--primary-hover);
    background-color: var(--primary-inverted);
    cursor: pointer;
    text-decoration: none;
    box-shadow: inset 0 0 0 1px var(--primary-hover);
}

.btn-audi-secondary-inverted {
    display: inline-block;
    background-color: transparent;
    color: var(--primary-inverted);
    cursor: pointer;
    padding: 1em 2em;
    border: medium;
    text-decoration: none;
    font-stretch: 105%;
    font-family: AudiType, sans-serif;
    transition-timing-function: var(--easing);
    transition-duration: 0.25s;
    transition-property: color, background-color, box-shadow;
    box-shadow: inset 0 0 0 1px var(--primary-inverted);
}

.btn-audi-secondary-inverted:hover {
    color: var(--primary-hover-inverted);
    background-color: transparent;
    cursor: pointer;
    text-decoration: none;
    box-shadow: inset 0 0 0 1px var(--primary-hover-inverted);
}

.btn-audi-text {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    color: var(--primary-default);
    font-stretch: 105%;
    font-family: AudiType, sans-serif;
    text-decoration: none;
    transition: color 0.25s var(--easing);
}

.btn-audi-text > :first-child {
    margin-left: 4px;
    background-color: var(--primary-default);
    transition-timing-function: var(--easing);
    transition-duration: 0.25s;
    transition-property: background-color, transform;
}

.btn-audi-text:hover {
    color: var(--primary-hover);
    cursor: pointer;
    text-decoration: none;
}

.btn-audi-text:hover > :first-child {
    background-color: var(--primary-hover);
    transform: translateX(5px);
}

.container-1440 {
    max-width: 1440px;
    margin: 0 auto;
    padding: 5em 28px;
    line-height: 1.8;
}

.container-1440 h2 {
    font-stretch: 130%;
    font-size: 20px;
    line-height: 32px;
    margin-bottom: 1em;
}

.container-1440 p {
    margin: 1em 0 1.5em 0;
}

.container-1440 ul,
.container-1440 ol {
    margin: 0 0 1.5em 1.25em;
}

.container-banner-600 {
    position: relative;
    margin: 0 auto;
    max-width: 1920px;
}

.container-banner-600 h1 {
    position: absolute;
    padding: 28px 28px 28px 28px;
    color: var(--primary-inverted);
    font-stretch: 130%;
    font-size: 28px;
    line-height: 44px;
}

.container-banner-600 img {
    width: 100%;
    height: 600px;
    object-fit: cover;
}

.container-details {
    display: flex;
    justify-content: space-between;
    padding: 1rem 0;
    font-family: AudiType, sans-serif;
    font-stretch: 105%;
}

.container-search-field {
    display: grid;
    grid-template-columns: 24px 1fr 24px;
    align-items: center;
    position: relative;
    border-bottom: 1px solid #333333;
}

.container-search-field > :first-child {
    grid-column: 1;
    grid-row: 1;
    z-index: 10;
    margin: 4px 0 8px 0;
}

.container-search-field:focus-within label {
    opacity: 0;
}

.container-search-field > label,
.container-search-field > input {
    grid-column: 1 / 4;
    grid-row: 1;
    padding: 4px 36px 8px 36px;
}

.container-search-field > label {
    z-index: 20;
    opacity: 1;
    cursor: text;
    transition-timing-function: var(--easing);
    transition-duration: 0.25s;
    transition-property: opacity;
}

.container-search-field > input {
    border: none;
}

.container-search-field > input:focus {
    border: none;
}

.container-search-field:has(input:not(:placeholder-shown)) label {
    opacity: 0;
}

.container-search-field > input:not(:placeholder-shown) + .icon-clear {
    display: block;
    z-index: 30;
    cursor: pointer;
}

.container-search-field > :last-child {
    display: none;
    position: absolute;
    top: 4px;
    right: 0;
    cursor: pointer;
}

.container-socials {
    display: flex;
    align-items: center;
    column-gap: 8px;
    flex-wrap: wrap;
}

.icon-arrow-r {
    -webkit-mask: var(--svg-arrow-r);
    mask: var(--svg-arrow-r);
    height: 13px;
    width: 8px;
}

.back-color-prim {
    background-color: var(--primary-default);
    transition: background-color 0.25s var(--easing);
}

.link-icon:hover .back-color-prim {
    background-color: var(--primary-hover);
}

.icon-clear {
    background-image: var(--svg-clear);
    height: 24px;
    width: 24px;
}

.icon-facebook {
    background-image: var(--svg-facebook);
    height: 24px;
    width: 24px;
}

.icon-geofence {
    -webkit-mask: var(--svg-geofence);
    mask: var(--svg-geofence);
    height: 24px;
    width: 24px;
}

.icon-instagram {
    background-image: var(--svg-instagram);
    height: 24px;
    width: 24px;
}

.icon-linkedin {
    background-image: var(--svg-linkedin);
    height: 24px;
    width: 24px;
}

.icon-location {
    background-image: var(--svg-location);
    height: 24px;
    width: 24px;
}

.icon-search {
    background-image: var(--svg-search);
    height: 24px;
    width: 24px;
}

.icon-voice-call-1 {
    -webkit-mask: var(--svg-voice-call-1);
    mask: var(--svg-voice-call-1);
    height: 24px;
    width: 24px;
}

.icon-weblink {
    -webkit-mask: var(--svg-weblink);
    mask: var(--svg-weblink);
    height: 24px;
    width: 24px;
}

.icon-x {
    background-image: var(--svg-x);
    height: 24px;
    width: 24px;
}

.icon-youtube {
    background-image: var(--svg-youtube);
    height: 24px;
    width: 24px;
}

.link-icon {
    margin-bottom: 6px;
    font-size: 14px;
    color: var(--primary-default);
    display: flex;
    align-items: center;
    transition: color 0.25s cubic-bezier(0.75, 0.02, 0.5, 1);
}

.link-icon:hover {
    color: var(--primary-hover);
    text-decoration: none;
}

.link-icon > :first-child {
    margin-right: 12px;
}

.link-socials {
    width: 56px;
    height: 56px;
    background-color: var(--primary-default);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background-color 0.25s cubic-bezier(0.75, 0.02, 0.5, 1);
}

.link-socials:hover {
    background-color: var(--primary-hover);
    text-decoration: none;
}

.container-marker {
    color: #fff;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

.marker {
    width: 100%;
    height: 80%;
    padding: 0 4px;
    background-color: #000;
    display: flex;
}

.marker::after {
    content: "";
    width: 12px;
    height: 12px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    bottom: 6px;
    background: inherit;
    z-index: -1;
}

.sans {
    font-stretch: 105%;
    font-family: AudiType, sans-serif;
}

.stretch-130 {
    font-stretch: 130%;
}

#nav-audi {
    margin: 1.5rem 1.75rem;
    display: flex;
}

#icon-nav {
    height: 24px;
    margin-right: 2rem;
}

#nav-audi ul {
    display: flex;
    gap: 1.5rem;
    list-style: none;
}

#nav-audi a {
    color: var(--secondary-default);
    text-decoration: none;
}

#nav-audi a:hover {
    color: var(--secondary-hover);
    text-decoration: none;
}

.container-flex-768 {
    display: block;
    height: auto;
}

.container-sidebar {
    width: 100%;
    overflow-y: auto;
}

.sidebar-section {
    padding: 1.5rem 2rem;
}


/*---------------- FOOTER -----------------*/

.footer-content {
    background-color: #000;
    color: #fff;
    font-size: 12px;
    padding: 24px 28px 36px;
}

.footer-content a {
    color: var(--primary-inverted);
    text-decoration: none;
}

.footer-content a:hover {
    color: var(--primary-border);
    text-decoration: none;
}

.legal-links {
    padding-top: 24px;
    border-top: 1px solid #333333;
}

.legal-links a {
    padding-right: 24px;
}

/*---------------- END FOOTER -----------------*/


@media (min-width: 768px) {
    #nav-audi {
        margin-left: 2.5rem;
        margin-right: 2.5rem;
    }

    .container-1440 {
        padding-left: 40px;
        padding-right: 40px;
    }

    .container-1440 h2 {
        font-size: 36px;
        line-height: 52px;
    }

    .container-banner-600 h1 {
        font-size: 44px;
        line-height: 68px;
        padding: 44px 96px 0 96px;
    }

    .container-flex-768 {
        display: flex;
        height: calc(100vh - 72px);
    }

    .container-sidebar {
        width: 375px;
        overflow-y: auto;
        flex-shrink: 0;
        z-index: 1;
        box-shadow: rgba(0, 0, 0, 0.28) 0px 2px 4px 0px, rgba(0, 0, 0, 0.16) 0px 0px 6px 0px;
    }

    .container-socials {
        column-gap: 4px;
        justify-content: flex-end;
    }

    .footer-content {
        padding: 24px 96px 52px 96px;
    }

}

@media (min-width: 1024px) {
    #nav-audi {
        margin-left: 3.75rem;
        margin-right: 3.75rem;
    }

    .container-1440 {
        padding-left: 60px;
        padding-right: 60px;
    }
}

@media (min-width: 1024px) {
    #nav-audi {
        margin-left: 6rem;
        margin-right: 6rem;
    }
}