/*** pozadi ***/ 

.st0{fill:#61AD86;fill-opacity:0.3;}
.st1{fill:#A6D5F4;}
.st2{fill:#F7F7F7;}
.st4{fill:#858AD2;}
.st5{fill:#312782;}

.st9{fill:#cfe6db;}


.st3{fill:#A8A8A7;}


/*** mista ***/

.st6,.st7,.st8{
  -webkit-transition: .3s all ease-in-out;
  -moz-transition: .3s all ease-in-out;
  -o-transition: .3s all ease-in-out;
  -ms-transition: .3s all ease-in-out;
  transition: .3s all ease-in-out;

}


.st6{fill:#312782;fill-opacity:0;} /*pozadi kolecko */

.st7{fill:#312782;} /**hover: A6D5F4 */

.st8{fill:#858AD2;
} 

.active .st7,
.hover .st7{fill:#A6D5F4 ;}

.active .st6,
.hover .st6{fill-opacity:1;}

.active .st8,
.hover .st8{fill:#312782;} 

.run2 .active2 .st7{fill:#312782;}
.run2 .active2 .st8{fill:var(--gold);} 
.run2 .active2 .st6{fill-opacity:1;fill:var(--gold);}


.mistoplanek{cursor:pointer;}

/*** rozmístění prvků ***/

.planek{
  display: flex;flex-wrap:wrap;
  justify-content: space-between;
}

.map-buttons{
padding-right:var(--gapsmaller);
  width: 25%;
}

.map-planek{
  padding: 0px var(--gapsmallest);  width: 50%;
}

.map-planek svg{
width:100%;  height: auto;
}


.map-labels{
  align-self: center;
padding-left:var(--gapsmaller);
  width: 25%;
}


@media all and (min-width: 720px) and (max-width: 960px) {

.map-buttons{
  width: 30%;
}
 
.map-planek {
  width: 70%;

}

.map-labels{
  padding-left: 0px;
  width: 100%;
  margin-top: var(--gapsmall);
}

.region-content .map-labels ul, .map-labels ul{
  display: flex;
  flex-wrap: wrap;
}

.region-content .map-labels ul li, .map-labels ul li{
  width: 50%;
} 

.map-label a::before {
  height: 40px;
  width: 40px;
}

}



@media all and (max-width: 720px) {


.map-buttons{
padding-right:0px;
  width: 100%;
    margin-bottom: var(--gapsmall);
}

.region-content .map-buttons ul, .map-buttons ul{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}


.map-planek{
  width: 100%;
  padding: 0px ;
}


.map-labels{
padding-left:0;
  width: 100%;    margin-top: var(--gapsmall);
}

.region-content .map-labels ul, .map-labels ul{
  display: flex;
  flex-wrap: wrap;
}

.region-content .map-labels ul li, .map-labels ul li{
  width: 50%;
}

.map-label a::before {
  height: 40px;
  width: 40px;
}

.map-planek{
    height: calc(100vw * 1.088 - 40px);
overflow:hidden;
}

.map-planek svg{
    width: calc(100vw * 1.088 - 40px);
    position: relative;
    left: -15px;
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}

}

/***button***/

.region-content .map-buttons ul,
.map-buttons ul{
list-style:none;margin:0px;padding:0px;
}


.region-content .map-buttons ul li,
.map-buttons ul li{
  margin-bottom: 10px;
  padding-left: 0px;
}


.region-content .map-buttons ul li:before,
.map-buttons ul li:before{
display:none;
}

.map-buttons ul li a{
  color: var(--purple);
  border: 1px solid var(--purple);
  text-decoration: none;
  padding: var(--buttonpadding);
  font-size: var(--button);
  line-height: var(--buttonHeight);
font-weight:var(--buttonWeight);
  display: inline-block;
  line-height: 1em;
}

.map-buttons ul li a.active,
.map-buttons ul li a:focus,
.map-buttons ul li a.hover,
.map-buttons ul li a:hover{
color:var(--white);
background:var(--purple);
}



/*** label ***/

.region-content .map-labels ul,
.map-labels ul{
list-style:none;margin:0px;padding:0px;
}


.region-content .map-labels ul li,
.map-labels ul li{
  margin-bottom: 10px;
  padding-left: 0px;
}


.region-content .map-labels ul li:before,
.map-labels ul li:before{
display:none;
}
 
.map-label a{
text-decoration:none;
  display: flex;
  line-height: 1.2em;
  justify-content: start;
  align-items: center;
font-weight:700;
  color: var(--link);
}

.run2 .map-label a,
.run .map-label a{
opacity:0.5;
}

.map-label.active a,
.map-label.hover a,
.map-label a:focus,
.map-label a:hover,
.run .map-label.active a
.run .map-label.hover a,
.run .map-label a:focus,
.run .map-label a:hover{
opacity:1;
  color: var(--link);
}


.run2 .map-label.active2 a{
opacity:1;
  color: var(--gold);
}


.map-label a:before{
display:block;content:"";height:30px;width:30px;
background-repeat:no-repeat;
background-position:center center;
background-size:100% auto;
  flex-shrink: 0;
margin-right:10px;
}


.map-label1 a:before{background-image:url(../images/zamek.svg);}
.map-label2 a:before{background-image:url(../images/archevita.svg);}
.map-label3 a:before{background-image:url(../images/galerie.svg);}
.map-label4 a:before{background-image:url(../images/kavarna.svg);}
.map-label5 a:before{background-image:url(../images/pokladna.svg);}
.map-label6 a:before{background-image:url(../images/park.svg);}
.map-label7 a:before{background-image:url(../images/vlak.svg);}
.map-label8 a:before{background-image:url(../images/autobus.svg);}
.map-label9 a:before{background-image:url(../images/parkoviste.svg);}
.map-label10 a:before{background-image:url(../images/atelier.svg);}
.map-label11 a:before{background-image:url(../images/mlyn.svg);}



.map-label1 a:hover:before,
.map-label1.hover a:before,
.map-label1.active a:before,
.map-label1 a:focus:before{background-image:url(../images/zamek-a.svg);}

.map-label2 a:hover:before,
.map-label2.hover a:before,
.map-label2.active a:before,
.map-label2 a:focus:before{background-image:url(../images/archevita-a.svg);}

.map-label3 a:hover:before,
.map-label3.hover a:before,
.map-label3.active a:before,
.map-label3 a:focus:before{background-image:url(../images/galerie-a.svg);}

.map-label4 a:hover:before,
.map-label4.hover a:before,
.map-label4.active a:before,
.map-label4 a:focus:before{background-image:url(../images/kavarna-a.svg);}

.map-label5 a:hover:before,
.map-label5.hover a:before,
.map-label5.active a:before,
.map-label5 a:focus:before{background-image:url(../images/pokladna-a.svg);}

.map-label6 a:hover:before,
.map-label6.hover a:before,
.map-label6.active a:before,
.map-label6 a:focus:before{background-image:url(../images/park-a.svg);}

.map-label7 a:hover:before,
.map-label7.hover a:before,
.map-label7.active a:before,
.map-label7 a:focus:before{background-image:url(../images/vlak-a.svg);}

.map-label8 a:hover:before,
.map-label8.hover a:before,
.map-label8.active a:before,
.map-label8 a:focus:before{background-image:url(../images/autobus-a.svg);}

.map-label9 a:hover:before,
.map-label9.hover a:before,
.map-label9.active a:before,
.map-label9 a:focus:before{background-image:url(../images/parkoviste-a.svg);}

.map-label10 a:hover:before,
.map-label10.hover a:before,
.map-label10.active a:before,
.map-label10 a:focus:before{background-image:url(../images/atelier-a.svg);}

.map-label11 a:hover:before,
.map-label11.hover a:before,
.map-label11.active a:before,
.map-label11 a:focus:before{background-image:url(../images/mlyn-a.svg);}


.run2 .map-label1.active2 a:before{background-image:url(../images/zamek-g.svg);}

.run2 .map-label2.active2 a:before{background-image:url(../images/archevita-g.svg);}

.run2 .map-label3.active2 a:before{background-image:url(../images/galerie-g.svg);}

.run2 .map-label4.active2 a:before{background-image:url(../images/kavarna-g.svg);}

.run2 .map-label5.active2 a:before{background-image:url(../images/pokladna-g.svg);}

.run2 .map-label6.active2 a:before{background-image:url(../images/park-g.svg);}

.run2 .map-label7.active2 a:before{background-image:url(../images/vlak-g.svg);}

.run2 .map-label8.active2 a:before{background-image:url(../images/autobus-g.svg);}

.run2 .map-label9.active2 a:before{background-image:url(../images/parkoviste-g.svg);}

.run2 .map-label10.active2 a:before{background-image:url(../images/atelier-g.svg);}

.run2 .map-label11.active2 a:before{background-image:url(../images/mlyn-g.svg);}