*{
--test-bg:none;
--sq-rad:0px;
--col-gap-px:25;
}
.main-content > section, .main-content {margin-top:0}
.top-page {height:60vh; width:auto; margin:0 calc(1vw*var(--wrap)/2 - 50vw); background:center; background-size:cover; position: relative}
.ind-page .top-page {height:100vh; z-index: 0;}
.top-page div {}
.top-page-bg-gr {padding-top:90px; background:linear-gradient(180deg, #2B2A2F 0%, rgba(43, 42, 47, 0.7) 46.34%, rgba(43, 42, 47, 0) 100%, rgba(43, 42, 47, 0) 100%); width:100%; align-content: center; height:60vh;}
.top-page-bg-img {position: absolute; top: 0; z-index: -1; padding: 0; width:100%; align-content: center; height:60vh;}
.top-page-bg-img img{object-fit:cover; height:100%; width:100%;}
.top-page h1:before {content: ''; height: 1px; width:40px; background: #fff; display: block; margin-right: 10px;}
.arr-to-down {position:absolute; right:5vw; bottom:5vw;}
.arr-to-down img {animation-name: floating; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out;}
@keyframes floating {from { transform: translate(0, 0px);} 65% {transform: translate(0, 15px);} to {transform: translate(0, -0px);}}

.desc-text {height:40vh; display:flex; align-items:center; text-align:center; justify-content:center;}


.ind-price {background: var(--clr-m)}
.ind-price > h2 {padding-top:var(--margin-top)}
.ind-price .serv-cat-sub div {color: var(--clr-b);}
.cat-serv a {width: 50%; display: block;}
.cat-serv a div {position: relative}
.cat-serv a div::after {width:100%; content: ''; background: linear-gradient(90deg, #2B2A2F 0%, rgba(43, 42, 47, 0.7) 46.34%, rgba(43, 42, 47, 0) 100%, rgba(43, 42, 47, 0) 100%); position: absolute; height: 100%; z-index:1; left:0}
.cat-serv a p {width:75%; background:var(--clr-m); color:#fff; display: flex; margin: 0; height:20%; position: absolute; top:40%; align-items: center; font-size: 1.5em; padding-left: 5vw; text-transform: uppercase; z-index: 2;}
.cat-serv a p:after, .cat-serv a p:before {content: ' '; background:linear-gradient(to top left, transparent 0%, transparent 50%, var(--clr-m) 50%, var(--clr-m) 100%); width: 20%; height: 100%; position: absolute; right:-20%; opacity:0;}
.cat-serv a p:before {opacity:1}
.cat-serv a p:after {background:linear-gradient(to top left, transparent 0%, transparent 50%, rgba(43, 42, 47, 0.8) 50%, rgba(43, 42, 47, 0.8) 100%); opacity:0}
.cat-serv a:hover div::after {width:0%;}
.cat-serv a:hover p {background: rgba(43, 42, 47, 0.8);}
.cat-serv a:hover p:before {opacity:0}	
.cat-serv a:hover p:after {opacity:1}
	
.what-do {--col-gap-px:45;}
.what-do > div {border-bottom:1px solid #fff; background:none; margin-top:calc(var(--margin-top)*2);}
.what-do > div > p {text-align: center; padding-bottom: var(--margin-top)}
.what-do > div > div {width:100%; padding:0 0 100%; background:url('https://dobro.ardenis.com.ua/main/img/what-do.png') bottom no-repeat; background-size:contain; position: relative;}
.what-do > div > div > p {display:flex; width:100%; height:100%; font-size:6em; font-weight:600; position:absolute; line-height:1; margin-top:-0.25em;}
.what-do > div > div > p::after {content: ''; position:absolute; width:100%; height:100%; background-position:center bottom; background-size:50%; background-repeat:no-repeat;}
.what-do-01::after {background-image: url(https://dobro.ardenis.com.ua/main/img/what-do-01.png)}
.what-do-02::after {background-image: url(https://dobro.ardenis.com.ua/main/img/what-do-02.png)}
.what-do-03::after {background-image: url(https://dobro.ardenis.com.ua/main/img/what-do-03.png)}
.what-do-04::after {background-image: url(https://dobro.ardenis.com.ua/main/img/what-do-04.png)}
.what-do-05::after {background-image: url(https://dobro.ardenis.com.ua/main/img/what-do-05.png)}
.what-do-06::after {background-image: url(https://dobro.ardenis.com.ua/main/img/what-do-06.png)}
.what-do-07::after {background-image: url(https://dobro.ardenis.com.ua/main/img/what-do-07.png)}
.what-do-08::after {background-image: url(https://dobro.ardenis.com.ua/main/img/what-do-08.png)}
	
h2.sin-sub-title {width: 100%; color:#fff; font-weight: 600; font-size:3em; text-transform:uppercase; display: flex; align-items: center;  margin:calc(var(--margin-top)*3) 0 calc(var(--margin-top)*2);}
h2.sin-sub-title:before {content: ''; height: 1px; width:40px; background: #fff; display: block; margin-right: 10px;}
	
article ul li {padding-left:15px; margin-left:10px;}
article ul li::marker {color:var(--clr-w); line-height:0; content:'\2500\2500\2500\2500\00A0'; font-size:0.6em;}
.serv-cat-sub h2 {font-size:1.5em; font-weight:500; color:var(--clr-w);}
.serv-cat-sub div {font-size:1.5em; color:var(--clr-m); text-transform:uppercase; border-bottom:1px solid #fff; padding-bottom:20px; font-weight:600}
.serv-cat-sub p {text-transform:uppercase; font-weight:600; margin-top:30px; display:flex; align-items:center}
.a-more::after {content:''; display:inline-block; height:8px; width:30px; margin-left:10px; background:no-repeat right; background-image:url(https://dobro.ardenis.com.ua/main/img/arrow-r-m.png);}
.a-more:hover::after {width:50px;}

.cat-serv {position:relative;}
.cat-serv > .a-more {position:absolute; top:-67px; right:5%; width:auto;}

.cat-blog .post-link {position: relative;}
.cat-galer {position: relative}
.cat-galer > .a-more {position: absolute; top: -67px; right: 0;}
.cat-galer > div {margin-top:var(--margin-top)}
.cat-galer .w40 {border:1px solid var(--clr-m); padding: 0 0 40%; position: relative;}
.cat-galer .w40 > div {position: absolute; height: 100%; width: 100%; padding: 25px;}
.cat-galer .w40 div h2 {margin:0; color:var(--clr-m); text-transform: uppercase; font-size: 1.3em; font-weight:600}
.cat-galer .w40 div p {font-size:2.25em; margin-top:calc(var(--margin-top)*2); margin-top:15%}
.cat-galer .w40 div p:last-child {bottom:25px; right:25px; position:absolute;}
.cat-galer .w60 img {object-fit:cover; height:100%; width:100%;}
.cat-galer .w40 div a {font-weight:600; display:block; margin-top:calc(var(--margin-top)*2); margin-top:15%}
.cat-galer .w40 div a::after {content:''; display:inline-block; height:8px; width:30px; margin-left:10px; background:no-repeat right; background-image:url(https://dobro.ardenis.com.ua/main/img/arrow-r-m.png);}

.cat-galer .w40 > div:hover {background:var(--clr-m);}
.cat-galer .w40 div:hover h2 {color:var(--clr-b);}
.cat-galer .w40 div:hover a {color:var(--clr-b);}
.cat-galer .w40 div:hover a::after {width:50px;}


.why-us-block {background-image:url(https://dobro.ardenis.com.ua/main/img/why-us.jpg); height:100vh; position: relative;}
.why-us-block h2 {padding-top:10vh; margin-top: 0;}
.why-us-bg {background:linear-gradient(0deg, #2B2A2F 0%, rgba(43, 42, 47, 0.7) 46.34%, rgba(43, 42, 47, 0) 100%, rgba(43, 42, 47, 0) 100%); width: 100%; height:43vh; position:absolute; bottom:0; z-index:0}
.why-us {margin-top:20vh; position:relative; z-index:1}
.why-us > div {background:url(https://dobro.ardenis.com.ua/main/svg/why-us.svg) no-repeat top left; background-size: cover; border-bottom:1px solid var(--clr-m); text-align:center; margin-top:50px;}
.why-us > div:nth-child(2n+1) {margin-top:0px;}
.why-us p {font-size:6em; font-weight:600; margin: 0; min-height: 1.3em;}
.why-us p:first-child {text-transform:uppercase; font-size:1.3em; padding-top:25px; margin-top:var(--margin-top); min-height:calc(1.3em + 25px);}
.why-us p:last-child {font-size:1.3em; text-align:center; font-weight:400; margin: 0 0 var(--margin-top);}
.our-benef > div {border-bottom:1px solid #fff; padding-bottom: 20px; align-items: flex-start; align-content: flex-start;}
.our-benef > div > div {width:100%; font-size: 6em; color: var(--clr-m); line-height: 1; margin: var(--margin-top) 0;}
.our-benef p {width: calc(100% - 80px); margin: 0}
.our-benef img {width:60px}
.column-5.like-g > div > img {width:100%}
	
	
.serv-cat-sub a	{margin-bottom:70px}
.serv-cat-sub a	{}
.serv-cat-sub a	{}
	
.nav-links {text-align: center}	
.page-numbers {font-size: 1.2em; padding: 10px; margin: 5px;}
	
	
	
@media (max-width: 1366px) {
	h2.sin-sub-title {
    width: 100%;
    color: #fff;
    font-weight: 600;
    font-size: 2em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
		margin: calc(var(--margin-top)*2) 0 var(--margin-top);}
}
	
	
	
	
	
	
	
@media (max-width: 1024px) {
.why-us.column-4 {--col-n: 4; font-size:0.9em}
.our-benef {--col-n: 4;}
}


footer.wrap {background:none; font-weight: 100}
.form-bottom {background:#fff no-repeat; border-radius:10px; background-image: url(https://dobro.ardenis.com.ua/main/img/foot-form.png); display: flex; padding: var(--margin-top); padding-left: calc(var(--margin-top)*4); background-size: contain; background-position-y: 50px; margin: calc(var(--margin-top)*2) 0;}
.form-bottom .w30 {color:var(--clr-b); font-size:1.75em; width:35%;}
footer .column-4 > div, .sin-cont .w40 > div, .foot-smm > div {padding-left: 30px; position: relative}
footer .column-4 > div::before, .sin-cont .w40 > div::before, .foot-smm > div::before {content: ''; width:25px; height:25px; position:absolute; left:0; background-repeat: no-repeat; background-size: contain; margin-top:3px;}
.foot-map::before {background-image: url(https://dobro.ardenis.com.ua/main/img/icon-loca.png)}
.foot-phone::before {background-image: url(https://dobro.ardenis.com.ua/main/svg/icon-phon.svg)}
.foot-mail::before {background-image: url(https://dobro.ardenis.com.ua/main/img/icon-mail.png)}
.foot-svib::before {background-image: url(https://dobro.ardenis.com.ua/main/img/icon-svib.png);}
.foot-stel::before {background-image: url(https://dobro.ardenis.com.ua/main/img/icon-stel.png);}
.foot-syou::before {background-image: url(https://dobro.ardenis.com.ua/main/img/icon-syou.png);}
	
.site-info {align-items: center;}
	
.alignleft {text-align:left}
.alignright {text-align:right}
.aligncenter {text-align: center}
.wp-block-image .alignleft {float: left; margin: 0 var(--margin-top) var(--margin-top) 0; max-width: 50%;}
.wp-block-image .alignright {float:right; margin: var(--margin-top) 0 var(--margin-top) var(--margin-top); max-width: 50%;}

@media (max-width: 1200px) {
.column-4 .foot-smm {width:50%; margin: 0 auto}
.column-4 .foot-map, .column-4 .foot-phone, .column-4 .foot-mail {width:33%}
}

@media (max-width:950px) {
.our-benef {--col-n: 3;}
}
@media (max-width:768px) {
h1 {font-size: 2em;}
.breadcrumbs.wrap {margin-left: 35px}
.breadcrumbs {flex-wrap: wrap;}
.cat-serv a p {width: 80%; font-size: 1.2em}
.cat-galer > div {padding: 0 0 100%; position: relative;}
.cat-galer .w40 {padding: 0 0 100%;width: 100%; position: absolute; background-color: rgba(0, 0, 0, 0.7);}
.cat-galer .w60 {width: 100%;}
.cat-galer .w60 img {position: absolute; z-index: -1;}
	
.form-bottom {flex-wrap: wrap}
.form-bottom .w30 {color: var(--clr-b); font-size: 1.75em; width:100%; margin-bottom:var(--margin-top)}
.form-bottom .w60 {width:100%;}
.column-4 .foot-smm, .column-4 .foot-map, .column-4 .foot-phone, .column-4 .foot-mail {width:100%; margin-left: auto; margin-right: auto;}
.site-info .w40 {width:100%; text-align: center; order:2; margin-bottom:15px}
.alignright {text-align:center}
.site-info .w20 {width:100%; text-align: center; margin: var(--margin-top) auto}
.sin-cont .w40, .sin-cont .w60 {width:100%}
.why-us-block { height: auto;}
.column-4.why-us > * {width: calc(50% - var(--margin-top));}
.whata-do {flex-direction: column-reverse;}
.whata-do .w50 {width:100%}
.our-benef {--col-n: 2;}
.column-3.like-g > *:nth-child(3n+1):nth-last-child(-n+3) ~ * {margin-left:0;}
}


@media (max-width:680px) {
.cat-serv a {width: 100%;}
.cat-serv a div {position: relative; max-height: 0; padding: 0 0 50%;}
.cat-serv a p {width: 80%; height: 40%; top: 30%; font-size: 1.2em}
.cat-serv a div img{height: 100%; width: 100%; position: absolute; object-fit: cover;}
}
@media (max-width:620px) {
.cat-galer > .a-more, .cat-serv > .a-more {position:relative; top:auto;}
}
@media (max-width:520px) {
h1.wrap {padding: 0; font-size: 1.5em;}
.top-page-bg-gr {padding-top: 20px; height: auto; min-height:60vh}
.breadcrumbs p:first-child {width:100%;}
.breadcrumbs p {width: calc(100% - 15px);}
.desc-text {height: auto;}
.cat-galer .w40 div p {font-size: 1.5em;}

.cat-serv a p {width:70%;}
.cat-serv a p:after, .cat-serv a p:before { width: 40%; right: -40%;}
.cat-serv a div {padding: 0 0 100%;}
	
.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {width:100%!important}
.port-sub-fields div {   width:100%;}
.top-page h1:before {width: 0}
.breadcrumbs.wrap {margin-left:0px}
.wp-block-image .alignleft, .wp-block-image .alignright {float:none; margin: var(--margin-top) auto; max-width:100%;}
.form-bottom {padding-left:var(--margin-top);}
.form-bottom .w30 {font-size: 1.5em; width:100%; text-align: center}
.column-4.why-us > * {width:100%; max-width: 320px; margin: 0 auto;}
.our-benef {--col-n:1;}
h2.sin-sub-title {font-size: 2em;}
}