:root {

--animace: ease 0.4s;
--gap: 1.25rem;
--gap-l: 1.5rem;
--gap-m: 1rem;
--border: 2rem solid var(--yellow);
--border-mob: 1.25rem solid var(--yellow);

--white: white;
--black: black;
--blue: #001E60;
--yellow: #FFCD00;
--gray: #F2F4F4;
}


@font-face {
    font-family: 'museo_slab700';
    font-display: swap;
    src: url('../fonts/museo_slab_700-webfont.woff2') format('woff2'),
         url('../fonts/museo_slab_700-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'din_alternatebold';
    font-display: swap;
    src: url('../fonts/dinalternate-bold-webfont.woff2') format('woff2'),
         url('../fonts/dinalternate-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'din_proregular';
    font-display: swap;
    src: url('../fonts/dinpro-webfont.woff2') format('woff2'),
         url('../fonts/dinpro-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


img {max-width: 100%; height: auto; display: inline-block;}
p {margin: 0.5rem 0; line-height: 1.4; }
p.p_big {font-size: 1.125rem;}
a {text-decoration: underline; color: inherit;}
a:hover {color: inherit; text-decoration: none;}
.Main a {color: var(--blue); text-decoration: none; transition: var(--animace);}
hr {display: block; line-height: 0; height:0; font-size:0; border: none; border-top: 1px solid var(--green-light); padding:0; margin: 65px 0 65px 0; _margin: 6px 0 7px 0; *margin:6px 0 7px 0; position: relative; overflow:  inherit;}
figure,
figcaption {padding: 0; margin: 0;}
.center {text-align: center;}
.center p {margin: 0.5em auto;}

.hlavni input, option, select {background: transparent; color: var(--black);}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #888; } ::-moz-placeholder { /* Firefox 19+ */ color: #888; } :-ms-input-placeholder { /* IE 10+ */ color: #888; } :-moz-placeholder { /* Firefox 18- */ color: #888; }

iframe {max-width: 100%; width: 100%;}

html {margin: 0; padding: 0; background: var(--blue); color: var(--white); scroll-behavior: smooth; overflow-x: hidden;}
body {font-family: 'din_proregular', sans-serif; font-size: 16px; margin: 0; padding: 0; overflow-x: hidden; background-color: var(--white); color: var(--black); width: 100%; box-sizing: border-box;}
.HP section {margin: 7rem 0; position: relative;}
section {margin: 4rem 0; position: relative;}
section > .width h2:first-of-type {margin-top: 0;}
section.sec_gray {background-color: var(--gray); padding: 4rem 0;}
.Main section:last-of-type {margin-bottom: 0;}

.blue-box {padding: 2.5rem; color: var(--white); background-color: var(--blue); font-size: 1.125rem; margin: 3rem -2rem;}
.blue-box--top-margin {transform: translateY(-5rem); margin-bottom: -2rem !important;}

p.p_highlight {padding: 2.5rem; color: var(--white); background-color: var(--blue); font-size: 1.125rem; margin: 3rem -2rem;}


.img_hide {position: absolute; left: -99999999px; width: 0; height: 0; overflow: hidden; pointer-events: none;}

/* zaklad */

h1, h2, h3, h4, h5 {font-family: "museo_slab700", serif; font-weight: normal;}
h1 {font-size: 2.5rem; color: var(--blue);}
.width--heading h1 {margin-bottom: 0; margin-top: 1rem;}
.blue-box h1 {color: var(--white); margin-top: 0;}
.HP h1 {position: absolute; left: -99999px; margin-top: 0;}
.HP h2 {font-size: 2rem; text-align: center;}
h2 {font-size: 2rem; color: var(--blue);}
h3 {font-size: 1.5rem; font-family: 'din_alternatebold'; font-weight: normal;}

.gallery4 {display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px,100%),1fr)); gap: 1rem; margin: 2rem 0;}
.gallery4 .item .label {display: none;}
.gallery4 .item,
.gallery4 .IS_placeholder {width: auto; margin: 0;}

.gallery3 .item > a {padding-top: 58%;}


.width.yellow-border-box {padding: 2.5rem; border-left: 6px solid var(--yellow); border-bottom: 6px solid var(--yellow); padding-top: 0; padding-bottom: 1.5rem; margin: 2rem auto 3.5rem;} 

.Main {position: relative; padding: 1px 0; padding-bottom: 60px; z-index: 2;}
.width {margin: 0 auto; position: relative; z-index: 1; max-width: 1564px; width: 96%;}
.width--100 {width: 100%; padding: 0 1.5rem; box-sizing: border-box; max-width: 100%;}
.width--no-padding {padding: 0;}
.width--1200 {max-width: 1184px;}
.width--660 {max-width: 660px;}

.Main ul li {list-style: square; padding: 0.25rem;}
.Main ul li::marker {color: var(--yellow);}

blockquote {border-left: 6px solid var(--yellow); padding: 1rem 2rem; margin: 0.5rem 0;}

/* Tabulky */

table.tabulka {width: 100%; border-collapse: collapse; margin: 2rem 0;}
.tabulka th {text-align: left; padding: 1rem 0.25rem;}
.tabulka td {text-align: left; padding: 0.5rem 0.25rem;}
.tabulka tr:nth-child(even) td {background: var(--gray);}

/* Menu */

.header-menu {display: flex; margin: 0; padding: 0;}
.header-menu li {display: block; position: relative;}
.header-menu li a {display: block; padding: 0.75rem 0; color: var(--blue); text-decoration: none; font-size: 1.25rem; font-family: 'din_alternatebold'; position: relative; margin: 0 1rem;}
.header-menu > li > a::after {content: ""; display: block; height: 6px; width: 0px; background-color: var(--yellow); position: absolute; bottom: 0px; left: 0; transition: var(--animace);}

.wrap_top--image .header-menu li a {color: var(--white);}

.obal_video {position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; overflow: hidden;}
.obal_video video {display: block; position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: 1; -webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-o-transform:translate(-50%, -50%); overflow: hidden;}


/* Menu */

.header-menu > li:nth-child(1) a {padding-left: 0;}
.header-menu li a:hover::after,
.header-menu li.active a::after {width: 100%;}
.header-menu li ul {display: none; position: absolute; top: 48px; left: 0; width: 220px; padding: 0; margin: 0; background-color: var(--white); z-index: 3; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);}
.header-menu li:hover ul {display: block;}
.header-menu li:hover ul a {font-weight: normal; color: var(--blue); font-family: "din_proregular"; border-top: 1px solid var(--gray); font-size: .875rem; padding: 0.75rem 1rem ; position: relative;}
.wrap_top .header-menu li ul li a {margin: 0;}
.wrap_top .header-menu li ul li a:hover {background-color: var(--gray); }

