body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
    font-weight: normal;


}
@font-face {
    font-family: 'ebbing_sounds';
    src: url('ebbingsounds-light-webfont.woff2') format('woff2'),
         url('ebbingsounds-light-webfont.woff') format('woff'),
         url('ebbingsounds-light-webfont.ttf') format('truetype'),
         url('ebbingsounds-light-webfont.svg#ebbing_soundslight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'concern';
    src: url('concern-light-webfont.woff2') format('woff2'),
         url('concern-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


body {
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  overflow-x: hidden;
  background-color: #fafafa;
}

#canvas {
  position: fixed;
      width: 100%;
      height: 100%;
      left: 0px;
      top: 0px;
      z-index: 4;
}
#maincontainer {
  position: relative;
  width: 100vw;
  height: 200vh;
  left: 0px;
  top: 0px;
  z-index: 5;
  /*overflow:scroll;*/
  /*border: 1px solid lime;*/
}
#intro {
  position: fixed;
  padding: 10px;
  top: 0px;
  left: 0px;
  width: calc(100% - 20px);
  height: 100%;
  /*background-color: white;*/
  overflow-x: hidden;
  z-index: 3;
}

.backOnScroll{
  position: absolute;
  top: 100vh;
}

#programme {
  position: relative;
  padding: 10px;
  width: calc(100% - 20px);
  height: auto;
  background-color: #fafafa;
  min-height: 100vh;
  overflow-x: hidden;
  /*border: 1px solid red;*/
  z-index: 5;
}

#infos {
  position: relative;
  padding: 10px;
  width: calc(100% - 20px);
  height: auto;
  background-color: #fafafa;
  min-height: 100%;
  overflow-x: hidden;
  /*border: 1px solid blue;*/
  z-index: 5;

}

#programmecontainer {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-gap: 10px;
}

#infoscontainer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;

}
h1 {
    font-family: 'ebbing_sounds', Helvetica;
    font-size: 70px;
    line-height: 78px;
    text-align: left;
    font-weight: normal;
    font-variant-ligatures: no-common-ligatures;
}

h2 {
  font-family: 'ebbing_sounds', Helvetica;
  font-size: 70px;
  line-height: 78px;
  text-align: left;
  font-weight: normal;
  font-variant-ligatures: no-common-ligatures;

}

.textsize {
  font-family: 'concern', Helvetica, sans-serif;
  font-weight: 200;
  font-size: 13px;
  line-height: 11.6pt;
  text-align: left;
}


.lines {
  font-variant-ligatures: common-ligatures;
}
.first {
  position: absolute;
  left: 10px;
}

.second {
  position: absolute;
  top: 100px;
  left: 320px;
}

.third {
  position: absolute;
  top: calc(50vh - 45px);
  right: 10px;
}

.fourth {
  position: absolute;
  top: calc(50vh + 45px);
  right: 10px;
}
.sixth {
  position: absolute;
  bottom: 110px;
  width: auto;

}
.seventh {
  position: absolute;
  bottom: 20px;
  left: 255px;
  width: auto;

}

.titel {
  padding-top: 2px;
  padding-bottom: 2px;
}

.justify {
  text-align: justify;
  text-justify: inter-word;
}

.tickets {
}

.span2 {
  column-span: 2;
}

.logos {
  position: relative;
  max-width: 60%;
}

.unten {
position: absolute;
bottom: 20px;
}

.texty {
  width: 32%;
}

#column {
    float: left;
    width: 33.33%;
    padding-left: 10px;
    padding-right: 10px;
}

.twocolumns{
  column-span: 2;
}

.zweite {
  overflow: scroll;
  height: 100%;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

a{
	text-decoration:none;
  color: black;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.listwrapper {
  display: inline-grid;
  grid-template-columns: 50px 50px 1fr;
  height: auto;
  border-top: 1px solid black;
  padding-top: 2px;
  padding-bottom: 2px;
  width: 100%;
  overflow: auto;

}

.expand {
  max-height: 0;
  padding-right: 1px;
  -webkit-transition: max-height 0.7s ease-out;
     -moz-transition: max-height 0.7s ease-out;
      -ms-transition: max-height 0.7s ease-out;
       -o-transition: max-height 0.7s ease-out;
          transition: max-height 0.7s ease-out;
  overflow: hidden;

}

.listwrapper:hover .expand {
  max-height: 500px;
  -webkit-transition: max-height 0.7s ease-in;
     -moz-transition: max-height 0.7s ease-in;
      -ms-transition: max-height 0.7s ease-in;
       -o-transition: max-height 0.7s ease-in;
          transition: max-height 0.7s ease-in;
}


.topline {
  border-top: 1px solid black;
}

.bottom {
  position: relative;
  bottom: 20px;
}
.listwrapper:hover {
  background-color: #f0f0f0;
}

table {
    border-spacing: 0;
}
fieldset,img {
    border: 0;
}

::-webkit-scrollbar {
    width: 2px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background: black;
}

@media screen and (max-width: 1020px) {
  .second {
    left: 10px;
    }
    .seventh {
      left: 10px;
      }
      .listwrapper {
        grid-template-columns: 40px 40px 1fr;
      }

      #canvas{
        display:none;

      }

}


@media screen and (max-width: 750px) {

  h1 {
    font-size: 55px;
    line-height: 55px;
  }
  .first {
    top: 10px;
  }
  .second {
    top: 80px;
  }
  .third {
    top: calc(50vh - 35px);
  }

  .fourth {
    top: calc(50vh + 35px);
  }

  .sixth {
    bottom: 95px;
  }
  .seventh {
    bottom: 20px;
  }
  .listwrapper {
    grid-template-columns: 30px 30px 1fr;
  }

  #canvas{
    display:none;

  }

  #programme {
    height: auto;
  }
  #programmecontainer {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }


}

@media screen and (max-width: 890px) , screen and (max-height: 540px){

  h1 {
    font-size: 55px;
    line-height: 55px;
  }
  .first {
    top: 10px;
  }
  .second {
    top: 80px;
  }

  .sixth {
    bottom: 95px;
  }
  .seventh {
    bottom: 20px;
  }
  .listwrapper {
    grid-template-columns: 30px 30px 1fr;
  }

  #canvas{
    display:none;

  }


}

@media screen and (max-width: 550px) {
  h1 {
    font-size: 45px;
  }
  .second {
    top: 55px;
  }
  .third {
    top: calc(50vh - 22px);
  }

  .fourth {
    top: calc(50vh + 22px);
  }
  .sixth {
    bottom: 75px;
  }

  .invisible {
    display: none;
  }

  #one {
    column-span: 3;
  }
  #two {
    column-span: 3;
  }
  #three {
    column-span: 3;
  }
  #four {
    column-span: 3;
  }

  #canvas{
    display:none;

  }

}

@media screen and (max-width: 430px)  {
  h1 {
    font-size: 35px;
  }
  .second {
    top: 55px;
  }
  .sixth {
    bottom: 65px;
  }
  .logos {
    width: 200px;
  }
  #canvas{
    display:none;

  }
}