/*
Theme Name: solidity
Text Domain: solidity
*/
:root {
	--black-text: #1c1c1c;
	--bej-text: #c4a97c;
	--white: #fff;
	--gray-text: #d0c3b6;
	--gray: #353434;
	--grey-dark: #2b2a2a;
	--gray-ligt: #474747;
	--orange-link: #d16f26;
}
footer nav ul li:nth-child(4) {
	display:none;
}
:root {
  --font-family: "Open Sans", sans-serif;
  --second-family: "Quicksand", sans-serif;
}
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing:    border-box;
	box-sizing:         border-box;
}
body {
	font-family: var(--font-family);
font-weight: 400;
font-size: 18px;
line-height: 150%;
color: var(--gray-text);
margin:0;
}
a {
	text-decoration:none;
	cursor:pointer;
	transition:all linear .25s;
}
svg {
	display: block;
	transition:all linear .25s;
}
input,button,textarea {
	font-family: var(--font-family);
font-weight: 400;
font-size: 18px;
line-height: 150%;
color: var(--gray-text);
}
div,a,img,button {
	outline:none;
}
* {
	outline:none;
}
ul {
	list-style:none;
	padding:0;
	margin:0;
}
p {
	margin:0;
}
.fl,.d-flex {
	display:flex;
}
.fw {
	flex-wrap:wrap;
}
.sb {
	justify-content: space-between;
}
.aligncenter {
	align-content: center;
	align-items: center;
}
.container {
	width: 100%;
	margin:0 auto;
	max-width: 1180px;
	padding: 0 20px;
}
.home-link {
	display: block;
	max-width: 130px;
}
img {
	max-width: 100%;
	display: block;
}
header {
	padding: 21px 0;
	position: absolute;
	width: 100%;
	left: 0;
	top:0;
	z-index: 9;
}
nav a {
	font-family: var(--second-family);
font-weight: 500;
font-size: 15px;
color: var(--white);
}
nav a:hover {
	color:#D16F26;
}
nav ul {
	display: flex;
	gap:40px;
}
.btn {
	background: none;
	display: inline-flex;
	padding: 15px 30px;
font-weight: 500;
font-size: 16px;
color: var(--bej-text);
line-height: 1.25;
border: 1px solid var(--bej-text);
border-radius: 2px;
cursor: pointer;
transition:all linear .25s;
}
.btn:hover {
	background: var(--gray-text);
	border-color: var(--gray-text);
	color: var(--black-text);
}
#banner {
	overflow:hidden;
	padding-bottom: 45px;
}
#banner .d-flex {
	position: relative;
}
.lang {
	position: fixed;
	right: 30px;
	z-index: 3;
	bottom: 30px;
	z-index: 9;
}
.lang p {
	display: flex;
	align-items: center;
	gap:4px;
	font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
color: var(--white);
width: 60px;
height: 60px;
box-shadow: 0 4px 20px 0 rgba(69, 70, 70, 0.5);
background: #545454;
justify-content: center;
text-transform: uppercase;
transition:all linear .25s;
cursor: pointer;
}
.lang p.open svg {
	transform:rotate(180deg);
}
.lang p:hover {
	background: #D0C3B6;
}
.lang ul {
	position: absolute;
	bottom: 100%;
	width: 100%;
	display: none;
}
.lang ul a {
	display: flex;
	align-items: center;
	gap:4px;
	font-family: var(--font-family);
font-weight: 500;
font-size: 16px;
color: var(--white);
width: 60px;
height: 40px;
background: #545454;
justify-content: center;
text-transform: uppercase;
}
.lang a:hover {
	background: #D0C3B6;
}
.lang p svg {
	fill:#fff;
}
#banner > div {
	padding: 130px 0 0;
}
#banner .col-left {
	width: 100%;
	max-width: 835px;
	position: relative;
	z-index: 2;
	padding-top:35px;
	padding-bottom: 85px;
}
#banner .col-right {
	width: 100%;
	max-width: calc(100% - 835px);
	position: relative;
}
#banner .img1 {
	max-width: unset;
	position: absolute;
	left: -100px;
	top:0;
	max-height: 100%;
}
#banner .img2 {
	border: 15px solid var(--gray-ligt);
	max-width: 365px;
	position: absolute;
	left: -100px;
	transform:translateX(-50%);
	bottom: -45px;
	max-height: 100%;
}
#banner h1 {
	margin:0 0 45px;
	font-weight: 600;
