/* CSS Document */

 @font-face {
   font-family: Raleway-Regular;
   src: url(fonts/Raleway-Regular.ttf);
}

html {font-family: Raleway-Regular;color:white;font-stretchsss:ultra-expanded;font-size:14px;overflow-x:hidden;}
body {
    background-color:#1a001b;
    color:white;
    margin:0;
    padding:0;
    font-size:17px;
    overflow-x:hidden;
}


#page-loader {
	position: relative;
	top:50%;
}

.loader {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto;
  background: url(../images/documents_logo.png) no-repeat;
  background-size:cover;


  
}




.ikona:hover {
    opacity:0.6;
}

ul {
    list-style-type:none;
}
 .active::before {  
    content:url(../images/documents_logo.png);
    margin-left:20px;
    position:absolute;
    top:-3px;
    left:0px;
  
    
    
 }

 #bg { z-index: -2;
transition: 0.3s all ease;


	
  /* Set up proportionate scaling */
  width: 100%;

  /* Set up positioning */
  position: fixed;
  bottom: -100px;
  left:0%;
}

nav ul {
  list-style-type:none;
  position:relative;
  margin-left:0;
  padding-left:0;
  font-size:20px;
}


nav ul li {
    margin-top:10px;
    margin-bottom:10px;
    width:15%;
    position:relative;
    padding-left:5%;
}

nav ul li:hover {
    cursor:pointer;
}

#jazyky {
    position:fixed;
    top:10px;
    right:30px;
    z-index:9999999;
}




#cz {
    position:absolute;
    left:-30px;
}

#en {
    position:absolute;
}

#cz:hover, #en:hover {
    cursor:pointer;
}

.sipka {
    display:none;
    }
    
.sipka:hover {
    cursor:pointer;
}



#logo {
    width:960px;
    margin-left:25%;
    margin-right:25%;
    margin-top:50px;
    margin-bottom:50px;
}

.logoclick {
    display:block;
}
active::after {  
        margin-left:40px;   
 }
 
 .menu {
    position:static;
    -webkit-transition: all 0.3s ease;
     transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
}


.panely {
    display:block;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    pointer-events:none;
}
.panel {
    width:20%;
    margin:0%;
    padding:0%;
    height:100%;
    position:absolute;
    top:0;
    
}

#panel0 {
  left:20%;
  background-color:rgba(255,255,255,0.1)
  
}

#panel1 {
  left:40%;
  background-color:rgba(255,255,255,0.15)
}

#panel2 {
  left:0%;
  background-color:rgba(255,255,255,0.05)
}

#panel3 {
  left:80%;
  background-color:rgba(255,255,255,0.15)
}

#panel4 {
  left:60%;
  background-color:rgba(255,255,255,0.1)
}


#polozka0 {
  left:20%;

  
}

#polozka1 {
  left:40%;

}

#polozka2 {
  left:0%;
  
}

#polozka3 {
  left:80%;
 
}

#polozka4 {
  left:60%;
 
}


.content {
    position:absolute;
    display:block;
    margin-left:20%;
    width:80%;
    height:calc(100% - 350px);
    padding:50px 30px;
    background-color:rgba(30,30,30,0.61);
    top:250px;
    overflow:scroll;
    overflow-x:hidden;   
}

.active {
    font-weight:600;
}

.obsah {
    margin-left:calc(6.25% - 30px);
    width:960px;
}

.content p {
    text-align:justify;
}

.mezera {
    border-bottom:0px solid white;
    width:90%;
    height:5px;
    margin: 50px 25px;
    float:left;
}

.konzert {
    width:30%;
    float:left;
    background-color:rgba(30,30,30,0.65) ;
    margin:15px;
    display:block;
    height:200px;
    padding-top:30px;
    
}


.konzert:hover {
    background-color:rgba(30,30,30,0.85) ;
}
.probehlo {
  float:left;
  display:block;
  width:100%;
}

.mistoakce, .datumakce {
    margin-bottom:20px;
    
}



.video-container {
	position:relative;
  width:100%;
  margin-right:10%;
	padding-bottom:53.25%;
	padding-top:30px;
	overflow:visible;
  margin-bottom:50px;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
  
}

.video-container iframe:hover {}


.soundcloud {
    margin-bottom:50px;
}

.kontakt li{
  margin-bottom:30px;   
}

.kontakt li a:hover {
    opacity:0.6;
}


.galerie {
    margin-top:50px
}

