@charset "UTF-8";
@import 'https://fonts.googleapis.com/css?family=Open+Sans';
* {  outline: none;
}

body, html {  margin: 0;  background: #ddd;
}

body {  font-family: "Open Sans", Arial, sans-serif;
}

@font-face {  font-family: "Fabada";  src: url(fonts/fabada/Fabada-regular.ttf) format("opentype");
}

h1 {  font-family: "Fabada", Verdana, Tahoma;  font-size: 42px;  margin: 2px 0 10px 0;  color: white;
}

h2 {  font-family: "Fabada", Verdana, Tahoma;  font-size: 30px;  margin: 2px 0 10px 0;  color: white;
}

.test-highlight {  color: var(--font-color-two);
}

a .test-highlight {  text-decoration: underline;  text-decoration-color: var(--font-color-two);
}

.gigrow {  margin-bottom: 30px;
}

a.button {  color: white;  margin-top: 20px;
}

a.albumlink {  color: white;  text-decoration: none;
}


.flexwrapper {
  display: flex;  flex-direction: row;  flex-flow: row wrap;  align-content: space-between;  justify-content: flex-start;  color: white;
}

div.flexitem {  max-width: 800px;  text-align: center;  position: relative;  color: var(--font-color-one);  margin: 20px 0 0 20px;
}

div.flexitem-content {
  position: relative;
}

.onebackground {
  padding: 20px;  /* webkit example */  background-color: var(--background-color);  /*border-radius: 0px 30px 0px 0px;*/  border-radius: 17px 17px 0px 17px;
  /* mozilla example - FF3.6+ */  /*background-image: linear-gradient(*/  /*right center,*/  /*rgba(5, 76, 191, 1.0) 50%, rgba(5, 76, 191, 0) 100%*/  /*);*/
}

.onebackground.slim {
  padding: 6px 10px 0 10px
}

div.flexitem img {
  width: 30vw; min-width: 550px; object-fit: cover;
}

div.flexitem img.smallimg {
  width: 20vw; min-width: 250px; object-fit: cover;
}

div.flexitem.placeholder {  min-width: 20%;
}

div.flexitem.linebreak {  width: 100%;  min-width: 100%;
}

div.flexitem.linebreak.spacer {  height: 60vh;
}

div.flexitem.heading {  margin: 40px 0 0 80px;  min-width: 40vw;
}

div.flexitem.heading {  margin-bottom: 300px;
}


.music-box-teaser .action-button {  text-align: center;
}

.music-box-teaser .action-button a {  cursor: pointer;  display: inline-block;  width: 44px;  height: 44px;  margin: 3px;  line-height: 44px;  color: white;  transition-duration: 0.3s;
}

.music-box-teaser .action-button a:hover {  color: yellow;
}

.music-box-teaser .action-button a:hover.play-pause {  border-color: yellow;
}

.music-box-teaser .action-button a.play-pause {  border-radius: 50%;  border: 1px solid white;  font-size: 1.5em;  width: 54px;  height: 54px;  line-height: 54px;
}

.music-box-teaser .action-button a.play-pause.active {  border-color: yellow;
}

.music-box-teaser .action-button a.play-pause.active i::before {  content: "";  margin-left: 5px;
}

.music-box-teaser .action-button a.active {  color: yellow;
}
.iframewrapper {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
  opacity: 1;
}
iframe.resp-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.stageimage {  background-image: url(img2/ben-flute-6-3.jpg); top: 0;  background-size: cover;  -webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;  height: 100%;  width: 100%;  position: fixed;
  background-repeat: no-repeat;  background-position: right center;  height: 100%;
}
.songgoing2 .stageimage {  background-image: url(img2/8-octopi-duo.jpg); top: 0;  background-size: cover;  -webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;   width: 100%;  position: fixed;
  background-repeat: no-repeat;  background-position: center center;  height: 100%;
}
.songgoing .stageimage {  background-image: url(img2/8-octopi-2024-web2.jpg); top: 0;  background-size: cover;  -webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;   width: 100%;  position: fixed;
  background-repeat: no-repeat;  background-position: top center;  height: 100%;
}
@media only screen and (max-width: 820px) {
  .songgoing .stageimage {
    background-image: url(img2/8-octopi-2024-web2-mobile.jpg);
    background-position: top left;
  }
}
.songgoing.songgoing2022 .stageimage {  background-image: url(img2/8-octopi-2024-web2.jpg); top: 0;  background-size: cover;  -webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;   width: 100%;  position: fixed;
  background-repeat: no-repeat;  background-position: top center;  height: 100%;
}

.songgoing2 .mobilefeature{
  display:none
}

.songgoing2 div.flexitem.heading {  margin-bottom: 420px;
}

.imagemap{
  z-index: 1;
  position: relative;
}
.imagemap img{
  padding-top: 10px;
  position: relative;
  left: -10px;
}

@media only screen and (max-width: 800px) {
  h1{ font-size: 30px}
  h2{font-size:22px}
  p{font-size:20px}
  div.flexitem.albumbox {      margin-top: 200px;  }
  .stageimage {      background-image: url(img2/ben-flute-6-xs.jpg);  }
}

#songfinder-375{
  display: none;
}

@media only screen
and (max-width: 600px) {
  h1{ font-size: 26px}
  h2{font-size:18px}
  p{font-size:14px}
  div.flexitem.albumbox {      margin-top: 0px;  }
  .stageimage {      background-image: url(img2/ben-flute-6-sm.jpg); }
  .onebackground{
    padding:10px;
    border-radius: 8px 8px 0px 8px;
  }
  div.flexitem{
    max-width:90%;
  }

  div.flexitem img {
    width: 60vw; height: unset; min-width: 60vw; min-height: unset; object-fit: cover;
  }
  div.flexitem picture {
    width: 60vw; height: unset; min-width: 60vw; min-height: unset; object-fit: cover;
  }


  .songgoing2 .mobilefeature{
    display:block;
  }
  .songgoing2 .mobilefeature img{
    width:88vw;
  }

  .songgoing2 div.flexitem.heading {  margin-bottom: 0px;
  }
  #songfinder-375{
    display: block;
  }
  #songfinder{
    display: none;
  }
  div.flexitem.linebreak.spacer {  height: 40vh;
  }
}