font-size: 52px;
line-height: 130%;
letter-spacing: 0.01em;
text-transform: uppercase;
color: var(--white);
}
#banner h1 span {
	color: var(--bej-text);
}
#banner .buttons {
	margin:0 0 60px;
	gap:30px;
}
.btn1 {
	background: var(--bej-text);
	border-color:var(--bej-text);
	color: var(--black-text);
}
.btn1:hover {
	background: var(--gray-text);
	border-color:var(--gray-text);
}
.buttons .btn {
	padding: 20px 30px;
	font-size: 20px;
}
#banner .desc {
	margin-left: 50px;
	padding: 43px 38px;
	color: var(--gray-text);
	background: #212121;
	max-width: 440px;
}
#about {
	padding: 90px 0 50px;
}
#about .col-left {
	width: 100%;
	max-width: 390px;
	position: relative;
	padding-left: 40px;
	z-index: 2;
}
#about .col-left:before {
	content:' ';
	display: block;
	left: 0;
	position: absolute;
	top:50px;
	width: 240px;
	height:100%;
	z-index: -1;
	background: var(--gray-ligt);
}
#about .col-right {
	width: 100%;
	max-width: calc(100% - 390px);
	padding-left: 55px;
	padding-top: 22px;
}
.section-title {
	font-weight: 500;
font-size: 40px;
line-height: 130%;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--bej-text);
margin:0 0 28px;
}
.section-title span {
	color:#fff;
}
#about .section-title {
	font-size: 32px;
}
#about .desc {
	max-width: 525px;
}
main {
	background: linear-gradient(137deg, #1e1c1c 13.58%, #3b3b3b 100%);
}
#services {
	padding: 70px 0 110px;
}
#services .section-title {
	text-align: center;
	margin:0 0 30px;
}
#services .sub {
	text-align: center;
	margin:0 0 50px;
}
.services {
	gap:20px;
}
.services > div {
	width: 100%;
	max-width: calc(33.33% - 20px*2/3);
	position: relative;
	overflow:hidden;
	height: 310px;
	background: var(--grey-dark);
	border: 1px solid var(--gray-ligt);
	transition:all linear .25s;
}
.services > div:hover {
	box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.25);
}
.services > div:nth-child(9n+1),
.services > div:nth-child(9n+6),
.services > div:nth-child(9n+8) {
	border:0;
}
.services > div:nth-child(9n+5) {
	background: #252525;
	border: 1px solid #252525;
}
.services > div:nth-child(9n+3) {
	background: #ac9d8a;
	border: 1px solid #ac9d8a;
}
.services > div > img {
	position: absolute;
	width: 102%;
	max-width: 102%;
	height: 102%;
	left: 0;
	top:0;
	opacity: 0.3;
}
.services > div > div {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	align-content: flex-end;
	position: relative;
	z-index: 2;
	height: 310px;
	padding: 30px;
	cursor: pointer;
	position: relative;
}
.services .title {
	width: 100%;
	display: flex;
	justify-content: space-between;
	font-weight: 500;
font-size: 16px;
line-height: 150%;
text-transform: uppercase;
color: var(--white);
align-items: flex-end;
align-content: flex-end;
padding-right: 35px;
}
.services svg {
	stroke:#C4A97C;
	min-width: 16px;
	position: absolute;
	bottom: 33px;
	right: 30px;
	z-index: 2;
}
.services > div:nth-child(9n+3) svg {
	stroke:#1C1C1C;
}
.services .icon {
	margin:0 0 25px;
	height: 60px;
	overflow:hidden;
	transition:all linear .25s;
}
.services .btn {
	padding: 15px 30px;
}
.services .more {
	margin:0;
	height: 0;
	overflow:hidden;
	transition:all linear .25s;
}
.services > div:hover .more {
	margin-top: 35px;
	height: 50px;
}
.services > div:hover .icon {
/* 	margin:0 0 0; */
/* 	height: 0; */
}
#projects {
	padding: 110px 0;
	background: #e6e6e6;
}
#projects .top {
	margin:0 0 50px;
}
#projects .section-title {
	margin:0;
}
#projects .section-title span {
	color: var(--black-text);
}
.tabs {
	gap:6px;
}
.tabs a {
	padding: 12px 22px;
	font-weight: 600;
font-size: 16px;
color: var(--black-text);
border:1px solid transparent;
border-radius: 2px;
}
.tabs a.active {
	color:var(--bej-text);
	border-color: var(--bej-text);
}
.tabs a:not(.active):hover {
	color: var(--orange-link);
}
.projects {
	display: grid;
	gap:5px;
	grid-template-columns: 40% calc(20% - 5px) calc(20% - 5px) calc(20% - 5px);
	grid-template-rows: auto;
}
.projects > a:first-child {
	grid-row:1/3;
}
.projects > a {
	display: block;
	position: relative;
}
.projects > a img {
	object-fit: cover;
	width: 100%;
	height: 23.75vw;
}
.projects > a:first-child img {
	height: calc(2*23.75vw + 5px);
}
.projects > a p {
	position: absolute;
	z-index: 2;
	color:#fff;
	bottom: 24px;
	right: 40px;
	font-weight: 500;
font-size: 15px;
line-height: 130%;
text-align: right;
color: var(--white);
width: calc(100% - 80px);
}
.prj > div {
	display: none;
}
#projects .more {
	display: flex;
	padding: 25px 30px;
	align-items: center;
	gap:15px;
	font-family: var(--second-family);
