*  { margin: 0; padding: 0; }

@font-face {
font-family: oregano;
src: url("text-me-one.regular.ttf") format("truetype");
}

@font-face {
font-family: ostrich sans;
src: url("http://www.breakout.cologne/ostrich.otf") format("opentype");
}

body  { background:#000000; background-image:url(images/background-body.jpg); background-attachment:fixed;  font-size: 20px; font-family:Oswald; font-weight:300; letter-spacing:0.02em;  }

strong { font-weight:400; }
h1 { font-size:18px; display:block; margin-top:30px; margin-bottom:5px; font-family:Oswald; font-weight:300; }

.tab-content h1 { color:#fff; font-size:28px; display:block; margin-top:30px; margin-bottom:5px; font-family:Ostrich sans; font-weight:300; }


.tab-content h2 { color:#e3e41e; font-size:24px; display:block; margin-top:45px; margin-bottom:5px; font-family:Ostrich sans; font-weight:300; }


h2 { font-size:18px; display:block; margin-top:30px; margin-bottom:5px; font-family:Oswald; font-weight:300; }
a { color:#e7ef00; text-decoration:underline; }
a:hover { text-decoration:none; }

#content-wrapper { width:980px; margin:0 auto; border: 15px solid #ddd; }
#oberer-teil-der-website { background-image:url(images/background-gitterstaebe.jpg); background-position:top center;  background-repeat:no-repeat; background-attachment:fixed; } 


#kontakt-impressum-box { font-family:ostrich sans; margin-top:20px; float:right; width:214px; height:58px; overflow:hidden; background-image:url(images/background-kontakt-impressum.png); background-repeat:no-repeat; text-align:center; padding-top:18px; }
#kontakt-impressum-box a { font-size:18px; text-decoration:none; padding:3px; }
#kontakt-impressum-box a:hover { text-decoration:underline; }

#neunzigmin img { float:right; margin-top:-60px; width:249px; }

#hauptnavigation a.link_active { text-decoration:underline; }
#hauptnavigation { letter-spacing:0.05em; font-family:ostrich sans; margin-top:20px; margin-left:75px; font-size:24px; background-image:url(images/background-navigation.png); background-repeat:no-repeat; width:720px; height:54px; padding-top:14px; text-align:center; padding-left:10px; }
#hauptnavigation a { text-decoration:none; margin-left:20px; float:left; margin-top:3px; }
#hauptnavigation a:hover { text-decoration:underline; }

#linker-bereich { float:left; width:517px; }
#rechter-bereich { float:right; width:315px; margin-right:110px; margin-top:-15px; }


.textbox-links-ganze-breite { width:850px; margin-left:67px; }
.textbox-links-oben-ganze-breite { margin-left:0px; background-image:url(images/background-text-links-oben-ganze-breite.png); height:24px; box-shadow: 3px 13px 14px #333; }
.textarea { background-color:#000000; padding:25px; color:#ffffff; box-shadow: 3px 10px 20px #000000; line-height:133%; font-size:16px; font-family:Oswald; font-weight:300; }
.textarea a { color:#fff; text-decoration:underline; }
.textarea a:hover { text-decoration:none; }
.textbox-links-unten-ganze-breite { background-image:url(images/background-text-links-unten-ganze-breite.png); height:24px; }


#clear { clear:both; }
#zwischenteil { width:100%; height:410px; background-color:#fff; color:#000; }
#zwischenteil-linker-bereich { margin-top:20px; float:left; margin-left:40px; width:517px; background-color:#fff; }
#zwischenteil-linker-bereich img { margin-right:5px; }

#zwischenteil-rechter-bereich { margin-top:-50px; float:right; text-align:right; width:600px; margin-right:40px; }
#zwischenteil-rechter-bereich a { color:#000; font-size:16px; font-weight:400; text-transform:uppercase; text-decoration:none; }
#zwischenteil-rechter-bereich a:hover { color:#2098d1; }

.textbox-rechts { width:315px; margin-left:67px; }

.textbox-links { width:517px; margin-left:67px; }
.textbox-links-oben { margin-left:0px; background-image:url(images/background-text-links-oben.png); height:24px; box-shadow: 3px 13px 14px #333; }
.textarea { background-color:#000000; padding:25px; color:#ffffff; box-shadow: 3px 10px 20px #000000; line-height:140%; font-size:16px; }
.textarea a { color:#fff; }
.textbox-links-unten { background-image:url(images/background-text-links-unten.png); height:24px; }
.textarea-buchen { color:#e7ef00; font-family:ostrich sans; background-color:#000000; text-align:center; font-size:50px; padding-top:7px; box-shadow: 3px 10px 20px #000000; }
#linker-bereich .textarea-buchen a { color:#e7ef00; }
#linke-bereich a { color:#e7ef00; }  
.textarea-buchen a { text-decoration:none; }
.textarea-buchen a:hover { text-decoration:underline; }
.logo { background-image:url(images/logo-breakout-cologne.png); width:504px; height:163px; }


/* Grow Rotate */
.logo {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.logo:hover, .logo:focus, .logo:active {
  -webkit-transform: scale(1.05) rotate(2deg);
  transform: scale(1.05) rotate(2deg);
}

/* Grow */
.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.067);
  transform: scale(1.067);
}

/* Radial Out */
.zelle {
font-family:Oswald;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 8.6s;
  transition-duration: 8.6s;
}
.zelle:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #2098d1;
  border-radius: 100%;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 16.6s;
  transition-duration: 16.6s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.zelle:hover, .zelle:focus, .zelle:active {
  color: white;
}
.zelle:hover:before, .zelle:focus:before, .zelle:active:before {
  -webkit-transform: scale(2);
  transform: scale(2);
}


/* Bob */
@-webkit-keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }

  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }

  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

@keyframes hvr-bob {
  0% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }

  50% {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }

  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

@-webkit-keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

@keyframes hvr-bob-float {
  100% {
    -webkit-transform: translateY(-8px);
    transform: translateY(-8px);
  }
}

.hvr-bob {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.hvr-bob:hover, .hvr-bob:focus, .hvr-bob:active {
  -webkit-animation-name: hvr-bob-float, hvr-bob;
  animation-name: hvr-bob-float, hvr-bob;
  -webkit-animation-duration: .3s, 1.5s;
  animation-duration: .3s, 1.5s;
  -webkit-animation-delay: 0s, .3s;
  animation-delay: 0s, .3s;
  -webkit-animation-timing-function: ease-out, ease-in-out;
  animation-timing-function: ease-out, ease-in-out;
  -webkit-animation-iteration-count: 1, infinite;
  animation-iteration-count: 1, infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-direction: normal, alternate;
  animation-direction: normal, alternate;
}

/* Buzz */
@-webkit-keyframes hvr-buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}

@keyframes hvr-buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}

.hvr-buzz {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.hvr-buzz:hover, .hvr-buzz:focus, .hvr-buzz:active {
  -webkit-animation-name: hvr-buzz;
  animation-name: hvr-buzz;
  -webkit-animation-duration: 0.1s;
  animation-duration: 0.1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}


/* Pulse */
@-webkit-keyframes hvr-pulse {
  25% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

@keyframes hvr-pulse {
  25% {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }

  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

.hvr-pulse {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.hvr-pulse:hover, .hvr-pulse:focus, .hvr-pulse:active {
  -webkit-animation-name: hvr-pulse;
  animation-name: hvr-pulse;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}


/* Skew Backward */
.hvr-skew-backward {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
}
.hvr-skew-backward:hover, .hvr-skew-backward:focus, .hvr-skew-backward:active {
  -webkit-transform: skew(2deg);
  transform: skew(2deg);
}


/* Wobble Vertical */
@-webkit-keyframes hvr-wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }

  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }

  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }

  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }

  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes hvr-wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }

  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }

  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }

  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }

  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.hvr-wobble-vertical {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
}
.hvr-wobble-vertical:hover, .hvr-wobble-vertical:focus, .hvr-wobble-vertical:active {
  -webkit-animation-name: hvr-wobble-vertical;
  animation-name: hvr-wobble-vertical;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Overline Reveal */
.hvr-overline-reveal {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}
.hvr-overline-reveal:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  background: #2098d1;
  height: 4px;
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-overline-reveal:hover:before, .hvr-overline-reveal:focus:before, .hvr-overline-reveal:active:before {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}



.zelle { background:#efefef; float:left; width:183px; height:210px; padding:30px; border-right: 1px solid #ccc; text-align:center;  }
.zelle img { margin-bottom:20px; margin-left:auto; margin-right:auto; display:block; }
.zelle strong { margin-top:20px; font-family:droid; font-weight:400; font-style:italic; font-size:17px; display:block; margin-bottom:30px; }
.zelle div.slogan { margin-top:20px; font-family:droid; font-weight:400; font-style:italic; font-size:17px; display:block; margin-bottom:30px; }
#zwischenteil-spalten { background-color:#fff; margin-bottom:60px; margin-top:-50px; border-top:20px solid black; height:210px; }



.tabs {
  width: 828px;
  float: none;
margin-left:10px;
  list-style: none;
  position: relative;
  text-align: left;
}
.tabs li {
  float: left;
  display: block;
}
.tabs input[type="radio"] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
.tabs label {
  display: block;
  padding-top: 22px;
padding-bottom:9px;
 padding-left:30px;
padding-right:30px;
color:#6e7b01;
background:#000;
  font-size: 24px;
  font-weight: normal;  
font-family:ostrich sans;
  cursor: pointer;
  position: relative;
  top: 0px;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.tabs label:hover {
background: #000;
text-decoration:underline;
color:#dff900;

}
.tabs .tab-content {
  
  display: none;
  overflow: hidden;
  width: 100%;
  font-size: 17px;
  line-height: 25px;
  position: absolute;
  left: 1px;
  background: #000;
}
.tabs [id^="tab"]:checked + label {
  top: 0;
  padding-top: 22px;
background: #000;
color:#dff900;
text-decoration:underline;
border-top:5px dashed #dff900;


}
.tabs [id^="tab"]:checked ~ [id^="tab-content"] {
  display: block;
}