/* slider z predch. faq */

.faqTema, .faqTema2, .faqTema3 {   
  position: relative;
  border-bottom: 2px outset #16b676;
  padding: 10px;
}

.active, .faqTema {
  background-color: transparent; 
}

.div1VofaqTema {
  width: 80%;    
}

.div2VofaqTema {
  width: 25%;    
}

.faqSipka {
  position: absolute;
  top: 50%;
  right: 25px;
}

.faqObsah {
  padding: 0 8px 0 8px; 
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.8s ease-out;
}

@media (max-width: 600px) {
    .faqObsah {
        padding: 0; 
    }    
}

/* ukoncenie z predch. faq */


.celyFaqBlok {
  padding: 8px;
  font-size: 17px;
}

.leftFaqBlok {
  padding: 20px;
  float: left;
  width: 20%; 
  border-right: 2px solid #16b676;
}

.rightFaqBlok {
  padding: 20px;
  float: left;
  width: 80%; 
}

/* 
p.ex4leftFaqBlok {
    font-weight: bold; 
  } */
  
/* Use a media query to add a break point at 800px: */
@media screen and (max-width: 800px) {
  .leftFaqBlok, .rightFaqBlok {
    width: 100%; 
  }
  .leftFaqBlok {
    height: 50px;
    padding: 15px;
    text-align: center;
    border-bottom: 2px solid #16b676;
    border-right: none;    
  }  
  p.ex4leftFaqBlok {
    display: inline;
    margin-right: 30px;
  }
  .rightFaqBlok {
    padding: 5px;   
  }       
}
  
  /* original: https://codepen.io/nikzane/pen/azOLORp */
  /* 
  Flexible Accordion Stylesheet
  Version: 1.0
  Author: Nik Zane
  Date: 2025-06-08

  Description:
  - Responsive accordion layout
  - Toggle between single and multiple open panels
  - Smooth animated triangle and content transitions
*/
.accordionFaq, .accordionFaq2, .accordionFaq3, .accordionFaq4 {
  max-width: 100%;
  margin: auto;
}
.accordionFaq-item, .accordionFaq2-item, .accordionFaq3-item, .accordionFaq4-item {
  border-radius: 0.5em;
  overflow: hidden;
  /* background: #2c2c2c; */
  background: #0d0d0d;  
  margin-bottom: 1em;
  padding-bottom: 10px;
}
.accordionFaq-header, .accordionFaq2-header, .accordionFaq3-header, .accordionFaq4-header {
  width: 100%;
  text-align: left;
  background: #171717;
  color: #fff;
  border: none;
  padding: 1em;
  font-size: 1.1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: 300ms;
}
.accordionFaq-header:hover, .accordionFaq2-header:hover, .accordionFaq3-header:hover, .accordionFaq4-header:hover {
  background: #202020;
}
.accordionFaq-header .titleVoFaq, .accordionFaq2-header .titleVoFaq, .accordionFaq3-header .titleVoFaq, .accordionFaq4-header .titleVoFaq {
  flex-grow: 1;
  font-size: 1.1em; 
  font-weight: normal;
}
.accordionFaq-header .triangle, .accordionFaq2-header .triangle, .accordionFaq3-header .triangle, .accordionFaq4-header .triangle {
  padding: 0.5em;
}
.accordionFaq-header .triangle, .accordionFaq2-header .triangle, .accordionFaq3-header .triangle, .accordionFaq4-header .triangle {
  transition: transform 300ms ease;
  opacity: 0.25;
}
.accordionFaq-header:hover .triangle, .accordionFaq2-header:hover .triangle, .accordionFaq3-header:hover .triangle, .accordionFaq4-header:hover .triangle {
  opacity: 0.5;
}
.accordionFaq-header.rotated .triangle, .accordionFaq2-header.rotated .triangle, .accordionFaq3-header.rotated .triangle, .accordionFaq4-header.rotated .triangle {
  transform: rotate(90deg);
  opacity: 1;
}
.accordionFaq-content, .accordionFaq2-content, .accordionFaq3-content, .accordionFaq4-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 400ms ease, opacity 400ms ease;
  padding: 0 1em;
  margin-bottom: 8px;     
}
.accordionFaq-content.show, .accordionFaq2-content.show, .accordionFaq3-content.show, .accordionFaq4-content.show {
  opacity: 1;
  padding: 1em;
}

.accordionFaqpage-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 100%;
  padding-bottom: 3em;
}

.tuAkoPouzivat {
  color: #16b676; 
  font-weight: bold;
}

.lavaCastPoziciaScreenu {
padding: 5px;
  float: left;
  width: 33%; 
}

.strednaCastPoziciaScreenu {
padding: 5px;
  float: left;
  width: 34%;
}

.pravaCastPoziciaScreenu {
padding: 5px;
  float: left;
  width: 33%; 
}


@media screen and (max-width: 1150px) {
  .lavaCastPoziciaScreenu {
    width: 50%; 
  }
  .strednaCastPoziciaScreenu {
    width: 50%; 
  }
  .pravaCastPoziciaScreenu {
    width: 50%; 
  }
}


@media screen and (max-width: 800px) {
  .lavaCastPoziciaScreenu, .strednaCastPoziciaScreenu, .pravaCastPoziciaScreenu {
    width: 100%;
  }
}

.figcaptionScreenu {
    font-size: 15px;
    color: #ccc;
    margin-top: 10px;
    line-height: 1.3;
}