#menuMobile {display: none;}
#menuMobileFrame {display: none;}


#header {position: fixed; z-index: 500; left: 0; top: 0; width: 100%; height: 90px; float: left; padding: 0; background-color: #ffffff; border-bottom: 1px solid #000; transition: all 0.5s ease;}
#header .inner {width: 100%; height: 90px; float: left; justify-content: space-between; transition: all 0.5s ease;}
#header .inner .logo {width: 240px; height: 70px; padding: 0; margin: 0 0 20px 0; background-color: #fff; transition: all 0.5s ease; align-items: flex-end;}
#header .inner .logo img {display: block; height: 30px; max-height: 100%; }
#header .inner .menuFrame {margin: 0 0 0 0; align-items: center;}
#header .inner .menuFrame .menu {height: 100%;}
#header .inner .menuFrame .menu ul {list-style: none; margin: 0; padding: 0;}
#header .inner .menuFrame .menu ul li {position: relative; list-style: none; margin: 0; padding: 0; transition: all 0.5s ease;}
#header .inner .menuFrame .menu ul li a {margin: 0; padding: 0 20px 15px 20px; font-size: 17px; text-transform: uppercase; font-weight: 500; align-items: flex-end;}
#header .inner .menuFrame .menu ul li:hover {color: #0094c1; transition: all 0.5s ease;}
#header .inner .menuFrame .menu ul li.active {color: #0094c1; transition: all 0.5s ease;}

#header .inner .menuFrame .menu ul li ul.submenu {display: none; position: absolute; left: 0; top: 100%; width: 100%; min-width: 300px; padding: 0; background-color: #d79a2b; list-style: none;}
#header .inner .menuFrame .menu ul li ul.submenu li {padding: 0; margin: 0; border-top: 1px solid #c68510;}
#header .inner .menuFrame .menu ul li ul.submenu li a {display: block; margin: 0; padding: 10px 20px;}
#header .inner .menuFrame .menu ul li ul.submenu li a:hover {background-color: #c68510;}
#header .inner .menuFrame .menu ul li:hover ul {display: block;}

#header .inner .searchFrame {width: 240px; height: 70px; margin-bottom: 20px; align-items: flex-end; justify-content: flex-end; transition: all 0.5s ease;}
#header .inner .searchFrame .cover {position: relative; background-color: #efefef; border-radius: 20px; color: #969696; background-image: url("/images/icon-search.svg"); background-size: 20px auto; background-repeat: no-repeat; background-position: right 10px center;}
#header .inner .searchFrame .cover.active {box-shadow: inset 0 0 4px rgba(0,0,0,0.15);}
#header .inner .searchFrame .cover input[type="text"] {width: 100px; padding: 10px 16px; border: 0; background-color: transparent; font-weight: 400; transition: width 0.3s ease;}
#header .inner .searchFrame .cover input[type="text"]:focus {width: 200px;}
#header .inner .searchFrame .cover input[type="submit"] {width: 40px; padding: 0; border: 0; background-color: transparent;}
#header .inner .searchFrame .cover input {padding: 10px 10px 10px 20px; background-color: #f1f1f1; border-radius: 20px; border: 0;}
#header .inner .searchFrame .cover input:focus {outline: unset; border: 0; box-shadow: unset;}


#header .inner .burgerFrame {display: none; height: 70px; transition: all 0.5s ease;}
#header.small .inner .burgerFrame {height: 38px;}


#header.small {height: 50px; transition: all 0.5s ease;}
#header.small .inner {height: 50px;}
#header.small .logo {height: 40px; padding: 0;}
#header.small .inner .searchFrame {height: 44px;}

#header.hide {transform: translateY(-100%);}


#headerPodFixed {width: 100%; float: left; height: 90px; background-color: #ffffff;}


#bannerContainer {width: 100%; float: left; align-items: center; justify-content: center;}

#banner {width: 100%; float: left; margin-top: 30px;}
#banner .mainFrame {width: 1288px;}
#banner .inner {width: 100%; float: left;}
#banner .inner .bannerList {width: 100%; margin: 0 auto;}
#banner .inner .bannerList .item {width: 100%; padding: 0; margin: 0;}
#banner .inner .bannerList .item .cover {width: calc(100% - 88px); padding: 0; margin: 0 44px; justify-content: space-between;}
#banner .inner .bannerList .item .cover .photo {width: 100%; height: auto; background-position: center; background-repeat: no-repeat; background-size: cover;}
#banner .inner .bannerList .item .cover .photo {border-radius: 20px;}
#banner .inner .bannerList .item .cover .photo img {max-width: 100%; max-height: 100%; border-radius: 20px;}
#banner .inner .bannerList .item .cover .data {width: 45%; color: #555554;}
#banner .inner .bannerList .item .cover .data h2 {color: #a5182d; text-transform: uppercase; font-size: 20px; font-weight: 700;}
#banner .inner .bannerList .swiper-button-next {top: calc(50% - 22px); width: unset; right: 0; left: unset; color: #000000 !important;}
#banner .inner .bannerList .swiper-button-next:after {display: none;}
#banner .inner .bannerList .swiper-button-prev {top: calc(50% - 22px); width: unset; left: 0; right: unset; color: #000000 !important;}
#banner .inner .bannerList .swiper-button-prev svg {}
#banner .inner .bannerList .swiper-button-prev:after {display: none;}
#banner .inner .bannerList .swiper-pagination-bullet {width: 18px; height: 18px; background-color: silver !important; opacity: 1 !important; border: 1px solid black;}
#banner .inner .bannerList .swiper-pagination-bullet-active { background-color: black !important;}
#banner .inner .bannerList .swiper-pagination-horizontal {position: relative; margin: 20px 0 0 0; bottom: unset;display: flex; align-items: center; justify-content: center;}


