.lazy-element {
    display: block;
    overflow: hidden;
    position: relative;
    background: #CCC;

    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
}
.lazy-element--rendered {
    background: none;
}
.lazy-element img {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% + 1px);
    height: calc(100% + 1px);
    object-fit: cover;
}
.lazy-element.lazy-element--contain img,
.lazy-element img[src$='.svg'] {
    object-fit: contain;
}
.lazy-element figcaption {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
}


.carousel {
    position: relative;
}
.carousel__stage {
    overflow: hidden;
    position: relative;
    width: 100%;
    transform: translate3d(0,0,0);
}
.carousel__track {
    display: flex;
    position: relative;
    top: 0;
    left: 0;
    transform: translate3d(0,0,0);
    transition: transform .3s;
}

/* Buttons */
.carousel__buttons {
    display: flex;
    width: 100%;
    margin-top: 1.5rem;
    justify-content: center;
}
.carousel__btn {
    display: inline-block;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    transition: .5s border-color, .5s color;
}
.carousel__btn[disabled] {
    opacity: 0.4;
}
.carousel__pager {
    padding: 0 15px;
    line-height: 40px;
    white-space: nowrap;
}
.carousel__pager i {
    font-style: normal;
}

/* Dots */
.carousel__dots {
    display: flex;
    justify-content: center;
    list-style: none;
    padding-left: 0;
}
.carousel__dots button {
    padding: 15px;
    border: none;
    outline: none;
    font-size: 0;
    line-height: 0;
    color: transparent;
    background: none;
}
.carousel__dots button::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #FFF;
}
.carousel__dots .active button::before {
    background: #FFF;
}
@media ( min-width: 768px ) {
}
@media ( min-width: 1440px ) {
}



.modal {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  z-index: 20;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.3s ease;
}
.no-csspositionsticky .modal {
  display: block;
}
.modal__container {
  position: relative;
  max-width: calc(100vw - 40px);
  min-width: 100%;
  margin: auto;
  padding: 20px;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
  transition: all 0.3s ease;
}
.modal--media .modal__container {
  padding: 4px;
}
.modal__header {
  margin: -10px 10px 20px 0;
}
.modal__close {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  padding: 9px;
  border: 0;
  cursor: pointer;
  background: none;
  transform: translate(50%, -50%);
}
.modal__close::before {
  display: block;
  width: 26px;
  height: 26px;
  margin: 0;
  border-radius: 50%;
  border: 2px solid #fff;
  line-height: 22px;
  text-align: center;
  color: #fff;
  background: #0055ff;
}

/*
     * The following styles are auto-applied to elements with
     * transition="modal" when their visibility is toggled
     * by Vue.js.
     *
     * You can easily play with the modal transition by editing
     * these styles.
     */
.modal-enter {
  opacity: 0;
}
.modal-leave-active {
  opacity: 0;
}
.modal-enter .modal__container,
.modal-leave-active .modal__container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

/* fullscreen */
.modal--fullscreen {
  display: block;
  padding: 0;
  background: #153d8a;
}
.modal--fullscreen .modal__container {
  padding: 15px 0;
  background: none;
  box-shadow: none;
}
.modal--fullscreen .modal__header {
  margin: 0;
}
.modal--fullscreen .modal__close {
  top: 31px;
  right: 30px;
  padding: 12px;
}
.modal--fullscreen .modal__close::before {
  width: 20px;
  height: 20px;
  border: 0;
  font-size: 20px;
  line-height: 1;
  color: #fff;
  background: none;
}

/* ==========================================================================
       Media Queries
       ========================================================================== */

/* --- TABLET (MD) --- */
@media (min-width: 768px) {
.modal__container {
    min-width: 740px;
}
.modal--media .modal__container {
    width: 80vw;
}
}

/* --- DESKTOP (LG) --- */
@media (min-width: 992px) {
.modal__container {
    min-width: 940px;
}
.modal--large .modal__container {
    width: 75vw;
    max-width: 1200px;
}
}

/* --- DESKTOP (XL) --- */
@media (min-width: 1200px) {
.modal__container {
    min-width: 1100px;
}
.modal--media .modal__container {
    max-width: 854px;
}
}

