@media (min-width: 481px) {

p {
  font-size: calc(1.3 * 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;
   }

                body {
                    font-size: calc(1.2 * var(--basefontsize));
                    line-height: calc(1.2 * var(--baselineheight));
                    
                    /*background-image: url("/img/backgroundidea8.jpg");
                    background-size: 87%;
                    background-position: center top;
                    background-repeat: no-repeat;*/

                    /*background-color: #e9e9e9;*/
                      background-color: #b2aea5;

                
                    
                      /*
                     background-size: cover;
                    background-position: center center;
                    background-attachment: fixed;
                    background-width: 100vw; background-height: 100vw; */
                   }
    
    .outsidecontainer {
  	max-width: 1920px;
    margin: auto;
	}


.smallkurz, .welcomelogowrappersmall, .musikpursmall, .thebandwrapperL, .thebandtitleL, .thebandtextL, .bandpicsmall, .bandpic3small, .welcomecontainer2, .bandtitlesmall, .thebandtextsmall {
      display: none;
    }

.welcomeoverlay {
  position: relative;
}

.welcomepicpic {
  display: block;
  width: 100%;
  border: solid 3px #000000;
}

 .welcomelogowrapperbig {
      position: absolute;
      bottom: 0%;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: baseline;
      width: 100%;
      background-color: rgba(67,0,10, .9);
    }


 .logo-small {
      width: 20%;
      padding-top: 1%;
      padding-left: 1%;
    }

    .musikpurbig {
    margin-left: 1%;
    color: #ffffff;
    }

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

      .welcomecontainer3 {
         display: block;
         float: left;
         width: 38%;
          margin-left: 10%;
          margin-right: 2%;
        }

          .bandpicbig {
            display: block;
            float: left;
            width: 40%;
          }

          .bandpic3big {
            width: 100%;
            border: solid 3px #000000;
            background-color: rgba(67,0,10, .7);
          }


/* MIDDLE SIZE */

                  .thebandwrapper {
                    clear: both;
                    display: flex;
                    width: 100%;
                    padding-top: 2%;
                    align-items: center;
                    justify-content: center;
                    text-align: center;

                  }

                  .thebandtitlebig {

                    font-size: calc(1.7 * var(--basefontsize));
                    letter-spacing: .5em;
                  }

                  .thebandtextbig {
                          margin-left: 2%;
                   }

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

     .ausmacht4 {
      float: left;
      clear: both;
      display: block;
      text-align: center;
      width: 60%;
      
      font-size: calc(1.2 * var(--basefontsize));
     }


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

   .treten2 {
      float: right;
      margin-bottom: 3%;
      width: 60%;
      font-size: calc(1.2 * var(--basefontsize));
    }

.songlistwrapper {
  clear: both;
  margin-left: 15%;
  width: 70%;
  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: 5%;
      max-height: 300px;
      border: 5px solid black;
      color: #ffffff;
      background-color: rgba(67,0,10, .7);
      font-size: calc(.9 * var(--basefontsize)); 
    }

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

    .videowrapper {
      clear: both;
      display: block;
      width: 50%;
      margin-left: 25%;
      margin-bottom: 5%;

    }

    .video1 {   /* title */
      width: 100%;
      margin-top: 2%;
      background-color: rgba(0,0,0, .7);
    }

    .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: rgba(0,0,0, .7);
  width: 100%;
}

    .picturebar {
      max-height: 250px;
      display: flex;
      flex-wrap: nowrap;
       overflow-y: hidden;
       -webkit-overflow-scrolling: touch;
    }

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

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

    .kontakttitle {
      display: block;
      float: left;
      width: 100%;
      background-color: rgba(0,0,0, .7);
    }

    .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));
}

  .songlist2 div {
      flex: 1 0 50%;
    }
}

@media (min-width: 1024px) {

  .songlist2 div {
      flex: 1 0 30%;
    }
}

@media (min-width: 1300px) {

  .thebandwrapper, .thebandtitlebig, .thebandtextbig {
  display: none;
}

/* LARGE SIZE */

.thebandwrapperL {
                    display: flex;
                    padding-top: 4%;
                    align-items: center;
                    text-align: left;
                  }

                  .thebandtitlebigL {
                    display: block;
                    font-size: calc(1.3 * var(--basefontsize));
                    letter-spacing: .2em;
                    text-align: center;
                    font-style: italic;

                  }

                  .thebandtextbigL {
                          display: block;
                          margin-left: 5%;
                          font-size: calc(1.1 * var(--basefontsize));
                      
                   }

}


@media (min-width: 1400px) {
        .thebandwrapperL {
          padding-top: 10%;
        }

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


 @media (min-width: 1500px) {
        .thebandwrapperL {
          padding-top: 12%;
        }

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

    @media (min-width: 1600px) {
      .thebandwrapperL {
        padding-top: 8%;
      }

      .thebandtitlebigL {
        font-size: calc(1.5 * var(--basefontsize));
      }

      .thebandtextbigL {
                          display: block;
                          margin-left: 5%;
                          font-size: calc(1.3 * var(--basefontsize));  
                   }
      p {
          font-size: calc(1.7 * var(--basefontsize));
        }

}

    @media (min-width: 1800px) {
      .thebandwrapperL {
        padding-top: 11%;
      }

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

    }