@keyframes shine-skeleton-lines {
    0 {
        background-position: -100px
    }

    40%,100% {
        background-position: 600px
    }
}

.mod__max-w-xl {
    max-width: 1436px;
    margin: auto
}

@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)
    }
}

.cmp-video__small, .cmp-video .cmp-video__container__small {
    max-width: 266px
}

@media(min-width:764px) {
    .cmp-video__small, .cmp-video .cmp-video__container__small {
        max-width: 452px
    }
}

@media(min-width:1016px) {
    .cmp-video__small, .cmp-video .cmp-video__container__small {
        max-width: 620px
    }
}

@media(min-width:1436px) {
    .cmp-video__small, .cmp-video .cmp-video__container__small {
        max-width: 634px
    }
}

.cmp-video__normal, .cmp-video .cmp-video__container__normal {
    max-width: 288px
}

@media(min-width:764px) {
    .cmp-video__normal, .cmp-video .cmp-video__container__normal {
        max-width: 700px
    }
}

@media(min-width:1016px) {
    .cmp-video__normal, .cmp-video .cmp-video__container__normal {
        max-width: 788px
    }
}

@media(min-width:1436px) {
    .cmp-video__normal, .cmp-video .cmp-video__container__normal {
        max-width: 904px
    }
}

@media(min-width:1436px) {
    .cmp-video__big, .cmp-video .cmp-video__container__big {
        max-width: 1368px
    }
}

.cmp-video {
    position: relative;
    height: 100%;
    margin: 16px
}

@media(min-width:1016px) {
    .cmp-video {
        margin: 32px
    }
}

.cmp-video__small, .cmp-video__normal, .cmp-video__big {
    width: 100%;
    margin: 16px auto
}

@media(min-width:1016px) {
    .cmp-video__small, .cmp-video__normal, .cmp-video__big {
        margin: 32px auto
    }
}

.cmp-video__container {
    position: relative;
    width: 100%;
    margin: 0 auto
}

    .cmp-video__container:before {
        content: "";
        display: block;
        padding-bottom: calc(56.25%)
    }

.cmp-video__image {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    z-index: 1
}

.cmp-video__image__play-button {
    display: grid;
    place-items: center;
    z-index: 5;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    padding: 0;
    transform: translate(-50%,-50%);
    background-position: center;
    background-repeat: no-repeat;
    background-color: white;
    border: 0;
    border-radius: 50%;
    transition: transform .3s ease-in;
    cursor: pointer
}

@media(min-width:1016px) {
    .cmp-video__image__play-button {
        width: 48px;
        height: 48px
    }
}

.cmp-video__image__play-button svg {
    position: relative;
    left: 2px
}

.cmp-video__image__play-button:hover {
    transform: translate(-50%,-50%) scale(0.9)
}

.cmp-video__image__play-button.hidden {
    display: none
}

.cmp-video__image .multimedia {
    height: 100%
}

    .cmp-video__image .multimedia .cmp-image {
        height: 100%
    }

    .cmp-video__image .multimedia .cmp-image__image {
        height: 100%;
        width: 100%;
        object-fit: cover
    }

.cmp-video__image .image-fullscreen-icon .hidden {
    display: none
}

.cmp-video__image.hidden {
    display: none
}

.cmp-video__wrapper {
    width: 100%;
    height: 100%
}

    .cmp-video__wrapper iframe, .cmp-video__wrapper img, .cmp-video__wrapper video {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        border: 0
    }

    .cmp-video__wrapper video {
        background-color: #000
    }

.cmp-video .yt-lazyload .yt-lazyload-wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

    .cmp-video .yt-lazyload .yt-lazyload-wrap .yt-lazyload-content {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
        background-color: var(--color-bg-01);
        background-image: var(--yt-lazyload-img)
    }

        .cmp-video .yt-lazyload .yt-lazyload-wrap .yt-lazyload-content .yt-lazyload-playbtn {
            display: grid;
            place-items: center;
            z-index: 1;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 40px;
            height: 40px;
            background-color: var(--color-bg-03);
            border: 0;
            border-radius: 50%;
            transition: transform .3s ease-in;
            cursor: pointer
        }

@media(min-width:1016px) {
    .cmp-video .yt-lazyload .yt-lazyload-wrap .yt-lazyload-content .yt-lazyload-playbtn {
        width: 48px;
        height: 48px
    }

        .cmp-video .yt-lazyload .yt-lazyload-wrap .yt-lazyload-content .yt-lazyload-playbtn:hover {
            transform: translate(-50%,-50%) scale(0.9)
        }
}

.cmp-video .yt-lazyload .yt-lazyload-wrap .yt-lazyload-content .yt-lazyload-logo {
    display: block;
    width: 116px;
    padding: 12px;
    position: absolute;
    right: 0;
    bottom: 8px;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: .75
}

.cmp-video .yt-lazyload .yt-lazyload-wrap .yt-lazyload-content iframe {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    border: 0
}

.cmp-video .vi-lazyload .vi-lazyload-wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: inherit
}

    .cmp-video .vi-lazyload .vi-lazyload-wrap .vi-lazyload-content {
        position: relative;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        background-color: var(--color-bg-01);
        background-image: var(--vi-lazyload-img)
    }

        .cmp-video .vi-lazyload .vi-lazyload-wrap .vi-lazyload-content .vi-lazyload-playbtn {
            display: grid;
            place-items: center;
            z-index: 1;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 40px;
            height: 40px;
            background-color: var(--color-bg-03);
            border: 0;
            border-radius: 50%;
            transition: transform .3s ease-in;
            cursor: pointer
        }

@media(min-width:1016px) {
    .cmp-video .vi-lazyload .vi-lazyload-wrap .vi-lazyload-content .vi-lazyload-playbtn {
        width: 48px;
        height: 48px
    }

        .cmp-video .vi-lazyload .vi-lazyload-wrap .vi-lazyload-content .vi-lazyload-playbtn:hover {
            transform: translate(-50%,-50%) scale(0.9)
        }
}

.cmp-video .vi-lazyload .vi-lazyload-wrap .vi-lazyload-content .vi-lazyload-logo {
    display: block;
    width: 30%;
    min-width: 95px;
    min-height: 27px;
    max-width: 215px;
    padding-top: 8.6%;
    position: absolute;
    right: 4%;
    bottom: 4%;
    z-index: 2;
    opacity: .75;
    transition: opacity .3s
}

    .cmp-video .vi-lazyload .vi-lazyload-wrap .vi-lazyload-content .vi-lazyload-logo:hover {
        opacity: 1;
        transition: opacity .3s
    }

.cmp-video .vi-lazyload .vi-lazyload-wrap .vi-lazyload-content iframe {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    border: 0
}