body{
margin: 0px;
font-family: myriad-pro, sans-serif;
font-size: 20pt;
line-height: 24pt;
background-color: rgba(0, 151, 209,.2)
}
.wrapper{
    box-sizing: border-box;
    padding: 0px 10% 0px 10%;
    width: 100%;
    margin: 0 auto;
}

.logo{
    height: 160px;
    margin-bottom: 25px;
    padding-left: 40px;
}

p{
    margin: 15px 0px 15px 0px;
}
.center-image{
    margin:0 auto; width:300px;
    text-align: center;
}

video {
  background-color: #0097d0;
  border-radius:12px;
}
/*Buttons*/
.orange-button{ 
    line-height: 30pt;
    background-color: #ef7d00;
    border-radius: 12px;
    width: 100%;
    display:block ;
    font-weight: 600;
    color: white;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    border-bottom :3px solid #cc8213;
    border-right: 3px solid #cc8213 ;
    margin-top: 25px;
    font-size:25pt;
    text-decoration: none;
}
.kreis-button{
    transform: rotate(-5deg);
    background-color: #ef7d00;
    border-radius: 100%;
    width: 100px;
    height: 100px;
    font-weight: 600;
    color: white;
    box-sizing: border-box;
    text-align: center;
    font-size:60pt;
    padding-top: 30px;
    margin-top: -50px;
    margin-bottom: 20px;
    margin-left: -20px;
}
.frage-button{
    background-color: rgba(0, 151, 209, 1);
    border-radius: 12px;
    width: 100%;
    display:block ;
    font-weight: 600;
    color: white;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    border-bottom :3px solid#0b92c4;
    border-right: 3px solid #0b92c4 ;
    margin-top: 25px;
    text-decoration: none;
}

.hellblau{
    background-color: rgba(0, 151, 209, .8)!important;
} 
.superhellblau{
    background-color: rgba(0, 151, 209, .6)!important;
}

/*Emoji-Button*/
.emoji-button {
        display: inline-block;
        padding: 20px;
        font-family: myriad-pro, sans-serif;
        font-size: 20pt;
        line-height: 28pt;
        font-weight: 600;
        width: 100%;
        margin-top: 25px;
        -webkit-appearance: none;
        appearance: none;
        background-color: rgba(0, 151, 209, 1);
        color: #fff;
        border-radius: 12px;
        border: none;
        cursor: pointer;
        position: relative;
        transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
        border-bottom :3px solid#0b92c4;
        border-right: 3px solid #0b92c4 ;
}
.emoji-button:before, .emoji-button:after {
    position: absolute;
    content: '';
    display: block;
    width: 140%;
    height: 100%;
    left: -20%;
    z-index: -1000;
    transition: all ease-in-out 0.5s;
    background-repeat: no-repeat;
  }
  
  .emoji-button:before {
    display: none;
    top: -75%;
    background-image: url("img/kakipoo.png"), url("img/kakipoo.png"), url("img/kakipoo.png"), url("img/kakipoo.png"), url("img/kakipoo.png"), url("img/kakipoo.png"), url("img/kakipoo.png"), url("img/kakipoo.png"), url("img/kakipoo.png");
    background-size:  10% , 5%, 8%, 5% , 10%, 8% , 5%;
  }
  
  .emoji-button:after {
    display: none;
    bottom: -75%;
    background-image: url("img/kakipoo.png"), url("img/kakipoo.png"), url("img/kakipoo.png"), url("img/kakipoo.png"), url("img/kakipoo.png"), url("img/kakipoo.png"), url("img/kakipoo.png"), url("img/kakipoo.png"), url("img/kakipoo.png");
    background-size: 10% , 5%, 8%, 5% , 10%, 8% , 5%;
  }
  