/* --- DESKTOP (XXL) --- */
@media (min-width: 1440px) {
.modal__container {
    min-width: 1360px;
}
}

/* --- DESKTOP (XXXL) --- */
@media (min-width: 1600px) {
.modal__container {
    min-width: 1560px;
}
}


.placeholder {
    position: relative;
}
.placeholder__prompt {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}



.hamburger {
    display: inline-block;
    height: 24px;
    padding: 0 15px;
    vertical-align: middle;
    cursor: pointer;
    transition-property: opacity, 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-box {
    width: 30px;
    height: 24px;
    display: inline-block;
    position: relative;
}
.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px;
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 30px;
    height: 4px;
    background-color: #000;
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}
.hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block;
}
.hamburger-inner::before {
    top: -10px;
}
.hamburger-inner::after {
    bottom: -10px;
}

/* Squeeze */
.hamburger--squeeze .hamburger-inner {
    transition-duration: 0.075s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--squeeze .hamburger-inner::before {
    transition: top 0.075s 0.12s ease, opacity 0.075s ease;
}
.hamburger--squeeze .hamburger-inner::after {
    transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.hamburger--squeeze.is-active .hamburger-inner {
    transform: rotate(45deg);
    transition-delay: 0.12s;
    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.075s ease, opacity 0.075s 0.12s ease;
}
.hamburger--squeeze.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(-90deg);
    transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
}


.spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100px;
}
.spinner > div {
    width: 18px;
    height: 18px;
    margin: 0 3px;
    background-color: #A5ACAF;

    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner--white > div {
    background-color: #FFF;
}
.spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}
.spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0)
}
40% { -webkit-transform: scale(1.0)
}
}
@keyframes sk-bouncedelay {
0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
}
40% {
          -webkit-transform: scale(1.0);
          transform: scale(1.0);
}
}



.modal--pf .modal__header > .container {
    padding-bottom: 17px;
}
.pf .btn--icon.icon-up {
   pointer-events: none;
}
.pf__filter-form .form__input-list {
    margin-top: 5px;
}
.pf__active-filters .pill {
    padding: 10px 16px;
}
.pf .btn--ghost-white {
    border-radius: 4px;
}
.pf__overlay {
    position: sticky;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 100%);
}
.pf__results .h2 {
    padding-right: 20px;
}
.pf__products {
    display: flex;
    flex-wrap: wrap;
}
.pf-product {
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 0 0 50%;
    padding: 10px;
    border-bottom: 1px solid #D0D0CF;
    background: #FFF;
}
.pf-product:nth-child(odd) {
    border-right: 1px solid #D0D0CF;
}
.pf-product__title {
    position: relative;
    z-index: 1;
    line-height: 1.25;
}
.pf-product__title .subline {
    margin-bottom: 0.25rem;
}
.pf-product__img {
    position: relative;
    z-index: 1;
    width: 100%;
}
.pf-product__img img {
    object-fit: contain;
}
.pf-product__content {
    position: relative;
}
p.pf-product__desc {
    opacity: 0;
    padding: 15px 10px 10px;
    position: absolute;
    left: -10px;
    right: -10px;
    bottom: -100%;
    transition: opacity .4s ease-out, bottom .3s ease-out;
    background: #A5CCD7;
    line-height: 1.5;
    z-index: 10;
}
.no-touchevents .pf-product:hover .pf-product__desc {
    bottom: -10px;
    opacity: .9;
}
.pf-product__content:not(.has-desc):after {
    content: '';
    clip-path: polygon(0 34%, 100% 0, 100% 100%, 0% 100%);
    position: absolute;
    right: -10px;
    bottom: -10px;
    left: -10px;
    height: 0;
    background: #A5CCD7;
    transition: height .3s;
    opacity: .8;
}
.no-touchevents .pf-product:hover .pf-product__content:not(.has-desc):after {
    height: 60%;
}



/* ==========================================================================
   Media Queries
   ========================================================================== */

/* --- PHONE (SM) --- */
@media ( min-width: 576px ) {
}

/* --- TABLET (MD) --- */
@media ( min-width: 768px ) {
}



