/*-------- 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;

}

#company .gmb {
  padding-top: 24px
}
#company .gmb img {
  max-width: 150px;
  width: 100%;
}

.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;}



}