body,html {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;font-size:20px;color: #eee;scroll-behavior: smooth;margin:0;padding:0;user-select: none;background-color: #000;}
h1,h2,h3,h4,h5{margin:0;padding:0;}
h1{font-size: 200%; font-weight: 100;}
h2{font-size: 160%;font-weight: 200}
h3{font-size: 140%;font-weight: 200;}
h4{font-size: 120%;font-weight: 200}
p {font-size:16px;margin: 20px 0px;}
p.cite{font-size:120%;text-align: center;font-style: italic;}

#header {position: fixed;left:0;right:0;top:0;height:35px;margin:0;padding:5px 16px;z-index:5;background-color: rgba(0,0,0,1);}
#header #navtoggle {float:left;font-size:30px;}
#header .icons {position:relative;height:100%;float: right;}
#header .icons a {margin:0px 10px;text-decoration: none;}
#header i {cursor:pointer;color:#888;font-size:30px;}
#header i:hover {color:#555;}

#navigation {position:fixed;opacity:0;z-index:4;top:45px;left:-100vw;bottom:0;width:100%;transition:all .5s ease-in-out;background-color: rgba(0,0,0,0.95);}
#navigation.open {left:0;opacity:1;}
#navigation ul{margin: 50px 0px; padding: 6px 12px;}
#navigation ul li {margin:6px 12px;padding:6px 12px;list-style-type: none;}
#navigation ul li {border-bottom: 1px solid #aaa;}
#navigation ul li:last-child{border-bottom: none ;}
#navigation ul li a{font-size: 180%;font-weight: 100;color: #aaa;text-decoration: none;}
#navigation ul li a:hover{color: #eee;}

#background { position: fixed; z-index: 1; left: 0; right: 0; top: 0; bottom: 0; }

#content { position: relative; z-index: 2;}
#content .section {position:relative;width:100%;height:auto;overflow:hidden;padding-top:45px;}
#content .section .sectionheader {position:relative;float:left;width: 100%;height:35px;text-align: center;margin: 20px 0px;}
#content .section .sectionbody {position:relative;float:left;width:100%;height: 100%;padding: 12px 0px;}
#content .section .sectionbody .textbox {width: 90%;max-width: 1024px;margin-left: 50%;transform: translate(-50%,0);padding:12px 18px;}

#home.section,#band.section,#image.section {height:calc(100vh - 45px);}
#home .sectionbody{text-align: center;}
#home h1 {font-size: 8vw;}
#home h2 {font-size: 6vw;}

#home .grafic {position:absolute;left:0;right:0;top:0;bottom: 0;background-image: url(../img/live/u_live_1.jpg);background-repeat: no-repeat;background-size: cover;background-position: top center;transition:background-image .2s ease-in-out;}
#home .grafic.img1 {background-image: url(../img/live/u_live_2.jpg);}
#home .grafic.img2 {background-image: url(../img/live/u_live_3.jpg);}
#home .grafic.img3 {background-image: url(../img/live/u_live_4.jpg);}
#home .grafic.img4 {background-image: url(../img/live/u_live_5.jpg);}
#home .grafic.img5 {background-image: url(../img/live/u_live_6.jpg);}
#home .logobackground {position:absolute;left:0;right:0;top:0;bottom: 0;background-color: rgba(0,0,0,0.4);animation: 5s ease-in-out 0s infinite loopColor forwards;}
#home .logo {position:absolute;left:0;right:0;top:0;bottom: 0;background: url(../img/logo_bg.png);background-repeat: no-repeat;background-size: contain;background-position: center center;animation: 1s ease-in-out 0s 1 popInCenter forwards;}
#home .upcoming {  position: absolute;  bottom: 25px;  left: 50%;  text-align: center;  transform: translateX(-50%); text-decoration: none;color:#999;    background: rgba(0,0,0,.5);}
#home .upcoming::before {  content: 'LIVE';  font-size: 80%;  background-color: #f00;color:#fff;  position: absolute;  top: -12px;  left: 50%;  transform: translateX(-50%);    padding: 1px 5px;}
#home .upcoming .date {  font-size: 150%;margin: 5px;    white-space: nowrap;}
#home .upcoming .location { margin:5px;    white-space: nowrap; }
#home .listen {position:absolute;top: 45px;left:0;right:0;display: flex;justify-content: center;flex-wrap: nowrap;background-color: rgba(0,0,0,0.8);}
#home .listen .link {display: flex;padding: 11px;margin: 0px 6px;}
#home .listen .link a {width: 100%;text-align: center;font-size: 10px;text-decoration: none;color:#888;}
#home .listen .link i {width:100%;font-size:30px;color:#888;}
#home .listen .link img {width:100%;}
#band .sectionbody {background:url(../img/Bandfoto_q.jpg); background-repeat: no-repeat;background-size: cover;background-position: top center;}
#image .sectionbody{background:url(../img/chicken.jpg); background-repeat: no-repeat;background-size: cover;background-position: top right;}

#live .upcoming,#live .past {width:100%;float:left;margin:20px 0px;}
#live .past {color:#999;}
#live .concert {text-align: center;}
#live .concert > p {margin:4px 0;}
#live .concert .date {font-size: 120%;}
#live .concert .images .image {position: relative;  display: inline-block;  width: 10%; min-width: 100px;  height: auto;cursor: pointer;}
#live .concert .images .image img{width:100%;}

#contact.section {height:auto;}
#contact .textbox i {font-size: 20px;color: #aaa;}
#contact .textbox a {font-size: 20px;color: #aaa;margin: 0px 10px;}
#contact .imprintlink{text-align: center;}
#contact .imprint p{font-size:60%;margin:4px 0px;}

#gallery {position:fixed;z-index: 100;width:0;height:0; background:rgba(30,30,30,.9);opacity: 0;overflow: hidden;transition: opacity .5s ease-in-out;}
#gallery.show {opacity: 1;top:45px;width:unset;height:unset;right:0;left:0;bottom:0;}
#gallery .closebtn {position: absolute;z-index: 5; top: 0px;     right: 0px;  cursor: pointer;  font-size: 150%;  background: rgba(0,0,0,.8);  padding: 2px 10px;  border-radius: 10px;}
#gallery .nextbtn {position: absolute;z-index: 5;top:50%;right:10px;cursor: pointer;    font-size: 150%;background: rgba(0,0,0,.8);  padding: 2px 10px;  border-radius: 10px;}
#gallery .prevbtn {position: absolute;z-index: 5;top:50%;left:10px;cursor: pointer;    font-size: 150%;background: rgba(0,0,0,.8);  padding: 2px 10px;  border-radius: 10px;}
#gallery .galleryContent {position: relative;width: 100%;height:100%;}
#gallery .galleryContent img {    position: absolute;  left: 50%;  right: 0;  top: 50%;  bottom: 0;  transform: translate(-50%,-50%); max-height: 100%;}

@keyframes loopColor {
    0% {
        background-color: rgba(0,0,0,0.2);
    }
        10%{
        background-color: rgba(0,0,0,0.4);
    }    
    
    100% {
        background-color: rgba(0,0,0,0.4);
    }
  }

@keyframes popInCenter {
    0% {
      left:50%;
      right:50%;
    }
    100% {
        left:0;
        right:0;
    }
  }

@keyframes popInRight {
    0% {
      left:100%;
      top:100%;
      opacity: 1;
    }
    100% {
        left:0;
        top:0;
        opacity: 1;
    }
  }

@media screen and (min-width: 992px) {
    #header #navtoggle{display: none;}
    #navigation {position: relative;float: left;  opacity: 1;height: 45px;left: 0;top: 0;bottom: 0;margin: -5px 0px;width: auto;}
    #navigation ul {margin:0;padding:0;}
    #navigation ul li{padding:0px 12px;float:left;border-bottom: none;}
    #navigation ul li a{font-size: 120%;}
    #home .listen {top:unset;bottom:0;}
    #home .upcoming {bottom:66px;}
    #band .sectionbody {background:url(../img/Bandfoto.jpg);background-repeat: no-repeat; background-size: cover;background-position: top center;}
}