﻿@keyframes shine-skeleton-lines {
    0 {
        background-position: -100px
    }

    40%,100% {
        background-position: 600px
    }
}

@keyframes spin {
    0 {
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@keyframes rotateImageLoading {
    from {
        transform: translate(-50%,-50%) rotateY(0) scale(1.01)
    }

    to {
        transform: translate(-50%,-50%) rotateY(360deg) scale(1.01)
    }
}

.swiper-initialized.swiper-horizontal .swiper-pagination {
    bottom: 0;
    display: flex;
    justify-content: center;
    gap: var(--dg-spacing-s-3)
}

.swiper-initialized.swiper-horizontal .swiper-pagination-bullet {
    width: 40px;
    height: 4px;
    transition: all .3s ease;
    border-radius: var(--dg-border-radius-full,100000px);
    background: var(--dg-color-field-bg-disabled,#5a5c67)
}

.swiper-initialized.swiper-horizontal .swiper-pagination-bullet-active {
    width: 64px;
    height: 4px;
    background: var(--dg-gradient-bg-copper-default,linear-gradient(47deg,#b77f58 0,#9b613b 62.52%,#804620 96.18%))
}

.swiper-button-prev, .swiper-button-next {
    display: none
}

.cmp-slide-cards-center-click {
    height: 700px;
    padding: var(--dg-layout-margin) 0;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.cmp-slide-cards-center-click__container {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 1920px;
    min-width: 320px;
    padding: 0 var(--dg-layout-margin)
}

.cmp-slide-cards-center-click__wrapper.mod__bullets {
    padding-bottom: 38px
}

.cmp-slide-cards-center-click__title {
    margin: 0 0 40px;
    text-align: center
}

    .cmp-slide-cards-center-click__title .cmp-title__text {
        color: var(--dg-color-text-strong,#fafafa);
        font-family: var(--dg-font-family-base);
        font-weight: 300;
        text-transform: uppercase;
        font-size: var(--dg-font-size-headline-m);
        line-height: var(--dg-font-height-headline-m);
        letter-spacing: var(--dg-font-letter-spacing-m);
        word-break: break-word;
        margin: 0
    }

.cmp-slide-cards-center-click__card-list {
    width: 100vw;
    margin: 0 calc(-1 * var(--dg-layout-margin))
}

@media(min-width:480px) {
    .cmp-slide-cards-center-click {
        height: 800px
    }

    .cmp-slide-cards-center-click__wrapper.mod__bullets {
        padding-bottom: 46px
    }
}

@media(min-width:768px) {
    .cmp-slide-cards-center-click {
        height: 931px;
        justify-content: center
    }

    .cmp-slide-cards-center-click__title {
        margin: 0 0 48px
    }

    .cmp-slide-cards-center-click__wrapper.mod__bullets {
        padding-bottom: 62px
    }
}

@media(min-width:920px) {
    .cmp-slide-cards-center-click__container {
        max-width: 920px
    }

    .cmp-slide-cards-center-click__card-list {
        width: 920px
    }
}

@media(min-width:1024px) {
    .cmp-slide-cards-center-click {
        padding: var(--dg-layout-margin) 0;
        height: 100%
    }

    .cmp-slide-cards-center-click__container {
        max-width: 984px
    }

    .cmp-slide-cards-center-click__title {
        margin: 0 0 var(--dg-spacing-l-1)
    }

    .cmp-slide-cards-center-click__card-list {
        width: 100%;
        margin: 0
    }

    .cmp-slide-cards-center-click__wrapper.mod__bullets {
        padding-bottom: calc(14px + var(--dg-spacing-l-1))
    }
}

@media(min-width:1440px) {
    .cmp-slide-cards-center-click__container {
        max-width: 1218px
    }
}

@media(min-width:1920px) {
    .cmp-slide-cards-center-click__container {
        max-width: 1306px
    }

    .cmp-slide-cards-center-click__title {
        margin: 0 0 var(--dg-spacing-l-3)
    }

        .cmp-slide-cards-center-click__title .cmp-title__text {
            font-size: var(--dg-font-size-headline-l);
            line-height: var(--dg-font-height-headline-l);
            margin: 0
        }

    .cmp-slide-cards-center-click__wrapper.mod__bullets {
        padding-bottom: calc(14px + var(--dg-spacing-l-3))
    }
}

.cmp-slide-cards-center-click-card {
    width: 300px
}

    .cmp-slide-cards-center-click-card:not(.swiper-slide-active) .cmp-slide-cards-center-click-card__title, .cmp-slide-cards-center-click-card:not(.swiper-slide-active) .cmp-slide-cards-center-click-card__text, .cmp-slide-cards-center-click-card:not(.swiper-slide-active) .cmp-slide-cards-center-click-card__button {
        opacity: 0
    }

    .cmp-slide-cards-center-click-card:not(.swiper-slide-active) .cmp-slide-cards-center-click-card__image::before {
        position: absolute;
        content: '';
        inset: 0;
        background-color: rgba(0,0,0,0.2);
        z-index: 2
    }

    .cmp-slide-cards-center-click-card:not(.swiper-slide-active):not(.swiper-slide-visible) .cmp-slide-cards-center-click-card__title {
        opacity: 0
    }

@media(hover:hover) and (pointer:fine) {
    .cmp-slide-cards-center-click-card.swiper-slide-active .cmp-slide-cards-center-click-card__image {
        cursor: pointer
    }

    .cmp-slide-cards-center-click-card.swiper-slide-prev .cmp-slide-cards-center-click-card__image::before {
        cursor: url('../../../../../../etc.clientlibs/cupra-website/components/clientlibs/resources/icons/cursor-arrow-left.svg'),auto !important
    }

    .cmp-slide-cards-center-click-card.swiper-slide-next .cmp-slide-cards-center-click-card__image::before {
        cursor: url('../../../../../../etc.clientlibs/cupra-website/components/clientlibs/resources/icons/cursor-arrow-right.svg'),auto !important
    }
}

.cmp-slide-cards-center-click-card__image {
    border-radius: var(--dg-border-radius-l,20px);
    background: #d3d3d3 50% / cover no-repeat;
    box-shadow: 0 8px 32px 0 var(--dg-global-opacity-black-60,#09090b 99);
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 300px;
    margin: 0 0 var(--dg-layout-margin)
}

    .cmp-slide-cards-center-click-card__image .cmp-image__image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center
    }

.cmp-slide-cards-center-click-card__content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    width: calc(100vw - 32px);
    margin-left: 50%;
    transform: translateX(-50%)
}

.cmp-slide-cards-center-click-card__title {
    margin: 0 0 var(--dg-spacing-m-1)
}

    .cmp-slide-cards-center-click-card__title .cmp-title__text {
        color: var(--dg-color-text-strong,#fafafa);
        font-family: var(--dg-font-family-base);
        font-weight: 400;
        text-transform: uppercase;
        font-size: var(--dg-font-size-headline-xs);
        line-height: var(--dg-font-height-headline-xs);
        letter-spacing: var(--dg-font-letter-spacing-m);
        margin: 0
    }

.cmp-slide-cards-center-click-card__text {
    margin: 0 0 var(--dg-spacing-m-1)
}

    .cmp-slide-cards-center-click-card__text .cmp-text, .cmp-slide-cards-center-click-card__text .cmp-text p {
        color: var(--dg-color-text-strong,#fafafa);
        font-family: var(--dg-font-family-base);
        font-weight: 350;
        font-size: var(--dg-font-size-body-m);
        line-height: var(--dg-font-height-body-m);
        letter-spacing: var(--dg-font-letter-spacing-m)
    }

        .cmp-slide-cards-center-click-card__text .cmp-text a {
            color: var(--dg-color-text-strong,#fafafa);
            text-decoration: underline
        }

.cmp-slide-cards-center-click-card__button {
    min-width: 122px
}

.cmp-slide-cards-center-click-card .cmp-slide-cards-center-click-card__title, .cmp-slide-cards-center-click-card .cmp-slide-cards-center-click-card__text, .cmp-slide-cards-center-click-card .cmp-slide-cards-center-click-card__button {
    opacity: 1;
    transition: all .6s ease
}

@media(min-width:480px) {
    .cmp-slide-cards-center-click-card {
        width: 310px
    }

    .cmp-slide-cards-center-click-card__image {
        margin: 0 0 var(--dg-spacing-m-3);
        height: 310px
    }

    .cmp-slide-cards-center-click-card__content {
        width: 100%;
        margin-left: 0;
        transform: translateX(0)
    }

    .cmp-slide-cards-center-click-card__title, .cmp-slide-cards-center-click-card__text {
        margin: 0 0 var(--dg-spacing-m-2)
    }
}

@media(min-width:768px) {
    .cmp-slide-cards-center-click-card {
        width: 380px
    }

        .cmp-slide-cards-center-click-card:not(.swiper-slide-active) .cmp-slide-cards-center-click-card__title {
            opacity: 1
        }

    .cmp-slide-cards-center-click-card__content {
        padding: 0 16px
    }

    .cmp-slide-cards-center-click-card__image {
        margin: 0 0 16px;
        height: 380px
    }

    .cmp-slide-cards-center-click-card__title {
        margin: 0 0 var(--dg-spacing-m-1)
    }

    .cmp-slide-cards-center-click-card__text {
        margin: 0 0 20px
    }

        .cmp-slide-cards-center-click-card__text .cmp-text, .cmp-slide-cards-center-click-card__text .cmp-text p {
            font-size: var(--dg-font-size-body-l);
            line-height: var(--dg-font-height-body-l)
        }

            .cmp-slide-cards-center-click-card__text .cmp-text a {
                text-decoration: underline
            }
}

@media(min-width:1024px) {
    .cmp-slide-cards-center-click-card__text {
        margin: 0 0 24px
    }

    .cmp-slide-cards-center-click-card__button {
        min-width: 138px
    }
}

@media(min-width:1440px) {
    .cmp-slide-cards-center-click-card {
        width: 470px
    }

    .cmp-slide-cards-center-click-card__image {
        margin: 0 0 20px;
        height: 470px
    }
}

@media(min-width:1920px) {
    .cmp-slide-cards-center-click-card {
        width: 500px
    }

    .cmp-slide-cards-center-click-card__image {
        height: 500px
    }
}
