#nabidka_cont { max-width:1200px; margin: 0 auto 6em auto }


#page_cont {max-width: 100% !important}



#top_media { margin: -1em 0 1em 0; }
#top_media2 { margin: -1em 0 0em 0; }

#top_media img { display: block; height: auto; width: 100% }

#cat_tree_cont { font-size: 180%; text-align: justify; -ms-text-justify: distribute-all-lines; text-justify: distribute-all-lines; width: 100% }
#cat_tree_cont:after { content: ''; display: inline-block; font-size: 0; line-height: 0; width: 100% }
#cat_tree_cont .cat-expand, #cat_tree_cont .cat-contract { display: none }
#cat_tree_cont .prop-cat { display: inline-block; *display: inline; margin-bottom: 1em; min-height: 50px; text-align: left; vertical-align: top; width: 32%; }
#cat_tree_cont .cat-heading, #cat_tree_cont .cat-sublist { margin-left: 20px }
#cat_tree_cont .cat-sublist { font-size: 80% }
#cat_tree_cont .cat-heading { font-weight: bold }
#cat_tree_cont .cat-link { text-decoration: none }
#cat_tree_cont a:hover { color: #F5D211; text-decoration: underline;}
#cat_tree_cont a { line-height: 50px; height:50px; }
#cat_tree_cont .prop-cat.cat0 { width: 100% }

#cat_tree_cont h2 { font-size :21px; padding-left:60px; display:inline-block;  }


    .box-baner{display:flex;width:auto; max-width:1200px; height: auto; background: linear-gradient(to right, var(--sting), #BC8B09);box-sizing: border-box; gap:0px;border-radius:15px;margin:0 auto}
    .tip-60 {display:flex;width:auto; max-width:1200px; height: 478px; background: linear-gradient(to right, var(--sting), #BC8B09);padding:0em 5em 0 5em; box-sizing: border-box; gap:0px;border-radius:15px;margin:0 auto}
    .box-baner a {text-decoration: none}   
    .tip60text{flex:3;padding: 0 30px;  align-content: center;}
    .tip60text p {font-weight:500}
    .tip60text p.bold{font-weight:bold}
    .tip60grafika{ flex:5;width:100% ;  overflow: hidden; display: flex; align-items: center;  justify-content: flex-end;  }
    .tip60grafika img { width: 100%; height: 100%; object-fit: contain;}






.banner {
    position: relative;
    /*background-image: url('../images/HERO.png'); /* Nahraďte vlastním obrázkem */
    background-size: cover;
    background-position: center;
    height: 50vh; /* Výška banneru */
	min-height: 600px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
	margin-bottom: 3em;
	/*border-radius: 20px;*/
}

.banner h2{
	font-size: clamp(1.5rem, 10vw, 3rem); 
	margin: 0.7em 0 0 0.7em;
	font-weight: bold;
	font-family:inter;
	line-height: 1em;
	letter-spacing: 3px;
}
.banner p{
	font-size: clamp(1.5rem, 10vw, 3rem); 
	margin: 0.7em 0 0 0.7em;
	font-family:inter;
	line-height: 0.9em;
	letter-spacing: -1px;
}

.banner-content { font-family:inter;   width: 100%;    height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 1rem; color: white;     box-sizing: border-box;}

.nadpis {
    align-self: flex-start;
}

.buttons {
    align-self: flex-end;
}

button {  background: #fff ;
    color: #000;
    border: 1px solid #fff;
    padding: 0.7rem 1.3rem;
    margin: 1.5rem  1.5rem 1.5rem 0;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
	font-weight: bold;
}





button a{text-decoration: none;}

button:hover {
    background: #FFCC00e3;border: 1px solid #fff
}

@media (max-width: 768px) {
    .banner {
        height: 30vh; /* Pro menší zařízení */
    }

    button {
        font-size: 0.8rem;
        padding: 0.3rem 0.8rem;
    	margin: 14px auto 1rem auto;
    }
}

/* slider swiper styly*/


 body #main .swiper {
      width: 100%;
      max-width: 1200px;
      height: 600px; /* Nastavíme výšku slideru */
      margin: 0 auto;
 	  margin-bottom: 4em;
 	  border-radius:20px
 	
    }
 body #main .swiper-slide {
      background-size: cover; 
      background-position: center;
      height: 100%; /* Výška je 100% výšky slideru */
 	
    }
    
    
.obrazkovy-blok {
  width: 100%;           /* blok se přizpůsobí šířce rodiče */
  max-width: 1200px;      /* volitelné, omezení max. šířky */
  margin: 0 auto;        /* vystředění bloku */
}

.obrazkovy-blok img {
  width: 100%;           /* obrázek se roztáhne na šířku bloku */
  height: auto;          /* výška se dopočítá automaticky – zachová se poměr */
  display: block;        /* odstraní případné mezery pod obrázkem */
  border-radius: var(--radius_velky);   /* volitelné – zaoblení rohů */
}
    
    
    
    
    
    
    
  #main .swiper-pagination {
      display: flex;
      justify-content: center;
      margin-top: 10px;

    }
   
    
 #main .swiper-pagination-bullet {
      background: #ffffff88;
      color: black;
      font-size: 14px;
      font-weight: bold;
      border: 1px solid black;
      border-radius: 15px;
      margin: 0 5px;
      cursor: pointer;
      transition: background-color 0.9s, color 0.9s;
 	  width: 22px;
      height: 22px;
      line-height: 22px;
      opacity: 1; /* Zajišťuje plnou viditelnost */
      margin: 0 5px;
    }
    
 #main .swiper-pagination-bullet-active {
      background-color: black ;
      color: white;
 	  border:1px solid var(--sting)
    }

  #main   .swiper-button-next,
   #main  .swiper-button-prev {
      color: white;
      background-color: black;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
   	  transition: all 0.3s ease;
    }

    .swiper-button-next {
      right: 10px;
    }

    .swiper-button-prev {
      left: 10px;
    }

    /* Přechod při najetí */
    #main .swiper-button-next:hover,
    #main .swiper-button-prev:hover {
      background-color:var(--sting);
      color: black;
      transition: all 0.3s ease;
    }


