.divGalerijaOver{
    position: fixed;
    background-color: rgba(0, 0, 0, 0.8);
    transition: 200ms transform ease-in-out;
    width: 100vw;
    height: 100vh;
    z-index: 110;
    transform: scale(0,1);
    transform-origin: left;
    /* display: grid; */
    /* place-content: center; */
}
.divGalerijaOver div{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
}
.divGalerijaOver *{
    overflow: hidden;
}
.galPrikazi{
    transform: scale(1,1);
    /* transition: all .2s ease-in-out; */
}
.divGalerijaOver img {
    max-width: min(1280px, 100%);
    max-height: min(960px, 100%);
}
.divGalerijaOver .dugme {
    position: absolute;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    place-content: center;
    background-color: var(--pozadina-svetla);
    opacity: .6;
}
.dugme:hover{
    opacity: 1;
}
.poljeDetalji{
    background-color: var(--pozadinaProfila);
    background-image: var(--pozadinaProfilaGrad);
    color: var(--tekstBoja);
    display: grid;
    align-content: space-evenly;
    font-size: 1.1em;
    min-height: 80vh;
    grid-auto-rows: min-content;
    grid-auto-flow: row;
}
.kls_det_celine{
    border: var(--celinaOkvir);
    background-color: var(--celinaBoja);
    border-radius: var(--celinaUglovi);
    box-shadow: 1px 1px 3px var(--celinaSenka);
}
.kls_det_podnaslovi{
    display: block;
    font-style: italic;
    font-style: oblique;
}
.detalji__baner_1{
    grid-area: baner1;
    width: 100%;
    
    border: none;
    box-shadow: none;
    padding: 0px!important;
    
}
.detalji__baner_1 img{
    width: 100%;
    height: 100%;
    float: left;
    object-fit:cover; 
}
.detalji__naziv{
    grid-area: naziv;
    font-size: 2.4em;
    font-weight: 600;
    text-align: center;
    letter-spacing: 1px;
    padding: .2em .2em;
}
.d__n__naziv{
    display: block;
}
.d__n__naziv_pun{
    display: block;
    font-size: .3em;
}
.detalji__adresa {
    grid-area: adresa;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1em;
}
#divPrimarnaLokacija{
    overflow-x: unset!important;

}
#divDodatneLokacije{
    overflow-y: auto;
    font-size: .7em;
}
#divDodatneLokacije::-webkit-scrollbar {
    width: 3px;
}
#divDodatneLokacije::-webkit-scrollbar-track {
    background-color: var(--senka);
}
#divDodatneLokacije::-webkit-scrollbar-thumb {
    background: var(--tekstBoja);
    border-radius: 6px;
}
#divDodatneLokacije table{
    width: fit-content;
}
#divDodatneLokacije>table>tbody>tr>td *{
    padding: .05em .4em;
    overflow-y: hidden!important;
}
#divDodatneLokacije a,
.tdDodatnaLok_naslov{
    color: unset;
    text-shadow: 1px 1px 1px rgb(0, 0, 0, 0.3);
}
.spnAdresaPrimarna{
    font-size: 1em;
    font-weight: 600;
    text-align: center;
    margin: 0 auto;
    display: block;
}
.detalji__slika{
    grid-area: slika;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: none;
    padding: 0px!important;
    box-shadow: none;
}
.detalji__slika img{
    min-width: 100%;
    min-height: 100%;
}
.detalji__dodatno{
    /* grid-area: dodatno; UGAŠENO */
}
.detalji__dodatno>div{
    display: flex;
    justify-content: space-between;
    margin: .6em 0;
}
.detalji__dodatno>div>span:last-child{
    font-weight: 600;
}
.detalji__kontakt{
    /* grid-area: kontakti; UGAŠENO */
    display: grid;
    align-content: space-between;
    padding: .5em!important;
    grid-template-columns: auto 1fr;
    column-gap: 1em;
    row-gap: .5em;
}
.detalji__kontakt a{
    display: block;
    width: fit-content;
}
#detalji_kontakt_divSocMr{
    grid-column: span 2;
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    flex-direction: row;
    padding-top: 5px;
}
#detalji_kontakt_divSocMr a{
    transition: 200ms transform ease-in-out;
}
#detalji_kontakt_divSocMr a:hover{
    transform: translateY(-5px);
}
.detalji__ostale_op{
    /* grid-area: ostalo; UGAŠENO */
}
#spnOstaleOp{
    
}
.icon-list{
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 10px;
    justify-content: center;
}
.icon-list img{
    width: 48px;
    background-color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    padding: 2px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 4px;
}
.icon-list img:hover{
    background-color: rgba(255, 255, 255, 0.4);
}
.icon-list_nsl_track{
    display: block;
    width: 100%;
    border-radius: 3px;
    --providnoI:rgba(255,255,255,0.1);
    --providnoII:rgba(255,255,255,0.5);
    background-image: linear-gradient(to right, var(--providnoI), var(--providnoII),var(--providnoI));
    height: 30px;
    font-size: 1.4em;
    font-weight: 500;
    letter-spacing: 1px;
    text-align: center;
}
.detalji__racuni{
    /* grid-area: placanje; UGAŠENO */
}
.detalji__racuni .kls_det_podnaslovi_2{
    display: block;
    margin-top: 1em;
}
.spnTekuciRacun{
    display: block;
    margin-top: 2px;
}
.detalji__radno_vreme{
    /* grid-area: radnoVr;UGAŠENO */
    display: grid;
    /* row-gap: .5em; */
    grid-template-columns: 2fr 1fr 1fr;
}
.detalji__radno_vreme .dan{
    text-align: right!important;
    font-weight: 300!important;
    font-size: .85em;
}
.detalji__radno_vreme .spnRV{
    text-align: center;
    font-weight: 500;
    font-size: .9em;
}
.zatvoreno{
    grid-column: span 2;
    text-align: center;
}
.detalji__baner2{
    /* grid-area: baner2;UGAŠENO */
    border: none;
    padding: 0px!important;
    width: 100%;
}
.detalji__o_firmi{
    /* grid-area: oFirmi;UGAŠENO */
    position: relative;
    overflow: hidden;
    max-height: 20em;
    transition: 300ms max-height ease-in-out;
    padding-bottom: 2.5em!important;
    font-size: 1.1em;
}
#dugmeJos{
    display: block;
    position: absolute;
    bottom: 0px;
    --providnoI:rgba(255,255,255,0.1);
    --providnoII:rgba(255,255,255,0.6);
    --providnoIII:rgba(255,255,255,.9);
    background-image: linear-gradient(to right, var(--providnoI), var(--providnoII), var(--providnoIII), var(--providnoII),var(--providnoI));
    text-align: center;
    width: 100%;
    font-size: 1em;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
    letter-spacing: 1px;
    cursor: pointer;
    padding: 6px;
}
.detalji__o_firmi_celo{
    max-height: 250em;
}
.detalji__galerija{
    /* grid-area: galerija;UGAŠENO */
    display: grid;
    gap: 2px;
    overflow: hidden;
}
.divSlikaGal{
    aspect-ratio: 4 / 3;
    overflow: hidden;
    cursor: pointer;
}
.divSlikaGal:first-of-type{
    border-top-left-radius:5px;
}
.divSlikaGal:hover{
    outline: 2px solid var(--tekstBoja);
}
.divSlikaGal img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.detalji__snimiKontakt{
    /* grid-area: snimi-kontakt; */
    display: flex;
    justify-content: center;
    padding: .2em 1em;
    font-size: 1.2em;
}
.detalji__snimiKontakt>div{
    display: flex;
    align-items: center;
    gap: 1em;
    border: 2px solid var(--tekstBoja);
    padding: .5em 1em;
    border-radius: var(--celinaUglovi);
}
.detalji__snimiKontakt>div>img{
    height: 2em;
}
.detalji__snimiKontakt>div>span{
    text-shadow: 1px 1px 2px var(--celinaSenka);
}
.detalji__podeli{
    /* grid-area: podeli;UGAŠENO */
}
.detalji__podeli ul {
    list-style: none;
    text-align: center;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}
