body {
  font-size: var(--basefontsize);
  color: #000000;
  position: relative;
  line-height: var(--baselineheight);
  /*background-color: rgba(67,0,10, .3);*/
  font-family: Verdana;
  width: 100%;
  background-color: #b2aea5;
}

p {
  font-size: calc(1.0 * var(--basefontsize));
}

h1 {
    font-size: calc(2.2 * var(--basefontsize));
    font-style: italic;
    text-align: center;
   }

h2 {
	font-size: calc(1.2 * var(--basefontsize));
  	font-style: italic;
    letter-spacing: .2em;
    margin-left: 2%;
    margin-right: 2%;
    color: #ffffff;
   }

h4 {
  text-align: center;
   }

    .footeritems {
      width: 100%;
      display: inline-block;
      text-align: center;
      font-size: calc(.7 * var(--basefontsize));
    }

    .logo-small {
      width: 80%;
      margin-left: 10%;
    }

 .bandpicsmall { /* Picture Info */
      display: block;
      width: 90%;
      margin-left: 5%;
    }

     .bandpic3small {
    width: 100%;
    border: 2px solid black;
    } 


    .welcomewrapper {
      margin-top: 3%;
      margin-bottom: 3%;
     
    }

    .welcomelogowrappersmall {
      text-align: left;
    }

   

    .musikpursmall {
    }

/* HIDE BIGGER VERSIONS OF CODE */
.welcomelogowrapperbig, .welcomelogobig, .musikpurbig, .welcomecontainer3, .bigintrowrapper, .bigkurz, .thebandwrapper, .thebandtitlebig, .thebandtextbig,  .thebandwrapperL, .thebandtitlebigL, .thebandtextbigL {
  display: none;
}


  .smallkurz {
            float: left;
            margin-top: 2%;
            width: 100%;
            margin-bottom: 2%;
            text-align: center;
            color: gray;
            font-style: italic;
            
            }

  .welcomecontainer2 {
      margin-left: 5%;
      margin-right: 5%;
      margin-top: 2%;
    }

      .bandtitlesmall {
          display: block;
          clear: both;
          float: left;
          width: 90%;
          padding-left: 1%;
          margin-top: 3%;
          margin-bottom: 3%;
          background-color: rgba(0, 0, 0, .7);
          text-align: right;
      }

      .thebandtextsmall { 
      display: block;
      width: 90%;
      margin-left: 5%;
      margin-top: 10%;
      text-align: center;
      background-image: url("/img/bgjj-2.png");
      background-position: center center;
      background-repeat: no-repeat;
    }

   .welcomepicpic, .thebandwrapperbig, .thebandtextbig, .bandpicbig, .bandpic3big {
      display: none;
    }

     .ausmacht3 {
      display: block;
      clear: both;
      float: left;
      width: 90%;
      padding-left: 1%;
      margin-top: 3%;
      margin-bottom: 3%;
      background-color: rgba(0, 0, 0, .7);
      text-align: right;
     }

     .ausmacht4 {
      float: left;
      clear: both;
      display: block;
      background-image: url("/img/bgjingle-2.png");
      background-position: center center;
      background-repeat: no-repeat;
      margin-left: 3%;
      margin-right: 3%;
      text-align: left;
      width: 94%;
      font-size: calc(1.1 * var(--basefontsize));
     }


   .treten1 {
      display: block;
      clear: both;
      float: left;
      width: 90%;
      margin-top: 3%;
      background-color: rgba(0, 0, 0, .7);
      text-align: right;
   }

   .treten2 {
      float: left;
      background-image: url("/img/bgjangle-3.png");
      background-position: center center;
      background-repeat: no-repeat;

      margin-top: 3%;
      margin-bottom: 5%;
      margin-left: 3%;
      margin-right: 3%;
      width: 95%;
      font-size: calc(1.1 * var(--basefontsize));
    }

.songlistwrapper {
  clear: both;
  padding-top: 3%;
  margin-left: 2%;
  width: 95%;
  clear: both;
}

.songlisttitle {
   text-align: center;
   background-color: rgba(0,0,0, .7);
}

.songlist {
      float: left;
      display: flex;
      flex-wrap: wrap;
      overflow: scroll;
      justify-content: space-around;
      text-align: center;
      margin-bottom: 10%;
      max-height: 200px;
      border: 5px solid black;
      color: #ffffff;
      background-color: rgba(67,0,10, .7);
      font-size: calc(.8 * var(--basefontsize)); 
      /* background-image: url("/img/jjbg.jpg"); */
    }

    .songlist div {
      flex: 1 0 90%;
    }


    .videowrapper {
      clear: both;
      display: block;
      width: 95%;
      margin-left: 2%;
      margin-bottom: 10%;

    }

    .video1 {
      width: 100%;
      margin-top: 2%;
      background-color: black;
      text-align: center;
    }

    .video2 {
      position: relative;
      overflow: hidden;
      padding-top: 56.25%;
      background-color: #000000;
      border: 2px solid black; 
    }

    .res-iframe-small {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0; 
    }

.picturetitle {
  clear: both;
  display: block;
  background-color: black;
  width: 100%;
  margin-top: 3%;
  text-align: center;
}

    .picturebar {
      max-height: 200px;
      display: flex;
   

      flex-wrap: nowrap;
       overflow-y: hidden;
       -webkit-overflow-scrolling: touch;
    }

    .picturebarpic {
      max-height: 200px;
      margin-right: 10px;
    }

    .kontaktwrapper {
      width: 90%;
      margin-left: 5%;
      margin-top: 5%;
      margin-bottom: 3%;
      color: #ffffff;
      background-color: rgba(67,0,10, .7);
    }

    .kontakttitle {
      display: block;
      float: left;
      width: 100%;
      background-color: black;
      text-align: center;
    }

    .kontaktcontainer {
      display: inline-block;
      width: 100%;
      padding: 2%;
      text-align: center;  
    }

    .kontaktform {
      display: inline-block;
      width: 100%;
      text-align: center;
    }
    
  

input[type=submit] {
  display: inline-block;
  width: 30%;
  margin-right: 2%;
    margin-left: 2%;
  margin-bottom: 2%;
}

input[type=text] {
  display: inline-block;
  width: 55%;
  font-size: calc(.8 * var(--basefontsize));
  margin-top: 0%;
  margin-bottom: 2%;
}

textarea {
  display: inline-block;
  vertical-align: middle;
  height: 15%;
  width: 60%;
  margin-bottom: 2%;
  font-size: calc(.8 * var(--basefontsize));
}