font-weight: 500;
font-size: 16px;
line-height: 130%;
letter-spacing: 0.03em;
color: var(--white);
background: #ac9d8a;
margin-top: 5px;
margin-left: auto;
max-width: calc(60% - 5px);
}
#projects .more:hover {
	background: var(--gray-text);
}
#garantee {
	padding: 100px 0 50px;
}
#garantee .section-title {
	text-align: center;
	margin:0 0 50px;
}
.garantee {
	gap:20px;
}
.garantee > div {
	max-width: calc(33.33% - 20px*2/3);
	background: #ebebeb;
	padding: 75px 40px;
	text-align: center;
}
.garantee .title {
	margin:0 0 65px;
	font-weight: 500;
font-size: 24px;
line-height: 130%;
letter-spacing: 0.03em;
text-transform: uppercase;
text-align: center;
color: var(--black-text);
}
.garantee .icon {
	margin:0 0 90px;
	height: 140px;
}
.garantee .icon img {
	margin:0 auto;
	max-height: 100%;
}
.garantee .desc {
	font-weight: 500;
font-size: 15px;
line-height: 130%;
text-align: center;
color: var(--black-text);
}
.garantee > div:nth-child(2) {
	background: #201f1f;
}
.garantee > div:nth-child(2) .title {
	color: var(--gray-text);
}
.garantee > div:nth-child(2) .desc {
	color: var(--gray-text);
}
#prices {
	padding: 70px 0 120px;
	overflow:hidden;
}
#prices .col-left {
	width: 100%;
	max-width: 560px;
	padding-right: 70px;
	padding-top: 40px;
}
#prices .col-right {
	width: 100%;
	max-width: 365px;
	padding-right: 15px;
}
#prices .section-title {
	margin:0 0 40px;
	font-size: 32px;
}
#prices .desc {
	margin:0 0 40px;
}
#prices .link1 {
	display: flex;
	align-items: center;
	gap:10px;
	font-family: var(--second-family);
