/*-------- TWO COLUMN CONTENT --------*/
.dir {
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	flex-wrap: wrap;
	padding: 0 16px 16px 16px;
}
.dir > #detailed {
	width: 58.3333%;
	order: 1;
	margin-left: 0;
	margin-right: 0;
}
.dir > #important {
	width: 33.3333%;
	order: 2;
	margin-left: 8.33333%;
	margin-right: 0;
	margin-top: 48px;
}

/*-------- HEAD TITLE --------*/
#head {margin: 32px auto}
.head-top .btn-hero {height: fit-content;}
#head h1 span {
	display: block;
	font-size: 16px;
	font-style: initial;
	text-decoration: underline;
	font-weight: normal;
	padding: 8px 0 0 0;
}
.topreview {
	text-decoration: underline;
	padding: 0 6px 0 3px;
}
.trusted {
	padding-left: 6px;
}


/*-------- CONTENT --------*/
#detailed > div {
  margin-bottom: 32px;
}

#detailed > div:last-child {
	margin-bottom: 0;
}
#content {padding: 32px 0;}
#content ol, #content ul{padding-left:16px;}
#content h2 {padding-top: 12px;}
#content h3 {margin:5px 0 10px 0;}



/*-------- GALLERY --------*/
#photo > div {
	position: relative;
	padding: 0;
	overflow: hidden;
	box-shadow: none;
	height: 500px;
	border-radius: 12px;
	margin-top: 24px;
}
#photo i {
	opacity:0;
	position: absolute;
	color: #fff;
	bottom: 12px;
	left: 24px;
	z-index: 9;
	font-size: 12px;
	font-style: normal;
	text-shadow: 2px 2px 0 rgb(0, 0, 0);
	text-transform: uppercase;
	letter-spacing: 0.3px;
	font-weight: bold;
	transition: .2s
}
#photo > div > span:hover img {opacity:.4;filter: grayscale(60%);}
#photo > div > span:hover i {opacity:1;}
#photo > div > span {background: #7c7d77;float: left;position: relative;cursor: pointer}
#photo > div > span > img {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: .2s
}
#photo #im0 i {
	font-size: 16px;
	opacity: 1;
	bottom: 24px;
	left: 40px;
	letter-spacing: 1px;
}


#photo #im0 {width: calc(50% - 8px);height: 100%;margin-right: 8px;}
#photo #im1 {width: calc(25% - 4px);height: calc(50% - 4px);margin-bottom: 4px;margin-right: 4px;}
#photo #im2 {width: calc(25% - 4px);height: calc(50% - 4px);margin-bottom: 4px;margin-left: 4px;}
#photo #im3 {width: calc(25% - 4px);height: calc(50% - 4px);margin-top: 4px;margin-right: 4px;}
#photo #im4 {width: calc(25% - 4px);height: calc(50% - 4px);margin-top: 4px;margin-left: 4px;}

#photo > div > span.imgcount {
	position: absolute;
	right: 20px;
	bottom: 20px;
	background: #fff;
	color: #000;
	letter-spacing: 1px;
	padding: 8px 16px;
	border-radius: 6px;
	border: 1px solid #000;
	text-transform: uppercase;
	font-family: "Fugaz One", cursive;
}



/*-------- big gallery --------*/

.biggall {display: none}
.biggall.open {display: block}
.biggall .gallery-next, .biggall .gallery-prev{background-image: none;}
#gall {position: relative; height: 100%;}
#gall .swiper {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	}

#gall .swiper-slide {
	background-size: cover;
	background-position: center;
	background: linear-gradient(182deg, #685a57, transparent);
	}

#gall .gallery {
	height: 80%;
	width: 100%;
	}

#gall .thumbs {
	height: 20%;
	box-sizing: border-box;
	padding: 10px 0;
	}

#gall .thumbs .swiper-slide {
	width: 25%;
	height: 100%;
	opacity: 0.4;
	}

