@charset "UTF-8"; /** * Returns multiple unit * @param {number (unitless)} $multiple * @return {number (rem)} */ /** * Convert pixels to ems * eg. for a relational value of 12px write em(12) when the parent is equal * the em-base (defined in $audui-config). * If the parent is another value say 24px write em(12, 24) * @param {number (px)} $val * @param {number} $base * @return {number (em)} */ /** * Convert pixels to rems * Assumes that the defined em-base is the font-size of * @param {number (px)} $val * @param {number} $base * @return {number (rem)} */ /** * Strips the unit from a number. * @param {number (with unit)} $value * @return {number (unitless)} */ /** * Modular Scale */ /** * Animation & Transitions */ /** * Colors */ /** * Font */ /** * Icons */ /** * SVG */ /** * Breakpoints */ /** * Card Component */ /** * Form Field Components, like Textfield */ /** * Grid Component */ /** * Visibility Component */ /** * z-index */ .aui-js .aui-checkbox__input, .aui-js .aui-radio__input, .aui-switch .aui-switch__input { -webkit-appearance: none; -moz-appearance: none; appearance: none; position: absolute; width: 0; height: 0; overflow: hidden; margin: 0; padding: 0; border: 0; outline: 0; opacity: 0; z-index: -1; } .aui-alert { position: relative; transition: height 0.3s cubic-bezier(0.75, 0.02, 0.5, 1); font-size: 14px; line-height: 20px; } @media (min-width: 740px) { .aui-alert { font-size: 14px; line-height: 20px; } } @media (min-width: 1264px) { .aui-alert { font-size: 15px; line-height: 24px; } } @media (min-width: 1584px) { .aui-alert { font-size: 16px; line-height: 24px; } } .aui-alert__content { position: relative; color: inherit; background: inherit; margin-right: 27px; padding: 1.25rem 3.5rem 1.25rem 1.75rem; transition: box-shadow 0.3s cubic-bezier(0.75, 0.02, 0.5, 1), -webkit-transform 0.3s cubic-bezier(0.75, 0.02, 0.5, 1); transition: transform 0.3s cubic-bezier(0.75, 0.02, 0.5, 1), box-shadow 0.3s cubic-bezier(0.75, 0.02, 0.5, 1); transition: transform 0.3s cubic-bezier(0.75, 0.02, 0.5, 1), box-shadow 0.3s cubic-bezier(0.75, 0.02, 0.5, 1), -webkit-transform 0.3s cubic-bezier(0.75, 0.02, 0.5, 1); } .aui-alert__close { position: absolute; top: 1.25rem; right: 1.75rem; width: 17px; height: 17px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' %3E%3Cpath fill='%23333333' d='M8.487,7.78l7.78,-7.777c0.235,0.236 0.471,0.472 0.707,0.707l-7.78,7.777l7.777,7.78l-0.708,0.707l-7.776,-7.78l-7.78,7.777l-0.707,-0.708l7.78,-7.776l-7.777,-7.78l0.707,-0.707l7.777,7.78Z' /%3E%3C/svg%3E") center center no-repeat; cursor: pointer; vertical-align: middle; outline: none; box-sizing: border-box; border: none; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } .aui-alert.aui-color-text-light .aui-alert__close, .aui-alert.aui-color-text-warning .aui-alert__close { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' %3E%3Cpath fill='%23f2f2f2' d='M8.487,7.78l7.78,-7.777c0.235,0.236 0.471,0.472 0.707,0.707l-7.78,7.777l7.777,7.78l-0.708,0.707l-7.776,-7.78l-7.78,7.777l-0.707,-0.708l7.78,-7.776l-7.777,-7.78l0.707,-0.707l7.777,7.78Z' /%3E%3C/svg%3E"); } .aui-alert--sticky .aui-alert__content { position: fixed; top: 0; left: 0; width: 100%; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05), 0 0 50px 0 rgba(0, 0, 0, 0.07); z-index: 1700; } .aui-alert.is-open .aui-alert__content { -webkit-transform: translateY(0); transform: translateY(0); } .aui-alert.is-closed { overflow: hidden; height: 0 !important; } .aui-alert.is-closed .aui-alert__content { box-shadow: none; -webkit-transform: translateY(-100%); transform: translateY(-100%); } .aui-audioplayer { padding: 1.25rem; } .aui-audioplayer__controls { line-height: 23px; order: 1; } .aui-audioplayer__controls .aui-button-group { flex-flow: row nowrap; } .aui-audioplayer__controls--secondary { margin-top: 1rem; order: 2; } .aui-audioplayer__chrome { align-items: center; display: flex; flex-direction: column; height: 100%; justify-content: space-between; vertical-align: middle; } .aui-audioplayer__cover { background-color: #e5e5e5; display: none; min-height: 100px; min-width: 100px; } .aui-audioplayer__meta { font-size: 0.875rem; line-height: 1; margin-bottom: 1rem; order: 0; width: 100%; } .aui-audioplayer__time { font-size: 0.75rem; margin-top: 0.25rem; } .aui-audioplayer__title { margin-bottom: 0.25rem; } .aui-audioplayer__icon-previous .audiicon-small, .aui-audioplayer__icon-next .audiicon-small { visibility: visible; } .aui-audioplayer__icon-previous .audiicon-large, .aui-audioplayer__icon-next .audiicon-large { visibility: hidden; } .aui-audioplayer__icon-pause .audiicon-small, .aui-audioplayer__icon-play .audiicon-small { visibility: hidden; } .aui-audioplayer__icon-pause .audiicon-large, .aui-audioplayer__icon-play .audiicon-large { visibility: visible; } .aui-audioplayer__icon-exit-fullscreen, .aui-audioplayer__icon-pause, .aui-audioplayer__icon-replay, .aui-audioplayer__icon-unmute { display: none; } .aui-audioplayer.is-controlled .aui-audioplayer__chrome, .aui-audioplayer:hover .aui-audioplayer__chrome { -webkit-transform: translateY(0); transform: translateY(0); } .aui-audioplayer.is-seeking .aui-audioplayer__seek-holder { opacity: 1; transition-delay: .1s; } .aui-audioplayer.is-seeking .aui-audioplayer__preview { opacity: 1; transition-delay: .1s; } .aui-audioplayer.is-seeking.aui-player--preview .aui-audioplayer__chrome::after { transition-delay: 0s; } .aui-audioplayer.is-mute .aui-audioplayer__icon-mute { display: none; } .aui-audioplayer.is-mute .aui-audioplayer__icon-unmute { display: inline-block; } .aui-audioplayer.is-playing .aui-audioplayer__icon-play { display: none; } .aui-audioplayer.is-playing .aui-audioplayer__icon-pause { display: inline-block; } .aui-audioplayer.is-complete .aui-audioplayer__icon-pause, .aui-audioplayer.is-complete .aui-audioplayer__icon-play { display: none; } .aui-audioplayer.is-complete .aui-audioplayer__icon-replay { display: inline-block; } .aui-audioplayer .aui-slider { min-height: 1.25rem; } .aui-audioplayer .aui-slider__handle { height: 1.25rem; width: 1.25rem; } .aui-audioplayer .aui-slider__target { height: 1.25rem; margin-left: 0.625rem; margin-right: 0.625rem; } @media (min-width: 740px) { .aui-audioplayer { padding: 1.25rem 1rem 1.25rem 0px; } .aui-audioplayer--frameless { padding: 0px 1rem 0px 0px; } .aui-audioplayer__controls { margin-left: 1rem; } .aui-audioplayer__controls--secondary { margin-top: 0; } .aui-audioplayer__chrome { flex-direction: row; } .aui-audioplayer__cover { display: block; } .aui-audioplayer__meta { margin-bottom: 0; margin-left: 1rem; margin-top: 0; order: 2; } .aui-audioplayer__playhead { width: 1.25rem; height: 1.25rem; } } .aui-animation-morph-in, .aui-animation-morph-out { transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1); transition-duration: .6s; } .aui-no-transition { transition: none !important; } body::before { content: 'default'; display: none; } @media (min-width: 480px) { body::before { content: "tiny"; } } @media (min-width: 600px) { body::before { content: "xsmall"; } } @media (min-width: 740px) { body::before { content: "small"; } } @media (min-width: 960px) { body::before { content: "medium"; } } @media (min-width: 1264px) { body::before { content: "large"; } } @media (min-width: 1424px) { body::before { content: "xlarge"; } } @media (min-width: 1584px) { body::before { content: "huge"; } } @-moz-viewport { width: device-width; } @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } @-webkit-viewport { width: device-width; } @viewport { width: device-width; } .aui-badge { display: inline-block; width: 24px; height: 24px; font-size: 13px; line-height: 24px; border-radius: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; transition: visibility 0.25s cubic-bezier(0.75, 0.02, 0.5, 1), color 0.25s cubic-bezier(0.75, 0.02, 0.5, 1) 0.1s, -webkit-transform 0.25s cubic-bezier(0.75, 0.02, 0.5, 1); transition: transform 0.25s cubic-bezier(0.75, 0.02, 0.5, 1), visibility 0.25s cubic-bezier(0.75, 0.02, 0.5, 1), color 0.25s cubic-bezier(0.75, 0.02, 0.5, 1) 0.1s; transition: transform 0.25s cubic-bezier(0.75, 0.02, 0.5, 1), visibility 0.25s cubic-bezier(0.75, 0.02, 0.5, 1), color 0.25s cubic-bezier(0.75, 0.02, 0.5, 1) 0.1s, -webkit-transform 0.25s cubic-bezier(0.75, 0.02, 0.5, 1); vertical-align: middle; } .aui-badge.is-hidden { -webkit-transform: scale(0); transform: scale(0); color: transparent !important; transition-delay: 0s; visibility: hidden; } .aui-badge--small { text-indent: 100%; -webkit-transform: scale(0.25); transform: scale(0.25); } .aui-badge--small-text { font-size: 10px; } .aui-badge.aui-color-text-light { color: #ffffff; stroke: #ffffff; fill: #ffffff; } .aui-breadcrumb { display: block; overflow: hidden; position: relative; padding-top: 0.25rem; color: rgba(0, 0, 0, 0.5); font-size: 0.6875rem; line-height: 1rem; font-weight: 400; } .aui-breadcrumb__items { display: block; overflow: hidden; white-space: nowrap; list-style: none; padding: 0; } .aui-breadcrumb__item { display: inline-block; max-width: 10em; overflow: hidden; text-overflow: ellipsis; } .aui-breadcrumb__item:last-child { color: black; max-width: 22em; } .aui-breadcrumb__item + .aui-breadcrumb__item::before { content: ''; display: inline-block; margin-left: .5em; margin-right: .7em; width: 0.3125rem; height: 0.5rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='8' viewBox='0 0 5 8'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='1px' fill='none' d='M0.5,0.5l3.24,3.252l-3.237,3.247' /%3E%3C/svg%3E") center center no-repeat; } .aui-breadcrumb__action { transition: color .15s linear; } .aui-breadcrumb__action:hover { color: #000; } .aui-breadcrumb.is-oversized::after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 40px; height: 100%; background: linear-gradient(to right, #ffffff 5%, rgba(255, 255, 255, 0) 100%); } .aui-button.is-active, .aui-button:active, .aui-button:hover, .aui-button:visited { color: #4c4c4c; stroke: #4c4c4c; fill: #4c4c4c; } .aui-button { cursor: pointer; display: inline-block; position: relative; padding: 0.86667em 0 0.8em; outline: 0; font-family: inherit; font-size: 0.9375rem; font-weight: 400; line-height: 1.5rem; text-align: center; text-decoration: none; white-space: normal; vertical-align: middle; transition: all 0.3s cubic-bezier(0.75, 0.02, 0.5, 1); -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } .aui-button, .aui-button.is-disabled, .aui-button:disabled { color: #000000; stroke: #000000; fill: #000000; border: 1px solid transparent; background: transparent; } .aui-button.is-disabled, .aui-button:disabled { cursor: not-allowed; opacity: 0.30; } .aui-button--bold { font-weight: 700; } .aui-button--padded, .aui-button--primary, .aui-button--secondary { padding-left: 2.13333em; padding-right: 2.13333em; } .aui-button--icon:focus, .aui-button--primary:focus, .aui-button--secondary:focus { box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1); } .aui-button--icon.is-disabled, .aui-button--icon:disabled, .aui-button--icon:hover, .aui-button--primary.is-disabled, .aui-button--primary:disabled, .aui-button--primary:hover, .aui-button--secondary.is-disabled, .aui-button--secondary:disabled, .aui-button--secondary:hover { box-shadow: none; } .aui-button--floating.is-active, .aui-button--floating:active, .aui-button--floating:hover, .aui-button--primary.is-active, .aui-button--primary:active, .aui-button--primary:hover { border-color: #333333; background-color: #333333; } .aui-button--floating, .aui-button--floating.is-active, .aui-button--floating:active, .aui-button--floating:hover, .aui-button--floating:visited, .aui-button--primary, .aui-button--primary.is-active, .aui-button--primary:active, .aui-button--primary:hover, .aui-button--primary:visited { color: #ffffff; stroke: #ffffff; fill: #ffffff; } .aui-button--floating.is-disabled, .aui-button--floating:disabled, .aui-button--primary.is-disabled, .aui-button--primary:disabled { color: rgba(255, 255, 255, 0.5); stroke: rgba(255, 255, 255, 0.5); fill: rgba(255, 255, 255, 0.5); } .aui-button--floating, .aui-button--floating.is-disabled, .aui-button--floating:disabled, .aui-button--primary, .aui-button--primary.is-disabled, .aui-button--primary:disabled { border-color: #000000; background-color: #000000; } .aui-button--secondary.is-active, .aui-button--secondary:active, .aui-button--secondary:hover { border-color: #808080; } .aui-button--secondary, .aui-button--secondary.is-disabled, .aui-button--secondary:disabled { border-color: #000000; } .aui-button--text .aui-button__text::after { content: ''; display: inline-block; position: relative; top: 0.06667em; margin-left: 0.26667em; width: 0.5em; height: 0.8125em; background: center no-repeat 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='%23000000' stroke-width='1px' fill='none' d='M1.5,1l5.485,5.504l-5.48,5.496' /%3E%3C/svg%3E"); background-size: contain; transition: -webkit-transform 0.2s ease; transition: transform 0.2s ease; transition: transform 0.2s ease, -webkit-transform 0.2s ease; } .aui-button--text:hover .aui-button__text::after { background-image: 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='%234c4c4c' stroke-width='1px' fill='none' d='M1.5,1l5.485,5.504l-5.48,5.496' /%3E%3C/svg%3E"); -webkit-transform: translateX(5px); transform: translateX(5px); } .aui-button--text.is-disabled .aui-button__text::after, .aui-button--text:disabled .aui-button__text::after { -webkit-transform: none; transform: none; } .aui-button--icon { width: 23px; height: 23px; padding: 0; border: none; } .aui-button--icon .audiicon { position: absolute; top: 0; left: 0; margin: 0; width: 24px; height: 24px; } .aui-button--icon--large { width: 45px; height: 45px; } .aui-button--icon--large .audiicon { top: -1px; left: -1px; width: 48px; height: 48px; } .aui-button--icon--large .audiicon-container--small { display: none; } .aui-button--icon--large .audiicon-container--large { display: inline; } .aui-button--round { border-radius: 50%; } .aui-button--stretched { width: 100%; } .aui-button--sticky { position: fixed; left: 0; bottom: 0; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05), 0 0 50px 0 rgba(0, 0, 0, 0.07); } .aui-button--floating { position: fixed; right: 1.5rem; bottom: 1.5rem; width: 45px; height: 45px; padding: 0; z-index: 900; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05), 0 0 50px 0 rgba(0, 0, 0, 0.07); } .aui-button--floating .audiicon { position: absolute; left: -1px; top: -1px; width: 48px; height: 48px; } .aui-button--floating .audiicon-container--small { display: none; } .aui-button--floating .audiicon-container--large { display: inline; } .aui-button--floating, .aui-button--floating:focus, .aui-button--floating:hover { box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05), 0 0 50px 0 rgba(0, 0, 0, 0.07); } .aui-button__text { display: inline-block; position: relative; text-align: left; } .aui-button__text-icon { display: inline-flex; align-items: center; position: relative; text-align: left; vertical-align: middle; } .aui-button__text-icon .audiicon { display: inline-block; } .aui-button__text-icon .aui-button__text:first-child { margin-right: 0.53333em; } .aui-button__text-icon .aui-button__text:not(:first-child) { margin-left: 0.53333em; } .aui-button::-moz-focus-inner { border: 0; padding: 0; } .aui-button-group { display: inline-flex; flex-flow: row wrap; align-items: center; vertical-align: top; margin-right: -0.25rem; margin-bottom: -0.25rem; } .aui-button-group .aui-button { flex: 1 1 auto; margin: 0 0.25rem 0.25rem 0; } .aui-button-group .aui-button:hover, .aui-button-group .aui-button:focus, .aui-button-group .aui-button:active, .aui-button-group .aui-button.is-active { z-index: 2; } .aui-button-group .aui-button--icon { flex: 0 0 auto; } .aui-button-group--block { display: flex; } .aui-button-group--texts { margin-right: -1.5rem; margin-bottom: -1.5rem; } .aui-button-group--texts .aui-button { margin: 0 1.5rem 1.5rem 0; } .aui-button-group--icons { margin-right: -0.75rem; margin-bottom: -0.75rem; } .aui-button-group--icons .aui-button { margin: 0 0.75rem 0.75rem 0; } .aui-card-grid { display: flex; flex-flow: row wrap; margin: -0.125rem; } .aui-card-grid .aui-card-grid { margin: 0; } .aui-card-grid__item { display: flex; flex-flow: row wrap; align-items: stretch; justify-content: flex-start; flex: 1 1 auto; width: 288px; } .aui-card-grid__item--column { flex-direction: column; } .aui-card { flex: 1 1 auto; display: flex; flex-direction: column; position: relative; margin: 0.125rem; width: calc(100% - 0.25rem); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; background-origin: padding-box; background-attachment: scroll; transition: box-shadow 0.15s cubic-bezier(0.75, 0.02, 0.5, 1), -webkit-transform 0.15s cubic-bezier(0.75, 0.02, 0.5, 1); transition: transform 0.15s cubic-bezier(0.75, 0.02, 0.5, 1), box-shadow 0.15s cubic-bezier(0.75, 0.02, 0.5, 1); transition: transform 0.15s cubic-bezier(0.75, 0.02, 0.5, 1), box-shadow 0.15s cubic-bezier(0.75, 0.02, 0.5, 1), -webkit-transform 0.15s cubic-bezier(0.75, 0.02, 0.5, 1); /** * Variant: Action */ /** * Variant: Cover */ } .aui-card__cover { display: block; } .aui-card__cover-image { display: block; width: 100%; height: auto; } .aui-card__body { flex: 1 1 auto; display: flex; flex-direction: column; } .aui-card__content { padding: 1.25rem; } .aui-card__content--bottom { margin-top: auto; } .aui-card__media { text-align: center; } .aui-card__media img { display: block; width: 100%; height: auto; } .aui-card--action:hover, .aui-card--action:focus { z-index: 1; outline: none; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05), 0 0 50px 0 rgba(0, 0, 0, 0.07); -webkit-transform: translateY(-0.25rem); transform: translateY(-0.25rem); } .aui-card--cover { flex-direction: row; } .aui-card--cover .aui-card__cover { flex: 1 1 auto; } .aui-card--cover .aui-card__body { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 1; } .aui-checkbox { display: inline-block; position: relative; font-weight: 400; line-height: 1.5; color: #333333; cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /** * Variant: stretch */ /** * Variant: box-right */ /** * Variant: dropdown-option */ /** * States */ } .aui-js .aui-checkbox { padding-left: 2.5em; } .aui-checkbox__box { display: none; overflow: hidden; position: absolute; top: 0; left: 0; width: 1.5em; height: 1.5em; border: 1px solid rgba(0, 0, 0, 0.5); transition: box-shadow .15s linear, border .15s linear; cursor: pointer; pointer-events: none; z-index: 1; } .aui-js .aui-checkbox__box { display: inline-block; } .aui-checkbox__tick { display: block; position: absolute; top: 50%; left: 50%; width: 0.75em; height: 0.75em; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon fill='%23333333' points='4.945 12 0 7.699 0.667 6.92 4.708 10.435 11.132 0 12 0.543 4.945 12' /%3E%3C/svg%3E") center center no-repeat; opacity: 0; transition: opacity 0.15s cubic-bezier(0.75, 0.02, 0.5, 1); pointer-events: none; } .aui-checkbox__error { display: block; margin-top: 0.5rem; font-size: 0.8125rem; line-height: 1.25rem; color: #bb0a30; transition: color .25s linear; } .aui-checkbox--stretch { width: 100%; } .aui-js .aui-checkbox--box-right { padding-left: 0; padding-right: 2.5em; } .aui-js .aui-checkbox--box-right .aui-checkbox__box { left: auto; right: 0; } .aui-js .aui-checkbox--dropdown-option { width: 100%; padding-left: 0; padding-right: 2.5em; } .aui-js .aui-checkbox--dropdown-option .aui-checkbox__box { left: auto; right: 0; } .aui-checkbox:hover:not(.is-disabled) { color: #000000; } .aui-checkbox:hover:not(.is-disabled) .aui-checkbox__box { border-color: black; } .aui-checkbox__input:focus ~ .aui-checkbox__box { box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1); } .aui-checkbox.is-disabled { opacity: 0.3; cursor: not-allowed; } .aui-checkbox.is-checked .aui-checkbox__tick { opacity: 1; } .aui-checkbox.is-invalid, .aui-checkbox.is-invalid .aui-checkbox__label { color: #bb0a30; } .aui-checkbox.is-invalid .aui-checkbox__tick { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon fill='%23bb0a30' points='4.945 12 0 7.699 0.667 6.92 4.708 10.435 11.132 0 12 0.543 4.945 12' /%3E%3C/svg%3E"); } .aui-checkbox.is-invalid .aui-checkbox__box, .aui-checkbox.is-invalid:hover .aui-checkbox__box { border-color: #bb0a30; } .aui-color-white { background-color: #ffffff; } .aui-color-black { background-color: #000000; } .aui-color-silver { background-color: #b2b2b2; } .aui-color-warmsilver { background-color: #b6b1a9; } .aui-color-green, .aui-color-success { background-color: #009900; } .aui-color-warning, .aui-color-yellow { background-color: #ffaa00; } .aui-color-danger, .aui-color-red { background-color: #bb0a30; } .aui-color-gray10 { background-color: #1a1a1a; } .aui-color-gray20 { background-color: #333333; } .aui-color-gray30 { background-color: #4c4c4c; } .aui-color-gray40 { background-color: #666666; } .aui-color-gray50 { background-color: #808080; } .aui-color-gray60 { background-color: #999999; } .aui-color-gray70 { background-color: #b2b2b2; } .aui-color-gray80 { background-color: #cccccc; } .aui-color-gray85 { background-color: #d9d9d9; } .aui-color-gray90 { background-color: #e5e5e5; } .aui-color-gray95 { background-color: #f2f2f2; } .aui-color-text-light { color: #f2f2f2; } .aui-color-text-dark { color: #333333; } .aui-color-text-green, .aui-color-text-success { color: #009900; } .aui-color-text-warning, .aui-color-text-yellow { color: #ffaa00; } .aui-color-text-danger, .aui-color-text-red { color: #bb0a30; } .aui-draggable-list { padding-left: 0; list-style: none; font-weight: 400; } .aui-draggable-list__item { cursor: move; position: relative; padding: 1rem 3rem 1rem 1.5rem; color: rgba(0, 0, 0, 0.8); background: rgba(0, 0, 0, 0.1); transition: background .15s linear, color .15s linear; } .aui-draggable-list__item:hover { color: black; background: rgba(0, 0, 0, 0.15); } .aui-draggable-list__item + .aui-draggable-list__item { margin-top: 1px; } .aui-draggable-list.is-dragging .aui-draggable-list__item, .aui-draggable-list.is-dragging .aui-draggable-list__item:hover { background: rgba(0, 0, 0, 0.05); } .aui-draggable-list.is-dragging .aui-draggable-list__item.is-active, .aui-draggable-list.is-dragging .aui-draggable-list__item:hover.is-active { color: black; background: #cccccc; } .aui-draggable-list.is-dragging .is-placeholder, .aui-draggable-list.is-dragging .is-placeholder:hover { color: transparent; background: none; } .aui-draggable-list .is-placeholder::before { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 1px dotted rgba(0, 0, 0, 0.05); } .aui-draggable-list__item:not(.is-placeholder)::after { content: ''; opacity: 0; display: block; position: absolute; top: 50%; right: 1.5rem; width: 16px; height: 5px; margin-top: -2.5px; background: url("data:image/svg+xml;dataset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='5' viewBox='0 0 16 5'%3E%3Crect style='fill:black' x='0' y='0' width='16' height='1' /%3E%3Crect style='fill:black' x='0' y='4' width='16' height='1' /%3E%3C/svg%3E") center center no-repeat; transition: opacity .15s linear; } .aui-draggable-list__item.is-active::after, .aui-draggable-list__item:hover::after { opacity: 1; } /** * Add class `aui-dropzone-active` to body element, to prevent scrolling, * when strechted dropzone is active. */ .aui-dropzone-active { overflow: hidden; } .aui-dropzone { display: flex; align-items: center; justify-content: center; min-height: 1rem; color: #333333; border: 1px dashed rgba(0, 0, 0, 0.2); transition: border 0.15s linear; } .aui-dropzone__message { flex: none; } .aui-dropzone:hover, .aui-dropzone.is-active { border-color: rgba(0, 0, 0, 0.8); } .aui-dropzone--fullpage { visibility: hidden; opacity: 0; overflow: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 0; height: 0; background: rgba(255, 255, 255, 0.9); border: none; transition: border 0.15s linear, opacity 0.15s linear, visibility 0.15s linear; } .aui-dropzone--fullpage::after { content: ''; display: block; position: absolute; top: 0.5rem; right: 0.5rem; bottom: 0.5rem; left: 0.5rem; border: 1px dashed rgba(0, 0, 0, 0.8); } .aui-dropzone--fullpage.is-active { visibility: visible; overflow: visible; top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; opacity: 1; padding: 0.5rem; } .aui-dropdown { display: block; position: relative; margin: 0; padding: 0; font-size: 1rem; line-height: 1.5; box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /** * Variant: floating-label */ /** * States */ } .aui-dropdown__field { position: relative; } .aui-dropdown__input { display: block; margin: 0; width: 100%; padding-right: 1.3125rem; min-height: 2.5rem; font-size: inherit; font-weight: 400; line-height: inherit; text-align: left; color: rgba(0, 0, 0, 0.6); background: none; border: none; border-bottom: 1px solid rgba(0, 0, 0, 0.3); border-radius: 0; transition: color, border; transition-duration: 0.25s; transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1); resize: none; outline: 0; cursor: pointer; } .aui-dropdown__label { display: block; position: absolute; top: 0.5rem; right: 0; bottom: 0; left: 0; width: 100%; color: rgba(0, 0, 0, 0.6); font-size: inherit; font-weight: 400; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; transition-property: top, font-size, color, opacity; transition-duration: 0.25s; transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1); pointer-events: none; } .aui-dropdown__field::after { content: ''; display: block; position: absolute; top: 1.3125rem; right: 0; width: 13px; height: 8px; margin-top: -4px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpolygon fill='rgba(0, 0, 0, 0.6)' points='6.511 7.371 0 0.715 0.731 0 6.51 5.907 12.267 0 13 0.714 6.511 7.371'/%3E%3C/svg%3E") center center no-repeat; transition-property: background, -webkit-transform; transition-property: transform, background; transition-property: transform, background, -webkit-transform; transition-duration: 0.25s; transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1); } .aui-dropdown__focus-line { display: block; position: absolute; bottom: 1px; width: 100%; height: 1px; background: rgba(0, 0, 0, 0.8); opacity: 0; transition-property: opacity, background; transition-duration: 0.25s; } .aui-dropdown__description, .aui-dropdown__error { display: block; color: rgba(0, 0, 0, 0.5); transition: color 0.25s linear; margin-top: 0.5rem; font-size: 0.8125rem; line-height: 1.25rem; } .aui-dropdown__error { color: #bb0a30; } .aui-dropdown__panel { display: block; visibility: hidden; overflow: auto; position: absolute; top: 100%; left: 0; width: 100%; background: #e6e6e6; opacity: 0; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05), 0 0 50px 0 rgba(0, 0, 0, 0.07); transition: opacity 0.25s cubic-bezier(0.75, 0.02, 0.5, 1); z-index: 1; } .aui-dropdown__list { list-style: none; padding: 0; } .aui-dropdown__list-item--animate { opacity: 0; -webkit-transform: translateY(0.5em); transform: translateY(0.5em); transition: opacity 0.25s cubic-bezier(0.75, 0.02, 0.5, 1), -webkit-transform 0.25s cubic-bezier(0.75, 0.02, 0.5, 1); transition: transform 0.25s cubic-bezier(0.75, 0.02, 0.5, 1), opacity 0.25s cubic-bezier(0.75, 0.02, 0.5, 1); transition: transform 0.25s cubic-bezier(0.75, 0.02, 0.5, 1), opacity 0.25s cubic-bezier(0.75, 0.02, 0.5, 1), -webkit-transform 0.25s cubic-bezier(0.75, 0.02, 0.5, 1); } .aui-dropdown__list-title, .aui-dropdown__option { display: block; padding: 0 1rem; font-weight: 400; } .aui-dropdown__list-title { color: rgba(0, 0, 0, 0.2); padding-top: 0.75rem; padding-bottom: 0; } .aui-dropdown__option { position: relative; width: 100%; padding-top: 0.75rem; padding-bottom: 0.75rem; text-align: left; text-decoration: none; color: #333333; background: none; border: none; outline: none; white-space: normal; vertical-align: middle; cursor: pointer; transition: background 0.25s linear; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } .aui-dropdown__option:hover { background: rgba(0, 0, 0, 0.1); } .aui-dropdown__list .aui-dropdown__list .aui-dropdown__option { padding-left: 2.5rem; } .aui-dropdown.aui-dropdown--floating-label .aui-dropdown__field { padding-top: 0.6875rem; } .aui-dropdown.aui-dropdown--floating-label .aui-dropdown__field::after { top: 2rem; } .aui-js .aui-dropdown.aui-dropdown--floating-label .aui-dropdown__label { top: 1.1875rem; } .aui-dropdown.is-active { z-index: 1000; } .aui-dropdown.is-active .aui-dropdown__field::after { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .aui-dropdown.is-active .aui-dropdown__focus-line { opacity: 1; } .aui-dropdown.is-active .aui-dropdown__panel { visibility: visible; opacity: 1; } .aui-dropdown.is-active .aui-dropdown__list-item--animate { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .aui-dropdown:not(.is-disabled):not(.is-invalid) .aui-dropdown__input:hover { border-color: rgba(0, 0, 0, 0.8); } .aui-dropdown.is-focused .aui-dropdown__input { outline: none; box-shadow: none; border-color: rgba(0, 0, 0, 0.8); } .aui-dropdown.is-focused .aui-dropdown__focus-line { opacity: 1; } .aui-dropdown.is-disabled { opacity: 0.3; cursor: not-allowed; } .aui-dropdown.is-disabled .aui-dropdown__input { cursor: not-allowed; } .aui-dropdown.is-disabled .aui-dropdown__focus-line { opacity: 0; } .aui-dropdown.is-dirty .aui-dropdown__label { opacity: 0; } .aui-dropdown.is-dirty .aui-dropdown__field::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpolygon fill='%23333333' points='6.511 7.371 0 0.715 0.731 0 6.51 5.907 12.267 0 13 0.714 6.511 7.371'/%3E%3C/svg%3E"); } .aui-dropdown.is-dirty.aui-dropdown--floating-label .aui-dropdown__label { top: 0; font-size: .75rem; opacity: 1; } .aui-dropdown.is-dirty .aui-dropdown__input { border-color: rgba(0, 0, 0, 0.8); color: #333333; } .aui-dropdown.is-invalid, .aui-dropdown.is-invalid:not(.is-dirty) .aui-dropdown__input, .aui-dropdown.is-invalid .aui-dropdown__counter, .aui-dropdown.is-invalid .aui-dropdown__label { color: #bb0a30; } .aui-dropdown.is-invalid .aui-dropdown__field::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpolygon fill='%23bb0a30' points='6.511 7.371 0 0.715 0.731 0 6.51 5.907 12.267 0 13 0.714 6.511 7.371'/%3E%3C/svg%3E"); } .aui-dropdown.is-invalid .aui-dropdown__input { border-color: #bb0a30; } .aui-dropdown.is-invalid .aui-dropdown__focus-line { background: #bb0a30; } .aui-figure { display: block; margin: 0; } .aui-figure__image { display: block; max-width: 100%; height: auto; } .aui-figure__caption { margin-top: 1rem; } .aui-fieldset { margin: 0; padding: 0; border: none; line-height: 1.5rem; font-weight: 400; color: rgba(0, 0, 0, 0.6); box-sizing: border-box; } .aui-fieldset--selects .aui-fieldset__legend, .aui-fieldset--textfields .aui-fieldset__legend { font-weight: 700; color: #333333; } .aui-fieldset--radios .aui-fieldset__legend { margin-bottom: 1rem; } .aui-fieldset__fields { display: flex; flex-flow: row wrap; margin-right: -1.5rem; margin-bottom: -1.5rem; } .aui-fieldset__field { flex: 1 1 auto; margin-right: 1.5rem; margin-bottom: 1.5rem; } .aui-fieldset--radios .aui-fieldset__field { flex: 0 1 auto; } .aui-fieldset__error { display: block; margin-top: 0.5rem; color: #999999; font-size: 0.8125rem; line-height: 1.25rem; transition: color .25s linear; } .aui-fieldset.is-invalid .aui-fieldset__error, .aui-fieldset.is-invalid .aui-fieldset__legend { color: #bb0a30; } /** * Prevent scrolling of body, when Flyout is open. * Added to body by JS. */ @media (max-width: 399px) { .aui-flyout-is-open { overflow: hidden; } } .aui-flyout { display: inline-block; position: relative; } .aui-flyout__toggle { z-index: 1; } .aui-flyout__panel { display: block; opacity: 0; overflow: hidden; position: fixed; top: 0; left: 0; right: 0; bottom: 0; max-height: 0; color: #333333; background: #e5e5e5; font-size: .875rem; font-weight: 400; line-height: 1.25rem; text-align: left; transition: opacity 0.2s linear, max-height 0.1s linear 0.4s, -webkit-transform 0.3s cubic-bezier(0.75, 0.02, 0.5, 1); transition: opacity 0.2s linear, transform 0.3s cubic-bezier(0.75, 0.02, 0.5, 1), max-height 0.1s linear 0.4s; transition: opacity 0.2s linear, transform 0.3s cubic-bezier(0.75, 0.02, 0.5, 1), max-height 0.1s linear 0.4s, -webkit-transform 0.3s cubic-bezier(0.75, 0.02, 0.5, 1); } .aui-flyout__panel-content { position: absolute; top: 68px; left: 0; right: 0; bottom: 0; overflow: scroll; -webkit-overflow-scrolling: touch; opacity: 0; padding: 0.5rem 1.75rem; transition: opacity 0.4s cubic-bezier(0.75, 0.02, 0.5, 1); z-index: 1; background-color: inherit; } .aui-flyout__triangle { position: absolute; top: 0; margin-left: 1.5rem; background: inherit; opacity: 0; transition: opacity 0.4s cubic-bezier(0.75, 0.02, 0.5, 1); } .aui-flyout__triangle::after { content: ''; display: block; position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: center; transform-origin: center; background: inherit; box-shadow: -1px -1px 4px rgba(0, 0, 0, 0.05); } .aui-flyout--center .aui-flyout__triangle { left: 50%; margin-left: 0; } .aui-flyout--right .aui-flyout__triangle { left: 100%; margin-left: -1.5rem; } .aui-flyout__header { position: absolute; top: 0; left: 0; width: 100%; height: 3.5625rem; } .aui-flyout__close { position: absolute; top: 1.25rem; right: 1.25rem; width: 1.0625rem; height: 1.0625rem; outline: 0; border: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' %3E%3Cpath fill='%23333333' d='M8.487,7.78l7.78,-7.777c0.235,0.236 0.471,0.472 0.707,0.707l-7.78,7.777l7.777,7.78l-0.708,0.707l-7.776,-7.78l-7.78,7.777l-0.707,-0.708l7.78,-7.776l-7.777,-7.78l0.707,-0.707l7.777,7.78Z' /%3E%3C/svg%3E") center center no-repeat; z-index: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } .aui-flyout::after { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; } .aui-flyout.is-active::after { bottom: -1.25rem; } .aui-flyout.is-active .aui-flyout__panel { opacity: 1; max-height: 9999px; transition-delay: 0s; z-index: 9999; overflow: visible; } .aui-flyout.is-active .aui-flyout__panel-content { opacity: 1; transition-delay: .2s; } .aui-flyout.is-active .aui-flyout__triangle { opacity: 1; transition-delay: .2s; } @media (min-width: 400px) { .aui-flyout__panel { position: absolute; top: 100%; left: 0; right: auto; bottom: auto; margin-top: 1.25rem; max-width: 288px; color: #333333; background: #ffffff; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05), 0 0 50px 0 rgba(0, 0, 0, 0.07); -webkit-transform: translateY(-10px); transform: translateY(-10px); } .aui-flyout__panel-content { position: relative; top: auto; left: auto; right: auto; bottom: auto; overflow: auto; } .aui-flyout__header { display: none; } .aui-flyout--right .aui-flyout__panel { left: auto; right: 0; } .aui-flyout--center .aui-flyout__panel { left: 50%; -webkit-transform: translate(-50%, -10px); transform: translate(-50%, -10px); } .aui-flyout.is-active .aui-flyout__panel { -webkit-transform: translateY(0); transform: translateY(0); transition-delay: 0s; } .aui-flyout.is-active.aui-flyout--center .aui-flyout__panel { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } } .aui-layout { margin-left: auto; margin-right: auto; padding-left: 4.375%; padding-right: 4.375%; } .aui-grid { margin-left: -0.25rem; box-sizing: border-box; } .aui-grid::after { content: ' '; display: block; clear: both; } .aui-cell { float: left; width: 100%; padding-left: 0.25rem; } .aui-cell--1 { width: 8.33333%; } .aui-cell--2 { width: 16.66667%; } .aui-cell--3 { width: 25%; } .aui-cell--4 { width: 33.33333%; } .aui-cell--5 { width: 41.66667%; } .aui-cell--6 { width: 50%; } .aui-cell--7 { width: 58.33333%; } .aui-cell--8 { width: 66.66667%; } .aui-cell--9 { width: 75%; } .aui-cell--10 { width: 83.33333%; } .aui-cell--11 { width: 91.66667%; } .aui-cell--12 { width: 100%; } .aui-grid--nested-2 .aui-cell { width: 600%; } .aui-grid--nested-2 .aui-cell--1 { width: 50%; } .aui-grid--nested-2 .aui-cell--2 { width: 100%; } .aui-grid--nested-2 .aui-cell--3 { width: 150%; } .aui-grid--nested-2 .aui-cell--4 { width: 200%; } .aui-grid--nested-2 .aui-cell--5 { width: 250%; } .aui-grid--nested-2 .aui-cell--6 { width: 300%; } .aui-grid--nested-2 .aui-cell--7 { width: 350%; } .aui-grid--nested-2 .aui-cell--8 { width: 400%; } .aui-grid--nested-2 .aui-cell--9 { width: 450%; } .aui-grid--nested-2 .aui-cell--10 { width: 500%; } .aui-grid--nested-2 .aui-cell--11 { width: 550%; } .aui-grid--nested-2 .aui-cell--12 { width: 600%; } .aui-grid--nested-3 .aui-cell { width: 400%; } .aui-grid--nested-3 .aui-cell--1 { width: 33.33333%; } .aui-grid--nested-3 .aui-cell--2 { width: 66.66667%; } .aui-grid--nested-3 .aui-cell--3 { width: 100%; } .aui-grid--nested-3 .aui-cell--4 { width: 133.33333%; } .aui-grid--nested-3 .aui-cell--5 { width: 166.66667%; } .aui-grid--nested-3 .aui-cell--6 { width: 200%; } .aui-grid--nested-3 .aui-cell--7 { width: 233.33333%; } .aui-grid--nested-3 .aui-cell--8 { width: 266.66667%; } .aui-grid--nested-3 .aui-cell--9 { width: 300%; } .aui-grid--nested-3 .aui-cell--10 { width: 333.33333%; } .aui-grid--nested-3 .aui-cell--11 { width: 366.66667%; } .aui-grid--nested-3 .aui-cell--12 { width: 400%; } .aui-grid--nested-4 .aui-cell { width: 300%; } .aui-grid--nested-4 .aui-cell--1 { width: 25%; } .aui-grid--nested-4 .aui-cell--2 { width: 50%; } .aui-grid--nested-4 .aui-cell--3 { width: 75%; } .aui-grid--nested-4 .aui-cell--4 { width: 100%; } .aui-grid--nested-4 .aui-cell--5 { width: 125%; } .aui-grid--nested-4 .aui-cell--6 { width: 150%; } .aui-grid--nested-4 .aui-cell--7 { width: 175%; } .aui-grid--nested-4 .aui-cell--8 { width: 200%; } .aui-grid--nested-4 .aui-cell--9 { width: 225%; } .aui-grid--nested-4 .aui-cell--10 { width: 250%; } .aui-grid--nested-4 .aui-cell--11 { width: 275%; } .aui-grid--nested-4 .aui-cell--12 { width: 300%; } .aui-grid--nested-5 .aui-cell { width: 240%; } .aui-grid--nested-5 .aui-cell--1 { width: 20%; } .aui-grid--nested-5 .aui-cell--2 { width: 40%; } .aui-grid--nested-5 .aui-cell--3 { width: 60%; } .aui-grid--nested-5 .aui-cell--4 { width: 80%; } .aui-grid--nested-5 .aui-cell--5 { width: 100%; } .aui-grid--nested-5 .aui-cell--6 { width: 120%; } .aui-grid--nested-5 .aui-cell--7 { width: 140%; } .aui-grid--nested-5 .aui-cell--8 { width: 160%; } .aui-grid--nested-5 .aui-cell--9 { width: 180%; } .aui-grid--nested-5 .aui-cell--10 { width: 200%; } .aui-grid--nested-5 .aui-cell--11 { width: 220%; } .aui-grid--nested-5 .aui-cell--12 { width: 240%; } .aui-grid--nested-6 .aui-cell { width: 200%; } .aui-grid--nested-6 .aui-cell--1 { width: 16.66667%; } .aui-grid--nested-6 .aui-cell--2 { width: 33.33333%; } .aui-grid--nested-6 .aui-cell--3 { width: 50%; } .aui-grid--nested-6 .aui-cell--4 { width: 66.66667%; } .aui-grid--nested-6 .aui-cell--5 { width: 83.33333%; } .aui-grid--nested-6 .aui-cell--6 { width: 100%; } .aui-grid--nested-6 .aui-cell--7 { width: 116.66667%; } .aui-grid--nested-6 .aui-cell--8 { width: 133.33333%; } .aui-grid--nested-6 .aui-cell--9 { width: 150%; } .aui-grid--nested-6 .aui-cell--10 { width: 166.66667%; } .aui-grid--nested-6 .aui-cell--11 { width: 183.33333%; } .aui-grid--nested-6 .aui-cell--12 { width: 200%; } .aui-grid--nested-7 .aui-cell { width: 171.42857%; } .aui-grid--nested-7 .aui-cell--1 { width: 14.28571%; } .aui-grid--nested-7 .aui-cell--2 { width: 28.57143%; } .aui-grid--nested-7 .aui-cell--3 { width: 42.85714%; } .aui-grid--nested-7 .aui-cell--4 { width: 57.14286%; } .aui-grid--nested-7 .aui-cell--5 { width: 71.42857%; } .aui-grid--nested-7 .aui-cell--6 { width: 85.71429%; } .aui-grid--nested-7 .aui-cell--7 { width: 100%; } .aui-grid--nested-7 .aui-cell--8 { width: 114.28571%; } .aui-grid--nested-7 .aui-cell--9 { width: 128.57143%; } .aui-grid--nested-7 .aui-cell--10 { width: 142.85714%; } .aui-grid--nested-7 .aui-cell--11 { width: 157.14286%; } .aui-grid--nested-7 .aui-cell--12 { width: 171.42857%; } .aui-grid--nested-8 .aui-cell { width: 150%; } .aui-grid--nested-8 .aui-cell--1 { width: 12.5%; } .aui-grid--nested-8 .aui-cell--2 { width: 25%; } .aui-grid--nested-8 .aui-cell--3 { width: 37.5%; } .aui-grid--nested-8 .aui-cell--4 { width: 50%; } .aui-grid--nested-8 .aui-cell--5 { width: 62.5%; } .aui-grid--nested-8 .aui-cell--6 { width: 75%; } .aui-grid--nested-8 .aui-cell--7 { width: 87.5%; } .aui-grid--nested-8 .aui-cell--8 { width: 100%; } .aui-grid--nested-8 .aui-cell--9 { width: 112.5%; } .aui-grid--nested-8 .aui-cell--10 { width: 125%; } .aui-grid--nested-8 .aui-cell--11 { width: 137.5%; } .aui-grid--nested-8 .aui-cell--12 { width: 150%; } .aui-grid--nested-9 .aui-cell { width: 133.33333%; } .aui-grid--nested-9 .aui-cell--1 { width: 11.11111%; } .aui-grid--nested-9 .aui-cell--2 { width: 22.22222%; } .aui-grid--nested-9 .aui-cell--3 { width: 33.33333%; } .aui-grid--nested-9 .aui-cell--4 { width: 44.44444%; } .aui-grid--nested-9 .aui-cell--5 { width: 55.55556%; } .aui-grid--nested-9 .aui-cell--6 { width: 66.66667%; } .aui-grid--nested-9 .aui-cell--7 { width: 77.77778%; } .aui-grid--nested-9 .aui-cell--8 { width: 88.88889%; } .aui-grid--nested-9 .aui-cell--9 { width: 100%; } .aui-grid--nested-9 .aui-cell--10 { width: 111.11111%; } .aui-grid--nested-9 .aui-cell--11 { width: 122.22222%; } .aui-grid--nested-9 .aui-cell--12 { width: 133.33333%; } .aui-grid--nested-10 .aui-cell { width: 120%; } .aui-grid--nested-10 .aui-cell--1 { width: 10%; } .aui-grid--nested-10 .aui-cell--2 { width: 20%; } .aui-grid--nested-10 .aui-cell--3 { width: 30%; } .aui-grid--nested-10 .aui-cell--4 { width: 40%; } .aui-grid--nested-10 .aui-cell--5 { width: 50%; } .aui-grid--nested-10 .aui-cell--6 { width: 60%; } .aui-grid--nested-10 .aui-cell--7 { width: 70%; } .aui-grid--nested-10 .aui-cell--8 { width: 80%; } .aui-grid--nested-10 .aui-cell--9 { width: 90%; } .aui-grid--nested-10 .aui-cell--10 { width: 100%; } .aui-grid--nested-10 .aui-cell--11 { width: 110%; } .aui-grid--nested-10 .aui-cell--12 { width: 120%; } .aui-grid--nested-11 .aui-cell { width: 109.09091%; } .aui-grid--nested-11 .aui-cell--1 { width: 9.09091%; } .aui-grid--nested-11 .aui-cell--2 { width: 18.18182%; } .aui-grid--nested-11 .aui-cell--3 { width: 27.27273%; } .aui-grid--nested-11 .aui-cell--4 { width: 36.36364%; } .aui-grid--nested-11 .aui-cell--5 { width: 45.45455%; } .aui-grid--nested-11 .aui-cell--6 { width: 54.54545%; } .aui-grid--nested-11 .aui-cell--7 { width: 63.63636%; } .aui-grid--nested-11 .aui-cell--8 { width: 72.72727%; } .aui-grid--nested-11 .aui-cell--9 { width: 81.81818%; } .aui-grid--nested-11 .aui-cell--10 { width: 90.90909%; } .aui-grid--nested-11 .aui-cell--11 { width: 100%; } .aui-grid--nested-11 .aui-cell--12 { width: 109.09091%; } .aui-header { z-index: 100; top: 0; font-size: 12px; height: 3.5rem; } .aui-header__content { display: flex; flex-flow: row wrap; align-items: center; height: 3.5rem; transition: box-shadow linear .15s; } .aui-header--grid .aui-header__content { padding: 0 4.375%; } .aui-header.is-sticky .aui-header__content { z-index: 100; position: fixed; top: 0; left: 0; width: 100%; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05), 0 0 50px 0 rgba(0, 0, 0, 0.07); } .aui-list { counter-reset: li; margin-left: 0; padding-left: 0; list-style: none; font-size: 16px; line-height: 24px; } @media (min-width: 740px) { .aui-list { font-size: 16px; line-height: 24px; } } @media (min-width: 1264px) { .aui-list { font-size: 18px; line-height: 28px; } } @media (min-width: 1584px) { .aui-list { font-size: 20px; line-height: 32px; } } .aui-list__item { margin-left: 1.25rem; } .aui-list__item + .aui-list__item { margin-top: 0.75rem; } .aui-list__item::before { display: inline-block; width: 1.25rem; margin-left: -1.25rem; color: rgba(0, 0, 0, 0.3); } .aui-list--arrow .aui-list__item::before { content: '›'; } .aui-list--number .aui-list__item::before { content: counter(li); counter-increment: li; } .aui-color-text-light .aui-list__item::before { color: rgba(255, 255, 255, 0.6); } /** * Prevent scrolling of body, when modal is open. * Added to body by JS. */ .aui-modal-open { overflow: hidden; } /** * Modal container stretched to viewport size. */ .aui-modal { position: fixed; top: 0; left: 0; width: 0; height: 0; outline: 0; z-index: 1900; overflow: hidden; } .aui-modal.is-active { right: 0; bottom: 0; width: auto; height: auto; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } /** * Modal dialog */ .aui-modal-dialog { display: flex; flex-flow: row; justify-content: center; position: relative; min-height: 100vh; opacity: 0; transition: opacity 0.4s cubic-bezier(0.75, 0.02, 0.5, 1); background-color: #333333; } .aui-modal-dialog__body { display: flex; flex-flow: column; justify-content: center; position: relative; min-width: 1px; max-width: 100%; min-height: 100vh; padding: 1.625rem 4.375%; } .aui-modal-dialog__body--full { padding: 0; } .aui-modal-dialog__content { max-width: 100%; } .aui-modal-dialog__close { position: fixed; top: 0.375rem; right: 0.375rem; width: 45px; height: 45px; cursor: pointer; vertical-align: middle; outline: none; box-sizing: border-box; border: none; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); transition: color 0.3s cubic-bezier(0.75, 0.02, 0.5, 1); color: #ffffff; } .aui-modal-dialog__close:hover { color: #cccccc; } .aui-modal-close-icon-large, .aui-modal-close-icon-small { display: block; stroke-width: 1px; } .aui-modal-close-icon-large { display: none; } /** * Styles when modal is open: */ .aui-modal-open .aui-modal.is-active .aui-modal-dialog { opacity: 1; transition-delay: 0.4s; } .aui-modal-open .aui-modal.is-active .aui-modal-dialog--morph { transition-delay: 0s; } .aui-modal-open .aui-modal.is-active .aui-modal-dialog--morph .aui-modal-dialog__body { transition-delay: 0s; } /** * Responsive adaptions: */ @media (min-width: 600px) { .aui-modal-dialog__body { width: 62.5%; max-width: 1200px; } .aui-modal-dialog--fullpage .aui-modal-dialog__close, .aui-modal-dialog--window .aui-modal-dialog__close { top: 0; right: 0; width: 81px; height: 81px; } .aui-modal-dialog--fullpage .aui-modal-dialog__body { padding-left: 0; padding-right: 0; } .aui-modal-dialog--window, .aui-modal-dialog--layer { background-color: transparent; } .aui-modal-dialog--window .aui-modal-dialog__body { width: 80%; padding-left: 81px; padding-right: 81px; background-color: #333333; } .aui-modal-dialog--layer { padding: 0 4.375%; } .aui-modal-dialog--layer .aui-modal-dialog__body { padding: 1.625rem 0; } .aui-modal-dialog--layer .aui-modal-dialog__content { -webkit-transform: translateY(0); transform: translateY(0); background-color: #333333; } .aui-modal-dialog--layer .aui-modal-dialog__content { padding: 2rem; } .aui-modal-dialog--layer:not(.aui-modal-dialog--morph) .aui-modal-dialog__body { -webkit-transform: translateY(10px); transform: translateY(10px); transition: -webkit-transform 0.4s cubic-bezier(0.75, 0.02, 0.5, 1); transition: transform 0.4s cubic-bezier(0.75, 0.02, 0.5, 1); transition: transform 0.4s cubic-bezier(0.75, 0.02, 0.5, 1), -webkit-transform 0.4s cubic-bezier(0.75, 0.02, 0.5, 1); } .aui-modal-dialog--layer .aui-modal-dialog__close { position: absolute; } .aui-modal-dialog--layer .aui-modal-dialog__body--full, .aui-modal-dialog__body--full { padding: 0; } .aui-modal-close-icon-small { display: none; } .aui-modal-close-icon-large { display: block; } /** * Styles when modal is open: */ .aui-modal-open .aui-modal.is-active .aui-modal-dialog { opacity: 1; transition-delay: 0.4s; } .aui-modal-open .aui-modal.is-active .aui-modal-dialog__content { -webkit-transform: translateY(0); transform: translateY(0); transition-delay: 0.4s; } .aui-modal-open .aui-modal.is-active .aui-modal-dialog--layer .aui-modal-dialog__body { -webkit-transform: translateY(0); transform: translateY(0); transition-delay: 0.4s; } } /** * Modal morph * Created by JS */ .aui-modal-morph { position: absolute; opacity: 0; background-color: #333333; transition-property: top, left, width, height, opacity; transition-duration: 0.4s; transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1); z-index: 1801; } .aui-modal-morph.is-morphing { opacity: 1; } /** * Modal backdrop * Created by JS */ .aui-modal-backdrop { opacity: 0; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.9); transition: opacity 0.6s cubic-bezier(0.75, 0.02, 0.5, 1); z-index: 1800; } .aui-modal-open .aui-modal-backdrop { opacity: 1; } .aui-nav { position: relative; font-weight: 400; font-size: 1rem; line-height: 1; color: rgba(0, 0, 0, 0.5); fill: rgba(0, 0, 0, 0.5); stroke: rgba(0, 0, 0, 0.5); } .aui-nav__items { padding-left: 0; list-style: none; } .aui-nav__action { display: block; width: 100%; z-index: 1; position: relative; padding: 0.5rem 0; vertical-align: baseline; text-align: left; transition-property: color, background, fill, stroke; transition-duration: .15s; transition-timing-function: linear; cursor: pointer; } .aui-nav__action.is-active, .aui-nav__action:hover { color: #000000; fill: #000000; stroke: #000000; } .aui-nav__action, .aui-nav__action.is-disabled { color: rgba(0, 0, 0, 0.5); fill: rgba(0, 0, 0, 0.5); stroke: rgba(0, 0, 0, 0.5); } .aui-nav__action, .aui-nav__action.is-disabled, .aui-nav__action:active, .aui-nav__action:focus { outline: 0; border: 0; background: none; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } .aui-nav__action > span { position: relative; } .aui-nav__action .audiicon { position: relative; margin-right: .75em; vertical-align: middle; } .aui-nav__action.is-disabled { cursor: not-allowed; opacity: .3; } /** * Modifier: List */ .aui-nav--list .aui-nav__action { padding: 0.75rem 0; } .aui-nav--list .aui-nav__item { display: block; } .aui-nav--list .aui-nav__item + .aui-nav__item { border-top: 1px solid rgba(0, 0, 0, 0.1); } .aui-nav--list .aui-nav__action { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /** * Modifier: Bar and Tab */ .aui-nav--bar, .aui-nav--tab { font-family: 'AudiTypeExtended', Verdana, Geneva, sans-serif; overflow: hidden; height: 2rem; } .aui-nav--bar .aui-nav__panel, .aui-nav--tab .aui-nav__panel { position: relative; max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 50px; box-sizing: content-box; } .aui-nav--bar .aui-nav__items, .aui-nav--tab .aui-nav__items { display: flex; width: 100%; flex-flow: row nowrap; align-items: flex-start; white-space: nowrap; } .aui-nav--bar .aui-nav__item, .aui-nav--tab .aui-nav__item { flex: 0 0 auto; padding: 0 1rem; } .aui-nav--bar .aui-nav__item:first-child, .aui-nav--tab .aui-nav__item:first-child { padding-left: 0; } .aui-nav--bar .aui-nav__item:last-child, .aui-nav--tab .aui-nav__item:last-child { padding-right: 0; } .aui-nav--bar .aui-nav__action, .aui-nav--tab .aui-nav__action { display: inline-block; width: auto; font-family: inherit; } .aui-nav--bar .aui-nav__action.is-active, .aui-nav--tab .aui-nav__action.is-active { transition-delay: .15s; } .aui-nav__indicator { pointer-events: none; display: block; position: absolute; top: 2rem; left: 0; width: 1px; height: 2px; background: #000000; opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%); } .aui-nav__paddle-left, .aui-nav__paddle-right { content: ''; display: block; position: absolute; top: 0; width: 2rem; height: 100%; z-index: 2; border: 0; outline: 0; overflow: hidden; transition: opacity .15s linear; } .aui-nav__paddle-left::after, .aui-nav__paddle-right::after { content: ''; display: inline-block; position: absolute; top: 50%; width: 8px; height: 13px; background: 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='rgba(0, 0, 0, 0.5)' stroke-width='1px' fill='none' d='M1.5,1l5.485,5.504l-5.48,5.496' /%3E%3C/svg%3E") center center no-repeat; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .aui-nav__paddle-left:disabled, .aui-nav__paddle-right:disabled { width: 0; opacity: 0; } .aui-nav__paddle-left { left: 0; background: linear-gradient(to right, white 40%, rgba(255, 255, 255, 0) 100%); } .aui-nav__paddle-left::after { left: 0; -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } .aui-nav__paddle-right { right: 0; background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 60%); } .aui-nav__paddle-right::after { right: 0; } .is-animated .aui-nav__indicator { opacity: 1; transition: left 0.3s cubic-bezier(0.75, 0.02, 0.5, 1), width 0.3s cubic-bezier(0.75, 0.02, 0.5, 1), opacity 0.3s cubic-bezier(0.75, 0.02, 0.5, 1); } .aui-nav--overlap { margin-top: -2rem; } .aui-nav--small { height: 1.5rem; font-size: 0.75rem; } .aui-nav--small .aui-nav__item { padding: 0 0.75rem; } .aui-nav--small .aui-nav__item:first-child { padding-left: 0; } .aui-nav--small .aui-nav__item:last-child { padding-right: 0; } .aui-nav--small .aui-nav__action { padding: 0.375rem 0; } .aui-nav--small .aui-nav__indicator { top: 1.5rem; } .aui-nav--tab { height: 3.25rem; } .aui-nav--tab .aui-nav__item { padding-left: 0; padding-right: 0; } .aui-nav--tab .aui-nav__action { padding: 1.125rem 1.25rem; } .aui-nav--tab .aui-nav__indicator { top: 0; height: 100%; -webkit-transform: none; transform: none; background: #e5e5e5; } .aui-nav--tab.aui-nav--small { height: 2.5rem; } .aui-nav--tab.aui-nav--small .aui-nav__action { padding: 0.875rem 1rem; } .aui-nav--tab.aui-nav--overlap { margin-top: -3.25rem; } /** * Modifier: dropdown */ .aui-nav--dropdown { color: rgba(0, 0, 0, 0.5); } .aui-nav--dropdown.is-active { z-index: 1000; } .aui-nav--dropdown .aui-nav__toggle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; padding: 0.625rem 0; width: 100%; border: 0; background: none; outline: none; line-height: 1; text-align: left; color: #000000; } .aui-nav--dropdown .aui-nav__toggle-label { display: block; position: relative; pointer-events: none; padding-right: 18px; } .aui-nav--dropdown .aui-nav__toggle-label::after { content: ''; display: block; position: absolute; top: 50%; right: 0; width: 13px; height: 8px; margin-top: -4px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpolygon fill='rgba(0, 0, 0, 0.6)' points='6.511 7.371 0 0.715 0.731 0 6.51 5.907 12.267 0 13 0.714 6.511 7.371'/%3E%3C/svg%3E") center center no-repeat; transition-property: background, -webkit-transform; transition-property: transform, background; transition-property: transform, background, -webkit-transform; transition-duration: 0.25s; transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1); } .aui-nav--dropdown.is-active .aui-nav__toggle-label::after { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .aui-nav--dropdown .aui-nav__underline { display: block; position: relative; top: -1px; height: 1px; background: rgba(0, 0, 0, 0.5); z-index: 1; } .aui-nav--dropdown .aui-nav__underline::after { content: ''; display: block; opacity: 0; position: absolute; top: 1px; width: 100%; height: 1px; background: inherit; transition: opacity .25s linear; } .aui-nav--dropdown.is-active .aui-nav__underline::after { opacity: 1; } .aui-nav--dropdown .aui-nav__panel { position: absolute; top: 100%; width: 100%; opacity: 0; visibility: hidden; background: #e5e5e5; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05), 0 0 50px 0 rgba(0, 0, 0, 0.07); transition: opacity .3s, visibility .3s; transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1); z-index: 1000; } .aui-nav--dropdown.is-active .aui-nav__panel { visibility: visible; opacity: 1; } .aui-nav--dropdown .aui-nav__items { max-height: 0; overflow: hidden; padding: 0.5rem 0; transition: max-height 0s .3s; } .aui-nav--dropdown.is-active .aui-nav__items { max-height: 10000px; transition-delay: 0s; } .aui-nav--dropdown .aui-nav__item { opacity: 0; margin: 0 1.25rem; -webkit-transform: translateY(10%); transform: translateY(10%); transition-property: opacity, -webkit-transform; transition-property: transform, opacity; transition-property: transform, opacity, -webkit-transform; transition-duration: .3s; transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1); transition-delay: 0s; } .aui-nav--dropdown .aui-nav__item:not(:last-child) { border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .aui-nav--dropdown.is-active .aui-nav__item { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .aui-nav--dropdown .aui-nav__action { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1.25rem 0; } .aui-nav--dropdown.aui-nav--sticky { position: -webkit-sticky; position: sticky; top: 0; z-index: 1001; } .aui-nav--dropdown.aui-nav--sticky .aui-nav__toggle { background: #ffffff; } .aui-nav--dropdown.is-sticky .aui-nav__toggle { padding: 1.125rem 4.375%; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05), 0 0 50px 0 rgba(0, 0, 0, 0.07); z-index: 1001; } .aui-nav--dropdown.is-sticky .aui-nav__toggle { position: fixed; top: 0; left: 0; width: 100%; } .aui-nav--dropdown.is-sticky .aui-nav__panel { position: fixed; top: 3.25rem; left: 0; } .aui-nav--dropdown.is-sticky .aui-nav__underline { opacity: 0; } .aui-nav--dropdown.is-sticky .aui-nav__item { margin-left: 4.375%; margin-right: 4.375%; } .aui-notification { position: relative; width: 18.5rem; font-size: 14px; line-height: 20px; -webkit-transform: translateY(30px); transform: translateY(30px); transition: height 0.4s cubic-bezier(0.75, 0.02, 0.5, 1) 0.4s, margin 0.4s cubic-bezier(0.75, 0.02, 0.5, 1) 0.4s, opacity 0.4s cubic-bezier(0.75, 0.02, 0.5, 1), visibility 0.4s cubic-bezier(0.75, 0.02, 0.5, 1), box-shadow 0.4s cubic-bezier(0.75, 0.02, 0.5, 1), -webkit-transform 0.4s cubic-bezier(0.75, 0.02, 0.5, 1); transition: height 0.4s cubic-bezier(0.75, 0.02, 0.5, 1) 0.4s, margin 0.4s cubic-bezier(0.75, 0.02, 0.5, 1) 0.4s, opacity 0.4s cubic-bezier(0.75, 0.02, 0.5, 1), visibility 0.4s cubic-bezier(0.75, 0.02, 0.5, 1), transform 0.4s cubic-bezier(0.75, 0.02, 0.5, 1), box-shadow 0.4s cubic-bezier(0.75, 0.02, 0.5, 1); transition: height 0.4s cubic-bezier(0.75, 0.02, 0.5, 1) 0.4s, margin 0.4s cubic-bezier(0.75, 0.02, 0.5, 1) 0.4s, opacity 0.4s cubic-bezier(0.75, 0.02, 0.5, 1), visibility 0.4s cubic-bezier(0.75, 0.02, 0.5, 1), transform 0.4s cubic-bezier(0.75, 0.02, 0.5, 1), box-shadow 0.4s cubic-bezier(0.75, 0.02, 0.5, 1), -webkit-transform 0.4s cubic-bezier(0.75, 0.02, 0.5, 1); margin-bottom: 0.25rem; opacity: 0; visibility: hidden; } @media (min-width: 740px) { .aui-notification { font-size: 14px; line-height: 20px; } } @media (min-width: 1264px) { .aui-notification { font-size: 15px; line-height: 24px; } } @media (min-width: 1584px) { .aui-notification { font-size: 16px; line-height: 24px; } } .aui-notification-container { position: fixed; right: 0.75rem; top: 0.75rem; z-index: 1701; } .aui-notification__content { position: relative; margin-right: 27px; padding: 0.75rem 1.5rem 0.75rem 0.75rem; } .aui-notification__close { position: absolute; top: 0.75rem; right: 0.75rem; width: 17px; height: 17px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' %3E%3Cpath fill='%23333333' d='M8.487,7.78l7.78,-7.777c0.235,0.236 0.471,0.472 0.707,0.707l-7.78,7.777l7.777,7.78l-0.708,0.707l-7.776,-7.78l-7.78,7.777l-0.707,-0.708l7.78,-7.776l-7.777,-7.78l0.707,-0.707l7.777,7.78Z' /%3E%3C/svg%3E") center center no-repeat; cursor: pointer; vertical-align: middle; outline: none; box-sizing: border-box; border: none; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } .aui-notification.aui-color-text-light .aui-notification__close, .aui-notification.aui-color-text-warning .aui-notification__close { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' %3E%3Cpath fill='%23f2f2f2' d='M8.487,7.78l7.78,-7.777c0.235,0.236 0.471,0.472 0.707,0.707l-7.78,7.777l7.777,7.78l-0.708,0.707l-7.776,-7.78l-7.78,7.777l-0.707,-0.708l7.78,-7.776l-7.777,-7.78l0.707,-0.707l7.777,7.78Z' /%3E%3C/svg%3E"); } .aui-notification.is-open { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; visibility: visible; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05), 0 0 50px 0 rgba(0, 0, 0, 0.07); transition-duration: 0.4s; } .aui-notification.is-closed { -webkit-transform: translateY(0); transform: translateY(0); overflow: hidden; height: 0 !important; } .aui-pager { list-style: none; padding-left: 0; font-weight: 400; color: rgba(0, 0, 0, 0.5); } .aui-pager__item { display: inline-block; } .aui-pager__current { color: black; } .aui-pager__next, .aui-pager__prev { transition: color .15s linear; } .aui-pager__prev { margin-right: 1em; } .aui-pager__next { margin-left: 1em; } .aui-pager__next-icon, .aui-pager__prev-icon { display: inline-block; width: .5em; height: .8125em; text-indent: 100%; overflow: hidden; -webkit-transform: translateY(0.0625em); transform: translateY(0.0625em); background-size: contain; background-repeat: no-repeat; background-position: center; } .aui-pager__next-icon svg, .aui-pager__prev-icon svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.1px; } .aui-pager__prev-icon { -webkit-transform: translateY(0.0625em) rotate(180deg); transform: translateY(0.0625em) rotate(180deg); } .aui-pager__next:hover:not(.is-disabled), .aui-pager__prev:hover:not(.is-disabled) { color: black; } .aui-pager__next.is-disabled, .aui-pager__prev.is-disabled { cursor: not-allowed; opacity: .30; pointer-events: none; } .aui-pagination { overflow: hidden; position: relative; height: 1.75rem; font-size: 1rem; line-height: 1.75rem; font-weight: 400; color: rgba(0, 0, 0, 0.5); } .aui-pagination__items { display: block; list-style: none; padding-left: 0; } .aui-pagination__items::after { content: ''; display: table; clear: both; } .aui-pagination__item { display: block; margin: 0 1em; float: left; } .aui-pagination__item:first-child { margin-left: 0; } .aui-pagination__item:last-child { margin-right: 0; } .aui-pagination__ellipsis, .aui-pagination__link, .aui-pagination__next, .aui-pagination__prev { transition: color .15s linear; } .aui-pagination__link.is-active, .aui-pagination__link:hover:not(.is-disabled), .aui-pagination__next:hover:not(.is-disabled), .aui-pagination__prev:hover:not(.is-disabled) { color: black; } .aui-pagination__next-icon, .aui-pagination__prev-icon { display: inline-block; width: .5em; height: .8125em; text-indent: 100%; overflow: hidden; -webkit-transform: translateY(0.0625em); transform: translateY(0.0625em); background-size: contain; background-repeat: no-repeat; background-position: center; } .aui-pagination__next-icon svg, .aui-pagination__prev-icon svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.1px; } .aui-pagination__prev-icon { -webkit-transform: translateY(0.0625em) rotate(180deg); transform: translateY(0.0625em) rotate(180deg); } .aui-pagination__indicator { pointer-events: none; display: block; position: absolute; bottom: 0; left: 0; width: 1px; height: 2px; background: black; z-index: 1; opacity: 0; } .is-animated .aui-pagination__indicator { opacity: 1; transition: left 0.3s cubic-bezier(0.75, 0.02, 0.5, 1), width 0.3s cubic-bezier(0.75, 0.02, 0.5, 1), opacity 0.3s cubic-bezier(0.75, 0.02, 0.5, 1); } [displaytype^='stepless'] .aui-pagination__indicator { display: none; } [pageCount^='0'] .aui-pagination__indicator { display: none; } .aui-pagination__link.is-disabled, .aui-pagination__next.is-disabled, .aui-pagination__prev.is-disabled { cursor: not-allowed; opacity: .30; pointer-events: none; } .aui-player { position: relative; overflow: hidden; width: 100%; height: 0; padding-bottom: 56.25%; color: #ffffff; background-color: #000000; background-position: center; background-repeat: no-repeat; background-size: cover; /** * States */ /** * Responsiveness */ } .aui-player-related-container { z-index: 1; display: flex; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); overflow: hidden; } .aui-player-related-container__replay { position: absolute; left: 5%; bottom: 19px; } .aui-player-related-container__replay .audiicon { width: 100%; height: 100%; } .aui-player-related-grid { display: flex; flex-flow: row nowrap; width: 90%; margin: 0 auto; overflow: hidden; } .aui-player-related-grid__cell { display: block; flex: 1 1 auto; width: 1px; margin: 0 0.25rem 0 0; } .aui-player-related-grid__cell:last-child { margin-right: 0; } .aui-player-related-content { display: block; width: 100%; padding: 0; outline: none; color: inherit; background: none; border: 0 none; font-size: 12px; line-height: 16px; font-weight: 400; letter-spacing: -0.015em; text-align: left; cursor: pointer; } .aui-player-related-content__image { display: block; width: 100%; height: auto; } .aui-player-related-content__title { display: block; margin-top: 0.5rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; padding-right: 1rem; } .aui-player__overlay { position: absolute; background: rgba(0, 0, 0, 0.5); top: 0; bottom: 0; left: 0; right: 0; } .aui-player__large-button { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; border: 1px solid #ffffff; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .aui-player__large-button .audiicon { position: absolute; left: 10px; top: 10px; width: 24px; height: 24px; } .aui-player__large-button, .aui-player__overlay { transition: opacity .2s linear .5s; } .aui-player.is-playing .aui-player__large-button, .aui-player.is-playing .aui-player__overlay { opacity: 0; } .aui-player:hover .aui-player__large-button, .aui-player:hover .aui-player__overlay { transition: opacity .2s linear; opacity: 1; } .aui-player__chrome { z-index: 3; display: flex; flex-flow: row nowrap; align-items: center; position: absolute; left: 0; bottom: 0; width: 100%; height: 60px; padding: 0 5%; font-size: 0.75rem; -webkit-transform: translateY(100%); transform: translateY(100%); transition: -webkit-transform 0.4s cubic-bezier(0.75, 0.02, 0.5, 1); transition: transform 0.4s cubic-bezier(0.75, 0.02, 0.5, 1); transition: transform 0.4s cubic-bezier(0.75, 0.02, 0.5, 1), -webkit-transform 0.4s cubic-bezier(0.75, 0.02, 0.5, 1); } .aui-player__chrome::after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 60px; background-color: rgba(0, 0, 0, 0.6); transition: height 0.2s cubic-bezier(0.75, 0.02, 0.5, 1) 0.1s; z-index: -1; } .aui-player__current-time, .aui-player__duration, .aui-player__fullscreen, .aui-player__mute, .aui-player__play { flex: 0 0 auto; } .aui-player__progress-control { flex: 1 1 auto; } .aui-player__current-time, .aui-player__duration { -webkit-transform: translateY(0.08333em); transform: translateY(0.08333em); } .aui-player__current-time { margin-left: 0.5rem; margin-right: 0.25rem; } .aui-player__current-time:first-child { margin-left: 0; } .aui-player__duration { margin-left: 0.25rem; margin-right: 0.5rem; } .aui-player__duration:last-child { margin-right: 0; } .aui-player__progress-control { position: relative; height: 100%; } .aui-player__progress-holder { position: absolute; top: 50%; width: 100%; height: 1px; background-color: #4c4c4c; } .aui-player__progress { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .aui-player__progress--loading { background-color: #808080; } .aui-player__progress--progress { background-color: #ffffff; } .aui-player__mute + .aui-player__fullscreen { margin-left: 0.5rem; } .aui-player__playhead { position: absolute; left: 0; top: 0; width: 0.75rem; height: 0.75rem; border: 1px solid #ffffff; border-radius: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #333333; z-index: 1; } .aui-player__seek-holder { position: absolute; top: 0; left: 0; width: 0; height: 100%; opacity: 0; transition: opacity .2s linear; } .aui-player__seek-marker { position: absolute; top: -0.375rem; right: 0; width: 1px; height: 0.75rem; background-color: #ffffff; } .aui-player__seek-time { position: absolute; bottom: 7px; right: 0; line-height: 2em; -webkit-transform: translateX(50%); transform: translateX(50%); z-index: 1; } .aui-player__preview { display: none; position: absolute; right: 0; -webkit-transform: translateX(50%); transform: translateX(50%); opacity: 0; transition: opacity .2s linear; } .aui-player__preview-image { width: 80px; height: 0; padding-bottom: 56.25%; background-position: center; background-size: cover; } .aui-player__icon-exit-fullscreen, .aui-player__icon-pause, .aui-player__icon-replay, .aui-player__icon-unmute { display: none; } .aui-player--preview .aui-player__preview, .aui-player--preview .aui-player__seek-time { bottom: 17px; } .aui-player--preview .aui-player__preview { display: block; } .aui-player.is-controlled .aui-player__chrome, .aui-player:hover .aui-player__chrome { -webkit-transform: translateY(0); transform: translateY(0); } .aui-player.is-seeking .aui-player__seek-holder { opacity: 1; transition-delay: .1s; } .aui-player.is-seeking .aui-player__preview { opacity: 1; transition-delay: .1s; } .aui-player.is-seeking.aui-player--preview .aui-player__chrome::after { height: 101px; transition-delay: 0s; } .aui-player.is-mute .aui-player__icon-mute { display: none; } .aui-player.is-mute .aui-player__icon-unmute { display: inline-block; } .aui-player.is-playing .aui-player__icon-play { display: none; } .aui-player.is-playing .aui-player__icon-pause { display: inline-block; } .aui-player.is-complete .aui-player__icon-pause, .aui-player.is-complete .aui-player__icon-play { display: none; } .aui-player.is-complete .aui-player__icon-replay { display: inline-block; } .aui-player.is-fullscreen .aui-player__icon-enter-fullscreen, .aui-player:-webkit-full-screen .aui-player__icon-enter-fullscreen { visibility: hidden; } .aui-player.is-fullscreen .aui-player__icon-enter-fullscreen, .aui-player:-moz-full-screen .aui-player__icon-enter-fullscreen { visibility: hidden; } .aui-player.is-fullscreen .aui-player__icon-enter-fullscreen, .aui-player:-ms-fullscreen .aui-player__icon-enter-fullscreen { visibility: hidden; } .aui-player.is-fullscreen .aui-player__icon-enter-fullscreen, .aui-player:fullscreen .aui-player__icon-enter-fullscreen { visibility: hidden; } .aui-player.is-fullscreen .aui-player__icon-exit-fullscreen, .aui-player:-webkit-full-screen .aui-player__icon-exit-fullscreen { visibility: visible; } .aui-player.is-fullscreen .aui-player__icon-exit-fullscreen, .aui-player:-moz-full-screen .aui-player__icon-exit-fullscreen { visibility: visible; } .aui-player.is-fullscreen .aui-player__icon-exit-fullscreen, .aui-player:-ms-fullscreen .aui-player__icon-exit-fullscreen { visibility: visible; } .aui-player.is-fullscreen .aui-player__icon-exit-fullscreen, .aui-player:fullscreen .aui-player__icon-exit-fullscreen { visibility: visible; } @media (min-width: 600px) { .aui-player__large-button { width: 72px; height: 72px; } .aui-player__large-button .audiicon { left: 12px; top: 12px; width: 48px; height: 48px; } .aui-player__large-button .audiicon-small { visibility: hidden; } .aui-player__large-button .audiicon-large { visibility: visible; } } @media (min-width: 740px) { .aui-player__chrome { font-size: 1rem; height: 120px; } .aui-player__chrome::after { height: 120px; } .aui-player__chrome .aui-button--icon { width: 45px; height: 45px; } .aui-player__chrome .aui-button--icon .audiicon { left: -1px; top: -1px; width: 48px; height: 48px; } .aui-player__chrome .aui-button--icon .audiicon-small { visibility: hidden; } .aui-player__chrome .aui-button--icon .audiicon-large { visibility: visible; } .aui-player__current-time { margin-left: 2.5rem; margin-right: 1.25rem; } .aui-player__duration { margin-left: 1.25rem; margin-right: 2.5rem; } .aui-player__mute + .aui-player__fullscreen { margin-left: 1.25rem; } .aui-player__playhead { width: 1.25rem; height: 1.25rem; } .aui-player__seek-time { bottom: 20px; } .aui-player__seek-marker { top: -0.625rem; height: 1.25rem; } .aui-player__preview-image { width: 128px; height: 72px; } .aui-player-related-container__replay { bottom: 38px; width: 44px; height: 44px; } .aui-player .audiicon-small { visibility: hidden; } .aui-player .audiicon-large { visibility: visible; } .aui-player.aui-player--preview .aui-player__preview, .aui-player.aui-player--preview .aui-player__seek-time { bottom: 31px; } .aui-player.is-seeking.aui-player--preview .aui-player__chrome::after { height: 182px; } } @media (min-width: 960px) { .aui-player-related-content { font-family: 'AudiTypeExtended', Verdana, Geneva, sans-serif; font-size: 14px; line-height: 20px; } } @media (min-width: 1264px) { .aui-player-related-content { font-size: 16px; line-height: 24px; } .aui-player__preview-image { width: 160px; height: 90px; } .aui-player.is-seeking.aui-player--preview .aui-player__chrome::after { height: 200px; } } /** * Prevent zooming of body, when popover is open. * Added to body by JS. */ .aui-popover-is-open { overflow-x: hidden; } .aui-popover { display: block; position: absolute; top: 0; left: 0; padding: 2px; width: 0; height: 0; font-size: 0.875rem; line-height: 1.25rem; text-align: left; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .15s linear, visibility .15s linear; z-index: 1002; /** * States */ } .aui-popover.aui-tether-enabled { width: 90vw; max-width: 22em; height: auto; overflow: visible; visibility: visible; } .aui-popover__content { position: relative; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05), 0 0 50px 0 rgba(0, 0, 0, 0.07); } .aui-popover__content:not([class^="aui-color-"]):not([class*=" aui-color-"]) { background-color: #ffffff; } .aui-popover__text { display: block; position: relative; padding: 1rem; background-color: inherit; z-index: 1; } .aui-popover__media { display: block; position: relative; width: 100%; height: auto; z-index: 1; } .aui-popover__arrow { display: block; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; fill: #ffffff; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .aui-popover__arrow-shape { display: block; } .aui-popover.aui-tether-element-attached-top { margin-top: 12px; } .aui-popover.aui-tether-element-attached-top .aui-popover__arrow { top: 0; } .aui-popover.aui-tether-element-attached-bottom { margin-top: -12px; } .aui-popover.aui-tether-element-attached-bottom .aui-popover__arrow { top: 100%; } .aui-popover.aui-tether-element-attached-left { padding-left: 12px; } .aui-popover.aui-tether-element-attached-left .aui-popover__arrow { left: 0; } .aui-popover.aui-tether-element-attached-right { padding-right: 12px; } .aui-popover.aui-tether-element-attached-right .aui-popover__arrow { left: 100%; } .aui-popover.aui-tether-element-attached-middle.aui-tether-pinned-right { left: 0 !important; padding-right: 12px; } .aui-popover.aui-tether-element-attached-middle.aui-tether-pinned-right .aui-popover__arrow { left: 100%; } .aui-popover.aui-tether-element-attached-middle.aui-tether-pinned-left { right: 0; left: auto !important; padding-left: 12px; } .aui-popover.aui-tether-element-attached-middle.aui-tether-pinned-left .aui-popover__arrow { left: 0; } .aui-popover.is-shown { opacity: 1; visibility: visible; transition-duration: .25s; } .aui-progress { position: relative; height: 0.25rem; background: rgba(0, 0, 0, 0.1); overflow: hidden; } .aui-progress__bar { display: block; position: absolute; top: 0; left: 0; height: 100%; width: 50%; background: #bb0a30; } .aui-progress--continuous .aui-progress__bar { -webkit-animation: aui-progress 2s linear infinite; animation: aui-progress 2s linear infinite; } @-webkit-keyframes aui-progress { from { left: -55%; width: 55%; } 50% { width: 30%; } 70% { width: 70%; } 80% { left: 50%; } 95% { left: 120%; } to { left: 100%; } } @keyframes aui-progress { from { left: -55%; width: 55%; } 50% { width: 30%; } 70% { width: 70%; } 80% { left: 50%; } 95% { left: 120%; } to { left: 100%; } } .aui-radio { display: inline-block; position: relative; font-weight: 400; line-height: 1.5; color: #333333; cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } .aui-js .aui-radio { padding-left: 2.5em; } .aui-radio__box { display: none; overflow: hidden; position: absolute; top: 0; left: 0; width: 1.5em; height: 1.5em; border: 1px solid rgba(0, 0, 0, 0.5); border-radius: 50%; transition: box-shadow .15s linear, border .15s linear; cursor: pointer; pointer-events: none; z-index: 1; } .aui-js .aui-radio__box { display: inline-block; } .aui-radio__tick { display: block; position: absolute; top: 50%; left: 50%; width: 1.5em; height: 1.5em; -webkit-transform: translate(-50%, -50%) scale(0.33333, 0.33333); transform: translate(-50%, -50%) scale(0.33333, 0.33333); border-radius: 50%; background: rgba(0, 0, 0, 0.1); transition: background 0.15s linear, -webkit-transform 0.15s cubic-bezier(0.75, 0.02, 0.5, 1); transition: transform 0.15s cubic-bezier(0.75, 0.02, 0.5, 1), background 0.15s linear; transition: transform 0.15s cubic-bezier(0.75, 0.02, 0.5, 1), background 0.15s linear, -webkit-transform 0.15s cubic-bezier(0.75, 0.02, 0.5, 1); pointer-events: none; } .aui-radio:hover:not(.is-disabled) { color: #000000; } .aui-radio:hover:not(.is-disabled) .aui-radio__box { border-color: black; } .aui-radio:hover:not(.is-disabled) .aui-radio__tick { -webkit-transform: translate(-50%, -50%) scale(0.41667, 0.41667); transform: translate(-50%, -50%) scale(0.41667, 0.41667); } .aui-radio__input:focus ~ .aui-radio__box { box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1); } .aui-radio.is-disabled { opacity: 0.3; cursor: not-allowed; } .aui-radio.is-checked .aui-radio__tick { background: rgba(0, 0, 0, 0.8); -webkit-transform: translate(-50%, -50%) scale(0.5, 0.5); transform: translate(-50%, -50%) scale(0.5, 0.5); } .aui-response { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none; } .aui-response__effect { content: ''; display: block; position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; } .aui-response__effect--large { width: 60px; height: 60px; margin: -30px 0 0 -30px; } .aui-response--masked { overflow: hidden; } .aui-response.is-animating .aui-response__effect { -webkit-animation: aui-response-dark 0.6s cubic-bezier(0.75, 0.02, 0.5, 1) both; animation: aui-response-dark 0.6s cubic-bezier(0.75, 0.02, 0.5, 1) both; } .aui-response.aui-theme-light.is-animating .aui-response__effect, .aui-button.aui-theme-light .aui-response.is-animating .aui-response__effect { -webkit-animation: aui-response-light 0.6s cubic-bezier(0.75, 0.02, 0.5, 1) both; animation: aui-response-light 0.6s cubic-bezier(0.75, 0.02, 0.5, 1) both; } /** * Invert effect, when used with Primary Button */ .aui-button--primary .aui-response.is-animating .aui-response__effect { -webkit-animation: aui-response-light 0.6s cubic-bezier(0.75, 0.02, 0.5, 1) both; animation: aui-response-light 0.6s cubic-bezier(0.75, 0.02, 0.5, 1) both; } .aui-button--primary.aui-theme-light .aui-response.is-animating .aui-response__effect { -webkit-animation: aui-response-dark 0.6s cubic-bezier(0.75, 0.02, 0.5, 1) both; animation: aui-response-dark 0.6s cubic-bezier(0.75, 0.02, 0.5, 1) both; } /** * Animations */ @-webkit-keyframes aui-response-dark { 0% { opacity: 1; box-shadow: inset 0 0 0 30px rgba(153, 153, 153, 0.3); -webkit-transform: scale3d(0.01, 0.01, 1); transform: scale3d(0.01, 0.01, 1); } 100% { opacity: 0; box-shadow: inset 0 0 0 1px #999999; -webkit-transform: scale3d(1.7, 1.7, 1); transform: scale3d(1.7, 1.7, 1); } } @keyframes aui-response-dark { 0% { opacity: 1; box-shadow: inset 0 0 0 30px rgba(153, 153, 153, 0.3); -webkit-transform: scale3d(0.01, 0.01, 1); transform: scale3d(0.01, 0.01, 1); } 100% { opacity: 0; box-shadow: inset 0 0 0 1px #999999; -webkit-transform: scale3d(1.7, 1.7, 1); transform: scale3d(1.7, 1.7, 1); } } @-webkit-keyframes aui-response-light { 0% { opacity: 1; box-shadow: inset 0 0 0 30px rgba(255, 255, 255, 0.3); -webkit-transform: scale3d(0.01, 0.01, 1); transform: scale3d(0.01, 0.01, 1); } 100% { opacity: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7); -webkit-transform: scale3d(1.7, 1.7, 1); transform: scale3d(1.7, 1.7, 1); } } @keyframes aui-response-light { 0% { opacity: 1; box-shadow: inset 0 0 0 30px rgba(255, 255, 255, 0.3); -webkit-transform: scale3d(0.01, 0.01, 1); transform: scale3d(0.01, 0.01, 1); } 100% { opacity: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7); -webkit-transform: scale3d(1.7, 1.7, 1); transform: scale3d(1.7, 1.7, 1); } } .aui-select { display: block; position: relative; margin: 0; padding: 0; font-size: 1rem; line-height: 1.5; box-sizing: border-box; /** * Variant: floating-label */ /** * States */ } .aui-select__input { display: block; margin: 0; padding-right: 1.3125rem; width: 100%; min-height: 2.5rem; font-size: inherit; font-weight: 400; line-height: inherit; color: rgba(0, 0, 0, 0.6); background: none; border: none; border-bottom: 1px solid rgba(0, 0, 0, 0.3); border-radius: 0; box-shadow: none; transition: color, border; transition-duration: 0.25s; transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1); -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; } .aui-select__input::-ms-expand { display: none; } .aui-select__input::-ms-value { background: none; color: rgba(0, 0, 0, 0.6); } .aui-select__input option { color: #333333; background: white; } .aui-select__input option:disabled { color: rgba(0, 0, 0, 0.6); } @-moz-document url-prefix() { .aui-select .aui-select__input { padding-top: 0.5625em; } } .aui-select__label { display: block; position: absolute; top: 0.5rem; right: 0; bottom: 0; left: 0; width: 100%; color: rgba(0, 0, 0, 0.6); font-size: inherit; font-weight: 400; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition-property: top, font-size, color, opacity; transition-duration: 0.25s; transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1); opacity: 0; pointer-events: none; } .aui-select::after { content: ''; display: block; position: absolute; top: 1.3125rem; right: 0; width: 13px; height: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpolygon fill='rgba(0, 0, 0, 0.6)' points='6.511 7.371 0 0.715 0.731 0 6.51 5.907 12.267 0 13 0.714 6.511 7.371'/%3E%3C/svg%3E") center center no-repeat; -webkit-transform: translateY(-50%); transform: translateY(-50%); transition: background .25s linear; pointer-events: none; } .aui-select__focus-line { display: block; position: relative; width: 100%; margin-top: -2px; height: 1px; background: rgba(0, 0, 0, 0.8); opacity: 0; transition-property: opacity, background; transition-duration: 0.25s; } .aui-select__description, .aui-select__error { display: block; color: rgba(0, 0, 0, 0.5); transition: color 0.25s linear; margin-top: 0.5rem; font-size: 0.8125rem; line-height: 1.25rem; } .aui-select__error { color: #bb0a30; } .aui-select.aui-select--floating-label { padding-top: 0.6875rem; } .aui-select.aui-select--floating-label::after { top: 2rem; } .aui-js .aui-select.aui-select--floating-label .aui-select__label { top: 1.1875rem; } .aui-select:not(.is-disabled):not(.is-invalid) .aui-select__input:hover { border-color: rgba(0, 0, 0, 0.8); } .aui-select.is-focused .aui-select__label { opacity: 0; } .aui-select.is-focused.aui-select--floating-label .aui-select__label { top: 0; font-size: .75rem; opacity: 1; } .aui-select.is-focused .aui-select__input { outline: none; box-shadow: none; border-color: rgba(0, 0, 0, 0.8); } .aui-select.is-focused .aui-select__focus-line { opacity: 1; } .aui-select.is-disabled { opacity: 0.3; cursor: not-allowed; } .aui-select.is-disabled .aui-select__input { cursor: not-allowed; } .aui-select.is-disabled .aui-select__focus-line { opacity: 0; } .aui-select.is-dirty::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpolygon fill='%23333333' points='6.511 7.371 0 0.715 0.731 0 6.51 5.907 12.267 0 13 0.714 6.511 7.371'/%3E%3C/svg%3E"); } .aui-select.is-dirty .aui-select__label { opacity: 0; } .aui-select.is-dirty.aui-select--floating-label .aui-select__label { top: 0; font-size: .75rem; opacity: 1; } .aui-select.is-dirty .aui-select__input { border-color: rgba(0, 0, 0, 0.8); color: #333333; } .aui-select.is-dirty .aui-select__input::-ms-value { color: #333333; } .aui-select.is-invalid, .aui-select.is-invalid:not(.is-dirty) .aui-select__input, .aui-select.is-invalid .aui-select__label { color: #bb0a30; } .aui-select.is-invalid::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpolygon fill='%23bb0a30' points='6.511 7.371 0 0.715 0.731 0 6.51 5.907 12.267 0 13 0.714 6.511 7.371'/%3E%3C/svg%3E"); } .aui-select.is-invalid .aui-select__input { border-color: #bb0a30; } .aui-select.is-invalid .aui-select__focus-line { background: #bb0a30; } /** * NOTE * The Slider AUI component relies on the 3rd party library * noUiSlider by Leon Gersen * @see https://refreshless.com/nouislider/ */ .aui-slider { position: relative; padding: 0; min-height: 1.5rem; color: #333333; /** * Customized noUiSlider Styles */ /** * States */ } .aui-slider__output { position: relative; font-size: 14px; } .aui-slider__target, .aui-slider__target * { -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; box-sizing: border-box; } .aui-slider__target { position: relative; direction: ltr; } .aui-slider__base { width: 100%; height: 100%; position: relative; z-index: 1; } .aui-slider__connect { position: absolute; right: 0; top: 0; left: 0; bottom: 0; } .aui-slider__origin { position: absolute; height: 0; width: 0; } .aui-slider__handle { position: relative; z-index: 1; } .aui-slider__state-tap .aui-slider__connect, .aui-slider__state-tap .aui-slider__origin { transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s; } .aui-slider__state-drag * { cursor: inherit !important; } .aui-slider__base, .aui-slider__handle { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .aui-slider__horizontal { height: 2px; } .aui-slider__vertical { width: 2px; } .aui-slider__target { margin: 0 0.75rem; height: 1.5rem; } .aui-slider__target::after { content: ''; display: block; position: absolute; top: 50%; left: 0; right: 0; height: 2px; margin: 0 -0.75rem; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: #cccccc; } .aui-slider__connect::after { content: ''; display: block; position: absolute; top: 50%; left: 0; right: 0; height: 2px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: #000000; } .aui-slider.aui-slider--single .aui-slider__connect::after { margin-left: -0.75rem; } .aui-slider__draggable { cursor: ew-resize; } .aui-slider__vertical .aui-slider__draggable { cursor: ns-resize; } .aui-slider__handle { position: relative; width: 1.5rem; height: 1.5rem; background: #ffffff; border-radius: 50%; border: 1px solid #808080; -webkit-transform: translateX(-50%); transform: translateX(-50%); transition: border .15s linear; cursor: pointer; } .aui-slider:not(.is-disabled) .aui-slider__handle:hover { border-color: #000000; } .aui-slider__handle[disabled], [disabled] .aui-slider__handle, [disabled] .aui-slider__target { cursor: not-allowed; } .aui-slider__pips, .aui-slider__pips * { box-sizing: border-box; } .aui-slider__pips { position: absolute; color: #999; } .aui-slider__value { position: absolute; text-align: center; } .aui-slider__value-sub { color: #ccc; font-size: 10px; } .aui-slider__marker { position: absolute; background: #CCC; } .aui-slider__marker-sub { background: #AAA; } .aui-slider__marker-large { background: #AAA; } .aui-slider__pips-horizontal { padding: 10px 0; height: 80px; top: 100%; left: 0; width: 100%; } .aui-slider__value-horizontal { -webkit-transform: translate3d(-50%, 50%, 0); transform: translate3d(-50%, 50%, 0); } .aui-slider__marker-horizontal.aui-slider__marker { margin-left: -1px; width: 2px; height: 5px; } .aui-slider__marker-horizontal.aui-slider__marker-sub { height: 10px; } .aui-slider__marker-horizontal.aui-slider__marker-large { height: 15px; } .aui-slider__pips-vertical { padding: 0 10px; height: 100%; top: 0; left: 100%; } .aui-slider__value-vertical { -webkit-transform: translate3d(0, 50%, 0); transform: translate3d(0, 50%, 0); padding-left: 25px; } .aui-slider__marker-vertical.aui-slider__marker { width: 5px; height: 2px; margin-top: -1px; } .aui-slider__marker-vertical.aui-slider__marker-sub { width: 10px; } .aui-slider__marker-vertical.aui-slider__marker-large { width: 15px; } .aui-slider__tooltip { display: block; position: absolute; border: 1px solid #D9D9D9; border-radius: 3px; background: #fff; color: #000; padding: 5px; text-align: center; } .aui-slider__horizontal .aui-slider__tooltip { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); left: 50%; bottom: 120%; } .aui-slider__vertical .aui-slider__tooltip { -webkit-transform: translate(0, -50%); transform: translate(0, -50%); top: 50%; right: 120%; } .aui-slider.is-disabled { opacity: 0.3; cursor: not-allowed; } .aui-slider.is-disabled .aui-slider__handle, .aui-slider.is-disabled .aui-slider__draggable { cursor: not-allowed; } .aui-indicator { display: inline-block; position: relative; font-family: serif; height: 0.5rem; line-height: 0.5rem; } .aui-indicator__items { padding-left: 0; list-style: none; } .aui-indicator__items::after { content: ''; display: table; clear: both; } .aui-indicator__item { float: left; margin-left: 0.25rem; } .aui-indicator__item:first-child { margin-left: 0; } .aui-indicator__action { display: block; width: 1.25rem; height: 0.5rem; overflow: hidden; text-indent: 100%; white-space: nowrap; text-decoration: none; outline: 0; transition: background 0.15s linear; } .aui-indicator__action, .aui-indicator__action:visited { background: rgba(0, 0, 0, 0.2); } .aui-indicator__action:hover { background: rgba(0, 0, 0, 0.5); } .aui-indicator__indicator { pointer-events: none; display: block; position: absolute; top: 0; left: 0; width: 1.25rem; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 1; transition: left 0.3s cubic-bezier(0.75, 0.02, 0.5, 1); } .aui-indicator--shadow .aui-indicator__action { box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); } /** * NOTE * All animations happen in JS. */ .aui-spinner { display: inline-block; position: relative; width: 6rem; height: 6rem; stroke: rgba(0, 0, 0, 0.6); font-size: 1rem; } .aui-spinner__svg { width: 100%; height: 100%; } .aui-spinner__path { stroke-miterlimit: 10; stroke-linecap: square; stroke-width: 1.1px; fill: none; } .aui-spinner__path--progress { stroke: #bb0a30; stroke-width: 3px; } .aui-spinner__value { display: block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; font-family: 'AudiTypeExtended', Verdana, Geneva, sans-serif; font-size: 1rem; line-height: 1; text-align: center; } .aui-spinner--continuous { width: 3rem; height: 3rem; } .aui-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .aui-switch { cursor: pointer; display: inline-block; position: relative; font-weight: 400; min-width: 3em; cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /** * Variant: text-left */ /** * Variant: equal */ /** * States */ } .aui-switch::after { content: '.'; display: inline-block; width: 0; visibility: hidden; } .aui-switch__text { display: inline-block; padding-left: 4em; color: #333333; transition: color .15s linear; } .aui-switch__track { display: inline-block; position: absolute; top: .125em; left: 0; width: 3em; height: 1.5em; border: 1px solid rgba(0, 0, 0, 0.5); border-radius: 0.75em; vertical-align: middle; transition: box-shadow .15s linear, border .15s linear; } .aui-switch__thumb { display: inline-block; position: absolute; top: 50%; left: .75em; width: 1.5em; height: 1.5em; border-radius: 50%; -webkit-transform: translate(-50%, -50%) scale(0.33333, 0.33333); transform: translate(-50%, -50%) scale(0.33333, 0.33333); background: rgba(0, 0, 0, 0.1); transition: left 0.3s cubic-bezier(0.75, 0.02, 0.5, 1), background 0.3s cubic-bezier(0.75, 0.02, 0.5, 1), -webkit-transform 0.15s cubic-bezier(0.75, 0.02, 0.5, 1); transition: transform 0.15s cubic-bezier(0.75, 0.02, 0.5, 1), left 0.3s cubic-bezier(0.75, 0.02, 0.5, 1), background 0.3s cubic-bezier(0.75, 0.02, 0.5, 1); transition: transform 0.15s cubic-bezier(0.75, 0.02, 0.5, 1), left 0.3s cubic-bezier(0.75, 0.02, 0.5, 1), background 0.3s cubic-bezier(0.75, 0.02, 0.5, 1), -webkit-transform 0.15s cubic-bezier(0.75, 0.02, 0.5, 1); } .aui-switch--text-left .aui-switch__text { padding-left: 0; padding-right: 4em; } .aui-switch--text-left .aui-switch__track { left: auto; right: 0; } .aui-switch--equal { display: inline-flex; } .aui-switch--equal .aui-switch__text { padding-left: 0; padding-right: 0; flex: 1 1 auto; order: 1; } .aui-switch--equal .aui-switch__text--left { margin-right: 1em; } .aui-switch--equal .aui-switch__text--right { order: 3; color: rgba(0, 0, 0, 0.5); margin-left: 1em; } .aui-switch--equal .aui-switch__track { position: relative; left: auto; flex: 0 0 3em; order: 2; } .aui-switch--equal .aui-switch__thumb { background: rgba(0, 0, 0, 0.8); -webkit-transform: translate(-50%, -50%) scale(0.5, 0.5); transform: translate(-50%, -50%) scale(0.5, 0.5); } .aui-switch:hover:not(.is-disabled) .aui-switch__text { color: #000000; } .aui-switch:hover:not(.is-disabled) .aui-switch__track { border-color: black; } .aui-switch:hover:not(.is-disabled) .aui-switch__track .aui-switch__thumb { -webkit-transform: translate(-50%, -50%) scale(0.41667, 0.41667); transform: translate(-50%, -50%) scale(0.41667, 0.41667); } .aui-switch--equal:hover:not(.is-disabled) .aui-switch__text--right { color: rgba(0, 0, 0, 0.5); } .aui-switch--equal:hover:not(.is-disabled) .aui-switch__input:checked ~ .aui-switch__text--left { color: rgba(0, 0, 0, 0.5); } .aui-switch--equal:hover:not(.is-disabled) .aui-switch__input:checked ~ .aui-switch__text--right { color: #000000; } .aui-switch__input:focus ~ .aui-switch__track { box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1); } .aui-switch.is-disabled { opacity: 0.3; cursor: not-allowed; } .aui-switch__input:checked ~ .aui-switch__track .aui-switch__thumb { background: rgba(0, 0, 0, 0.8); -webkit-transform: translate(-50%, -50%) scale(0.5, 0.5); transform: translate(-50%, -50%) scale(0.5, 0.5); left: 2.125em; } .aui-switch--equal .aui-switch__input:checked ~ .aui-switch__text--left { color: rgba(0, 0, 0, 0.5); } .aui-switch--equal .aui-switch__input:checked ~ .aui-switch__text--right { color: #333333; } .aui-table { width: calc(100% + 1rem); margin-left: -0.5rem; overflow: auto; overflow-y: hidden; } .aui-table table { border-collapse: separate; border-spacing: 0.5rem; border-color: #000000; } .aui-table caption { font-weight: 700; text-align: left; padding: 1rem 0.5rem; } .aui-table tr { vertical-align: top; } .aui-table th { border-top: 3px solid #000000; font-weight: 700; text-align: left; } .aui-table th, .aui-table td { padding: 1rem 0.75rem 0.5rem 0; } .aui-table td { border-top: 1px solid #000000; } .aui-table__cell--colored { background-color: rgba(0, 0, 0, 0.1); } .aui-table__cell--last-row td { position: relative; } .aui-table__cell--last-row td::after { content: ''; display: block; position: absolute; bottom: -0.5rem; left: 0; right: 0; border-bottom: 1px solid #000000; } .aui-table--stretched table { width: 100%; } .aui-table--padded th, .aui-table--padded td { padding: 1rem 0.75rem; } .aui-textfield { display: block; position: relative; margin: 0; padding: 0.6875rem 0 0; font-size: 1rem; line-height: 1.5; stroke: #333333; /** * Variant: floating-label */ /** * Variant: multiline */ /** * Variant: icon */ /** * States */ } .aui-textfield__input { display: block; margin: 0; padding: 0.5em 0; width: 100%; min-height: 2.5rem; font-size: inherit; font-weight: 400; line-height: inherit; text-align: left; color: rgba(0, 0, 0, 0.6); background: none; border: none; transition: color 0.25s cubic-bezier(0.75, 0.02, 0.5, 1); resize: none; outline: 0; border-radius: 0; } .aui-textfield__field { position: relative; border-bottom: 1px solid rgba(0, 0, 0, 0.3); transition-property: border, padding; transition-duration: 0.25s; transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1); } .aui-textfield__label { display: block; position: absolute; top: 0; left: 0; width: 100%; color: rgba(0, 0, 0, 0.6); font-size: 0.75rem; font-weight: 400; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; transition-property: top, font-size, color, opacity; transition-duration: 0.25s; transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1); pointer-events: none; } .aui-textfield__focus-line { display: block; position: relative; width: 100%; margin-top: -2px; height: 1px; background: rgba(0, 0, 0, 0.8); opacity: 0; transition-property: opacity, background; transition-duration: 0.25s; } .aui-textfield__counter, .aui-textfield__description, .aui-textfield__error, .aui-textfield__valid { display: block; color: rgba(0, 0, 0, 0.5); transition: color 0.25s linear; margin-top: 0.5rem; font-size: 0.8125rem; line-height: 1.25rem; } .aui-textfield__counter { position: relative; height: 1.25rem; } .aui-textfield__counter-value { display: block; position: absolute; top: 0; right: 0; } .aui-textfield__counter ~ .aui-textfield__description, .aui-textfield__counter ~ .aui-textfield__error { margin-top: -1.25rem; padding-right: 4em; } .aui-textfield__valid { position: relative; } .aui-textfield__valid::before { content: ''; display: inline-block; margin-right: 0.5rem; width: 12px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon fill='rgba(0, 0, 0, 0.6)' points='4.945 12 0 7.699 0.667 6.92 4.708 10.435 11.132 0 12 0.543 4.945 12' /%3E%3C/svg%3E") center center no-repeat; } .aui-textfield__error { color: #bb0a30; } .aui-textfield .audiicon { position: absolute; top: 1.25rem; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .aui-js .aui-textfield { padding-top: 0; } .aui-js .aui-textfield .aui-textfield__label { top: 0.5rem; font-size: inherit; } .aui-textfield.aui-textfield--floating-label .aui-textfield__field { padding-top: 0.6875rem; } .aui-js .aui-textfield.aui-textfield--floating-label .aui-textfield__label { top: 1.1875rem; font-size: inherit; } .aui-textfield.aui-textfield--multiline { transition-property: padding; transition-duration: 0.25s; transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1); } .aui-textfield.aui-textfield--multiline .aui-textfield__field { padding-top: 1.25em; border: 1px solid rgba(0, 0, 0, 0.3); } .aui-textfield.aui-textfield--multiline .aui-textfield__label { top: 10px; left: 10px; } .aui-textfield.aui-textfield--multiline .aui-textfield__input { padding-left: 0.625em; padding-right: 0.625em; } .aui-js .aui-textfield.aui-textfield--multiline { padding-top: 0.8125em; } .aui-js .aui-textfield.aui-textfield--multiline .aui-textfield__field { padding-top: 0.4375em; } .aui-js .aui-textfield.aui-textfield--multiline .aui-textfield__label { top: 7px; } .aui-textfield--icon .aui-textfield__input, .aui-textfield--icon .aui-textfield__label { padding-left: 2rem; } .aui-textfield:not(.is-disabled):not(.is-invalid) .aui-textfield__field:hover { border-bottom-color: rgba(0, 0, 0, 0.8); } .aui-textfield.is-focused .aui-textfield__label { opacity: 0; } .aui-textfield.is-focused.aui-textfield--floating-label .aui-textfield__label { top: 0; font-size: 0.75rem; opacity: 1; } .aui-textfield.is-focused.aui-textfield--multiline { padding-top: 0; } .aui-textfield.is-focused.aui-textfield--multiline .aui-textfield__field { padding-top: 1.25em; } .aui-textfield.is-focused.aui-textfield--multiline .aui-textfield__label { top: 0.625em; font-size: 0.75rem; opacity: 1; } .aui-textfield.is-focused .aui-textfield__field { border-bottom-color: rgba(0, 0, 0, 0.8); } .aui-textfield.is-focused .aui-textfield__input { outline: none; box-shadow: none; } .aui-textfield.is-focused .aui-textfield__focus-line { opacity: 1; } .aui-textfield.is-disabled { opacity: 0.3; cursor: not-allowed; } .aui-textfield.is-disabled .aui-textfield__input { cursor: not-allowed; } .aui-textfield.is-disabled .aui-textfield__focus-line { opacity: 0; } .aui-textfield.is-dirty .aui-textfield__label { opacity: 0; } .aui-textfield.is-dirty.aui-textfield--floating-label .aui-textfield__label { top: 0; font-size: 0.75rem; opacity: 1; } .aui-textfield.is-dirty.aui-textfield--multiline { padding-top: 0; } .aui-textfield.is-dirty.aui-textfield--multiline .aui-textfield__field { padding-top: 1.25em; } .aui-textfield.is-dirty.aui-textfield--multiline .aui-textfield__label { top: 0.625em; font-size: 0.75rem; opacity: 1; } .aui-textfield.is-dirty .aui-textfield__field { border-bottom-color: rgba(0, 0, 0, 0.8); } .aui-textfield.is-dirty .aui-textfield__input { color: #333333; } .aui-textfield.is-invalid, .aui-textfield.is-invalid:not(.is-dirty) .aui-textfield__input, .aui-textfield.is-invalid .aui-textfield__counter, .aui-textfield.is-invalid .aui-textfield__label { color: #bb0a30; } .aui-textfield.is-invalid .aui-textfield__field { border-color: #bb0a30; } .aui-textfield.is-invalid .aui-textfield__focus-line { background: #bb0a30; } .aui-tooltip { pointer-events: none; display: block; position: fixed; top: -1000px; left: -1000px; max-width: 288px; font-size: .875rem; line-height: 1.25rem; color: #333333; background: #ffffff; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05), 0 0 50px 0 rgba(0, 0, 0, 0.07); opacity: 0; visibility: hidden; transition-property: opacity, visibility; transition-duration: 0.15s; transition-timing-function: linear; /** * Variant: Dark */ /** * States */ } .aui-tooltip__triangle { display: block; position: absolute; top: 0; left: 50%; background: inherit; } .aui-tooltip__triangle::after { content: ''; display: block; position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: center; transform-origin: center; background: inherit; } .aui-tooltip__text { display: inline-block; padding: 0.75rem 1.25rem; } .aui-tooltip__media { position: relative; z-index: 1; display: block; width: 100%; height: auto; } .aui-tooltip--dark { color: #ffffff; background: #4c4c4c; } .aui-tooltip.is-active { opacity: 1; visibility: visible; transition-duration: 0.25s; z-index: 1002; } .aui-tooltip.is-top .aui-tooltip__triangle { top: auto; bottom: 0; } html { font-size: 16px; line-height: 28px; } @media (min-width: 740px) { html { font-size: 16px; line-height: 28px; } } @media (min-width: 1264px) { html { font-size: 18px; line-height: 32px; } } @media (min-width: 1584px) { html { font-size: 20px; line-height: 36px; } } body { font-family: 'AudiTypeScreen', Verdana, Geneva, sans-serif; font-weight: 300; color: #333333; } .aui-headline-1, .aui-headline-2, .aui-headline-3, .aui-headline-4, .aui-headline-5 { font-family: 'AudiTypeExtended', Verdana, Geneva, sans-serif; font-weight: 400; letter-spacing: -0.015em; } .aui-headline-6 { font-family: 'AudiTypeScreen', Verdana, Geneva, sans-serif; } .aui-headline-1 { font-size: 46px; line-height: 52px; font-weight: 700; color: #000000; } @media (min-width: 740px) { .aui-headline-1 { font-size: 56px; line-height: 60px; } } @media (min-width: 1264px) { .aui-headline-1 { font-size: 83px; line-height: 92px; } } @media (min-width: 1584px) { .aui-headline-1 { font-size: 119px; line-height: 132px; } } .aui-color-text-light .aui-headline-1 { color: #ffffff; } .aui-headline-2 { font-size: 31px; line-height: 36px; } @media (min-width: 740px) { .aui-headline-2 { font-size: 35px; line-height: 44px; } } @media (min-width: 1264px) { .aui-headline-2 { font-size: 47px; line-height: 56px; } } @media (min-width: 1584px) { .aui-headline-2 { font-size: 61px; line-height: 72px; } } .aui-headline-3 { font-size: 21px; line-height: 24px; } @media (min-width: 740px) { .aui-headline-3 { font-size: 22px; line-height: 28px; } } @media (min-width: 1264px) { .aui-headline-3 { font-size: 26px; line-height: 32px; } } @media (min-width: 1584px) { .aui-headline-3 { font-size: 31px; line-height: 36px; } } .aui-headline-4 { font-size: 18px; line-height: 20px; } @media (min-width: 740px) { .aui-headline-4 { font-size: 19px; line-height: 24px; } } @media (min-width: 1264px) { .aui-headline-4 { font-size: 22px; line-height: 28px; } } @media (min-width: 1584px) { .aui-headline-4 { font-size: 25px; line-height: 32px; } } .aui-headline-5 { font-size: 16px; line-height: 20px; } @media (min-width: 740px) { .aui-headline-5 { font-size: 16px; line-height: 20px; } } @media (min-width: 1264px) { .aui-headline-5 { font-size: 18px; line-height: 24px; } } @media (min-width: 1584px) { .aui-headline-5 { font-size: 20px; line-height: 28px; } } .aui-headline-6 { font-size: 16px; line-height: 24px; font-weight: 700; } @media (min-width: 740px) { .aui-headline-6 { font-size: 16px; line-height: 24px; } } @media (min-width: 1264px) { .aui-headline-6 { font-size: 18px; line-height: 28px; } } @media (min-width: 1584px) { .aui-headline-6 { font-size: 20px; line-height: 32px; } } .aui-shortread { font-size: 16px; line-height: 24px; } @media (min-width: 740px) { .aui-shortread { font-size: 16px; line-height: 24px; } } @media (min-width: 1264px) { .aui-shortread { font-size: 18px; line-height: 28px; } } @media (min-width: 1584px) { .aui-shortread { font-size: 20px; line-height: 32px; } } .aui-color-text-light .aui-accentuated::before { border-top-color: #ffffff; } .aui-caption { font-size: 14px; line-height: 20px; } @media (min-width: 740px) { .aui-caption { font-size: 14px; line-height: 20px; } } @media (min-width: 1264px) { .aui-caption { font-size: 15px; line-height: 24px; } } @media (min-width: 1584px) { .aui-caption { font-size: 16px; line-height: 24px; } } .aui-big { font-size: 18px; line-height: 32px; } @media (min-width: 740px) { .aui-big { font-size: 19px; line-height: 32px; } } @media (min-width: 1264px) { .aui-big { font-size: 22px; line-height: 40px; } } @media (min-width: 1584px) { .aui-big { font-size: 25px; line-height: 44px; } } .aui-small { font-size: 12px; line-height: 20px; } @media (min-width: 740px) { .aui-small { font-size: 12px; line-height: 20px; } } @media (min-width: 1264px) { .aui-small { font-size: 12px; line-height: 20px; } } @media (min-width: 1584px) { .aui-small { font-size: 13px; line-height: 20px; } } .aui-blockquote { margin: 0; font-weight: normal; font-size: 18px; line-height: 28px; } @media (min-width: 740px) { .aui-blockquote { font-size: 19px; line-height: 28px; } } @media (min-width: 1264px) { .aui-blockquote { font-size: 22px; line-height: 32px; } } @media (min-width: 1584px) { .aui-blockquote { font-size: 25px; line-height: 36px; } } .aui-textlink { padding-bottom: 0.06125em; border-bottom: 1px solid rgba(0, 0, 0, 0.3); color: inherit; font-weight: 400; transition: color 0.3s linear, border 0.3s linear; } .aui-textlink:hover { color: #000000; border-bottom-color: #000000; } .aui-textlink:focus { outline: none; } .aui-color-text-light .aui-textlink { border-bottom-color: rgba(255, 255, 255, 0.3); } .aui-color-text-light .aui-textlink:hover { color: #ffffff; border-bottom-color: #ffffff; } .aui-visible { display: block !important; } .aui-visible-inline { display: inline !important; } .aui-visible-inline-block { display: inline-block !important; } .aui-hidden { display: none !important; } .aui-visible-tiny, .aui-visible-tiny-inline, .aui-visible-tiny-inline-block { display: none !important; } @media (min-width: 480px) { .aui-visible-tiny { display: block !important; } .aui-visible-tiny-inline { display: inline !important; } .aui-visible-tiny-inline-block { display: inline-block !important; } .aui-hidden-tiny { display: none !important; } } .aui-visible-xsmall, .aui-visible-xsmall-inline, .aui-visible-xsmall-inline-block { display: none !important; } @media (min-width: 600px) { .aui-visible-xsmall { display: block !important; } .aui-visible-xsmall-inline { display: inline !important; } .aui-visible-xsmall-inline-block { display: inline-block !important; } .aui-hidden-xsmall { display: none !important; } } .aui-visible-small, .aui-visible-small-inline, .aui-visible-small-inline-block { display: none !important; } @media (min-width: 740px) { .aui-visible-small { display: block !important; } .aui-visible-small-inline { display: inline !important; } .aui-visible-small-inline-block { display: inline-block !important; } .aui-hidden-small { display: none !important; } } .aui-visible-medium, .aui-visible-medium-inline, .aui-visible-medium-inline-block { display: none !important; } @media (min-width: 960px) { .aui-visible-medium { display: block !important; } .aui-visible-medium-inline { display: inline !important; } .aui-visible-medium-inline-block { display: inline-block !important; } .aui-hidden-medium { display: none !important; } } .aui-visible-large, .aui-visible-large-inline, .aui-visible-large-inline-block { display: none !important; } @media (min-width: 1264px) { .aui-visible-large { display: block !important; } .aui-visible-large-inline { display: inline !important; } .aui-visible-large-inline-block { display: inline-block !important; } .aui-hidden-large { display: none !important; } } .aui-visible-xlarge, .aui-visible-xlarge-inline, .aui-visible-xlarge-inline-block { display: none !important; } @media (min-width: 1424px) { .aui-visible-xlarge { display: block !important; } .aui-visible-xlarge-inline { display: inline !important; } .aui-visible-xlarge-inline-block { display: inline-block !important; } .aui-hidden-xlarge { display: none !important; } } .aui-visible-huge, .aui-visible-huge-inline, .aui-visible-huge-inline-block { display: none !important; } @media (min-width: 1584px) { .aui-visible-huge { display: block !important; } .aui-visible-huge-inline { display: inline !important; } .aui-visible-huge-inline-block { display: inline-block !important; } .aui-hidden-huge { display: none !important; } } .aui-audioplayer.aui-theme-light { color: #ffffff; } .aui-audioplayer.aui-theme-light .aui-button { fill: #ffffff; color: #ffffff; } .aui-audioplayer.aui-theme-light .aui-audioplayer__playhead { background-color: #333333; } .aui-audioplayer.aui-theme-light .aui-audioplayer__progress--loading { background-color: #808080; } .aui-audioplayer.aui-theme-light .aui-audioplayer__progress--progress { background-color: #ffffff; } .aui-audioplayer.aui-theme-light .aui-audioplayer__progress-holder { background-color: #4c4c4c; } .aui-audioplayer.aui-theme-light .aui-audioplayer__cover { background-color: #000000; } .aui-breadcrumb.aui-theme-black.is-oversized::after { background: linear-gradient(to right, #000000 5%, rgba(0, 0, 0, 0) 100%); } .aui-breadcrumb.aui-theme-silver.is-oversized::after { background: linear-gradient(to right, #b2b2b2 5%, rgba(178, 178, 178, 0) 100%); } .aui-breadcrumb.aui-theme-warmsilver.is-oversized::after { background: linear-gradient(to right, #b6b1a9 5%, rgba(182, 177, 169, 0) 100%); } .aui-breadcrumb.aui-theme-red.is-oversized::after { background: linear-gradient(to right, #bb0a30 5%, rgba(187, 10, 48, 0) 100%); } .aui-breadcrumb.aui-theme-black, .aui-breadcrumb.aui-theme-silver, .aui-breadcrumb.aui-theme-warmsilver, .aui-breadcrumb.aui-theme-red { color: rgba(255, 255, 255, 0.6); } .aui-breadcrumb.aui-theme-black .aui-breadcrumb__item:last-child, .aui-breadcrumb.aui-theme-silver .aui-breadcrumb__item:last-child, .aui-breadcrumb.aui-theme-warmsilver .aui-breadcrumb__item:last-child, .aui-breadcrumb.aui-theme-red .aui-breadcrumb__item:last-child { color: white; } .aui-breadcrumb.aui-theme-black .aui-breadcrumb__item + .aui-breadcrumb__item::before, .aui-breadcrumb.aui-theme-silver .aui-breadcrumb__item + .aui-breadcrumb__item::before, .aui-breadcrumb.aui-theme-warmsilver .aui-breadcrumb__item + .aui-breadcrumb__item::before, .aui-breadcrumb.aui-theme-red .aui-breadcrumb__item + .aui-breadcrumb__item::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='8' viewBox='0 0 5 8'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='1px' fill='none' d='M0.5,0.5l3.24,3.252l-3.237,3.247' /%3E%3C/svg%3E"); } .aui-breadcrumb.aui-theme-black .aui-breadcrumb__action:hover, .aui-breadcrumb.aui-theme-silver .aui-breadcrumb__action:hover, .aui-breadcrumb.aui-theme-warmsilver .aui-breadcrumb__action:hover, .aui-breadcrumb.aui-theme-red .aui-breadcrumb__action:hover { color: rgba(255, 255, 255, 0.6); } .aui-breadcrumb.aui-theme-black .aui-breadcrumb__action:hover, .aui-breadcrumb.aui-theme-silver .aui-breadcrumb__action:hover, .aui-breadcrumb.aui-theme-warmsilver .aui-breadcrumb__action:hover, .aui-breadcrumb.aui-theme-red .aui-breadcrumb__action:hover { color: #fff; } .aui-button.aui-theme-light.is-active, .aui-button.aui-theme-light:active, .aui-button.aui-theme-light:hover { color: #e5e5e5; stroke: #e5e5e5; fill: #e5e5e5; } .aui-button.aui-theme-light, .aui-button.aui-theme-light.is-disabled, .aui-button.aui-theme-light:disabled { color: #ffffff; stroke: #ffffff; fill: #ffffff; } .aui-button.aui-theme-light.is-disabled, .aui-button.aui-theme-light:disabled { opacity: .30; } .aui-button--icon.aui-theme-light:focus, .aui-button--primary.aui-theme-light:focus, .aui-button--secondary.aui-theme-light:focus { box-shadow: 0 0 3px 3px rgba(255, 255, 255, 0.2); } .aui-button--icon.aui-theme-light.is-disabled, .aui-button--icon.aui-theme-light:disabled, .aui-button--icon.aui-theme-light:hover, .aui-button--primary.aui-theme-light.is-disabled, .aui-button--primary.aui-theme-light:disabled, .aui-button--primary.aui-theme-light:hover, .aui-button--secondary.aui-theme-light.is-disabled, .aui-button--secondary.aui-theme-light:disabled, .aui-button--secondary.aui-theme-light:hover { box-shadow: none; } .aui-button--primary.aui-theme-light, .aui-button--primary.aui-theme-light.is-active, .aui-button--primary.aui-theme-light:active, .aui-button--primary.aui-theme-light:hover, .aui-button--floating.aui-theme-light, .aui-button--floating.aui-theme-light.is-active, .aui-button--floating.aui-theme-light:active, .aui-button--floating.aui-theme-light:hover { color: #000000; stroke: #000000; fill: #000000; } .aui-button--primary.aui-theme-light.is-disabled, .aui-button--primary.aui-theme-light:disabled, .aui-button--floating.aui-theme-light.is-disabled, .aui-button--floating.aui-theme-light:disabled { color: rgba(0, 0, 0, 0.5); stroke: rgba(0, 0, 0, 0.5); fill: rgba(0, 0, 0, 0.5); } .aui-button--primary.aui-theme-light.is-active, .aui-button--primary.aui-theme-light:active, .aui-button--primary.aui-theme-light:hover, .aui-button--floating.aui-theme-light.is-active, .aui-button--floating.aui-theme-light:active, .aui-button--floating.aui-theme-light:hover { border-color: #e5e5e5; background-color: #e5e5e5; } .aui-button--primary.aui-theme-light, .aui-button--primary.aui-theme-light.is-disabled, .aui-button--primary.aui-theme-light:disabled, .aui-button--floating.aui-theme-light, .aui-button--floating.aui-theme-light.is-disabled, .aui-button--floating.aui-theme-light:disabled { border-color: #ffffff; background-color: #ffffff; } .aui-button--secondary.aui-theme-light.is-active, .aui-button--secondary.aui-theme-light:active, .aui-button--secondary.aui-theme-light:hover { border-color: #cccccc; } .aui-button--secondary.aui-theme-light, .aui-button--secondary.aui-theme-light.is-disabled, .aui-button--secondary.aui-theme-light:disabled { border-color: #ffffff; } .aui-button--text.aui-theme-light .aui-button__text::after { background-image: 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='%23ffffff' stroke-width='1px' fill='none' d='M1.5,1l5.485,5.504l-5.48,5.496' /%3E%3C/svg%3E"); } .aui-button--text.aui-theme-light .aui-button__text:hover::after { background-image: 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='%23e5e5e5' stroke-width='1px' fill='none' d='M1.5,1l5.485,5.504l-5.48,5.496' /%3E%3C/svg%3E"); } .aui-button--floating.aui-theme-light, .aui-button--floating.aui-theme-light:focus, .aui-button--floating.aui-theme-light:hover { box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 0 40px 0 rgba(0, 0, 0, 0.15); } .aui-button--fixed.aui-theme-light { box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 0 40px 0 rgba(0, 0, 0, 0.15); } .aui-checkbox { /** * Theme: light */ } .aui-checkbox.aui-theme-light { color: #f2f2f2; /** * States */ } .aui-checkbox.aui-theme-light .aui-checkbox__box { border-color: rgba(255, 255, 255, 0.5); } .aui-checkbox.aui-theme-light .aui-checkbox__tick { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon fill='%23f2f2f2' points='4.945 12 0 7.699 0.667 6.92 4.708 10.435 11.132 0 12 0.543 4.945 12' /%3E%3C/svg%3E"); } .aui-checkbox.aui-theme-light:hover:not(.is-disabled) { color: #ffffff; } .aui-checkbox.aui-theme-light:hover:not(.is-disabled) .aui-checkbox__box { border-color: white; } .aui-checkbox.aui-theme-light .aui-checkbox__input:focus ~ .aui-checkbox__box { box-shadow: 0 0 3px 3px rgba(255, 255, 255, 0.2); } .aui-checkbox.aui-theme-light.is-invalid, .aui-checkbox.aui-theme-light.is-invalid .aui-checkbox__label { color: #bb0a30; } .aui-checkbox.aui-theme-light.is-invalid .aui-checkbox__tick { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon fill='%23bb0a30' points='4.945 12 0 7.699 0.667 6.92 4.708 10.435 11.132 0 12 0.543 4.945 12' /%3E%3C/svg%3E"); } .aui-checkbox.aui-theme-light.is-invalid .aui-checkbox__box, .aui-checkbox.aui-theme-light.is-invalid:hover .aui-checkbox__box { border-color: #bb0a30; } .aui-draggable-list.aui-theme-light .aui-draggable-list__item { color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.2); } .aui-draggable-list.aui-theme-light .aui-draggable-list__item:hover { color: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.3); } .aui-draggable-list.aui-theme-light.is-dragging .aui-draggable-list__item, .aui-draggable-list.aui-theme-light.is-dragging .aui-draggable-list__item:hover { background: rgba(255, 255, 255, 0.1); } .aui-draggable-list.aui-theme-light.is-dragging .aui-draggable-list__item.is-active, .aui-draggable-list.aui-theme-light.is-dragging .aui-draggable-list__item:hover.is-active { color: rgba(255, 255, 255, 0.95); background: #666666; } .aui-draggable-list.aui-theme-light.is-dragging .is-placeholder, .aui-draggable-list.aui-theme-light.is-dragging .is-placeholder:hover { color: transparent; background: none; } .aui-draggable-list.aui-theme-light .is-placeholder::before { border-color: rgba(255, 255, 255, 0.1); } .aui-draggable-list.aui-theme-light .aui-draggable-list__item::after { background-image: url("data:image/svg+xml;dataset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='5' viewBox='0 0 16 5'%3E%3Crect style='fill:rgba(255, 255, 255, 0.8)' x='0' y='0' width='16' height='1' /%3E%3Crect style='fill:rgba(255, 255, 255, 0.8)' x='0' y='4' width='16' height='1' /%3E%3C/svg%3E"); } .aui-dropzone.aui-theme-light { color: #f2f2f2; border-color: rgba(255, 255, 255, 0.2); } .aui-dropzone.aui-theme-light.is-active, .aui-dropzone.aui-theme-light:hover { border-color: rgba(255, 255, 255, 0.8); } .aui-dropzone.aui-theme-light.aui-dropzone--fullpage { background: rgba(0, 0, 0, 0.9); } .aui-dropzone.aui-theme-light.aui-dropzone--fullpage::after { border-color: rgba(255, 255, 255, 0.8); } .aui-dropdown.aui-theme-black, .aui-dropdown.aui-theme-warmsilver, .aui-dropdown.aui-theme-silver { /** * States */ } .aui-dropdown.aui-theme-black .aui-dropdown__input, .aui-dropdown.aui-theme-warmsilver .aui-dropdown__input, .aui-dropdown.aui-theme-silver .aui-dropdown__input { color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.5); } .aui-dropdown.aui-theme-black .aui-dropdown__label, .aui-dropdown.aui-theme-warmsilver .aui-dropdown__label, .aui-dropdown.aui-theme-silver .aui-dropdown__label { color: rgba(255, 255, 255, 0.6); } .aui-dropdown.aui-theme-black .aui-dropdown__field::after, .aui-dropdown.aui-theme-warmsilver .aui-dropdown__field::after, .aui-dropdown.aui-theme-silver .aui-dropdown__field::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpolygon fill='rgba(255, 255, 255, 0.6)' points='6.511 7.371 0 0.715 0.731 0 6.51 5.907 12.267 0 13 0.714 6.511 7.371'/%3E%3C/svg%3E"); } .aui-dropdown.aui-theme-black .aui-dropdown__focus-line, .aui-dropdown.aui-theme-warmsilver .aui-dropdown__focus-line, .aui-dropdown.aui-theme-silver .aui-dropdown__focus-line { background: rgba(255, 255, 255, 0.8); } .aui-dropdown.aui-theme-black .aui-dropdown__description, .aui-dropdown.aui-theme-warmsilver .aui-dropdown__description, .aui-dropdown.aui-theme-silver .aui-dropdown__description, .aui-dropdown.aui-theme-black .aui-dropdown__error, .aui-dropdown.aui-theme-warmsilver .aui-dropdown__error, .aui-dropdown.aui-theme-silver .aui-dropdown__error { color: rgba(255, 255, 255, 0.5); } .aui-dropdown.aui-theme-black .aui-dropdown__error, .aui-dropdown.aui-theme-warmsilver .aui-dropdown__error, .aui-dropdown.aui-theme-silver .aui-dropdown__error { color: #bb0a30; } .aui-dropdown.aui-theme-black .aui-dropdown__panel, .aui-dropdown.aui-theme-warmsilver .aui-dropdown__panel, .aui-dropdown.aui-theme-silver .aui-dropdown__panel { background: #1a1a1a; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 0 40px 0 rgba(0, 0, 0, 0.15); } .aui-dropdown.aui-theme-black .aui-dropdown__list-title, .aui-dropdown.aui-theme-warmsilver .aui-dropdown__list-title, .aui-dropdown.aui-theme-silver .aui-dropdown__list-title { color: rgba(255, 255, 255, 0.3); } .aui-dropdown.aui-theme-black .aui-dropdown__option, .aui-dropdown.aui-theme-warmsilver .aui-dropdown__option, .aui-dropdown.aui-theme-silver .aui-dropdown__option { color: #f2f2f2; } .aui-dropdown.aui-theme-black .aui-dropdown__option:hover, .aui-dropdown.aui-theme-warmsilver .aui-dropdown__option:hover, .aui-dropdown.aui-theme-silver .aui-dropdown__option:hover { background: rgba(255, 255, 255, 0.1); } .aui-dropdown.aui-theme-black:not(.is-disabled):not(.is-invalid) .aui-dropdown__input:hover, .aui-dropdown.aui-theme-warmsilver:not(.is-disabled):not(.is-invalid) .aui-dropdown__input:hover, .aui-dropdown.aui-theme-silver:not(.is-disabled):not(.is-invalid) .aui-dropdown__input:hover { border-color: rgba(255, 255, 255, 0.8); } .is-focused.aui-dropdown.aui-theme-black .aui-dropdown__input, .is-focused.aui-dropdown.aui-theme-warmsilver .aui-dropdown__input, .is-focused.aui-dropdown.aui-theme-silver .aui-dropdown__input { border-color: rgba(255, 255, 255, 0.8); } .is-dirty.aui-dropdown.aui-theme-black .aui-dropdown__field::after, .is-dirty.aui-dropdown.aui-theme-warmsilver .aui-dropdown__field::after, .is-dirty.aui-dropdown.aui-theme-silver .aui-dropdown__field::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpolygon fill='%23f2f2f2' points='6.511 7.371 0 0.715 0.731 0 6.51 5.907 12.267 0 13 0.714 6.511 7.371'/%3E%3C/svg%3E"); } .is-dirty.aui-dropdown.aui-theme-black .aui-dropdown__input, .is-dirty.aui-dropdown.aui-theme-warmsilver .aui-dropdown__input, .is-dirty.aui-dropdown.aui-theme-silver .aui-dropdown__input { border-color: rgba(255, 255, 255, 0.8); color: #f2f2f2; } .is-invalid.aui-dropdown.aui-theme-black, .is-invalid.aui-dropdown.aui-theme-warmsilver, .is-invalid.aui-dropdown.aui-theme-silver, .is-invalid.aui-dropdown.aui-theme-black:not(.is-dirty) .aui-dropdown__input, .is-invalid.aui-dropdown.aui-theme-warmsilver:not(.is-dirty) .aui-dropdown__input, .is-invalid.aui-dropdown.aui-theme-silver:not(.is-dirty) .aui-dropdown__input, .is-invalid.aui-dropdown.aui-theme-black .aui-dropdown__counter, .is-invalid.aui-dropdown.aui-theme-warmsilver .aui-dropdown__counter, .is-invalid.aui-dropdown.aui-theme-silver .aui-dropdown__counter, .is-invalid.aui-dropdown.aui-theme-black .aui-dropdown__label, .is-invalid.aui-dropdown.aui-theme-warmsilver .aui-dropdown__label, .is-invalid.aui-dropdown.aui-theme-silver .aui-dropdown__label { color: #bb0a30; } .is-invalid.aui-dropdown.aui-theme-black .aui-dropdown__field::after, .is-invalid.aui-dropdown.aui-theme-warmsilver .aui-dropdown__field::after, .is-invalid.aui-dropdown.aui-theme-silver .aui-dropdown__field::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpolygon fill='%23bb0a30' points='6.511 7.371 0 0.715 0.731 0 6.51 5.907 12.267 0 13 0.714 6.511 7.371'/%3E%3C/svg%3E"); } .is-invalid.aui-dropdown.aui-theme-black .aui-dropdown__input, .is-invalid.aui-dropdown.aui-theme-warmsilver .aui-dropdown__input, .is-invalid.aui-dropdown.aui-theme-silver .aui-dropdown__input { border-color: #bb0a30; } .is-invalid.aui-dropdown.aui-theme-black .aui-dropdown__focus-line, .is-invalid.aui-dropdown.aui-theme-warmsilver .aui-dropdown__focus-line, .is-invalid.aui-dropdown.aui-theme-silver .aui-dropdown__focus-line { background: #bb0a30; } .aui-dropdown { /** * Theme: black */ /** * Theme: warmsilver */ /** * Theme: silver */ } .aui-dropdown.aui-theme-warmsilver .aui-dropdown__panel { background: #c2beb7; } .aui-dropdown.aui-theme-silver .aui-dropdown__panel { background: #bfbfbf; } .aui-fieldset { /** * Theme: light */ } .aui-fieldset.aui-theme-light { color: rgba(255, 255, 255, 0.6); } .aui-fieldset.aui-theme-light.aui-fieldset--selects .aui-fieldset__legend, .aui-fieldset.aui-theme-light.aui-fieldset--textfields .aui-fieldset__legend { color: #f2f2f2; } .aui-fieldset.aui-theme-light.is-invalid .aui-fieldset__error, .aui-fieldset.aui-theme-light.is-invalid .aui-fieldset__legend { color: #bb0a30; } .aui-flyout.aui-theme-light .aui-flyout__panel { color: rgba(255, 255, 255, 0.5); background: #333333; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 0 40px 0 rgba(0, 0, 0, 0.15); } .aui-flyout.aui-theme-light .aui-flyout__close { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' %3E%3Cpath fill='rgba(255, 255, 255, 0.5)' d='M8.487,7.78l7.78,-7.777c0.235,0.236 0.471,0.472 0.707,0.707l-7.78,7.777l7.777,7.78l-0.708,0.707l-7.776,-7.78l-7.78,7.777l-0.707,-0.708l7.78,-7.776l-7.777,-7.78l0.707,-0.707l7.777,7.78Z' /%3E%3C/svg%3E") center center no-repeat; } .aui-nav.aui-theme-black, .aui-nav.aui-theme-warmsilver, .aui-nav.aui-theme-silver, .aui-nav.aui-theme-red { color: rgba(255, 255, 255, 0.5); fill: rgba(255, 255, 255, 0.5); stroke: rgba(255, 255, 255, 0.5); /** * Modifier: List */ /** * Modifier: Dropdown */ } .aui-nav.aui-theme-black .aui-nav__action.is-active, .aui-nav.aui-theme-warmsilver .aui-nav__action.is-active, .aui-nav.aui-theme-silver .aui-nav__action.is-active, .aui-nav.aui-theme-red .aui-nav__action.is-active, .aui-nav.aui-theme-black .aui-nav__action:hover, .aui-nav.aui-theme-warmsilver .aui-nav__action:hover, .aui-nav.aui-theme-silver .aui-nav__action:hover, .aui-nav.aui-theme-red .aui-nav__action:hover { color: white; fill: white; stroke: white; } .aui-nav.aui-theme-black .aui-nav__action, .aui-nav.aui-theme-warmsilver .aui-nav__action, .aui-nav.aui-theme-silver .aui-nav__action, .aui-nav.aui-theme-red .aui-nav__action, .aui-nav.aui-theme-black .aui-nav__action.is-disabled, .aui-nav.aui-theme-warmsilver .aui-nav__action.is-disabled, .aui-nav.aui-theme-silver .aui-nav__action.is-disabled, .aui-nav.aui-theme-red .aui-nav__action.is-disabled { color: rgba(255, 255, 255, 0.5); fill: rgba(255, 255, 255, 0.5); stroke: rgba(255, 255, 255, 0.5); } .aui-nav.aui-theme-black .aui-nav__indicator, .aui-nav.aui-theme-warmsilver .aui-nav__indicator, .aui-nav.aui-theme-silver .aui-nav__indicator, .aui-nav.aui-theme-red .aui-nav__indicator { background: white; } .aui-nav.aui-theme-black .aui-nav__paddle-left::after, .aui-nav.aui-theme-warmsilver .aui-nav__paddle-left::after, .aui-nav.aui-theme-silver .aui-nav__paddle-left::after, .aui-nav.aui-theme-red .aui-nav__paddle-left::after, .aui-nav.aui-theme-black .aui-nav__paddle-right::after, .aui-nav.aui-theme-warmsilver .aui-nav__paddle-right::after, .aui-nav.aui-theme-silver .aui-nav__paddle-right::after, .aui-nav.aui-theme-red .aui-nav__paddle-right::after { background-image: 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='rgba(255, 255, 255, 0.5)' stroke-width='1px' fill='none' d='M1.5,1l5.485,5.504l-5.48,5.496' /%3E%3C/svg%3E"); } .aui-nav.aui-theme-black .aui-nav__paddle-left, .aui-nav.aui-theme-warmsilver .aui-nav__paddle-left, .aui-nav.aui-theme-silver .aui-nav__paddle-left, .aui-nav.aui-theme-red .aui-nav__paddle-left { background: linear-gradient(to right, black 40%, rgba(0, 0, 0, 0) 100%); } .aui-nav.aui-theme-black .aui-nav__paddle-right, .aui-nav.aui-theme-warmsilver .aui-nav__paddle-right, .aui-nav.aui-theme-silver .aui-nav__paddle-right, .aui-nav.aui-theme-red .aui-nav__paddle-right { background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, black 60%); } .aui-nav--tab.aui-nav.aui-theme-black .aui-nav__action.is-active, .aui-nav--tab.aui-nav.aui-theme-warmsilver .aui-nav__action.is-active, .aui-nav--tab.aui-nav.aui-theme-silver .aui-nav__action.is-active, .aui-nav--tab.aui-nav.aui-theme-red .aui-nav__action.is-active { color: black; } .aui-nav--tab.aui-nav.aui-theme-black .aui-nav__indicator, .aui-nav--tab.aui-nav.aui-theme-warmsilver .aui-nav__indicator, .aui-nav--tab.aui-nav.aui-theme-silver .aui-nav__indicator, .aui-nav--tab.aui-nav.aui-theme-red .aui-nav__indicator { background: #e5e5e5; } .aui-nav--list.aui-nav.aui-theme-black .aui-nav__item + .aui-nav__item, .aui-nav--list.aui-nav.aui-theme-warmsilver .aui-nav__item + .aui-nav__item, .aui-nav--list.aui-nav.aui-theme-silver .aui-nav__item + .aui-nav__item, .aui-nav--list.aui-nav.aui-theme-red .aui-nav__item + .aui-nav__item { border-color: rgba(255, 255, 255, 0.2); } .aui-nav--dropdown.aui-nav.aui-theme-black, .aui-nav--dropdown.aui-nav.aui-theme-warmsilver, .aui-nav--dropdown.aui-nav.aui-theme-silver, .aui-nav--dropdown.aui-nav.aui-theme-red { color: rgba(255, 255, 255, 0.5); } .aui-nav--dropdown.aui-nav.aui-theme-black .aui-nav__toggle, .aui-nav--dropdown.aui-nav.aui-theme-warmsilver .aui-nav__toggle, .aui-nav--dropdown.aui-nav.aui-theme-silver .aui-nav__toggle, .aui-nav--dropdown.aui-nav.aui-theme-red .aui-nav__toggle { color: white; } .aui-nav--dropdown.aui-nav.aui-theme-black .aui-nav__toggle-label::after, .aui-nav--dropdown.aui-nav.aui-theme-warmsilver .aui-nav__toggle-label::after, .aui-nav--dropdown.aui-nav.aui-theme-silver .aui-nav__toggle-label::after, .aui-nav--dropdown.aui-nav.aui-theme-red .aui-nav__toggle-label::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpolygon fill='rgba(255, 255, 255, 0.5)' points='6.511 7.371 0 0.715 0.731 0 6.51 5.907 12.267 0 13 0.714 6.511 7.371'/%3E%3C/svg%3E"); } .aui-nav--dropdown.aui-nav.aui-theme-black .aui-nav__item:not(:last-child), .aui-nav--dropdown.aui-nav.aui-theme-warmsilver .aui-nav__item:not(:last-child), .aui-nav--dropdown.aui-nav.aui-theme-silver .aui-nav__item:not(:last-child), .aui-nav--dropdown.aui-nav.aui-theme-red .aui-nav__item:not(:last-child) { border-color: rgba(255, 255, 255, 0.2); } .aui-nav--dropdown.aui-nav.aui-theme-black .aui-nav__panel, .aui-nav--dropdown.aui-nav.aui-theme-warmsilver .aui-nav__panel, .aui-nav--dropdown.aui-nav.aui-theme-silver .aui-nav__panel, .aui-nav--dropdown.aui-nav.aui-theme-red .aui-nav__panel { background: #333333; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 0 40px 0 rgba(0, 0, 0, 0.15); } .aui-nav.aui-theme-black .aui-nav__underline, .aui-nav.aui-theme-warmsilver .aui-nav__underline, .aui-nav.aui-theme-silver .aui-nav__underline, .aui-nav.aui-theme-red .aui-nav__underline { background: rgba(255, 255, 255, 0.5); } .is-sticky.aui-nav.aui-theme-black .aui-nav__toggle, .is-sticky.aui-nav.aui-theme-warmsilver .aui-nav__toggle, .is-sticky.aui-nav.aui-theme-silver .aui-nav__toggle, .is-sticky.aui-nav.aui-theme-red .aui-nav__toggle { box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 0 40px 0 rgba(0, 0, 0, 0.15); } .aui-nav { /** * Theme: black */ /** * Theme: warmsilver */ /** * Theme: silver */ /** * Theme: red */ /** * TODO Remove in final version. * Theme: gray */ } .aui-nav.aui-theme-warmsilver .aui-nav__paddle-left { background: linear-gradient(to right, #b6b1a9 40%, rgba(182, 177, 169, 0) 100%); } .aui-nav.aui-theme-warmsilver .aui-nav__paddle-right { background: linear-gradient(to right, rgba(182, 177, 169, 0) 0%, #b6b1a9 60%); } .aui-nav.aui-theme-silver .aui-nav__paddle-left { background: linear-gradient(to right, #b2b2b2 40%, rgba(178, 178, 178, 0) 100%); } .aui-nav.aui-theme-silver .aui-nav__paddle-right { background: linear-gradient(to right, rgba(178, 178, 178, 0) 0%, #b2b2b2 60%); } .aui-nav.aui-theme-red .aui-nav__paddle-left { background: linear-gradient(to right, #bb0a30 40%, rgba(187, 10, 48, 0) 100%); } .aui-nav.aui-theme-red .aui-nav__paddle-right { background: linear-gradient(to right, rgba(187, 10, 48, 0) 0%, #bb0a30 60%); } .aui-nav.aui-theme-gray10-gray20 { color: rgba(255, 255, 255, 0.5); fill: rgba(255, 255, 255, 0.5); stroke: rgba(255, 255, 255, 0.5); } .aui-nav.aui-theme-gray10-gray20 .aui-nav__action.is-active, .aui-nav.aui-theme-gray10-gray20 .aui-nav__action:hover { color: white; fill: white; stroke: white; } .aui-nav.aui-theme-gray10-gray20 .aui-nav__action, .aui-nav.aui-theme-gray10-gray20 .aui-nav__action.is-disabled { color: rgba(255, 255, 255, 0.5); fill: rgba(255, 255, 255, 0.5); stroke: rgba(255, 255, 255, 0.5); } .aui-nav.aui-theme-gray10-gray20 .aui-nav__indicator { background: white; } .aui-nav.aui-theme-gray10-gray20 .aui-nav__paddle-left::after, .aui-nav.aui-theme-gray10-gray20 .aui-nav__paddle-right::after { background-image: 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='rgba(255, 255, 255, 0.5)' stroke-width='1px' fill='none' d='M1.5,1l5.485,5.504l-5.48,5.496' /%3E%3C/svg%3E"); } .aui-nav.aui-theme-gray10-gray20 .aui-nav__paddle-left { background: linear-gradient(to right, #1a1a1a 40%, rgba(26, 26, 26, 0) 100%); } .aui-nav.aui-theme-gray10-gray20 .aui-nav__paddle-right { background: linear-gradient(to right, rgba(26, 26, 26, 0) 0%, #1a1a1a 60%); } .aui-nav.aui-theme-gray10-gray20.aui-nav--tab .aui-nav__action.is-active { color: white; } .aui-nav.aui-theme-gray10-gray20.aui-nav--tab .aui-nav__indicator { background: #333333; } .aui-pager.aui-theme-light { color: rgba(255, 255, 255, 0.5); } .aui-pager.aui-theme-light .aui-pager__current { color: white; } .aui-pager.aui-theme-light .aui-pager__next:hover:not(.is-disabled), .aui-pager.aui-theme-light .aui-pager__prev:hover:not(.is-disabled) { color: white; } .aui-pagination.aui-theme-light { color: rgba(255, 255, 255, 0.5); } .aui-pagination.aui-theme-light .aui-pagination__link.is-active, .aui-pagination.aui-theme-light .aui-pagination__link:hover:not(.is-disabled), .aui-pagination.aui-theme-light .aui-pagination__next:hover:not(.is-disabled), .aui-pagination.aui-theme-light .aui-pagination__prev:hover:not(.is-disabled) { color: white; } .aui-pagination.aui-theme-light .aui-pagination__indicator { background: white; } .aui-progress.aui-theme-light { background: rgba(255, 255, 255, 0.3); } .aui-radio { /** * Theme: light */ } .aui-radio.aui-theme-light { color: #f2f2f2; } .aui-radio.aui-theme-light .aui-radio__box { border-color: rgba(255, 255, 255, 0.5); } .aui-radio.aui-theme-light .aui-radio__tick { background: rgba(255, 255, 255, 0.2); } .aui-radio.aui-theme-light:hover:not(.is-disabled) { color: #ffffff; } .aui-radio.aui-theme-light:hover:not(.is-disabled) .aui-radio__box { border-color: white; } .aui-radio.aui-theme-light .aui-radio__input:focus ~ .aui-radio__box { box-shadow: 0 0 3px 3px rgba(255, 255, 255, 0.2); } .aui-radio.aui-theme-light.is-checked .aui-radio__tick { background: rgba(255, 255, 255, 0.8); } .aui-select { /** * Theme: light */ } .aui-select.aui-theme-light { /** * States */ } .aui-select.aui-theme-light .aui-select__input { color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.5); } .aui-select.aui-theme-light .aui-select__input::-ms-value { color: rgba(255, 255, 255, 0.6); } .aui-select.aui-theme-light .aui-select__label { color: rgba(255, 255, 255, 0.6); } .aui-select.aui-theme-light::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpolygon fill='rgba(255, 255, 255, 0.6)' points='6.511 7.371 0 0.715 0.731 0 6.51 5.907 12.267 0 13 0.714 6.511 7.371'/%3E%3C/svg%3E") center center no-repeat; } .aui-select.aui-theme-light .aui-select__focus-line { background: rgba(255, 255, 255, 0.8); } .aui-select.aui-theme-light .aui-select__description, .aui-select.aui-theme-light .aui-select__error { color: rgba(255, 255, 255, 0.5); } .aui-select.aui-theme-light .aui-select__error { color: #bb0a30; } .aui-select.aui-theme-light:not(.is-disabled):not(.is-invalid) .aui-select__input:hover { border-color: rgba(255, 255, 255, 0.8); } .aui-select.aui-theme-light.is-dirty::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpolygon fill='%23f2f2f2' points='6.511 7.371 0 0.715 0.731 0 6.51 5.907 12.267 0 13 0.714 6.511 7.371'/%3E%3C/svg%3E"); } .aui-select.aui-theme-light.is-dirty .aui-select__input { border-color: rgba(255, 255, 255, 0.8); color: #f2f2f2; } .aui-select.aui-theme-light.is-dirty .aui-select__input::-ms-value { color: #f2f2f2; } .aui-select.aui-theme-light.is-invalid, .aui-select.aui-theme-light.is-invalid .aui-select__label, .aui-select.aui-theme-light.is-invalid:not(.is-dirty) .aui-select__input { color: #bb0a30; } .aui-select.aui-theme-light.is-invalid::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8'%3E%3Cpolygon fill='%23bb0a30' points='6.511 7.371 0 0.715 0.731 0 6.51 5.907 12.267 0 13 0.714 6.511 7.371'/%3E%3C/svg%3E"); } .aui-select.aui-theme-light.is-invalid .aui-select__input { border-color: #bb0a30; } .aui-select.aui-theme-light.is-invalid .aui-select__focus-line { background: #bb0a30; } .aui-slider { /** * Theme: black */ /** * Theme: silver */ /** * Theme: warmsilver */ } .aui-slider.aui-theme-black { color: #cccccc; } .aui-slider.aui-theme-black .aui-slider__target::after { background: #333333; } .aui-slider.aui-theme-black .aui-slider__connect::after { background: #ffffff; } .aui-slider.aui-theme-black .aui-slider__handle { background: #000000; border-color: #808080; } .aui-slider.aui-theme-black:not(.is-disabled) .aui-slider__handle:hover { border-color: #ffffff; } .aui-slider.aui-theme-silver { color: rgba(255, 255, 255, 0.8); } .aui-slider.aui-theme-silver .aui-slider__target::after { background: #c1c1c1; } .aui-slider.aui-theme-silver .aui-slider__connect::after { background: #ffffff; } .aui-slider.aui-theme-silver .aui-slider__handle { background: #b2b2b2; border-color: #d9d9d9; } .aui-slider.aui-theme-silver:not(.is-disabled) .aui-slider__handle:hover { border-color: #ffffff; } .aui-slider.aui-theme-warmsilver { color: rgba(255, 255, 255, 0.8); } .aui-slider.aui-theme-warmsilver .aui-slider__target::after { background: #c5c1ba; } .aui-slider.aui-theme-warmsilver .aui-slider__connect::after { background: #ffffff; } .aui-slider.aui-theme-warmsilver .aui-slider__handle { background: #b6b1a9; border-color: #dbd8d4; } .aui-slider.aui-theme-warmsilver:not(.is-disabled) .aui-slider__handle:hover { border-color: #ffffff; } .aui-indicator.aui-theme-light .aui-indicator__action, .aui-indicator.aui-theme-light .aui-indicator__action:visited { background: rgba(255, 255, 255, 0.2); } .aui-indicator.aui-theme-light .aui-indicator__action:hover { background: rgba(255, 255, 255, 0.5); } .aui-indicator.aui-theme-light .aui-indicator__indicator { background: rgba(255, 255, 255, 0.8); } .aui-indicator.aui-theme-image .aui-indicator__action, .aui-indicator.aui-theme-image .aui-indicator__action:visited { background: rgba(178, 178, 178, 0.5); } .aui-indicator.aui-theme-image .aui-indicator__action:hover { background: rgba(255, 255, 255, 0.5); } .aui-indicator.aui-theme-image .aui-indicator__indicator { background: rgba(255, 255, 255, 0.8); } .aui-spinner.aui-theme-light { stroke: rgba(255, 255, 255, 0.6); } .aui-switch { /** * Theme: light */ } .aui-switch.aui-theme-light .aui-switch__text { color: #f2f2f2; } .aui-switch.aui-theme-light .aui-switch__track { border-color: rgba(255, 255, 255, 0.5); } .aui-switch.aui-theme-light .aui-switch__thumb { background: rgba(255, 255, 255, 0.2); } .aui-switch.aui-theme-light.aui-switch--equal .aui-switch__text--right { color: rgba(255, 255, 255, 0.5); } .aui-switch.aui-theme-light.aui-switch--equal .aui-switch__thumb { background: rgba(255, 255, 255, 0.8); } .aui-switch.aui-theme-light:hover:not(.is-disabled) .aui-switch__text { color: #ffffff; } .aui-switch.aui-theme-light:hover:not(.is-disabled) .aui-switch__track { border-color: white; } .aui-switch.aui-theme-light.aui-switch--equal:hover:not(.is-disabled) .aui-switch__text--right { color: rgba(255, 255, 255, 0.5); } .aui-switch.aui-theme-light.aui-switch--equal:hover:not(.is-disabled) .aui-switch__input:checked ~ .aui-switch__text--left { color: rgba(255, 255, 255, 0.5); } .aui-switch.aui-theme-light.aui-switch--equal:hover:not(.is-disabled) .aui-switch__input:checked ~ .aui-switch__text--right { color: #ffffff; } .aui-switch.aui-theme-light .aui-switch__input:focus ~ .aui-switch__track { box-shadow: 0 0 3px 3px rgba(255, 255, 255, 0.2); } .aui-switch.aui-theme-light .aui-switch__input:checked ~ .aui-switch__track .aui-switch__thumb { background: rgba(255, 255, 255, 0.8); } .aui-switch.aui-theme-light.aui-switch--equal .aui-switch__input:checked ~ .aui-switch__text--left { color: rgba(255, 255, 255, 0.5); } .aui-switch.aui-theme-light.aui-switch--equal .aui-switch__input:checked ~ .aui-switch__text--right { color: #f2f2f2; } .aui-table { /** * Theme: light */ } .aui-table.aui-theme-light table { border-color: #ffffff; } .aui-table.aui-theme-light th { border-top-color: #ffffff; } .aui-table.aui-theme-light td { border-top-color: #ffffff; } .aui-table.aui-theme-light .aui-table__cell--colored { background-color: rgba(255, 255, 255, 0.2); } .aui-table.aui-theme-light .aui-table__cell--last-row td::after { border-color: #ffffff; } .aui-textfield { /** * Theme: light */ } .aui-textfield.aui-theme-light { stroke: #f2f2f2; /** * States */ } .aui-textfield.aui-theme-light .aui-textfield__field { border-color: rgba(255, 255, 255, 0.5); } .aui-textfield.aui-theme-light .aui-textfield__input { color: rgba(255, 255, 255, 0.6); } .aui-textfield.aui-theme-light .aui-textfield__label { color: rgba(255, 255, 255, 0.6); } .aui-textfield.aui-theme-light .aui-textfield__focus-line { background: rgba(255, 255, 255, 0.8); } .aui-textfield.aui-theme-light .aui-textfield__counter, .aui-textfield.aui-theme-light .aui-textfield__description, .aui-textfield.aui-theme-light .aui-textfield__error, .aui-textfield.aui-theme-light .aui-textfield__valid { color: rgba(255, 255, 255, 0.5); } .aui-textfield.aui-theme-light .aui-textfield__valid::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon fill='rgba(255, 255, 255, 0.6)' points='4.945 12 0 7.699 0.667 6.92 4.708 10.435 11.132 0 12 0.543 4.945 12' /%3E%3C/svg%3E") center center no-repeat; } .aui-textfield.aui-theme-light .aui-textfield__error { color: #bb0a30; } .aui-textfield.aui-theme-light:not(.is-disabled):not(.is-invalid) .aui-textfield__field:hover { border-bottom-color: rgba(255, 255, 255, 0.8); } .aui-textfield.aui-theme-light.is-focused .aui-textfield__field { border-bottom-color: rgba(255, 255, 255, 0.8); } .aui-textfield.aui-theme-light.is-dirty .aui-textfield__field { border-bottom-color: rgba(255, 255, 255, 0.8); } .aui-textfield.aui-theme-light.is-dirty .aui-textfield__input { color: #f2f2f2; } .aui-textfield.aui-theme-light.is-invalid, .aui-textfield.aui-theme-light.is-invalid:not(.is-dirty) .aui-textfield__input, .aui-textfield.aui-theme-light.is-invalid .aui-textfield__counter, .aui-textfield.aui-theme-light.is-invalid .aui-textfield__label { color: #bb0a30; } .aui-textfield.aui-theme-light.is-invalid .aui-textfield__field { border-color: #bb0a30; } .aui-textfield.aui-theme-light.is-invalid .aui-textfield__focus-line { background: #bb0a30; } .transition, .header .to-vw, .header .to-vw:hover, .header .to-vw:focus, .header-mobile .to-vw, .header-mobile .to-vw:hover, .header-mobile .to-vw:focus, .filter, .list_header__sort button, .list_header__sort button svg path, .list_header__sort .dropdown-menu ul li, #calculator .container .request__form .request__form__input .first_payment_options div, button.light-blue, a.light-blue, button.light-blue:hover, button.light-blue:active, button.light-blue:focus, a.light-blue:hover, a.light-blue:active, a.light-blue:focus, a.no-bg, a.no-bg:hover, a.no-bg:active, a.no-bg:focus, .load-more a, .load-more a:hover, .load-more a:focus, .load-more a:active { transition: all 0.2s ease-in-out; } @-webkit-keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } @keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } select.bs-select-hidden, select.selectpicker { display: none !important; } .bootstrap-select { width: 220px \0; /*IE9 and below*/ } .bootstrap-select > .dropdown-toggle { width: 100%; padding-right: 25px; z-index: 1; } .bootstrap-select > .dropdown-toggle.bs-placeholder, .bootstrap-select > .dropdown-toggle.bs-placeholder:hover, .bootstrap-select > .dropdown-toggle.bs-placeholder:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder:active { color: #999; } .bootstrap-select > select { position: absolute !important; bottom: 0; left: 50%; display: block !important; width: 0.5px !important; height: 100% !important; padding: 0 !important; opacity: 0 !important; border: none; } .bootstrap-select > select.mobile-device { top: 0; left: 0; display: block !important; width: 100% !important; z-index: 2; } .has-error .bootstrap-select .dropdown-toggle, .error .bootstrap-select .dropdown-toggle { border-color: #b94a48; } .bootstrap-select.fit-width { width: auto !important; } .bootstrap-select .dropdown-toggle:focus { outline: thin dotted #333333 !important; outline: 5px auto -webkit-focus-ring-color !important; outline-offset: -2px; } .bootstrap-select.form-control { margin-bottom: 0; padding: 0; border: none; } .bootstrap-select.form-control:not([class*="col-"]) { width: 100%; } .bootstrap-select.btn-group.dropdown-menu-right, .bootstrap-select.btn-group[class*="col-"].dropdown-menu-right, .row .bootstrap-select.btn-group[class*="col-"].dropdown-menu-right { float: right; } .form-inline .bootstrap-select.btn-group, .form-horizontal .bootstrap-select.btn-group, .form-group .bootstrap-select.btn-group { margin-bottom: 0; } .form-group-lg .bootstrap-select.btn-group.form-control, .form-group-sm .bootstrap-select.btn-group.form-control { padding: 0; } .form-inline .bootstrap-select.btn-group .form-control { width: 100%; } .bootstrap-select.btn-group.disabled, .bootstrap-select.btn-group > .disabled { cursor: not-allowed; } .bootstrap-select.btn-group.disabled:focus, .bootstrap-select.btn-group > .disabled:focus { outline: none !important; } .bootstrap-select.btn-group.bs-container { position: absolute; height: 0 !important; padding: 0 !important; } .bootstrap-select.btn-group.bs-container .dropdown-menu { z-index: 1060; } .bootstrap-select.btn-group .dropdown-toggle .filter-option { display: inline-block; overflow: hidden; width: 100%; text-align: left; } .bootstrap-select.btn-group .dropdown-toggle .caret { position: absolute; top: 50%; right: 12px; margin-top: -2px; vertical-align: middle; } .bootstrap-select.btn-group[class*="col-"] .dropdown-toggle { width: 100%; } .bootstrap-select.btn-group .dropdown-menu { min-width: 100%; box-sizing: border-box; } .bootstrap-select.btn-group .dropdown-menu.inner { position: static; float: none; border: 0; padding: 0; margin: 0; border-radius: 0; box-shadow: none; } .bootstrap-select.btn-group .dropdown-menu li { position: relative; } .bootstrap-select.btn-group .dropdown-menu li.active small { color: #fff; } .bootstrap-select.btn-group .dropdown-menu li.disabled a { cursor: not-allowed; } .bootstrap-select.btn-group .dropdown-menu li a { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .bootstrap-select.btn-group .dropdown-menu li a.opt { position: relative; padding-left: 2.25em; } .bootstrap-select.btn-group .dropdown-menu li a span.check-mark { display: none; } .bootstrap-select.btn-group .dropdown-menu li a span.text { display: inline-block; } .bootstrap-select.btn-group .dropdown-menu li small { padding-left: 0.5em; } .bootstrap-select.btn-group .dropdown-menu .notify { position: absolute; bottom: 5px; width: 96%; margin: 0 2%; min-height: 26px; padding: 3px 5px; background: whitesmoke; border: 1px solid #e3e3e3; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); pointer-events: none; opacity: 0.9; box-sizing: border-box; } .bootstrap-select.btn-group .no-results { padding: 3px; background: #f5f5f5; margin: 0 5px; white-space: nowrap; } .bootstrap-select.btn-group.fit-width .dropdown-toggle .filter-option { position: static; } .bootstrap-select.btn-group.fit-width .dropdown-toggle .caret { position: static; top: auto; margin-top: -1px; } .bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark { position: absolute; display: inline-block; right: 15px; margin-top: 5px; } .bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text { margin-right: 34px; } .bootstrap-select.show-menu-arrow.open > .dropdown-toggle { z-index: 1061; } .bootstrap-select.show-menu-arrow .dropdown-toggle:before { content: ''; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid rgba(204, 204, 204, 0.2); position: absolute; bottom: -4px; left: 9px; display: none; } .bootstrap-select.show-menu-arrow .dropdown-toggle:after { content: ''; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid white; position: absolute; bottom: -4px; left: 10px; display: none; } .bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:before { bottom: auto; top: -3px; border-top: 7px solid rgba(204, 204, 204, 0.2); border-bottom: 0; } .bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:after { bottom: auto; top: -3px; border-top: 6px solid white; border-bottom: 0; } .bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:before { right: 12px; left: auto; } .bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:after { right: 13px; left: auto; } .bootstrap-select.show-menu-arrow.open > .dropdown-toggle:before, .bootstrap-select.show-menu-arrow.open > .dropdown-toggle:after { display: block; } .bs-searchbox, .bs-actionsbox, .bs-donebutton { padding: 4px 8px; } .bs-actionsbox { width: 100%; box-sizing: border-box; } .bs-actionsbox .btn-group button { width: 50%; } .bs-donebutton { float: left; width: 100%; box-sizing: border-box; } .bs-donebutton .btn-group button { width: 100%; } .bs-searchbox + .bs-actionsbox { padding: 0 8px 4px; } .bs-searchbox .form-control { margin-bottom: 0; width: 100%; float: none; } /*! * Hamburgers * @description Tasty CSS-animated hamburgers * @author Jonathan Suh @jonsuh * @site https://jonsuh.com/hamburgers * @link https://github.com/jonsuh/hamburgers */ .hamburger { padding: 5px 20px; display: inline-block; cursor: pointer; transition-property: opacity, -webkit-filter; transition-property: opacity, filter; transition-property: opacity, filter, -webkit-filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; } .hamburger:hover { opacity: 1; } .hamburger-box { width: 20px; height: 15px; display: inline-block; position: relative; } .hamburger-inner { display: block; top: 50%; margin-top: -1.5px; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 20px; height: 3px; background-color: #fff; border-radius: 0px; position: absolute; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; transition-duration: 0.15s; transition-timing-function: ease; } .hamburger-inner::before, .hamburger-inner::after { content: ""; display: block; } .hamburger-inner::before { top: -6px; } .hamburger-inner::after { bottom: -6px; } /* * Squeeze */ .hamburger--squeeze .hamburger-inner { transition-duration: 0.1s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze .hamburger-inner::before { transition: top 0.1s 0.14s ease, opacity 0.1s ease; } .hamburger--squeeze .hamburger-inner::after { transition: bottom 0.1s 0.14s ease, -webkit-transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.14s ease, transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: bottom 0.1s 0.14s ease, transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--squeeze.is-active .hamburger-inner { -webkit-transform: rotate(45deg); transform: rotate(45deg); transition-delay: 0.14s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .hamburger--squeeze.is-active .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.1s ease, opacity 0.1s 0.14s ease; } .hamburger--squeeze.is-active .hamburger-inner::after { bottom: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); transition: bottom 0.1s ease, -webkit-transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease, transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); transition: bottom 0.1s ease, transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1); } .transition, .header .to-vw, .header .to-vw:hover, .header .to-vw:focus, .header-mobile .to-vw, .header-mobile .to-vw:hover, .header-mobile .to-vw:focus, .filter, .list_header__sort button, .list_header__sort button svg path, .list_header__sort .dropdown-menu ul li, #calculator .container .request__form .request__form__input .first_payment_options div, button.light-blue, a.light-blue, button.light-blue:hover, button.light-blue:active, button.light-blue:focus, a.light-blue:hover, a.light-blue:active, a.light-blue:focus, a.no-bg, a.no-bg:hover, a.no-bg:active, a.no-bg:focus, .load-more a, .load-more a:hover, .load-more a:focus, .load-more a:active { transition: all 0.2s ease-in-out; } @-webkit-keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } @keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } } @font-face { font-family: "AudiTypeScreen"; src: url(53fb3aa92b2dcd74faade9dc28afaf90.eot); src: url(53fb3aa92b2dcd74faade9dc28afaf90.eot?#iefix) format("embedded-opentype"), url(10e403a8301fb565ed318e1c4de017db.woff) format("woff"), url(d8a3d52bbe3bf225b4fb970371d0da63.ttf) format("truetype"), url(03608ea96d5e5974835af84e0661a71a.svg#Audi-Bold) format("svg"); } @font-face { font-family: "AudiTypeScreenLight"; src: url(3ff239899c3b9a80c3bb96dbd4e9341e.eot); src: url(3ff239899c3b9a80c3bb96dbd4e9341e.eot?#iefix) format("embedded-opentype"), url(44d695a3bc1e2def8738573877d16968.woff) format("woff"), url(b0255b4ad626081116d08fd9a970ce06.ttf) format("truetype"), url(2eedf5296f450ce89783a06de16a3926.svg#Audi-Bold) format("svg"); } @font-face { font-family: "AudiTypeScreenBold"; src: url(b810e59853c5ada42431fdb5c42a6358.eot); src: url(b810e59853c5ada42431fdb5c42a6358.eot?#iefix) format("embedded-opentype"), url(faaf447e2b7d6588cbb3159700ff1eb6.woff) format("woff"), url(c87364dd872c02273e0afc7d5e4b629a.ttf) format("truetype"), url(567c0327197ec856299b5ece90cdad0e.svg#Audi-Bold) format("svg"); } @font-face { font-family: "AudiTypeExtended"; src: url(e7de6d9542408a55011ffa0913ee86a6.eot); src: url(e7de6d9542408a55011ffa0913ee86a6.eot?#iefix) format("embedded-opentype"), url(91f74d3ab535dd323da8c52845788f7e.woff) format("woff"), url(9f55cc24a40063f5a2e02e347e7f3a08.ttf) format("truetype"), url(33a6f565e7a9111d28fb4c4cf0f31005.svg#Audi-Extened-Normal) format("svg"); } @font-face { font-family: "AudiTypeExtendedBold"; src: url(4b8c076fbc9aa9777b268cdd15af5b81.eot); src: url(4b8c076fbc9aa9777b268cdd15af5b81.eot?#iefix) format("embedded-opentype"), url(9d8b55885762be4345200f602a721be6.woff) format("woff"), url(e29b64346d3d5acb438d323dfd91667c.ttf) format("truetype"), url(fabd7ea92ed1f3af590c64abd04fc1de.svg#Audi-Extened-Bold) format("svg"); } .fix-top { position: fixed; top: 0; left: 0; right: 0; z-index: 10; } .header { position: absolute; top: 0; left: 0; width: 100%; height: 90px; background-color: #fff; padding: 0 45px; border-bottom: 1px solid #e2e2e2; z-index: 11; } @media (max-width: 1600px) { .header { height: 70px; } } @media (max-width: 767px) { .header { height: 45px; padding: 0; position: fixed; } } .header .to-vw { float: left; color: #0099da; font-size: 18px; margin-top: 32px; } .header .to-vw:hover, .header .to-vw:focus { text-decoration: none; color: #0068aa; } @media (max-width: 1600px) { .header .to-vw { margin-top: 22px; } } @media (max-width: 767px) { .header .to-vw { display: none; } } .header .logo { width: 64.5px; height: 64.5px; position: absolute; left: 70px; top: 50%; margin-top: -32px; } @media (max-width: 1600px) { .header .logo { width: 52px; height: 52px; margin-top: -26px; margin-left: -26px; } } @media (max-width: 767px) { .header .logo { display: block; z-index: 10; height: 35px; width: 35px; top: 5px; margin-top: 0; left: 15px; margin-left: 0; } } @media only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .header .logo .logo { width: 129px; height: 129px; } } .header .logo-print { display: none; } .header .language { float: right; margin-top: 24px; width: 110px; padding: 10px 20px; margin-right: -20px; position: relative; background-color: white; border: 1px solid transparent; border-radius: 3px; } @media (max-width: 1600px) { .header .language { margin-top: 14px; } } @media (max-width: 767px) { .header .language { padding: 12px 20px 8px; float: left; margin-left: 70px; margin-top: 0; border: none; border-radius: 0; } } .header .language .lng-select { position: absolute; top: 17px; right: 22px; transition: all 0.4s ease-in-out; } @media (max-width: 767px) { .header .language .lng-select { top: 19px; } } .header .language .item img { margin-top: -3px; margin-right: 10px; width: 19px; height: 12px; } .header .language .item a { text-decoration: none; color: #808890; font-family: "VWText-Regular"; font-size: 14px; text-transform: uppercase; } .header .language .select { margin-top: 13px; display: none; } .header .language.open { border: 1px solid #d7e0e9; } @media (max-width: 767px) { .header .language.open { border: none; border-left: 1px solid #d7e0e9; border-right: 1px solid #d7e0e9; border-bottom: 1px solid #d7e0e9; -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; position: relative; z-index: 11; } } .header .language.open .lng-select { -webkit-transform: rotate(180deg); transform: rotate(180deg); transition: all 0.4s ease-in-out; } .header .language.open .item { margin-bottom: 5px; } .header .hamburger { float: right; margin-top: 10px; } .header .hamburger:focus { outline: none; } @media (min-width: 768px) { .header .hamburger { display: none; } } .header .navbar-header p { float: right; line-height: 45px; margin-bottom: 0; color: #2f3538; font-family: "VWHead-Regular"; font-size: 16px; } @media (min-width: 768px) { .header .navbar-header p { display: none; } } .header-mobile { display: none; padding: 20px 0; background-color: #fff; margin-top: 90px; text-align: center; border-bottom: 1px solid #ebebeb; } @media (max-width: 767px) { .header-mobile { margin-top: 45px; } } .header-mobile ul { padding: 0 0 8px; margin-bottom: 0; border-bottom: 1px solid #e2e2e2; max-height: 305px; overflow-x: scroll; } .header-mobile ul li { list-style: none; margin-bottom: 25px; } .header-mobile ul li a { color: #1c1c1c; font-family: "VWHead-Bold"; font-size: 24px; position: relative; } .header-mobile ul li a:hover { text-decoration: none; } .header-mobile ul li a:after { content: ''; position: absolute; width: 40px; height: 4px; background: #ebebeb; bottom: -6px; left: 0; right: 0; margin: auto; } .header-mobile .to-vw { color: #0099da; font-family: "VWText-Bold"; font-size: 18px; padding-top: 20px; display: block; } .header-mobile .to-vw:hover, .header-mobile .to-vw:focus { text-decoration: none; color: #0068aa; } .header-mobile.no-results ul { display: none; } .header-mobile.no-results .to-vw { padding: 0; } @media (max-width: 767px) { .header-mobile.fix-top { top: 45px; margin-top: 0; } } .to-audi { position: absolute; background-color: #1a1a1a; top: 0; left: 0; width: 100%; padding: 5px 56px; text-align: right; z-index: 10; } .to-audi a { padding: 0; font-size: 15px; margin-top: -6px; } .banner { position: relative; background-size: cover; width: 100%; height: 70vh; background-position: center; } @media (min-width: 768px) { .banner { height: 30vw; min-height: 320px; max-height: 500px; } } .banner .intro-container { position: absolute; top: 45%; left: 80px; max-width: 770px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } @media (max-width: 1600px) { .banner .intro-container { left: 45px; } } @media (max-width: 767px) { .banner .intro-container { left: 45px; right: 30px; top: 150px; -webkit-transform: translateY(0%); transform: translateY(0%); } } .banner .intro-container svg { margin-bottom: 10px; } @media (max-width: 991px) { .banner .intro-container svg { max-width: 130px; } } .banner .intro-container h1 { margin-bottom: 10px; color: #fff; font-size: 52px !important; line-height: 60px !important; } @media (max-width: 1260px) { .banner .intro-container h1 { font-size: 48px !important; line-height: 56px !important; } } @media (max-width: 991px) { .banner .intro-container h1 { font-size: 36px !important; line-height: 44px !important; } } .banner .intro-container .banner-p { color: #fff; font-size: 24px !important; margin-bottom: 0; font-family: 'AudiTypeExtended', Verdana, Geneva, sans-serif; line-height: 1.3; } .banner .intro-container.js-model-name { display: none; } @media (min-width: 767px) { .banner .intro-container.js-model-name { margin-top: 40px; } } .banner .back_link { position: absolute; top: 11%; left: 80px; display: none; } @media (max-width: 1600px) { .banner .back_link { left: 45px; } } .banner .back_link a { color: #fff; font-family: "AudiTypeScreen"; font-size: 15px; font-weight: 400; line-height: 24px; text-decoration: none; } .banner .back_link a svg { height: 11px; -webkit-transform: rotate(180deg); transform: rotate(180deg); margin-right: 10px; } @media (max-width: 768px) { .banner .back_link a { color: #000; } .banner .back_link a svg path { fill: #000; } } @media (max-width: 767px) { .banner-desktop { display: none; } } .banner-desktop .banner-overlay { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0; } .banner-mob { background-position: center; } @media (min-width: 768px) { .banner-mob { display: none; } } .banner-mob .banner-overlay { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0; } .banner-mob.banner--inside { background-image: none !important; background-color: #fff; height: 280px !important; } .banner-mob.banner--inside svg use { fill: #000; } .banner-mob.banner--inside .intro-container { top: 75px; } .banner-mob.banner--inside .intro-container h1 { color: #000 !important; } #banner_wrapper { padding-top: 42px; } @media (max-width: 1264px) { #banner_wrapper { padding-top: 38px; } } @media (min-width: 1584px) { #banner_wrapper { padding-top: 46px; } } .model-options { padding: 60px 55px 0; } .model-options .row { margin-left: -20px; margin-right: -20px; } .model-options .row .col-xs-12 { padding-left: 20px; padding-right: 20px; } .model-options .model-options__item { overflow: hidden; } @media (max-width: 992px) { .model-options .model-options__item { padding-bottom: 30px; } } .model-options .model-options__item .icon { float: left; width: 63px; text-align: left; } .model-options .model-options__item .icon img { max-width: 50px; } .model-options .model-options__item .data { padding-left: 63px; } .model-options .model-options__item .data h6 { color: #333; font-size: 16px; font-weight: 700; line-height: 20px; font-family: 'AudiTypeExtended', Verdana, Geneva, sans-serif; margin: 0 0 8px; } .model-options .model-options__item .data p { color: #000; font-size: 16px; line-height: 24px; font-family: "AudiTypeScreenLight"; } .model-options .model-options__item .data p a { color: #000; text-decoration: underline; } .noUi-target, .noUi-target * { -webkit-touch-callout: none; -webkit-user-select: none; touch-action: none; -ms-user-select: none; -moz-user-select: none; user-select: none; box-sizing: border-box; } .noUi-target { position: relative; direction: ltr; } #keypress { width: calc(100% - 16px); margin-left: 8px; } @media (max-width: 767px) { #keypress { width: 92% !important; margin-left: 4%; } } .noUi-base { width: 100%; height: 100%; position: relative; background-color: #b7b7b7; z-index: 1; /* Fix 401 */ border-radius: 3px; } .noUi-connect { position: absolute; right: 0; top: 0; left: 0; bottom: 0; } .noUi-origin { position: absolute; height: 0; width: 0; } .noUi-handle { position: relative; z-index: 1; } .noUi-state-tap .noUi-connect, .noUi-state-tap .noUi-origin { transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s; } .noUi-state-drag * { cursor: inherit !important; } /* Painting and performance; * Browsers can paint handles in their own layer. */ .noUi-base, .noUi-handle { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /* Slider size and handle placement; */ .noUi-horizontal { height: 1px; } .noUi-horizontal .noUi-handle { cursor: pointer; width: 26px; height: 26px; left: -13px; top: -13px; border: 1px solid #7f7f7f; border-radius: 26px; } .noUi-vertical { width: 18px; } .noUi-vertical .noUi-handle { /* width: 16px; height: 16px; left: -6px; top: -17px; */ } /* Styling; */ .noUi-target { background-color: #e4eaec; border-radius: 3px; height: 2px; } .noUi-connect { background: #000; height: 2px; transition: background 450ms; } .noUi-tooltip { position: absolute; top: 30px; color: #001e50; width: 46px; margin-left: -16px; text-align: center; font-size: 14px; } /* Handles and cursors; */ .noUi-draggable { cursor: w-resize; } .noUi-vertical .noUi-draggable { cursor: n-resize; } .noUi-handle { border: 1px solid #D9D9D9; border-radius: 3px; background: #FFF; cursor: default; } .noUi-active { /* width: 16px !important; height: 16px !important; top:-7px !important; left:-8px !important; .noUi-tooltip{ top:22px; } */ } /* Handle stripes; */ .noUi-handle:after { left: 17px; } .noUi-vertical .noUi-handle:before, .noUi-vertical .noUi-handle:after { width: 14px; height: 1px; left: 6px; top: 14px; } .noUi-vertical .noUi-handle:after { top: 17px; } /* Disabled state; */ [disabled] .noUi-connect { background: #B8B8B8; } [disabled].noUi-target, [disabled].noUi-handle, [disabled] .noUi-handle { cursor: not-allowed; } .filter-toggle { position: absolute; top: 0; right: 0; height: 100%; width: 230px; color: #fff; display: none; } @media (max-width: 767px) { .filter-toggle { display: flex; } } .filter-toggle svg { position: absolute; right: 20px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .filter-toggle p.filter-text, .filter-toggle p.filter-text-close { display: block; color: #ffffff; font-size: 15px; padding-bottom: 0; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 55px; } .filter-toggle p.filter-text-close { display: none; } .fixed-filter { top: 0; position: fixed; z-index: 2; left: 0; right: 0; } @media (max-width: 1600px) { .fixed-filter { top: 0; } } @media (max-width: 767px) { .fixed-filter { top: 45px; position: relative; } } .fixed-filter .filter-body { display: none; } .fixed-filter .filter-toggle { display: block; } .filter .filter-container { background: #f2f2f2; } .filter .filter-header { background-color: #b3b3b3; position: relative; } @media (max-width: 767px) { .filter .filter-header { height: 45px; } } .filter .filter-header .container-fluid { padding: 0 80px; } @media (max-width: 1600px) { .filter .filter-header .container-fluid { padding: 0 45px; } } @media (max-width: 1200px) { .filter .filter-header .container-fluid { padding: 0 45px 0; } } @media (max-width: 991px) { .filter .filter-header .container-fluid { padding: 0 100px 0; } } @media (max-width: 767px) { .filter .filter-header .container-fluid { padding: 0 45px; } } .filter .filter-header .filter-overlay { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; display: none; cursor: pointer; } @media (max-width: 767px) { .filter .filter-header .filter-overlay { display: block !important; } } .filter .filter-header .filter-title { padding: 32px 15px 34px; color: #fff; margin-bottom: 0; } @media (max-width: 1600px) { .filter .filter-header .filter-title { padding: 22px 15px 24px; font-size: 20px; } } @media (max-width: 991px) { .filter .filter-header .filter-title { font-size: 18px; } } @media (max-width: 767px) { .filter .filter-header .filter-title { display: none; } } .filter .filter-body { position: relative; } @media (max-width: 767px) { .filter .filter-body { display: none; } } .filter .filter-body .container-fluid { padding: 40px 55px 50px; } @media (max-width: 767px) { .filter .filter-body .container-fluid { padding: 30px 30px 40px; } } @media (max-width: 767px) { .filter .filter-body .container-fluid .row { margin-left: 0; margin-right: 0; } } .filter .filter-body .container-fluid [class*=' col-'] { padding-left: 40px; padding-right: 40px; } @media (max-width: 1600px) { .filter .filter-body .container-fluid [class*=' col-'] { padding-left: 20px; padding-right: 20px; } } @media (max-width: 1200px) { .filter .filter-body .container-fluid [class*=' col-'] { padding-left: 15px; padding-right: 15px; } } @media (max-width: 991px) { .filter .filter-body .container-fluid [class*=' col-'] { margin-bottom: 35px; } } @media (max-width: 767px) { .filter .filter-body .container-fluid [class*=' col-'] { padding: 0 20px; margin-bottom: 35px; } } .filter .filter-body .container-fluid #price_min_input, .filter .filter-body .container-fluid #price_max_input { display: none; width: 60px; text-align: center; padding: 5px 0; color: #333; font-size: 16px; font-family: "AudiTypeScreenBold"; line-height: 24px; border: 1px solid #d7e0e9; border-radius: 3px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .filter .filter-body .container-fluid #price_min_input:focus, .filter .filter-body .container-fluid #price_max_input:focus { outline: 0; } .filter .filter-body .container-fluid #price_min_input { float: left; } .filter .filter-body .container-fluid #price_max_input { float: right; } .filter .filter-body .container-fluid .values { width: 100%; } @media (max-width: 959px) { .filter .filter-body .container-fluid .values { margin-bottom: 0; } } .dealer-info { background: #fff; padding: 10px 0; margin: 0 0 30px 0; display: none; } .dealer-info .dealer-address { position: relative; padding-left: 113px; } .dealer-info .dealer-address svg { position: absolute; left: 30px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .dealer-info .dealer-box { width: 48px; height: 48px; background-color: #000000; position: relative; padding: 0; float: right; margin-left: 4px; } .dealer-info .dealer-box p a { width: 48px; height: 48px; display: block; text-indent: -1000px; } .dealer-info .dealer-box.dealer-box--email p a { background: url(f944e81f5486f28fe89d6e8ff836e7a2.svg) no-repeat; background-position: center; } .dealer-info .dealer-box.dealer-box--phone p a { background: url(80267b59678cc915f8120019dc2021a9.svg) no-repeat; background-position: center; } .dealer-info h4 { color: #333333; font-family: AudiTypeScreenBold; font-size: 20px; font-weight: 700; line-height: 36px; } .dealer-info h4 a { color: #333333; text-decoration: none; } .dealer-info h4 a:hover { text-decoration: underline; } .dealer-info p { color: #333333; font-size: 16px; font-weight: 300; line-height: 24px; margin-bottom: 5px; } .dealer-info p a { color: #333333; text-decoration: none; } .dealer-info p a:hover { text-decoration: underline; } @media (min-width: 768px) { .dealer-info.visible { display: block; } } .fixed-dealer-info { position: fixed; top: 0; left: 0; width: 100%; background: #fff; z-index: 10; border-bottom: 1px solid #f2f2f2; box-shadow: 0px 3px 2px 0px #f2f2f2; transition: all 0.5s ease-in-out; } @media (min-width: 991px) { .fixed-dealer-info .container-fluid { padding: 0 55px; } } @media (max-width: 991px) { .fixed-dealer-info .dealer-address { padding-left: 0; float: left; width: calc(100% - 112px); } .fixed-dealer-info h4 { line-height: 24px; position: relative; height: 48px; } .fixed-dealer-info h4 a { position: absolute; top: 50%; display: block; -webkit-transform: translateY(-50%); transform: translateY(-50%); } } .fixed-dealer-info .dealer-info { margin-top: 0; margin-bottom: 0; } .fixed-dealer-info .dealer-info.visible { display: block; } .fixed-dealer-info.fade-out { top: -90px; } .filter__dropdown { position: relative; } .filter__dropdown .icon { float: left; margin-top: 12px; } .filter__dropdown .icon.icon--small_margin { margin-top: 9px; margin-bottom: 5px; } .filter__dropdown .default { height: 40px; line-height: 40px; border-bottom: 1px solid #cecece; color: #616161; font-size: 16px; font-family: "AudiTypeScreen"; cursor: pointer; margin-left: 35px; background-color: transparent; } .filter__dropdown .default span { visibility: hidden; } .filter__dropdown .default span.visible { visibility: visible; } .filter__dropdown .dropdown-menu { width: 100%; left: 35px; background-color: #e5e5e5; padding: 10px 0 10px; border: none; border-radius: 0; box-shadow: none; margin-top: 0; } .filter__dropdown .dropdown-menu ul { list-style: none; margin: 0; padding: 0 16px; } .filter__dropdown .dropdown-menu ul li { position: relative; padding: 12px 12px 12px 0; color: #333; font-size: 16px; line-height: 24px; cursor: pointer; } .filter__dropdown .dropdown-menu ul li::after { content: ""; position: absolute; right: 0; top: 10px; display: block; width: 24px; height: 24px; background: url(9c0e6baa021dcedf36275a84608330fd.svg) no-repeat; background-size: cover; } .filter__dropdown .dropdown-menu ul li.checked::after { background: url(a71650a8ed5f14d56b05d3333f435a79.svg) no-repeat; background-size: cover; } .filter__dropdown .dropdown-menu .price--slider { padding: 30px 16px 70px; } .filter__dropdown .dropdown-menu .price--slider .calculations { position: absolute; width: calc(100% - 36px); top: 62px; color: #333333; font-family: "AudiTypeScreenLight"; font-size: 14px; line-height: 19px; } .filter__dropdown .dropdown-menu .price--slider .calculations span { display: block; padding: 3px 0; } .filter__dropdown .dropdown-menu .price--slider .calculations .price_min { float: left; width: 50%; } .filter__dropdown .dropdown-menu .price--slider .calculations .price_max { float: right; text-align: right; width: 50%; } .filter__dropdown.opened .dropdown-menu { display: block; } .js-picked { display: none; } .filter-buttons { text-align: center; } .filter-buttons .picked { max-width: 800px; min-height: 40px; margin-left: 40px; } @media (max-width: 959px) { .filter-buttons .picked { display: none; } } .filter-buttons .picked ul { list-style: none; overflow: hidden; margin: 30px 0 0 0; padding: 0; } .filter-buttons .picked ul li { float: left; position: relative; height: 44px; border: 1px solid #000; margin: 0 12px 0 0; line-height: 42px; padding: 0 17px 0 18px; } .filter-buttons .picked ul li span { cursor: pointer; display: inline-block; width: 13px; height: 13px; background: url(8f1ac1a7fa82a37935f62ff0a0ec6e1d.svg); background-size: cover; margin-left: 16px; margin-bottom: 0; } .filter-buttons .reset { text-align: right; margin-top: -25px; float: right; } @media (max-width: 767px) { .filter-buttons .reset { margin-top: -20px; } } .filter-buttons .reset a { color: #333; font-size: 12px; font-weight: 400; line-height: 14px; text-decoration: none; float: right; border-bottom: 1px solid #bcbcbc; } .filter.filter--inside .dropdown--classifications { opacity: 0.4; } .filter.filter--inside .dropdown--classifications:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } .mobile-filter { position: fixed; bottom: 20px; z-index: 100; left: 0; right: 58px; display: none; padding: 0 20px; } .mobile-filter a { padding-top: 11px; padding-bottom: 11px; } @media (min-width: 768px) { .mobile-filter { display: none !important; } } .cars { position: relative; } @media (min-width: 768px) { .cars .container-fluid { padding: 0 55px; } } .cars .js-list-gallery { margin-bottom: 0 !important; } .cars .no-results { min-height: 680px; position: relative; border-bottom: 1px solid rgba(215, 224, 233, 0.8); } .cars .no-results .result-content { text-align: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); } .cars .no-results .result-content p { margin-top: 15px; margin-bottom: 0; font-size: 16px; } .cars .no-results .result-content svg { margin-top: 72px; max-width: 100%; height: auto; } .cars ul { list-style: none; margin-bottom: 75px; padding: 0; } .cars ul .preview { cursor: pointer; margin-top: 75px; } .cars ul .preview .preview__about h3 { color: #333; font-size: 18px; font-weight: 400; font-family: "AudiTypeExtended"; letter-spacing: -0.3px; line-height: 23px; text-align: center; } .cars ul .preview .preview__about h3 span { color: #b3b3b3; } .cars ul .preview .preview__about div { position: relative; height: 48px; } .cars ul .preview .preview__about p { color: #333; font-family: "AudiTypeScreenLight"; font-size: 16px; font-weight: 300; line-height: 24px; margin: 8px auto 0; position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .cars .auto-overlay { position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; background-color: rgba(255, 255, 255, 0.5); } .cars .car-wrapper { position: relative; border-bottom: 1px solid rgba(215, 224, 233, 0.8); z-index: 1; display: flex; flex-wrap: wrap; } .cars .car-wrapper.row { margin-left: 0; margin-right: 0; } .cars .img-wrap { float: left; border-left: 1px solid #f2f2f2; margin-left: -1px; } .cars .img-wrap > div { margin: 20px 0; } .cars .img-wrap img.hover { display: none; } .cars .model-filter-wrap { padding: 13px 0 0 20px; } @media (max-width: 1300px) { .cars .model-filter-wrap { padding-left: 0; } } @media (max-width: 768px) { .cars .model-filter-wrap { padding: 13px 15px 0; } } .cars .model-filter-wrap h2 { margin-bottom: 70px; padding-left: 27px; color: #333333; } @media (max-width: 767px) { .cars .model-filter-wrap h2 { text-align: center; padding-left: 0; margin-bottom: 40px; } } .cars .model-filter-wrap .car-type { position: relative; float: left; padding-bottom: 50px; width: 100%; } @media (max-width: 768px) { .cars .model-filter-wrap .car-type { padding-bottom: 0; } } .cars .model-filter-wrap .car-type .car-color-wrap { width: 80px; margin-top: 4px; margin-right: 35px; float: left; } @media (max-width: 1300px) { .cars .model-filter-wrap .car-type .car-color-wrap { margin-right: 20px; } } .cars .model-filter-wrap .car-type .car-color-wrap .trigger-compare { display: none; } @media (max-width: 600px) { .cars .model-filter-wrap .car-type .car-color-wrap { background: #f2f2f2; margin-right: 10px; } .cars .model-filter-wrap .car-type .car-color-wrap .trigger-compare { display: block; width: 24px; height: 24px; border: 1px solid rgba(0, 0, 0, 0.5); margin: 10px auto; position: relative; } .cars .model-filter-wrap .car-type .car-color-wrap .trigger-compare.selected:after { content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 0.75em; height: 0.75em; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolygon fill='%23333333' points='4.945 12 0 7.699 0.667 6.92 4.708 10.435 11.132 0 12 0.543 4.945 12' /%3E%3C/svg%3E") center center no-repeat; opacity: 1; transition: opacity 0.15s cubic-bezier(0.75, 0.02, 0.5, 1); pointer-events: none; } } .cars .model-filter-wrap .car-type .car-color-wrap .car-color { margin: 0 auto 5px; width: 32px; height: 32px; border: 1px solid; border-radius: 16px; } .cars .model-filter-wrap .car-type .car-color-wrap p { color: #333333; font-size: 14px; font-family: "AudiTypeScreenLight"; line-height: 17px; text-align: center; } @media (max-width: 600px) { .cars .model-filter-wrap .car-type .car-color-wrap p { font-size: 12px; line-height: 14px; } } .cars .model-filter-wrap .car-type .car-details { padding-left: 115px; } @media (max-width: 1300px) { .cars .model-filter-wrap .car-type .car-details { padding-left: 100px; } } @media (max-width: 992px) { .cars .model-filter-wrap .car-type .car-details { padding-left: 0; clear: both; } } .cars .model-filter-wrap .car-type .car-details .car-title { border-bottom: 1px solid #e5e5e5; padding-bottom: 28px; margin-bottom: 20px; } @media (max-width: 768px) { .cars .model-filter-wrap .car-type .car-details .car-title { border-bottom: none; padding-bottom: 0; } } .cars .model-filter-wrap .car-type .car-details .car-title h5 { color: #333; font-size: 22px; font-family: "AudiTypeExtended"; font-weight: 400; letter-spacing: -0.3px; line-height: 26.4px; margin-bottom: 12px; } .cars .model-filter-wrap .car-type .car-details .car-title p { color: #333333; font-size: 16px; font-weight: 300; line-height: 24px; font-family: "AudiTypeScreenLight"; margin: 0; } .cars .model-filter-wrap .car-type .car-details p.campaign-price, .cars .model-filter-wrap .car-type .car-details p.leasing-price { color: #333333; font-family: "AudiTypeScreenBold"; font-size: 16px; font-weight: 700; line-height: 28px; margin-bottom: 0; } .cars .model-filter-wrap .car-type .car-details p.campaign-price span, .cars .model-filter-wrap .car-type .car-details p.leasing-price span { white-space: nowrap; } @media (min-width: 991px) and (max-width: 1200px) { .cars .model-filter-wrap .car-type .car-details p.campaign-price, .cars .model-filter-wrap .car-type .car-details p.leasing-price { font-size: 14px; } } .cars .model-filter-wrap .car-type .car-details p.regular-price { color: #333; font-size: 16px; line-height: 28px; margin-bottom: 0; font-weight: 300; font-family: "AudiTypeScreenLight"; } @media (min-width: 991px) and (max-width: 1200px) { .cars .model-filter-wrap .car-type .car-details p.regular-price { font-size: 14px; } } .cars .model-filter-wrap .car-type .car-details p.regular-price span { white-space: nowrap; } .cars .model-filter-wrap .car-type .car-details p.regular-price.leasing-price { opacity: 1; } .cars .model-filter-wrap .car-type .car-details p.regular-price.with--opacity { color: #000; opacity: 0.4; } .cars .model-filter-wrap .car-type .button-wrap { margin-top: 22px; /* @media(max-width: 1350px) { width: 160px; button{ width: 100%; } } */ } .cars .model-filter-wrap .car-type .button-wrap button { height: 52px; line-height: 1; margin-right: 8px; color: #000; font-size: 15px; font-weight: 400; font-family: "AudiTypeScreen"; padding-left: 50px; padding-right: 50px; } @media (max-width: 600px) { .cars .model-filter-wrap .car-type .button-wrap button.trigger-compare { display: none; } } .cars .model-filter-wrap .car-type .button-wrap button.trigger-compare.selected { position: relative; } .cars .model-filter-wrap .car-type .button-wrap button.trigger-compare.selected:after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #000; background-image: url(7550cc22e43065aac32710f6aeb8264e.svg); background-position: center; background-repeat: no-repeat; } .cars .model-filter-wrap .car-type .button-wrap button.reserved { opacity: 0.4; } @media (max-width: 768px) { .cars .model-filter-wrap .car-type .button-wrap { text-align: center; } } .cars .model-filter-wrap .read-more { text-align: left; padding-left: 95px; width: 100%; } .list_header { position: relative; padding: 56px 0 90px; } @media (max-width: 992px) { .list_header { padding-bottom: 30px; } } .list_header__details h5 { color: #333; font-size: 22px; font-weight: 700; font-family: "AudiTypeExtended"; letter-spacing: -0.3px; margin: 0; } .list_header__details h6 { color: #333; margin: 19px 0 0 0; font-size: 16px; font-weight: 300; line-height: 24px; font-family: "AudiTypeScreenLight"; } .list_header__details h6 span { font-weight: 700; font-family: "AudiTypeScreen"; text-transform: uppercase; padding-left: 10px; } @media (min-width: 960px) { .list_header__sort { position: absolute; top: 55px; right: 0; width: 180px; } } @media (max-width: 960px) { .list_header__sort { padding: 30px 0 0 0; height: 60px; } } .list_header__sort button { display: block; float: right; position: relative; width: 180px; height: 52px; color: #fff; font-size: 15px; font-family: "AudiTypeScreen"; line-height: 52px; background: #000; border: none; /* &:hover { color: #0040C5; svg { path { fill: #0040C5; } } } */ } .list_header__sort button svg { position: absolute; top: 50%; left: 20px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .list_header__sort button:hover, .list_header__sort button:focus, .list_header__sort button:active { outline: none; border: none; } .list_header__sort .dropdown-menu { width: 180px; min-height: 90px; z-index: 2; box-shadow: none; font-size: 16px; margin: 5px 0 0 0; border: none; } @media (max-width: 960px) { .list_header__sort .dropdown-menu { right: 0; left: auto; margin-top: -25px; } } @media (max-width: 768px) { .list_header__sort .dropdown-menu { margin-top: -68px; } } .list_header__sort .dropdown-menu ul { list-style: none; padding: 10px 10px 0 6px; margin: 0; } .list_header__sort .dropdown-menu ul li { padding: 12px 0; color: rgba(0, 0, 0, 0.5); font-size: 16px; line-height: 1; cursor: pointer; } .list_header__sort .dropdown-menu ul li.selected { color: #000; } .compare-block { position: fixed; z-index: 101; bottom: 0; left: 0; width: 100%; background: #000; padding: 24px 45px; display: none; justify-content: flex-end; } @media (max-width: 991px) { .compare-block { flex-wrap: wrap; justify-content: center; } } .compare-block p { color: #ffffff; font-size: 16px; font-weight: 300; line-height: 24px; text-align: center; } @media (min-width: 992px) { .compare-block p { position: absolute; left: 0; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } } @media (max-width: 991px) { .compare-block div { width: 100%; display: flex; justify-content: center; } .compare-block div button { margin: 0 10px; } } .model-filtered { overflow: hidden; border-bottom: 1px solid #e5e5e5; padding: 32px 0; } .compare__cars { padding: 8vh 3.9vw; } .compare__header { display: flex; justify-content: space-between; margin-bottom: 20px; } .compare__header > div { display: flex; align-items: center; } .compare__header > div button { text-decoration: none; } .compare__header > div button.delete-link { margin-right: 50px; } @media (max-width: 600px) { .compare__header > div button.delete-link { margin-right: 20px; } } .compare__header > div button.delete-link svg { width: 13px; height: 13px; margin-right: 12px; } .compare__header > div .buttons-actions { display: flex; } .compare__header > div .buttons-actions a { display: block; color: #000; margin: 0 10px; height: 48px; position: relative; } @media (max-width: 991px) { .compare__header > div .buttons-actions a { margin: 0 5px; } .compare__header > div .buttons-actions a svg { height: 40px; } } .compare__items { display: flex; justify-content: space-between; } @media (max-width: 767px) { .compare__items { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; } } .compare__items .item { position: relative; border: 1px solid #e5e5e5; } @media (min-width: 992px) { .compare__items .item { width: 33%; } } @media screen and (max-width: 767px) { .compare__items .item { flex: 0 0 auto; width: 320px; margin-right: 10px; } } .compare__items .item .remove-compare { position: absolute; top: 10px; right: 10px; } .compare__items .item h4 { color: #000; margin-bottom: 20px; } .compare__items .item p, .compare__items .item a { color: #333333; font-size: 16px; font-weight: 300; line-height: 24px; text-decoration: none; } .compare__items .item a:hover { text-decoration: underline; } .compare__items .item b { display: block; width: 100%; color: #333333; font-size: 16px; line-height: 28px; font-family: "AudiTypeScreenBold"; } .compare__items .item img { border-bottom: 1px solid #e5e5e5; } .compare__items .item .main-info { border-bottom: 1px solid #e5e5e5; padding: 20px; } .compare__items .item .main-info .aui-button-group { margin: 20px 0 40px; } .compare__items .item .main-info .aui-button-group button { width: 100%; } .compare__items .item .main-info .color-title { color: #333333; font-size: 16px; font-weight: 300; line-height: 24px; padding: 12px 0; margin-bottom: 0; } .compare__items .item .main-info .color-title .car-color { padding-top: 15px; float: left; margin-right: 10px; width: 24px; height: 24px; border: 1px solid; border-radius: 12px; } .compare__items .item .main-info .color-title .car-text { float: left; margin-right: 10px; } .compare__items .item .main-info.last { border-bottom: 0; } .compare__items .item .main-info.last .aui-button-group { margin: 20px 0 0px; } .compare__items .item .accessories h4 { padding: 20px 20px 0 20px; } .compare__items .item .accessories ul { margin-bottom: 0; padding: 0; float: left; width: 100%; } .compare__items .item .accessories ul li { list-style: none; position: relative; color: #333333; font-size: 16px; font-weight: 300; line-height: 24px; padding: 7px 20px 7px 40px; margin-bottom: 0; } .compare__items .item .accessories ul li.equal { background: rgba(0, 0, 0, 0.1); font-family: "AudiTypeScreenBold"; } .compare__items .item .accessories ul li:before { content: "›"; position: absolute; left: 20px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); opacity: 0.3; font-size: 18px; } .compare__items .item.empty { background: #f2f2f2; text-align: center; padding: 70px 20px; } .compare__items .item.empty button i { display: block; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #000; font-style: normal; line-height: 38px; font-size: 20px; margin: 0 auto 20px; } .footer-info { padding: 10px 3.9vw; background-color: #f2f2f2; } .footer-info p { color: #333333; font-size: 12px; font-weight: 300; line-height: 18px; margin-bottom: 0; } .footer-info ul, .footer-info ol { padding-left: 20px; } .footer-info ul li, .footer-info ol li { color: #333333; font-size: 12px; font-weight: 300; line-height: 18px; } .footer-info a { color: #333333; text-decoration: none; } .footer-info a:hover { text-decoration: underline; } .aui-modal-dialog { padding: 0; } .aui-modal-dialog .aui-modal-dialog__close { z-index: 10; top: 17px; right: 30px; display: flex; align-items: center; justify-content: center; } @media (max-width: 768px) { .aui-modal-dialog .aui-modal-dialog__close { top: 15px; right: 15px; visibility: hidden; } } .aui-modal-dialog .aui-modal-dialog__body { padding: 0; max-width: 100%; width: 100%; } .aui-modal-dialog .aui-modal-dialog__body .aui-modal-dialog__content { background-color: #fff; padding: 0; height: 100%; } .aui-modal.is-active .aui-modal-dialog .aui-modal-dialog__close { visibility: visible; } .top-sidebar { padding: 24px 56px; background-color: #f2f2f2; z-index: 2; position: relative; display: flex; } @media (max-width: 991px) { .top-sidebar { flex-wrap: wrap; padding-top: 75px; } } .top-sidebar .price-wrapper { width: 30%; padding-right: 50px; } @media (max-width: 1350px) { .top-sidebar .price-wrapper { width: 40%; } } @media (max-width: 991px) { .top-sidebar .price-wrapper { width: 100%; margin-bottom: 30px; text-align: center; padding: 0; } } .top-sidebar .overlay-title h4 { color: #333333; margin-bottom: 10px; } .top-sidebar .overlay-title p { color: #333333; font-size: 16px; font-weight: 300; line-height: 18px; margin-bottom: 14px; } @media (max-width: 991px) { .top-sidebar .overlay-title p { font-size: 14px; } } .top-sidebar p.regular-price, .top-sidebar p.action-price { color: #333333; font-size: 16px; line-height: 28px; margin-bottom: 0; } .top-sidebar p.regular-price span, .top-sidebar p.action-price span { white-space: nowrap; } .top-sidebar p.regular-price a, .top-sidebar p.action-price a { color: #333333; text-decoration: none; } .top-sidebar p.regular-price a:hover, .top-sidebar p.action-price a:hover { text-decoration: underline; } .top-sidebar p.regular-price { opacity: 0.7; } .top-sidebar p.special-price { color: #333333; font-family: "AudiTypeScreenBold"; font-size: 16px; line-height: 28px; margin-bottom: 0; } .top-sidebar p.special-price span { white-space: nowrap; } .top-sidebar .button-wrap { align-self: center; justify-content: center; width: 60%; } @media (min-width: 992px) { .top-sidebar .button-wrap { max-width: 435px; } } @media (max-width: 991px) { .top-sidebar .button-wrap { width: 100%; } } @media (max-width: 600px) { .top-sidebar .button-wrap { flex-wrap: wrap; } } .top-sidebar .button-wrap a { display: block; margin: 5px auto; max-width: 435px; } @media (max-width: 600px) { .top-sidebar .button-wrap a { max-width: 300px; width: 100%; } .top-sidebar .button-wrap a:first-child { margin-bottom: 20px; } } .top-sidebar .button-wrap.close-reservation { display: none; text-align: center; } .top-sidebar .button-wrap.close-reservation .aui-button { width: 100%; } .top-sidebar .buttons-actions { display: flex; align-items: center; z-index: 100; } @media (min-width: 1350px) { .top-sidebar .buttons-actions { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 150px; } } @media (max-width: 991px) { .top-sidebar .buttons-actions { position: absolute; top: 18px; right: 80px; } } @media (max-width: 767px) { .top-sidebar .buttons-actions { position: absolute; top: 18px; right: 60px; } } .top-sidebar .buttons-actions a { display: block; color: #000; margin: 0 10px; height: 48px; position: relative; } @media (max-width: 991px) { .top-sidebar .buttons-actions a { margin: 0 5px; } .top-sidebar .buttons-actions a svg { height: 40px; } } .top-sidebar .share-links { display: none; } @media (max-width: 991px) { .car-info { display: flex; flex-direction: column-reverse; } } .car-info.form-wrap { flex-direction: column; overflow: scroll; } .left-sidebar { height: 100%; padding: 4px 56px; min-height: 100%; width: 100%; max-width: 500px; float: left; position: relative; } @media (max-width: 991px) { .left-sidebar { max-width: 100%; } } @media (max-width: 768px) { .left-sidebar { padding: 0 20px; } } .left-sidebar .dealers-text { display: none; padding: 80px 50px 0 0; } @media (max-width: 991px) { .left-sidebar .dealers-text { text-align: center; padding: 40px 20px; } } .left-sidebar .dealers-text h3 { color: #333333; margin-bottom: 20px; } .left-sidebar .dealers-text p { color: #333333; font-family: "AudiTypeScreenLight"; font-size: 16px; font-weight: 300; line-height: 24px; } .left-sidebar .vin-number { color: #333333; font-size: 16px; font-weight: 300; line-height: 24px; border-bottom: 1px solid #e5e5e5; padding: 12px 0; } .left-sidebar .car-text { float: left; margin-right: 10px; } .left-sidebar .car-color { padding-top: 15px; float: left; margin-right: 10px; width: 24px; height: 24px; border: 1px solid; border-radius: 12px; } .left-sidebar .color-title { color: #333333; font-size: 16px; font-weight: 300; line-height: 24px; border-bottom: 1px solid #e5e5e5; padding: 12px 0; } .left-sidebar p { color: #333; font-size: 16px; font-weight: 300; line-height: 24px; } .left-sidebar p.extra-price { color: #0099da; margin-bottom: 10px; } .left-sidebar p.uppercase { font-weight: 400; margin-top: 15px; } .left-sidebar .price-savings { margin-bottom: 26px; } .left-sidebar .price-savings p { color: #808890; font-size: 14px; line-height: 16px; margin-bottom: 0; margin-top: 0; } .left-sidebar .price-savings p b { display: inline-block; margin-top: 0; line-height: 18px; } .left-sidebar p.new-price { margin-top: 3px; color: #f15822; font-size: 21px; line-height: 26px; } @media (max-width: 400px) { .left-sidebar p.new-price { margin-top: 10px; } } .left-sidebar p.new-price span { font-size: 16px; } .left-sidebar span.old-price { padding-left: 15px; color: #808890; font-size: 16px; line-height: 30px; text-decoration: line-through; } .left-sidebar p.regular-price { color: #1c1c1c; font-size: 16px; font-weight: 400; line-height: 26px; margin-top: 3px; margin-bottom: 5px; } @media (max-width: 400px) { .left-sidebar p.regular-price { margin-top: 10px; } } .left-sidebar h4 { margin-top: 25px; margin-bottom: 20px; color: #333333; float: left; width: 100%; } .left-sidebar ul { margin-left: 7px; margin-bottom: 0; padding: 0; float: left; width: 100%; } .left-sidebar ul li { list-style: none; position: relative; padding-left: 20px; margin-bottom: 14px; color: #333333; font-size: 16px; font-weight: 300; line-height: 24px; } .left-sidebar ul li:before { content: "›"; position: absolute; left: -7px; top: -2px; margin-top: 1px; font-weight: 300; opacity: 0.3; font-size: 12px; } .left-sidebar .full-components-list { margin-bottom: 80px; float: left; width: 100%; color: #333333; font-size: 16px; font-weight: 300; line-height: 24px; } @media (max-width: 991px) { .left-sidebar .full-components-list { margin-bottom: 30px; } } .left-sidebar .full-components-list a { color: #333333; font-size: 16px; font-weight: 300; line-height: 24px; padding: 0; margin-top: -4px; } .left-sidebar .dealers-info { position: fixed; bottom: 0; width: 100%; left: 0; background-color: #f2f2f2; padding: 10px 56px; z-index: 1; } @media (max-width: 991px) { .left-sidebar .dealers-info { clear: both; position: relative; bottom: 0; padding: 10px 15px; margin-left: -20px; width: calc(100% + 40px); } } .left-sidebar .dealers-info p { color: #333333; font-size: 12px; font-weight: 300; line-height: 18px; margin-bottom: 0; } .left-sidebar h3 { text-align: left; } @media (max-width: 991px) { .left-sidebar h3 { text-align: center; } } .success-msg { margin-top: 25px; color: #3fa460; font-size: 16px; line-height: 28px; text-align: center; padding: 35px 0; } .success-msg img { margin-right: 10px; margin-top: -4px; } .right-sidebar--wrap { width: calc(100% - 500px); float: left; position: relative; } @media (max-width: 991px) { .right-sidebar--wrap { width: 100%; margin-bottom: 10px; } } .right-sidebar--wrap.gallery { padding: 4px 56px 0 0; } @media (max-width: 991px) { .right-sidebar--wrap.gallery { padding: 0; } } .right-sidebar--wrap.reservation { display: none; } @media (min-width: 992px) { .right-sidebar--wrap.reservation { border-left: 1px solid #f2f2f2; } } .right-sidebar--wrap.reservation form { min-height: 100vh; max-width: 550px; margin: 0 auto 50px; padding: 70px 56px 0 56px; } @media (max-width: 991px) { .right-sidebar--wrap.reservation form { padding: 0 20px; } } .right-sidebar--wrap.reservation .aui-select, .right-sidebar--wrap.reservation .aui-textfield { font-size: 16px; color: rgba(0, 0, 0, 0.6); margin-bottom: 24px; } .right-sidebar--wrap.reservation .aui-checkbox { color: #333333; font-size: 12px; font-weight: 400; line-height: 20px; } .right-sidebar--wrap.reservation .error { height: 30px; font-size: 16px; color: #333; } .right-sidebar--wrap.reservation button { width: 100%; max-width: 278px; } @media (max-width: 991px) { .right-sidebar--wrap.reservation button { margin: 0 auto; display: inherit; } } .right-sidebar--wrap .car-gallery .gallery-placeholder, .right-sidebar--wrap .car-gallery .car-model-placeholder { width: 100%; max-width: 885px; min-height: 500px; margin: 0 auto; border: 1px solid #e5e5e5; background-color: #f2f2f2; padding: 125px 30px 50px; text-align: center; } @media (max-width: 991px) { .right-sidebar--wrap .car-gallery .gallery-placeholder, .right-sidebar--wrap .car-gallery .car-model-placeholder { margin-top: 30px; } } .right-sidebar--wrap .car-gallery .gallery-placeholder svg, .right-sidebar--wrap .car-gallery .car-model-placeholder svg { margin: 0 auto 60px; display: block; max-width: 100%; height: auto; } .right-sidebar--wrap .car-gallery .gallery-placeholder h4, .right-sidebar--wrap .car-gallery .car-model-placeholder h4 { color: #333333; margin-bottom: 15px; } .right-sidebar--wrap .car-gallery .gallery-placeholder a, .right-sidebar--wrap .car-gallery .car-model-placeholder a { color: #333333; font-family: "AudiTypeScreenLight"; font-size: 16px; font-weight: 300; line-height: 24px; text-decoration: underline; } .right-sidebar--wrap .car-gallery p { padding: 15px 0; max-width: 880px; width: 100%; margin: 0 auto; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .form__content { position: relative; } @media (max-width: 768px) { .form__content .aui-modal-dialog__close { position: absolute; width: 30px; height: 30px; padding: 0; text-align: center; } } .form form { width: 100%; } .form__wrap, .form__success { flex-wrap: wrap; background: #f2f2f2; min-height: 100vh; width: 100%; } @media (min-width: 768px) { .form__wrap, .form__success { display: flex; } } .form__sidebar { width: 50%; background-size: cover; position: relative; display: flex; padding-top: 90px; } @media (max-height: 800px) { .form__sidebar { padding-top: 0; } } @media (max-width: 767px) { .form__sidebar { width: 100%; position: relative; padding-top: 0; height: 220px; } } .form__sidebar .overlay { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.7); } .form__sidebar .steps { width: 100%; position: relative; z-index: 1; padding: 7.5% 15% 0; } @media (max-width: 767px) { .form__sidebar .steps { padding: 0 7.5%; height: 220px; box-sizing: border-box; } .form__sidebar .steps svg { display: none; } } .form__sidebar .steps h4 { color: #fff; font-size: 35px; font-weight: 400; font-family: "AudiTypeExtended"; letter-spacing: -0.5px; line-height: 42px; margin: 23px 0 0 0; max-width: 480px; } @media (max-width: 767px) { .form__sidebar .steps h4 { position: absolute; bottom: 15%; padding: 0 7.5%; left: 0; font-size: 18px; line-height: 20px; } } .form__sidebar .steps ul { padding: 6rem 0 0 0; position: relative; } @media (max-width: 767px) { .form__sidebar .steps ul { padding-top: 3rem; } } .form__sidebar .steps ul span { position: absolute; content: ""; width: 1px; height: 52px; background: #999; left: 15px; top: 10px; display: block; } @media (max-width: 767px) { .form__sidebar .steps ul span { display: none; height: 1px; width: 100%; top: 0; left: 20px; } } @media (max-width: 767px) { .form__sidebar .steps ul { display: flex; justify-content: space-between; width: 100%; } } .form__sidebar .steps ul li { padding: 0 0 0 52px; color: #fff; font-size: 14px; font-family: "AudiTypeScreen"; list-style: none; line-height: 1; margin-bottom: 45px; opacity: 0.5; position: relative; transition: opacity 0.2s ease-in-out; } @media (max-width: 767px) { .form__sidebar .steps ul li { font-size: 0; padding-left: 46px; } } @media (min-width: 768px) { .form__sidebar .steps ul li:last-child { margin-bottom: 0; } } .form__sidebar .steps ul li:before { content: ''; position: absolute; width: 9px; height: 9px; border: 1px solid #fff; border-radius: 50%; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 11px; z-index: 1; } .form__sidebar .steps ul li:after { content: ''; position: absolute; width: 32px; height: 32px; background-color: #ffffff; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-radius: 50%; display: none; } .form__sidebar .steps ul li.done { opacity: 1; } .form__sidebar .steps ul li.done span { width: 3px; background: #fff; } @media (max-width: 767px) { .form__sidebar .steps ul li.done span { height: 3px; top: -1px; width: 100%; } } .form__sidebar .steps ul li.done:before { content: url(e52abc6ff0b32977cff2a5376fd0744d.svg); width: 32px; height: 32px; left: 0; display: flex; justify-content: center; align-items: center; } .form__sidebar .steps ul li.done:after { display: block; } .form__sidebar .steps ul li.active { opacity: 1; } .form__sidebar .steps ul li.active:before { background: #000; border-color: #000; } .form__sidebar .steps ul li.active:after { display: block; } .form__content { width: 50%; display: flex; padding-top: 90px; -webkit-animation: fadeIn 0.5s ease-in-out; animation: fadeIn 0.5s ease-in-out; } @media (max-height: 800px) { .form__content { padding-top: 0; } } .form__content h4 { color: #333; font-family: "AudiTypeExtended"; font-size: 22px; font-weight: 400; letter-spacing: -0.3px; line-height: 32px; margin-bottom: 30px; } .form__content p { color: #333; font-family: "AudiTypeScreenLight"; font-size: 16px; font-weight: 300; line-height: 28px; margin-bottom: 56px; } .form__content p a { color: #333; } .form__content .aui-checkbox__label p { margin-bottom: 0; } @media (max-width: 767px) { .form__content { width: 100%; padding-top: 0; } } .form__content > div { padding: 15% 15% 0; width: 100%; } @media (max-width: 768px) { .form__content > div { padding: 15% 7.5%; } } .form__content .cols { display: flex; flex-wrap: wrap; justify-content: space-between; } .form__content .cols .aui-textfield { width: 40%; } @media (max-width: 767px) { .form__content .cols .aui-textfield { width: 100%; } } @media (max-width: 576px) { .form__content .cols .col-helper { text-align: center; width: 100%; } } .form__content .buttons-wrap { margin-bottom: 2rem; margin-top: 55px; overflow: hidden; } .form__content .buttons-wrap a { display: none; color: #000; font-family: "AudiTypeScreen"; font-size: 15px; font-weight: 400; line-height: 24px; text-decoration: none; float: left; margin-top: 17px; } .form__content .buttons-wrap a:hover { opacity: 0.6; } .form__content .buttons-wrap a svg { height: 11px; margin-right: 10px; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .form__content .buttons-wrap a svg path { fill: #000; } .form__content .buttons-wrap button { float: right; } .form__content .buttons-wrap button svg { height: 11px; margin-left: 10px; } .form__content .textarea-letter-count { display: flex; justify-content: space-between; } .form__content .textarea-letter-count span:last-child { padding-right: 2rem; } .form__content .aui-caption { opacity: 0.6; } .form__content .summary__item { margin-bottom: 2rem; position: relative; } .form__content .summary__item a { position: absolute; top: 0; right: 0; } .form__content .summary__item p { margin: 0 0 6px 0; position: relative; } .form__content .summary__item p strong { font-weight: 600; } .form__content .summary__item span { display: flex; } .form__content .checkbox__wrap .aui-checkbox { margin-bottom: 25px; } .form__content .checkbox__wrap .aui-checkbox .aui-checkbox__label { font-size: 16px; font-family: "AudiTypeScreen"; } .form__content .checkbox__wrap .aui-checkbox .aui-checkbox__label p { margin: 0; } .form__content .checkbox__wrap .aui-checkbox .aui-checkbox__label a { text-decoration: none; padding-bottom: 0.06125em; border-bottom: 1px solid rgba(0, 0, 0, 0.3); color: inherit; font-weight: 400; transition: color 0.3s linear, border 0.3s linear; } .form__content .checkbox__wrap .aui-checkbox .aui-checkbox__label a:hover { color: #000000; border-bottom-color: #000000; } .form__content .checkbox__wrap .aui-checkbox .aui-checkbox__label a:focus { outline: none; } .form__content .checkbox__wrap .aui-checkbox.error .aui-checkbox__label { color: #bb0a30; } .form__content .checkbox__wrap .aui-checkbox.error .aui-checkbox__box { border-color: #bb0a30; margin-top: 4px; } .form__content .time-select { padding: 0; margin-bottom: 11px; } .form__content .time-select li { list-style: none; display: inline-block; border: 1px solid #000; color: #000; font-size: 15px; font-weight: 400; line-height: 44px; margin-right: 0; margin-bottom: 4px; padding: 0 23px; cursor: pointer; transition: all 0.2s ease-in-out; } .form__content .time-select li:hover { opacity: 0.8; transition: all 0.2s ease-in-out; } .form__content .model-image img { display: block; width: 100%; max-width: 258px; height: auto; } .form__content .summary-image { display: block; width: 100%; max-width: 282px; } .form__choose svg { width: 128px; } .form__choose svg use { fill: #000; } .form__choose h4 { color: #000; font-size: 35px; font-weight: 400; font-family: "AudiTypeExtended"; letter-spacing: -0.5px; line-height: 42px; margin: 23px 0 0 0; max-width: 430px; } @media (max-width: 767px) { .form__choose h4 { font-size: 22px; line-height: 1.4; } } .form__choose ul { list-style: none; padding: 37px 0; margin: 0; } .form__choose ul li { padding: 10px 0; } .form__choose ul button { width: 100%; max-width: 440px; } .aui-textfield { margin-bottom: 32px; } .aui-textfield__input { min-height: 1.5rem; } .aui-textfield__error { opacity: 0; } .aui-textfield__error.visible { opacity: 1; transition: 0.2s ease-in-out; } .aui-select__input { margin-bottom: 10px; } .js-choose-modal, .js-request-modal { overflow-y: hidden !important; } .js-choose-modal.is-active, .js-request-modal.is-active { overflow-y: scroll !important; } .js-request-modal .overlay-print-button { position: absolute; top: 17px; right: 85px; color: #000; } @media print { .js-request-modal .js-close-all { visibility: hidden !important; } } .js-form-step { display: none; -webkit-transform: translateX(100%); transform: translateX(100%); } .js-form-step.active { display: block; -webkit-transform: translateX(0%); transform: translateX(0%); } .js-form-step .payment-error { color: #ff0000; } .js-form-step .row--checkboxes { padding-top: 2rem; padding-bottom: 2rem; } .js-form-step .headline--spacer { margin-bottom: 60px; } .js-form-step .aui-checkbox { margin-top: 1.25em; margin-bottom: 25px; } .js-form-step .aui-checkbox .aui-checkbox__label { font-size: 16px; font-family: "AudiTypeScreen"; } .js-form-step .aui-checkbox .aui-checkbox__box { margin-top: 4px; } .js-form-step .input--services { border-bottom: 1px solid #d8d8d8; } .js-form-step .input--services .checkbx.limited--width { padding-right: 0; width: 275px; } @media (max-width: 768px) { .js-form-step .input--services .checkbx.limited--width { width: 250px; } } .js-form-step .input--services .checkbx .aui-checkbox { margin-top: 0; } .js-form-step .input--services .checkbx .aui-checkbox__box { margin-top: 0 !important; } @media (min-width: 768px) { .js-form-step .input--services .services_price { position: absolute; top: 0; right: 33px; } } @media (max-width: 768px) { .js-form-step .input--services .services_price { padding-left: 36px; padding-bottom: 8px; margin-top: -12px; } } .js-form-step .input--services .services_price span { color: #333; font-size: 14px; font-family: "AudiTypeScreenLight"; font-weight: 300; line-height: 24px; } .js-form-step .input--services .services_price span.js-leasing-price { color: #333; font-family: "AudiTypeScreen"; font-weight: 700; margin-right: 5px; } .js-form-step .input--services .services_tooltip { position: absolute; top: 3px; right: 0; } .js-form-step .input--services .services_tooltip svg { cursor: pointer; } .js-form-step .input--payment--select .payment_about { padding: 10px 0 30px 2.5rem; font-weight: 400; font-size: 12px; line-height: 16px; } .js-form-step .input--payment--select .payment_about p { font-weight: 400; font-size: 12px; line-height: 16px; padding-top: 0; padding-left: 0; margin-bottom: 0; } .js-form-step .input--payment--select .payment_about img { max-width: 100%; } .js-form-step .input--payment--select .payment_tooltip { float: left; margin-top: 2px; margin-left: 10px; } @media (min-width: 768px) { .js-form-step .input--payment--select .payment_tooltip { position: relative; } } .js-form-step .input--payment--select .payment_tooltip svg { cursor: pointer; } .js-form-step .input--payment--select .payment_tooltip .payment_tooltip__popup { display: none; position: absolute; right: 0; width: 308px; background: #000; border-radius: 0; padding: 22px 28px; z-index: 2; } @media (max-width: 992px) { .js-form-step .input--payment--select .payment_tooltip .payment_tooltip__popup { top: -53px; right: 25px; } } @media (min-width: 992px) { .js-form-step .input--payment--select .payment_tooltip .payment_tooltip__popup { -webkit-transform: translateX(20%); transform: translateX(20%); bottom: 44px; transition: bottom 0.2s ease-in-out; } } @media (max-width: 768px) { .js-form-step .input--payment--select .payment_tooltip .payment_tooltip__popup { top: -12px; right: 0; width: 260px; padding: 16px 18px; } } .js-form-step .input--payment--select .payment_tooltip .payment_tooltip__popup.opened { display: block; } @media (min-width: 992px) { .js-form-step .input--payment--select .payment_tooltip .payment_tooltip__popup.opened { bottom: 44px; } } .js-form-step .input--payment--select .payment_tooltip .payment_tooltip__popup .tooltip__close { display: none; } @media (max-width: 768px) { .js-form-step .input--payment--select .payment_tooltip .payment_tooltip__popup .tooltip__close { display: block; text-align: right; padding-bottom: 6px; } .js-form-step .input--payment--select .payment_tooltip .payment_tooltip__popup .tooltip__close svg { width: 14px; } } .js-form-step .input--payment--select .payment_tooltip .payment_tooltip__popup .tooltip__content { color: #fff; font-size: 12px; line-height: 19px; } .js-form-step .input--payment--select .payment_tooltip .payment_tooltip__popup .tooltip__content p { padding: 5px 0; margin: 0; color: #fff; font-size: 12px; line-height: 19px; overflow: hidden; } .js-form-step .input--payment--select .payment_tooltip .payment_tooltip__popup .tooltip__content p .payment_label { float: left; width: 174px; color: #fff; } @media (max-width: 768px) { .js-form-step .input--payment--select .payment_tooltip .payment_tooltip__popup .tooltip__content p .payment_label { width: 154px; } } .js-form-step .input--payment--select .payment_tooltip .payment_tooltip__popup .tooltip__content p .payment_total { float: right; width: 76px; text-align: right; color: #fff; } .js-form-step .input--payment--select .payment_tooltip .payment_tooltip__popup .tooltip__content p.total { border-top: 1px solid #fff; padding-top: 16px; padding-bottom: 0; margin-top: 15px; } .js-form-step .input--payment--select .payment_tooltip .payment_tooltip__popup .tooltip__content p.total .payment_label { text-align: right; color: #fff; } .js-form-step .input--payment--select .payment_tooltip .payment_tooltip__popup:after { border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-width: 5px; } @media (max-width: 992px) { .js-form-step .input--payment--select .payment_tooltip .payment_tooltip__popup:after { top: 60px; right: -10px; border-left-color: #000; } } @media (min-width: 992px) { .js-form-step .input--payment--select .payment_tooltip .payment_tooltip__popup:after { bottom: -10px; left: 75%; margin-left: -2px; border-top-color: #000; } } @media (max-width: 768px) { .js-form-step .input--payment--select .payment_tooltip .payment_tooltip__popup:after { display: none; } } .leasing_info { display: none; background-color: #f2f2f2; margin-bottom: 30px; } .leasing_info .row { margin-left: 0; margin-right: 0; } .leasing_info .col-sm-3, .leasing_info .col-sm-6 { padding: 0; } .leasing_info .col-sm-3 button, .leasing_info .col-sm-6 button { padding: 0; width: 97px; margin: 28px 0 0 0; } @media (max-width: 960px) { .leasing_info .col-sm-3 button, .leasing_info .col-sm-6 button { margin-top: 20px; } } .leasing_info .col-sm-3.align--center, .leasing_info .col-sm-6.align--center { text-align: center; } @media (max-width: 960px) { .leasing_info .col-sm-3.align--center, .leasing_info .col-sm-6.align--center { padding-bottom: 12px; } } .leasing_info .leasing_info__info { padding: 20px 0 20px 5px; } @media (max-width: 960px) { .leasing_info .leasing_info__info { padding: 12px 16px 20px; } } .leasing_info .leasing_info__info h6 { color: #333; font-size: 19px; font-weight: 400; font-family: "AudiTypeExtended"; letter-spacing: -0.3px; line-height: 23px; margin: 0 0 15px; padding: 0; } .leasing_info .leasing_info__info p { color: #333; font-size: 14px !important; line-height: 1.4 !important; margin: 0 !important; } .leasing_info .leasing_info__info p span { color: #333; font-weight: 700; line-height: 24px; padding-top: 3px; font-family: "AudiTypeScreen"; } @media (min-width: 960px) { .leasing_info .leasing_info__info p span { display: block; } } @media (max-width: 960px) { .leasing_info .leasing_info__info p span { padding-left: 5px; } } .leasing_info .leasing_info__data { padding: 22px 0 4px 16px; } @media (max-width: 960px) { .leasing_info .leasing_info__data { padding: 12px 16px 0; } } .leasing_info .leasing_info__data p { color: #333; font-size: 14px !important; line-height: 24px !important; margin: 0 0 5px !important; } .leasing_info .leasing_info__data p span { font-weight: bold; font-family: "AudiTypeScreen"; padding-left: 15px; } .leasing_info a { color: #000; font-family: "AudiTypeScreen"; font-size: 12px; font-weight: 400; line-height: 20px; text-decoration: underline; float: right; margin-right: 13px; } .disclaimer { display: none; color: #333; font-size: 12px; line-height: 16px; font-family: "AudiTypeScreenLight"; } .disclaimer p { color: #333; font-size: 12px; line-height: 16px; font-family: "AudiTypeScreenLight"; margin: 0; padding: 42px 0 0; } .disclaimer p a { color: #333; text-decoration: underline; } .services_tooltip__popup { display: none; position: absolute; left: 50%; top: 40%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 308px; background: #000; border-radius: 0; padding: 22px 28px; z-index: 2; } @media (max-width: 768px) { .services_tooltip__popup { width: 260px; padding: 12px 16px; } } .services_tooltip__popup.opened { display: block; } .services_tooltip__popup .tooltip__close { text-align: right; margin-right: -6px; cursor: pointer; } .services_tooltip__popup .tooltip__content { color: #fff; font-size: 12px; line-height: 19px; padding: 0 30px 30px 30px; } .services_tooltip__popup .tooltip__content p { padding: 0; margin: 0; color: #fff; font-size: 12px; line-height: 19px; } .services_tooltip__popup .tooltip__content .tooltip__gallery { padding: 0 22px; } .services_tooltip__popup .tooltip__content .lSSlideOuter { margin-bottom: 10px; } .services_tooltip__popup .tooltip__content .lSSlideOuter .lSPager { display: none; } .services_tooltip__popup .tooltip__content .lSSlideOuter .lSAction > .lSPrev { left: 10px; width: 12px; background-image: url(3cbe9d69b1b2ac578875ea90d415dbd0.svg); -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } .services_tooltip__popup .tooltip__content .lSSlideOuter .lSAction > .lSNext { right: 10px; width: 12px; background-image: url(3cbe9d69b1b2ac578875ea90d415dbd0.svg); -webkit-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg); } .services_tooltip__popup .tooltip__content .lSSlideOuter ul { margin: 0; } .services_tooltip__popup .tooltip__content .lSSlideOuter ul li { padding: 0; } .services_tooltip__popup .tooltip__content .lSSlideOuter ul li:after { display: none; } .lSSlideOuter { max-width: 880px; width: 100%; margin: 0 auto; overflow: hidden; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .lightSlider:before, .lightSlider:after { content: " "; display: table; } .lightSlider { overflow: hidden; margin: 0; } .lSSlideWrapper { max-width: 100%; overflow: hidden; position: relative; } .lSSlideWrapper > .lightSlider:after { clear: both; } .lSSlideWrapper .lSSlide { -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); -webkit-transition: all 1s; transition-property: height, -webkit-transform; transition-property: transform, height; transition-property: transform, height, -webkit-transform; transition-duration: inherit !important; transition-timing-function: inherit !important; } .lSSlideWrapper .lSFade { position: relative; } .lSSlideWrapper .lSFade > * { position: absolute !important; top: 0; left: 0; z-index: 9; margin-right: 0; width: 100%; } .lSSlideWrapper.usingCss .lSFade > * { opacity: 0; transition-delay: 0s; transition-duration: inherit !important; transition-property: opacity; transition-timing-function: inherit !important; } .lSSlideWrapper .lSFade > *.active { z-index: 10; } .lSSlideWrapper.usingCss .lSFade > *.active { opacity: 1; } /** /!!! End of core css Should not edit !!!/**/ /* Pager */ .lSSlideOuter .lSPager.lSpg { margin: 10px 0 0; padding: 0; text-align: center; } .lSSlideOuter .lSPager.lSpg > li { cursor: pointer; display: inline-block; padding: 0 5px; } .lSSlideOuter .lSPager.lSpg > li a { background-color: #222222; border-radius: 30px; display: inline-block; height: 8px; overflow: hidden; text-indent: -999em; width: 8px; position: relative; z-index: 99; transition: all 0.5s linear 0s; } .lSSlideOuter .lSPager.lSpg > li:hover a, .lSSlideOuter .lSPager.lSpg > li.active a { background-color: #428bca; } .lSSlideOuter .media { opacity: 0.8; } .lSSlideOuter .media.active { opacity: 1; } /* End of pager */ /** Gallery */ .lSSlideOuter .lSPager.lSGallery { list-style: none outside none; padding-left: 0; margin: 0; overflow: hidden; transform: translate3d(0px, 0px, 0px); -moz-transform: translate3d(0px, 0px, 0px); -ms-transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0px, 0px, 0px); -o-transform: translate3d(0px, 0px, 0px); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .lSSlideOuter .lSPager.lSGallery li { overflow: hidden; transition: border-radius 0.12s linear 0s 0.35s linear 0s; opacity: 0.2; transition: opacity 0.35s linear 0s; } .lSSlideOuter .lSPager.lSGallery li.active, .lSSlideOuter .lSPager.lSGallery li:hover { opacity: 1; } .lSSlideOuter .lSPager.lSGallery img { display: block; height: auto; max-width: 100%; } .lSSlideOuter .lSPager.lSGallery:before, .lSSlideOuter .lSPager.lSGallery:after { content: " "; display: table; } .lSSlideOuter .lSPager.lSGallery:after { clear: both; } /* End of Gallery*/ /* slider actions */ .lSAction > a { display: block; top: 50%; height: 50px; width: 50px; background-repeat: no-repeat; background-position: center; -webkit-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer; position: absolute; z-index: 99; } .lSAction > a:hover { opacity: 1; } .lSAction > .lSPrev { background-image: url(f02f7de6688b651aeb8bee93d8971de4.svg); left: 5px; } .lSAction > .lSNext { background-image: url(039141336980b45f819d081db8316953.svg); right: 5px; } .lSAction > a.disabled { pointer-events: none; } .cS-hidden { height: 1px; opacity: 0; filter: alpha(opacity=0); overflow: hidden; } /* vertical */ .lSSlideOuter.vertical { position: relative; } .lSSlideOuter.vertical.noPager { padding-right: 0px !important; } .lSSlideOuter.vertical .lSGallery { position: absolute !important; right: 0; top: 0; } .lSSlideOuter.vertical .lightSlider > * { width: 100% !important; max-width: none !important; } /* vertical controlls */ .lSSlideOuter.vertical .lSAction > a { left: 50%; margin-left: -14px; margin-top: 0; } .lSSlideOuter.vertical .lSAction > .lSNext { background-position: 31px -31px; bottom: 10px; top: auto; } .lSSlideOuter.vertical .lSAction > .lSPrev { background-position: 0 -31px; bottom: auto; top: 10px; } /* vertical */ /* Rtl */ .lSSlideOuter.lSrtl { direction: rtl; } .lSSlideOuter .lightSlider, .lSSlideOuter .lSPager { padding-left: 0; list-style: none outside none; } .lSSlideOuter.lSrtl .lightSlider, .lSSlideOuter.lSrtl .lSPager { padding-right: 0; } .lSSlideOuter .lightSlider > *, .lSSlideOuter .lSGallery li { float: left; } .lSSlideOuter.lSrtl .lightSlider > *, .lSSlideOuter.lSrtl .lSGallery li { float: right !important; } /* Rtl */ @-webkit-keyframes rightEnd { 0% { left: 0; } 50% { left: -15px; } 100% { left: 0; } } @keyframes rightEnd { 0% { left: 0; } 50% { left: -15px; } 100% { left: 0; } } @-webkit-keyframes topEnd { 0% { top: 0; } 50% { top: -15px; } 100% { top: 0; } } @keyframes topEnd { 0% { top: 0; } 50% { top: -15px; } 100% { top: 0; } } @-webkit-keyframes leftEnd { 0% { left: 0; } 50% { left: 15px; } 100% { left: 0; } } @keyframes leftEnd { 0% { left: 0; } 50% { left: 15px; } 100% { left: 0; } } @-webkit-keyframes bottomEnd { 0% { bottom: 0; } 50% { bottom: -15px; } 100% { bottom: 0; } } @keyframes bottomEnd { 0% { bottom: 0; } 50% { bottom: -15px; } 100% { bottom: 0; } } .lSSlideOuter .rightEnd { -webkit-animation: rightEnd 0.3s; animation: rightEnd 0.3s; position: relative; } .lSSlideOuter .leftEnd { -webkit-animation: leftEnd 0.3s; animation: leftEnd 0.3s; position: relative; } .lSSlideOuter.vertical .rightEnd { -webkit-animation: topEnd 0.3s; animation: topEnd 0.3s; position: relative; } .lSSlideOuter.vertical .leftEnd { -webkit-animation: bottomEnd 0.3s; animation: bottomEnd 0.3s; position: relative; } .lSSlideOuter.lSrtl .rightEnd { -webkit-animation: leftEnd 0.3s; animation: leftEnd 0.3s; position: relative; } .lSSlideOuter.lSrtl .leftEnd { -webkit-animation: rightEnd 0.3s; animation: rightEnd 0.3s; position: relative; } /*/ GRab cursor */ .lightSlider.lsGrab > * { cursor: -webkit-grab; cursor: -o-grab; cursor: -ms-grab; cursor: grab; } .lightSlider.lsGrabbing > * { cursor: move; cursor: -webkit-grabbing; cursor: -o-grabbing; cursor: -ms-grabbing; cursor: grabbing; } .loader02 { width: 56px; height: 56px; border: 3px solid 1px solid rgba(0, 0, 0, 0.3); border-top-color: #bb0a30; border-radius: 50%; position: relative; -webkit-animation: loader-rotate 1s linear infinite; animation: loader-rotate 1s linear infinite; top: 50%; margin: 0 auto 0; } .filter .loader02 { margin: -28px auto 0; } .load-more .loader02 { display: none; } @-webkit-keyframes loader-rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loader-rotate { 0% { -webkit-transform: rotate(0); transform: rotate(0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .loader10 { width: 14px; height: 14px; border-radius: 50%; position: relative; -webkit-animation: loader10 0.9s ease alternate infinite; animation: loader10 0.9s ease alternate infinite; -webkit-animation-delay: 0.36s; animation-delay: 0.36s; top: 50%; margin: -12px auto 20px; clear: both; } @media (max-width: 544px) { .loader10 { clear: both; } } .loader10::after, .loader10::before { content: ''; position: absolute; width: 14px; height: 14px; border-radius: 50%; -webkit-animation: loader10 0.9s ease alternate infinite; animation: loader10 0.9s ease alternate infinite; } .loader10::before { left: -20px; -webkit-animation-delay: 0.18s; animation-delay: 0.18s; } .loader10::after { right: -20px; -webkit-animation-delay: 0.54s; animation-delay: 0.54s; } @-webkit-keyframes loader10 { 0% { box-shadow: 0 14px 0 -14px #0099da; } 100% { box-shadow: 0 14px 0 #0099da; } } @keyframes loader10 { 0% { box-shadow: 0 14px 0 -14px #0099da; } 100% { box-shadow: 0 14px 0 #0099da; } } .loader12 { width: 14px; height: 14px; position: relative; -webkit-animation: loader12 1s linear alternate infinite; animation: loader12 1s linear alternate infinite; top: 50%; margin: -50px auto 0; border-radius: 50%; } .car-wrapper .right .bottom-loader { clear: both; margin: 0 auto 20px; } @-webkit-keyframes loader12 { 0% { box-shadow: -40px 30px 0 2px #0099da, -20px 30px 0 0 rgba(0, 153, 218, 0.2), 0 30px 0 0 rgba(0, 153, 218, 0.2), 20px 30px 0 0 rgba(0, 153, 218, 0.2), 40px 30px 0 0 rgba(0, 153, 218, 0.2); } 25% { box-shadow: -40px 30px 0 0 rgba(0, 153, 218, 0.2), -20px 30px 0 2px #0099da, 0 30px 0 0 rgba(0, 153, 218, 0.2), 20px 30px 0 0 rgba(0, 153, 218, 0.2), 40px 30px 0 0 rgba(0, 153, 218, 0.2); } 50% { box-shadow: -40px 30px 0 0 rgba(0, 153, 218, 0.2), -20px 30px 0 0 rgba(0, 153, 218, 0.2), 0 30px 0 2px #0099da, 20px 30px 0 0 rgba(0, 153, 218, 0.2), 40px 30px 0 0 rgba(0, 153, 218, 0.2); } 75% { box-shadow: -40px 30px 0 0 rgba(0, 153, 218, 0.2), -20px 30px 0 0 rgba(0, 153, 218, 0.2), 0 30px 0 0 rgba(0, 153, 218, 0.2), 20px 30px 0 2px #0099da, 40px 30px 0 0 rgba(0, 153, 218, 0.2); } 100% { box-shadow: -40px 30px 0 0 rgba(0, 153, 218, 0.2), -20px 30px 0 0 rgba(0, 153, 218, 0.2), 0 30px 0 0 rgba(0, 153, 218, 0.2), 20px 30px 0 0 rgba(0, 153, 218, 0.2), 40px 30px 0 2px #0099da; } } @keyframes loader12 { 0% { box-shadow: -40px 30px 0 2px #0099da, -20px 30px 0 0 rgba(0, 153, 218, 0.2), 0 30px 0 0 rgba(0, 153, 218, 0.2), 20px 30px 0 0 rgba(0, 153, 218, 0.2), 40px 30px 0 0 rgba(0, 153, 218, 0.2); } 25% { box-shadow: -40px 30px 0 0 rgba(0, 153, 218, 0.2), -20px 30px 0 2px #0099da, 0 30px 0 0 rgba(0, 153, 218, 0.2), 20px 30px 0 0 rgba(0, 153, 218, 0.2), 40px 30px 0 0 rgba(0, 153, 218, 0.2); } 50% { box-shadow: -40px 30px 0 0 rgba(0, 153, 218, 0.2), -20px 30px 0 0 rgba(0, 153, 218, 0.2), 0 30px 0 2px #0099da, 20px 30px 0 0 rgba(0, 153, 218, 0.2), 40px 30px 0 0 rgba(0, 153, 218, 0.2); } 75% { box-shadow: -40px 30px 0 0 rgba(0, 153, 218, 0.2), -20px 30px 0 0 rgba(0, 153, 218, 0.2), 0 30px 0 0 rgba(0, 153, 218, 0.2), 20px 30px 0 2px #0099da, 40px 30px 0 0 rgba(0, 153, 218, 0.2); } 100% { box-shadow: -40px 30px 0 0 rgba(0, 153, 218, 0.2), -20px 30px 0 0 rgba(0, 153, 218, 0.2), 0 30px 0 0 rgba(0, 153, 218, 0.2), 20px 30px 0 0 rgba(0, 153, 218, 0.2), 40px 30px 0 2px #0099da; } } .loader12-green { width: 14px; height: 14px; position: relative; -webkit-animation: loader12-green 1s linear alternate infinite; animation: loader12-green 1s linear alternate infinite; top: 50%; margin: -50px auto 0; border-radius: 50%; } @-webkit-keyframes loader12-green { 0% { box-shadow: -40px 30px 0 2px #58ab45, -20px 30px 0 0 rgba(88, 171, 69, 0.2), 0 30px 0 0 rgba(88, 171, 69, 0.2), 20px 30px 0 0 rgba(88, 171, 69, 0.2), 40px 30px 0 0 rgba(88, 171, 69, 0.2); } 25% { box-shadow: -40px 30px 0 0 rgba(88, 171, 69, 0.2), -20px 30px 0 2px #58ab45, 0 30px 0 0 rgba(88, 171, 69, 0.2), 20px 30px 0 0 rgba(88, 171, 69, 0.2), 40px 30px 0 0 rgba(88, 171, 69, 0.2); } 50% { box-shadow: -40px 30px 0 0 rgba(88, 171, 69, 0.2), -20px 30px 0 0 rgba(88, 171, 69, 0.2), 0 30px 0 2px #58ab45, 20px 30px 0 0 rgba(88, 171, 69, 0.2), 40px 30px 0 0 rgba(88, 171, 69, 0.2); } 75% { box-shadow: -40px 30px 0 0 rgba(88, 171, 69, 0.2), -20px 30px 0 0 rgba(88, 171, 69, 0.2), 0 30px 0 0 rgba(88, 171, 69, 0.2), 20px 30px 0 2px #58ab45, 40px 30px 0 0 rgba(88, 171, 69, 0.2); } 100% { box-shadow: -40px 30px 0 0 rgba(88, 171, 69, 0.2), -20px 30px 0 0 rgba(88, 171, 69, 0.2), 0 30px 0 0 rgba(88, 171, 69, 0.2), 20px 30px 0 0 rgba(88, 171, 69, 0.2), 40px 30px 0 2px #58ab45; } } @keyframes loader12-green { 0% { box-shadow: -40px 30px 0 2px #58ab45, -20px 30px 0 0 rgba(88, 171, 69, 0.2), 0 30px 0 0 rgba(88, 171, 69, 0.2), 20px 30px 0 0 rgba(88, 171, 69, 0.2), 40px 30px 0 0 rgba(88, 171, 69, 0.2); } 25% { box-shadow: -40px 30px 0 0 rgba(88, 171, 69, 0.2), -20px 30px 0 2px #58ab45, 0 30px 0 0 rgba(88, 171, 69, 0.2), 20px 30px 0 0 rgba(88, 171, 69, 0.2), 40px 30px 0 0 rgba(88, 171, 69, 0.2); } 50% { box-shadow: -40px 30px 0 0 rgba(88, 171, 69, 0.2), -20px 30px 0 0 rgba(88, 171, 69, 0.2), 0 30px 0 2px #58ab45, 20px 30px 0 0 rgba(88, 171, 69, 0.2), 40px 30px 0 0 rgba(88, 171, 69, 0.2); } 75% { box-shadow: -40px 30px 0 0 rgba(88, 171, 69, 0.2), -20px 30px 0 0 rgba(88, 171, 69, 0.2), 0 30px 0 0 rgba(88, 171, 69, 0.2), 20px 30px 0 2px #58ab45, 40px 30px 0 0 rgba(88, 171, 69, 0.2); } 100% { box-shadow: -40px 30px 0 0 rgba(88, 171, 69, 0.2), -20px 30px 0 0 rgba(88, 171, 69, 0.2), 0 30px 0 0 rgba(88, 171, 69, 0.2), 20px 30px 0 0 rgba(88, 171, 69, 0.2), 40px 30px 0 2px #58ab45; } } .footer--find { height: 240px; background: #1a1a1a; padding: 0 80px; display: flex; align-items: center; position: relative; } @media (max-width: 1600px) { .footer--find { padding: 0 75px; } } @media (max-width: 991px) { .footer--find { padding: 0 100px; } } @media (max-width: 767px) { .footer--find { padding: 0 45px; } } .footer--find h2 { color: #fff; padding-left: 78px; } .footer--find a { padding-left: 78px; font-size: 15px; } .footer--find svg { width: 44px; position: absolute; margin-top: 20px; } @media (max-width: 1600px) { .footer--find svg { margin-top: 12px; } } @media (max-width: 1263px) { .footer--find svg { margin-top: 5px; } } .footer--find p { position: absolute; left: 154px; bottom: 0; display: flex; align-items: center; color: #999999; font-weight: 300; font-size: 12px; } @media (max-width: 1600px) { .footer--find p { left: 75px; } } @media (max-width: 991px) { .footer--find p { left: 100px; } } @media (max-width: 767px) { .footer--find p { left: 45px; } } .footer--contact-us { background-color: #f2f2f2; padding: 40px 56px; display: flex; justify-content: space-between; } @media (max-width: 991px) { .footer--contact-us { flex-wrap: wrap; } } .footer--contact-us .link { width: 33%; position: relative; background-color: #fff; text-decoration: none; } @media (max-width: 991px) { .footer--contact-us .link { width: 100%; margin-bottom: 15px; } } .footer--contact-us .link svg { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 32px; } .footer--contact-us .link > div { display: flex; flex-wrap: wrap; align-items: center; padding-left: 73px; text-align: left; height: 100%; } .footer--contact-us .link > div h4 { font-size: 20px; color: #1a1a1a; font-family: AudiTypeScreenBold; font-weight: 700; line-height: 1.2; width: 100%; margin-bottom: 4px; } .footer--contact-us .link > div p { color: #333333; font-size: 16px; font-weight: 300; line-height: 24px; margin-bottom: 0; width: 100%; } .footer--contact-us.footer--disclaimer { padding-top: 0; padding-bottom: 20px; } .footer--navi { display: flex; align-items: center; justify-content: space-between; padding: 25px 55px; } @media (max-width: 767px) { .footer--navi { padding: 25px 55px 130px; flex-wrap: wrap; } } .footer--navi ul { padding: 0; margin-bottom: 0; } @media (max-width: 767px) { .footer--navi ul { width: 100%; margin-bottom: 50px; } } .footer--navi ul li { display: inline-block; list-style: none; margin-right: 80px; } .footer--navi ul li:last-child { margin-right: 0; } @media (max-width: 1199px) { .footer--navi ul li { margin-right: 40px; } } @media (max-width: 767px) { .footer--navi ul li { display: block; } } .footer--navi ul li a { color: #333333; font-size: 16px; font-weight: 300; line-height: 24px; text-decoration: none; font-family: "AudiTypeScreenLight"; } @media (max-width: 1199px) { .footer--navi ul li a { font-size: 14px; } } @media (max-width: 767px) { .footer--navi ul li a { width: 100%; } } .footer--navi p { font-family: "AudiTypeScreenLight"; color: #333333; font-size: 14px; font-weight: 300; line-height: 24px; margin-bottom: 0; } @media (max-width: 1199px) { .footer--navi p { font-size: 14px; } } .print-button { width: 48px; height: 48px; display: none; } .error-404 { text-align: center; position: relative; min-height: 100vh; } @media (max-height: 750px) { .error-404 { height: 600px; } } .error-404 svg { width: 100%; height: auto; margin: 0 0 55px; } .error-404 h1 { color: #000000; margin-bottom: 25px; } .error-404 h4 { color: #333333; margin-bottom: 30px; } .error-404 a { min-width: 270px; margin-bottom: 55px; } @media print { body { -webkit-print-color-adjust: exact !important; overflow-y: scroll; } html, body { height: 100% !important; } a[href]:after { content: none !important; } .aui-modal.is-active { position: relative !important; } .aui-modal-open { overflow-y: scroll !important; } .imageGallery, .imageGallery li, .lslide.active .img-responsive { max-width: 770px !important; } .to-audi, .banner, .read-more, .moving-container { display: none; } .header { position: static; height: auto; } .print-button, .js-mailto, .aui-modal-dialog__close { display: none !important; } .desktop-logo { display: none; } .logo-print { display: block !important; width: 64.5px; height: 64.5px; padding: 10px; } .language { display: none; } .navbar-header { display: none; } .model-not-found { display: none !important; } .footer { display: none !important; } .filter { display: none; } .mobile-filter { opacity: 0 !important; display: none !important; } .cars { margin-top: 10px; } .car-wrapper { border: 1px solid transparent; } .cars .img-wrap { margin-bottom: 30px; border: none; } .cars .img-wrap img { width: 50%; margin-top: 2px; padding-bottom: 10px; } .cars .model-filter-wrap { height: auto; border: none; } .cars .model-filter-wrap h2 { text-align: center; } .cars .model-filter-wrap h5 { font-size: 14px; } .cars .model-filter-wrap .car-type { float: none; margin: 0 auto 10px; clear: both; } .cars .model-filter-wrap { padding: 0 50px 50px 20px; } .cars .model-filter-wrap button { display: none; } .cars .model-filter-wrap a.read-more { display: none; } .button-wrap { display: none !important; } .buttons-actions { display: none; } .aui-modal .share-content, .aui-modal .aui-modal-close { display: none; } .aui-modal { position: absolute; display: block !important; opacity: 1 !important; background-color: #fff !important; height: auto !important; } .aui-modal .left-sidebar { padding: 20px 0; page-break-after: always; float: left; } .aui-modal .left-sidebar p { font-size: 14px; line-height: 20px; } .aui-modal .left-sidebar p.color-title { line-height: 28px; } .aui-modal .left-sidebar .left-sidebar .car-color { -webkit-print-color-adjust: exact; } .aui-modal .left-sidebar .back-arrow { display: none; } .aui-modal .left-sidebar button.light-blue, .aui-modal .left-sidebar a.light-blue { display: none; } .aui-modal .right-sidebar { page-break-before: always; } .aui-modal .right-sidebar .gallery-placeholder-aui-modal { display: none; } .aui-modal .aui-modal .left-sidebar { width: 50%; } .aui-modal #imageGallery li:not(:first-child) { display: none; } .aui-modal #imageGallery li { max-width: 350px !important; } .aui-modal .lSPager.lSGallery { display: none; } .aui-modal .right-sidebar { float: right; } .aui-modal .right-sidebar { padding-top: 20px; } .footer--find, .footer--navi, .footer--contact-us { display: none; } .compare__cars { padding-left: 0; padding-right: 0; } .compare__header div, .compare__items .item.empty, .compare__items .item .main-info .aui-button-group { display: none; } .compare__items .item b, .compare__items .item p, .compare__items .item a { font-size: 12px; line-height: 18px; } .compare__items .item .main-info { padding-left: 8px; padding-right: 8px; } .compare__items .item .main-info .color-title { font-size: 11px; padding: 2px 0; } .compare__items .item .accessories .aui-headline-4 { font-size: 16px; } .compare__items .item .accessories ul li { font-size: 14px; padding: 3px 20px 3px 40px; } .compare__items .item .accessories ul li.equal { background-color: #ccc; } } @media print and (orientation: landscape) { #imageGallery li { max-width: 520px !important; } } #calculator .back { display: none; float: left; color: #000; font-family: "AudiTypeScreen"; font-size: 15px; font-weight: 400; line-height: 24px; margin-top: 30px; margin-left: 38px; cursor: pointer; } #calculator .back:hover { opacity: 0.6; } #calculator .back svg { height: 11px; margin-right: 10px; -webkit-transform: rotate(180deg); transform: rotate(180deg); } #calculator .back svg path { fill: #000; } #calculator .container { max-width: 764px; padding-top: 64px; padding-bottom: 64px; } #calculator .container h2 { color: #000; font-size: 35px; font-weight: 400; letter-spacing: -0.5px; line-height: 42px; margin: 0 0 48px 0; width: 100%; position: relative; } #calculator .container h2 img { position: absolute; top: 0; right: 0; width: 128px; } #calculator .container .request__form { display: none; } #calculator .container .request__form.active { display: block; } #calculator .container .request__form .request__form__input { margin-bottom: 32px; } #calculator .container .request__form .request__form__input.half--width { max-width: 379px; } #calculator .container .request__form .request__form__input label.fixed { color: #000; font-family: "AudiTypeScreenLight"; font-size: 14px; font-weight: 300; line-height: 28px; } #calculator .container .request__form .request__form__input .aui-textfield__field input { width: calc(100% - 30px); } #calculator .container .request__form .request__form__input .aui-textfield__field span.abs { position: absolute; top: 21px; right: 0; } #calculator .container .request__form .request__form__input .aui-select__focus-line { display: none; } #calculator .container .request__form .request__form__input .aui-select__input { color: #000; } #calculator .container .request__form .request__form__input .first_payment_options { overflow: hidden; margin: 0 0 0 -4px; max-width: 540px; } #calculator .container .request__form .request__form__input .first_payment_options div { float: left; width: calc(20% - 4px); text-align: center; height: 42px; line-height: 40px; color: #000; font-family: "AudiTypeScreen"; font-size: 15px; font-weight: 400; line-height: 40px; border: 1px solid #000; margin: 0 0 0 4px; cursor: pointer; } #calculator .container .request__form .request__form__input .first_payment_options div.active, #calculator .container .request__form .request__form__input .first_payment_options div:hover { color: #fff; background: #000; } #calculator .container .request__form .request__form__input .first_payment_options div.inactive, #calculator .container .request__form .request__form__input .first_payment_options div.inactive:hover { color: #fff; background: #6a767d; border: 1px solid #6a767d; } #calculator .container .request__form .request__form__input .first_payment_value { position: relative; } @media (min-width: 960px) { #calculator .container .request__form .request__form__input .first_payment_value { float: right; width: 150px; margin-top: -60px; } } @media (max-width: 960px) { #calculator .container .request__form .request__form__input .first_payment_value { margin-top: 44px; } } #calculator .container .leasing-offers { overflow: hidden; margin: 0 -11px; } #calculator .container .leasing-offers .leasing-offers__col { margin: 0 0 20px; padding: 0 11px; } @media (min-width: 960px) { #calculator .container .leasing-offers .leasing-offers__col { float: left; width: 33.33333%; margin: 0; } } #calculator .container .leasing-offers .leasing-offers__col .leasing-offer { text-align: center; background-color: #f2f2f2; padding: 34px 0 24px; } #calculator .container .leasing-offers .leasing-offers__col .leasing-offer .leasing-term { font-size: 19px; font-weight: 400; letter-spacing: -0.3px; line-height: 23px; font-family: "AudiTypeExtended"; } #calculator .container .leasing-offers .leasing-offers__col .leasing-offer .leasing-monthly { color: #333333; font-family: "AudiTypeScreen"; font-size: 14px; font-weight: 700; line-height: 24px; margin-top: 20px; } #calculator .container .leasing-offers .leasing-offers__col .leasing-offer hr { height: 0px; border-color: #f2f2f2; margin-top: 15px; margin-bottom: 16px; opacity: 0.2; } #calculator .container .leasing-offers .leasing-offers__col .leasing-offer .remaining-value { padding: 0 28px; margin-bottom: 24px; text-align: right; } #calculator .container .leasing-offers .leasing-offers__col .leasing-offer .remaining-value .remaining-text { float: left; color: #333; font-size: 14px; font-family: "AudiTypeScreenLight"; font-weight: 300; line-height: 24px; display: inline-block; margin-top: 6px; } #calculator .container .leasing-offers .leasing-offers__col .leasing-offer .remaining-value .remaining-input { width: 35px; display: inline-block; text-align: left; } #calculator .container .leasing-offers .leasing-offers__col .leasing-offer .remaining-value .remaining-input .percent { display: inline-block; font-size: 12px; height: 12px; line-height: 12px; vertical-align: middle; } #calculator .container .leasing-offers .leasing-offers__col .leasing-offer .remaining-value input { color: #6a767d; border: none; background: transparent; outline: none; font-size: 14px; padding: 0; height: 17px; display: inline-block; margin-right: -3px; border-bottom: 1px dotted #6a767d; width: 18px; text-align: right; } #calculator .container .leasing-offers .leasing-offers__col .leasing-offer .remaining-value span { color: #6a767d; font-size: 14px; padding: 0; height: 14px; border-bottom: 1px dotted #373737; } #calculator .container .leasing-offers .leasing-offers__col .leasing-offer .aui-button { width: calc(100% - 56px); margin: 0 28px; max-width: 231px; } #calculator .container .leasing-disclaimer { margin: 20px auto 0; width: 100%; color: #808080; font-family: "AudiTypeScreenLight"; font-size: 12px; font-weight: 300; line-height: 18px; } #calculator .container .leasing-disclaimer p { color: #808080; font-family: "AudiTypeScreenLight"; font-size: 12px; font-weight: 300; line-height: 18px; } #calculator .leasing-offer-details { padding: 24px 0 0; border-top: 1px solid #e5e5e5; } #calculator .leasing-offer-details h6 { color: #333; font-family: "AudiTypeExtended"; font-size: 22px; font-weight: 400; letter-spacing: -0.3px; line-height: 26px; margin: 0 0 32px; } #calculator .leasing-offer-details table { font-size: 16px; line-height: 24px; color: #2f3538; } #calculator .leasing-offer-details table thead { font-size: 24px; font-weight: 700; line-height: 32px; color: #000; } #calculator .leasing-offer-details table thead th { border-bottom: 1px solid #e5e5e5; padding-bottom: 24px; color: #333; font-family: "AudiTypeExtended"; font-size: 16px; font-weight: 700; letter-spacing: -0.2px; line-height: 20px; } #calculator .leasing-offer-details table thead th:nth-child(1) { text-align: left; padding-left: 0; } #calculator .leasing-offer-details table thead th:nth-child(2) { text-align: right; padding-right: 0px; } #calculator .leasing-offer-details table tbody tr:first-child td { padding-top: 24px; } #calculator .leasing-offer-details table tbody tr td { border-top: none; } #calculator .leasing-offer-details table tbody tr td:nth-child(1) { text-align: left; padding-left: 0; } #calculator .leasing-offer-details table tbody tr td:nth-child(2) { text-align: right; padding-right: 0px; } #calculator .leasing-offer-details table tbody tr td a { color: #333; border-bottom: 1px solid #00287e; text-decoration: none; } #calculator .leasing-offer-details table tbody tr td a:hover { text-decoration: none; } #calculator .leasing-offer-details .table tbody tr td { color: #333; font-family: "AudiTypeScreenLight"; font-size: 14px; font-weight: 300; line-height: 28px; } #calculator .leasing-offer-details .table1 { margin-bottom: 24px; } #calculator .leasing-offer-details .table1 tbody tr:first-child td { font-weight: 700; } #calculator .leasing-offer-footer { padding-top: 32px; padding-bottom: 40px; border-top: 1px solid #e5e5e5; overflow: hidden; margin: 0 auto; } #calculator .leasing-offer-footer .footer-left { text-align: left; color: #333; font-family: "AudiTypeExtended"; font-weight: 700; } @media (min-width: 960px) { #calculator .leasing-offer-footer .footer-left { float: left; } } #calculator .leasing-offer-footer .footer-left .monthly { font-size: 16px; letter-spacing: -0.2px; line-height: 20px; } #calculator .leasing-offer-footer .footer-left .price { font-size: 19px; letter-spacing: -0.3px; line-height: 22px; margin-top: 8px; } #calculator .leasing-offer-footer .footer-right { padding-top: 22px; } @media (min-width: 960px) { #calculator .leasing-offer-footer .footer-right { float: right; padding-top: 0; } #calculator .leasing-offer-footer .footer-right .btn { margin-top: 8px; padding: 0 36px; } #calculator .leasing-offer-footer .footer-right .btn.btn--dark { margin-left: 30px; } } @media (max-width: 960px) { #calculator .leasing-offer-footer .footer-right .btn { width: calc(50% - 10px); float: left; margin-right: 10px; } #calculator .leasing-offer-footer .footer-right .btn.btn--dark { margin-left: 10px; margin-right: 0; } } @media (max-width: 560px) { #calculator .leasing-offer-footer .footer-right .btn { width: 100%; float: none; margin-bottom: 16px; padding-left: 0; padding-right: 0; } #calculator .leasing-offer-footer .footer-right .btn.btn--dark { margin-bottom: 0; margin-left: 0; } } .block--wysiwyg { margin-top: 95px; margin-bottom: 100px; } @media (max-width: 560px) { .block--wysiwyg { margin-top: 100px; } } .block--wysiwyg h1, .block--wysiwyg h2, .block--wysiwyg h3, .block--wysiwyg h4 { color: #000; margin-bottom: 27px; font-family: "AudiTypeExtended"; } .block--wysiwyg h1 { font-size: 4.75rem; } .block--wysiwyg h2 { font-size: 3.5rem; } .block--wysiwyg h3 { font-size: 2.25rem; } .block--wysiwyg h4 { font-size: 2rem; } @media (max-width: 991px) { .block--wysiwyg h1 { font-size: 3.75rem; } .block--wysiwyg h2 { font-size: 3rem; } .block--wysiwyg h3 { font-size: 2.25rem; } .block--wysiwyg h4 { font-size: 2rem; } } .block--wysiwyg a { color: #00287e; } .block--wysiwyg a:hover { color: #00287e; text-decoration: underline; } .block--wysiwyg img { width: 100%; max-width: 100%; } .block--wysiwyg p { margin-bottom: 27px; font-size: 16px; line-height: 24px; } .block--wysiwyg strong { font-weight: bold; } .block--wysiwyg ul, .block--wysiwyg ol { margin-bottom: 27px; } .block--wysiwyg ul li, .block--wysiwyg ol li { font-size: 16px; line-height: 24px; } #vwaUnsupportedBrowserNotification { position: fixed; z-index: 100000; top: 0; left: 0; right: 0; bottom: 0; display: none; } #vwaUnsupportedBrowserNotification #vwaUBNHitarea { position: absolute; display: block; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.8); } #vwaUnsupportedBrowserNotification .vwaUBNModal { position: absolute; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); left: 50%; top: 50%; max-width: 90%; padding: 0 40px; } @media (max-width: 767px) { #vwaUnsupportedBrowserNotification .vwaUBNModal { top: 0; margin: 120px 0 0 0; position: relative; max-width: initial; -webkit-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0); } } #vwaUnsupportedBrowserNotification .vwaUBNModalInner { background-color: #fff; padding: 32px 48px; } #vwaUnsupportedBrowserNotification h2 { margin: 0 0 20px 0; font-family: 'vw-head', sans-serif; } #vwaUnsupportedBrowserNotification p { margin: 10px 0 0 0; font-family: 'vw-text', sans-serif; } #vwaUnsupportedBrowserNotification #vwaUBNCloseButton { position: absolute; top: 40px; right: 40px; width: 24px; height: 24px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABG2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+Gkqr6gAAAYFpQ0NQc1JHQiBJRUM2MTk2Ni0yLjEAACiRdZHPK0RRFMc/ZvxqjCgWFhYvDSs0RomNMhJq0jRGGWzePG9m1Mx4vTeSbJWtosTGrwV/AVtlrRSRko2NNbFBz3memknm3O65n/u955zuPRc88ayWsyqDkMsXzNhoWJlOzCg1T1TgxUeQalWzjKFoNEJZe7+VaLHrLqdW+bh/rW5etzSoqBUe1AyzIDwmHFkuGA5vCTdrGXVe+ES405QLCt84etLlZ4fTLn86bMZjw+BpFFbSJZwsYS1j5oTl5QRy2SXt9z7OS/x6fmpS1jaZrVjEGCWMwjgjDNNHDwPi++giRLfsKJMf/MmfYFFyNfEGK5gskCZDgU5Rl6S6LmtKdF1GlhWn/3/7aqV6Q251fxiqHm37tR1qNuFrw7Y/Dmz76xC8D3CeL+Yv7kP/m+gbRS2wBw1rcHpR1JLbcLYOLfeGaqo/klemJ5WCl2OoT0DTFfhm3Z79nnN0B/FV+apL2NmFDolvmPsGBptnusRp7Y8AAAAJcEhZcwAACxMAAAsTAQCanBgAAACHSURBVEiJvZbBDcAgDANRWZPpGJTrh1fVFEKc5oWQfA5gBAWoQAdaERXQJrOWOQAYCpMJH5PZnxMhE5OlMFkyIibb2hMTt8YjOF71jjB8bl8AWfLeQMpYWyY6uGHigl+SDiKVukWph5wa09SL5hG6TU662tZE9nWpVSTDZMhiZ7H44dFP/bbco6kMGLW9lC8AAAAASUVORK5CYII="); cursor: pointer; color: white; } #vwaUnsupportedBrowserNotification.ie8 .vwaUBNModal { position: relative; margin: 0 auto; left: 0; width: 400px; top: 100px; } #vwaUnsupportedBrowserNotification.ie8 #vwaUBNHitarea { background-color: #555555; } #vwaUnsupportedBrowserNotification.ie8 #vwaUBNCloseButton { display: none; } .aui-popover { z-index: 9999 !important; position: absolute !important; } .aui-tooltip { z-index: 9999 !important; } body { position: relative; } .noScroll, .overlay-noScroll { overflow: hidden !important; } .body-overlay { background: rgba(255, 255, 255, 0.8); position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; z-index: 15; overflow: hidden; } .img-responsive { display: block; max-width: 100%; height: auto; } h1, h2, h3, h4, h5, h6 { margin: 0; } h1 { color: #fff; } h2 { color: #1c1c1c; } h3 { color: #fff; } h4 { color: #fff; } h5 { color: #1c1c1c; } .btn:focus, .btn.focus, .btn:active:focus, .btn:active.focus, .btn.active:focus, .btn.active.focus { outline: none; box-shadow: none; color: #fff; } button.light-blue, a.light-blue { margin-top: 45px; background-color: #0099da; color: #fff; font-size: 18px; padding: 11px 46px; border-radius: 5px; } button.light-blue:hover, button.light-blue:active, button.light-blue:focus, a.light-blue:hover, a.light-blue:active, a.light-blue:focus { outline: none; background-color: #0068aa; color: #fff; text-decoration: none; box-shadow: none; } a.no-bg { border: 2px solid #0099da; background-color: transparent; border-radius: 5px; color: #0099da; font-size: 18px; padding: 10px 50px; } a.no-bg:hover, a.no-bg:active, a.no-bg:focus { text-decoration: none; outline: none; color: #0068aa; border: 2px solid #0068aa; } @media (max-width: 1350px) { a.no-bg { padding: 10px 40px; } } .tooltip { margin-left: -77px !important; z-index: 1; } @media (max-width: 991px) { .tooltip { margin-left: 0px !important; left: -10px !important; } } .tooltip.in { opacity: 0.98; margin-left: -77px !important; } @media (max-width: 991px) { .tooltip.in { margin-left: 0px !important; left: -10px !important; } } .tooltip.top { margin-top: -7px; } .tooltip-inner { width: 200px; background: rgba(0, 153, 218, 0.98); color: #fff; font-size: 14px; line-height: 20px; padding: 8px 17px; } .tooltip.top .tooltip-arrow { border-top-color: rgba(0, 153, 218, 0.98); bottom: -2px; margin-left: -6px; border-width: 8px 8px 0; left: auto !important; right: 0; right: 15px; margin-left: 0; } @media (max-width: 991px) { .tooltip.top .tooltip-arrow { right: auto; left: 0 !important; margin-left: 15px; } } .load-more { text-align: center; padding: 80px 0; border-bottom: 1px solid rgba(215, 224, 233, 0.8); } @media (max-width: 767px) { .load-more { padding: 40px 0; } } .load-more a { padding: 20px 80px; background-color: white; border: 1px solid #d7e0e9; color: #808890; font-size: 16px; border-radius: 5px; } .load-more a:hover, .load-more a:focus, .load-more a:active { border: 1px solid #b4bec6; color: #5e656b; text-decoration: none; } @media (max-width: 767px) { .load-more a { padding: 10px 45px; width: 171px; } } @media (max-width: 992px) { .cars .img-wrap { border: none; margin-left: 0; } .overlay-print-button { display: none !important; } } .aui-checkbox.checkbox-error .aui-checkbox__box { border: 1px solid #bb0a30 !important; } .aui-button--disabled { cursor: initial !important; color: #808890 !important; }