#landkarte-or {
    position: relative;
    max-width: 1100px;
    height: auto;
    width: 600px;
    height: auto;
    margin: 0 auto;
}


#chartdiv {
    width: 100%;
    height: 500px;
}

path {
    fill: #d3dff4;
    stroke: white;
    stroke-width: 1;
    cursor: default;
}

path.active {
}

.mediumgrey {
    fill: #cdd6e7;
}

.active {
    fill: #3476ad;
    cursor: pointer;
}

.medium {
	fill: #5584b5;
}

.dark {
    fill: #0068a3;
}

.light {
	fill: #cdd6e7;
}

.lightest {
	fill: #d3dff4;
}

.active:hover {
    fill: #e14e1a;
    cursor: pointer;
}

.mappins-kepol {
    pointer-events: none;
}


#landkarte a {
	z-index: 10;
}

#landkarte-or .map-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1;
} 

#landkarte-or .map-close a {
  display: block;
  width: 20px;
  text-indent:1px;
  overflow: hidden;
}  

#landkarte-or .map-close a:before {
font-family: 'icomoon';
content: "\e914";
font-size: 20px;
color: #e14e1a;
}

#landkarte-or .text-landkarte {
    transition: opacity 0.5s, visibility 1s;
    position: absolute;
    width: 420px;
    padding: 25px;
    background-color: white;
    opacity: 0;
    visibility: hidden;
    font-size: 16px;
    z-index: 2;
}

#landkarte-or .text-landkarte:after {
    content: "\25C0";
    position: absolute;
    top: 158px;
    font-size: 20px;
    left: -15px;
    color: white;

}

#landkarte-or .text-landkarte h3 {
    font-size: 1.25rem !important;
    line-height: 1.35;
    margin-bottom: 0 !important;
    color: #e14e1a !important;
}

#landkarte-or .text-landkarte h4 {
    font-size: 16px;
    font-family: "Klavika-Basic-Regular", "sans-serif";
    line-height: 1.22222;
    font-weight: 600;
    margin-bottom: 5px;
    margin-top: 20px;
    color: #005a8d;
}

#landkarte-or .text-landkarte p {
    font-size: 16px !important;
}

#landkarte-or .text-landkarte li > a {
    position: relative;
    display: block;
    // font-family: "Klavika-Basic-Regular", "sans-serif";
    text-decoration: none;
    color: black;
    padding-left: 20px;
}

#landkarte-or .text-landkarte li > a:before {
position: absolute;
top: 2px;
left: 0;
z-index: 1;
font-family: 'icomoon';
content: "\e904";
font-size: 12px;
line-height: 1.52778;
color: #e14e1a;
}

#landkarte-or .text-landkarte li {
  font-size: 16px !important;
  color: black;
  padding-left: 0;
  margin-bottom: 5px;
}

#landkarte-or .text-landkarte li:before {
  content: '';
}

#landkarte-or .visible {
    transition: opacity 0.5s;
    opacity: 1;
    visibility: visible;
}

#landkarte-or .visibleTab {
	transition: opacity 0.5s, top 0.5s, left 0.5s;
    opacity: 1;
    visibility: visible;
    top: 0 !important;
    left: 0 !important;
}

#landkarte-or svg a:focus path.active, #landkarte-or svg a path.focus {
	 fill: #e14e1a;
}

@media (min-width: 720px) {
    .mobile-landkarte {
        display: none;
    }
}

@media (max-width: 720px) {
    .desktop-landkarte {
        display: none;
    }
}

.show-tablet { display: none; }
@media (max-width: 980px) {
  .show-tablet { display: block; }
}

@media (max-width: 980px) {
    #landkarte-or .text-landkarte {
        display: none;
    }
}

/********* IE **********/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    #landkarte-or .text-landkarte:after {
    	left: 0;
    }
}