#gall .thumbs .swiper-slide-thumb-active {
	opacity: 1;
	}

#gall .swiper-slide img {
	display: block;
	
	margin: 0 auto;
}


/*-------- QUESTION --------*/

#questions li {
	display: block;
}
#questions li:last-child > div {margin: 0}
.question {
	position: relative;
	cursor: pointer;
}
.answer {
	display: none;
	padding: 0 24px 18px 0;
	color: rgb(255, 255, 255);
	transition: all 2s ease;
}
.question h3 {
	display: block;
	color: #000;
	font-weight: normal;
	font-size: 16px;
	padding: 12px 20px 12px 0;
	border-top: 1px dashed #ccc;
	line-height: 1.3em;
}
.question.opn .answer {
	display: block;
	color: rgb(113, 113, 113);
}
.question.opn::after {
	top: 25px;
	-webkit-transform: rotate(-135deg);
	-moz-transform: rotate(-135deg);
	-ms-transform: rotate(-135deg);
	-o-transform: rotate(-135deg);
	transform: rotate(-135deg);
}
.question::after {
	position: absolute;
	cursor: pointer;
	top: 16px;
	right: 8px;
	width: 8px;
	height: 8px;
	border-bottom: 2px solid #70757a;
	border-right: 2px solid #70757a;
	content: "";
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transition: border-color 0.2s ease;
	-moz-transition: border-color 0.2s ease;
	-ms-transition: border-color 0.2s ease;
	-o-transition: border-color 0.2s ease;
	transition: border-color 0.2s ease;
}

/*-------- BRAND BLOCK --------*/
.brand-button {
	border-bottom: 1px solid rgb(221, 221, 221);
	padding-left: 8px;
	padding-top: 8px;
}
.brand-button > span {
	display: inline-block;
	padding: 3px 12px;
	background: #fff;
	margin-right: 6px;
	border-radius: 4px 4px 0 0;
	cursor: pointer;
	position: relative;
	bottom: -1px;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
	border-bottom: 1px solid rgb(221, 221, 221);
	color: rgb(113, 113, 113);
}

.brand-button > span.up {
	background: linear-gradient(0deg, rgb(255, 255, 255) 70%, rgb(232, 232, 224) 100%);
	cursor: auto;
	border-top: 1px solid rgb(221, 221, 221);
	border-left: 1px solid rgb(221, 221, 221);
	border-right: 1px solid rgb(221, 221, 221);
	border-bottom: 1px solid #fff;
	color: rgb(34, 34, 34);
}
.brand-info {
  color: rgb(113, 113, 113);
  padding-top: 24px;
}
.brand-info > div {display: none}
.brand-info > div.opn {display: block}
.brand-info > div img {
	height: auto;
	width: 100px;
	border-radius: 12px;
	float: left;
	margin-right: 12px;
}
.brand-info strong {
	font-weight: normal;
	color: #000;
	font-size: 16px;
}


/*-------- RIGHT COMPANY BLOCK --------*/
#company {
	position: sticky;
    top: 48px;
	border: 1px solid rgb(221, 221, 221);
	border-radius: 12px;
	padding: 24px;
	box-shadow: rgba(0, 0, 0, 0.12) 0px 6px 16px;
	margin: 0;
	overflow:hidden;
	text-align:center;
}
#company .main {display:flex; flex-direction: column;}
#company .card {	
  border: 1px solid rgb(221, 221, 221);
  border-radius: 8px;
  margin-bottom: 14px;
}
#company .card > div {
  padding: 8px 12px;
  border-bottom: 1px solid rgb(221, 221, 221);
  text-align: left;
}
#company .card  div:last-child {
	border-bottom:0;
}

.stars {
	display: block;
	font-size: 24px;
	color: red;
	padding: 0 0 12px 0;
}
#company .btn, #company .btn-round  {
  width: 100%;
}
#company .btn-round  {
  margin-top: 14px
}
.company-logo >div {
	display: block;
	position: relative;
	height: 140px;
	margin: 0 auto 20px;
	overflow: hidden
}

