/*
|--------------------------------------------------------------------------
| MZG GALERIJA 3.0
|--------------------------------------------------------------------------
| LIGHTBOX CSS
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| GLAVNI LIGHTBOX
|--------------------------------------------------------------------------
*/


.mzg_lightbox {

    display:none;

    position:fixed;

    inset:0;

    z-index:9999;

    align-items:center;

    justify-content:center;

}





/*
|--------------------------------------------------------------------------
| POZADINA
|--------------------------------------------------------------------------
*/


.mzg_pozadina {

    position:absolute;

    inset:0;

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

}





/*
|--------------------------------------------------------------------------
| SADRŽAJ LIGHTBOX-A
|--------------------------------------------------------------------------
*/


.mzg_lightbox_sadrzaj {

    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    max-width:95vw;

    max-height:95vh;

}





/*
|--------------------------------------------------------------------------
| OKVIR SLIKE
|--------------------------------------------------------------------------
*/


.mzg_lightbox_slika_okvir {

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

}





.mzg_lightbox_slika_okvir img {


    max-width:90vw;

    max-height:78vh;

    object-fit:contain;

    border-radius:8px;

    opacity:1;

    transition:opacity .25s ease;


}







/*
|--------------------------------------------------------------------------
| ZATVARANJE
|--------------------------------------------------------------------------
*/


.mzg_dugme_zatvori {


    position:absolute;


    top:-45px;


    right:0;


    width:42px;


    height:42px;


    border:none;


    border-radius:50%;


    background:rgba(255,255,255,.15);


    color:white;


    font-size:30px;


    line-height:40px;


    cursor:pointer;


    transition:.2s;


}



.mzg_dugme_zatvori:hover {


    background:rgba(255,255,255,.3);


}







/*
|--------------------------------------------------------------------------
| STRELICE
|--------------------------------------------------------------------------
*/


.mzg_prethodna,

.mzg_sledeca {


    position:absolute;


    top:50%;


    transform:translateY(-50%);


    width:50px;


    height:50px;


    border:none;


    border-radius:50%;


    background:rgba(255,255,255,.18);


    color:white;


    font-size:34px;


    cursor:pointer;


    display:flex;


    align-items:center;


    justify-content:center;


    transition:.2s;


}





.mzg_prethodna:hover,

.mzg_sledeca:hover {


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


}





.mzg_prethodna {


    left:-80px;


}





.mzg_sledeca {


    right:-80px;


}








/*
|--------------------------------------------------------------------------
| INFORMACIJE ISPOD SLIKE
|--------------------------------------------------------------------------
*/


.mzg_lightbox_info {


    margin-top:18px;


    text-align:center;


    color:white;


}





.mzg_naziv_fotografije {


    font-size:20px;


    font-weight:600;


    line-height:1.4;


}





.mzg_brojac {


    margin-top:8px;


    font-size:15px;


    opacity:.75;


}







/*
|--------------------------------------------------------------------------
| ANIMACIJA SLIKE
|--------------------------------------------------------------------------
*/


#mzg_velika_slika {


    transition:opacity .25s ease;


}







/*
|--------------------------------------------------------------------------
| MOBILNI PRIKAZ
|--------------------------------------------------------------------------
*/


@media(max-width:768px) {


    .mzg_lightbox_slika_okvir img {


        max-width:94vw;


        max-height:70vh;


    }



    .mzg_prethodna {


        left:-80px;


    }



    .mzg_sledeca {


        right:-80px;


    }



    .mzg_dugme_zatvori {


        top:10px;


        right:10px;


    }



    .mzg_naziv_fotografije {


        font-size:16px;


    }



}