:root {


--fs-xl: clamp(1.7rem, 2vw + 2rem, 4rem);
--fs-h2: clamp(1.2rem, 1.7vw + 2rem, 2.7rem);
--fs-h3: clamp(1.1rem, 1.4vw + 0.7rem, 1.7rem);
--fs-h4: clamp(1.0rem, 1.2vw + 0.5rem, 1.4rem);
--fs-big: 2rem;
/* --fs-normal: 1rem; */
/* --fs-normal: clamp(0.8rem, 1.1vw + 0.2rem, 1.1rem); */
--fs-normal: clamp(0.9rem, 1.1vw + 0.2rem, 1.1rem);
--fs-button-text: clamp(1rem, 1.1vw + 0.2rem, 1.0rem);

--fs-parametrtext: 0.9rem;
--lh-parametrtext:1.5;

--fs-small: 0.8rem;

//line height
--lh-xl: 2;
--lh-h1: 1.1;
--lh-h2: clamp(1.5rem, 1.7vw + 2rem, 2.7rem);
--lh-h3: clamp(1.1rem, 1.4vw + 0.7rem, 1.4rem);
--lh-h4: clamp(1.0rem, 1.2vw + 0.5rem, 1.2rem);
--lh-big: 1;
--lh-normal: 1.5;
--lh-small: 1.2;

--menumobilecolor:#f0f0f0;


--cervena:rgb(200,0,0);
--cervenaA:rgba(200,0,0,0.8);
--zluta:#f97316;
--zlutatmava:#a93300;
--zelena:#22c55e;
--cervena:#fe4444;


--modra:rgb(4,129,219);
--grey:#475569;
--tmaveseda:#475569;
--svetleseda:#f1f5f9;
--seda:#94a3b8;
--footertext:#e2e8f0;
--cerna:#0f172a;
--text:#475569;
font-size:14px;
}


.productkeyword {
color:var(--seda);
font-size:var(--fs-small);
line-height:var(--lh-normal);
background-color: white;
padding:1px 7px;
border-radius:4px;
display: inline-block;
margin:0 2px 2px 0;
}




.productkeywordfavorite {
color:white;
font-size:var(--fs-small);
background-color: var(--zluta);
}



.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';    
}


.menujazyk {
position: absolute;
top:14px;
right:20px;

}

.jazykactual {
cursor: pointer;
padding:8px 0;
background-color: var(--seda);
color:white;
width:40px;
text-align: center;
display: inline-block;
box-sizing: border-box;
font-weight: bold;
text-transform: uppercase;
border-radius:4px;
font-size: 1rem;
line-height:1.5;
}

.jazykymenu {
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
width:40px;
text-align: center;
display: none;
position: absolute;
top:35px;
background-color: white;
padding:5px;
border-radius:0 0 5px 5px;
box-sizing: border-box;
}

.jazykymenu a {
font-size: 0.9rem;
line-height:1.5;

display: block;
text-transform: uppercase;
box-sizing: border-box;
padding:8px 0px;
width:100%;
text-align: center;
text-decoration: none;
}

.jazykymenu a:hover {
background-color: var(--svetleseda);
}

.menujazyk:hover .jazykymenu {
display: block;
} 

.drobecky ,.drobecky a {
color:var(--seda);
transition:all 200ms ease-in;
}

.drobecky a:hover {
color:var(--cerna);
}

.parametry {
width:100%;
margin:40px 0;
padding:0;
border-collapse: collapse;
border-spacing: 0;
}

.parametry tr td{
padding:5px 0;
font-size:var(--fs-parametrtext);
line-height:var(--lh-parametrtext);

border-bottom:1px solid var(--seda);
text-align: left;
}

.parametry tr:last-child td {
border:0;
}


.parametry tr td:first-child {
 width:1%;
    white-space:nowrap;
}


.parametry tr td:last-child {
text-align: right;
color:var(--tmaveseda);
}

.parametry tr td:nth-child(2) {
font-weight:bold;
}


.parametryikona {
color:var(--seda);
    font-family: 'Material Symbols Outlined';
    margin:0 5px 0 0;   
}



.contacttable {
width:100%;
margin:0;
padding:0;
border-collapse: collapse;
border-spacing: 0;
}


.contacttable tr td {
border-bottom:1px solid var(--seda);
padding-bottom:5px;
}

.contacttable tr:last-child td {
border-bottom:0;
}

.contacttable td:first-child {
width:200px;
}
.contacttable td:last-child {
width:calc(100% - 200px);
text-align: right;
padding-top:12px;
}

.contacttable td {
vertical-align: top;
margin:0;
padding:2px;
position: relative;
}



@media (max-width:500px) {
    .contacttable td {
        width:50%;
    }
    
.contacttable td:first-child {
width:50%;
}
.contacttable td:last-child {
width:50%;
}    
    
}

.ikonatext {
position: relative;
top:5px;
color:var(--seda);
margin:0 5px 0 0;
}

h3 .ikonatext {
  display: inline-block;
  padding: 10px 10px;
  margin: 0 10px 0 0;
  background-color: var(--seda);
  color: white;
  border-radius: 5px;
  font-weight: normal;
}


h2 .ikonatext {
  display: inline-block;
  padding: 10px 10px;
  margin: 0 10px 0 0;
  background-color: var(--zluta);
  color: white;
  top:-5px;
  border-radius: 5px;
  font-weight: normal;
}

.darkblock {
padding: 20px;
background-color: var(--grey);
color:white;
border-radius:10px;
margin:0 0 20px 0;
box-sizing: border-box;
min-height:200px;
}

.darkblock table td, .darkblock table td a, .darkblock table td p, .darkblock h2 {
color:var(--svetleseda);
}