.company-logo > div img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  object-fit: cover;
  object-position: center;
}

/*-------- QUALITY BLOCK --------*/
.quality li {
	display: flex;
	justify-content: center;
	flex-direction: row;
	padding-bottom: 20px;
}
.quality li:nth-child(4) {padding-bottom: 0;}
.quality li div.icon {width: 40px;padding-top: 2px;}
.quality li div.desc {width: calc(100% - 40px);}
.quality li strong {
	display: block;
	margin-bottom: 6px;
}
.quality li span {
	color: rgb(113, 113, 113);
	line-height: 1.4em;
	display: block;
	font-size: 14px;
}
.quality .smtitle {margin-left: 0;}



/*-------- DIRECTION BLOCK --------*/

.fulltext {display:none}
.fulltext.up {display:block;}
.fulltext img {
	width: 100%;
	height: auto;
	margin: 40px 0;
	border-radius: 8px;
	display: block
}

.fulltext figure {margin:40px 0;}
.fulltext figure img {margin:0}
.fulltext figcaption {
	font-size: 12px;
	text-align: center;
	color: rgb(113, 113, 113);
}


/*-------services-------*/

.head-services {
	position: relative;
}
.service {margin: 0}
.servise .smtitle, .mainservises .smtitle {margin-bottom: 0;}
#services .swiper{margin: 0 32px}
#services .services-next, #services .services-prev {width: 14px;height: 24px;background: transparent}
#services .services-next:after, #services .services-prev:after {font-size: 24px; color: #000}
#services .title {padding-left: 50px;}
#services .smtitle{margin-left: 0;padding-left: 50px;}
#services .swiper .smtitle {padding: 0;}
#services a {text-decoration:none}
#services a span {
	font-weight: bold;
	line-height: 18px;
	display: block;
	color: #000;
}
#services .img {
	background: #d6d7c9;
	position: relative;
	padding-bottom: 100%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
	border-radius: 12px;
	margin-bottom: 8px;
	box-shadow: 0 4px 8px rgba(0,0,0,.2)
}
#services .img img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
#services span.title {
	display: block;
	color: #333;
	padding: 8px 0;
	line-height: 14px
}


/*-------reviews-------*/
#reviews {
	color:#fff;
	padding: 0;
}
#reviews .swiper-wrapper {justify-content: space-between;}
#reviews .swiper-container {padding: 0 0 32px 0;}
.swiper-review .swiper-button-next, .swiper-review .swiper-button-prev {display: none;}
#reviews .title {color:#fff; padding-top: 20px;}
#reviews .btn-round{display: block; margin: 0 auto 40px; background: #ddd5d545;}
#reviews .smtitle {margin-bottom: 0;color: #fff;}
#reviews .stars {
	color: #fff;
	font-size: 16px;
	padding-bottom: 6px;
}
#reviews .icon {
	float: left;
	background: #e8e8e0;
	width: 50px;
	height: 50px;
	margin-right: 14px;
	border-radius: 50px;
	padding: 8px;
}
#reviews .btn-round {
	display: block;
	margin: 0 auto;
	background: transparent;
	color: #fff;
	border: 1px solid #fff;
}

/*-------mapblock-------*/

#mapblock {
  display: flex;
  gap: 24px;
}
#mapblock > div {
	width: 50%;
	border-radius:12px;
}
#map {
  padding: 0;
  overflow: hidden;
  box-shadow: none;
  border: none;
  max-height: 500px;
}

