/* ===========================
   SVG Gallery
=========================== */

.svg-gallery {
    width: 100%;
    margin: 0px auto;
    user-select: none;
    -webkit-user-select: none;
    max-width: 950px;
	    cursor:grab;
}
.svg-gallery img{
    -webkit-user-drag:none;
}
.svg-gallery-stage{
    position:relative;
    width:100%;
	isolation:isolate;
}
.svg-gallery.is-dragging{
    cursor:grabbing;
}
/* SVG di sfondo */

.svg-gallery-background{
    display:block;
    width:100%;
    height:auto;
    user-select:none;
    pointer-events:none;
}

/* Contenitore slide */

.svg-gallery-slides{
    position:absolute;
    inset:0;
	overflow:hidden;
}

/* Singola slide */

.svg-gallery-slide{

    position:absolute;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    opacity:0;

    transform:translateX(60px);

    pointer-events:none;

    transition:
        transform .45s cubic-bezier(.22,.61,.36,1),
        opacity .45s ease;

}

.svg-gallery-slide.is-active{

    opacity:1;
    transform:translateX(0);
    z-index:3;

}

.svg-gallery-slide.is-prev{

    opacity:0;
    transform:translateX(-60px);
    z-index:2;

}

.svg-gallery-slide.is-next{

    opacity:0;
    transform:translateX(60px);
    z-index:2;

}

/* PNG */

.svg-gallery-image{

    width:100%;
    height:100%;
    object-fit:contain;

    user-select:none;
    -webkit-user-drag:none;
    pointer-events:none;

}

/* Titolo */

.svg-gallery-caption{
    margin-top:60px;
    font-size:22px;
    font-weight:600;
}

/* Frecce */

.svg-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: var(--clr-violet-hygia);
    color: var(--clr-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: .25s;
    z-index: 20;
}

.svg-gallery-arrow:hover{
    transform:translateY(-50%) scale(1.08);
	background: var(--clr-blue-hygia);
}

.svg-gallery-prev{
    left:-40px;
}

.svg-gallery-next{
    right:-40px;
}

/* Mobile */

@media (max-width:768px){

    .svg-gallery-arrow{
        width: 35px;
        height: 35px;
        font-size: 18px;
    }

    .svg-gallery-prev{
        left:10px;
    }

    .svg-gallery-next{
        right:10px;
    }

    .svg-gallery-caption{
        font-size:18px;
    }
}