/* runder Button */

}
#ballMenuContainer {
  position: absolute;
  right: 5%;
  z-index: 100;
}


#ballMenuContainer-fa {
    position: absolute;
    right: 10%;
    top:10vh;
    z-index: 100;
}


@media (min-width:768px) {

#ballMenuContainer-fa {
    position: absolute;
    right: 10%;
    top:20vh;
    z-index: 100;
}



#ballMenuContainer.oc {
    position: absolute;
    left: 10%;
    top:10vh;
    z-index: 100;
}

#ballMenuContainer a:hover, a:focus {
  text-decoration: none;
  opacity: 1;
}


@-webkit-keyframes pulse {
    0% {
      -webkit-transform: scale(1) rotate(0deg);
    }
    50% {
      -webkit-transform: scale(1.1) rotate(-5deg);
    }
    100% {
      -webkit-transform: scale(1) rotate(0deg);
    }
}
@-o-keyframes pulse {
    0% {
      -o-transform: scale(1) rotate(0deg);
    }
    50% {
      -o-transform: scale(1.1) rotate(-5deg);
    }
    100% {
      -o-transform: scale(1) rotate(0deg);
    }
}
@-moz-keyframes pulse {
    0% {
      -moz-transform: scale(1) rotate(0deg);
    }
    50% {
      -moz-transform: scale(1.1) rotate(-5deg);
    }
    100% {
      -moz-transform: scale(1) rotate(0deg);
    }
}
@keyframes pulse {
    0% {
      transform: scale(1) rotate(0deg);
    }
    50% {
      transform: scale(1.1) rotate(-5deg);
    }
    100% {
      transform: scale(1) rotate(0deg);
    }
}

@-webkit-keyframes bump {
  0% {
      top: 0;
  }
  5% {
      top: 3px;
  }
  10% {
      top:0;
  }
  100% {
      top:0;
  }
}
@-o-keyframes bump {
  0% {
      top: 0;
  }
  5% {
      top: 3px;
  }
  10% {
      top:0;
  }
  100% {
      top:0;
  }
}
@-moz-keyframes bump {
  0% {
      top: 0;
  }
  5% {
      top: 3px;
  }
  10% {
      top:0;
  }
  100% {
      top:0;
  }
}
@keyframes bump {
  0% {
      top: 0;
  }
  5% {
      top: 3px;
  }
  10% {
      top:0;
  }
  100% {
      top:0;
  }
}

.menuBall {
    position: relative;
    width: 225px;
    height: 225px;
    margin: 5px;
    display: inline-block;

}

.menuBall-fa {
    position: relative;
    width: 175px;
    height: 175px;
    margin: 5px;
    display: inline-block;

}

.ball {
    position:absolute;
    width:100%;
    height:100%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    border: 0px dashed #fff;
    margin: 10px;
    text-decoration: none;
    background: url('/files/uom/bilder/clef_gresy.svg') no-repeat;
    background-size: contain;
}

.ball:hover {
    -webkit-animation: pulse 1s ease 0s normal;
    -o-animation: pulse 1s ease 0s normal;
    -moz-animation: pulse 1s ease 0s normal;
    animation: pulse 1s ease 0s normal;
}



.blueball {
    -moz-box-shadow: 0 0 0 3px #91697b, 2px 1px 4px 4px rgba(10,10,0,.5);
    -webkit-box-shadow: 0 0 0 3px #91697b, 2px 1px 4px 4px rgba(10,10,0,.5);
    -o-box-shadow: 0 0 0 3px #91697b, 2px 1px 4px 4px rgba(10,10,0,.5);
    box-shadow: 0 0 0 3px #91697b, 2px 1px 6px 4px rgba(10,10,0,.5);

    background-color: #91697b;
}

.goldball {
    -moz-box-shadow: 0 0 0 3px #b0922f, 2px 1px 4px 4px rgba(10,10,0,.5);
    -webkit-box-shadow: 0 0 0 3px #b0922f, 2px 1px 4px 4px rgba(10,10,0,.5);
    -o-box-shadow: 0 0 0 3px #b0922f, 2px 1px 4px 4px rgba(10,10,0,.5);
    box-shadow: 0 0 0 3px #b0922f, 2px 1px 6px 4px rgba(10,10,0,.5);
    background-color: #b0922f;
}

.neutralball {
    -moz-box-shadow: 0 0 0 0px #000, 2px 1px 4px 4px rgba(10,10,0,.5);
    -webkit-box-shadow: 0 0 0 0px #000, 2px 1px 4px 4px rgba(10,10,0,.5);
    -o-box-shadow: 0 0 0 0px #000, 2px 1px 4px 4px rgba(10,10,0,.5);
    box-shadow: 0 0 0 0px #000, 2px 1px 6px 4px rgba(10,10,0,.5);
    background-color: none;
}

