:root {

--animace: ease 0.4s;
--gap: 1.25rem;
--gap-l: 1.5rem;
--gap-m: 1rem;

--white: white;
--black: black;
--yellow: #FFE281;
--background: #F9F4E8;

--classico:  #D0303D;
--fruttoso: #ED6B1F;
--ionico: #B6D0EA;
--naturale: #529064;
--vitale: #F5BF5A;
--energico: #827E9F;

}


.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  
.poppins-bold {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
  }

  
  .abril-fatface-regular {
    font-family: "Abril Fatface", serif;
    font-weight: 400;
    font-style: normal;
  }

  
  .playwrite-au-vic-400 {
    font-family: "Playwrite AU VIC", cursive;
    font-optical-sizing: auto;
    font-weight: 400;
    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;}
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;}
strong {font-weight: 700;}
iframe {width: 100% !important;}

.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; }

html {margin: 0; padding: 0; background: var(--black); color: var(--white); scroll-behavior: smooth; overflow-x: hidden;}
body {font-family: 'Poppins', sans-serif; font-size: 16px; margin: 0; padding: 0; overflow-x: hidden; background-color: var(--black); color: var(--white); width: 100%; box-sizing: border-box; font-weight: 300;}
.HP section {margin: 3rem 0; position: relative;}
section {margin: 4rem 0; position: relative;}
.Main section:last-of-type {margin-bottom: 0;}
.font-play {font-family: "Playwrite AU VIC"; font-weight: normal;}


/* zaklad */

h1, h2, h3, h4, h5 {}
h1 {font-size: 2.5rem; padding-bottom: 0; margin-bottom: 0;}
h2 {font-size: 2rem; margin-bottom: 0.4em;}
h3 {font-size: 1.5rem;}

.HP main h2,
.HP main h3 {font-family: "Abril Fatface", serif; font-size: 6.25rem; font-weight: normal;}

.Main {position: relative; padding: 1px 0; padding-bottom: 60px; color: var(--black); background-color: var(--background); z-index: 1;}
.HP .Main {padding: 3rem 0; background-color: var(--background); z-index: 2;}
.width {margin: 0 auto; position: relative; z-index: 1; max-width: 1276px; width: 96%;}
.width--100 {width: 100%; padding: 0 3rem; box-sizing: border-box; max-width: 100%;}
.width--700 {max-width: 700px;}
.width--1920 {max-width: 1920px;}
.width--no-padding {padding: 0;}
.sec_bg {background-color: var(--background);}
.sec_white {background-color: var(--white);}

.fsize-20 {font-size: 1.25rem;}
blockquote {border-left: 6px solid var(--naturale); padding: 1rem 2rem; margin: 0.5rem 0;}

body.white .header-top,
body.white .Main {background-color: var(--white);}


/* Menu */

.header-menu {display: flex;}
.header-menu li {list-style: none; position: relative;}
.header-menu li a {display: block; padding: 0.5rem 1rem; font-size: 1.125rem;}
.header-menu li a:hover {color: var(--naturale);}
.header-menu > li:nth-child(1) a {padding-left: 0;}
.header-menu li.active a {font-weight: bold; position: relative;}
.header-menu > li.active > a::after {content: ""; position: absolute; top: 0.5rem; right: 0.25rem; display: block; background-color: var(--vitale); width: 6px; height: 6px; border-radius: 8px;}
.header-menu li ul {display: none; position: absolute; top: 40px; left: 0; width: 220px; padding: 0; margin: 0; background-color: var(--white); z-index: 20; 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(--black); border-top: 1px solid var(--background); font-size: .875rem; padding: 0.75rem 1rem ;}
.header-menu li:hover ul a:hover {color: var(--naturale);}

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

.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;}

.perex {font-size: 1.75rem; max-width: 840px; margin: 5rem auto;}
.perex--left {margin-left: 0; margin-right: auto;}

/* KOMPONENTY */

/* Tlacitka */
.button {display: inline-flex; font-size: 1rem; text-decoration: none; padding: .75rem 1.5em; transition: var(--animace); background-color: var(--naturale); color: var(--white); cursor: pointer; margin: 0 .25rem; text-align: center; position: relative; z-index: 1; border-radius: 50px; align-items: center; font-weight: normal; transition: var(--animace); margin-top: 1.5rem;}
.button--no-text {text-indent: -999999px; padding: 1rem 1.5rem; font-size: 1rem;}
.button--no-text span {display: block; width: 1px; height: 1px; margin-left: -1px; overflow: hidden;}
.button::after {content: ""; display: block; width: 20px; height: 15px; background: url(../images/ico_button_arrow.svg) center no-repeat; margin-left: 0.5rem;}
.button::before {content: ""; position: absolute; right: 0; top: -0.75rem; display: block; width: 12px; height: 12px; border-radius: 12px; background-color: var(--naturale); transition: var(--animace); z-index: -1;}
.button--no-text::after {margin-left: 0;}
.button--black {background-color: var(--black);}
.button--black::before {background-color: var(--black);}

