@charset "utf-8";

:root {
    --color:#ffbf00;
    --dark-color:#0b2653;
    --light-color:rgba(87,90,224,0.1);
    --font: 'Open Sans', sans-serif;
    --font-title: 'Open Sans', sans-serif;
    --box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    --box-shadow-hover: 0 10px 20px rgba(0,0,0,0.2)
}

*, *:before, *:after {-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}

body {font-family:var(--font);margin:0;padding:0;overflow-x:hidden}
a {text-decoration:none;color:unset;}
body.modal-opened {overflow: hidden;}

h1,h2,h3,h4,h5,h6 {font-family:var(--font-title);}

img {display:block;max-width:100%;transition: 1s all;}

.button {display:inline-block;cursor: pointer;background:var(--color);padding: 12px 30px;border:0;border-radius:8px;font-size: 15px;font-weight:600;transition:.2s all}
.button.gray {background:#333;color:#fff;}
.button svg,
.button img,
.button span {display:inline-block;vertical-align:middle;}
.button img {width:25px;height:25px;}
.button.white {background:#fff;}

.button:hover {transform:scale(1.01);box-shadow:5px 5px 5px rgba(0,0,0,0.05)}

.elem-25,.elem-33,.elem-40,.elem-50,.elem-60,.elem-66,.elem-70,.elem-75 {float:left}
.elem-25 {width:25%}.elem-33 {width:33.333333%}.elem-40 {width:40%}.elem-50{width:50%}.elem-60{width:60%;}.elem-66{width:66.666666%}.elem-70{width:70%}.elem-75{width:75%}

.clearfix:before,.clearfix:after {display:table;content:" "}
.clearfix:after {clear:both}

.container {margin: 0 auto;max-width: 1300px;padding: 0 10px;}
.container-min {max-width: 900px;}

.swiper-pagination-bullets .swiper-pagination-bullet {width:7px;height:7px;}
.swiper-pagination-bullets .swiper-pagination-bullet-active {background:var(--color)}


section {padding:30px 0;}
section p {line-height:1.7em;font-size:15px;}
section h2 {font-size:20px;}

section .yellow-bg,
section .gray-bg {background:var(--color);padding: 20px 40px;border-radius: 15px;}
section .gray-bg {background:#f0f0f0;}

small.cookie-line {display:inline-block;opacity:.5;padding:5px;font-size:11px;}
small.cookie-line a {text-decoration: underline}

nav {position:fixed;top:0;left:0;right:0;padding:15px 0;z-index:99;transition:.2s all}
nav .logo {width:400px;margin-right:50px;transition:.2s all}
nav .container {display:flex;}
nav .container .menu {margin:auto 0}
nav .container .social {display:flex;margin:auto 10px auto auto;}
nav .container .social a {display:block;padding:0 5px}
nav .container .social a:hover img {transform:scale(1.1)}
nav .container .social img {width:20px;transition:.2s all}
nav .container .button {margin:auto 0 auto 10px;white-space:nowrap;}
nav ul {margin:0;padding:0;}
nav ul li svg {display:inline-block;vertical-align: middle;;width:20px;height:20px;}
nav ul li {display: inline-block;margin-left:10px;font-weight:600;font-size:17px;opacity:.7}

nav.scrolled {background:#fff;padding: 5px 0;box-shadow:0 0 10px rgba(0,0,0,0.15)}
nav.scrolled .logo {width:250px;padding:5px 0;}

footer {background:#555;color:#fff;fill:#fff}
footer .block {padding:20px;}
footer .block h4 {font-weight:400;opacity:.6;margin:0}
footer .block.about-company p {font-size:14px;opacity:.6;}
footer .block.about-company a {font-size:13px;text-decoration:underline}
footer .block.contacts {margin-top:30px;}
footer .block ul {margin:0;padding:0;}
footer .block ul li {display:block;vertical-align:middle;}
footer .block ul li svg {display:inline-block;vertical-align:middle;width:28px;}
footer .block.contacts ul li {margin-bottom:10px;font-size:14px;}
footer .block.social ul li {display:inline-block;}
footer .block.social ul li img {width:40px;height:40px;background:#f0f0f0;border-radius:50%;padding:3px;}
footer .block.social ul li span {display:none}
footer .container {border-bottom:1px solid #999}
footer .copy {margin:0;padding-top:20px;text-align:center;padding:20px;font-size:13px;}


.modal {opacity:0;visibility:hidden;}
.modal .modal-bg {position:fixed;top:0;right:0;left:0;bottom:0;z-index:101;background:rgba(0,0,0,0.5);}
.modal .modal-window {position:fixed;top:20%;left:calc(50% - 275px);width:550px;margin:auto;background:#fff;padding:50px;border-radius:15px;z-index: 102;max-width: 100%;}
.modal form {margin:0;}
.modal form h4 {font-size:20px;margin:0;padding:0 5px 5px;}
.modal form p {margin:0;padding:5px 5px 10px;font-size:14px;}
.modal form .line {padding:5px;}
.modal form .line input {display:block;width:100%;padding:15px;border-radius:10px;border:1px solid #e5e5e5}
.modal.opened {opacity:1;visibility:visible;}

section#top {background:url('images/bg2.jpg');background-size:cover;background-position:top left;height:600px;}
section#top .container {display:flex;height:100%;}
section#top .container .block {width:45%;margin:auto 0;}
section#top .container h2 {font-size:25px;}

section#about h1 {font-size:25px;}
section#about .block {padding-left:50px;}

section#checks .item {padding:20px;text-align:center;}
section#checks .item img {display:inline-block;width:100px;transition:.2s all}
section#checks .item:hover img {transform:scale(-1,1)}
section#checks .item span {display:block;margin-top:20px;font-weight:500;font-size:14px;}
section#checks .item span b {font-size:40px;color:var(--color)}
section#checks .item p {font-size:14px;font-weight:700;margin:10px 0 0}

section#services .title-line {display:flex;}
section#services img {width:70px;margin-right:20px;}
section#services h3 {font-size:25px;margin:auto 0}
section#services .elem-50 {padding:10px;}
section#services .block {padding:30px;border-radius:10px;background:#f0f0f0;}
section#services .block ul {margin:0;padding:20px 0 0;}
section#services .block ul li {display:block;position:relative;padding-left:15px;margin-left:10px;line-height:1.8em;font-size:15px;}
section#services .block ul li:before {position:absolute;left:0;top:50%;content:'';width:5px;height:5px;background:var(--color)}

section#building {padding-top:0px;}
section#building h2 {text-align:center;}
section#building .elem-50 {padding:10px;}
section#building .thumb {overflow:hidden}
section#building .item {position:relative;display:block;box-shadow:0 5px 10px rgba(0,0,0,0.15);border-radius:10px;overflow:hidden}
section#building .item h3 {position:absolute;left:0;bottom:0;text-align: center;margin:0;padding:15px;font-size:20px;background:var(--color);font-weight:600;border-radius:0 10px 0 0;}
section#building .item:hover img {transform:scale(1.03)}

section#peoples h2 {text-align:center}
section#peoples .item {padding:5px;}
section#peoples .item img {border-radius:10px;}
section#peoples .item span {display:block;text-align:center;padding:15px 0;font-size:17px;}
section#peoples .swiper {margin-top:-60px}
section#peoples .swiper .swiper-wrapper {padding-top:60px;}
section#peoples .swiper-button-next, section#peoples .swiper-button-prev {color:#000;background:rgba(0,0,0,0.2);padding:15px;top:25px;border-radius:50px;}
section#peoples .swiper-button-prev {left:auto;right:60px;}
section#peoples .swiper-pagination {display:none}


section#job .elem-60 {float:right;padding-left:50px;}
section#job a {font-weight:600;font-size:20px;}
section#job a svg {display:inline-block;vertical-align:middle;}

section .yellow-bg {background:var(--color);padding: 20px 40px;border-radius: 15px;}
section#form form .line {padding:5px 0;;}
section#form form .line input {border:0;background:#dda600;padding: 14px 15px;border-radius: 7px;width:300px;max-width:100%;font-size: 14px;}
section#form img {max-width:350px;}

section#social {padding-top:0;}
section#social .block {margin-top:50px}
section#social .block ul {margin:0;padding:0;}
section#social .block ul li {display:inline-block;margin-right:10px}
section#social .block ul li img {display:block;width:50px;height:50px;transition:.2s all}
section#social .block ul li:hover img {transform:scale(1.08)}
section#social .block ul li span {display:none}

section#reviews .gray-bg {display:flex}
section#reviews .gray-bg .elem-60 {margin:auto 0}

section#docs {text-align:center;padding:0 0 50px;}
section#docs .title-line {max-width:600px;margin:0 auto}
section#docs .docs-line {display:flex;max-width:500px;margin:0 auto}
section#docs .docs-line img {display:inline-block;transition:.2s all}
section#docs .docs-line img:hover {transform:scale(1.01)}

@media only screen and (max-width : 1000px) {
    nav .container .social {display:none}
    nav .button {margin-left:auto}
}
@media only screen and (max-width : 860px) {
    nav ul li {margin-left:0;}
    
    section#top {background-position:30% center}
    section#top .container h2,
    section#about h1 {font-size:30px}

    section#checks .item span b {font-size:35px}
}

@media only screen and (max-width : 750px) {
    nav .menu {display:none}
    nav .container .button {margin-left:auto}
    
    section#top .container h2,
    section#about h1 {font-size:25px}
    
    section#checks .elem-25 {width:50%}
}

@media only screen and (max-width : 600px) {
    .elem-40 {width:80%}
    .elem-50,.elem-60 {width:100%}
    
    .modal .modal-window {left:0;width:90%;margin:0 5%;padding:30px;}
    
    nav .logo {width:220px;}
    nav.scrolled .logo {width:180px;padding:7px 0;}
    
    section#top .container .block {width:80%}
    section#about .block {margin:-50px 0 0 0;padding:0;}
    
    section#job .elem-60 {float:unset;padding-left:0;}
    
    section#social .elem-40 {display:none}
    
    section#peoples .swiper {margin-top:-20px}
    
    section#reviews .gray-bg {display:block;}
    section#reviews .button {margin-top:5px;}
}

@media only screen and (max-width : 500px) {
    section .yellow-bg,
    section#reviews .gray-bg {padding:20px}
    
    nav .button {padding:10px;}
    nav .button span {display:none}
    
    section#peoples .swiper .swiper-wrapper {padding-top:70px}
    section#peoples .swiper-button-prev {left:calc(50% - 50px);top: 30px;}
    section#peoples .swiper-button-next {left:50%;top: 30px;}
}

@media only screen and (max-width : 400px) {
    section#services .block {padding:20px;}
    
    section#checks .item {padding:10px}
    section#checks .item img {width:60px}
    section#checks .item span b {font-size:30px;}
    section#checks .item p {font-size:13px;}
}