.filter {width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; background-color: rgba(0,0,0,0.30);}
.burger {display: none;}
#menuMobile {display: none;}
#menuMobileFrame {display: none;}


#header {width: 100%; float: left; min-height: 120px; padding: 0 20px; display: flex; justify-content: space-between;}
#header .logo {display: flex; align-items: center;}
#header .logo img {width: 260px;}
#header .search {display: flex; align-items: center;}
#header .search .input {position: relative; padding: 10px; background-color: #f0f0f0; border-radius: 20px; background-image: url("/images/icon-search.png"); background-repeat: no-repeat; background-position: right 20px center;}
#header .search .input input[type="text"] {width: 250px; border: 0; background: transparent; font-size: 15px; color: #a3a3a3;}
#header .search .input input[type="submit"] {width: 43px; border: 0; background: transparent; font-size: 15px; color: #a3a3a3;}
#header .topMenuFrame {display: flex; align-items: center;}
#header .topMenuFrame ul {display: flex; margin: 0; padding: 0;}
#header .topMenuFrame ul li {}
#header .topMenuFrame ul li.active a {text-decoration: underline;}
#header .topMenuFrame ul li a {margin: 0 20px; font-size: 15px; text-transform: uppercase; font-weight: 500; text-align: center; align-items: center;}
#header .topMenuFrame a:hover {text-decoration: underline;}
#header .contact {display: flex; flex-direction: column; justify-content: center;}
#header .contact a {padding: 5px 0 5px 30px; color: #84a59d; font-weight: 700; background-repeat: no-repeat; background-position: left center;}
#header .contact a:hover {text-decoration: underline;}
#header .contact a.phone {background-image: url("/images/icon-phone.png");}
#header .contact a.email {background-image: url("/images/icon-mail.png");}


#mainMenu {width: 100%; float: left; min-height: 60px; display: flex; justify-content: center; background-image: url("/images/menu-bg.png"); background-repeat: repeat-y; background-position: center; background-size: contain;}
#mainMenu ul {padding: 0; margin: 0; display: flex;}
#mainMenu ul li {position: relative; padding: 0 10px; display: flex;}
#mainMenu ul li a {color: #ffffff; text-transform: uppercase; font-size: 14px; font-weight: 700; display: flex; align-items: center;}
#mainMenu ul li:hover {background-color: #e7745a;}
#mainMenu ul li.active {background-color: #e7745a;}
#mainMenu ul li ul.submenu {display: none; position: absolute; z-index: 999; left: 0; top: 100%; padding: 30px; background-color: #e7745a; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px;}
#mainMenu ul li ul.submenu li {position: relative; padding: 1px 0 1px 20px; margin: 5px 0;}
#mainMenu ul li ul.submenu li:before {content: ''; position: absolute; display: block; left: 0; top: 6px; width: 8px; height: 8px; background-color: #ffffff; border-radius: 50%;}

#mainMenu ul li ul.submenu li a {font-size: 14px; font-weight: 300; text-transform: none;}
#mainMenu ul li ul.submenu li a:hover {text-decoration: underline;}
#mainMenu ul li:hover ul.submenu {display: flex; flex-direction: column; min-width: 350px;}


#bannerContainer {width: 100%; float: left; align-items: center; justify-content: center;}
#banner {width: 100%; float: left;}
#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: 100%; padding: 0; margin: 0; justify-content: space-between;}
#banner .inner .bannerList .item .cover .photo {width: 100%; height: 525px; background-position: center; background-repeat: no-repeat; background-size: cover;}
#banner .inner .bannerList .item .cover .photo {display: flex; align-items: center; justify-content: center;}
#banner .inner .bannerList .item .cover .photo img {width: 100%;}
#banner .inner .bannerList .item .cover .photo .text {position: relative; width: 1200px;}
#banner .inner .bannerList .item .cover .photo .text .wrapper {width: auto; display: inline-block; color: #ffffff;}
#banner .inner .bannerList .item .cover .photo .text .wrapper .name {font-size: 40px; font-weight: 700; text-transform: uppercase;}
#banner .inner .bannerList .item .cover .photo .text .wrapper .popis {font-size: 40px; font-weight: 900; text-transform: uppercase;}
#banner .inner .bannerList .item .cover .photo .text .wrapper .btn {margin: 20px 0 0 0;}
#banner .inner .bannerList .item .cover .photo .text .wrapper .btn a {display: inline-block; padding: 10px 25px; color: #5f5f5f; font-size: 14px; background-color: #f0f0f0; border-radius: 20px; text-transform: uppercase; transition: all 0.5s ease;}
#banner .inner .bannerList .item .cover .photo .text .wrapper .btn a:hover {background-color: #ffffff;}
#banner .inner .bannerList .swiper-button-next {top: calc(50% - 22px); width: unset; right: 0; left: unset; margin: 0; color: #84a59d !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; margin: 0; color: #84a59d !important;}
#banner .inner .bannerList .swiper-button-prev svg {}
#banner .inner .bannerList .swiper-button-prev:after {display: none;}
#banner .inner .bannerList .swiper-pagination-bullet-active {background-color: #e7745a;}


