.ripple-circle {
    animation: ripple 4.5s infinite ease-in-out;
}

.ripple-circle:nth-child(2) {
    animation-delay: 0.5s;
}

.ripple-circle:nth-child(3) {
    animation-delay: 1s;
}

.ripple-circle:nth-child(4) {
    animation-delay: 1.5s;
}

@keyframes ripple {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: 0.5;
    }

    100% {
        opacity: 0;
    }
}

.tipso_bubble,
.tipso_bubble .tipso_content,
.tipso_product,
.tipso_product a{
    color: var(--donker-grijs) !important;
}

.tipso_bubble{
    background: #fff !important;
    border-radius: 2rem !important;
    box-shadow: none;
    text-align: left !important;
}

.tipso_bubble .tipso_content{
    padding: 3rem !important;
    word-break: break-word;
}

.tipso_bubble .tipso_content > *{
    margin: 0;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.3;
}

.tipso_bubble .tipso_content > * + *{
    margin-top: 1.2rem;
}

.tipso_bubble .tipso_product > :first-child{
    font-family: var(--heading-font);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.1;
}

.hotspot{
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.hotspots_image_container{
    position: relative;
}

.tipso_product{
    text-align: left !important;
    padding: 0;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.3;
    display: flex;
    box-shadow: none;
    flex-direction: column;
}

.tipso_product_afbeelding{
    width: 8rem;
    height: 8rem;
    min-width: 8rem;
}

.tipso_product_afbeelding picture{
    display: flex;
    width: 100%;
    height: 100%;
}

.tipso_product_afbeelding img{
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.tipso_product a{
    color: var(--donker-grijs);
}

.hotspots_image_container > div{
    position: relative;
}

@media (max-width:767px)
{
    .tipso_bubble{
        border-radius: 1.2rem !important;
        left: 2rem !important;
        max-width: calc(100vw - 4rem);
    }

    .tipso_bubble .tipso_content{
        padding: 1.6rem !important;
    }

    .tipso_bubble .tipso_content > *,
    .tipso_product{
        font-size: 1.4rem;
    }

    .tipso_bubble .tipso_product > :first-child{
        font-size: 2rem;
    }

    .tipso_bubble .tipso_content > * + *{
        margin-top: 0.8rem;
    }

    .hotspot svg{
        width: 3rem;
        height: 3rem;
    }
}