.button.button--black:hover {background-color: var(--naturale);}

.button:hover {background-color: var(--black); color: var(--white);}
.button:hover::before {right: 1rem; top: 1rem; z-index: -1; opacity: 0;}

/* Cestar */

.cestar ul {display: flex; padding: 0; flex-wrap: wrap; font-size: 0.875rem; align-items: center; margin: 0; margin-bottom: 2rem;}
.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(--naturale); border-radius: 10px;}
.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; position: relative; max-width: 1060px; padding: 3.5rem 5rem 3.5rem; border: 1px solid #bbb;}
.formularek.formularek--poptavka {padding-top: 5rem;}
.formularek > .form_wrap { display: flex; gap: var(--gap); margin-top: 0;}
.formularek--poptavka > .form_wrap { display: flex; gap: var(--gap); margin-top: 3rem;}
.formularek > .form_wrap > * { width: 50%; }
.formularek input,
.formularek textarea { background-color: var(--white); width: 100%; box-sizing: border-box; border: 1px solid #BBBBBB; font-family: 'Poppins', sans-serif, sans-serif; font-size: 1rem; padding: .75rem 1rem; outline: none; line-height: 24px; margin: 0;}
.formularek textarea { min-height: 248px; }
.formularek .f_formItem { margin-bottom: 1rem;}
.formularek .f_formItem_label { margin-bottom: 0.5rem;text-align: left;}
.formularek .f_buttons {text-align: center; margin-top: 2rem;}
.formularek .button { border: none; margin-bottom: 0; cursor: pointer; margin: 0; font-family: 'Poppins', sans-serif; font-size: 1rem;}
.formularek .button:hover { background-color: var(--black); color: var(--white); }
.formularek .buttons {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 2rem;}
.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;}

.formularek p {text-align: center;}
.formularek h2 {text-align: center; position: absolute; left: 50%; transform: translateX(-50%); margin: 0; padding: 0; top: -1.5rem; padding: 0 1rem; background-color: var(--white);}

