/* ==========================================

   Racing Lambrettas Gallery Lightbox

   ========================================== */



.rl-lightbox {

    position: fixed;

    inset: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.95);



    display: flex;

    justify-content: center;

    align-items: center;



    opacity: 0;

    visibility: hidden;



    transition: opacity .25s ease;



    z-index: 999999;

}



.rl-lightbox.active {

    opacity: 1;

    visibility: visible;

}



/* FOTO */



.rl-lightbox img {

    display: block;

    max-width: 88vw;

    max-height: 86vh;

    width: auto;

    height: auto;



    object-fit: contain;



    border-radius: 4px;

    box-shadow: 0 10px 35px rgba(0,0,0,.5);

}



/* PULSANTI */



.rl-close,

.rl-prev,

.rl-next {

    position: absolute;



    display: flex;

    align-items: center;

    justify-content: center;



    color: #fff;



    background: rgba(0,0,0,.35);



    border: none;



    cursor: pointer;

    user-select: none;



    z-index: 1000000;



    font-family: Arial, Helvetica, sans-serif;



    transition:

        background .2s ease,

        color .2s ease,

        transform .2s ease;

}



/* CHIUDI */



.rl-close {

    top: 20px;

    right: 25px;



    width: 52px;

    height: 52px;



    font-size: 40px;

    line-height: 1;



    border-radius: 50%;

}



/* FRECCIA SINISTRA */



.rl-prev,

.rl-next {

    top: 50%;



    width: 64px;

    height: 90px;



    margin-top: -45px;



    font-size: 48px;



    border-radius: 6px;

}



/* SINISTRA */



.rl-prev {

    left: 20px;

}



/* DESTRA */



.rl-next {

    right: 20px;

}



/* HOVER */



.rl-prev:hover,

.rl-next:hover,

.rl-close:hover {

    color: #00a651;

    background: rgba(0,0,0,.75);

}



.rl-prev:hover {

    transform: translateY(-50%) scale(1.05);

}



.rl-next:hover {

    transform: translateY(-50%) scale(1.05);

}



/* CONTATORE */



.rl-counter {

    position: absolute;



    bottom: 20px;

    left: 50%;



    transform: translateX(-50%);



    color: #fff;



    font-size: 14px;

    letter-spacing: 1px;



    background: rgba(0,0,0,.55);



    padding: 8px 14px;



    border-radius: 30px;



    z-index: 1000000;

}



/* BLOCCA SCROLL PAGINA */



body.rl-gallery-open {

    overflow: hidden;

}





/* ==========================================

   MOBILE

   ========================================== */



@media (max-width: 700px) {



    .rl-lightbox img {

        max-width: 82vw;

        max-height: 80vh;

    }



    .rl-prev,

    .rl-next {

        width: 48px;

        height: 70px;



        margin-top: -35px;



        font-size: 36px;

    }



    .rl-prev {

        left: 5px;

    }



    .rl-next {

        right: 5px;

    }



    .rl-close {

        top: 12px;

        right: 12px;



        width: 44px;

        height: 44px;



        font-size: 32px;

    }



    .rl-counter {

        bottom: 12px;

        font-size: 13px;

    }

}