.banner p.malytext {font-size:15px; width: 40%;line-height: 1em;  letter-spacing: 1px;}
    
.banner p.malytext {
    font-size: clamp(0.9rem, 10vw, 1rem);
    margin: 7em 0 0 2.7em;
    font-family: inter;
    line-height: 1.2em;
    letter-spacing: 0.5px;
    color: #fff;
    width: 40%;
	background-color: #888888aa ;
	padding:1em;
	border-radius:10px;
}
	
	
	
.container_search{ display: flex;  justify-content: space-between;   align-items: center; flex-wrap: wrap; padding:0px }
.container_search h2{margin: 1em 0 }



#search_code .icon_search {
    background: transparent url(/images/bg_photo_control_black.png) no-repeat -23px 50%;
}



 
#videosection{
	background-color: #ffcb0525;
    flex-wrap:wrap;
    overflow:hidden;
	padding: 2em 0 0 0 ;
	
}


.section {
    display: flex; /* Flexbox pro uspořádání do řádku */
    align-items: center; /* Vertikální zarovnání na střed */
    gap: 10px; /* Mezera mezi videem a textem */
	max-width: 1200px;
	margin: 0 auto
}


#videosection .video{
    flex: 1; /* Video zabírá jednu část dostupného prostoru */
    width: auto; /* Maximální šířka videa */
	/*margin-left: 1.5em*/
	position:relative;
}


#videosection .video img{
  border-radius: 20px;
	width:100%;
	grid-column: 1 / -1;
    grid-row: 1 / -1;
	
}


#videosection .video .jmeno_pozice {
	position : absolute;
	bottom:20px; right:20px;
	background: rgba(100%, 100%, 100%, 0.8);
	backdrop-filter: blur(16px);
	border-radius: 10px;
	padding: 10px 20px;
}

#videosection .video .jmeno_pozice .jmeno {font-weight: bold;font-size: 130%}



#videosection .video {
    display: grid;
    place-items: center; /* Zarovná text na střed */
}

#videosection .video .text{
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px;
	
	
}


.video iframe {
    width: 100%;
    aspect-ratio: 16 / 9; /* Poměr stran videa */
    border: 0;
}


#videosection .text{
   
    flex: 1; /* Text zabírá stejný prostor jako video */
    max-width: 100%; /* Maximální šířka textu */	
	margin:0 auto;
	padding: 3em;
}

