@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --rw:"Raleway", sans-serif;

  --primary:#111214;
  --siva:#FFFFFF17;
  --light:#878F57;
  --textwhite:#F6F8EB;
  --landing-width:79.17vw;
  --landing-width-mobile:86vw;
  --boxshadow:0px 0px 30px 0px #0000000F;

--d10:0.52vw;
   --d11:0.57vw;
 
   --d12:0.63vw;
   --d13:0.68vw;
    --d14:0.73vw;
    --d15:0.78vw;
    --d16:0.83vw;
    --d18:0.94vw;
    --d20:1.04vw;
    --d22:1.15vw;
    --d24:1.25vw;
    --d25:1.3vw;
    --d28:1.46vw;
    --d30:1.56vw;
    --d34:1.77vw;
    --d36:1.88vw;
    --d44:2.29vw;
    --d40:2.08vw;
    --d48:2.5vw;
    --d54:2.81vw;
    --d56:2.92vw;
    --d64:3.33vw;
    --d80:4.17vw;
    --d84:4.38vw;
    --d100:5.21vw;
    --d110:5.73vw;
    --d120:6.25vw;
    --d156:8.13vw;
    --d904:47.08vw;


    --m10:2.78vw;
    --m11:3.06vw;
    --m12:3.33vw;
    --m13:3.61vw;
    --m14:3.89vw;
    --m15:4.17vw;
    --m16:4.44vw;
    --m18:5vw;
    --m20:5.56vw;
    --m24:6.67vw;
    --m25:6.94vw;
    --m32:8.89vw;
    --m36:10vw;
    --m40:11.11vw;
    --m48:13.33vw;
    --m64:17.78vw;
    --mmt: 27.78vw;

  






 

}


.mapa-tekst{
    width: 100%;
    display: flex;justify-content: space-between;
    margin-top: var(--d36);
    border-top: 1px solid  #E0DBCE33;
    padding-top: var(--d64);
    margin-bottom: var(--d100);



}

.mapa-tekst a{
    font-family: var(--rw);
font-weight: 400;

font-size:var(--d24);

line-height: var(--d30);
color: #FFFFFFCC;
border-right: 1px solid #FFFFFF33;
padding-right: var(--d44);





}

.mapa-prostora{
    position:relative;
}

.mapa-tekst a:last-child{
    border:none;
}

.mapa-tekst a.active{
    color:#ffffff;
    font-weight: 600;
}


.tlocrti .tlocrt{
    width: 100%;
}

.tlocrti {
    position: relative; /* Važno za pozicioniranje slika unutar kontejnera */
    height: 50.93vw; /* Postavite fiksnu visinu ako su slike različite veličine ili za vizualni prostor */
    width:79.16vw; /* Postavite fiksnu širinu ako su slike različite veličine */
    overflow: hidden; /* Osigurava da se ništa ne prelijeva van */
}

.tlocrt {
    position: absolute; /* Sve slike će biti na istom mjestu */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Po defaultu su slike prozirne (nevidljive) */
    transition: opacity 0.5s ease-in-out; /* Dodaje smooth fade prijelaz od 0.5 sekundi */
    pointer-events: none; /* Sprečava interakciju s nevidljivim slikama */
}

.tlocrt.active {
    opacity: 1; /* Aktivna slika postaje potpuno vidljiva */
    pointer-events: auto; /* Omogućuje interakciju s aktivnom slikom ako je potrebno */
}

/* Opcionalno, stilizacija za kliknuti element u .mapa-tekst */
.mapa-tekst a {
    cursor: pointer; /* Indikator da je element klikabilan */
}



.mapa-left{
    position:absolute;
    left: -7vw;
    bottom: 39%;
        cursor:pointer;
        width:var(--d64);
}

.mapa-right{
    position:absolute;
right: -7vw;
    bottom: 39%;
    cursor:pointer;
     width:var(--d64);
}






  @media screen and (max-width:900px){

    









    

    
  }