@import url('//fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,latin-ext');
body {font-family: "Roboto", "Arial", sans-serif; color:#666;}


.st0{fill:#666;}
.st1{fill:#ccc;cursor:pointer;}
.st1:hover{fill:#ddd;}    

.container{
position: relative;
margin:0 auto;
width:1030px;
height:100%;
min-height:1200px;
background:#fff;
}

.svg-container{
float:right;
width:470px;  
right:0px;
top:0px;
text-align:center;
padding-top:40px;
}

.svg-content {
width:80%;
height:100%;
}    

.region-active{
fill:#009999;
}

.region-active:hover{
fill:#00cccc;
}   

.infobox{
float:left;
width:515px;
text-align:center;
text-align:left;
}

.mapbox{
position:absolute;
width:560px;
height:315px;
}

.fotobox{
position:absolute;
right:0px;
z-index:2;
width:445px;
height:315px;
background-repeat: no-repeat;
background-position: center center;
background-size: 200%;
}

@keyframes animatedBackground {
  from {
    background-size: 120%;
  }
  to {
    background-size: 200%;
  }
}

.animate-area {
  animation: animatedBackground 5s ease-out normal;
}

.numbers{
position:absolute;
bottom:15px;
left:15px;
}

.statColor{
color:#fff;
padding:5px 10px;
text-align:center;
font-weight:bold;
float:left;
border-radius:10px;
margin:2px;
font-size:1.5em;
}

.legendColor{
float:left;
margin:5px;
font-size:.75em;
width:16px;
height:16px;
}

.legend{
position:absolute;
right:-15px;
margin-top:320px;
}

.statColorA{background:#bf3026;}
.statColorB{background:#a31a38;}
.statColorC{background:#78264f;}
.statColorD{background:#450014;}
  
.kredit{
font-size:.75em;
float:left;
width:560px;
top:617px;
}

.grayline{
height:1px;
background:#ccc;
}

.leg{
display:block;
width:90px;
float:left;
font-size:.8em;
}