/* http://james-star.com/answers/de/css3-effekte-transformationen-animationen-uebergaenge/ */

/* - - - - - - - - - - - - - - - - - - - - - -  */

.OpaCity:hover {
   opacity: 1.0;
}
.OpaCity {
   opacity: 0.5;
}

.OpaCity2:hover {
   opacity: 1.0;
}
.OpaCity2 {
   opacity: 0.8;
}

.OpaCity3:hover {
   opacity: 1.0;
}
.OpaCity3 {
   opacity: 0.7;
}


/* - - - - - - - - - - - - - - - - - - - - - -  */
/* - - - - - - - - - - - - - - - - - - - - - -  */


/* - - - - - - - - - - - - - - - - - - - - - -  */

.OpaCity1:hover {
   opacity: 1.0;
}
.OpaCity1 {
   opacity: 0.8;
}

.OpaCity2:hover {
   opacity: 1.0;
}
.OpaCity2 {
   opacity: 0.5;
}

/* - Alle sichtbaren Bilder - - - - - - - - - - - - - - - - - -  */

.container:hover .bild {
   -webkit-transform:scale(1.2);
   transform:scale(1.2);
}
.container {
overflow:hidden;
}
.bild {
   -webkit-transition: all 0.7s ease;
   transition: all 0.7s ease;
}

/* - kontakt + sitemap - Mini Icons - - - - - - - - - - - - - -  */

.Picture1:hover {
   -webkit-transform:scale(1.0);
   transform:scale(1.2);
   opacity: 1.0;
}
.Picture1 {
   -webkit-transition: all 0.4s ease;
   transition: all 0.4s ease;
   opacity: 0.4;
}

/* - Alle Seiten - Icons rechte Seite - - - - - - - - - - - - -  */

.Picture2:hover {
   -webkit-transform:scale(1.4);
   transform:scale(1.4);
   opacity: 1.0;
}
.Picture2 {
   -webkit-transition: all 0.4s ease;
   transition: all 0.4s ease;
   opacity: 0.5;
}

/* - Startseite - Hier - - - - - - - - - - - - - - - - - - - - -  */

.Picture3:hover {
   -webkit-transform:scale(1.5);
   transform:scale(1.5);
}
.Picture3 {
   -webkit-transition: all 0.4s ease;
   transition: all 0.4s ease;
}

/* - Triatlon Icons - - - - - - - - - - - - -  */

.Picture4:hover {
   -webkit-transform:scale(1.4);
   transform:scale(1.4);
   opacity: 1.0;
}
.Picture4 {
   -webkit-transition: all 0.4s ease;
   transition: all 0.4s ease;
   opacity: 0.5;
}


/* - 13: Umformung - PopUp - Gallerie - - - - - - - - - - - - - - - - - - -  */

.bild2:hover {
   -webkit-box-shadow: 0px 0px 15px 15px #fff;
   box-shadow: 0px 0px 15px 15px #fff;
   border-radius:50%;
   opacity: 1;
   -webkit-transform: rotate(360deg);
   transform: rotate(360deg);
}
.bild2 {
   opacity: 0.6;
   border-radius:15%;
   -webkit-transition: all 0.7s ease;
   transition: all 0.7s ease;
}

/* - 11: Umdrehen (Flip) - PopUp - Gallerie - - - - - - - - - - - - - - -  */

.container:hover .bild22{
   -webkit-transform: rotateY(180deg);
   -webkit-transform-style: preserve-3d;
   transform: rotateY(180deg);
   transform-style: preserve-3d;
   border-radius:10%;
   box-shadow:3px 2px 4px 0px rgba(50, 50, 50, 1);
}
.container .bild22, .container:hover .bild22 {
   -webkit-transition: all 0.7s ease;
   transition: all 0.7s ease;
   border-radius:10%;
   box-shadow:3px 2px 4px 0px rgba(50, 50, 50, 1);
}



/* - - - - - - - - - - - - - - - - - - - - - -  */
/* - - - - - - - - - - - - - - - - - - - - - -  */



.bild33:hover {
   -webkit-box-shadow: 0px 0px 15px 15px #fff;
   box-shadow: 0px 0px 15px 15px #fff;
   border-radius:50%;
   opacity: 1;
   -webkit-transform: rotate(360deg);
   transform: rotate(360deg);
}
.bild33 {
   opacity: 0.6;
   -webkit-transition: all 0.7s ease;
   transition: all 0.7s ease;
}



/* - - - - - - - - - - - - - - - - - - - - - -  */
/* - - - - - - - - - - - - - - - - - - - - - -  */



/* A N F A N G - Tooltips rechts aussen */
span.tooltips {
  position: relative;
  display: block;
}
span.tooltips span {
  position: absolute;
  color: #005994;
  background: rgba(255,255,255,0.9);
  font-size: 7pt;
  font-weight: 700;
  font-style: normal;
  text-align: center;
  line-height: 13px;
  padding: 3px 6px 3px 6px;
  visibility: hidden;
  border-radius:4px;
  border: 1px solid #000000;
  box-shadow: 0px 0px 10px #003300;
}
/*  Pfeil rechts  */
span.tooltips span:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -7px;
  width: 0; height: 0;
  border-left: 7px solid #be0030;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  margin-left: 1px;
}
span:hover.tooltips span {
  visibility: visible;
  opacity: 0.8;
  right: 100%;
  top: 50%;
}
/* E N D E - Tooltips rechts aussen */