* {
    margin: 0;
    padding: 0;
    border-spacing: 0px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    
html {
    height: 100%;
    -webkit-text-size-adjust: 100%;
}
            
body {
    min-height: 100%;
    height: auto;
    background: #770500;
    background: radial-gradient(circle, #c4c43b, #80a138); 
    font-family: Arial, sans-serif;
    font-size: 19px;
    color: #0b66ab;
    line-height: auto;
    position: relative;
    margin: 0px 0px 0px 0px;
}

img {
    font-size: 0;
}

#stage {
    width: 85vw;
    height: 900px;
    border: 1px solid #0b66ab; 
    box-shadow: 0px 0px 6px rgba(0,0,0,0.5);
    max-width: 1440px;
    max-height: 53.125vw;
    margin: auto;
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    overflow: hidden;
}

@media (min-aspect-ratio: 16/10) {
    #stage {
        width: 1440px;
        height: 85vh;
        max-height: 900px;
        max-width: 136vh;
    }
}

#stage > div {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(background.png);
    background-size: cover;
}

.button {
    display: block;
    position: absolute;
    width: 22.35%;
    left: 0;
    top: 0;
    z-index: 10;
}

.button .inner_button {
    display: block;
    position: absolute;
    width: 100%;
    padding-bottom: 100%;
    border-radius: 50%;
    box-sizing: border-box;
    background: #0b66ab;
}

.button.outdated .inner_button {
    background: #5c6f75;
}


.button#tagung {
    width: 15%;
    top: 66%;
    left: 45.5%;
}


#wh_fgc_ew {
    top: 21%;
    left: 3.5%;
}

#fluss_aue_ew {
    top: 41%;
    left: 24.5%;
}

#rn_bv {
    top: 30%;
    left: 74.5%;
}

.deactivated .image_button {
    opacity: 0.5;
}

.deactivated:hover .image_button {
    opacity: 1;
}

.image_holder {
    position: absolute;
    left: 1.5%;
    right: 1.5%;
    top: 1.5%;
    bottom: 1.5%;
    border-radius: 50%;
    display: block;
    background: #fff;
}

.image_holder > span {
    position: absolute;
    left: 2%;
    right: 2%;
    top: 2%;
    bottom: 2%;
    border-radius: 50%;
    overflow: hidden;
    display: block;
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); /* Fix for iPad transform bug */
}

.image_button {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 20;
    transition: transform 0.3s ease-in, opacity 0.3s ease-in;
}

.button:hover .image_button {
    transform: scale(1.2);
}

.image_button_text {
    display: block;
    position: absolute;
    width: 100%;
    height: auto;
    z-index: 25;
    bottom: 10%;
    transition: transform 0.3s ease-in;
}

.button:hover .image_button_text {
    transform: translateY(250%);
}


.hotspot {
    width: 15%;
    height: 15%;
    position: absolute;
    display: block;
}




#wh_fgc_ew .hotspot {
    left: 44%;
    top: -50%;
}

#fluss_aue_ew .hotspot {
    left: -25%;
    top: -106.5%;
}

#rn_bv .hotspot {
    left: 10.5%;
    bottom: -57%;
}



.outer_pulse {
    position: relative;
    display: block;
    width: 300%;
    height: 300%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin-left: -100%;
    margin-top: -100%;
    border-radius: 50%;
    background-color: rgba(11,102,171,1);
    opacity: 0;
    pointer-events: none;
}

.button:hover .outer_pulse {
    -webkit-animation: pulse-ring 1.75s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
            animation: pulse-ring 1.75s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
    opacity: 1;
}

.inner_pulse {
    position: absolute;
    left: 0;
    top: 0;
    width: 300%;
    height: 300%;
    margin-left: -100%;
    margin-top: -100%;
    display: block;
    border-radius: 50%;
    background-color: rgba(11,102,171,0.7);
    pointer-events: none;
    transform: scale(0.333);
  }

.button:hover .inner_pulse {
    -webkit-animation: pulse-dot 1.75s cubic-bezier(0.455, 0.03, 0.515, 0.955) -.4s infinite;
            animation: pulse-dot 1.75s cubic-bezier(0.455, 0.03, 0.515, 0.955) -.4s infinite;
}


@-webkit-keyframes pulse-ring {
  0% {
    -webkit-transform: scale(.33);
            transform: scale(.33);
  }
  80%, 100% {
    opacity: 0;
  }
}


@keyframes pulse-ring {
  0% {
    -webkit-transform: scale(.33);
            transform: scale(.33);
  }
  80%, 100% {
    opacity: 0;
  }
}

@-webkit-keyframes pulse-dot {
  0% {
    -webkit-transform: scale(.266);
            transform: scale(.266);
  }
  50% {
    -webkit-transform: scale(0.333);
            transform: scale(0.333);
  }
  100% {
    -webkit-transform: scale(.266);
            transform: scale(.266);
  }
}

@keyframes pulse-dot {
  0% {
    -webkit-transform: scale(.266);
            transform: scale(.266);
  }
  50% {
    -webkit-transform: scale(0.333);
            transform: scale(0.333);
  }
  100% {
    -webkit-transform: scale(.266);
            transform: scale(.266);
  }
}


#life {
    position: absolute;
    left: 3.6%;
    bottom: 5%;
    width: 6.94%;
    height: auto;
}

#natura2000 {
    position: absolute;
    left: 14%;
    bottom: 5%;
    width: 6.77%;
    height: auto;
}

#nabu {
    position: absolute;
    left: 24.5%;
    bottom: 5%;
    width: 7.32%;
    height: auto;
}

#impressum {
    position: absolute;
    left: 38%;
    bottom: 4.6%;
    width: 5.55%;
    height: auto;
}

#datenschutz {
    position: absolute;
    left: 47%;
    bottom: 5%;
    width: 6.18%;
    height: auto;
}