.map-link > polygon,
.map-link > rect,
.map-link > path {
    opacity: 0; 
    fill: #ccc; 
    stroke: none;
    transition: opacity 0.3s, fill 0.3s;
}

.map-link {
    cursor: pointer;
}

.is-hovered > polygon, .is-hovered > rect, .is-hovered > path,
.is-active > polygon, .is-active > rect, .is-active > path {
    opacity: 0.4;
    stroke: black;
}

.s-slobodan.is-hovered > polygon, .s-slobodan.is-hovered > rect, .s-slobodan.is-hovered > path,
.s-slobodan.is-active > polygon, .s-slobodan.is-active > rect, .s-slobodan.is-active > path {
    fill: #3F6805;
}

.A-slobodan.is-hovered > polygon, .A-slobodan.is-hovered > rect, .A-slobodan.is-hovered > path,
.A-slobodan.is-active > polygon, .A-slobodan.is-active > rect, .A-slobodan.is-active > path {
    fill: #6DB3B5;
}

.B-slobodan.is-hovered > polygon, .B-slobodan.is-hovered > rect, .B-slobodan.is-hovered > path,
.B-slobodan.is-active > polygon, .B-slobodan.is-active > rect, .B-slobodan.is-active > path,
.s-0 polygon:hover, .s-0 rect:hover, .s-0 path:hover {
    fill: #7DA36B;
}

.s-1.is-hovered > polygon, .s-1.is-hovered > rect, .s-1.is-hovered > path,
.s-1.is-active > polygon, .s-1.is-active > rect, .s-1.is-active > path,
.s-prodano.is-hovered > polygon, .s-prodano.is-hovered > rect, .s-prodano.is-hovered > path,
.s-prodano.is-active > polygon, .s-prodano.is-active > rect, .s-prodano.is-active > path {
    fill: #DE7550;
}

.s-2.is-hovered > polygon, .s-2.is-hovered > rect, .s-2.is-hovered > path,
.s-2.is-active > polygon, .s-2.is-active > rect, .s-2.is-active > path,
.s-rezervisano.is-hovered > polygon, .s-rezervisano.is-hovered > rect, .s-rezervisano.is-hovered > path,
.s-rezervisano.is-active > polygon, .s-rezervisano.is-active > rect, .s-rezervisano.is-active > path {
    fill: #DDAB1F;
}

.s-0 polygon:hover, .s-0 rect:hover, .s-0 path:hover {
    opacity: 0.6;
    isolation: isolate;
}

.custom-tooltip {
    position: absolute;
    background-image: url(./img/sprattooltip.svg);
    color: #fff;
    width: 6.67vw;
    height: 2.19vw;
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1000;
    max-width: 250px;
    transition: opacity 0.2s ease;
    font-family: var(--inter);
    font-weight: 400;
    font-size: var(--d16);
    line-height: 140%;
    letter-spacing: 0%;
    text-align: center;
    color: #1F363C;
    display: flex;
    place-content: center;
    align-items: anchor-center;
}





.app {

    width: auto;
    max-width: 100%;
    
   
    
   
    overflow-x: hidden;
    overflow-y: hidden;
}

.app__home svg polygon,
.app__home svg path{
    opacity: 1;
}
.app svg {
 
    width: auto;
    transform: scale(1);
    /* transform: scale(1) !important; */
    border:1px solid #BCBFC3;
 
}