.wrap_top.sticky .header-menu > li a {color: var(--blue);} 

.header-menu li:hover ul li ul {display: none;}
.header-menu li:hover ul li:hover ul {display: block; left: 220px; top: 0; box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);}

.header-menu li ul > li.hasChilds > a::after {content: ""; display: block; background-color: black; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background-size: contain; background: url(../images/ico_right-arrow_b.svg); background-size: contain;}


.responsive-menu {display: none; justify-content: flex-end;}
#rfmenu { position: fixed; z-index: 99; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background: #fff; color: var(--grey);}
#rfmenu_close { position: fixed; z-index: 99; right: 0; top: 0; width: 52px; height: 52px; background: transparent url('../images/ico_close.svg') center no-repeat; color:#000; font-size: 24px; padding: 0; border: none; cursor: pointer; filter: brightness(0);}
#rfmenu_close:focus { background-color: #eee; }

.responsive-menu button {width: 46px; padding: 0; margin: 0; background: url('../images/responsive-menu-btn.svg') center no-repeat; border: none;}

.rfmenu_list { display: flex; flex-direction: column; width: 100%; height: 100%; position: absolute; top:0; left: 100%; background: #fff; transition: all 300ms; }
.rfmenu_list.inview { left: 0%; }
.rfmenu_header { width: 100%; padding: 0 60px 0 20px; box-sizing: border-box; line-height: 52px; font-size: 18px; font-weight: bold; background: #fafafa; color: black;}
.rfmenu_header button { background: transparent; border: none; color: inherit; font-style: inherit; font-size: inherit; padding:0; height: 52px;}
.rfmenu_header button::before { content: ''; display: inline-block; vertical-align: middle; width: 8px; height: 8px; border-top: 2px solid #000; border-left: 2px solid #000; transform: rotate(-45deg); margin-left: 4px; margin-right: 10px;}
.rfmenu_header button:focus { background-color: #eee; }
.rfmenu_body { height: 1px; flex-grow: 1; overflow-y: auto; padding-top: 0px; }
.rfmenu_body ul { list-style: none; padding:0; margin: 0; }
.rfmenu_body ul li { list-style: none; padding:0; margin: 0; }
.rfmenu_body ul ul { display: none; }
.rfmenu_footer { padding: 4px 22px; background: var(--grey); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.rfmenu_footer .spojeni {display: none;}
.rfmenu_footer .socialni_site {margin: 0; padding: 0;}
.rfmenu_footer .searching button {display: block;}
.rfmenu_footer .responsive-menu,
.rfmenu_footer .responsive-menu button {display: none;}
.rfmenu_footer > * {text-decoration: none; display: flex; align-items: center;}
.rfmenu_footer > a img { margin-right: 5px;}
.rfmenu_footer > a span.tooltip {display: none;}

.rfmenu_footer .sign { display: inline-block; vertical-align: middle; }
.rfmenu_footer #maincontent { display: none; }
.rfmenu_row { display: flex; }
.rfmenu_row > a { width: 1px; flex-grow: 1; min-height: 48px; display: flex; align-items: center; padding:5px 22px; box-sizing: border-box; text-decoration: none; font-size: 17px; border-bottom: 1px solid var(--gray); outline: none; color: var(--black);}
.rfmenu_row > button { padding: 0; width: 48px; height: 48px; background: transparent; color: #000; font-size: 24px; border: none; border-left: 1px solid var(--gray); border-bottom: 1px solid var(--gray); box-sizing: border-box;}
.rfmenu_row > button::after { content: '+'; display: inline; }
.rfmenu_row > button:focus { background:#eee; outline: none;}
body.rfmenuVisible { overflow:hidden;}

.rfmenu_footer	.button--header {display: block;}
.rfmenu_footer	.button--login {background-color: white; text-indent: -999999px; background-image: url(../images/ico_account.svg); background-position: center; background-repeat: no-repeat; display: block; width: 45px; height: 45px; border-radius: 50%; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); margin-left: 8px; transition: ease 0.25s;}


/* KOMPONENTY */

/* Tlacitka */
.button {display: inline-flex; font-size: 1rem; text-decoration: none; padding: 0.5em 1.5em; transition: var(--animace); background-color: var(--yellow); color: var(--blue); cursor: pointer; margin: 0 .25rem; text-align: center; position: relative; z-index: 1; border-radius: 50px; align-items: center; font-family: "din_alternatebold"; font-weight: normal;}
.button:hover {background-color: var(--black); color: var(--white);}
.button--blue {background-color: var(--blue); color: var(--yellow);}
.button--center {margin-left: auto; margin-right: auto;}
.button--shop::before {content: ""; display: block; width: 18px; height: 18px; background: url(../images/ico_shop.svg) center no-repeat; margin-right: 8px;}
.button--small {padding: 0.5em 1em; font-size: .875rem; margin: 0; font-size: 1rem;}




/* Produkty */

.tpl_produkty_roz .Main {padding-bottom: 0;}

.produkt_list {display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-l); margin: 5rem 0;}
.produkt_obal {position: relative;}
.produkt {text-decoration: none; overflow: hidden; transition: var(--animace); position: relative;}
.produkt__img {position: relative; overflow: hidden; border-bottom: 6px solid var(--yellow); margin-bottom: 1rem; transition: var(--animace);}
.produkt__img img {display: block; transition: var(--animace); margin: 0 auto;}
.produkt__img::after {content: "Více na Hengst.com"; display: flex; padding: 0.5rem 1rem; background: var(--gray); position: absolute; top: 50%; left: 50%; z-index: 1; transition: var(--animace); justify-content: center; align-items: center; color: var(--blue);; border-radius: 2rem; display: none; transform: translate(-50%,-50%); width: max-content;}
.produkt:hover .produkt__img::after {display: flex;}

.odkaz_ne .produkt__img::after {content: "Detail připravujeme";}
.odkaz_ne .produkt__nazev::after {display: none;}

.lang_pl .produkt__img::after {content: "Więcej na Hengst.com";}
.lang_en .produkt__img::after {content: "More on Hengst.com";}
.lang_de .produkt__img::after {content: "Mehr auf Hengst.com";}

.lang_pl .odkaz_ne .produkt__img::after {content: "Szczegóły wkrótce";}
.lang_en .odkaz_ne .produkt__img::after {content: "Details coming soon";}
.lang_de .odkaz_ne .produkt__img::after {content: "Details coming soon";}


.produkt_download {position: absolute; top: 8px; right: 8px;}
.produkt_download a {display: block; width: 44px; height: 44px; font-size: 0; background-color: var(--gray); background-image: url(../images/ico_download.svg); background-image: url(../images/ico_pdf_download.svg); background-position: center; background-repeat: no-repeat; background-size: 32px;}
.produkt_download a:hover {background-color: var(--yellow);}

.produkt__nazev {text-align: center; font-size: 22px; font-family: "din_alternatebold"; font-weight: normal; color: var(--blue); position: relative; margin: 0 1.25rem; display: inline-block; box-sizing: border-box;}
.produkt__nazev::after {content: ""; display: block; width: 14px; height: 14px; background: url(../images/ico_external_link.svg) center no-repeat; position: absolute; top: -2px; right: -18px; }

.produkt:hover img  {opacity: 0.65; transform: scale(1.1);}
.produkt:hover .produkt__img  {border-color: var(--blue);}

.produkt_list--lvl1 {grid-template-columns: repeat(3, 1fr);}
.produkt_list--lvl1 .produkt__nazev {font-family: "museo_slab700"; text-align: left; width: unset;}

.produkt_list--detail .produkt__nazev::after, 
.produkt_list--lvl1 .produkt__nazev::after {display: none;}

.produkt_list--detail .produkt:hover .produkt__img::after,
.produkt_list--lvl1 .produkt:hover .produkt__img::after {display: none;}


.tpl_detail_produktu .hide_top {display: none;}

/* Rozcestnik produktu */

.produkt_roz_list {display: grid; grid-template-columns: 1fr 1fr; gap: 80px var(--gap-l); margin: 5rem 0; font-size: 1.5rem; color: var(--blue); font-family: "museo_slab700"; font-weight: normal;}

.produkt_roz__img {overflow: hidden; display: block;}
.produkt_roz__img img {display: block;}
.produkt_roz__img {border-bottom: 6px solid var(--yellow); transition: var(--animace);}
.produkt_roz__img a {overflow: hidden; display: block;}
.produkt_roz__img a img {transition: var(--animace);}
.produkt_roz__img a:hover img {transform: scale(1.05);}
.produkt_roz__img:hover {border-color: var(--blue);}
.produkt_roz__nazev {padding-top: 1rem; }
.produkt_roz__nazev a {text-decoration: none;}
.produkt_roz__nazev h2,
.produkt_roz__nazev h3 {margin: 0; font-family: "museo_slab700"; font-weight: normal;}

.produkt_link_list {display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0; margin: 1.5rem 0 0.5rem 0; font-family: "din_proregular"; font-weight: normal;}
.produkt_link_list li {list-style: none !important; padding: 0 !important;}
.produkt_link_list li a {display: block; margin: 0;}

.produkty_hero {display: flex; align-items: center; font-size: 1.5rem;}
.produkty_hero__img {flex-shrink: 0;}

.produkty-kontakt {display: flex; gap: 32px;}
.produkty-kontakt__prodejci {flex-shrink: 0;}
.produkty-kontakt .prodejci-list {border-left: 1px solid #ddd; padding-left: 4rem;}

.produkt_detail_top {display: flex; align-items: center; gap: 48px; font-size: 1.125rem; margin-bottom: 3rem;}
.produkt_detail_top__img {min-width: 300px;}
.produkt_detail_top .button {margin-left: 0; margin-top: 1rem;}


/* Aplikace */

.aplikace_roz_list {display: flex; position: relative; margin: 3rem 0; flex-direction: column; gap: 3.25rem;}
.aplikace_roz {display: flex; align-items: center; gap: 3rem;}
.aplikace_roz > * {flex: 1; width: 100%;}
.aplikace_roz .button {margin: 0; margin-top: 0.5rem;}
.aplikace_roz h2,
.aplikace_roz h3 {font-size: 1.25rem;}

/* Cestar */

.cestar ul {display: flex; padding: 0; flex-wrap: wrap; font-size: 0.875rem; align-items: center; margin: 0;;}
.cestar ul li {display: flex; list-style: none; color: #555; margin-left: 10px; align-items: center; padding: 0;}
.cestar ul li::before {content: ""; display: block; margin-right: 12px; margin-left: unset; width: 6px; height: 6px; background: var(--yellow);}
.cestar ul li:first-child::before {content: ""; display: none;}
.cestar ul li:first-child {margin-left: 0;}
.cestar ul li a {color: var(--black); text-decoration: none;}


/* Formulare */

.formularek {margin: 0 auto; background-color: white; box-sizing: border-box; padding: 3rem; border: var(--border); position: relative;}
.formularek::after {content: "purifying our planet"; position: absolute; bottom: 0px; right: 0px; color: var(--blue); transform: translateY(100%); line-height: 32px; font-family: "museo_slab700";}
.formularek > .form_wrap { display: flex; gap: var(--gap); }
.formularek > .form_wrap > * { width: 50%; }
.formularek input,
.formularek textarea { background-color: #DFE2E4; width: 100%; box-sizing: border-box; border: none; font-family: 'din_proregular', sans-serif; font-size: 1rem; padding: .75rem 1rem; outline: none; line-height: 24px}
.formularek textarea { min-height: 334px; }
.formularek .f_formItem { margin-bottom: 1rem;}
.formularek .f_formItem_label { margin-bottom: 0.5rem;text-align: left;}
.formularek .f_buttons {text-align: center;}
.formularek .button { border: none; margin-bottom: 0; cursor: pointer; margin: 0; font-family: "din_proregular";}
.formularek .button:hover { background-color: var(--black); color: var(--white); }
.formularek .buttons {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; border: none;}
.formularek .souhlas_wrap {display: flex; flex-grow: 1; align-items: center;}
.formularek .souhlas_wrap input {padding: 0; width: unset; height: 1rem;}
.formularek label {cursor: pointer;}
.formularek input[type="checkbox"] {display: inline-block; width: 1.5rem; height: 1.5rem; border: none; cursor: pointer; background-color: #DFE2E4; appearance: none; margin: 0 0.5rem 0 0; position: relative; flex-shrink: 0;}
/* Vzhled při zaškrtnutí */
.formularek input[type="checkbox"]:checked { background-color: var(--blue); border-color: var(--blue); }
.formularek input[type="checkbox"]:checked::after { content: "✔"; color: white; font-size: 16px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: Arial, Helvetica, sans-serif; }

.formularek .buttons .button {background-color: var(--yellow) !important; color: var(--blue); font-weight: normal; font-size: 1rem; padding: 0.5em 1.5em;}


/* Header */

header {padding: 1px 0; background-color: var(--white); color: var(--blue); z-index: 2;}
header.header-image {min-height: 700px; position: relative; }
header.header-image::after {content: ""; position: absolute; width: 100%; height: 200px; background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.35) 100%);; top: 0; left: 0; z-index: 0;}

.wrap_top {position: sticky; top: 0; left: 0; width: 100%; z-index: 10;}
.wrap_top--image {position: fixed;}
.HP .wrap_top {position: fixed;}

.header-top {display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 0; z-index: 2;}
.header-top__left {display: flex; gap: 2.5rem; align-items: center;}
.header-logo img {display: block;}
.wrap_top--image .header-logo img {display: block; filter: invert(1) grayscale(1) brightness(1000%);}

.header_top__right {display: flex; gap: 0.5rem; align-items: center; position: relative;}

.lang_change {position: relative;}

.lang_change::after {content: "cz"; display: flex; width: 20px; height: 20px; position: absolute; top: 0; right: 0; background: var(--white); border-radius: 20px; font-size: 12px; justify-content: center; align-self: center; color: var(--blue); transform: translateY(-50%);}

.lang_change.lang_pl::after {content: "pl";}
.lang_change.lang_de::after {content: "de";}
.lang_change.lang_en::after {content: "en";}

.lang_icon {display: block; width: 2rem; height: 2rem; background: url(../images/ico_planet.svg) center no-repeat; border: none; background-color: transparent; cursor: pointer; flex-shrink: 0; flex-grow: 1;}
.lang_ul {display: flex; flex-direction: column; color: var(--blue); margin: 0; padding: 0; position: absolute; top: 32px; left: 50%; transform: translateX(-50%); padding-top: 8px; display: none; z-index: 2;}
.lang_change:hover .lang_ul {display: flex;}
.lang_ul li {padding: 0; margin: 0; list-style: none;}
.lang_ul li a {padding: 0.5rem 1rem; display: block; text-decoration: none; background-color: var(--white);}
.lang_ul li.active a {color: var(--yellow);}
.header-bottom {position: relative; z-index: 1;}
.wrap_top.sticky {position: fixed; top: 0; left: 0; width: 100%; z-index: 50; background-color: var(--white); box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);}
.wrap_top.sticky .header-top {padding: 0.5rem 0;}
.wrap_top.sticky .header-logo img {filter: unset; max-width: 100px; margin: 0.5rem 0;}

header.header-image {background-position: top center; background-repeat: no-repeat; background-size: cover;}
header.header--prumyslova-filtrace {background-image: url(../images/header_bg_prumyslova-filtrace.webp); background-position: top center; background-repeat: no-repeat; background-size: cover;}

header.header--technologie-budov {background-image: url(../images/aplikace_bg_budovy.webp);}
header.header--prumyslove-aplikace {background-image: url(../images/aplikace_bg_prumysl.webp);}
header.header--zdravotni-pece{background-image: url(../images/aplikace_bg_zdravotni-pece.webp);}
header.header--biologicke-inzenyrstvi {background-image: url(../images/aplikace_bg_life-science.webp);}
header.header--potravinarsky-prumysl {background-image: url(../images/aplikace_bg_potraviny.webp);}
header.header--civilni-obrana {background-image: url(../images/aplikace_bg_obrana.webp);}
header.header--it {background-image: url(../images/aplikace_bg_it.webp);}
header.header--zivotni-prostredi {background-image: url(../images/aplikace_bg_zivotni_prostredi.webp); background-position: center;}



/* Header - homepage */
.HP header {color: var(--white); padding: 0; padding: 150px 0; box-sizing: border-box; background: url(../images/bg_video_poster.webp) center no-repeat; background-size: cover;}
/* .HP header .header-menu li a {padding: 1.125rem 0; margin: 0 2.25rem;}
.HP header .header-menu li ul li a {margin: unset;} */
/* .HP .header-menu > li:nth-child(1) a {color: var(--white);}
.HP .header-menu > li:nth-child(1) a:hover {color: var(--yellow);}*/

.HP .orange_box {box-sizing: border-box; border: var(--border); padding: 16rem 0; color: var(--blue); position: relative; z-index: 1;}
.HP .orange_box h1 {padding: 0 42px; text-align: center;}
.HP .orange_box::after {content: "purifying our planet"; position: absolute; bottom: 0px; right: 0px; color: var(--blue); transform: translateY(100%); line-height: 32px; font-family: "museo_slab700";}



/* Homepage */

.HP main {background-color: var(--gray); padding-bottom: 5rem;}


/* HP Aplikace */

.aplikace_list {display: grid; grid-template-columns: repeat(4, 1fr); justify-content: space-between; border-top: 1px solid #999; border-bottom: 1px solid #999; margin: 2rem 0;}
.aplikace {display: flex; flex-direction: column; align-items: center; gap: 2rem; text-decoration: none; font-size: 1.125rem; color: var(--blue); padding: 3rem 1.5rem; text-align: center; transition: var(--animace); font-weight: bold;}
.aplikace::before {content: ""; display: block; width: 100%; height: 100px; background-position: center; background-repeat: no-repeat; background-image: url(../images/ico_budovy.svg); background-size: contain;}
.aplikace_label {max-width: 300px;}
.aplikace:hover {background-color: #F6E9B1; box-shadow: inset 0 0 0 8px var(--yellow);}

.aplikace--aplikace::before {background-image: url(../images/ico_prumysl.svg);}
.aplikace--zdravotni::before {background-image: url(../images/ico_zdravotni_pece.svg);}
.aplikace--bio::before {background-image: url(../images/ico_bio.svg);}
.aplikace--obrana::before {background-image: url(../images/ico_obrana.svg);}
.aplikace--potraviny::before {background-image: url(../images/ico_potraviny.svg);}
.aplikace--it::before {background-image: url(../images/ico_it.svg);}
.aplikace--energie::before {background-image: url(../images/ico_energie.svg);}

/* HP Akutality */
.HP .sec_aktuality {text-align: center;}
.HP .aktuality_list {margin: var(--gap-l) 0; grid-template-columns: 1fr 1fr;}
.HP .aktuality_list .aktualita .button {margin: 0; margin-top: 1rem;}

.banner img {display: block;}


/* HP kontakt */

.sec_kontakt h2 {text-align: left;}

/* Aktuality */

.aktuality_list {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--gap-l); text-align: left;}
.aktualita {position: relative; background-color: var(--blue);}
.aktualita_img img {display: block;}
.aktualita_datum {color: var(--yellow); font-size: .75rem;}
.aktualita_text {background-color: var(--blue); color: var(--white); padding: 2rem; position: relative;}
.aktualita_text h2,
.aktualita_text h3 {font-size: 1.25rem; margin-top: .5rem;}
.aktualita_text .button {margin-top: 0.5rem; margin-left: 0;}
.news_item_wrap {display: grid; grid-template-columns: 1fr 320px; gap: 3rem;}
.news_item__text p {text-align: justify;}


/* Inspirace */

.HP .inspirace_list,
.inspirace_list {display: grid; grid-template-columns: 1fr; gap: var(--gap-l); text-align: left;}
.inspirace_list .aktualita {display: grid; grid-template-columns: 2fr 1fr;}
.inspirace_list .aktualita  .aktualita_img a {display: block; height: 100%;}
.inspirace_list .aktualita  .aktualita_img a img {width: 100%; object-fit: cover; height: 100%; width: 100%;}

/* Klikaci mapa */

div#map-container  {display: flex; align-items: center;}
.klikmapa_obal {display: grid; grid-template-columns: 3fr 7fr; gap: 3rem; }

.prodejci-list {display: flex; flex-direction: column; gap: 1rem; flex-wrap: wrap;}
.prodejci-list--horizontal {flex-direction: row;}
.prodejci-list--horizontal .button {margin: 0; margin-top: 1rem;}
.prodejce {display: flex; gap: var(--gap); align-items: center; flex-grow: 1;}
.prodejce img {border-radius: 150px; width: 8rem; height: 8rem;}

select#country-select {appearance: none; display: block; padding: 0.5rem; background-color: var(--white); color: var(--blue); border: 1px solid var(--blue); font-family: 'din_proregular'; font-size: 1rem; border-radius: 2rem; padding-left: 1rem; cursor: pointer; position: relative; font-weight: normal;}

.select_wrap {position: relative; display: inline-flex; }
.select_wrap::after {content: ""; position: absolute; top: 50%; right: 8px; transform: translateY(-50%); display: block; width: 24px; height: 24px; z-index: 1; background: url(../images/ico_arrow_down.svg) center no-repeat; pointer-events: none;}

.select_wrap label {position: absolute; left: -99999px; top: 0;}

.prodejci-list.prodejci-list--horizontal {gap: 3rem; flex-direction: row;}

/* Kontakt */
.tpl_kontakt .blue-box--top-margin {margin-bottom: -5rem !important;}

.sec_kontakt-top {margin: 0;}
.h1_small {font-size: .875rem; text-align: center; font-weight: 400; font-family: 'din_proregular', sans-serif; color: var(--yellow);}
.tpl_kontakt .blue-box {text-align: center;}
.blue-box h2 {color: var(--white);}

.kontakt_top {display: flex;}
.kontakt_top > * {flex: 1;}

.kontakt_top__map {aspect-ratio: 59/46; overflow: hidden;}
.kontakt_top__map iframe {width: 100%; height: 100%;}
.kontakt_top__img img {display: block;}

.kontakt_sloupce {display: flex; gap: 0 2rem; justify-content: space-between; margin-top: 4rem; flex-wrap: wrap;}
.kontakt_sloupce h3 {margin-bottom: 1rem;}

/* Footer */

footer {background-color: var(--blue); color: var(--white); padding: 3.75rem 0 0;}
footer a {text-decoration: none; transition: var(--animace);}
footer a:hover {color: var(--yellow);}
footer .width {position: relative;}
footer .title {font-size: 1.125rem; font-weight: bold;}

.foo_label {font-family: "museo_slab700", serif; font-size: 1.75rem;}
.foo_logo {margin: 2rem 0;}
.footer_top .width {display: flex; gap: 4.5rem;}
.foo_top__left {min-width: max-content;}
.foo_top__right {display: flex; flex-direction: column; gap: 1.5rem;}
.foo_full_menu {display: flex; gap: 5rem;}
.foo_full_menu ul {margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.25rem 2rem; width: 100%;}
.foo_full_menu ul li {list-style: none; margin: 0; padding: 0;}
.foo_full_menu ul li a {display: flex; padding: 0.125rem 0; position: relative; align-items: center;}
.foo_full_menu ul li a::after {content: ""; width: 24px; height: 24px; display: block; margin-left: 8px; background: url(../images/ico_right-arrow.svg) center no-repeat;}

.footer_bottom {font-size: .875rem; opacity: 0.5; padding: 2rem 0;}
.footer_bottom .width {display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 2rem;}

.foo_a {display: flex; align-items: center; margin: 0.25rem 0;}
.foo_a::before {content: ""; display: block; width: 24px; height: 24px; background: url(../images/ico_tel.svg) center no-repeat; margin-right: 8px;}

.foo_a--mail  {margin-top: 1rem;}
.foo_a--mail::before {content: ""; display: block; width: 24px; height: 24px; background: url(../images/ico_mail.svg) center no-repeat; margin-right: 8px;}

.footer_planet {display: grid; grid-template-columns: 1fr 1fr; background-color: var(--white); text-align: left; color: var(--blue);}
.footer_planet h2 {text-align: left;}
.footer_planet__img {background: #020715 url(../images/bg_footer.webp) center right no-repeat; background-size: cover;}
.footer_planet__text {max-width: 782px; padding: 2rem 0; padding-right: 2rem; box-sizing: border-box;}

.purify_list {display: flex; flex-direction: column; gap: 2rem; margin: 4.5rem 0;}
.purify_item {display: flex; gap: 3rem;}
.purify_item h3 {margin-top: 0; margin-bottom: 0.5rem; font-family: 'din_alternatebold';}
.purify_item::before {content: ""; width: 80px; height: 80px; background-position: center; background-repeat: no-repeat; background-image: url(../images/ico_purify_udrzitelnost.svg); flex-shrink: 0;}
.purify_item--inovace::before {background-image: url(../images/ico_purify_inovace.svg);}
.purify_item--efektivita::before {background-image: url(../images/ico_purify_efektivita.svg);}

.foo_projekt {margin-left: -324px; padding: 2rem; padding-right: 0; border-top: 1px solid #DFE2E4; text-align: right; display: flex; align-items: center; gap: 1rem; justify-content: flex-end;}
.foo_projekt::before {content: ""; display: block; width: 270px; height: 66px; background: url(../images/eu.webp) center no-repeat; flex-shrink: 0;}
.foo_projekt .button {flex-shrink: 0;}


/* Landing page */

.tpl_landing header.header--prumyslova-filtrace {background-image: url(../images/bg_img_airfiltration.jpg);}
.tpl_landing header.header-image {height: 80vh; max-height: 800px;}
.tpl_landing .produkt__nazev { font-size: 1.125rem;}
.tpl_landing .prodejci-list {display: grid; grid-template-columns: 1fr 1fr;}

.vyhody_list {margin: 3rem 0;}
.vyhody_list .width {width: 100%; padding: 0 !important; margin: 0 !important;}
.vyhoda { position: relative; background-position: center; background-repeat: no-repeat; background-size: cover;}
.vyhoda__nadpis h3 {cursor: pointer;}
.vyhoda__nadpis .width { border-bottom: 1px solid var(--gray); }
.vyhoda h3:hover { color: var(--blue); }
.vyhoda h3::after { content: ""; position: absolute; right: 0; top: 4px; width: 24px; height: 24px; display: block; background: url(../images/plus.svg) center no-repeat; transition: var(--animace); background-size: cover; }
.vyhoda__odpoved { overflow: hidden; display: grid; grid-template-rows: 0fr; transition: var(--animace); max-width: 840px; }
.vyhoda__odpoved .button { margin-top: 2rem; }
.vyhoda__odpoved > div { overflow: hidden; }
.vyhoda.active .vyhoda__odpoved { padding: 2rem 0; grid-template-rows: 1fr; }
.vyhoda.active h3::after { transform: rotate(45deg); }



/* O nas */
.header-image.header--hengst {background-image: url(../images/bg_onas.webp); background-position: center; background-repeat: no-repeat; background-size: cover;}
.tpl_onas .h1_small {text-align: left;}
.hengst_cisla {display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin: 3rem 0;}
.hengst_cislo {display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2rem 0;}
.hengst_cislo__text {max-width: 160px; margin: 0 auto; font-weight: 700; color: var(--blue);}
.hengst_cislo__obr {display: block; width: 130px; height: 130px; background-position: center; background-repeat: no-repeat; margin-bottom: 1rem; background-image: url(../images/ico_cisla_zamestnanci.svg);}

.hengst_cislo__obr--pobocky {background-image: url(../images/ico_cisla_pobocky.svg);}
.hengst_cislo__obr--produkty {background-image: url(../images/ico_cisla_produkty.svg);}
.hengst_cislo__obr--patenty {background-image: url(../images/ico_cisla_patenty.svg);}


.letopocet_obal {display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin: 4rem 0 5rem; border-bottom: 1px solid #ddd; padding-bottom: 4rem;}
.letopocet {border-left: 1px solid var(--blue); padding: 1rem 2rem; padding-right: 0; padding-top: 0; position: relative;}
.letopocet.letopocet--posledni {border-left: none;}
.letopocet__rok {font-size: 1.5rem; color: var(--blue); font-weight: bold; position: relative; line-height: 1.5rem; display: flex;}
.letopocet__rok::before {content: ""; position: absolute; left: -2rem; top: 50%; display: block; width: 1rem; height: 1rem; background: var(--yellow); border-radius: 50%; transform: translate(-50%,-50%);}
.letopocet--prvni .letopocet__rok::before,
.letopocet--posledni .letopocet__rok::before {width: 1.5rem; height: 1.5rem;}
.letopocet--bez-borderu {border-left: none;}
.letopocet--bez-borderu::before {content: ""; display: block; width: 1px; height: 4px; position: absolute; left: 0; top: 0px; background-color: var(--blue);}
.letopocet--bily-border::before {content: ""; display: block; width: 1px; height: 4px; position: absolute; left: -1px; top: 0px; background-color: var(--white);}
.letopocet__text {max-width: 400px; min-height: 2lh;}



.certifikace_list {display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin: 3rem 0;}
.certifikat {text-align: center;}
.certifikat__ikona {min-height: 96px; display: flex; align-items: center; justify-content: center;}
.certifikat h3 {font-size: 1.25rem; margin-bottom: 0.5rem; color: var(--blue);}

.hengst_h_wrap {display: flex; gap: 3rem; align-items: center;}
.hengst_H {min-width: 450px;}



/* SERVIS  */
.tpl_servis .h1_small {text-align: left;}
.tpl_servis .Main {padding-bottom: 0;}
.header-image.header--servis {background-image: url(../images/servis_hero.webp); background-position: center; background-repeat: no-repeat; background-size: cover;}

.servis_list {display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px,100%),1fr)); gap: 2rem; text-align: center; margin: 3rem auto;}
.servis_item::before {content: ""; display: block; margin: 0 auto 1rem; width: 120px; height: 120px; background-position: center; background-repeat: no-repeat; background-image: url(../images/ico_diagnostika.svg);}


.servis_item:nth-child(2):before {background-image: url(../images/ico_vymena_filtru.svg);}
.servis_item:nth-child(3):before {background-image: url(../images/ico_audity.svg);}
.servis_item:nth-child(4):before {background-image: url(../images/ico_express_delivery.svg);}

section.sec_pravidelny_servis {display: grid; grid-template-columns: 1fr 1fr; position: relative; padding: 0; align-items: center; margin-bottom: 0;}
.sec_pravidelny_servis .bg_img img {object-fit: cover; width: 100%; height: 100%; display: block;}
section.sec_pravidelny_servis .width {padding: 3rem; max-width: 800px; margin-left: 0; margin-right: auto; box-sizing: border-box;}

section.sec_express_delivery {display: grid; grid-template-columns: 1fr 1fr; position: relative; padding: 0; align-items: center; margin-top: 0;}
.sec_express_delivery .bg_img img {object-fit: cover; width: 100%; height: 100%; display: block;}
section.sec_express_delivery .width {padding: 3rem; max-width: 800px; margin-left: auto; margin-right: 0; box-sizing: border-box;}

.sec_pravidelny_servis .bg_img,
.sec_express_delivery .bg_img {align-self: stretch;}


/* CLIQUO */

.gallery3Files .item > a {padding-left: 0;}
.gallery3Files .item .icon {margin-right: 0;}

main .fa,
main .fas {font-weight: normal; color: var(--blue);}
.gallery3Files .item .icon {font-size: 1.5rem; display: flex; justify-content: center; align-items: center;}

nav.subpages {margin: 3rem 0;}
nav.subpages li > a { display: flex; width: 100%; align-items: flex-start; padding: 0; background: transparent; color: #000; text-decoration: none; font-weight: normal; flex-direction: column; font-family: "museo_slab700"; color: var(--blue); font-size: 1.25rem;}
nav.subpages li > a > img {margin-bottom: 1rem; display: block; border-bottom: 8px solid var(--yellow); font-size: 1rem; font-family: 'din_proregular', sans-serif;}

@media only screen and (max-width: 1600px) {

}


@media only screen and (max-width: 1400px) {

    .aplikace {padding: 1.5rem; font-size: 1.15rem;}
    .aplikace::before {height: 80px;}


}


@media only screen and (max-width: 1276px) {
	
	.width {width: unset; margin: 0 2rem;  max-width: 100%;}
    .header-bottom-wrap {margin-right: 0;}
    .foo_full_menu ul {grid-template-columns: repeat(3, 1fr);}
    
}


@media only screen and (max-width: 1199px) {
	
	h1 {font-size: 2rem;}
    .width.yellow-border-box {padding: 2rem; padding-top: 0;}
}

/* Large devices (desktops, less than 1040px) */
@media only screen and (max-width: 1040px) {
	
	#nonresponsiveMenu {display: none;}
    .responsive-menu {display: flex; height: 46px; padding :0; color: #000; background: transparent; margin-right: 0; padding-right: 0;}
    .foo_full_menu ul {grid-template-columns: 1fr 1fr;}
    .foo_top__left {min-width: unset;}
}


/* Medium devices (tablets, less than 992px) */

@media only screen and (max-width: 991px) {

    h3 {font-size: 1.25rem;}
    .aplikace_list {grid-template-columns: repeat(3, 1fr); padding: 1rem 0;}
    .aktuality_list {grid-template-columns: 1fr 1fr;}
    .produkt_list {grid-template-columns: 1fr 1fr 1fr;}
    .produkt_list--lvl1 {grid-template-columns: 1fr 1fr;}
    .produkty_hero {font-size: 1.125rem;}
    .produkty_hero__img {flex-shrink: 1; min-width: 250px;}
    .produkt_detail_top {gap: 1rem;}
    .footer_planet {display: block;}
    .footer_planet__img {display: block; min-height: 450px;}
    .footer_planet__text {padding: 2rem;}
    .foo_projekt {margin-left: 0; padding: 2rem 0; flex-wrap: wrap; justify-content: center; text-align: center;}
    .purify_item {gap: 2rem;}
    .formularek {border: var(--border-mob);}
    .formularek::after {line-height: 20px;}
    .news_item_wrap {display: flex; flex-direction: column-reverse;}

    .hengst_h_wrap {align-items: unset;}
    .hengst_H {min-width: unset;}

    section.sec_pravidelny_servis,
    section.sec_express_delivery {grid-template-columns: 1fr;}
    section.sec_express_delivery .width,
    section.sec_pravidelny_servis .width {max-width: unset;}

    
}

/* Small devices (landscape phones, less than 768px) */

@media only screen and (max-width: 767px) {

    .HP section {margin: 2.5rem 0;}
    .button--shop {text-indent: -99999px; width: 36px; height: 36px; padding: 0; justify-content: center; justify-content: center; overflow: hidden; font-size: 0px;}
    .button--shop::before {margin-right: 0;}
    .foo_label {font-size: 1.5rem;}
    .footer_top .width {flex-direction: column; gap: 1rem;}
    .foo_full_menu ul {grid-template-columns: repeat(auto-fit, minmax(min(132px,100%),1fr));}

    .klikmapa_obal {grid-template-columns: 1fr; text-align: center; justify-content: center;}

    .sec_kontakt h2 {text-align: center;}
    div#controls {text-align: center;}
    #prodejci-list {flex-direction: row; justify-content: center; flex-wrap: wrap;}
    .prodejce {flex-direction: column; text-align: center;}

    .formularek {padding: 1.125rem; margin-left: -1.125rem; margin-right: -1.125rem;}
    .formularek > .form_wrap {display: block;}
    .formularek > .form_wrap > * {width: unset;}
    .formularek textarea {min-height: 160px;}

    
    .HP .orange_box {border: var(--border-mob); padding: 4rem 0;}
    .HP .orange_box h1 {position: relative; text-indent: unset; left: unset; margin-bottom: 0; color: white; text-shadow: 0 0 10px rgba(0,0,0,0.75);}
    .HP .orange_box::after {line-height: 1.25rem;}
    .HP header {min-height: unset; background: url(../images/bg_header_m.webp) center no-repeat;}
    .aktuality_list {gap: var(--gap-m);}
    .aktualita_text {padding: 1.25rem;}

    .produkt_roz_list {grid-template-columns: 1fr; gap: var(--gap);}
    .produkt_list {grid-template-columns: 1fr 1fr ;}
    .produkty-kontakt {flex-direction: column; text-align: center;}
    .produkty-kontakt .produkt_link_list {justify-content: center;}
    .produkty-kontakt .prodejci-list {flex-direction: row; border-left: none; padding-left: 0; flex-wrap: wrap; justify-content: center;}

    .aplikace_roz {flex-direction: column; gap: 0;}

    .tpl_landing .header-menu li a {font-size: 1rem;}

    .hengst_cisla,
    .certifikace_list {grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin: 2rem 0;}

    .letopocet_obal {display: block;}
    .letopocet__text {max-width: unset; min-height: unset;}
    .letopocet--bez-borderu {border-left: 1px solid var(--blue) ;}
    .letopocet--bez-borderu::before {content:""; display: none;}
    .letopocet--bily-border::before {background-color: var(--blue);}

    .header-image.header--hengst {background-position: center right 22%;}
    .inspirace_list .aktualita {grid-template-columns: 1fr;}

    header.header-image {min-height: 450px; max-height: 0.7vh;}

}


/* phones */

@media only screen and (max-width: 575px) {	

    h1 {font-size: 1.5rem;}
    h2 {font-size: 1.25rem;}
    .width {margin: 0 1.125rem;}
    .width.yellow-border-box {padding: 1.125rem; padding-top: 0;}
    .item_columns {display: block;}
    .item_column {margin: 0;}

    .cestar ul {flex-wrap: nowrap; overflow-x: scroll;}
    .cestar ul li {flex-shrink: 0;}

    .aplikace_list {grid-template-columns: repeat(2, 1fr);}
    .HP .aktuality_list,
    .aktualita_text h2,
    .aktualita_text h3 {min-height: unset;}
    .HP .aktuality_list,
    .aktuality_list {grid-template-columns: 1fr;}
    .produkt_list,
    .produkt_list--lvl1 {grid-template-columns: 1fr;}
    .produkty_hero {display: block; text-align: center;}
    .produkt__nazev {font-size: 1.125rem;}
    .produkt_detail_top {flex-direction: column;}

    .kontakt_top {display: block;}

    .tpl_landing .header-logo img {max-width: 100px;}
    .tpl_landing .header-top__left {gap: 1.2rem;}
    .tpl_landing .header-menu li a {margin: 0 0.5rem; font-size: .875rem;}

    .hengst_h_wrap {display: block;}

    section.sec_pravidelny_servis .width,
    section.sec_express_delivery .width {padding: 3.5rem 0; margin: 0 1.125rem;}
   

    

}


@media only screen and (max-width: 460px) {

    .tpl_landing .button--shop {display: none;}
    .header-image.header--hengst {background-position: center right 28%;}
    .prodejce {width: 100%;}
	

}


@media only screen and (min-width: 1981px) {


}

@media only screen and (min-width: 2561px) {



}