html {}
body, html, table {
margin: 0px; padding: 0px; font-family: "Barlow", sans-serif; font-size: 18px; font-weight : 400; color: #000; line-height: 32px;}
* {box-sizing: border-box;}
body { background: #fff; text-align: center; display: flex; flex-direction: column; min-height: 100vh;}
h1,h2,h3, h4, h5 {margin: 0px 0 20px; padding: 0; font-family: "Barlow", sans-serif; line-height: 1.25; color: #000;  font-weight: 700; position: relative; text-transform: uppercase;}
h1 {font-size: 28px;}
h2 {font-size: 20px;  margin: 30px 0 20px 0;}
h3 {font-size: 17px; margin: 30px 0 20px 0;}
h4 {font-size: 16px;}
p {padding: 0px; margin: 10px 0px 20px 0px; text-align: left;}
a img {border: 0px solid; display: block;}
img {max-width: 100%;}
a {color: #2C51A3;}
a:hover {text-decoration: none;}
hr {background: #413E37; height: 1px; width: 100%; margin: 40px 0; padding: 0; outline: 0; border: 0; opacity: 0.4;}
strong, b {font-weight: 700;}
menu {padding-left: 0;}
form, button {font-family: 'Roboto Condensed', sans-serif;}
input[type="text"], input[type="email"], input[type="tel"], select, textarea {color: #000; font-family: "Barlow", sans-serif; font-size: 18px; line-height: 26px; padding: 10px; border-radius: 5px; display: block; width: 100%; text-align: left; max-width: 100%; border: none; outline: none; background: #f1f1f1;}
input[type="text"], input[type="email"], input[type="tel"], textarea { }
input[type="text"]:focus, input[type="email"]:focus, textarea:focus { }
textarea {height: 150px;}
::-webkit-input-placeholder { color: #707070;
}
:-ms-input-placeholder { color: #707070;
}
::placeholder {
color: #707070;
}
iframe {max-width: 100%;}
.mobile {display: none;}
.hamburger {
height: 20px;
padding: 0;
display: inline-block;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible;
outline: none;}
.hamburger:hover {
opacity: 0.7; }
.hamburger-box {
width: 25px;
height: 20px;
display: inline-block;
position: relative;
vertical-align: middle;}
.burgertext {
display: inline-block;
vertical-align: middle;
font-size: 16px;
line-height: 16px;
margin-left: 5px;
}
.hamburger-inner {
display: block;
top: 50%;
margin-top: -3px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
width: 20px;
height: 3px;
background-color: #000;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease; }
.hamburger-inner {width: 25px;}
.hamburger-inner::before, .hamburger-inner::after {
content: "";
display: block; }
.hamburger-inner::before {
top: -8px; }
.hamburger-inner::after {
bottom: -8px; }
.hamburger--spin .hamburger-inner {
transition-duration: 0.22s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spin .hamburger-inner::before {
transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;}
.hamburger--spin .hamburger-inner::after {
transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spin.is-active .hamburger-inner {
transform: rotate(225deg);
transition-delay: 0.12s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--spin.is-active .hamburger-inner::before {
top: 0;
opacity: 0;
transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;  width: 25px;}
.hamburger--spin.is-active .hamburger-inner::after {
bottom: 0;
transform: rotate(-90deg);
transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);  width: 25px;}
.noselect.noselect {
-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.site {position: relative; width: 100%; text-align: left; overflow: hidden; text-align: center;}
.flex { display: flex; flex-direction: row; align-items: start; justify-content: space-between; width: 100%;}
.grid{margin:0; padding:0; list-style-type:none; display:grid; gap: 20px 3.5%; grid-template-columns: repeat(auto-fill, minmax(15rem, 31%)); grid-auto-rows:1fr; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center}
.wrapper {position: relative; margin: 0px auto; max-width: 1100px; display: inline-block; text-align: left; min-width: 1100px; width: 100%; vertical-align: top;}
.wrapper.flex {display: flex; align-items: center;}
.btn {display: inline-block; cursor: pointer; text-align: center; text-decoration: none; background: #fff; border: 1px solid #2C51A3; outline: 0; padding: 15px 20px; color: #2C51A3; position: relative; font-size: 16px; border-radius: 2px; font-weight: 700; white-space: nowrap; text-transform: uppercase; letter-spacing: 0px;}
input.btn {border-radius: 5px;}
.btn:hover {background: #2C51A3; text-decoration: none; color: #fff;}
.btn2 {border: 2px solid #413E37; background: none; color: #413E37; padding: 14px 20px; font-size: 18px;}
.btn2:hover {color: #fff;}
.btn2.white {border: 2px solid #fff; color: #fff;}
.btn3 {background: #2C51A3; color: #fff;}
.mini {padding: 9px 9px; font-size: 15px; line-height: 24px; text-transform: none;}
.link {color: #FF9900; font-weight: 700; font-size: 18px; text-transform: uppercase; margin: 30px 0 0; display: inline-block;}
.link i {margin: 0 10px;}
.link img {display: inline-block;}
.img_to_hide {height: 0 !important; width: 0 !important; opacity: 0 !important;}
.relative {position: relative;}
.trans {-webkit-transition: all 0.2s linear 0s; -moz-transition: all 0.2s linear 0s; -o-transition: all 0.2s linear 0s; transition: all 0.2s linear 0s;}
.fast {-webkit-transition: all 0.1s linear 0s; -moz-transition: all 0.1s linear 0s; -o-transition: all 0.1s linear 0s; transition: all 0.1s linear 0s;}
.center {text-align: center;}
#header {height: 70px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.15); overflow: visible;}
#header .wrapper {height: 100%;}
#header .menu {flex: 1; margin: 0; padding: 0;}
#header .menu ul.flex {justify-content: end; list-style: none;}
#header .menu ul.flex li {margin: 0px 20px; position: relative; padding: 10px 0;}
#header .menu ul.flex li:last-of-type {margin-right: 0;}
#header .menu a {text-decoration: none;}
#header .menu a:hover, #header .menu .current_page_item a {color: #2C51A3;}
#header .menu a:hover { text-decoration: underline;}
#header .menu .current_page_item > a, #header .menu .current-menu-parent > a, #header .menu .current-menu-item > a {font-weight: 700;}
#header .menu ul li ul {display: none; position: absolute; z-index: 9; background: #fff; top: 50px; width: max-content; list-style: none; padding: 10px 10px 10px;  left: -30px;}
#header .menu ul.flex li ul li {margin: 0 10px; padding: 5px 0;}
#header .logo img {height: 40px;}
@media all and (min-width: 900px) {
#header .menu ul li:hover > ul {display: block;}
}        
#content {flex: 1;}
#background {min-height: calc(100vh - 70px); flex-direction: column; justify-content: center; align-items: center; color: #fff; padding: 0 20px;}
#background * {z-index: 2; max-width: 930px; text-align: center;}
#background .bg {position: absolute; z-index: 0; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; max-width: none;}
#background::before {content: " "; position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0.6;}
#background .icons {justify-content: center; align-items: center;}
#background .icons img {margin: 0 15px;}
#background h1 {color: #fff; font-size: 48px; margin: 30px 0 20px 0;}
#background p {margin: 0 0 50px; font-size: 24px; line-height: 36px;}
#sluzby {padding: 80px 0;}
.sub #sluzby {padding: 0;}
.sluzby, .sluzby2 {display: block; text-align: center; color: #999; font-size: 16px; text-transform: uppercase;}
.sluzby2 {color: #000; font-size: 28px; margin: 10px 0 30px;}
.home #sluzby .sluzba, #sluby_root .sluzba, .portfolio-item {text-align: center; margin: 20px 0; max-width: 330px; font-size: 16px; line-height: 24px;}
.home #sluzby .sluzba p  {text-align: center; margin: 0;}
#sluby_root .sluzba p, .portfolio-item p {}
.sub #sluzby .sluzba, #sluby_root .sluzba, .portfolio-item {max-width: 100%; text-align: left;}
#sluzby .img, .portfolio-item .img {position: relative; height: 0px; height: 230px; max-width: 330px; margin: 0px auto;}
.sub #sluzby .img {max-width: 100%; height: 255px;}
#sluzby .img img, .portfolio-item .img img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.home #sluzby .sluzba h2, #sluby_root h3, .portfolio-item h3 {text-transform: none; font-size: 24px; font-weight: 400; margin: 20px 0;}            
#sluzby .sluzba a.more {color: #2C51A3; display: block; margin: 10px 0 0;}
#sluby_root h2 {margin: 50px 0 20px;}
#sluby_root .grid {margin-bottom: 80px;}
.btns {justify-content: flex-start; margin: 40px 0 0;}
.btns .btn {margin-right: 20px; margin-bottom: 20px;}
#about {background: rgba(87,108,122,0.1); padding: 80px 0;}
#about .flex {align-items: stretch;}
#about .left {flex: 1; line-height: 32px;}
#about .sluzby, #about .sluzby2 {display: block;  color: #999; font-size: 16px; text-transform: uppercase;}
#about .sluzby2 {color: #000; font-size: 28px; margin: 10px 0 30px;}    
#about .left a.btn {margin: 40px 0 0;}
#about .left p {margin: 0;}
#about .right {max-width: 300px; margin-left: 80px;}
#about .right img {object-fit: cover; height: 100%; width: 100%;}
#reference {padding: 40px 0 0px;}
.masonry {margin: 10px 0 40px 0;}
.masonry .img {border: 2px solid #fff; width: 20%;}
.masonry img { width: 100%; height: auto; display: block;}
.masonry h3 {position: absolute; z-index: 1; bottom: 10px; right: 10px; background: #fff; font-size: 16px; line-height: 20px; text-transform: none; padding: 10px; text-align: left; font-weight: 400; opacity: 0; max-width: 80%;}
.masonry .img:hover h3 {opacity: 1;}
#reference .center, #footer .center {display: block;}        
.sub #content {padding: 40px 0 0;}
.sub #content .center .btn {margin-top: 30px;}
.sub #content ul {padding: 0 0 0 20px;}
#text_s_fotkou {background: #EAEEF6; margin: 40px 0; text-align: left; margin: 60px 0 40px;}
#text_s_fotkou .flex.par {align-items: stretch;}
#text_s_fotkou .flex.par:nth-of-type(2n-1){flex-direction: row-reverse;}
#text_s_fotkou .flex.par > div {width: 50%; min-height: 400px; height: auto;}
#text_s_fotkou .img {position: relative;}
#text_s_fotkou .img img {width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0;}
#text_s_fotkou .flex.par:nth-of-type(2n-1) .text {justify-content: flex-end;}
#text_s_fotkou .subtext {max-width: 550px; width: 100%; padding-left: 150px; padding-top: 50px; padding-bottom: 70px; min-height: 600px;}
#text_s_fotkou .flex.par:nth-of-type(2n-1) .subtext {padding-left: 0; padding-right: 150px;}
#rozbalovaci_text {}
#rozbalovaci_text .block {padding: 20px 25px 20px 55px; border-bottom: 1px solid #EEF0F2; position: relative; background: transparent;}
#rozbalovaci_text .block.active {background: rgba(44, 81, 163, 0.1);}
#rozbalovaci_text .block::before {position: absolute; content: " "; left: 15px; top: 25px; width: 20px; height: 20px; border-radius: 12px; border: 2px solid #000;}
#rozbalovaci_text .block.active::before {background: #000;}
#rozbalovaci_text .block::after {position: absolute; content: '\f078'; font-family: FontAwesome; right: 15px; top: 25px; width: 20px; height: 20px;}
#rozbalovaci_text .block.active::after {content: '\f077';}
#rozbalovaci_text .text {display: none; font-size: 16px; line-height: 24px;} #rozbalovaci_text .heading {cursor: pointer; position: relative; z-index: 1;}
#rozbalovaci_text .active .heading {font-weight: 700;}
.kontakt {align-items: stretch; margin: 40px 0 0;}
.kontakt > div {width: 50%;}
.kontakt .right {padding-left: 90px;}
.kontakt iframe {width: 100%; min-height: 100%;}
.kontakt .cmplz-placeholder-parent {height: 100%;}
#portfolio-filters {margin: 30px 0 10px;}
.portfolio-item {font-size: 14px; line-height: 21px;}
.portfolio-item h3 {font-size: 20px; margin: 10px 0;}
.filter-btn {margin: 0 10px 5px 0;}
.gallery {gap: 20px 2.7%; grid-template-columns: repeat(auto-fill, minmax(14rem, 22%)); margin: 40px 0 0;}
.gallery-item strong {font-weight: 400; font-size: 14px; display: block; text-align: center; padding: 5px 0 0;}
.wpcf7 {margin: 80px auto 0; max-width: 600px;}
#content img.alignright {float: right; margin: 0 0 20px 30px; max-width: 350px;}
.blog{}
.blog #content .flex {margin: 0 0 50px;}
.blog #content .img {width: 300px; margin-right: 40px;}
.blog #content .img img {width: 100%; height: auto;}
.blog #content .text {flex: 1;}
.blog #content h2 {margin: 0 0 20px;}
.postx.img {margin: 0 0 30px;}
.postx.img img {width: 100%; height: auto;}
#footer {}
#footer hr {margin: 80px auto; width: 100%; max-width: 600px; height: 1px; border: 0; outline: 0; background: #EEF0F2; opacity: 1;}
#footer .reference  {align-items: center; filter: grayscale(1); opacity: 0.6; margin: 40px auto; max-width: 1000px;}
#komplet {background: #EEF0F2; padding: 45px 0; margin: 80px 0 0;}
#komplet .left {justify-content: flex-start; align-items: center; font-size: 18px;}
#komplet .img {margin-right: 25px;}
#komplet h3 {font-size: 24px; line-height: 34px; margin: 0 0 5px; text-transform: none; font-weight: 600;}
#blue {padding: 80px 0; background: #2C51A3; color: #fff; font-size: 16px;}
#blue  * {color: #fff;}
#blue ul {list-style: none; padding: 0; margin: 0 80px 0 0;}
#footmenu2 ul {margin-right: 20px;}
#blue .left {flex: 1;}
#blue .left .flex {justify-content: flex-start;}
#blue .copy {font-size: 14px; margin: 20px 0 0;}
#loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4); display: flex;
justify-content: center;
align-items: center;
z-index: 9999; }          
#loading-overlay i {color: #fff;  font-size: 60px;}
@media all and (max-width: 1100px) {
.wrapper {min-width: 280px !important; padding: 0 2% !important; max-width: 100%;}     
#text_s_fotkou .subtext {padding-right: 20px;}
#text_s_fotkou .flex.par:nth-of-type(2n-1) .subtext {padding-left: 20px;}   
.masonry .img { width: 25%;}
}
@media all and (max-width: 900px) {
.mobile {display: block;}
.desktop {display: none;}
#header {overflow: visible;}
#header .menu {position: absolute; top: 70px; z-index: 9;  background: #fff;  width: 100%;  left: 0; }        
#header .menu ul.flex {display: block; padding: 0; margin: 0 0 20px;}
#header .menu ul.flex li, #header .menu ul.flex li:last-of-type {text-align: center; margin: 10px;}
#header .menu ul li ul {display: block; position: unset; width: 100%; padding: 0;}
.masonry .img { width: 33.333%;}
}
@media all and (max-width: 840px) {
#wellness .wrapper {min-width: 280px !important; max-width: 100%; padding: 0 20px !important;} 
}        
@media all and (max-width: 767px) {
#background h1 {font-size: 32px;}
#background p {font-size: 20px; line-height: 30px;}
#sluzby .flex, .flex.btns, #portfolio-list {display: flex; flex-wrap: wrap; justify-content: center;}
#sluzby .sluzba {max-width: 100%;}
#sluzby .img, .portfolio-item .img {max-width: 100%; height: auto;}
#sluzby .img img, .portfolio-item .img img {position: unset; height: auto; object-fit: none;}
#text_s_fotkou .img img {width: 100%; height: 100%; object-fit: cover; position: absolute;}
#about .flex {display: block;}
#about .right {max-width: 100%;  margin: 40px 0 0; text-align: center;}
#about .right img {margin: 0px auto;}
#footer .reference {display: block;}
#footer .reference .img {margin: 20px 0; text-align: center;}
#footer hr {margin: 40px 0;}
#komplet .flex {display: block; text-align: center;}
#komplet .left div {margin: 20px 0;}
#blue {padding: 50px 0;}
#blue .flex {display: block;}
#blue ul {margin: 0;}
#blue .right {margin: 30px 0 0;}
#blue .copy {text-align: center;}
#text_s_fotkou .flex.par, #text_s_fotkou .flex.par:nth-of-type(2n-1) {flex-direction: column !important;}
#text_s_fotkou .flex.par > div {width: 100%;}
#text_s_fotkou .flex.par:nth-of-type(2n-1) .text, #text_s_fotkou .flex.par .text {display: block;}
#text_s_fotkou .flex.par:nth-of-type(2n-1) .subtext, #text_s_fotkou .flex.par:nth-of-type(2n-1) .subtext, #text_s_fotkou .subtext {padding: 20px; max-width: 100%; min-height: auto;}
.kontakt {flex-direction: column-reverse; margin: 20px 0 0;}
.kontakt .left {height: 400px;}
.kontakt .right {padding: 0;}
.kontakt > div {width: 100%;}
#about .left p, #about .left {text-align: center;}
.blog #content .flex {display: block;}
.blog #content .img {width: 100%; margin: 0 0 20px;}
#content img.alignright {float: none; max-width: 100%; margin: 20px 0;}
}
@media all and (max-width: 600px) {
.masonry .img { width: 50%;}
}