font-weight: 500;
font-size: 16px;
line-height: 130%;
letter-spacing: 0.03em;
text-align: right;
color: var(--orange-link);
margin:0 0 40px;
}
#prices .link1:hover {
	color: var(--gray-text);
}
#prices .link1 svg {
	stroke:var(--orange-link);
}
#prices .link1:hover svg {
	stroke:var(--gray-text);
}
#prices .btn {
	display: inline-flex;
	gap:15px;
	align-items: center;
	padding: 19px 30px;
}
#prices .img {
	position: relative;
}
#prices .img img {
	position: relative;
	z-index: 2;
}
#prices .img:before {
	content:' ';
	position: absolute;
	left: -50px;
	top:100px;
	background: var(--gray-ligt);
	width: 100vw;
	height: 385px;
}
#prices .img:after {
	content:' ';
	position: absolute;
	right: -15px;
	bottom: -15px;
	background: var(--white);
	width: 320px;
	height: 215px;
}
#form {
	position: relative;
	padding: 70px 0;
}
#form .section-title {
	margin:0 0 30px;
	text-align: center;
	font-size: 32px;
}
#form > div {
	position: relative;
	z-index: 2;
}
#form > img {
	position: absolute;
	z-index: 1;
	opacity: 0.2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	left: 0;
	top: 0;
}
#form .form {
	max-width: 900px;
	margin:0 auto;
}
.form input {
	padding: 0 0 12px;
	background: transparent;
	border:0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	font-family: var(--font-family);
font-weight: 500;
font-size: 15px;
line-height: 130%;
color: var(--white);
width: 100%;
margin:0 0 30px;
}
.form textarea {
	padding: 12px 19px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.5);
	resize: none;
	font-family: var(--font-family);
font-weight: 500;
font-size: 15px;
line-height: 130%;
color: var(--white);
width: 100%;
height:100px;
margin:0 0 30px;
}
.form select {
	-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
 user-select: none;
 width: 100%;
-webkit-appearance: none;
-moz-appearance: radio-container;
 appearance: none;
	padding: 0 0 12px;
	border: 0;
	background: transparent url(images/arrow.svg) no-repeat right 5px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	font-family: var(--font-family);
font-weight: 500;
font-size: 15px;
line-height: 130%;
color: var(--white);
width: 100%;
margin:0 0 30px;
}
.form select option {
	color:#000;
}
form input::placeholder, form textarea::placeholder {
	font-family: var(--font-family);
font-weight: 500;
font-size: 15px;
line-height: 130%;
color: var(--white);
}
form br {
	display: none;
}
form .d-flex > * {
	display: flex;
	gap:40px;
}
form .d-flex > * > * {
	width: 100%;
}
.wpcf7-not-valid-tip, .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
	display: none !important;
}
form .wpcf7-not-valid {
	border-color:red !important;
}
.wpcf7 form.sent .wpcf7-response-output {
	text-align: center;
	color:#fff;
	font-size: 15px;
	border-radius: 5px;
	padding: 7px 15px;
	margin:15px 0 0;
}
.form > img {
	margin-right: -40px;
	opacity: 0.15;
	margin-top: 30px;
}
#reviews {
	padding: 110px 0 60px;
	overflow:hidden;
}
#reviews h2 {
	margin:0 0 60px;
}
.rev {
	padding: 25px;
	border: 1px solid var(--gray-ligt);
}
.rev .stars {
	justify-content: flex-end;
	margin:0 0 30px;
}
.rev .name {
	font-family: var(--second-family);
font-weight: 500;
font-size: 16px;
line-height: 130%;
letter-spacing: 0.03em;
color: var(--bej-text);
margin:0 0 20px;
}
.rev .text {
	font-weight: 400;
font-size: 14px;
line-height: 130%;
color: var(--white);
}
#reviews .slick-slide {
	margin:0 10px;
}
#reviews .slick-list {
	margin:0 -10px;
	overflow:visible;
}
#reviews .arrows {
	margin: 10px 0 0;
	gap:17px;
}
#reviews > div {
	cursor: pointer;
}
#reviews .arrows svg {
	fill:#C4A97C;
}
.reviews {
	overflow:visible;
}
.reviews .slick-slide,.reviews .slick-slide[aria-hidden=true]:not(.slick-cloned) ~ .slick-cloned[aria-hidden=true] {
	opacity: 0.3;
}
.reviews .slick-active ,
.reviews .slick-slide[aria-hidden=true]:not([tabindex="-1"]) + .slick-cloned[aria-hidden=true] + .slick-cloned[aria-hidden=true],
.reviews .slick-slide[aria-hidden=true]:not([tabindex="-1"]) + .slick-cloned[aria-hidden=true],
.reviews .slick-slide[aria-hidden=true]:not([tabindex="-1"]) + .slick-cloned[aria-hidden=true] + .slick-cloned[aria-hidden=true] + .slick-cloned[aria-hidden=true] {
	opacity: 1;
}
#reviews .progress {
	height: 1px;
	background: var(--gray-ligt);
	margin-top: 30px;
}
#reviews .progress span {
	display: block;
	height: 4px;
	background: var(--bej-text);
	border-color: 10px;
	margin-bottom: -3px;
	transition:all linear .25s;
}
#contacts {
	padding: 23px 0;
	background: #a69686;
}
#contacts .name {
	font-family: var(--font-family);