.landscape-notice {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
       background: linear-gradient(180deg, #111214B5 0%, #17191CB5 100%);


    color: red;
    text-align: center;
    font-size: 24px;
    z-index: 9999;
}

.landscape-notice img{
     width: 86.67vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 .moveleft{
    position: fixed;
    top: 50vh;
    left: 1vw;
}
.moveright{
    position: fixed;
    top: 50vh;
    right: 1vw;
}





.app__home svg {
    transform:scale(1);
}

.app.app__home svg {
    /* transform: scale(1); */
    transform: scale(1.2) translateX(130px);
}













@media (orientation: portrait){
    .landscape-notice{
        display:block;
    }
}
@media (orientation: landscape) and (max-width:800px) {

    
    
    
     header .header-container, .scroll .header-container  {
    display: flex;
    height: 10.00vw;
    justify-content: space-between;
    align-items: center;
    width: 94.00vw;
    margin: auto;
    flex-direction: row-reverse;
}

header .header-container .action, .scroll .header-container .action{
  display: none;
}

header .header-container .logo img, .scroll .header-container .logo img{
  margin: 0;
 width: 15.50vw;
}

header .header-container .menu , .scroll .header-container .menu{
  width: 13.38vw;
  height: 4.00vw;
  gap: 2.00vw;
}
header .header-container .menu p ,.scroll .header-container .menu p{
  font-size: 2.00vw;
}
header .header-container .menu img, .scroll .header-container .menu img{
  width: 1.75vw;
}





.sidebar-menu {
    width: 42vw;
    height: 100vh;
    position: fixed;
    z-index: 14;
    left: 0;
    top: 0;
    background: var(--clight);
    transition: transform 0.4s ease;
    transform: translate(240%);
    overflow-y: scroll;
   
}

.sidebar-menu.active{
  transform: translate(139%);
  

}

.sidebar-logo {
    width:15.50vw;
    margin-top: 3.00vw;
    margin-left: 3.00vw;
}

.sidebar-close {
    position: absolute;
    right: 3vw;
    top: 3vw;
    width: 1.63vw;
    cursor: pointer;
}
    .main-menu li a, .toggle{
      font-size:2.00vw;
      line-height: 3.75vw;

    }

    .glavni-nav {
    margin-top: 8.00vw;
    margin-left: 3vw;
}

.main-menu li {
    cursor: pointer;
    margin-bottom:2.00vw;
}

.hassubsubmenu .toggle {
    margin-bottom:2.00vw;
}

.main-menu li ul .hassubsubmenu {
    margin-bottom: 0;
    margin-top:2.00vw;
}

.kontakt .container{
  width: 94.00vw;
  padding-bottom: 8.00vw;
  padding-top: 8vw;
  flex-direction: column;
}
.kontakt .container .left{
  width: 94.00vw;
}



.kontakt .container .left h1{
  font-size: 1.75vw;
  text-align: center;
}

.kontakt .container .left h2{
  font-size: 4.00vw;
  line-height: 4.25vw;
  text-align: center;
      margin-top:2.00vw;
    margin-bottom: 5.50vw;
    width: 94.00vw;
}

.kontakt .container form .form-group{
  width: 32.25vw;
  height: auto;
  margin-bottom: 4.25vw;
}

.form-group label{
  font-size:2.00vw;
  line-height: 3.75vw;

}
.form-group input, .form-group textarea{
  width: 32.25vw;
  font-size:1.75vw ;
  line-height: 1.2vw;
}


.form-group input::placeholder,.form-group textarea::placeholder{
  font-size: 1.75vw;



color: #4B4948A6;

}

.kontakt .container form .form-group.butt{
  width: 32.25vw;
  height: 5.75vw;
  font-size:1.75vw;
  gap: 2.22vw;
  margin-bottom: 0;
          margin-top: 1vw;
}
.kontakt .container form{
  width:71.50vw;
  margin: auto;
}

.butt img{
  width: 1vw;
}





footer {
    width: 94.00vw;
    margin: auto;
    display: flex;
    padding-top: 7.00vw;
    margin-bottom: 8.00vw;
    flex-direction: row;
}


.footer-logo{
  width: 15.50vw;
}
.footer-links.central{
  margin: 0;
}


.footer-links h1{
  font-size:2.50vw ;
  line-height: 3.00vw;
  margin-top: 0vw;
  margin-bottom: 3.00vw;

}
.footer-links span img{
  width: 1.75vw;
  margin-right: 1.50vw;

}
.footer-links a{
  font-size:2.00vw;
  line-height: 3.75vw;
  
}
.footer-links span{
  margin-bottom: 1.22vw;
}
.maploc img{
    margin-top: -2vw;
}

.maploc a{
    width: 20vw;
}
   .footer-links.central{
    margin-left: 8vw;
    margin-right: 8vw;
   } 
    
    
.hero-all{
    width: 100vw;
    height: 43.63vw;
    background-image: url('./img/heroallmapa.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    top: 0;
    left: 0;
    z-index: 9;
}

.hero-all .bred{
    right: 3vw;
    top:21.75vw ;
    position: absolute;
}
.hero-all .bred a{
    color: #FFFFFFB2;
    font-family: var(--manrope);
font-weight: 500;

font-size:1.625vw;

line-height: 100%;
text-decoration: none;
margin: 0;






}

.hero-all h1{
    font-family:var(--manrope);
font-weight: 600;

font-size:5vw;

line-height: 100%;
letter-spacing: var(--sestica);
color: white;
position: absolute;
    top: 26vw;
     right: 3vw;
     margin: 0;



}

.hero-all h1 strong{
    font-style: italic;
    font-family: var(--playfair);
    font-weight: 400;
    
}
    .footer-links a.mb{
        margin-bottom: 1vw;
    }






.mapa-main{
    width: 94vw;
    margin: auto;
    margin-top: 8vw;
    margin-bottom: 8vw;
    
}
.mapa-info{
    text-align: center;
    margin-bottom:0;
}




.mapa-info h1{
    font-family: var(--manrope);
font-weight: 600;

font-size:4vw;

line-height: 4.25vw;
letter-spacing: var(--sestica);
text-align: center;
color: var(--primary);
margin: 0;
margin-bottom: 1vw;


    
}

.mapa-info a{
    font-family: var(--manrope);
font-weight: 400;

font-size: 1.75vw;

line-height: 3vw;
letter-spacing: var(--dvojka);
text-align: center;
color: #4B4948;


}


.mapa-tab{
    display: flex;
    justify-content: space-between;
    width: 83vw;
    margin: auto;
    margin-bottom: 4.25vw;
    margin-top: 4.25vw;
}

.mapa-tab a{

    font-family: var(--manrope);
font-weight: 500;

font-size: 2vw;

line-height: 3vw;
letter-spacing: var(--dvojka);
text-align: center;
color: var(--primary);
width: 23.5vw;

padding-bottom: 1.375vw;
cursor: pointer;



}

.mapa-tab a.active{

border-bottom: 3px solid #7B6452;




}


/* Sakrij sve frejmove po defaultu */
.garaza-frame, .parking-frame {
    display: none;
}


.parking-selector, .garaze-selector{
    display: none;
}








.legend{
    display: flex;
    justify-content: space-between;
    margin-top: 3vw;
}

.legend .left{
    display: flex;
    gap:3vw;
    align-items: center;
}

.legend .left p{
    
    color: white;
    font-family: var(--manrope);
font-weight: 600;

font-size: 1.75vw;

line-height: 100%;

height: 4.375vw;
align-content: center;
padding-left: 2vw;
padding-right: 2vw;
margin: 0;
cursor:pointer;


}

.legend .right {
    display: flex;
    justify-content: center;
    gap: 1vw;
    align-items: center;
    border: 1px solid #4B494833;
    height: 4.375vw;
    width: 20.25vw;
    cursor: pointer;
}

.legend .right p {
    font-family: var(--manrope);
    font-weight: 500;
    font-size:1.75vw;
    line-height: 100%;
    color: var(--primary);
}

.legend .right a {
    width: 2vw;
    color: var(--primary);
}





.odabir {
    display: flex;
    justify-content: space-between;
    width: 45.5vw;
    margin: auto;
    border-top: 1px solid #BCBFC3;
    padding-top: 2vw;
    margin-top: 2vw;
    height: 5.5vw;
}


.odabir img{
    width: 4.5vw;
}

.odabir p{
    font-family: var(--manrope);
font-weight: 400;

font-size: 1.75vw;

line-height: 3vw;
letter-spacing: var(--dvojka);
color: #4B4948;
margin: 0;
align-content: center;
}
.odabir div{
    border-left: 1px solid #BCBFC3;

}


.povratak{
    font-family:var(--manrope);
font-weight: 400;

font-size: 1.625vw;

line-height: 3vw;
letter-spacing: var(--dvojka);

text-decoration: underline;
color: #4B4948;
margin: 0;
margin-top:1.5vw;
display: block;



}







}