#homeText {width: 100%; float: left;}
#homeText .inner {width: 100%; float: left;}
#homeText .inner h1 {text-align: center; padding: 30px 0 20px;}
#homeText .inner .logo {width: 100%; margin: 50px 0 10px; text-align: center;}
#homeText .inner .logo img {width: 400px; max-width: 100%;}


#mainText {width: 100%; float: left; padding: 0 0 30px 0;}
#mainText .inner {width: 100%; float: left;}


#basicList {width: 100%; float: left; padding: 50px 0; background-color: #f1f1f1;}
#basicList.withFilesAtBottom {padding-bottom: 30px;}
#basicList .inner {width: 100%; float: left;}
#basicList .inner h2 {margin: 0; padding: 0 0 40px 0; text-align: center; font-size: 46px; text-transform: uppercase;}


.catList {width: 100%; float: left; flex-wrap: wrap;}
.catList .item {position: relative; width: calc(25% - 15px); margin: 10px 20px 10px 0; padding: 20px; background-color: #fff; border-radius: 20px; overflow: hidden; z-index: 1;}
.catList .item {flex-direction: column;}
.catList .item:nth-child(4n) {margin-right: 0;}
.catList .item .nadpis {}
.catList .item .nadpis h3 {text-align: center; font-size: 20px; text-transform: uppercase;}
.catList .item .photo {overflow: hidden; justify-content: center;}
.catList .item .photo img {}
.catList .item .data {position: absolute; transition: all 0.5s; transition-delay: 20ms; left: 0; top: 0; z-index: 0; width: 100%; height: 100%; padding: 20px; background-color: #000000; color: #fff; font-size: 17px; border-radius: 20px; opacity: 0;}
.catList .item .data {flex-direction: column; justify-content: space-evenly; align-items: center; text-align: center;}
.catList .item .data h4 {color: #1c9cd9; font-size: 22px; text-transform: uppercase;}
.catList .item .data .btn span {display: flex; align-items: center; justify-content: center; min-width: 120px; height: 36px; padding: 0px 14px 0px 14px; background-color: #1c9cd9; color: #ffffff; text-transform: uppercase; font-size: 18px; font-weight: 900; border-radius: 18px;}
/*.catList .item:hover {transform: scale(1.02); *transition-delay: 0.3s;}
.catList .item:hover .data {top: 0; *transition-delay: 0.3s;}*/
.catList .item.active {}
.catList .item.active .data {opacity: 1;}


#kontaktFrame {width: 100%; float: left; margin: 50px 0;}
#kontaktFrame .inner {width: 100%; float: left;}
#kontaktFrame .inner h2 {text-align: center; font-size: 32px; font-weight: 700;}
#kontaktFrame .inner p {text-align: center; font-size: 16px; font-weight: 300;}


#itemDetail {width: 100%; float: left;}
#itemDetail .inner {width: 100%; float: left; flex-wrap: wrap;}
#itemDetail .inner .mainPhoto {width: calc(50% - 20px + 44px); margin: 20px 20px 0 -44px;}
#itemDetail .inner .mainPhoto .photosList {width: 100%; float: left;}
#itemDetail .inner .mainPhoto .photosList .item {width: 100%; padding: 0; margin: 0;}
#itemDetail .inner .mainPhoto .photosList .item .cover {width: calc(100% - 88px); padding: 0; margin: 30px 44px 30px 44px; justify-content: space-between;}
#itemDetail .inner .mainPhoto .photosList .item .cover .photo {width: 100%; height: 400px; background-position: center; background-repeat: no-repeat; background-size: cover;}
#itemDetail .inner .mainPhoto .photosList .item .cover .photo {border-radius: 20px;}
#itemDetail .inner .mainPhoto .photosList .swiper-button-next {width: 44px; right: 0; color: #000000 !important;}
#itemDetail .inner .mainPhoto .photosList .swiper-button-next:after {display: none;}
#itemDetail .inner .mainPhoto .photosList .swiper-button-prev {width: 44px; left: 0; color: #000000 !important;}
#itemDetail .inner .mainPhoto .photosList .swiper-button-prev svg {}
#itemDetail .inner .mainPhoto .photosList .swiper-button-prev:after {display: none;}

#itemDetail .inner .photos .otherPhotos {width: calc(100% - 88px); margin: 0 44px 20px 44px; gap: 10px; float: left; flex-wrap: wrap; justify-content: center;}
#itemDetail .inner .photos .otherPhotos .item {width: calc(25% - (30px / 4)); margin: 5px 0 5px 0;;}
#itemDetail .inner .photos .otherPhotos .item:nth-child(4n) {margin-right: 0;}

#itemDetail .inner .right {width: calc(50% - 20px); margin: 20px 0 0 20px; flex-direction: column; justify-content: space-between;}
#itemDetail .inner .right h1 {margin: 20px 0; padding: 0; font-size: 24px;}
#itemDetail .inner .right .price {margin: 0 0 0 0; padding: 10px 0 0 0; font-size: 22px;}
#itemDetail .inner .right .price span.value {font-weight: 700;}
#itemDetail .inner .right .price span.vat {font-size: 16px;}
#itemDetail .inner .right .odstiny {margin: 0 0 0 0; padding: 10px 0 0 0; font-weight: 300; font-size: 20px; text-transform: uppercase;}
#itemDetail .inner .right .odstiny a.item {display: inline-block; width: 20px; height: 20px; margin: 0 5px 0 0; border: 1px solid #333; border-radius: 50%;}
#itemDetail .inner .right .odstiny a.item:hover {border-color: #000000;}
#itemDetail .inner .right .odstiny a.item.prumer {width: auto; height: auto; padding: 4px 10px; font-size: 12px; border-radius: 15px; align-items: center; text-transform: none;}
#itemDetail .inner .right .odstiny a.item.prumer.active {font-weight: 700; background-color: #eaeaea;}
#itemDetail .inner .right .odstiny a.item.prumer:hover {background-color: #eaeaea;}
#itemDetail .inner .right .dostupnost {margin: 0 0 10px 0; padding: 10px 0 0 0; font-weight: normal; font-size: 16px; text-align: center;}


#itemDetail .inner .row2 {width: 100%; float: left; margin: 0 0 50px 0;}
#itemDetail .inner .row2 .otherPhotos {width: calc(50% - 20px); margin: 0 20px 0 0; gap: 10px; float: left; flex-wrap: wrap; justify-content: flex-start;}
#itemDetail .inner .row2 .otherPhotos .item {width: calc(20% - (40px / 5)); margin: auto 0; color: #0094c1; font-size: 18px; font-weight: 700; align-items: center; justify-content: flex-start;}
#itemDetail .inner .row2 .otherPhotos .item:nth-child(5n) {margin-right: 0;}
#itemDetail .inner .row2 .otherPhotos .item img {display: block; border-radius: 10px;}
#itemDetail .inner .row2 .otherPhotos .item span {margin-left: 15px;}
#itemDetail .inner .row2 .buyFrame {width: calc(50% - 20px); margin: 0 0 0 20px; flex-direction: column; justify-content: space-between;}
#itemDetail .inner .row2 .buyFrame .dostupnost {display: none; margin: 0 0 10px 0; font-weight: normal; font-size: 16px; text-align: center;}
#itemDetail .inner .row2 .buyFrame .koupit {width: 100%; height: 36px; padding: 0;}
#itemDetail .inner .row2 .buyFrame .koupit a {width: 100%; height: 100%; text-align: center; text-transform: uppercase; font-weight: 700; font-size: 18px; background-color: #000000; color: #ffffff; border-radius: 8px; align-items: center; justify-content: center;}
#itemDetail .inner .row2 .buyFrame .koupit a:hover {background-color: #0094c1;}
#itemDetail .inner .row2 .buyFrame .codes {margin: 10px 0 0 0; font-size: 16px; justify-content: space-between; align-items: center;}

#itemDetailText {width: 100%; padding: 0 0 30px 0; float: left; border-top: 1px solid #000; background-image: url('/images/zofitherm-bg.png');}
#itemDetailText .inner {width: 100%; float: left;}
#itemDetailText .inner h2 {margin: 50px 0 20px; padding: 0; text-align: center;}
#itemDetailText .inner iframe {width: 800px; max-width: 100%; aspect-ratio: 16/9; height: auto; margin: 0 auto; display: block; border: 0;}

.youtubeCont {}
.youtubeCont IFRAME {width: 560px; height: 315px;}

#footer {width: 100%; float: left; padding: 30px 0; background-color: #000000; color: #ffffff;}
#footer a:hover {text-decoration: underline;}
#footer .inner {width: 100%; float: left; flex-direction: column; align-items: center;}
#footer .inner .logo {width: 400px; max-width: 100%;}
#footer .inner .email {margin: 30px 0 0 0;}
#footer .inner .social {margin: 30px 0 0 0;}
#footer .inner .social a {width: 50px; margin: 0 20px;}
#footer .inner .textLinks {margin: 10px 0 0 0; flex-wrap: wrap; text-align: center; justify-content: center;}
#footer .inner .textLinks a {margin: 20px 20px; font-size: 20px;}