.premuim_page div#colum_image_list .lists .list:after {
    content: 'xx';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgb(0 0 0 / 55%);
    color: transparent;
    pointer-events: none;
}
.premuim_page div#colum_image_list .lists .list .text {
    z-index: 1;
}

.inner-hero .img-wrapper:after {
    content: 'xx';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgb(0 0 0 / 45%);
    color: transparent;
    pointer-events: none;
}

/*button:focus{
    border: 1px dashed #1ef1c6 !important;
}*/

/*
 * Focus indicator.
 *
 * A two-tone ring drawn INSIDE the element (inset box-shadow), so it is:
 *   - never clipped by an overflow:hidden ancestor (unlike a border/outer ring),
 *   - visible on dark backgrounds (mint inner ring) AND on light ones such as
 *     the cookie modal, popups and rating tables (dark outer ring),
 *   - meeting WCAG 1.4.11 (3:1 non-text contrast) on any background.
 * The transparent outline keeps focus visible in Windows High Contrast Mode,
 * where box-shadow is dropped.
 */
*:focus-visible{
    outline: 2px solid transparent !important;
    outline-offset: -2px !important;
    box-shadow:
        inset 0 0 0 2px #1ef1c6,
        inset 0 0 0 4px rgba(0, 0, 0, 0.85) !important;
}

.play-icon {
    display: block !important;
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    top: auto;
    left: 0;
    margin: 1%;
    width: 4%;
}

.play-icon img{
    max-width: 3vw;
    height: auto;
    display: block;
    margin: 0 auto;
}

/*
 * Pause/play control that a11y-fixes.js adds to autoplaying videos and
 * sliders (WCAG 2.2.2). Same icon and corner as the homepage hero button.
 * At least 44px so it is easy to hit.
 */
.elv-motion-host{
    position: relative;
}
.elv-motion-toggle{
    position: absolute;
    left: 1.5%;
    bottom: 3%;
    z-index: 5;
    width: max(44px, 3.5vw);
    height: max(44px, 3.5vw);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    line-height: 0;
    cursor: pointer;
}
.elv-motion-toggle img{
    display: block;
    width: 100%;
    height: 100%;
}
.elv-motion-toggle--inline{
    position: static;
    align-self: center;
}
.elv-motion-toggle:focus-visible{
    outline: 3px solid #1ef1c6 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px #000 !important;
}
@media (max-width: 1024px){
    .elv-motion-toggle{
        width: max(44px, 10vw);
        height: max(44px, 10vw);
    }
}

.startSlide {
    width: 4vw;
    height: 4vw;
    cursor: pointer;
    display: none;
}
.stopSlide {
    width: 4vw;
    height: 4vw;
    cursor: pointer;
    display: block;
}
@media(max-width: 1024px){
    .play-icon img{
        max-width: 10vw;
    }
    .play-icon {
        width: 10%;
    }
}
.menu-wrapper{
    opacity: 0;
    visibility: hidden;
    z-index: 20;
}
.menu-wrapper.opened {
    opacity: 1;
    visibility: visible;
}

#burger-btn-in{
    position: absolute;
    top: 2.5%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* .zoom200 #my_popup {
    width: 30%;
    margin: 0 auto;
    overflow-y: auto;
} */
.zoom200 .my_popup_car {
    width: 100%;
    margin-top: 0;
    margin: 0 auto;
    margin-top: 5%;
}
.zoom200  .my_popup_x {
    top: -1vw;
}
.zoom200 .my_popup_text1 {
    padding: 0;
    line-height: 1;
    font-size: 200%;
}
.zoom200 .my_popup_text2 {
    font-size: 100%;
    width: 100%;
}
.zoom200 #my_popup .text_under {
    font-size: 100%;
    margin-bottom: 2.7vw;
}
.zoom200 #my_popup .input-item label {
    font-size: 25%;
}
.zoom200 .my_popup_car .info-panel {
    padding: 0;
    margin-top: -13%;
    font-size: 88%;
    width: 90%;
    margin: 0 auto;
    margin-top: -15%;
}
.faq-item .title {
    width: 100%;
}



/*
 * Highlights slider (sections/section-8.php): keyboard focus opens a card the
 * same way hovering does (.card-item:hover rules in oldmain.css). The slide is
 * the single focus stop - it used to hold a hidden radio as a second one, and
 * radios sharing a name only give one Tab stop per group, so only the first
 * card ever opened.
 */
.about-slider-section .swiper-slide:focus .card-item .caption {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
.about-slider-section .swiper-slide:focus .card-item .caption p {
    opacity: 1;
}
/* Draw the focus ring on the card, as an overlay: an inset box-shadow on the
   card itself would be painted underneath the photo. */
.about-slider-section .swiper-slide:focus-visible{
    box-shadow: none !important;
}
.about-slider-section .swiper-slide:focus-visible .card-item::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 2px #1ef1c6,
        inset 0 0 0 4px rgba(0, 0, 0, 0.85);
}

[role="tabpanel"].is-hidden {
  display: none;
}
.filter-none {
    display: block !important;
}

[for="input-8"]{
    opacity: 0;
    position: absolute !important;
}

[for="input-12"]{
    opacity: 0;
    position: absolute !important;
}

[for="input-16"]{
    opacity: 0;
    position: absolute !important;
}


.swiper-slide:focus {
    /*border: 1px dashed #1ef1c6 !important;*/
}

