#popup{
  width: 30%;
  /*height: 30%;*/
  margin: 0 auto;
  display: block;
  background-color: white;
  z-index: 100;
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
}

/* #popup h3, p{
  color: black;
} */

#popup span{
  color: red;
  font-weight: bold;
}

.priloha img{
  width: 100%;
}

#bodyBand{
  background-image: linear-gradient(to right, #434343 0%, black 100%);
  width: 100%;
  height: 3000px;
  overflow-x: hidden;
}

#bandHeading{
  position: absolute;
  top: 50%;
  left: 50px;
  margin-top: -150px;
}

#bandHeading h1{
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 500%;
}

#bandHeading h3{
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 100%;
  text-align: left;
}

#bandHeading p{
  color: white;
}

#bandImg{
  position: absolute;
  top: 50%;
  right: 50px;
  /* height: 600px; */
  margin-top: -250px;
  width: 750px;
  max-width: 95%;
}

#kapela{
  position: absolute;
  top: 110%;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
}

.member{
  position: relative;
  width: 80%;
  /*background-color: green;*/
  margin: 25px auto 0 auto;
  height: 350px;
}

.member img.lefter{
  height: 100%;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.member img.righter{
  height: 100%;
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}

.member div{
  display: inline-block;
  width: 50%;
}

.member p{
  font-family:'Comfortaa', cursive;
  text-align: center;
  color: white;
}

.member h2{
  font-family: 'Montserrat', sans-serif;
  font-size: 200%;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 20px 0 20px 0;
}

.member h3{
  font-family: 'Montserrat', sans-serif;
  font-size: 150%;
}

body{
  font-family:'Comfortaa', cursive;
  color:white;
  padding:0;
  margin:0;
  text-align:center;
  background-image:url("../images/kapela2023-lower-height.jpg");
  background-position: top center;
  background-repeat:no-repeat;
  background-size:cover;
  background-attachment:fixed;
}

video{
  width: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -50;
}

nav{
  width:100%;
  height:60px;
  background-color:rgba(0, 0, 0, 0.5);
  padding:0;
  margin:0;
}
nav ul{
  width:1200px;
  height:60px;
  padding:0;
  margin:0 auto;
  z-index:15;
}
nav ul li{
  display:inline-block;
  float:left;
  text-align:center;
  margin:0;
  padding:0;
}

nav ul a:hover{
  text-decoration:none;
  display:block;
  color:yellow;
  padding:25px 25px;
  position:relative;
  top:2px;
}
img#logo{
  max-width:95%;
/*  width: 2000px;*/
  height:auto;
  z-index: 1;
  opacity: 0.5;
}
img#fb{
  position:absolute;
  top:20px;
  right:75px;
  width:2%;
  min-width:20px;
}
img#ig{
  position:absolute;
  top:20px;
  right:45px;
  width:2%;
  min-width:20px;
}
img#bz{
  position:absolute;
  top:20px;
  right:15px;
  width:2%;
  min-width:20px;
}
#uvod{
 max-width:95%;
  overflow-y:hidden;
  position:absolute;
  bottom:100px;
  left:0;
  right:0;
  margin:auto;
}
#uvod p{font-family:'Bevan', cursive;color:white;font-size:250%;text-align:center;margin:0;}
nav a{color:white;text-decoration:none;padding:25px 25px;margin:0;display:block;}
a{color:white;text-decoration:none;display:block;}
a#zobraz_pocitadlo{position:fixed;bottom:0;right:0;z-index:50;line-height:10px;background-color:#1E1616;border-radius:15px 15px 0 0;padding:10px;font-family:'Comfortaa', cursive;color:white;font-size:80%;}
a#zobraz_pocitadlo:hover + #pristupy{display:block;}
#pristupy{display:none;font-size:80%;position:fixed;bottom:30px;right:0;background-color:black;padding:10px;z-index:50;border-radius:15px;}
.karta{width:200px; height: 180px; background-color:rgba(0, 0, 0, 0.5);padding:0 0 10px 0;display:inline-block;position:relative;margin:2px; }
.karta h3{background-color:black;padding-top:5px;margin:0;width:100%;}
.karta h2{font-size:200%;padding:0;margin:20px 0 0 0;}
.karta h4{padding-top:0;margin-top:0;}
.karta h5{margin:0;padding:0;}
i{padding:0;margin:0 auto;position:absolute;bottom:5px;left:0;right:0;line-height:25px;}
#clanky{background-color:rgba(0, 0, 0, 0.5);padding:20px;max-width:80%;position:absolute;top:100%;left:0;right:0;margin:auto;}
#clanky h1{font-family:'Comfortaa', cursive;color:white;font-size:200%;margin-bottom:25px;}
#clanky p{font-family:'Comfortaa', cursive;color:white;font-size:100%;}
#clanky hr{width:80%;margin-top:80px;margin-bottom:80px;}
#clanky img{max-width:80%;}
#ins_comment{margin:20px 0;text-shadow:2px 2px 2px black;font-size:80%;}
/*#kapela{padding:20px;max-width:80%;margin:0 auto;}
#kapela p{font-family:'Comfortaa', cursive;color:white;font-size:100%;background-color:rgba(0, 0, 0, 0.5);padding:20px 0 20px 0;}
#kapela h1{;background-color:rgba(0, 0, 0, 0.5);padding:20px 0 20px 0;margin-bottom:-20px;text-shadow:2px 2px 2px black;}
#kapela h2{;background-color:rgba(0, 0, 0, 0.5);padding:20px 0 20px 0;text-shadow:2px 2px 2px black;}*/
/*#kapela img{position:relative;top:200px;right:300px;}
img#kapela{width:50%;}*/
table{border:1px solid white;padding:5px;background-color:rgba(0, 0, 0, 0.5);border-collapse:collapse;}
table tr{padding:30px 0;}
table th{border:1px solid white;background-color:rgba(0, 0, 0, 0.3);}
table tr:hover{background-color:rgba(0, 0, 0, 0.3);}
table td{border:1px solid black;}
#koncerty{width:100%;margin:0 auto;/*overflow-x:scroll;*/}
#koncerty p{font-family:'Comfortaa', cursive;color:white;font-size:100%;margin:20px auto;}
#malemenu a#hash{display:none;}
iframe{max-width:100%;}
#videa iframe{position:absolute;left:0;top:60px;width:100%;height:100%;}
#diskoobsah{width:95%;margin:0 auto;}
.CD{width:280px;height:540px;background-color:rgba(0, 0, 0, 0.5);box-shadow:5px 5px 5px black;margin:0 4% 50px 4%;text-align:center;position:relative;z-index:1;display:inline-block;}
.CD #nazevCD{background-color:white;color:#1E1616;box-shadow:5px 5px 5px black;text-align:center;height:80px;position:absolute;top:0;left:0;width:100%;}
.CD img{position:absolute;top:85px;right:0;width:100%;}
.CD #audio{position:absolute;top:410px;width:100%;}
.CD #audio audio{margin-top:10px;width:100%;}
.CD #rozbal{position:absolute;top:493px;text-align:center;width:100%;}
.CD #CDinfo{display:none;}
.CD #CDinfo p{padding:1px 0 0 0;line-height:1.2em;}
.CD #rozbal:hover #CDinfo{display:block;background-color:rgba(0, 0, 0, 0.5);width:100%;box-shadow:5px 5px 5px black;z-index:50;}
.CD #rozbal p{color: white;}
.CD hr{width:80%;}
#history{background-color:rgba(0, 0, 0, 0.5);width:90%;margin:50px auto;padding:50px;}
#videa h1{font-family:'Comfortaa', cursive;color:white;font-size:200%;margin-bottom:25px;}
videa p{font-family:'Comfortaa', cursive;color:white;font-size:100%;}
#videa iframe{max-width:100%;}
#detail_alba{text-align:center;}
#nahled_alba{display:inline-block;margin:0 auto;width:230px;}
div.nahled_alba{display:inline-block;margin:1px 1px;padding:5px;text-align:center;width:146px;height:146px;}
div.odsazeny_div{clear:both;padding-top:10px;margin:10px 0;}
#nahled{width:110px;text-align:center;background-color:black;border:1px solid black;padding:5px;}
#sipka img{background-color:none;border-style:none;}
#galerie img{width:90px;height:85px;overflow:hidden;display:inline-block;margin:0 auto;}
#galerie{text-align:center;margin:0 auto;}
#medialnipartner{width:95%;margin:0 auto;}
#sponzor{width:95%;margin:0 auto;}
#dalsipartner{width:95%;margin:0 auto;}
#spriznene{width:95%;margin:0 auto;}
.loga{margin:0 auto;width:80%;}
a.hl_hl_partner{margin:0 auto;}
a.hl_partner{display:inline-block;margin:0 10px;height:180px;}
a.partner{display:inline-block;height:180px;margin:0 10px;}
.nadpis{clear:left;}
h2.kontakt_nad{color:#1E1616;background-color:white;border:1px solid;border-radius:15px 15px 0 0;}
.kontakt{color:white;background-color:#1E1616;border:1px solid;border-radius:0 0 15px 15px;}
@media only screen and (max-width:1200px){#malemenu{width:100%;display:block;margin:0;padding-left:0;padding-right:0;}
#malemenu a#hash{display:block;}
nav ul ul{display:none;}
#malemenu:hover ul{display:block;width:100%;padding:0;margin:0 auto;position:absolute;top:60px;left:0;z-index:10;}
#malemenu:hover ul li{width:100%;background-color:rgba(0, 0, 0, 0.5);height:45px;}
}
@media only screen and (orientation:portrait){body{font-family:'Comfortaa', cursive;color:white;padding:0;margin:0;text-align:center;/*background-image:url("../images/web/pozadi-mobil.jpg");*/ }
img#logo{max-width:95%;height:auto;position:relative;top:80px;}
#history{background-color:rgba(0, 0, 0, 0.5);width:80%;margin:50px auto;padding:50px;}
/* img#kapela{width:90%;position:relative;top:100px;}
#kapela{padding:20px;max-width:80%;margin:0 auto;position:relative;top:-200px;} */
.member{
  margin: 160px auto 0 auto;
}
video{display: none;}
#uvod{
  height:195px;
  max-width:95%;
  overflow-y:scroll;
  position:absolute;
  bottom:100px;
  left:0;
  right:0;
  margin:auto;
}
}
@media only screen and (min-aspect-ratio:1/1) and (max-aspect-ratio:16/10){body{font-family:'Comfortaa', cursive;color:white;padding:0;margin:0;text-align:center;/*background-image:url("../images/web/pozadi-1ku1.jpg");*/}
img#logo{max-width:95%;height:auto;position:relative;top:60px;}
}
@media only screen and (max-width:823px){
  video{display: none;}
  .member{
    margin: 120px auto 0 auto;
  }
  .member:nth-of-type(odd) div{
    display: inline-block;
    width: 50%;
    position: absolute;
    right: 80px;
  }
  .member:nth-of-type(even) div{
    display: inline-block;
    width: 50%;
    position: absolute;
    left: 80px;
  }
}

@media only screen and (max-width:1352px){
  video{display: none;}
  .member{
    margin: 120px auto 0 auto;
  }
  #bandHeading{
    position: absolute;
    top: 50%;
    left: 50px;
    margin-top: -150px;
  }

  #bandHeading h1{
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 450%;
  }

  #bandHeading h3{
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 100%;
    text-align: left;
  }

  #bandImg{
    position: absolute;
    top: 50%;
    right: 50px;
    /* height: 500px; */
    margin-top: -250px;
    width: 635px;
  }
}

