nav#bptk-bubbles {
    width: 100%;
    display: block;
}

nav#bptk-bubbles div.inner-wrapper{
    position: relative;
    z-index: 10000;
    overflow: hidden;
}


@media (orientation: portrait) {
    nav#bptk-bubbles div.inner-wrapper{
        padding-top: 150.00%;
    }
    
    body.home main#main{
        background-position: 5% 0%;
    }
}

@media (orientation: landscape) {
    nav#bptk-bubbles div.inner-wrapper{
        padding-top: 50%;
    }
    
}

/*@media (min-aspect-ratio: 16/9) and (max-width: 1920px){ 
    nav#bptk-bubbles div.inner-wrapper{
        padding-top: 30%;
    }
    
}*/


nav#bptk-bubbles div.inner-wrapper svg,
nav#bptk-bubbles div.inner-wrapper img {
    width: 100%;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
   
}

nav#bptk-bubbles svg g.bubble{
    visibility: hidden;
}

nav#bptk-bubbles svg g.bubble text {
    font-family: "Roboto Slab";
    font-weight: 300;
    text-anchor: middle;
    font-size: 70px;
    fill: #005b9d;
    stroke: #005b9d;

}

nav#bptk-bubbles svg g.bubble a:hover circle {
    fill-opacity: 1;
    z-index: 100;
}

nav#bptk-bubbles svg g.bubble a:hover {
    text-decoration: none;
    cursor: pointer;
}

nav#bptk-bubbles svg g.bubble  a circle.bg {
    fill: #7cb03c;
}

nav#bptk-bubbles svg g.bubble  a:hover circle.bg {
    fill: #7cb03c;
}

nav#bptk-bubbles svg g.bubble#psycho a circle.bg {
    fill: #005b9d !important;
    opacity: 0.7;
}

nav#bptk-bubbles svg g.bubble#psycho a:hover circle.bg {
    fill: #005b9d;
    opacity: 0.9
}

nav#bptk-bubbles svg g.bubble#psycho text {
    font-size: 95px;
    fill: white;
    stroke: white;
}

nav#bptk-bubbles svg g.bubble#behandlung a circle.bg {
    fill: #005b9d;
}

nav#bptk-bubbles svg g.bubble a circle.bg {
    opacity: 0.2;
}

nav#bptk-bubbles svg g.bubble a:hover circle.bg {
    opacity: 0.4;
}


nav#bptk-bubbles svg g.bubble tspan.arrow {
    opacity: 0;
}

nav#bptk-bubbles svg g.bubble a:hover tspan.arrow,
nav#bptk-bubbles svg g.bubble#psycho tspan.arrow {
    opacity: 1;
}

nav#bptk-bubbles svg g.bubble.active circle,
nav#bptk-bubbles svg g.bubble a:active circle,
nav#bptk-bubbles svg g.bubble a:focus circle
{
    transform: scale(1.1);
    transition: all 1s ease-in-out;
}

nav#bptk-bubbles svg g.bubble a:active circle,
svg g.bubble a:focus circle{
    opacity: 0.4;
}

nav#bptk-bubbles svg g.bubble circle{
    transform: scale(1);
    transition: all 0.3s;
}

body.bptk-bubble-animation main#main {
    position: relative;
}


body.bptk-bubble-animation main#main div#curtain{
    content: ""; 
    background: white;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    opacity: 0;
    z-index: 1; 
}

body.bptk-bubble-animation nav#bptk-bubbles .inner-wrapper.center svg {
    max-height: 100%;
    margin: 0 auto;
}    

body.bptk-bubble-animation nav#bptk-bubbles .inner-wrapper.center  {
    padding-top: 30%
}