@import url("/css/clear.css");
@import url("/css/sm-clean.css");
@import url("/css/common.css");

@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&display=swap');

/* ===================================
   Global CSS
====================================== */
body {font-family: "Roboto Flex", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 300; color: #5E5E5E; background-color: #fff; overflow-x: hidden; line-height: 180%;}

*, ::after, ::before {box-sizing: border-box;}
a {color: #1B96CE; text-decoration: none; transition: color .3s linear; position: relative;}
a::after {content: ''; display: block; width: 0; height: 1px; background-color: #1B96CE; transition: width .3s; position: absolute; left: 0; bottom: 0;}
a:hover {color: #1B96CE; text-decoration: none;}
a:hover:after {width: 100%;}
img {max-width: 100%; max-height: 100%; width: auto; height: auto; display: block;}
p {margin-bottom: 30px;}
.container {max-width: 1300px; margin: 0;}
.section-info {font-size: 22px;line-height: 35px;}
table.table{margin-bottom: 35px; border: 1px solid #dee2e6;}
table th, table td{border: 0;}
ul{margin-bottom: 25px;}
ul li{list-style: disc; margin-left: 45px; text-align: left;}
strong{font-weight: 500;}

/* ===================================
   Left Part Content (Sidebar) CSS
====================================== */

.content-left {position: fixed; width: 380px; background-color: #fff; height: 100vh; z-index: 1; box-shadow: 14px -8px 28px -30px #111;}
.cap-odznak{position: fixed; top: -10px; right: 20px; width: 100px; height: 100px !important; z-index: 1;}

.content-left::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #554247;}
.content-left::-webkit-scrollbar {width: 7px; background-color: #554247;}
.content-left::-webkit-scrollbar-thumb {background-color: #f37b83;}
.content-left-wrapper {padding-left: 75px; position: relative;}
.toggle-holder {position: fixed; top: 30px; left: 30px; z-index: 3; text-align: left;}

#toggle {height: 23px; width: 30px; position: relative;}
#toggle:hover {cursor: pointer;}
#toggle:before, #toggle:after {content: ''; height: 2px; width: 30px; position: absolute; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transition: -webkit-transform 0.25s; -webkit-transition: all 0.25s; transition: all 0.25s; top: 8px; background-color: #1B96CE;}
#toggle:before {-webkit-transform: translate3d(0, -8px, 0); transform: translate3d(0, -8px, 0px); width: 21px; margin-left: 0;}
#toggle:hover:before {margin-left: 9px;}
#toggle.on:before {-webkit-transform: rotate3d(0, 0, 1, 45deg) translate3d(0, 0, 0); transform: rotate3d(0, 0, 1, 45deg) translate3d(0, 0, 0); background-color: #1B96CE; margin-left: 0; width: 26px;}
#toggle.on:after {-webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); background-color: #1B96CE; width: 26px;}
#toggle:after {-webkit-transform: translate3d(0, 8px, 0); transform: translate3d(0, 8px, 0);}
#toggle .menu-line {width: 13px; height: 2px; position: absolute; -webkit-transition: all 0.25s; transition: all 0.25s; margin-left: 0; top: 8px; background-color: #1B96CE;}
#toggle:hover .menu-line {margin-left: 17px;}
#toggle.on .menu-line {opacity: 0;}

.my-info-wrapper {padding-top: 280px;}
.my-info {margin-bottom: 30px;}
.my-info > p {margin-bottom: 0;}
.my-info-title {font-size: 14px; line-height: 100%; color: #111; font-weight: 700;}
.my-info-title.phone, .my-info-title.mail{padding-left: 25px; position: relative;}
.my-info-title.phone::before, .my-info-title.mail::before {
	content: "";
	position: absolute;
	width: 18px;
	height: 100%;
	top: 0;
	left: 0;
}
.my-info-title.phone::before{background: url("/images/icon-phone-dark.svg") no-repeat left top;}
.my-info-title.mail::before{background: url("/images/icon-email-dark.svg") no-repeat left top; width: 16px; top: 1px;}

/* ===================================
   Menu CSS
====================================== */
.menu-wrapper {padding-top: 150px;}
.menu-holder {padding: 120px 50px 0 75px; background-color: #042433; width: 380px; height: 100%; min-height: 100vh; top: 0; left: 0; position: absolute; transform: translateX(-380px); transition: transform .3s linear; z-index: 1;}
.open .menu-holder {transform: translateX(0);}
.main-menu.sm-clean {background-color: transparent; display: inline-block; padding-left: 0; margin-left: 0;}
.sm-clean li {padding-bottom: 25px; list-style: none; padding-left: 0; margin-left: 0;}
.sm-clean a {position: relative;}
.sm-clean a, .sm-clean a:hover, .sm-clean a:focus, .sm-clean a:active {color: #fff; padding: 5px 0; font-size: 24px; line-height: 100%; font-weight: 400;}
.sm-clean a:after {content: ''; display: block; width: 0; height: 1px; background-color: #fff; transition: width .3s; position: absolute; left: -5%; bottom: 4px; z-index: -1;}
.main-menu.sm-clean .sub-menu li a:after {height: 3px; bottom: 20px;}
.sm-clean a.current:after, .sm-clean a:hover:after, .sm-clean a:active:after, .sm-clean a.highlighted:after, .sm-clean ul a:hover:after, .sm-clean ul a:active:after, .sm-clean ul a.highlighted:after, .sm-clean li.current > a:after {width: 110%;}
.sm-clean a span.sub-arrow {color: #c6646b;}
.main-menu.sm-clean .sub-menu li a {color: #848484; text-transform: uppercase; font-size: 14px;}

/* ===================================
   Right Part Content CSS
====================================== */
.content-right {margin-left: 380px; width: calc(100% - 380px);}
.content-right-wrapper > div:last-of-type {padding-bottom: 150px;}
.section {background-color: #fff; position: relative; padding-top: 150px;}
.section-wrapper {padding-left: 5%; padding-right: 5%;}
.full-width-section.section {padding: 0;}
.full-width-section .section-wrapper {padding: 0 0 0 5%; height: 100vh; margin: 0; display: flex; display: -webkit-flex; align-items: flex-start; background-color: #111;}

.subhead{font-family: "Roboto Serif", Helvetica, Arial, sans-serif; font-size: 24px; line-height: 100%; color: #111; position: relative; padding-left: 20px; margin-bottom: 25px;}
.subhead::before{
	content: "";
	position: absolute;
	width: 1px;
	height: 30px;
	background-color: #111;
	left: 6px;
	top: -4px;
	transform: rotate(20deg);
}
h2.section-title {font-size: 40px; line-height: 120%; padding: 0; margin-bottom: 50px; font-weight: 400;}

/* ===================================
   Home Section CSS
====================================== */

.home-left-part {padding: 220px 0 0 0; margin-right: 5%;}
.home-right-part {flex: 1 0 0; height: 100%; background-image: url("/images/home.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center;}

h1.entry-title {font-size: 50px; line-height: 100%; font-weight: 700; color: #fff; padding: 0;}
h1.entry-title span{display: block; font-size: 50px; color: #1B96CE; margin-bottom: 5px;}

.site-info {font-family: "Roboto Serif", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: 200; letter-spacing: 1px; color: #fff; margin-bottom: 0;}
.site-info span {display: block; line-height: 60%;}
.site-info span:last-of-type {}

.social-links {margin-top: 10vh; margin-bottom: -5px;}
.social-links a {font-size: 16px; letter-spacing: 1px; margin-right: 30px; position: relative;}
.social-links a:last-of-type {margin-right: 0;}

.social-links a.facebook {
	position: relative;
	display: inline-block;

	margin-left: 40px;
}

.social-links a.facebook::before {
	content: "";
	position: absolute;
	inset: 0;
	width: 30px;
	height: 30px;
	left: -40px;
	background-color: #fff;
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><path d='M14.1667 7.10276C14.1667 3.18203 10.9933 0 7.08333 0C3.17333 0 0 3.18203 0 7.10276C0 10.5405 2.43667 13.4029 5.66667 14.0635V9.23358H4.25V7.10276H5.66667V5.32707C5.66667 3.95624 6.77875 2.8411 8.14583 2.8411H9.91667V4.97193H8.5C8.11042 4.97193 7.79167 5.29155 7.79167 5.68221V7.10276H9.91667V9.23358H7.79167V14.17C11.3687 13.8149 14.1667 10.7891 14.1667 7.10276Z' fill='black'/></svg>");
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><path d='M14.1667 7.10276C14.1667 3.18203 10.9933 0 7.08333 0C3.17333 0 0 3.18203 0 7.10276C0 10.5405 2.43667 13.4029 5.66667 14.0635V9.23358H4.25V7.10276H5.66667V5.32707C5.66667 3.95624 6.77875 2.8411 8.14583 2.8411H9.91667V4.97193H8.5C8.11042 4.97193 7.79167 5.29155 7.79167 5.68221V7.10276H9.91667V9.23358H7.79167V14.17C11.3687 13.8149 14.1667 10.7891 14.1667 7.10276Z' fill='black'/></svg>");
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-size: contain;
	-webkit-mask-size: contain;
	mask-position: center;
	-webkit-mask-position: center;
}

.cookie-links {margin-top: 25px; margin-bottom: 25px; line-height: 100%;}
.cookie-links a {font-size: 12px; margin-right: 30px;}
.cookies-links a:last-of-type {margin-right: 0;}

@media (max-width: 767px) {
    .social-links, .cookie-links{text-align: center;}
}

@media (max-width: 400px) {
    .social-links a, .cookie-links a{display: block; margin-left: 0; margin-right: 0;}
}

.dark-bg{background-color: #F1F1F1; margin-top: 100px; padding-bottom: 100px;}

/* ===================================
   Who Section
====================================== */
.about{text-align: left;}
.about p{font-size: 18px; line-height: 180%; letter-spacing: 1px; font-weight: 300;}
.about p.lead{font-size: 26px; line-height: 150%; padding: 0; margin-bottom: 50px;}

.certificates{text-align: center;}
.certificates .card{text-align: center; width: 200px; border: none;}
.certificates .card .card-header{background-color: transparent; text-align: center; border: none;}
.certificates .card .card-header img{margin: 0 auto; width: 60px;}

.certificates .card .card-body{padding: 0; font-size: 16px; line-height: 130%; border: none;}
.certificates .card .card-body strong{font-size: 18px; font-weight: 700; display: block; margin-bottom: 5px; color: #111;}
.certificates .card .card-footer{background-color: transparent; border: none; padding: 0;}

/* ===================================
   What Section
====================================== */
.what{}

.process{position: relative;}
.process-vline {
	display: block;
	width: 1px;
	height: 100%;
	background-color: #111;
	position: absolute;
	top: 0;
	left: 24px;
}
.process .process-col{position: relative; padding-left: 64px; padding-bottom: 10px;}
.process .process-col::before {
	content: attr(data-item);
	display: block;
	font-size: 18px;
	text-align: center;
	color: #fff;
	background-color: #111;
	height: 48px;
	width: 48px;
	line-height: 48px;
	border-radius: 50%;
	box-shadow: 0 0 0 18px #F1F1F1;
	position: absolute;
	left: 0;
	top: 15px;
}
.process .process-text{padding-right: 30px;}

/* ===================================
   Portfolio Section
====================================== */
.portfolio{}
.portfolio .row-1{position: relative; z-index: 1;}
.portfolio .row-1 img{border-left: 10px solid #fff; border-bottom: 10px solid #fff;}
.portfolio .row-2{position: relative; z-index: 0; margin-top: -100px;}

/* ===================================
   Reference Section
====================================== */
.reference{margin-top: 150px;}

.reference .swiper {padding-bottom: 40px;}
.reference .swiper-slide {display: flex; height: auto;}
.reference .swiper-pagination-bullet{background-color: #5E5E5E;}

.reference-card {padding: 0; width: 100%;}
.reference-card p {}
.reference-card .reference-name{line-height: 140%; margin-left: 40px;}

/* ===================================
   Form Section
====================================== */
.contact-form{}
.contact-form button[type="submit"] {transition: 0.4s; cursor: pointer;}
.contact-form .form-control {border: 0 none; border-radius: 1px; box-shadow: none; border-bottom: 1px solid #5E5E5E; font-size: 16px; height: auto; padding: 15px 20px 15px 20px; margin-bottom: 30px; text-align: left; background-color: transparent;}
.contact-form .form-control:focus{box-shadow: none !important; border-bottom: 1px solid #5E5E5E !important; color: #5E5E5E;}
.contact-form .help-block{position: absolute; top: -6px; right: 15px; padding: 5px; font-size: 12px; color: red; z-index: 2;}
.contact-form .has-success .help-block, .has-success .control-label, .has-success .radio, .has-success .checkbox, .has-success .radio-inline, .has-success .checkbox-inline, .has-success.radio label, .has-success.checkbox label, .has-success.radio-inline label, .has-success.checkbox-inline label {color: #5E5E5E;}
.contact-form .has-success .form-control {border-color: #5E5E5E; -webkit-box-shadow: none !important; -moz-box-shadow:none !important; box-shadow: none !important; color: #1B96CE;}
.contact-form .has-success .input-group-addon {color: #fff; background-color: #ccc; border-color: #fff;}
.contact-form .has-success .form-control-feedback {color: #5E5E5E;}

.contact-form .agree{max-width: 580px;}
.contact-form .agree a{white-space: nowrap;}

/* float label begin */
textarea + label, input + label {display: block; cursor: text; color: #5E5E5E; transition: all.15s ease-out; -moz-transition: all.15s ease-out; -webkit-transition: all.15s ease-out; position: absolute; top: 12px; left: 40px; font-size: 1em; font-weight: 300;}
textarea:focus + label, input:focus + label, label.stay {top: -18px; left: 20px; opacity: .7; font-size: .8em; font-weight: 300; color: #5E5E5E; transition: all .15s ease-out;}

.btn {background-color: #fff; color: #1B96CE; border: 1px solid #1B96CE; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; padding: 15px 35px; letter-spacing: 3px; outline: none !important; box-shadow: none !important; font-size: 18px;}
.btn::after{height: 0;}
.btn:hover,.btn:focus, .btn:active, .btn:active:focus {color: #fff; background-color: #1B96CE;}
button{outline: none !important; box-shadow: none !important;}

.alert {border-radius: none; margin-bottom: 30px; text-align: left;}
.alert .close {opacity: 0.5; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; line-height: 150%;}
.alert .close:hover {opacity: 1;}
.alert-success {border-color: #9db9df; background-color: #fff;}
.alert-danger {border-color: #e39a9a; background-color: #fff;}
.alert-danger ul{list-style: none; margin: 0; padding: 0;}

.footerContact .agree {color: #fff;}
@media (max-width: 991px) {
    .footerContact {text-align: center;}
    .footerContact .agree {padding-bottom: 25px;}
}

/* ===================================
   Contact Section
====================================== */
.contact{background-color: #111; margin-top: 150px; padding-bottom: 100px !important;}
.contact h2, .contact p, .contact .subhead{color: #fff;}
.contact .subhead::before{background-color: #fff;}

.contact .phone, .contact .mail, .contact .facebook{position: relative; margin-left: 30px;}
.contact .phone::before, .contact .mail::before, .contact .facebook::before{
	content: "";
	display: block;
	position: absolute;
	width: 18px;
	height: 100%;
	top: 0;
	left: -30px;
}
.contact .phone::before{background: url("/images/icon-phone.svg") no-repeat left top;}
.contact .mail::before{background: url("/images/icon-email.svg") no-repeat left top; top: 4px;}
.contact .facebook::before{background: url("/images/icon-facebook.svg") no-repeat left top;}

.copyright{font-size: 14px; letter-spacing: 1px; padding-top: 40px;}

/* Modal */
.modal-content{-webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border: 0 none; padding: 35px;}
.modal-content h3{color: #9db9df; font-weight: 400; padding-top: 0;}
.modal-content p{color: initial;}
.modal-content .btn {background-color: #1B96CE; color: #fff; border: none; text-transform: uppercase; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; padding: 15px 35px; cursor: pointer;}
.modal-content .btn:focus, .modal-content .btn:active, .modal-content .btn:active:focus {color: #fff; background-color: #1B96CE; outline: none !important; box-shadow: none !important;}
.modal .modal-footer{border: 0 none;}
.modal .date{float: right; margin-left: 20px;}
.modal .files{margin-bottom: 30px;}

.modal ul{margin-left: 15px; margin-bottom: 35px;}
.modal ul li{list-style: circle !important; padding-left: 10px;}

@media (max-width: 991px) {
    .modal-content{padding: 5px;}
}

/*
* Google captcha
* -----------------
*/
.grecaptcha-badge { visibility: hidden; }
.recaptchaText {
    background-color: #f8f8f8;
    display: inline-block;
    padding: 15px 25px;
    width: 100%;
    line-height: 120%;
    font-size: 14px;
}

/*
* Fancybox 4
* -----------------
*/
.fancybox__thumbs .carousel__slide .fancybox__thumb::after {
	border: 3px solid #1B96CE;
	border-radius: 0;
}
.fancybox__thumb{border-radius: 0;}

/* ===================================
    11. Responsive CSS
====================================== */

@media screen and (max-width: 1599px) {
    .content-left {width: 320px;}
    .content-left-wrapper {padding-left: 55px;}
    .content-right {margin-left: 320px; width: calc(100% - 320px);}
    .menu-holder {width: 320px; transform: translateX(-320px); padding-left: 55px;}

    .section {padding-top: 75px;}
	.reference, .what, .contact{margin-top: 75px;}
	.reference.dark-bg{padding-bottom: 75px;}

    .content-right-wrapper > div:last-of-type {padding-bottom: 75px;}
	.contact {padding-bottom: 35px !important;}

}

@media screen and (max-width: 1360px) {
    .content-left {width: 90px;}
    .content-left-wrapper {padding-left: 34px;}
    .content-right {margin-left: 90px; width: calc(100% - 90px);}

	.my-info-wrapper {display: none;}

    .menu-wrapper {padding-top: 0;}

    h2.section-title {padding-bottom: 0;}
}

@media screen and (max-width: 1020px) {
    .about p{font-size: 18px;}
    .content-left {height: 55px; width: 100%; z-index: 2;}
    .toggle-holder {top: 15px; left: 15px;}
    .content-right {margin-left: 0; width: 100%;}
}

@media screen and (max-width: 767px) {
    .full-width-section .section-wrapper {height: auto; padding: 75px 5%; align-items: center;}
    .content-right-wrapper > div:first-of-type .section-wrapper {padding-top: 125px;}

    .home-left-part {flex: 0 0 100%; margin: 0; padding-top: 0;}
    .home-right-part {display: none;}

    h1.entry-title {font-size: 50px; text-align: center;}
    .site-info{text-align: center;}
    .site-info span{display: inline; margin-left: 0;}
    .site-info span:last-of-type{display: inline; margin-left: 0;}

	.certificates .card{text-align: center; width: 100%; margin-bottom: 25px;}
	.certificates .card.last{margin-bottom: 0;}

	.portfolio .row-1 img{border: none;}
	.portfolio .row-2{margin-top: 0;}

    .service-box p {font-size: 16px; letter-spacing: 0;}

    .cooperation .logos li img{height: 40px;}
}

@media screen and (max-width: 650px) {
    .menu-holder {width: 100%; transform: translateX(-100%); padding-top: 70px; padding-left: 40px; overflow: auto;}
    .button-group-wrapper > a:last-of-type {margin-bottom: 0;}

    .site-info{font-size: 22px;}
}

@media screen and (max-width: 575px) {
    .about p{font-size: 18px;}
	.about p.lead{font-size: 22px;}
    .about img.float-right{float: none !important; margin: 0 auto;}
    .contact-form img.float-right{float: none !important; margin: 0 auto;}
}

@media screen and (max-width: 480px) {
    .button-group-wrapper > .button {display: table; margin-left: 0; margin-bottom: 20px;}
    h1.entry-title{font-size: 38px;}
}

@media screen and (min-width: 1021px) {
    .content-left .cap-odznak {left: -5px; top: 60px;}
}
@media screen and (min-width: 1361px) {
    .content-left .cap-odznak{display: none;}
}