font-weight: 500;
font-size: 24px;
line-height: 150%;
text-transform: uppercase;
color: var(--white);
opacity: 0.15;
}
#contacts .a {
	font-family: var(--font-family);
font-weight: 400;
font-size: 18px;
line-height: 150%;
color: var(--black-text);
padding-left: 31px;
display: block;
margin-top: 2px;
}
#contacts a.a:hover {
	/*color:#D16F26;*/
}
#contacts .tel {
	background: url(images/f1.svg) no-repeat left center;
}
#contacts .address {
	background: url(images/f2.svg) no-repeat left center;
}
#contacts .email {
	background: url(images/f3.svg) no-repeat left center;
}
#contacts .container {
	max-width: 1355px;
}
footer {
	padding-top: 40px;
	background: #272727;
}
footer .home-link {
	max-width: 115px;
}
footer nav {
	opacity: 0.7;
}
footer .copy {
	margin-top: 40px;
	padding:30px 0;
	border-top:1px solid var(--gray-ligt);
	font-family: var(--font-family);
font-weight: 400;
font-size: 14px;
line-height: 130%;
color: var(--white);
}
.copy p {
opacity: 0.7;	
}
.social {
	gap:7px;
}
.social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background: #3e3d3d;
	border-radius: 2px;
}
.social a svg {
	fill:#fff;
}
.social a:hover svg {
	fill:#1C1C1C;
}
.social a:hover {
	background: var(--gray-text);
}
.footer-menu {
	display: flex;
	gap:30px;
	opacity: 0.7;
}
.footer-menu a {
	font-family: var(--font-family);
font-weight: 500;
font-size: 14px;
text-decoration: underline;
text-decoration-skip-ink: none;
color: var(--white);
}
.footer-menu a:hover {
	color: var(--orange-link);
}
#page {
	padding: 150px 0 100px;
}
#page h1 {
	margin:0 0 40px;
}
.content > * + * {
	margin-top: 20px;
}
.content ul {
	list-style:disc;
	padding-left:20px;
}
.content h2 {
	font-family: var(--font-family);
font-weight: 500;
font-size: 30px;
line-height: 130%;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--bej-text);
margin:30px 0 20px;
}
.content h3 {
	font-family: var(--font-family);
font-weight: 500;
font-size: 24px;
line-height: 130%;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--bej-text);
margin:20px 0;
}
#page.e404 h1 {
	margin:0;
}
.open-menu {
	display: none;
	width: 40px;
	height: 30px;
	cursor: pointer;
	margin-left: 10px;
}
.open-menu span {
	width: 30px;
	height: 3px;
	margin:3px 0;
	background: #fff;
	border-radius: 2px;
}
@media screen and (max-width:1400px) {
	.lang {
		bottom:75px;
	}
}