#komoryDlazdiceBg {width: 100%; float: left; background-image: url("/images/logo-bg-transparent.png"); background-repeat: no-repeat; background-position: left bottom;}


#komory {position: relative; margin-top: -50px; z-index: 999; width: 100%; float: left; color: #ffffff;}
#komory .inner {width: 100%; float: left; display: flex; flex-wrap: wrap;}
#komory .inner .item {width: calc(20% - 80px / 5); margin: 0 20px 20px 0; padding: 0 20px; background-color: #84a59d; border-radius: 20px; aspect-ratio: 1/1; font-size: 22px; font-weight: 500; text-transform: uppercase;}
#komory .inner .item {display: flex; align-items: center; justify-content: center; text-align: center; transition: all 0.5s ease;}
#komory .inner .item:nth-child(5n) {margin-right: 0;}
#komory .inner .item:hover {background-color: #f8af41;}


#vyhledavani {width: 100%; float: left;}
#vyhledavani .inner {width: 100%; float: left;}


#dlazdice {width: 100%; float: left; margin: 0 0 50px 0; color: #ffffff;}
#dlazdice .inner {width: 100%; float: left; display: flex; flex-wrap: wrap;}
#dlazdice .inner .item {height: 350px; border-radius: 20px; background-color: #616262; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition: all 0.5s ease;}
#dlazdice .inner .item h2 {padding: 0; margin: 0; text-transform: uppercase; font-size: 25px; font-weight: 700;}
#dlazdice .inner .item .perex {margin: 20px 0 0 0; font-size: 16px; font-weight: 100;}
#dlazdice .inner .item.item-1 {width: calc((20% - 80px / 5) * 2 + 20px); margin-right: 20px;}
#dlazdice .inner .item.item-2 {width: calc((20% - 80px / 5)); margin-right: 20px; background-color: #f8af41;}
#dlazdice .inner .item.item-3 {height: calc(50% - 10px); margin: 0 0 20px 0; background-color: #e7745a;}
#dlazdice .inner .item.item-4 {height: calc(50% - 10px); margin: 0; background-color: #5aa2e2;}
#dlazdice .inner .item:hover {opacity: 0.9;}
#dlazdice .inner .right {flex: 1; display: flex; flex-direction: column;}


#homeText {width: 100%; float: left; background-color: #f5f5f5;}
#homeText .inner {width: 100%; float: left; padding: 40px 0; display: flex; align-items: center;}
#homeText .inner .left {width: calc((20% - 80px / 5) * 2 + 20px + 20px);}
#homeText .inner .left h1 {padding: 60px 50% 0 0; color: #595959; font-size: 35px; font-weight: 900; text-transform: uppercase; background-image: url("/images/logo-small.png"); background-repeat: no-repeat; background-position: left top;}
#homeText .inner .left h1 span {color: #f8af41;}
#homeText .inner .right {flex: 1; font-size: 16px; font-weight: 200; line-height: 1.6;}
#homeText .inner .right p {margin: 15px 0;}
#homeText .inner .right a {color: #f8af41; font-weight: 900;}
#homeText .inner .right a:hover {text-decoration: underline;}


#news {width: 100%; float: left; padding: 0 0 30px 0; color: #ffffff;}
#news .years {width: 100%; float: left; margin: 0 0 20px 0; display: flex; flex-wrap: wrap; align-items: center;}
#news .years span {margin: 0 15px 0 0; color: #616262;}
#news .years .item {padding: 15px 30px; margin: 0 20px 0 0; background-color: #616262; border-radius: 20px;}
#news .years .item.active {background-color: #f8af41;}
#news .inner {width: 100%; float: left; display: flex; flex-wrap: wrap;}
#news .inner .item {width: calc(33.333333% - 20px); margin: 15px 30px 15px 0; padding: 30px; background-color: #84a59e; border-radius: 20px;}
#news .inner .item {display: flex; flex-direction: column;}
#news .inner .item:nth-child(3n) {margin-right: 0;}
#news .inner .item:hover {background-color: #f7af41;}
#news .inner .item .date {margin: 0 0 15px 0; font-size: 16px; font-weight: 100;}
#news .inner .item h2 {margin: 0 0 10px 0; padding: 0; text-transform: uppercase; font-size: 18px; font-weight: 700;}
#news .inner .item .perex {margin: 0 0 15px 0; font-size: 14px; font-weight: 300;}
#news .inner .item .btn {font-size: 14px; font-weight: 700;}
#news .inner .item .btn span {border-bottom: 2px solid #ffffff;}