/*
 * Consent checkbox (sections/section-7.php contact form).
 *
 * The visible consent text is now inside a real <label>, so it is announced
 * and clicking it toggles the checkbox. The drawn 16px box moved from the
 * <label> itself onto an inner .checkbox-item__box span, so the box rules
 * from oldmain.css are re-created here. Scoped to .checkbox-item--boxed-label
 * so the other forms that still use the box-as-label markup are untouched.
 */
/* The ID-prefixed selector and !important are needed to beat the old theme's
   tablet.css, which sizes "#contact .form-item.checkbox-item label" as a box
   (with !important below 768px), and header.php, which sets
   "flex: 0 0 5% !important" on that label below 1024px. The test-drive popup
   (#my_popup / #popupForm) has the same kind of id-level rules. */
.form-item.checkbox-item--boxed-label label.checkbox-item__label,
:is(#contact, #contact-2, #contact-3, #popupForm, #my_popup) .form-item.checkbox-item--boxed-label label.checkbox-item__label{
    display: flex !important;
    align-items: flex-start;
    gap: .625rem;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    margin: 0 !important;
    flex: 1 1 100% !important;
    background: transparent;
    cursor: pointer;
}
/* The 24px hit-area pseudo was sized for the old 16px label; the whole
   label is clickable now, so it is not needed (and would sit mid-text). */
.form-item.checkbox-item--boxed-label label.checkbox-item__label::after{
    content: none;
}
.form-item.checkbox-item--boxed-label .checkbox-item__box{
    display: block;
    width: 1rem;
    height: 1rem;
    border: 1px solid #fff;
    margin-top: .375rem;
    flex: 0 0 auto;
    transition: .3s;
}
.form-item.checkbox-item--boxed-label .checkbox-item__label .fz-16.fz-m-28{
    flex: 1 1 auto;
}
/* Checked and focus states belong on the box, not on the label container. */
/* !important + id prefix: "#popupForm .checkbox-item input:checked ~ label"
   paints the label mint with !important, which would fill the whole text. */
.form-item.checkbox-item--boxed-label input:checked ~ label.checkbox-item__label,
:is(#contact, #contact-2, #contact-3, #popupForm, #my_popup) .form-item.checkbox-item--boxed-label input:checked ~ label.checkbox-item__label{
    background: transparent !important;
    border: 0 !important;
}
.form-item.checkbox-item--boxed-label input:checked ~ label .checkbox-item__box{
    background: #1EF1C6;
    border-color: #1EF1C6;
}
.form-item.checkbox-item--boxed-label input:focus ~ label.checkbox-item__label,
.form-item.checkbox-item--boxed-label input:focus-visible ~ label.checkbox-item__label{
    outline: none;
}
.form-item.checkbox-item--boxed-label input:focus-visible ~ label .checkbox-item__box{
    outline: 3px solid #1EF1C6;
    outline-offset: 2px;
}
@media screen and (max-width: 768px){
    .form-item.checkbox-item--boxed-label .checkbox-item__box{
        width: 4.66667vw;
        height: 4.66667vw;
        margin-top: 2.13333vw;
    }
}
/* Tablet sizes from the old theme's tablet.css, applied to the inner box. */
@media only screen and (min-width: 768px) and (max-width: 1024px){
    :where(html.elv-tablet-css) .form-item.checkbox-item--boxed-label .checkbox-item__box{
        width: 3rem;
        height: 3rem;
        margin-top: 1rem;
    }
    :where(html.elv-tablet-css) .form-item.checkbox-item--boxed-label label.checkbox-item__label{
        gap: 1.625rem;
    }
}
@media only screen and (max-width: 768px) and (max-height: 954px){
    :where(html.elv-tablet-css) .form-item.checkbox-item--boxed-label .checkbox-item__box{
        width: 1.5rem;
        height: 1.5rem;
        margin-top: .5rem;
    }
    :where(html.elv-tablet-css) .form-item.checkbox-item--boxed-label label.checkbox-item__label{
        gap: 1rem;
    }
}

/*
 * Second contact section (sections/section-7.php renders twice on model pages).
 *
 * Its id is now "contact-2" instead of a duplicate "contact". CSS id selectors
 * used to match both copies, so the #contact rules are mirrored here with the
 * same media conditions and specificity. Sources: oldmain.css, main.css, and
 * the old theme's tablet.css (tablet-only, hence :where(html.elv-tablet-css),
 * which adds no specificity).
 */
#contact-2 > .row.align-items-start{
    display: flex;
    flex-flow: row;
}
@media (max-width: 1024px){
    #contact-2 > .row.align-items-start{
        display: flex;
        flex-flow: column-reverse;
    }
    .single_models #contact-2{
        padding: 5vw 0 !important;
    }
}
@media (min-width: 63.99875em){
    #contact-2 > .row.align-items-start{
        flex-direction: row;
        align-items: center;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 1){
    :where(html.elv-tablet-css) #contact-2 .fz-20{ font-size: 3.25rem; }
    :where(html.elv-tablet-css) #contact-2 .input-item input{
        border-radius: 0 0 0 2.625rem;
        height: 7.4375rem;
        width: 100%;
        padding: 0 1.9375rem;
    }
    :where(html.elv-tablet-css) #contact-2 .fz-16{ font-size: 2.6rem; }
    :where(html.elv-tablet-css) #contact-2 [class^="icon-"]::before{ font-size: 2rem; }
    :where(html.elv-tablet-css) #contact-2 .fz-14{ font-size: 2rem; }
}
@media only screen and (max-width: 768px) and (max-height: 954px) and (-webkit-min-device-pixel-ratio: 1){
    :where(html.elv-tablet-css) #contact-2 .input-item input{
        border-radius: 0 0 0 2.625rem;
        height: 4.4375rem !important;
    }
}