.emoji-button:active {
    transform: scale(0.9);
    background-color: #e20031 !important;
}
.emoji-button:focus{
    background-color: #e20031 !important;
    webkit-background-color: #e20031 !important;
    border-bottom :3px solid #bc1313;
    border-right: 3px solid  #bc1313 ;
  }
  
  .emoji-button.animate:before {
    display: block;
    animation: topKaki ease-in-out 2s forwards;
  }
  
  .emoji-button.animate:after {
    display: block;
    animation: bottomKaki ease-in-out 2s forwards;

  }
   @keyframes
  topKaki {  0% {
   background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
  }
   50% {
   background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
  }
   100% {
   background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
   background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
  }
  @keyframes
  bottomKaki {  0% {
   background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
  }
   50% {
   background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
  }
   100% {
   background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
   background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
  }
/*Konfetti-Button*/
.confetti-button {
    display: inline-block;
    padding: 20px;
    font-family: myriad-pro, sans-serif;
    font-size: 20pt;
    line-height: 28pt;
    font-weight: 600;
    width: 100%;
    margin-top: 25px;
    -webkit-appearance: none;
    appearance: none;
    background-color: rgba(0, 151, 209, 1);
    color: #fff;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    position: relative;
    transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
    border-bottom :3px solid#0b92c4;
    border-right: 3px solid #0b92c4 ;
  }
  
  .confetti-button:focus { outline: 0; }
  
  .confetti-button:before, .confetti-button:after {
    position: absolute;
    content: '';
    display: block;
    width: 140%;
    height: 100%;
    left: -20%;
    z-index: -1000;
    transition: all ease-in-out 0.5s;
    background-repeat: no-repeat;
  }
  
  .confetti-button:before {
    display: none;
    top: -75%;
    background-image: radial-gradient(circle, #00b7ff 20%, transparent 20%), radial-gradient(circle,  #19853a 20%, transparent 30%), radial-gradient(circle, #ff0000 20%, transparent 20%), radial-gradient(circle, #3dc731 20%, transparent 20%), radial-gradient(circle, transparent 10%, #852a57 15%, transparent 20%), radial-gradient(circle, #3053c5 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #fbff00 20%, transparent 20%), radial-gradient(circle, #ffd000 20%, transparent 20%);
    background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%;
  }
  
  .confetti-button:after {
    display: none;
    bottom: -75%;
    background-image: radial-gradient(circle, #00b7ff 20%, transparent 20%), radial-gradient(circle, #19853a 20%, transparent 30%), radial-gradient(circle, #ff0000 20%, transparent 20%), radial-gradient(circle, #3dc731 20%, transparent 20%), radial-gradient(circle, transparent 10%, #852a57 15%, transparent 20%), radial-gradient(circle, #3053c5 20%, transparent 20%), radial-gradient(circle, #ff0081 20%, transparent 20%), radial-gradient(circle, #fbff00 20%, transparent 20%), radial-gradient(circle, #ffd000 20%, transparent 20%);
    background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
  }
  
  .confetti-button:active {
    transform: scale(0.9);
    background-color: #8fbc13  !important;
}
  .confetti-button:focus{
    background-color: #8fbc13 !important;
    border-bottom :3px solid#728f22 ;
    border-right: 3px solid #728f22  ;
  }
  
  .confetti-button.animate:before {
    display: block;
    animation: topBubbles ease-in-out 0.75s forwards;
  }
  
  .confetti-button.animate:after {
    display: block;
    animation: bottomBubbles ease-in-out 0.75s forwards;

  }
   @keyframes
  topBubbles {  0% {
   background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
  }
   50% {
   background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
  }
   100% {
   background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
   background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
  }
  @keyframes
  bottomBubbles {  0% {
   background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
  }
   50% {
   background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
  }
   100% {
   background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
   background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }
  }
/*MUSIC-PLAYER*/
.audio-player {
  --player-button-width: 3em;
  --sound-button-width: 2em;
  --space: .5em;
  width: 100%;
  height: 80px;
  background:linear-gradient(to top, #0097d0, #5fbfed);
  border-radius:12px;
  padding:15px;
  box-sizing:border-box;
}

.audio-icon {
   width: 90%;
   height: 90%;
}

.controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  margin-top: 5px;
}

.player-button {
  background-color: transparent;
  border: 0;
  width: var(--player-button-width);
  height: var(--player-button-width);
  cursor: pointer;
  padding: 0;
}

.timeline {
  -webkit-appearance: none;
  width: calc(100% - (var(--player-button-width) + var(--sound-button-width) + var(--space)));
  height: .5em;
  background-color: #e5e5e5;
  border-radius: 5px;
  background-size: 0% 100%;
  background-image: linear-gradient(#ef7d00, #ef7d00);
  background-repeat: no-repeat;
  margin-right:15px;
  margin-left:15px;
}

.timeline::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: all .1s;
  background-color: #ef7d00;
}

.timeline::-moz-range-thumb {
  -webkit-appearance: none;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: all .1s;
  background-color: #ef7d00;
}

.timeline::-ms-thumb {
  -webkit-appearance: none;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: all .1s;
  background-color: #ef7d00;
}

.timeline::-webkit-slider-thumb:hover {
  background-color: #ef7d00;
}

.timeline:hover::-webkit-slider-thumb {
  opacity: 1;
}

.timeline::-moz-range-thumb:hover {
  background-color: #943f65;
}

.timeline:hover::-moz-range-thumb {
  opacity: 1;
}

.timeline::-ms-thumb:hover {
  background-color: #943f65;
}

.timeline:hover::-ms-thumb {
  opacity: 1;
}

.timeline::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

.timeline::-moz-range-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

.timeline::-ms-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

.sound-button {
  background-color: transparent;
  border: 0;
  width: var(--sound-button-width);
  height: var(--sound-button-width);
  cursor: pointer;
  padding: 0;
}
/*Spotify-Player*/
.spotify-button{
    border-radius: 12px;
    margin-top: 20px;
}
/*Google Maps*/
.maps{
    border-radius: 12px;
    border:rgb(218, 218, 218) 2px solid;
}
/*Impressum*/

.impressum{
    text-align: center;
    font-size: 12pt;
    padding-bottom:25px;
    margin-top:50px;
}
.impressum a{
    color:#0097d0;
}
.impressum a:hover{
    color:#0e84af;
}

/*Formular*/
input{
  font-family: myriad-pro, sans-serif;
}
.formular,select{
  background-color:white ;
  color: rgb(0, 0, 0, 0.5);
  font-size: 17pt;
  padding-left: 10px;
  margin: 10px 0px 20px 0px;
  border-style: none;
  height: 50px;
  width: 100%;
  border-radius: 10px;
  box-sizing: border-box;
  outline: none;
}

.formular:focus{
  border: 2px solid #0097d0;
}

.senden{
  background-color: #0097d0;
  color: white;
  font-size: 20pt;
  margin: 10px 10px 20px 0px;
  border-style: none;
  height: 50px;
  width: 100%;
  border-radius: 10px;
}

.failed{
  background-color:#f0a9a9;
  border:2px solid red;
  border-radius:10px;
  width:100%;
  box-sizing: border-box;
  padding: 20px;
}
.success{
  background-color:#c7e6c7;
  border:2px solid green;
  border-radius:10px;
  width:100%;
  box-sizing: border-box;
  padding: 20px;
}