#mainText {width: 100%; float: left; background-image: url("/images/logo-bg-transparent.png"); background-repeat: no-repeat; background-position: right bottom;}
#mainText .inner {width: 100%; float: left; padding: 0 0 20px 0;}


#navig {width: 100%; float: left; margin: 0; color: #bcbaba; font-size: 14px; background-color: #f5f5f5;}
#navig a:hover {text-decoration: underline;}
#navig .inner {width: 100%; float: left; padding: 14px 0;}
#navig .inner span {display: inline-block; margin: 0 20px;}
#navig .inner a:last-child {font-weight: 700;}


#kontakt {width: 100%; float: left;}
#kontakt .inner {width: 100%; float: left; padding: 40px 0; display: flex; flex-wrap: wrap;}
#kontakt .inner .text {width: 50%;}
#kontakt .inner .text h1 {margin: 0; padding: 0 0 20px 0;}
#kontakt .inner .map {width: 50%; height: 450px;}
#kontakt .inner .people {width: 100%; margin: 40px 0 0 0;}
#kontakt .inner .people h2 {width: 100%; margin: 0; padding: 30px 0 0 0; font-size: 20px; font-weight: 700; border-top: 2px solid #f8af41; color: #f8af41; text-transform: uppercase;}
#kontakt .inner .people .list {display: flex; flex-wrap: wrap;}
#kontakt .inner .people .list .item {width: calc((100% / 3) - (80px / 3)); margin: 20px 40px 20px 0; color: #595959; font-weight: 400; font-size: 16px;}
#kontakt .inner .people .list .item:nth-child(3n) {margin-right: 0;}
#kontakt .inner .people .list .item .row {padding: 8px 0 8px 30px; background-repeat: no-repeat; background-position: left center;}
#kontakt .inner .people .list .item .row.pozice {padding-left: 0; color: #616161; font-style: italic; font-weight: 300;}
#kontakt .inner .people .list .item .row.name { background-image: url("/images/icon-contact-user.png"); font-weight: 700;}
#kontakt .inner .people .list .item .row.phone { background-image: url("/images/icon-contact-phone.png");}
#kontakt .inner .people .list .item .row.email { background-image: url("/images/icon-contact-mail.png");}


#footer {width: 100%; float: left; padding: 50px 0 30px 0; color: #ffffff; font-weight: 200; background-image: url("/images/footer-bg.png"); background-repeat: repeat-y; background-position: center; background-size: contain;}
#footer .inner {width: 100%; float: left; display: flex; justify-content: space-between; flex-wrap: wrap;}
#footer .inner .left {width: 33%; padding: 0 40px 0 0;}
#footer .inner .left .logo img {width: 260px;}
#footer .inner .left p {margin: 10px 0;}
#footer .inner .right {flex: 1; margin-left: 40px;}
#footer .inner .right .contactList {display: flex; flex-wrap: wrap;}
#footer .inner .right .contactList .item {width: calc(50% - 20px); margin: 20px 40px 20px 0;}
#footer .inner .right .contactList .item:nth-child(2n) {margin-right: 0;}
#footer .inner .right .contactList .item .row {padding: 6px 0 6px 30px; font-weight: 700; background-repeat: no-repeat; background-position: left center;}
#footer .inner .right .contactList .item .row.pozice {padding-top: 0; font-weight: 300;}
#footer .inner .right .contactList .item .row.name {padding: 2px 0 2px 30px; background-image: url("/images/icon-contact-user-white.png"); font-weight: 700;}
#footer .inner .right .contactList .item .row.phone { background-image: url("/images/icon-contact-phone-white.png");}
#footer .inner .right .contactList .item .row.email { background-image: url("/images/icon-contact-mail-white.png");}
#footer .inner .bottom {width: 100%; margin: 30px 0 0 0; padding: 30px 0 0 0; border-top: 2px solid #fff; font-size: 16px; font-weight: 400; display: flex; align-items: center; justify-content: space-between;}
#footer .inner .bottom .netsimple {display: flex; align-items: center; font-weight: 100;}
#footer .inner .bottom .social-site {display: flex; align-items: center; justify-content: flex-end;}
#footer .inner .bottom .social-site a {margin-left: 10px;}
#footer .inner .bottom .social-site a img {display: block;}