#cities {
	background: #eee;
	box-shadow: none;
	padding: 0;
	width:50%;
}
#cities .head {
	display: flex;
	position: relative;
	border-bottom: 2px solid #fff;
	border-radius:12px 12px 0 0;
	padding: 10px;
	height: 25%;
	background: #c7c0a3;
}
#cities ul {margin: 32px}
#cities .company-logo img {
	width: 100px;
	float: left;
	margin-right: 8px;
	margin-top: 0;
}
.city-contact {display: flex;padding: 0 16px;}
.city-contact #map, .city-contact #cities {width: 100%;}
.cities-content {
	display: flex;
	flex-direction: column;
	align-self: center;
}
#cities .info > div {
	border-bottom: 2px solid #fff;
	padding: 6px 24px;
}
#cities .name h2 {padding: 6px 0 6px 0}
#cities .main-service h3 {font-size: 14px;}


@media (max-width:767px){
	#head {text-align: center;}
	#photo {display:none;height: 300px}
	.dir > #detailed { width: 100%; padding:0; padding-top: 16px;}
	.dir > #important {order:1; margin: auto;width: 400px;padding: 0 16px;}
	#content {padding: 0;}
	.address, .openinghours {color: rgb(113, 113, 113)}
	#services .swiper {margin: 0}
	#services .block {padding: 0}
	#services .swiper-slide {width: 140px;margin-left: 16px;}
	#services .swiper-button-next, #services .swiper-button-prev, .services-pagination {display: none}
	
	#mapblock {flex-direction: column;gap:0; padding: 0;}
	#mapblock > div {width: 100%;border-radius:0;}
	#cities .head {border-radius:0;}
	#cities .head .logo{margin-left:0;}
	
}



@media (min-width: 440px) {
	
	#reviews .swiper-wrapper {
	  display: flex;
	  flex-wrap: wrap;
	  max-width: 1120px;
	  margin: 0 auto;
	}
	#reviews .swiper-slide {
	  width: 45.83333%;
	  padding: 13px 0;
	}
}

@media (max-width: 440px) {
	.biggall {display: block; margin: 0;position: relative;z-index: 0;}
	#gall .thumbs {display: none}
	#gall .swiper-slide { height: 430px;}
	#gall .swiper-slide img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;object-position: top;
	}
	.swiper-pagination.gallery-pagination.swiper-pagination-fraction.swiper-pagination-horizontal {
	  background: #000000a8;
	  position: absolute;
	  right: 18px;
	  bottom: 18px;
	  width: 50px;
	  color: #fff;
	  left: auto;
	  border-radius: 4px;
	  font-size: 12px;
	  font-weight: bold;
	  letter-spacing: -.5px;
	}
	#head {padding: 14px; margin: 0;}
	.moretitle {font-size: 12px}
	.dir {padding: 0;}
	#company .btn-round {padding: 10px 20px 7px 20px;}
	.company-logo > div {margin:18px 40px;height: auto}
	.company-logo > div img {position: relative}
	#questions ul{padding-left: 0;}
	#reviews .btn-round {display: none;}
	.swiper-review .swiper-button-next {
		display: block;
		right: -8px;
		background-size: 9px 20px;	
	}

	.swiper-review .swiper-button-prev {
		display: block;
		left: -8px;
		background-size: 9px 20px;
	}
	.swiper-review .swiper-button-prev:after, .swiper-review .swiper-button-next:after {content:none;}
	.swiper-review .swiper-pagination-bullet {background:#fff} 
	.swiper-review .swiper-pagination-bullet.swiper-pagination-bullet-active {background:#000}
	#services .swiper-button-prev:after, .services .swiper-button-next:after { font-size: 20px;}
	#services .swiper-button-prev{left: -8px;}
	#services .swiper-button-next {right: -8px;}
	#services {padding: 0;}
	#services .title, #services .smtitle {padding-left: 25px;line-height: 35px;}
	#services .swiper {padding: 0;}
	#services .swiper-pagination {bottom: -5px;}
	#services .smtitle {margin-bottom: 10px;}

	#map {max-height: 300px;}
	#mapblock {
		display: flex;
		flex-direction: column;
	}

	#mapblock > div {
		width: 100%;
	}
	#detailed > div {margin: 0 16px 32px;}
	#cities .main-service h3 {line-height: 18px;}

}