/* author: michal amrich - majormisho@gmail.com */
:root {
  --color1: #f89400;
  --color1: #f7931d; /* nasato z loga */
  --color1: #e67e7d; /* z Barvy.txt */  
  --hcolor2:#58585a;  /*nadpis produktove listy z PSD */
  --hovercolor:#ee2523  /*nadpis produktove listy z PSD */
}
.--color1 {color:var(--color1)}

body {font-family: 'Open Sans', sans-serif; font-size:1vw;     line-height: 1.7em;}
h1, h2.h1 { line-height: 1.3em; color:#58585a; font-size:2.3em;}
h2 {font-size:2.3em; line-height: 1.1em; margin-bottom:1em; font-weight: 600; color:var(--color1); letter-spacing:0.02em; }
h4 {font-weight: bold; letter-spacing:.03em; margin-bottom:1.1em}
p {margin:0; font-size: 1.1em; }
.container-fluid {width:100%; max-width:100%}
 /* reference */
.ref-list {padding-top:2em;     position: relative; margin: auto;}

#ref-nav {overflow: auto; width:100%; position: relative; z-index:0}
#ref-nav li {background:white; list-style-type:none; display:block; float:left; cursor:pointer; width:19%; margin:.3em .5%; text-align: center; border:0px #d9d9d9 solid; border-radius:.5em; font-weight:600}
#ref-nav li:hover {background:var(--color1); border-color:var(--color1); color:white} 
#ref-nav .current {background:var(--color1); border-color:var(--color1); color:white} 
.ref-card {width:48%; margin:1em 1% 0; float:left; padding:20px 20px 10px 10px;     background: #ffffffd1;  
-webkit-box-shadow: 0px 0px 27px 5px rgba(0,0,0,0.13);
-moz-box-shadow: 0px 0px 27px 5px rgba(0,0,0,0.13);
box-shadow: 0px 0px 27px 5px rgba(0,0,0,0.13);     }

.ref-card a {    
    background-color: #C81D00;
    color: white;
    padding: 1em 2.5em;
    text-decoration: none;
    transition: 0.3s;
}

.ref-card a:hover {    
    background-color: #d65640;
}

.cont-cards {    position: relative;}
.ref-card .left {width:20%; float:left; height:100%}
.ref-card .right {width:80%; float:left}
.ref-card .left img {width:40%; padding-left: 10px;}
.ref-card h2 {font-size:16px; color:black; margin-top:0; margin-bottom: 0.3em;}
.usetreno { font-size: 1.2em; font-weight: 300;}
.citace {font-style:italic; line-height: 1.5em;}
.citace:before {content:'„'; font-size:2em; color:var(--color1); }
.citace:after{content:'“'; font-size:1em; color:var(--color1); margin-left: 0em;  position: absolute; transform: scale(2); margin-top:.2em}
#loading-animation {width:3em; margin-top:3em} #loading-animation img {width:100%}


/*mapa*/
#svgmapy {
    background: url('img/bg-map.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.map-cont {overflow:visible; padding-top:1em}
#mapa {margin:auto; margin-bottom:5em;  position:relative; overflow:visible; width:90%; transform-origin:50% 50%; transition:transform 1s ease}
.kraj { fill: #a2616f;}
.kraj:hover { fill: var(--hovercolor)!important; transition: all 0.3s; cursor:url(img/lupa.png), auto; }
.lokace {position:absolute; overflow: visible; top:auto; width:2.8%; z-index:1; pointer-events: auto; transform: scale(1) translate(-56%, -68%); transition:transform 1s ease}
.map-cont .ref-card {display:none; width:350px; background:white; z-index:200; position: fixed; font-size: 14px; line-height: 1.4em;}
#pins-cont {width: 100%; height: 100%; position:absolute; left:0; top:0; pointer-events: none; transform-origin:50% 50%;}

.pin {position:static; width:100%; cursor: default; z-index:1; pointer-events: auto;}
.lokace-zoomed {transform: scale(0.4) translate(-147%, -245%);}
.zoomed2x {transform: scale(0.2) translate(-322%, -521%);}

.pin.twerk {animation:twerk .4s cubic-bezier(0.000, 0.945, 0.645, 1.005) alternate both; }
@keyframes twerk {
0%{transform:scale(1)}
0%{transform:scale(0.8)}
100%{transform:scale(1)}
}