.product-video .loading-video{

    position: absolute;

    width: 125px;

    height: 125px;

}



.product-video .loading-video > img{

    background:none !important;

    box-shadow: none !important;

    width: 100%;

    height: 100%;

}



.product-video{

    position: relative;

}



.product-video.playing::before {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 75px;

    height: 75px;

    background: url('/modules/as_videoinimageslist/views/img/play.svg') no-repeat;

    background-size: contain;

    animation: none;

    opacity: 0;

}

.product-video.paused::before {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 75px;

    height: 75px;

    background: url('/modules/as_videoinimageslist/views/img/pause.svg') no-repeat;

    background-size: contain;

    animation: none;

    opacity: 0;

}



/* animation for the play and pause buttons */

@keyframes play {

    0% {

        opacity: 0;

        transform: translate(-50%, -50%) scale(1);

    }

    50% {

        opacity:1;

        transform: translate(-50%, -50%) scale(1.2);

    }

    100% {

        opacity: 0;

        transform: translate(-50%, -50%) scale(1);

    }

}

@keyframes pause {

    0% {

        opacity: 0;

        transform: translate(-50%, -50%) scale(1);

    }

    50% {

        opacity:1;

        transform: translate(-50%, -50%) scale(1.2);

    }

    100% {

        opacity: 0;

        transform: translate(-50%, -50%) scale(1);

    }

}

.product-video.paused::before {

    animation: pause 1s;

}

.product-video.playing::before {

    animation: play 1s;

}

/* Thumb style */

.thumbnail.js-thumb-container-video > picture > img{
    width: 100%;
    height: auto;
}

.thumbnail.js-thumb-container-video{
    position: relative;
}

.thumbnail.js-thumb-container-video::after{
        content: '';
        position: absolute;
        top: calc( 50% - var(--bs-gutter-y));
        left: 50%;
        transform: translate(-50%, -50%);
        width: 35px;
        height: 35px;
        background: url('/modules/as_videoinimageslist/views/img/play.svg') no-repeat;
        background-size: contain;
        animation: none;
    
}