.menuText {
    font-size: 16px;
    line-height: 1.2em;
    color: #fff;
    position: relative;
    vertical-align: middle;
    text-align: center;
    top: 10%;
    -webkit-transform: rotate(6deg);

/* Firefox */
-moz-transform: rotate(6deg);

/* IE */
-ms-transform: rotate(6deg);

/* Opera */
-o-transform: rotate(6deg);
}
    position: relative;
    vertical-align: middle;
    text-align: center;
    top: 10%;
    -webkit-transform: rotate(6deg);

/* Firefox */
-moz-transform: rotate(6deg);

/* IE */
-ms-transform: rotate(6deg);

/* Opera */
-o-transform: rotate(6deg);
}    color: #000;
    position: relative;
    vertical-align: middle;
    text-align: center;
    top: 10%;
    -webkit-transform: rotate(6deg);

/* Firefox */
-moz-transform: rotate(6deg);

/* IE */
-ms-transform: rotate(6deg);

/* Opera */
-o-transform: rotate(6deg);
}



#menuBall1 {
  -webkit-animation: bump 6s linear 0s infinite normal;
}
#menuBall2 {
  -webkit-animation: bump 6s linear .5s infinite normal;
}
#menuBall3 {
  -webkit-animation: bump 6s linear 1s infinite normal;
}
#menuBall4 {
  -webkit-animation: bump 6s linear 1.5s infinite normal;
}

#menuBall1 {
  -moz-animation: bump 6s linear 0s infinite normal;
}
#menuBall2 {
  -moz-animation: bump 6s linear .5s infinite normal;
}
#menuBall3 {
  -moz-animation: bump 6s linear 1s infinite normal;
}
#menuBall4 {
  -moz-animation: bump 6s linear 1.5s infinite normal;
}

#menuBall1 {
  -o-animation: bump 6s linear 0s infinite normal;
}
#menuBall2 {
  -o-animation: bump 6s linear .5s infinite normal;
}
#menuBall3 {
  -o-animation: bump 6s linear 1s infinite normal;
}
#menuBall4 {
  -o-animation: bump 6s linear 1.5s infinite normal;
}

#menuBall1 {
  animation: bump 6s linear 0s infinite normal;
}
#menuBall2 {
  animation: bump 6s linear .5s infinite normal;
}
#menuBall3 {
  animation: bump 6s linear 1s infinite normal;
}
#menuBall4 {
  animation: bump 6s linear 1.5s infinite normal;
}


div#partyInfo {
    position: absolute;
    bottom: 30%;
    top: 30%;
    left: 20%;
    right: 20%;
    margin: 5px;
    padding: 8px;
    z-index: 2000;
    text-shadow: -1px -1px #65b37a;
    font-family: 'IdolwildRegular' , Verdana, Helvetica, Sans-Serif;
    font-size: 2.5em;
    color: #FFFFFF;
    border-radius: 10px;
    border: 2px dashed #fff;
    background-color: #d90e23;
    -moz-box-shadow: 0 0 0 3px #d90e23, 2px 1px 4px 4px rgba(10,10,0,.5);
    -webkit-box-shadow: 0 0 0 3px #d90e23, 2px 1px 4px 4px rgba(10,10,0,.5);
    -o-box-shadow: 0 0 0 3px #d90e23, 2px 1px 4px 4px rgba(10,10,0,.5);
    box-shadow: 0 0 0 3px #d90e23, 2px 1px 6px 4px rgba(10,10,0,.5);
}

#darkMe {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width: 100%;
    background: rgba(0,0,0,0.65);
    z-index: 1000;
    -webkit-filter: blur(3px);
}

#darkMe.hideMe, #partyInfo.hideMe {
    visibility: hidden;
}

#darkMe.showMe, #partyInfo.showMe{
    visibility:visible;
}

@media (max-width:767px) {

.menuBall {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 5px;
    display: inline-block;
}

#ballMenuContainer {
    position: absolute;
    right: 3%;
    top:16vh;
    z-index: 100;
}

.menuText {
    font-size: 11px;
    line-height: 1.1em;
    color: #000;
    position: relative;
    vertical-align: middle;
    text-align: center;
    top: 10%;
}

.goldball {
    -moz-box-shadow: 0 0 0 3px #b0922f, 2px 1px 4px 4px rgba(10,10,0,.5);
    -webkit-box-shadow: 0 0 0 3px #b0922f, 2px 1px 4px 4px rgba(10,10,0,.5);
    -o-box-shadow: 0 0 0 3px #b0922f, 2px 1px 4px 4px rgba(10,10,0,.5);
    box-shadow: 0 0 0 3px #b0922f, 2px 1px 6px 4px rgba(10,10,0,.5);
    background-color: #b0922f;
}

 h2.button_announce {
 font-size: 18px;
 margin-bottom: 10px;
 color: #fff;

}
html body.bm-home-test header#header div.inside div#article-270.mod_article.first.last.block div#ballMenuContainer div#menuBall1.menuBall a.ball.blueball div.menuText h2.button_announce {
  color: #fff !important;
}

/* Ende Button */
}