@media (max-width:800px) {
.darkblock {
min-height:10px;
}
}

blockquote p {
color:var(--seda);
}

hr {
margin:5px 0;
padding:0;
border:0;
border-bottom:1px solid var(--seda);
}


/* koliduje s floatboxem
* , *:before, *::after {
box-sizing: border-box;
}*/

input, table, td, p {
box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  }

* {
margin: 0;
padding: 0;
}


img, picture, svg, video {
/* display:block; */
/* max-width:100%; */
}


input, textarea, button, select {
font:inherit;
}

body {
min-height:100vh;
background-color: white;
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: "Inter", sans-serif;

  }



body, p, td, li{
font-size: var(--fs-normal);
line-height: var(--lh-normal);
color:var(--text);
}


a {
color:var(--text);
}

img.revealme {
transform: scale(0.5);
transition: .65s ease;
display: inline-block;
position: relative;
}







h1 {
margin:0;
padding:2rem 0 1rem 0;
font-size: var(--fs-xl);
line-height:var(--lh-h1);
}

h1 em, h1 i {
  color: white;
  text-shadow: 1px 0px 0 var(--zluta), -1px 0px 0 var(--zluta), 0px 1px 0 var(--zluta), 0px -1px 0 var(--zluta), 1px 1px 0 var(--zluta), -1px 1px 0 var(--zluta), 1px -1px 0 var(--zluta), -1px -1px 0 var(--zluta);
  font-style: normal;
}



h2 {
font-size: var(--fs-h2);
line-height:var(--lh-h2);
padding:0;
margin:1rem 0;
display: block;
color:var(--cerna);
}