.detalji__podeli ul li{
    display: inline-block;
    padding: 2px;
    overflow: hidden;
}
.detalji__podeli ul li a{
    padding: 3px;
}
.detalji__podeli ul li a img{
    height: 56px;
    border-radius: 10px;
    padding: 1px;
}
.detalji__podeli ul li:hover img{
    outline: 2px solid var(--tekstBoja);
}
@media screen and (max-width:480px) {
    #galDugmeIzlaz {
        right: 20px;
        top: 5em;
    }
    #galDugmeLevo{
        left: 0px;
        top: 50%;
        opacity: 0.2;
    }
    #galDugmeDesno{
        right: 0px;
        top: 50%;
        opacity: 0.2;
    } 
    .poljeDetalji{
        padding: 2px;
        gap: 3px;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:    "baner1 baner1"
                                "naziv naziv"
                                "adresa adresa"
                                "slika dodatno"
                                "kontakti kontakti"
                                "ostalo ostalo"
                                "placanje placanje"
                                "radnoVr radnoVr"
                                "baner2 baner2"
                                "oFirmi oFirmi"
                                "galerija galerija"
                                "snimi-kontakt snimi-kontakt"
                                "podeli podeli";
    }
    .kls_det_celine{
        padding: 5px;
        margin-top: 2px;
    }
    
    .detalji__slika img{
        width: 100%;
    }

    .icon-list{
        justify-content: center;
    }
    .detalji__dodatno{
        grid-column: span 1;
        font-size: .9em;
    }
    .detalji__kontakt {
        grid-column: span 2;
    }
    .detalji__ostale_op{
        grid-column: span 2;
    }
    .detalji__racuni{
        grid-column: span 2;
    }
    .detalji__radno_vreme{
        grid-column: span 2;
    }
    .detalji__baner2{
        grid-column: span 2;
    }
    .detalji__o_firmi{
        grid-column: span 2;
    }
    .detalji__galerija{
        grid-column: span 2;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(auto, 1fr);
    }
    .detalji__podeli{
        grid-column: span 2;
    }
    .detalji__snimiKontakt{
        grid-column: span 2;
    }

    .divSlikaGal:nth-of-type(3){
        border-top-right-radius:5px;
    }
    .detalji__podeli ul li{
        padding:3px 1px;
    }
    .detalji__podeli ul li a img{
        height: 38px;
    }
    
}
@media screen and (min-width: 481px) and (max-width: 768px) {
    .divGalerijaOver {
        display: block;
        position: fixed;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 100;
        transform: scale(0,1);
        transform-origin: left;
        transition: all .2s ease-in-out;
        display: grid;
        place-content: center;
    }
    .divGalerijaOver div{
        position: relative;
        height: auto;
        padding: 0px;
    }
    .divGalerijaOver img {
        max-width: 100vw;
        max-height: auto;
    }
    .divGalerijaOver .dugme {
        width: 20px;
        height: 20px;
        padding: 00px;
        background-color: whitesmoke;
        border: 0px solid silver;
        position: absolute;
        border-radius: 50%;
        display: grid;
        place-content: center;
        font-weight: 900;
        font-size: x-large;
        cursor: pointer;
        box-shadow: 0px 0px 5px 2px rgb(0, 0, 0, 0.5),
                    inset 0px 0px 3px 2px rgb(0, 0, 0, 0.5);
        opacity: 0.3;
    }
    .dugme:hover{
        opacity: 1;
    }
    .galPrikazi{
        transform: scale(1,1);
        transform-origin: right;
        transition: all .2s ease-in-out;
    }
    #galDugmeIzlaz {
        right: 0px;
        top: -20px;
    }
    #galDugmeLevo{
        left: 0px;
        top: 50%;
    }
    #galDugmeDesno{
        right: 0px;
        top: 50%;
    }
    .poljeDetalji{
        padding: 10px;
        gap: 10px;
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:    "baner1 baner1 baner1"
                                "naziv naziv naziv"
                                "adresa adresa slika"; 
                                /* "kontakti kontakti dodatno"
                                "placanje placaje radnoVr"
                                "ostalo ostalo radnoVr"
                                "baner2 baner2 baner2"
                                "oFirmi oFirmi oFirmi"
                                "galerija galerija galerija"
                                "snimi-kontakt snimi-kontakt snimi-kontakt"
                                "podeli podeli podeli"; */
    }
    .kls_det_celine{
        padding: 2px 5px;
    }
    .detalji__baner_1{
        /* grid-area: baner1; */
        grid-column: span 3;
    }
    .detalji__naziv{
        grid-column: span 3;
    }
    .detalji__adresa{
        grid-column: span 2;
    }
    .detalji__dodatno{
        grid-column: span 3;
        display: flex;
        flex-direction: row;
        gap: 1em;
    }
    .detalji__kontakt {
        grid-column: span 3;
    }
    .detalji__ostale_op{
        grid-column: span 1;
    }
    .detalji__racuni{
        grid-column: span 2;
    }
    .detalji__radno_vreme{
        grid-column: span 2;
    }
    .detalji__baner2{
        grid-column: span 3;
    }
    .detalji__o_firmi{
        grid-column: span 3;
    }
    .detalji__galerija{
        grid-column: span 3;

        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(auto, 1fr);
    }
    .detalji__podeli{
        grid-column: span 3;
    }
    .detalji__snimiKontakt{
        grid-column: span 3;
    }

    .divSlikaGal:nth-of-type(5){
        border-top-right-radius:5px;
    }
}
@media screen and (min-width:769px){
    /* .divGalerijaOver {
        position: fixed;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 100;
        transform: scale(0,1);
        transform-origin: left;
        transition: all .2s ease-in-out;
        display: grid;
        place-content: center;
        padding: 5px;
    } */
    .divGalerijaOver div{
        /* position: relative; */
        /* height: auto; */
    }
    
    .divGalerijaOver .dugme {
        width: 25px;
        height: 25px;
        /* padding: 10px; */
        /* background-color: whitesmoke; */
        /* border: 0px solid silver; */
        
        /* display: grid; */
        /* font-weight: 900; */
        font-size: 1.3em;
        box-shadow: 0px 0px 5px 2px rgb(0, 0, 0, 0.5),
                    inset 0px 0px 3px 2px rgb(0, 0, 0, 0.5);
        /* opacity: 0.3; */
    }
    
    /* .galPrikazi{
        transform: scale(1,1);
        transform-origin: right;
        transition: all .2s ease-in-out;
    } */
    #galDugmeIzlaz {
        /* right: -20px; */
        /* top: -20px; */
        right: 40px;
        top: 10px;
    }
    #galDugmeLevo{
        /* left: -40px; */
        left: 40px;
        top: 50%;
    }
    #galDugmeDesno{
        /* right: -40px; */
        right: 40px;
        top: 50%;
    }
    .poljeDetalji{
        padding: 10px;
        gap: 10px;
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: min-content;
        /* grid-template-areas:"baner1 baner1 baner1 baner1"
                            "naziv naziv naziv naziv"
                            "adresa adresa slika dodatno"
                            "kontakti kontakti ostalo ostalo"
                            "placanje placanje radnoVr radnoVr"
                            "baner2 baner2 baner2 baner2"
                            "oFirmi oFirmi oFirmi oFirmi"
                            "galerija galerija galerija galerija"
                            "podeli podeli podeli podeli"; */
        grid-template-areas:"baner1 baner1 baner1 baner1"
                            "naziv naziv naziv naziv"
                            "adresa adresa slika dodatno"
                            ;
        grid-template-rows:auto auto 215px auto;
    }
    .kls_det_celine{
        padding: .2em;
    }
    /* rađeno */
    .detalji__naziv{
        grid-column: span 4;
    }
    .detalji__adresa{
        grid-template-columns: span 2;
    }
    .detalji__dodatno{
        grid-column: span 1;
    }
    .detalji__kontakt {
        grid-column: span 2;
    }
    .detalji__ostale_op{
        grid-column: span 2;
    }
    .detalji__racuni{
        grid-column: span 2;
    }
    .detalji__radno_vreme{
        grid-column: span 2;
    }
    .detalji__baner2{
        grid-column: span 4;
    }
    .detalji__o_firmi{
        grid-column: span 4;
    }
    .detalji__galerija{
        grid-column: span 4;

        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: repeat(auto, 1fr);
    }
    .detalji__podeli{
        grid-column: span 4;
    }

    /* rađeno do ovde */
    .divSlikaGal:nth-of-type(7){
        border-top-right-radius:5px;
    }
    .detalji__snimiKontakt{
        display: none;
    }

}