/* --- DESKTOP (LG) --- */
@media ( min-width: 992px ) {
.modal--pf .modal__container {
        padding: 0 0 40px 0;
}
.modal--pf .modal__close {
        display: none;
}
.modal--pf .modal__header {
        position: sticky;
        z-index: 2;
        top: 0;
        background: #153D8A;
}
.modal--pf .modal__header .line-after {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
}
.pf__overlay {
        background: none;
}
.pf-product {
        flex: 0 0 25%;
        border-right: 1px solid #D0D0CF;
}
.pf-product:nth-child(4n) {
        border-right: 0;
}
}



/* --- DESKTOP (XL) --- */
@media ( min-width: 1200px ) {
}



/* --- DESKTOP (XXL) --- */
@media ( min-width: 1440px ) {
}



.no-csspositionsticky .gallery-modal .modal__container {
    width: 80vw;
    max-width: 1440px;
}


#hubspot-form fieldset {
    max-width: calc(100% + 20px);
    margin-right: -20px;
    break-inside: avoid;
}
#hubspot-form fieldset.form-columns-2 .hs-form-field,
#hubspot-form fieldset.form-columns-3 .hs-form-field {
    width: 100%;
}
#hubspot-form fieldset > div:not(.hs-form-field):not(.hs-dependent-field) {
    margin-right: 20px;
}
.hs-form .hs-form-field {
    margin: 0 0 20px;
    position: relative;
}
.hs-form .hs-form-field:not(.hs-fieldtype-booleancheckbox):not(.hs-fieldtype-radio):not(.hs-fieldtype-checkbox) > label {
    position: absolute;
    top: 5px;
    left: 15px;
    margin: 0;
    color: #808080;
    font-size: 14px;transition: color .3s;
}
.hs-form fieldset .input {
    margin: 0 20px 0 0 !important;
}
select.hs-input,
input[type="text"].hs-input,
input[type="password"].hs-input,
input[type="number"].hs-input,
input[type="tel"].hs-input,
input[type="email"].hs-input,
input[type="search"].hs-input,
input[type="date"].hs-input,
input[type="url"].hs-input,
textarea.hs-input {
    height: 64px;
    font-family: Arial, sans-serif;
    line-height: 100%;
    color: #4A4949;
    border: 1px solid #e0e0e0;
    border-radius: 0;
    padding: 22px 15px 0 !important;
    transition: border-color .3s, background .2s;
    width: 100%;
    background-image: none !important;
    font-size: 16px;
}
textarea.hs-input {
    padding: 34px 15px 0 !important;
}
.hs-form-field:hover .hs-input {
    background: #EBEBEB;
}
.hs-form .hs-form-field:not(.hs-fieldtype-booleancheckbox):not(.hs-fieldtype-radio):not(.hs-fieldtype-checkbox):hover label:not(.hs-error-msg) {
    color: #4A4949;
}
.hs-form .hs-input:focus {
    background: #fff;
    border-bottom: 2px solid #0055FF;
}

/* --- SELECT --- */
.hs-form select.hs-input {
    padding: 22px 30px 0 10px !important;
    -webkit-appearance: none;
    appearance: none;
    background: #fff;
}
.hs-form .hs-fieldtype-select .input:after {
    content: '\e815';
    font-family: "fontello";
    font-size: .75rem;
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    position: absolute;
    right: 35px;
    top: 50%;
    transform: translateY(-50%);
    color: #0055FF;
    pointer-events: none;
}