h3 {
font-size: var(--fs-h3);
line-height:var(--lh-h3`);
padding:0;
margin:1rem 0;
color:var(--cerna);
}

h4 {
font-size: var(--fs-h4);
line-height:var(--lh-h4);
padding:0;
margin:1rem 0;
color:var(--cerna);
}




.photogalleryimage {
width: calc(50% - 20px);
margin:5px;
aspect-ratio:1 / 1;
display:inline-block;
border-radius:10px;
position: relative;
}

.photogalleryimage:after {
content:'search';
font-size:2rem;
box-sizing: border-box;
padding:0.5rem 0 0 0;
text-align: center;
font-family: 'Material Symbols Outlined';
position: absolute;
left:calc(50% - 30px);
top:calc(50% - 30px);
width:60px;
height:60px;
background-color: var(--zluta);
color:white;
border-radius:50%;
transition: all 200ms ease ;
}

.photogalleryimage:hover:after {
background-color: var(--zlutatmava);
transform:scale(1.1);
}

.boxy3container {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:20px;
}

.boxy3 {
    padding:20px;
    box-sizing:border-box;
    position: relative;
    display:flex;
    flex-direction:column;
}




@media (max-width:800px) {
    .boxy3container {
        grid-template-columns:1fr;
        
    }
}



.boxyecosystem {
background-color: var(--svetleseda);
border-radius:10px;
padding-bottom:0;
overflow: hidden;
}

.boxyecosystem h3 {
margin:0;
padding:20px 0 5px 0;
}

.boxyecosystem .ecosystemcislo {
background-color: var(--zluta);
color:white;
border-radius:5px;
padding:10px 17px;
font-weight: bold;
display: inline-block;
}

.boxyecosystemstin 
{
width:100%;
height: 200px;;
position: absolute;
bottom:0;
left:0;

background:linear-gradient(to bottom, rgba(0,0,0,0),#e2e8f0);
}





.homeapplications {
width: 100%;
background-color: var(--svetleseda);
border-radius:10px;
margin:0 0 20px 0;
overflow:hidden;
}

.homeapplications1 {
width:50%;
box-sizing: border-box;
padding:20px 30px 20px 20px;
}

.homeapplications1 h3 {
border-bottom:1px solid var(--seda);
padding:0 0 20px 0;
margin:0;
}

.homeapplications1 blockquote {
border-left:5px solid var(--seda);

}
.homeapplications1 blockquote p {
margin:0 0 20px 0;
padding:0 0 0 20px;
}

.homeapplications1 .eco_benefit {
color: var(--zelena);
font-weight: bold;
}
.homeapplications1 .eco_benefit:before {
content:'add_circle';
font-family: 'Material Symbols Outlined';
margin:0 6px 0 0;;
top:3px;
font-weight:normal;
position: relative;
}

.homeapplications2 {
width:50%;
box-sizing: border-box;
}



@media (max-width:800px) {
.homeapplications td {
 display:block;
    width:100%;         
}
.homeapplications2 {
width:100%;
min-height:200px;
}
}





.menuapplications {
width: 100%;
border-radius:10px;
margin:0 0 50px 0;
overflow:hidden;
background-color: white;
}

.menuapplications td {
width:33%;
box-sizing: border-box;
padding:20px 20px 20px 20px;
vertical-align: top;
}

.menuapplications td p {

}

.menuapplications td p strong {
font-size:var(--fs-normal);
line-height:var(--lh-normal);
}


.h2application {
font-size: var(--fs-h3);
}

.h2application span {
font-family: 'Material Symbols Outlined';
display: inline-block;
padding:3px 10px;
margin:0 10px 0 0;
background-color: var(--zluta);
color:white;
border-radius:5px;
font-weight:normal;
}


h3 {
margin-bottom:0;
padding-bottom:0;
}

h3.menuapplicationsplus {
font-size:var(--fs-h4);
color:var(--zelena);
}


h3.menuapplicationsminus  {
font-size:var(--fs-h4);
color:var(--cervena);
padding-top:30px;
}

h3.menuapplicationsplus span {
font-family: 'Material Symbols Outlined';
display: inline-block;
padding:5px 10px;
background-color: #e0ffe0;
border-radius:5px;
margin:0 10px 0 0;
}

h3.menuapplicationsminus span {
font-family: 'Material Symbols Outlined';
display: inline-block;
padding:5px 10px;
background-color: #fff0f0;
border-radius:5px;
margin:0 10px 0 0;
}


.menuapplicationsplustext p {
font-style: italic;
color:var(--seda);
}

.menuapplicationsminustext p {
font-style: italic;
color:var(--seda);
}





@media (max-width:800px) {
.menuapplications td {
 display:block;
    width:100%;         
}

.menuapplications td {
width:100%;
box-sizing: border-box;
}

.menuapplications td.menuapplications1 {
}
.menuapplications td.menuapplications2 {

border-top:3px solid var(--svetleseda);

}

.menuapplications td.menuapplications3 {
min-height:200px;
}

.footersubmenutable td {
display:block;
padding:20px 0;
text-align: left;
}



}

.footer, .footer table td, .footer h2, .footer h3 {
color:white;
} 



.footersubmenutable {
margin:60px 0 30px 0;
}
.footersubmenutable td:first-child {
min-width:240px;
padding:0 20px 0 0;
box-sizing: border-box;
}

.footersubmenutable td a {
font-size:var(--fs-small);
margin:0 5px;
}



.footer p {
margin:0;
padding:0;
color:var(--footertext);
}

.footer a.mybutton {
color:white;
}

.footertable {
width:100%;
border-top:1px solid var(--seda);
border-bottom:1px solid var(--seda);
}

.footertable td {
vertical-align: top;
width:25%;
color:white;
box-sizing: border-box;
padding:50px 20px 30px 20px;
}

.footertable td.footertable1 {
border-right:1px solid var(--seda);
}
.footertable td h3 {
font-size: var(--fs-normal);;
line-height:var(--lh-normal);
margin:0;
padding:10px 0 9px 0;
}

.footerlogotext {
padding:30px 0 40px 0;
}

.footertable td a {
padding: 5px 0;
display: inline-block;
text-decoration: none;
position: relative;
color:var(--svetleseda);
}

.footertable td a:before {
content:'';
width:0%;
height:1px;
background-color: var(--svetleseda);
position: absolute;
left:0;
bottom:0;
transition:all 200ms ease-in;
}

.footertable td a:hover:before {
width:100%;
}

.footertable td.footertable1 {
padding-left:0;
}

table td a.footer_social-link {
line-height:0;
font-size:0;
width:40px;
height:40px;
padding:0;
margin:0 5px 0 0;
overflow: hidden;
background-color: rgba(255,255,255,0.1);
border:1px solid rgba(255,255,255,0.3);
border-radius:5px;
display: inline-block;
position: relative;
transition:top 200ms ease-in, filter 400ms ease;
}

table td a.footer_social-link:before {
display: none;
}

table td a.footer_social-link .icon_default {
position: absolute;
width:25px;
height:25px;
left:8px;
top:7px;
transition:all 200ms ease-in !important;
}

table td a.footer_social-link .icon_hover {
transition:all 200ms ease-in !important;
position: absolute;
width:25px;
height:25px;
left:-48px;
top:7px;
}

table td a.footer_social-link:hover .icon_default {
left:48px;
}

table td a.footer_social-link:hover .icon_hover {
left:8px;
}



table td a.footer_social-link:hover {
top:-7px !important;
}

.no-delay {
    transition-delay: 0ms;
}


table.footertable td.footertable1 {
max-width:200px;
}

table.footertable td.footertablevpravo {
width:100%;
}



@media (max-width:1000px) {

table.footertable td.footertable1 {
max-width:250px;

}

table.footertable td.footertablevpravo {
width:calc(100% - 250);
}

table.footertable td.footertablevpravo td {
width:100%;
display:block;
}


table.footertable td.footertable3,table.footertable td.footertable4 {

padding-top:0;
}

}
@media (max-width:700px) {

.footer .div50vlevo, .footer .div50vpravo {
text-align: center !important;
} 

table.footertable td.footertable1,
table.footertable td.footertablevpravo {
 display:block;
    width:100%;      
    border-right:0;
    padding-left:0;   
}

table.footertable td.footertable1 {
width:100%;
max-width:100%;
border-bottom:1px solid var(--seda);
}


table.footertable td.footertable2 {
padding-top:0;
}

table.footertable td {
    padding-left:0;
}

.footertablevpravo td.
{
border-top:1px solid var(--seda);
}


}










.custom-map-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background-color: var(--zluta);
  border: 3px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  z-index: 5;
}


.productcontainer{
    display:flex;
    align-items:center;      /* vertikálně na střed */
    justify-content:flex-start; /* doleva */
    width:100%;
    gap:50px;                /* mezera mezi boxy */
    padding:40px 0;
    
}

.productbox{
    flex:1;
    min-width:0;
}
    .productboximage {
    order:-1;
    }

@media (max-width:600px){

    .productcontainer{
        flex-direction:column;
        align-items:stretch;
    }

    .productbox{
        width:100%;
    }
    
        .productboximage {
    order:2;
    }


}


.produktobrazek {
aspect-ratio:1 / 1;
width:100%;
border-radius:10px;
margin-bottom:10px;
position: relative;
display: block;
transition:top 300ms ease-in !important;
top:0;
box-sizing: border-box;
padding:10px;
}

.produktobrazek:hover {
top:-10px;
}

.producttitle {
text-align: left;
font-size:var(--fs-h3);
line-height:var(--lh-h3);
color:var(--cerna);
padding:10px 0;
font-weight: bold;
}

.mybuttonproduct {
background-color: white;
box-sizing: border-box;
color:var(--cerna);
text-align: center;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
margin:10px 0px;
padding:10px 20px;
border-radius:5px;
font-weight: 600;
display: block;
position: relative;
transition:top 300ms ease-in !important;
top:0;
font-size:var(--fs-button-text);
border:1px solid var(--seda);
}

.mybuttonproduct:hover {
top:-4px !important;
background-color:#f5f5f5;
}


.products {
position: relative;    display:grid;
grid-template-columns:repeat(3, 1fr);
gap:60px;
padding:50px 0;
}

.product {
text-decoration: none;    
box-sizing:border-box;
display:flex;
flex-direction:column;
}



@media (max-width:900px){
    .products{
        grid-template-columns:repeat(2, 1fr);
    }
}

@media (max-width:600px){
    .products{
        grid-template-columns:1fr;
    }
}








.QAotazka {
border:1px solid black;
padding:5px 15px;
border-radius:20px;
margin:10px 0;
font-weight:bold;
font-size:var(--fs-h3);
}
.QAotazka p {
margin:0;
padding:0;
}

.QAotazka .QAnadpis {
display: block;
padding-right:30px;
position: relative;
cursor: pointer;
}
.QAotazka .QAsipka {
width:10px;
height:10px;
position: absolute;
top:15px;
right:5px;
transform:rotate(135deg);
border-top:3px solid black;
border-right:3px solid black;
transition:200ms all ease-in;
}

.QAotazka .QAsipkaOtoceno {
transform:rotate(-45deg);
}

.QAodpoved {
font-weight:normal;
font-size:var(--fs-normal);
margin:0 0 10px 0;
display:none;
border-radius:20px;
padding:5px 0px;
}

.QAotazka p {
margin:0;
padding:10px 0 10px 0;
}

.hlavniobsah  ul, .hlavniobsah  ol {
margin:10px 0 24px 0;
padding: 0 0 0 25px;
}

ul li::marker{
    color:var(--zluta);
}


.hlavniobsah ul li, .hlavniobsah ol li {
margin:10px 0;
padding:0;
}


.hlavniobsah li {
margin-left:30px;
}





.mybutton {
box-sizing: border-box;
background-color: var(--zluta);
color:white;
text-align: center;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
margin:10px 5px;
padding:10px 20px;
border-radius:5px;
font-weight: 600;
display: inline-block;
position: relative;
padding-right:4rem;
transition:top 100ms ease-in !important;
top:0;
font-size:var(--fs-button-text);
}

.mybutton:hover {
top:-3px !important;
}

.mybutton .buttonicon {
overflow: hidden;
width:2rem;
height:2rem;
display: inline-block;
background-color: rgba(0,0,0,0.15);
position: absolute;
margin:0 0 0 10px;
top:7px;
right:1rem;
line-height: 1rem;
transition:all 200ms ease-in;
}

.mybutton:hover .buttonicon {
transform:rotate(90deg);
}

.mybutton .buttonicon .icon_hover {
transition:all 200ms ease-in;
height:1.5rem;
width:1.5rem;
position:absolute;
left:-2.25rem;
top:0.25rem;
}


.mybutton:hover .buttonicon .icon_hover {
left:0.25rem;
}

.mybutton .buttonicon .icon_default {
transition:all 200ms ease-in;
height:1.5rem;
width:1.5rem;
position:absolute;
left:0.25rem;
top:0.25rem;
}
.mybutton:hover .buttonicon .icon_default {
left:2.1rem;
}



.mybuttonwhite {
border:1px solid var(--tmaveseda);
background-color: white;
color:var(--cerna);

}





.homebutton {
background-color: var(--zluta);
color:white !important;
padding:3px 16px;
text-decoration: none !important;
display: inline-block;
border-radius:5px;
transition:all 200ms ease-in;
}
.homebutton:hover {
transform:scale(1.05);
}

.homebuttongrey {
background-color:#a0a0a0;
color:white !important;
padding:3px 16px;
text-decoration: none !important;
display: inline-block;
border-radius:5px;
transition:all 200ms ease-in;
}
.homebuttongrey:hover {
transform:scale(1.05);
}




.pagecounter a {
background-color: var(--zluta);
color:white !important;
padding:3px 16px;
text-decoration: none !important;
display: inline-block;
border-radius:5px;
transition:all 200ms ease-in;
}

.pagecounter a:hover {
transform:scale(1.05);
}


.pagecounter a.actual {
background-color: var(--zluta);
color:black;
}

/*obrazkove podzadi*/
.hlavniobsahobrazek ,
/* barevne pozadi*/
.hlavniobsahsablona0, .hlavniobsahsablona1, .hlavniobsahsablona2, .hlavniobsahsablona3
{
padding:70px 0;

box-sizing:border-box;
margin:20px;
border-radius:10px;
}

.hlavniobsahsablona0 {
background-color: white;
 }

.hlavniobsahsablona0 h1 {
color:var(--cerna);
}
 
.hlavniobsahsablona0 p {}
 

.hlavniobsahsablona1 {background-color:var(--svetleseda);}


.hlavniobsahsablona2 {background-color:grey;}
.hlavniobsahsablona2 p {color:white;}
.hlavniobsahsablona2 h2 {color:white;}
.hlavniobsahsablona2 h3 {color:white;}
.hlavniobsahsablona2 a {color:white;}
.hlavniobsahsablona2 li::before {color:white;}
.hlavniobsahsablona2 li {color:white;}

.hlavniobsahsablona3 {background-color:var(--zluta);}
.hlavniobsahsablona3 p {color:white;}
.hlavniobsahsablona3 h2 {color:white;}
.hlavniobsahsablona3 h3 {color:white;}
.hlavniobsahsablona3 a {color:white;}
.hlavniobsahsablona3 li::before {color:white;}
.hlavniobsahsablona3 li {color:white;}


.hlavniobsahobrazek {position:relative;

}
.hlavniobsahobrazek p {}
.hlavniobsahobrazek a {}

.hlavniobsahobrazekoverlay {
position: absolute;
left:0;
top:0;
height:100%;
width:100%;
filter: blur(4px) grayscale(0%) opacity(30%);
}



.homeboxcolorbg {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
opacity: 0.1;
filter: grayscale(100) blur(1px);
overflow:hidden;

}




.homeboxcolor1 {
position: relative;
background-color:var(--modra);
//linear-gradient(to right, rgba(0,0,00,1),rgba(200,200,200,0.8),rgba(0,0,0,1));
color:white;
padding:0px 0;
margin:0px 0 0 0;
/* border-left:10px solid var(--modra); */
box-sizing:border-box;
}

.homeboxcolor1 p, .homeboxcolor1 h2 {
color:white;
}


.homeboxcolor2  {
margin:0px 0 0 0;
position: relative;
padding:0px 0;
background-color:white;
color:black;
/* border-right:10px solid var(--zluta); */
box-sizing:border-box;
}



/* flex START */
.flex-container h2 {
padding:0 0 10px 0;
margin:0;
}

.flexdiv33container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.flexdiv33 {
  flex: 1 1 0;
  min-width:200px;
}


.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center; 
  }

.flex-item2 {
  width: 50%;
  margin: 0px;
  position: relative;
  overflow: hidden;
  padding:60px 20px;
  box-sizing: border-box;
}

.flex-item3 {
  width: 33%;
  margin: 0px;
  text-align: center;
}
.flex-item4 {
  width: 25%;
  margin: 0px;
  text-align: center;
}

.flexpaddingleft {
padding:30px 20px 30px 40px;
text-align: left;
max-width:600px;
box-sizing: border-box;
margin:0 0 0 auto;
}

.flexpaddingright {
padding:30px 40px 30px 20px;
text-align: left;
max-width:600px;
box-sizing: border-box;
margin:0 auto 0 0;
}


.flex-image  {
min-height: 400px;

margin: 0;
box-sizing:border-box;
min-width:400px;

transition:200ms all ease-in;
}

.homepageboxypadding {
padding:0px 0px;
}

.flexitem4smallholder {
max-width:200px;
font-size:12px;
margin:0 auto;
}

.flexitem4smallholder strong {
font-size:35px;
background: -webkit-linear-gradient( #00c8aa,#00a88a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
font-weight:bolder;

}

.flexitem4smallholder p {
padding:0;
margin:0;
}
/* flex END */




iframe {
/* youtube iframe */
width:100%;
height:auto;
aspect-ratio:3/2;
}








p {
margin:0;
padding:10px 0 10px 0;
}


 img {
  border: none;
 }




 body {

 }



.div30vlevo {
float:left;
width:calc(100% / 3);
}



.div50vlevo {
float:left;
width:48%;
}

.div50vpravo {
float:right;
width:48%;
height:100%;
}





img.revealme {
transform: scale(0.5);
transition: .65s ease;
}

.textimage_right {
width:40%;
max-width:400px;
float:right;
margin:0 0px 10px 20px;
}


.textimage_left {
width:40%;
max-width:400px;
float:left;
margin:0 20px 10px 0;
}


.textimage {
border-radius:10px;
width:100%;
margin:0 auto 10px auto;
display: block;
}


.textimage169 {
width:90%;
height:300px;

margin:0 auto;
}



.revealmeleft
{
 opacity:0;
 position: relative;
 left:-300px;
 transition: 1s ease;
}

.revealmeright
{
 opacity:0;
 position: relative;
 left:300px;
 transition: 1s ease;
}



.revealmebottom
{
 opacity:0;
 position: relative;
 top:300px;
 transition: 1s ease;
}


.revealme2 {

}
.revealme2blur {
 top:30px;
 filter:blur(10px);
 position: relative;
 transition:  transform 1s ease,
 top 1s ease,
 filter 1s ease,
 opacity 1s ease;
 
 opacity:0;
}




.fadeinauto {
        -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}




.hidemobile {
display: block;
}

.showmobile {
display: none;
}
.hidemobilemenu {
display: block;
}

.showmobilemenu {
display: none;
}


#logo {
position: absolute;
left:20px;
top:15px;
display: inline-block;
z-index:99;
text-decoration: none;
width:100%;
max-width:150px;
height:35px;
color:black;
}
#logo svg {
width:100%;
}

#logo span {
display: none;
}



.mobilemenu {

width:32px;
height:28px;
position: absolute;
top:20px;
right:80px;
}



.mobilemenu span,.mobilemenu:before,.mobilemenu:after {
background-color:black;
}



.mobilemenu span {
transition:all 100ms ease;
content:'';
position: absolute;
top:12px;
left:0;
width:32px;
height:3px;
border-radius:4px;
}

.mobilemenu:before {
transition:all 200ms ease;
content:'';
position: absolute;
top:0;
left:0;
width:32px;
height:3px;
border-radius:4px;
}

.mobilemenu:after {
border-radius:4px;
transition:all 200ms ease;
content:'';
position: absolute;
bottom:0;
left:0;
width:32px;
height:3px;
transform:rotate(0deg);
}



.mobilemenu.fadeOut:after {
transform:rotate(-40deg);
bottom:12px;
height:3px;
}

.mobilemenu.fadeOut:before {
transform:rotate(40deg);
top:12px;
height:3px;
}

.mobilemenu.fadeOut span {
opacity:0;
}



#menum {
z-index:99999;
width:100%;
display:none;
box-sizing:border-box;
padding:20px 20px 10px 20px;
position: relative;
top:60px;
max-height:calc(100vh - 70px);

left:0;
background-color: white;
overflow: hidden;
overflow: auto;
max-height:95hv;
/* border-bottom:3px solid var(--modra); */
box-shadow: 0px 20px 20px rgba(0,0,0,0.5);
}


#menum ul li,#menum ul ul li {
list-style: none;
text-align: left;
}

#menum ul li a {
color:black;
display: block;
padding:10px;
text-decoration: none;
font-size:16px;
overflow: hidden;
}

#menum ul li a:hover,#menum ul ul li a:hover {
background-color:var(--zluta);
color:black;
border-radius:4px;
}

#menum ul li a.actual {
background-color:var(--zluta);
color:white;
border-radius:4px;
}

#menum ul li li a.actual {
background-color:black;
color:white;
}

#menum ul ul li a {
font-size:14px;
color:black;
overflow: hidden;
display: block;
background-color:#f0f0f0;
padding:8px 8px 8px 20px;
text-decoration: none;
}

#menum ul , #menum ul ul, #menum ul li, #menum ul ul li {
padding:0;
margin:0;
}

#menu #menum ul li {
display: block;
}


 .holder {
  max-width: 1200px;
  width:100%;
  margin: 0 auto;
  text-align: left;
  position: relative;
 }
.holderin {
padding:0 20px;
}








 #menudiv {
 position: fixed;
 text-align: left;
 top:0;
 width:100%;
 height:60px;
 background-color:white;

 }
 
 
 
 
 #menudivlogin {
top:60px;
position: fixed;
 text-align: left;
 box-sizing: border-box;
 width:100%;
 height:20px;
  }
#menudivlogin .holder {
 height:20px;
padding: 0 ;
margin:0 auto;
}


 .menudivpodstin {
position: absolute;
top:70px;
left:0px;

height:10px;
width:calc(100%);
 }


.menudivloginin {
position: absolute;
background-color: rgba(0,0,0,0.4);
top:0px;
left:0px;
height:20px;
width:calc(100%);

font-size:var(--fs-small);
line-height:var(--lh-small);
box-sizing: border-box;
padding:3px 20px 0 0;
text-align: right;
}

.menudivloginin,.menudivloginin a {
color:#c0c0c0;
}
.menudivloginin .holder {
text-align: right;
}

.menudivpodstin2 {
position: absolute;
top:20px;
left:0px;
background:linear-gradient(to bottom, rgba(0,0,0,0.4),rgba(0,0,0,0));
height:10px;
width:calc(100%);
 }







 #menu {
 position: absolute;
 right:90px;
top:16px;
letter-spacing: 1px;
 }

.h1box {
box-sizing: border-box;
border-radius:10px;
overflow: hidden;
padding:10vh 20px 10vh 20px;
position: relative;
margin:20px;
font-size:17px;
}


.h1boxstin {
background:linear-gradient(to bottom, rgba(0,0,0,0),var(--tmaveseda));
height: 50%;
bottom:0;
left:0;
position: absolute;
width:100%;
}


.h1boxstin2 {
background:linear-gradient(to bottom, rgba(0,0,0,0),#e2e8f0);
height: 50%;
bottom:0;
left:0;
position: absolute;
width:100%;
}



.h1boxfotka {
width:100%;
height:100%;
top:0px;
left:0;
position: absolute;
opacity:1;
display: inline-block;
}

.h1boixfotkaoverlay {
background-color: #0f172a80;
position: absolute;top:0;
left:0;
width:100%;
height:100%;
}


.h1boixfotkakruh {
width: 88svw;
  position: absolute;
  inset: 50% 0% auto 50%;
  transform: translate(-50%,-50%);
}


.h1boxfotkain {
width:100%;
height:100%;
position: absolute;
display: inline-block;
left:0;
top:0;
transform:scale(0.5);
}

.revealmezoom {
transform:scale(0.49);
}


.h1boxinner,.h1boxinnerbarva, .h1boxinnerbarva2 {
width:100%;
height:100%;
top:0;
left:0;
position: absolute;
}

.h1boxinnerbarva {
background:var(--tmaveseda);
padding:20vh 0 20vh 0px;
color:white;
}

.h1boxinnerbarva2 {
background:var(--svetleseda);
padding:20vh 0 20vh 0px;
color:var(--cerna);
}


.h1boxtextbarva, .h1boxtextbarva2 {
text-align: center;
max-width:700px;
margin: 0 auto;
}

.h1boxtextbarva, .h1boxtextbarva p {
color:white;
}

.h1boxtextbarva2, .h1boxtextbarva2 p {
color:var(--cerna);
}


.h1boxtextbarvahero, .h1boxtextbarvahero p {
color:var(--cerna);
max-width:600px;
width:60%;
}


.herotable {
width:100%;
}


.heroimage {
width:45%;
max-width:400px;
text-align: center;
position: relative;
}

.heroimage .circle_wrap {
width:85%;
transform:scale(1);
color:var(--seda);
top:-200px;
left:0;
margin:0 0 0 40px;
opacity:0;
transition: transform 1s ease, top 1s ease, filter 1s ease, opacity 3s ease;
}

.hero_robot {
background:url(hero_image.webp) no-repeat center center;
background-size: contain;
width:100%;
height:100%;
position: absolute;
top:100px;
left:0;
transform:scale(2);
}



.heroanimace {
aspect-ratio:1 / 1;
width:100%;
max-width:400px;
margin:0 auto;
}

@media (max-width: 800px) {

.herotable td {
display:block;
width:100%;
max-width: 100%;
}
.h1boxtextbarvahero p {
display:block;
width:100%;
max-width: 100%;

}

.downloadbox td:first-child {
display:none;
}

}


.downloadbox {
width:100%;
box-sizing: border-box;
padding:10px;
border-radius:10px;
background-color: white;
margin-bottom:20px;
}

.downloadbox td {
padding:0;
}

.downloadbox td:first-child {
text-align: center;
background-color: var(--svetleseda);
border-radius:4px;
white-space: nowrap;
padding:0 15px;
}

.downloadbox td:last-child {
text-align: right;
white-space: nowrap;
}

.downloadbox td:nth-child(2) {
width:100%;
box-sizing: border-box;
padding:0 15px;
font-size:var(--fs-small);
line-height:var(--lh-normal);
}

.downloadbox td:nth-child(2) strong, .downloadbox td:nth-child(2) b {
display:block;
border-bottom:1px solid var(--seda);
font-size:var(--fs-normal);
line-height:var(--lh-normal);
margin-bottom:4px;
}



 #page {
  padding:50px 0 0 0;
  margin:0;
 }
 #pagehomepage {
  padding:0px 0 0 0;
 }


.darujte {
margin-top:40px;
  background-color:var(--modra);
  padding:20px;
  color:var(--zluta);
  border-bottom:1px solid #454545;
}

 .darujte p  {
font-size:var(--fs-small);
line-height:var(--lh-small);
 color:var(--zluta);
}

.darujte a {
font-size:var(--fs-normal);
line-height:var(--lh-normal);
background-color: var(--zluta);
color:var(--modra);
padding:4px 20px;
border-radius:5px;
text-decoration: none;
margin:0 0 0 20px;
transition:all 100ms ease-in;
display:inline-block;
}
.darujte a:hover {
transform:scale(1.05);
}



 .footer {
  background-color:var(--grey);
  padding:40px 20px 20px 20px;
  color:white;
  margin:0 20px 20px 20px;
  border-radius:10px;
 }

 .footer a, .footer p {
font-size:var(--fs-normal);
line-height:var(--lh-normal);
color:var(--footertext);
}




#grid-container a {
background:url('/_tpl/default/preload.gif') no-repeat center center;
}

.grid-item {
display: inline-block;
}
 .grid-item:hover {
background-color: #d0d0d0;
 }


.grid-item img {
z-index: 1;
border-radius:10px;
transition:transform 200ms ease-in
}

.grid-item img:hover {

transform:scale(1.05);
}



/* zprava */

 .zprava {
width:calc(100% / 3 - 10px);
float:left;
margin:5px;
text-align: left;
text-decoration: none;
box-sizing: border-box;
height:300px;
}

.zpravadatum {
font-size:var(--fs-small);
line-height:var(--lh-small);
}


.zpravain {
height:100%;
width:100%;
box-sizing: border-box;
display: block;
position: relative;
overflow: hidden;
}

.zpravaobrazek {
position: absolute;
left:0;
top:0;
width:100%;
height:100%;
transition:300ms all ease;
}

.zprava:hover .zpravaobrazek {
transform:scale(1.06);
}

.zpravaobrazeklogo {
background:url('defaultlogo.svg') no-repeat center center;
background-size: contain;
position: absolute;
left:0;
top:0;
width:100%;
height:100%;
}

.zpravavnitrek {
}

.zpravanadpis {
font-weight: bold;
display: block;
}

.zpravatext {

position: absolute;
bottom:0;
left:0;
background-color:var(--cervenaA);
color:white;
width:100%;
padding:10px;
box-sizing: border-box;
}




 .clearer {
  clear: both;
 }


.contactformular {
padding:20px;
background-color: var(--svetleseda);
border-radius:10px;
}



.contactformular input, .contactformular textarea, .contactformular select {
border:1px solid var(--seda);
box-sizing: border-box;
font-family: "Inter", sans-serif;
font-size:var(--fs-normal);
line-height:var(--lh-normal);
padding:5px 8px;
width:100%;
margin:5px 0 20px 0;
border-radius:3px;
background-color: white;
}
.contactformular input::placeholder, .contactformular textarea::placeholder {
color:var(--seda);
}

.contactformular input:focus, .contactformular textarea:focus, .contactformular select:focus {
outline:1px solid var(--zluta);
border:0;
}

.contactformular label {
font-size:0.9rem;
}

.formulartable {
width:100%;
border-collapse: collapse;
border-spacing: 0;
}



.formulartable td:first-child {
padding-right:10px;
}

.formulartable td:last-child {
padding-left:10px;
}

@media (max-width:500px) {
    .formulartable td {
        display:block;
        padding:0 !important;
        width:100% !important;
    }
}



.article_keywords {
background-color: #e0e0e0;
padding:5px;
margin:10px 0 10px 0;
}






.r3d {
margin:0;
padding:0;
line-height: 1;
text-align: right;
display: block;
line-height:var(--lh-small);
font-size: 12px;
}

.r3d a {
text-decoration: none;
font-size: 12px;
line-height:var(--lh-small);
}

.r3d a:hover {
color:white;
}


.cookiemessage {
line-height:var(--lh-small);
color:#a0a0a0;
font-size: 12px;
margin:0;
padding:0;
display: block;
}

.procleny {
line-height:var(--lh-small);
color:#f0f0f0;
font-size: 12px;
margin:0;
padding:0 0 20px 0;
display: block;
}
.procleny a {
color:white;
}




.bxslider,.bxsliderholder,.centered-div  {
padding:0;
margin:30px 0 0 0;
height:60vh;
box-sizing: border-box;
display: block;
}

.bxslider li {
-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}




.bxsliderholder,.bxslider {
background-color: black;
}

.centered-div {
background-color: rgba(0,0,0,0);;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top:-30px;
    left:0;
    width:100%;

}

.centered-div h1 {
color:white;
text-shadow: rgba(0,0,0,0.85) 0px 2px 10px, rgba(0,0,0,0.85) 0px 2px 5px, rgba(0,0,0,0.85) 0px 2px 20px;
}






/* LOGIN FORM */


.loginform {
background-color: rgba(0,0,0,0.1);
max-width:500px;
width:100%;
padding:20px;
border-radius:10px;

margin:40px auto 40px auto;
box-sizing:border-box;
text-align: left;

}

.loginformContainer {
display: flex;
    flex-wrap: wrap;
gap:10px;
box-sizing:border-box;
}

.loginformFlexItem {
box-sizing:border-box;
display:block;
width:225px;
align-items: center;
justify-content: center;
}

.loginform input, .loginform select {
margin:4px 0;
padding:3px 4px;
width:100%;
box-sizing:border-box;

font-size:var(--fs-normal);
line-height:var(--lh-normal);
position: relative;
border:0;
border-radius:4px;
display: block;
}

.loginform label {
font-size:var(--fs-small);
line-height:var(--lh-small);
padding:0;
margin:0;
display: block;
}

.loginform .loginformSubmit {
margin:20px 0;
color:black;
background-color: var(--zluta);
transition:all 200ms ease-in;
cursor: pointer;
}

.loginform .loginformSubmit:hover {
color: var(--zluta);
background-color: black;
}

.loginform hr {
margin:15px 0;
}


.loginform .warning {
background-color: #890000;
color:white;
padding:5px 10px;
text-align: center;
margin:0 0 20px 0;
}

.loginform .warninggreen {
background-color: #008900;
color:white;
padding:5px 10px;
text-align: center;
margin:0 0 20px 0;
}



.loginform .loginwarningRamecek {
background-color: #ffe0e0;
}

@media (max-width: 500px) {
.loginformFlexItem {
 width:100%;
 }

.loginform {
margin-left:10px;
margin-right:10px;
width:calc(100% - 20px);
}


}






@media (max-width: 2200px) {

.placeholder {
}


 .zprava {
}



}



@media (max-width: 1400px) {

.placeholder {
}


 .zprava {
 }



}


@media (max-width: 1090px) {

.placeholder {
}


}

@media (max-width: 990px) {

.placeholder {
}

.holder {
width:100%;
}
.holderin {
padding:0 0px;
}

 .hlavniobsahsablona1, .hlavniobsahsablona2, .hlavniobsahsablona3
{
padding:40px 20px 40px 20px;
padding-left:20px;
padding-right:20px;
}

.hlavniobsahsablona0 {
padding-left:0px;
padding-right:0px;

}

 .zprava {

}





}

@media (max-width: 880px) {

.placeholder {
}

.flexpaddingleft, .flexpaddingright {
padding:30px 20px 30px 20px;
max-width: 100%;
}


.flexdiv33 {
flex: 1 1 100%;
}

.bxslider,.bxsliderholder,.centered-div  {
height:40vh;
}


.div30vlevo {
float: none;
width:100%;
}


.flex-container {
  display: block;
  }

.flex-item2 {
  width: 100%;
}
.flex-item3 {
  width: 100%;
  order:1;
}
.flex-item4 {
  width: 100%;
  order:1;
}

.flexpaddingright, .flexpaddingleft {
padding:20px 0;
text-align: left;
}



.flex-image  {
min-height: 200px;
min-width:0;
max-width:100%;
aspect-ratio:2/1;
}



.div50vlevo, .div50vpravo {
width:100%;
box-sizing: border-box;
padding:0;
float: none;
}


 .zprava {
}

.hidemobile {
display: none;
}

.showmobile {
display: block;
}
.hidemobilemenu {
display: none;
}

.showmobilemenu {
display: block;
}

.vypiszprav {
padding:0;
}


#menudiv {
/* position: absolute; /**/
}

 #menu {
position: absolute;
left:0px;
top:0px;
width:100%;
 }


}

@media (max-width: 750px) {

.placeholder {
}


.h1box {
padding-top:5vh;
padding-bottom:5vh;

}


 .zprava {
width:calc(100% / 2 - 20px);
height:300px;
float: none;
display: inline-block;
}


}

@media (max-width: 500px) {

.placeholder {
}




.photogalleryimage {
width:100%;
margin:10px 0;
aspect-ratio:2 / 1;
}

.photogalleryimage:after {
content:'search';
font-size:1.4rem;
box-sizing: border-box;
padding:0.5rem 0 0 0;
text-align: center;
font-family: 'Material Symbols Outlined';
position: absolute;
left:calc(50% - 20px);
top:calc(50% - 20px);
width:40px;
height:40px;
background-color: var(--zluta);
color:white;
border-radius:50%;
}






 .zprava {
width:calc(100%);
height:300px;
float: none;
margin:0;
height:160px;
display: inline-block;
}



.hlavniobsahsablona0, .hlavniobsahsablona1, .hlavniobsahsablona2, .hlavniobsahsablona3
{
padding:30px 20px;
}


.hlavniobsahsablona0 {
padding-left:0px;
padding-right:0px;
}



.zpravaobrazeklogo {
background:url('defaultlogo.svg') no-repeat center center;
background-size: contain;

display: block;

box-sizing:border-box;
}


.zprava td{
/* display: block;
max-width:100%;
width:100%; */
}

.zprava td:first-child
{
max-width:100%;
min-width:70px;
min-height:100px;
}



#logo {
font-size:20px;
line-height:20px;
top:15px;
max-width:140px;
}
#logo::before {
top:-7px;
}

 body {

}



.textimage_right {
max-width:50%;
}



.textimage_left {
max-width:50%;
}


}





@media (max-width: 420px) {

.placeholder {
}

.mybutton {
width:100%;
margin-left:0;
margin-right:0;
}

 .zprava {
}


}