#videosection .text h2 {
	/*font-weight: bold;*/
	font-size: 2em;
	line-height: 1em;
	/*padding: 0.5em 1em;*/
	text-align: left;
	margin-bottom: 1em;
	
}
#videosection .text p {
	/*padding: 0.5em 1em*/
	color:#878787;
	margin-bottom: 1em;
	/*    text-align: left;*/
}



@media (max-width: 1400px) { 
#page_cont {  padding-top: 90px;}


.obrazkovy-blok {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;        /* vystředění bloku */
}

.obrazkovy-blok img {
    border-radius: 0px;
}

body #main .swiper {
    height: 600px;
    margin: 0 auto;
    margin-bottom: 4em;
	border-radius: 0px;
}
   .tip-60 { border-radius: 0px; max-width: 1400px;}

 
}
@media (max-width: 1200px) { 
   .tip-60 {width:100%; background: linear-gradient(to bottom, var(--sting), #BC8B09); overflow: visible; border-radius: 0px;}
   .tip-60 {flex-wrap: wrap; height: auto;padding:0}

}



@media (max-width: 878px) {
   #videosection .section {
        flex-direction: column; /* Na menších obrazovkách bude video nad textem */
    }
	.banner p.malytext {width: 80%;}

   #videosection .text {
        max-width: 100%; /* Text se roztáhne přes celou šířku */
   	    padding: 1em;
    }
 #videosection .video {
  margin: 0 0.3em;
    }
    .tip60text {flex: 1 1 100%;}
  
    
}

.dlazdice {
  display: flex;
 
  margin: 2em auto;
}
.nabidka_txt {display: none}

.prvni {
   flex: 1;
   max-width: 100%; 
   text-align: center;
}

#videosection  p span {
	color:var(--sting);
	font-size: 15px;
	text-align: center;
}

#videosection p span.velky {
	color:var(--sting);
	font-size: 35px;
	font-weight: bold
	
}
.druhy{
	color:#878787;
	font-size: 130%;
	/*padding-right :1em*/
	text-align: center;
}



#responsive-section {
	background-color:var(--sting_bg);
	padding: 6em 50px;
}


.responsive-section {
	max-width: 1200px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
	margin: 0 auto;
	background-color: #ffcb05;
	border-radius: 15px;
	/*padding:  0 20px;*/
}



.image-block, .text-block {
  flex: 1;
  display: flex;	
	
}

.text-block {
   margin: 20px 0;
	padding-left:3em;	
	flex-wrap: wrap;
	align-content: center

	
}

.text-block h2{
	font-size: 150%;
	color:#fff;
}

.image-block {
   
    text-align: right;
}



.image-block img {
    max-width: 100%;
    height: auto;
	display: block
}
/*
.cta-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #fff;
    color: #000;
    border: none;
    cursor: pointer;
    font-size: 16px;
    margin-top: 10px;
	border-radius: 4px;
}

.cta-button:hover {
    background-color: #0056b3;
}*/

/* Media queries pro responzivní zobrazení */
@media (max-width: 768px) {
    .responsive-section {
        flex-direction: column;
        align-items: center;
    }

    .text-block {
        text-align: center;
        margin:2em;
    	padding-left: 0;
    }

    .image-block {
        text-align: center;
    }

    .image-block img {
        max-width: 80%;
    }
}


#search_code {display:none; line-height: 2.5em; right: 1em; top: 0 ; margin-bottom: 0.5em}
#search_code label { height: 2.5em; line-height: 2.5em }
#search_code .code { background: var(--sting_bg);  padding: 0.5em 0.8em; ;border-radius:5px; border: 1px solid #000;font-size:80%;width: 7em;text-align: center}
#search_code .icon_search { background: transparent url('../images/search-alt-2.png') no-repeat ; border: none; cursor: pointer; margin-top: 1px; padding: 0.2em 0.5em; display:inline; width:24px;height:23px   }



@media only screen and (max-width: 1250px) {
    #main { padding: 0 0px !important; }
    .container_search {padding: 0 20px}
	
	
	
}
@media only screen and (max-width: 639px) {
    #responsive-section {padding: 6em 0px; }
	.responsive-section {width : 270px;  }
	
	
	
}