.bg-dark{
    background-color: rgb(99, 99, 99) !important;
}

.line{
    color:rgb(99, 99, 99);
    width: 70%;
    height: 5px !important;
    margin:0 auto;
}

.audiogroesse{
    width: 90%;
}


.border{
    border: 0px solid orange !important;
    background-color: orange !important;
}



/*Breakpoint für kloane Bildschirme*/
#banner2{
    background-image: url("images/intro2.jpeg") !important;
    background-color: #cccccc; /* Used if the image is unavailable */
    height: 750px; /* You must set a specified height */
    background-position: center; /* - Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover; /* Resize the background image to cover the entire container */
     position: relative;
}

.bannertext{
        color: white;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 16px;
        position: absolute;  
        text-align: center;          /* Achtung "absolute" braucht immer ein relativ im Eltern-Element */
        top: 70%;
        bottom: 0px;
}

    /** Größere Monitore **/
@media only screen and (min-width: 570px) {
    #banner2 { display:none;
        }
}

/** Kleinere Monitore **/
@media only screen and (max-width: 600px) {
   #banner1, #einleitung { display:none;
        }
        
/* Textausrichtung in der unteren Hälfte */

#banner2 .container span{
    background-color: rgba(0,0,0, 0.2);
    text-shadow: 1px 1px #000;
    padding: 5px;
    margin: -15px;
    color: #fff;
    position:absolute;
    bottom:0;
    } 
}


/* nVIGATION */
footer a{
    color: white;
}

footer a:hoover{
    color: grey;
}

#backtotop_button {
  background-color: rgba(0, 0, 0, 0);
  text-align: center;
  position: fixed;
  bottom: 45px;
  left: auto;
  right: 25px;
  color: #fff;
  padding: 5px;
  z-index: 99999;
} 

/**Linkverhalten**/ 
#backtotop_button a, #backtotop_button a:hover, #backtotop_button a:focus {
  color: #fff;
} 

/**runder Button**/ .circle-icon {
  background: lightblue;
  padding: 10px;
  border-radius: 50%;
}