/* Header */
header {position: relative; z-index: 3;}
.HP header {}
.header-top {padding: 2rem 0; color: var(--black); background-color: var(--background);}
.header-top .width {display: flex; justify-content: space-between; align-items: center; gap: 1rem; position: relative; z-index: 3;}
.header-top .header-left {display: flex; align-items: center;}
.header-top a {text-decoration: none;}
.header-logo a {display: block;}
.header-logo a img {display: block;}
.header-contacts {display: flex; margin: 0; padding: 0; gap: 1.5rem;}
.header-contacts li {list-style: none;}
.header-contacts li a {display: flex; gap: .5rem; align-items: center;}
.header-contacts li a::before {content: ""; display: block; width: 46px; height: 46px; border: 1px solid #ccc; border-radius: 46px; background-position: center; background-repeat: no-repeat; transition: var(--animace);}

.header-contacts li.header-contacts__tel a::before {background-image: url(../images/ico_mobile.svg);}
.header-contacts li.header-contacts__email a::before {background-image: url(../images/ico_email.svg);}

.header-contacts li a:hover::before {background-color: var(--white); border-color: var(--naturale);}

.HP header {background: var(--background); overflow: hidden; position: relative;}
.header-bottom {font-family: "Abril Fatface"; color: var(--naturale); font-size: 2.875rem; padding-bottom: 4rem; position: relative;}
.header-bottom::after {content: ""; display: block; height: 46px; width: 100%; position: absolute; left: 0; bottom: 0; z-index: 10; background: rgb(249,244,232);
  background: linear-gradient(0deg, rgba(249,244,232,1) 0%, rgba(249,244,232,0) 100%);}
.header-bottom .width {display: flex; align-items: center; text-align: right; position: relative; z-index: 2;}
.header-bottom .width figure {width: 60%; flex-shrink: 0; margin: 0; padding: 0;}
.header-bottom h1 {position: relative; z-index: 5; font-family: "Abril Fatface"; color: var(--naturale); font-size: 2.875rem; font-weight: normal;}

.element {position: absolute; top: 35%; left: 80px; z-index: 1; will-change: transform;}
.element-1 {z-index: 1;}
.element-2 {right: 80px; left: unset; top: 50%; z-index: 2;}
.element-3 {right: 48%; left: unset; top: 15%;}
.element-4 {right: 60%; left: unset; bottom: 10%; top: unset;}
.element-5 {right: 30%; left: unset; top: unset; bottom: 5%; z-index: 5;}


/* Cols Col */

.cols {display: flex; gap: 4rem;}

/* Homepage */

.HP .header-logo {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.HP .header-logo img {width: 200px;}

.hlavni .sec_top {margin: 0;}
.HP section h2 {margin-top: 0;}

/* hp nápoje */

.HP .sec_napoje,
.sec_yellow {background-color: #FFE281; text-align: center; padding: 0; margin: 10rem 0; font-size: 1.25rem; margin-bottom: -64px; position: relative; z-index: 1;}
.HP .sec_napoje::before,
.sec_yellow::before {content: ""; display: block; width: 100%; height: 4rem; background-color: #FFE281; clip-path: polygon(100% 0, 0 100%, 100% 100%); transform: translateY(-63px);}
.HP .sec_napoje::after,
.sec_yellow::after {content: ""; display: block; width: 100%; height: 4rem; background-color: #FFE281; clip-path: polygon(0 0, 0% 100%, 100% 0); transform: translateY(63px);}
.sec_napoje p {max-width: 800px; margin: 1.5rem auto;}
.zaostreno-na-kvalitu {margin: 6rem auto 2rem; position: relative; width: 500px; height: 500px; background: url(../images/napoje-unique-hp.webp) center  no-repeat; background-size: contain; display: flex; justify-content: center; align-items: center; padding: 4rem 0; max-width: 100%;}
.zaostreno-na-kvalitu::after {content: ""; display: block; width: 660px; height: 148px; background: url(../images/napoje-boruvky.webp) left center no-repeat; position: absolute; top: 50%; left: 100%; transform: translateY(-50%); margin-left: 40px; margin-top: -10px;}
.zaostreno-na-kvalitu::before {content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 50vw; display: block; background-color: red; background: url(../images/hp_krabice.webp) top right no-repeat; transform: translateX(-100%); background-size: auto 100%;}

.bubble_list {display: flex; justify-content: center; gap: 2rem; margin: 6rem 0; position: relative; z-index: 2;}
.bubble_list::before {content: ""; height: 2rem; width: 100%; max-width: 800px; position: absolute; background-color: var(--black); bottom: -16px; border-radius: 70%; opacity: 0.1; z-index: 0; filter: blur(12px);}
.bubble {transition: var(--animace); position: relative;}
.bubble:hover {transform: translateY(-8px);}
.hp-napoje-text {margin: 0 auto;}
.hp-napoje-text .button {margin-top: 3rem;}


/* hp o nas */

.sec_onas {padding: 10rem 0; font-size: 1.25rem;}
.HP .Main .sec_onas h2 {font-family: "Poppins"; font-size: 2rem; font-weight: bold;}
.sec_onas .logo {transform: translateY(-10rem); margin-bottom: -7rem;}


/* hp spoluprace */

.HP .Main .sec_spoluprace h2 {font-family: "Playwrite AU VIC"; transform: translateY(-100%); margin-bottom: -7rem; margin-top: 5rem;}
.HP .Main .sec_spoluprace p {max-width: 650px;}
.sec_spoluprace .button {margin: 3rem 0;}
.partneri_list {display: flex; align-items: center; justify-content: center; gap: 3rem; margin: 3rem 0; position: relative; flex-wrap: wrap;}
.partner {position: relative;}


/* Automaty */

.automat_list {position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4rem 2rem; margin: 5rem auto; text-align: center; max-width: 860px;}
.automat_list.automat_list--4 {grid-template-columns: repeat(4, 1fr);}
.HP .automat_list {grid-template-columns: repeat(3, 1fr); max-width: unset;}
.automat {position: relative;}
.HP .automat h3,
.automat h3 {font-family: "Poppins"; font-weight: 700; font-size: 1.5rem; text-transform: uppercase;}
.automat__icons {display: flex; gap: .5rem; justify-content: center; margin: 1rem 0;}
.automat__icons > div {display: flex; width: 40px; height: 40px; border-radius: 40px; border: 1px solid var(--naturale); background-position: center; background-repeat: no-repeat;}
.automat p {max-width: 360px; margin-left: auto; margin-right: auto;}
.automat .button {margin-top: 1.5rem;}

.ico_teply-napoj {background-image: url(../images/ico_teply-napoj.svg);}
.ico_studeny-napoj {background-image: url(../images/ico_studeny-napoj.svg);}
.ico_voda {background-image: url(../images/ico_voda.svg);}
.ico_teplota-regulace {background-image: url(../images/ico_napoj-teplota.svg); background-position:  12px center !important;}

.tpl_automaty .Main {padding-bottom: 0rem;}
.tpl_automaty h1 {font-size: 2rem; text-align: center;}
.tpl_automaty .cestar ul {justify-content: center;}

.tpl_automaty .sec_receptury {padding:10rem 0 5rem;}
.vyhody_list {display: grid; gap: 3rem; grid-template-columns: 1fr 1fr 1fr; text-align: left; font-size: 1rem; margin: 4rem 0; position: relative;}
.vyhoda {position: relative;}
.tpl_automaty .Main h2 {font-family: "Abril Fatface", serif; font-weight: normal; font-size: 3.5rem;}
.vyhoda h3 {font-size: 1.5rem;}
.vyhoda__cislo {display: flex; width: 2.5rem; height: 2.5rem; background-color: var(--background); border-radius: 80px; justify-content: center; align-items: center; font-size: .75rem; font-weight: 700;}


.automat_top {display: grid; align-items: center; gap: 4rem; grid-template-columns: 5fr 6fr; position: relative;}
.automat_top__text p:nth-child(1) {font-size: 1.25rem;}
.automat_vlastnosti {display: flex; margin: 3rem 0; flex-wrap: wrap; gap: 1rem 2rem; padding: 0; font-weight: 700;}
.automat_vlastnosti li {list-style: none; display: flex; align-items: center;}
.automat_vlastnosti li::before {content: ""; display: block; width: 2.5rem; height: 2.5rem; background-color: transparent; border-radius: 100px; margin-right: 0.5rem; border: 1px solid var(--naturale); background-position: center; background-repeat: no-repeat;}


.vlastnost_teply::before {background-image: url(../images/ico_teply-napoj.svg);}
.vlastnost_studeny::before {background-image: url(../images/ico_studeny-napoj.svg);}
.vlastnost_voda::before {background-image: url(../images/ico_voda.svg);}
.vlastnost_kapacita::before {background-image: url(../images/ico_kapacita.svg);}
.vlastnost_stravnici::before {background-image: url(../images/ico_stravnici.svg);}
.vlastnost_regulace::before {background-image: url(../images/ico_napoj-teplota.svg);}

.automat_detail {display: grid; grid-template-columns: 1fr 380px; gap: 6rem; margin: 5rem 0 1rem;}
.automat_detail  .receptury_list {gap: 1rem;}


.automat_detail .receptury_list {grid-template-columns: repeat(3, 1fr); margin: 1.5rem 0;}
.automat_detail .receptura__img {width: unset; height: unset;}
.automat_detail .button {margin-left: auto; margin-right: auto;}
.pt5 {padding-top: 5rem;}


/* Nápoje */

.tpl_napoje .Main {padding-bottom: 0;}
.tpl_napoje h1 {font-size: 2rem; text-align: center;}
.tpl_napoje .cestar ul {justify-content: center;}
.neobsahuji ul {display: flex; margin: 3rem 0 8rem; padding: 0; justify-content: center; gap: 5rem; font-size: 2rem; font-weight: bold; color: rgba(0, 0, 0, 0.25);}
.neobsahuji ul li {list-style: none; padding: 0; margin: 0; transition: var(--animace); position: relative; cursor: not-allowed;}
.neobsahuji ul li:hover {color: var(--black);}

.neobsahuji ul li::after {content: ""; display: block; width: 0; height: 100%; background: url(../images/erase.svg) center left no-repeat; position: absolute; bottom: 0px; left: 0; right: 0; transition: var(--animace);}
.neobsahuji ul li:hover::after {width: 100%;}
.neobsahuji h2 span {color: var(--vitale);}

.eko_baleni {display: flex; align-items: center; margin: 5rem 0; justify-content: center;}
.eko_baleni__text {max-width: 800px; font-size: 1.25rem; font-size: 1rem;}
.eko_baleni__text h2 {font-size: 2.875rem; font-family: "Abril Fatface", serif; color: var(--naturale); font-weight: normal; max-width: 640px; margin-top: 0; padding-top: 0;}
.eko_baleni__text h2 span {color: var(--black);}
.eko_baleni .button {margin-top: 2rem;}

.sec_napoje_rady {background-color: var(--white); padding: 5rem 0 0.1rem; margin-bottom: 0;}
.sec_napoje_rady h2 {text-align: center;}

.rada {display: flex; justify-content: center; align-items: center ; gap: 9rem; margin: 6rem 0; position: relative; padding: 0 2rem;}
.rada > * {flex: 1;}
.rada__img {text-align: right;}
.rada__img h3 {text-transform: uppercase; font-size: 1.25rem; letter-spacing: 0.2ch; margin-top: 0;}
.rada__text .wrap {text-align: left; max-width: 560px;}
.rada__text .button {margin-top: 1.5rem; font-size: 1rem;}

.rada:nth-child(even) {flex-direction: row-reverse;}
.rada:nth-child(even) .rada__text {display: flex; justify-content: flex-end;}
.rada:nth-child(even) .rada_energy ul {justify-content: flex-end;}
.rada:nth-child(even) .rada__text .wrap {text-align: right;}
.rada:nth-child(even) .rada__img {text-align: left;}
.rada:nth-child(even) .rada_energy::after {margin-right: 0; margin-left: auto;}

.rada_energy ul {padding: 0; margin: 1rem 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-weight: 700;}
.rada_energy ul li {list-style: none;}
.rada_energy::after {content: ""; display: block; width: 100px; height: 1px; background-color: var(--naturale); margin-bottom: 1rem;}

.rada--fruttoso .rada_energy::after {background-color: var(--fruttoso);}
.rada--classico .rada_energy::after {background-color: var(--classico);}
.rada--vitale .rada_energy::after {background-color: var(--vitale);}
.rada--ionico .rada_energy::after {background-color: var(--ionico);}
.rada--energico .rada_energy::after {background-color: var(--energico);}

.rada__cislo {content: "1"; width: 2.75rem; height: 2.75rem; background-color: var(--background); border-radius: 40px; color: var(--naturale); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; justify-content: center; align-items: center; font-weight: 700; font-size: .875rem; z-index: 1; border: 1rem solid var(--white);}

.rada--naturale h3 span,
.rada--naturale ul span,
.rada--naturale .rada__cislo {color: var(--naturale);}
.rada--fruttoso h3 span,
.rada--fruttoso ul span,
.rada--fruttoso .rada__cislo {color: var(--fruttoso);}
.rada--classico h3 span,
.rada--classico ul span,
.rada--classico .rada__cislo {color: var(--classico);}
.rada--ionico h3 span,
.rada--ionico ul span,
.rada--ionico .rada__cislo {color: var(--ionico);}
.rada--vitale h3 span,
.rada--vitale ul span,
.rada--vitale .rada__cislo {color: var(--vitale);}
.rada--energico h3 span,
.rada--energico ul span,
.rada--energico .rada__cislo {color: var(--energico);}

.rada--naturale .button:hover {background-color: var(--naturale); color: var(--white);}
.rada--vitale .button:hover {background-color: var(--vitale); color: var(--white);}
.rada--classico .button:hover {background-color: var(--classico); color: var(--black);}
.rada--fruttoso .button:hover {background-color: var(--fruttoso); color: var(--white);}
.rada--ionico .button:hover {background-color: var(--ionico); color: var(--black);}
.rada--energico .button:hover {background-color: var(--energico); color: var(--white);}

.rada::after {content: ""; display: block; width: 1px; height: 100%; background: #ededed; position: absolute; left: 50%; z-index: 0; height: calc(100% + 12rem);}

.rada--naturale::after {height: calc(50% + 6rem); top: 50%;}
.rada--energico::after {height: calc(50% + 6rem); bottom: 50%; top: unset;}

.sec_concept_filtr {display: grid; grid-template-columns: 1fr 626px; padding: 0; margin: 0; background-color: var(--ionico);}
.sec_concept {background: #D1D2D4 url(../images/bg_concept.webp) right top no-repeat; padding: 2.5rem; background-size: cover; display: flex; align-items: end;}
.sec_concept > div {max-width: 560px;}
.sec_concept h2 {margin-top: 0.5rem;}
.sec_concept .button {margin-top: 1rem; margin-left: 0;}


.sec_filtr {padding: 1.5rem 1rem; text-align: center;}
.sec_filtr a {text-decoration: none;}
.sec_filtr .label {color: var(--white); font-size: 3.75rem; font-weight: bold;}


.napoj_logo {display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 4rem;}
.napoj_energy_box {font-weight: 700; font-size: 1.5rem;}
.napoj_energy_box::before {content: ""; display: block; width: 100px; height: 1px; background-color: #bbb; margin-bottom: 1rem; margin: 0 auto;}
.napoj_energy_box ul {display: flex; justify-content: center; align-items: center; gap: 0.25rem 2rem; margin-left: 0; padding-left: 0; flex-wrap: wrap;}
.napoj_energy_box ul li {list-style: none; padding: 0; margin: 0;}

.napoj_energy_box ul li span {color: var(--classico);}
.napoj_energy_box--naturale ul li span {color: var(--naturale);}
.napoj_energy_box--vitale ul li span {color: var(--vitale);}
.napoj_energy_box--energico ul li span {color: var(--energico);}
.napoj_energy_box--ionico ul li span {color: var(--ionico);}
.napoj_energy_box--fruttoso ul li span {color: var(--fruttoso);}


.energy_tab_list {display: flex; justify-content: center; gap: 4rem; margin-top: 2rem; font-size: 1.25rem; padding-bottom: 5rem;}
.energy_col div {text-align: center;}
.energy_col div:nth-child(2) {font-weight: 700; font-size: 2.5rem; margin-top: 2rem;}

.wrap_napoj_top {position: relative; margin: 0 1rem;}
.napoj_arrow {position: absolute; top: 50%; left: 0%; transform: translateY(-50%); text-align: center; text-decoration: none; font-size: 1.25rem; display: flex; align-items: center; z-index: 5;}
.napoj_arrow::before {content: ""; display: block; width: 80px; height: 80px; background: white url(../images/arrow_right.svg) center no-repeat; border-radius: 100px; background-size: 24px; transition: var(--animace); margin-right: 0.5rem;}
.napoj_arrow:hover::before {filter: invert(1);}
.napoj_arrow_right {left: unset; right: 0; flex-direction: row-reverse;}
.napoj_arrow_left::before {transform: rotate(180deg);}
.napoj_arrow_right::before {margin-right: 0; margin-left: .5rem; }

.wrap_napoj_top .center {display: block; text-align: center; position: relative; padding-bottom: 1rem;}

.sec_receptury {padding: 1rem 0; margin: 0;}
.sec_receptury h2 {font-family: "Abril Fatface", serif; font-weight: normal; font-size: 3.5rem;}
.receptury_list {display: grid; gap: 2rem; margin: 4rem 0; flex-wrap: wrap; font-family: "Playwrite AU VIC"; grid-template-columns: repeat(auto-fit, minmax(min(146px,100%),1fr));}
.receptura {text-align: center; margin: 0 auto; background: url(../images/blob_pink.svg) top center no-repeat; background-size: contain; position: relative;}
.receptura.blob-green {background-image: url(../images/blob_green.svg);}
.receptura.blob-orange {background-image: url(../images/blob_orange.svg);}

.receptura__img {width: 160px; height: 160px; display: flex; justify-content: center; align-items: center;}
.receptura__img img {display: block; width: 100%; max-width: 132px;}

.sec_automat {margin: 0; padding: 2rem 0;}


/* O nás */

.unique_top {display: grid; grid-template-columns: 7fr 5fr; gap: 4rem; align-items: center;} 
.vyhody_list--2 {grid-template-columns: repeat(2, 1fr); gap: 1.5rem 4rem;}


/* Nano Filtr Aqua Pure */
.header_bottom_img {display: block; width: 100%; max-height: 650px; height: 65vh; min-height: 300px; background: url(../images/bg_aquapure.webp)left top no-repeat; background-size: cover;}
.tpl_aqua h1 {font-size: 7.5rem; color: var(--ionico); margin-top: 160px;}
.aqua_gallery {display: flex; gap: 1.25rem; margin: 3rem 0 5rem;}
.aqua_bottom p {max-width: 700px;}
.aquapure_vyhody {margin: 3rem 0; display: flex; justify-content: center; gap: 4rem;}
.kazety-top {position: absolute; right: 0rem; bottom: -10rem;}

/* UNIQUE Concept */

.tpl_concept .header_bottom_img {background: #ccc url(../images/bg_unique_concept.webp) right top no-repeat; background-size: cover; position: relative; z-index: 0;}
.tpl_concept .header_bottom_img .width {position: relative; display: flex; align-items: center; height: 100%;}
.tpl_concept h1 {color: var(--black); font-size: 3rem; margin: 1rem 0;}
.tpl_concept h1:before {content:""; display: block; width: 132px; height: 59px; background: url(../images/u_concept_logo.svg);}

/* Kontakt */

.tpl_kontakt section {margin-top: 7rem; padding: 7rem 0 3rem; border-top: 1px solid #bbb;}
.kontakty_list {display: flex; gap: 0 4rem; margin-top: 4rem; flex-wrap: wrap;}
.kontakty_top {display: flex; gap: 4rem; align-items: center;}
.kontakty_top > div {flex: 1;}
.kontakty_top h2 {margin-top: 0;}
.kontakty_top p {margin: 1rem 0;}


/* Footer */

footer {background-color: var(--black); color: var(--white); padding: 3.75rem 0 0; color: var(--background); font-size: .875rem;}
footer ul {padding: 0; margin: 0;}
footer ul li {list-style: none;}
footer ul li a {text-decoration: none;}
footer h2 {font-size: 20px; margin-top: 0;}
.footer-top .width {display: flex; justify-content: space-between; gap: 8rem;}
.footer_lang {display: flex; gap: 1rem; margin-top: 2rem; justify-content: flex-end;}
.footer-contact {display: flex; align-items: flex-start; gap: 1.5rem;}
.footer-contact::before {content:""; display: block; width: 52px; height: 118px; background: url(../images/logo_U_white.svg) center no-repeat; flex-shrink: 0;}
.footer-pripoj {text-align: right; max-width: 560px;}


.footer-bottom {margin-top: 3rem;}
.footer-bottom .width {border-top: 1px solid rgba(255, 255, 255, 0.2); padding: 3rem 0; display: flex; justify-content: space-between;}
.footer-bottom span {display: inline-block; color: #555; margin: 0 8px;}



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

}


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

  .HP .header-logo {position: relative; left: unset; top: unset; transform: unset;}
  .HP .header-logo img {width: unset;}
  .tpl_aqua h1 {font-size: 6rem;}

}


@media only screen and (max-width: 1276px) {
	
	.width {width: unset; margin: 0 2rem;  max-width: 100%;}
  .width--100 {padding: 0;}
  .header-contacts {gap: 0.5rem; margin-right: 60px;}
  .header-contacts li a {text-indent: -9999999px; gap: 0; overflow: hidden;}
  .header-contacts li a span {display: block; width: 1px; height: 1px; margin-left: -1px; overflow: hidden;}
  .HP .Main .sec_spoluprace h2 {font-size: 4rem;}
  .sec_filtr .label {font-size: 2.5rem;}
  .footer-top .width {gap: 3rem;}
    
}


@media only screen and (max-width: 1199px) {
	
	h1 {font-size: 2rem;}
  .perex {font-size: 1.25rem; margin-top: 3rem; margin-bottom: 3rem;}
  .neobsahuji ul {font-size: 1.25rem; gap: 1.25rem; margin: 3rem 0;}
  .eko_baleni__obr {min-width: 300px;} 
  .eko_baleni__text h2 {font-size: 2rem;}
  .eko_baleni__text {font-size: 1.125rem;}
  .rada__img h3 {font-size: 1rem;}
  .sec_concept_filtr {grid-template-columns: 1fr 1fr;}
  .sec_filtr {display: flex; align-items: center;}
  .sec_filtr a {display: block;}
  .napoj_arrows {position: relative; display: flex; justify-content: center; gap: 1.5rem; margin-top: 2rem;}
  .napoj_arrow {position: relative; font-size: 14px; font-weight: 700; width: 50%;}
  .napoj_arrow::before {width: 46px; height: 46px; background-size: unset;}
  .kazety-top {max-width: 50%;}

}

/* 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: var(--black); background: transparent; margin-right: 0; padding-right: 0; position: absolute; right: 0; cursor: pointer;}
  .HP main h2, 
  .HP main h3 {font-size: 3.25rem;}
  .header-bottom h1 {font-size: 2.5rem;}
  .header-bottom .width figure {width: 50%;}
  .element-2 {display: none;}
  .zaostreno-na-kvalitu {padding: 0; margin: 2rem auto;}
  .zaostreno-na-kvalitu::before,
  .zaostreno-na-kvalitu::after {display: none; background: none;}
  .formularek {padding: 1.5rem; padding-bottom: 2.5rem;}
  .automat_list.automat_list--4 {grid-template-columns: 1fr 1fr 1fr;}

}


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

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

  h3,
  .vyhoda h3 {font-size: 1.25rem;}
  .header-bottom .width {flex-wrap: wrap; flex-direction: column-reverse;}
  .header-bottom .width figure {width: unset;}
  .header-bottom h1 {text-align: center;}
  .rada {flex-direction: column; gap: 0.5rem;}
  .rada__cislo {position: relative; top: unset; transform: unset; left: 0; flex-shrink: 0; flex-basis: unset;}
  .rada__text .wrap,
  .rada:nth-child(even) .rada__text .wrap {text-align: center;}
  .rada_energy ul,
  .rada:nth-child(even) .rada_energy ul {justify-content: center;}
  .rada::after {display: none;}
  .rada:nth-child(even) {flex-direction: column;}
  .rada__img h3 {text-align: center;}
  .rada_energy::after,
  .rada:nth-child(even) .rada_energy::after {margin: 1rem auto;}
  .energy_col div:nth-child(2) {font-size: 2rem; margin-top: .5rem;}
  .energy_tab_list {gap: 1rem 2rem; font-size: 1rem; padding-bottom: 2rem;}
  .automat_top,
  .automat_detail {grid-template-columns: 1fr; gap: 2rem; margin-top: 2rem;}
  .unique_top {display: flex; flex-direction: column-reverse; gap: 1rem;}

  .HP .sec_napoje, 
  .sec_yellow {margin: 5rem 0;}
  .HP .sec_napoje::before,
  .sec_yellow::before {height: 2rem; transform: translateY(-31px);}
  .HP .sec_napoje::after,
  .sec_yellow::after {height: 2rem; transform: translateY(31px); margin-bottom: -6rem;}
  .tpl_aqua h1 {font-size: 4rem;}
  .aqua_gallery {gap: 1rem;}
  .aquapure_vyhody {flex-direction: column; gap: 0.25rem;}
  


    
}

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

@media only screen and (max-width: 767px) {
  .HP .automat_list {display: flex; overflow: scroll; padding-bottom: 1rem; margin: 3rem -3rem; padding-left: 3rem; padding-right: 3rem;}
  .HP .automat {width: 58vw; flex-shrink: 0;}
  .HP .Main .sec_spoluprace h2 {transform: unset; margin-bottom: unset; font-size: 3rem;}
  .bubble_list {gap: 1rem;}
  .sec_onas {padding-bottom: 3rem;}
  .footer-top .width {flex-wrap: wrap;}
  .footer-pripoj {max-width: unset; text-align: left;}
  .footer_lang {justify-content: start;}
  .sec_concept {text-shadow: 0 0 25px var(--white);}
  .eko_baleni {flex-direction: column; gap: 2rem;}
  .sec_kontakt section {padding-top: 4rem; margin-top: 3rem; padding-bottom: 1rem;}
  .kontakty_top {flex-wrap: wrap;}
  .kontakty_top > div {flex-grow: 1; flex-basis: unset;}
  .formularek h2 {top: -1rem;}
  .automat_list,
  .automat_list.automat_list--4 {grid-template-columns: 1fr 1fr;}
  .vyhody_list {grid-template-columns: 1fr 1fr; margin: 1rem 0;}
  .sec_concept_filtr {display: block;}


}


/* phones */

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

  h1 {font-size: 1.5rem;}
  h2 {font-size: 1.25rem;}
  h3,
  .vyhoda h3 {font-size: 1.125rem;}
  .sec_receptury h2,
  .tpl_concept h1 {font-size: 2rem;}
  .width {margin: 0 1.125rem;}
  .footer-bottom .width {flex-wrap: wrap;}
  .sec_onas .logo {max-width: 60px; margin-left: auto; margin-right: auto;}
  .partneri_list {flex-wrap: wrap; gap: 2.5rem;}
  .bubble_list {display: grid; grid-template-columns: repeat(3, 1fr);}
  .zaostreno-na-kvalitu > img {max-width: 40%;}
  .element-5 {right: 5%;}
  .element-3,
  .element-2,
  .element-1 {display: none;}
  .fsize-20,
  .HP .sec_napoje,
  .sec_onas,
  .button {font-size: 1rem;}
  .HP main h2, .HP main h3 {font-size: 2.5rem;}
  .HP .Main .sec_onas h2,
  .HP .Main .sec_spoluprace h2 {font-size: 1.5rem; margin: 1em 0 0.5em;}
  .HP .sec_napoje .font-play {font-size: 1.25rem;}
  .rada {margin: 4rem 0;}
  .formularek > .form_wrap {flex-wrap: wrap;}
  .formularek > .form_wrap > * {width: 100%;}
  .formularek textarea {min-height: 120px;}
  .energy_tab_list {flex-direction: column;}
  .receptury_list {gap: 1rem;}
  .tpl_automaty .Main h2 {font-size: 2.25rem;}
  .tpl_aqua h1 {font-size: 2.5rem;}
  .kazety-top {bottom: -60px;}
  .tpl_aqua h1 {margin-top: 80px;}

}


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

  footer ul {display: flex; gap: 0.5rem;}
  .neobsahuji ul li {display: flex; align-items: center; font-size: 1rem;}
  .automat_list,
  .automat_list.automat_list--4 {grid-template-columns: 1fr;}
  .vyhody_list {grid-template-columns: 1fr; gap: 2rem;}
  .vyhoda {text-align: center;}
  .vyhoda__cislo {margin-left: auto; margin-right: auto;}
  .aqua_gallery {display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 2rem;}
  .aqua_gallery div:nth-child(1) {grid-column: 1 / 3;}
  .aqua_gallery div:nth-child(2),
  .aqua_gallery div:nth-child(2) {grid-row: 2;}
  .aquapure_vyhody {margin-top: 2px;}
}


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

}

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


}