.obrazek-stred {
    margin-right:50px;
    margin-left:50px;
}

.obrazek {
    display:inline-block;
    -webkit-transition: all 1.5s ease;
     transition: all 1.5s ease;
    -moz-transition: all 1.5s ease;
    -o-transition: all 1.5s ease;
    -ms-transition: all 1.5s ease;
    margin-bottom: 30px;
}


.obrazek:hover {
    opacity:0.6;
    transform:scale(1.1);
}

.radek {
    margin-bottom:25px;
}


@media (max-width:1600px) {
 
.menu {
    margin-top:100px;
}

 .obsah{ width:84%;}
  .video-obsah  {width:60%;}
 
#logo {
    width:auto;
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 35px;
    margin-bottom: 20px;
}

.content {
    height: calc(100% - 260px);
    top: 160px;
}




 }
 
 
@media (max-width:1450px) {
    .obrazek-stred, .obrazek {
    margin:20px 8%;
    position:relative;

}


}


  
@media (max-width:1260px) {
    .obrazek-stred, .obrazek {
    margin:20px 6%;
    position:relative;

}


}





@media (max-width:1180px) {
 .active::before {  
    display:none;
      left:-35px;  
 }
 
  .active::after{  
    content:url(../images/documents_logo.png);
    margin-left:20px;
    position:absolute;
    top:-3px;
    left:142px; }
  
   .obrazek-stred, .obrazek {
    margin:20px 5%;
    position:relative;  
    
 }
 }
 
 
@media (max-width:1100px) {

  
   .obrazek-stred, .obrazek {
    margin:20px 4%;
    position:relative;  
    
 }
 }
 

@media (max-width:992px) {

 #bg { z-index: -2;
 /* Set rules to fill background */


	
  /* Set up proportionate scaling */
  width: 100%

  /* Set up positioning */
  position: absolute;
  bottom:0;
  left:0%;
}

 .active::before {  
    display:inline;  
 }
  .active::after {  
    display:none;  
 }

.hlavicka {
    height:80px;
    position:fixed;
    top:0;
    left:0;
    background-color:#1a001b;
    z-index:999;
    width:100%;
}

#logo {
    margin-top:15px;
    width:200px;
    display:block;
    margin-left:auto;
    margin-right:auto;
    position:fixed;
    margin:0 auto;
    padding:30px 30px;
    padding-bottom:15px;
    background-color:#1a001b;
    z-index:999;

}

nav ul li {
    margin-top:10px;
    margin-bottom:10px;
    width:100%;
    position:relative;
    padding-left:5%;
    padding-right:5%;
}

.konzert {
    width:90%;
    float:left;
    background-color:rgba(30,30,30,0.65) ;
    margin:5%;
    display:block;
    height:200px;
    padding-top:30px;
    
}

#polozka0 {
  left:0%;

  
}

#polozka1 {
  left:0%;

}

#polozka2 {
  left:0%;
  
}

#polozka3 {
  left:0%;
 
}

#polozka4 {
  left:0%;
 
}

#polozka5 {
  left:0%;
 
}

.panely {display:none}

.active::after {    
    right:30%; 
 }
 

 .sipka {
    display:block;
    z-index:999;
    width:40px;
    height:20px;
    position:fixed;
    top:65px;
    left:50%;
    overflow:hidden;
    background:url("../images/sipka.png");
    background-size:contain;
    transform: translateX(-50%);
     -webkit-transition: all 0.3s ease;
     transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
}

.otocena {
     transform: translateX(-50%) rotate(180deg);
}

.menu {
    position:fixed;
    margin-top:0;
    top:80px;
    left:0;
    z-index:999;
    background:rgba(0,0,0,1);
    width:100%;
    height:0%;
    padding-left:80px;
    overflow:hidden;
}

 
.content {
    top:100px;
    margin:0px;
    width:100%;
    height:calc(100vh - 80px);  
    padding-left:0px;
    padding-right:0px; 
    position:relative;
}

.obsah {
    width:100%;
    margin-left:0px;
   

    
}

.obsah-inner {
    width:calc(100% - 30px);
    position:relative;
    padding-left:15px;
    padding-right:15px;
  
}


.obrazek-stred, .obrazek {
    margin-bottom:30px;
    width:100%;
    display:block;
    position:relative;
    margin-left:0px;
    margin-right:0px;
}


.obrazek-stred img, .obrazek img {
    width:60%;
    display:block;
    margin-left:auto;
    margin-right:auto;
}



}