body,h1,h2,h3,h4,h5,h6 {font-family: "Open Sans", sans-serif;}
body, html {
    height: 100%;
    color: #777;
    line-height: 1.8;
}

.pbContainer {
  position: relative;
  width: 25%;
  padding-bottom: 25%;
  float: left;
  height: 0;
}

.pb {
  border-radius: 50%;
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
}

#tobi_pb {
  background-image: url('../images/musiker/tobi.jpg');
  background-size: cover;
}

#lori_pb {
  background-image: url('../images/musiker/lori.jpg');
  background-size: cover;
}

#gaga_pb {
  background-image: url('../images/musiker/gaga.jpg');
  background-size: cover;
}

#schnuke_pb {
  background-image: url('../images/musiker/schnuke.jpg');
  background-size: cover;
}

#beck_pb {
  background-image: url('../images/musiker/beck.jpg');
  background-size: cover;
}

#martin_pb {
  background-image: url('../images/musiker/martin.jpg');
  background-size: cover;
}

#samu_pb {
  background-image: url('../images/musiker/samu.jpg');
  background-size: cover;
}

/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4 {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -10;
}

.bgimg-1 {
    background-image: url('../images/hintergrund_opt.jpg');
    min-height: 100%;
}

.bgimg-2 {
    background-image: url("../images/musiker_opt.jpg");
    min-height: 300px;
}

.bgimg-3 {
    background-image: url("../images/termine_opt.jpg");
    min-height: 300px;
}

.bgimg-4 {
    background-image: url("../images/kontakt_opt.jpg");
    min-height: 300px;
}

.transp {
  background: rgba(255,255,255,0.75);
  position: relative;
}

.arrow-container {
  position: absolute;
  bottom: 20px;
  width: 20%;
  left: 40%;
  text-align: center;
}

.myTitle {
  text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
}

.mybutton {
  background-color: white !important;
  color: #111;
  text-align: center;
  margin: 16px 16px 16px 16px;
  border-radius: 4px;
}

.amazon-card {
  color: #FF9900 !important;
}

.amazon-card:hover {
  background-color: #FF9900 !important;
  color: white !important;
}

.spotify-card {
  color: #1DB954 !important;
}

.spotify-card:hover {
  background-color: #1DB954 !important;
  color: white !important;
}

.apple-card {
  color: #b166cc !important;
}

.apple-card:hover {
  background-color: #b166cc !important;
  color: white !important;
}

.google-play-card {
  color: #f4522b !important;
}

.google-play-card:hover {
  background-color: #f4522b !important;
  color: white !important;
}

.tidal-card {
  color: #202020 !important;
}

.tidal-card:hover {
  background-color: #202020 !important;
  color: white !important;
}

.shopping-card {
  background-color: #d19600 !important;
  color: white !important;
}

.shopping-card:hover {
  background-color: white !important;
  color: #d19600 !important;
}

.disable-card {
  color: grey !important;
}


.facebook-card {
  color: #3b5998 !important;
}

.facebook-card:hover {
  background-color: #3b5998 !important;
  color: white !important;
}

.instagram-card {
  color: #8a3ab9 !important;
}

.instagram-card:hover {
  background-color: #8a3ab9 !important;
  color: white !important;
}

a {
    color: inherit !important;
    text-decoration: none !important;;
}

.parallax-window {
    background-color: transparent;
}


.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}

.w3-bar-item {
    color: rgba(255, 255, 255, 0.5);
}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
    .bgimg-1, .bgimg-2, .bgimg-3 {
        /*background-attachment: scroll;*/
    }
}