/* --- RADIO/CHECKBOX --- */
.hs-fieldtype-radio > label,
.hs-fieldtype-checkbox > label {
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.5;
    letter-spacing: .5px;
}
.inputs-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.hs-form-checkbox,
.hs-form-radio {
    display: block;
    margin-bottom: 0.75rem;
}
.hs-form-checkbox:last-child,
.hs-form-radio:last-child {
    margin-bottom: 0;
}
.hs-form-booleancheckbox input,
.hs-form-checkbox input,
.hs-form-radio input {
    position: absolute;
    opacity: 0;
}
.hs-form-booleancheckbox label span,
.hs-form-checkbox label span {
    font-size: 14px;
}
.hs-form-booleancheckbox label span:not(.hs-form-required),
.hs-form-checkbox label span:not(.hs-form-required),
.hs-form-radio label span:not(.hs-form-required) {
    display: block;
    position: relative;
    padding-left: calc(18px + 0.5em);
    line-height: 1.4rem;
    cursor: pointer;
    margin-bottom: 0;
}
.hs-form-radio label span:not(.hs-form-required):before,
.hs-form-radio label span:not(.hs-form-required):after,
.hs-form-booleancheckbox label span:not(.hs-form-required):before,
.hs-form-checkbox label span:not(.hs-form-required):before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 1px solid #808080;
    border-radius: 2px;
    transition: border .2s;
    background: #FFF;
}
.hs-form-radio label span:not(.hs-form-required):before {
    border-radius: 50%;
}
.hs-form-radio label span:not(.hs-form-required):after {
    top: 50%;
    transform: translateY(-50%);
    left: 2px;
    width: 14px;
    height: 14px;
    border: 7px solid #FFF;
    border-radius: 50%;
    background: #0055FF;
}
.hs-form-booleancheckbox label span:not(.hs-form-required):after,
.hs-form-checkbox label span:not(.hs-form-required):after {
    content: '\e800';
    position: absolute;
    top: 50%;
    left: 0;
    width: 18px;
    height: 18px;
    text-align: center;
    font: normal 400 10px/16px "fontello";
    line-height: 1.75 !important;
    speak: none;
    color: #fff;
    transform: scale(0) translateY(-100%);
    transition: transform .4s;
}
.hs-form-booleancheckbox input:checked + span:not(.hs-form-required):before,
.hs-form-checkbox input:checked + span:not(.hs-form-required):before {
    border: 9px solid #0055FF;
}
.hs-form-radio input:checked + span:not(.hs-form-required):after {
    border-width: 2px;
}
.hs-form-booleancheckbox input:checked + span:not(.hs-form-required):after,
.hs-form-checkbox input:checked + span:not(.hs-form-required):after {
    transform: scale(1) translateY(-50%);
}
.hs-form-booleancheckbox input[disabled=disabled]:checked + span:not(.hs-form-required):before,
.hs-form-checkbox input[disabled=disabled]:checked + span:not(.hs-form-required):before {
    border-color: #808080;
}
.legal-consent-container .hs-form-booleancheckbox-display > span {
    margin: 0 !important;
}
.legal-consent-container p {
    margin-bottom: .5rem;
}
.legal-consent-container .field.hs-form-field {
    margin-bottom: 1rem !important;
}
.hs-form .hs-recaptcha {
    margin-top: 1rem;
}
.hs-form .hs_submit {
    margin-top: 2rem;
}
.legal-consent-container {
    break-inside: avoid;
}
.hs_submit {
    text-align: right;
}


/* --- ERROR MESSAGES --- */
.hs-error-msgs {
    margin-top: 5px;
    font-size: 14px;
    color: #E63312;
    list-style: none;
}
.hs-error-msgs .hs-error-msg {
    margin-bottom: 0;
}
.hs-form .hs-input.error {
    border: 1px solid #E63312;
    border-bottom-width: 2px;
}
@media( min-width: 768px ) {
#hubspot-form fieldset.form-columns-2 .hs-form-field {
        width: 50%;
}
#hubspot-form fieldset.form-columns-3 .hs-form-field {
        width: 33.3%;
}
}



.pxa-dealer-label {
  margin-top: -35px;
  margin-left: 50%;
}


.search-field {
    position: relative;
}
.search-field__suggestions {
    position: absolute;
    z-index: 2;
    top: 100%;
    right: 0;
    left: 0;
    list-style: none;
    margin: -2px 0 0 0;
    padding: 1rem 0;
    border: 1px solid rgba(0,0,0,0.22);
    background: #FFF;
    box-shadow: 0 20px 20px -10px rgba(0,0,0,.5);
}
.search-field__suggestions li {
    padding: 0.5rem 20px;
    cursor: pointer;
}
.search-field__suggestions li:hover,
.search-field__suggestions .active {
    background: #ECECEC;
}
.search-field__suggestions mark {
    font-weight: 700;
    background: none;
}
.search-field input {
    padding-right: 30px;
}
.search-field .clear-input {
    height: 100%;
}