@media only screen and (max-width:1177px){
  video{display: none;}
  .member{
    margin: 120px auto 0 auto;
  }
  #bandHeading{
    position: absolute;
    top: 15%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 90%;
  }

  #bandHeading h1{
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 450%;
  }

  #bandHeading h3{
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: 100%;
    text-align: center;
    margin-top: -60px;
  }

  #bandImg{
    position: absolute;
    top: 45%;
    right: 0;
    left: 0;
    /* height: 500px; */
    margin: 0 auto;
    width: 800px;
  }
}

@media only screen and (max-width:607px){
  video{display: none;}
  .member{
    margin: 120px auto 0 auto;
  }

  #bandImg{
    position: absolute;
    top: 55%;
    right: 0;
    left: 0;
    /* height: 300px; */
    margin: 0 auto;
  }

  .member img.lefter{
    height: 100%;
    display: inline-block;
    position: absolute;
    top: 0;
    left: -20px;
    z-index: -1;
  }

  .member img.righter{
    height: 100%;
    display: inline-block;
    position: absolute;
    top: 0;
    right: -20px;
    z-index: -1;
  }

  #bodyBand{
    background-image: linear-gradient(to right, #434343 0%, black 100%);
    width: 100%;
    height: 3150px;
    overflow-x: hidden;
  }

  .member{
    position: relative;
    width: 98%;
    /*background-color: green;*/
    margin: 180px auto 0 auto;
    height: 350px;
  }

  #kapela{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
  }
}