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

}



#detailed > div {margin-bottom: 40px}



#content ol, #content ul{padding-left:16px;}



/*-------- HEAD TITLE --------*/

#head {margin: 32px auto}

.head-top {display: flex; justify-content: space-between;}

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

}





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

}



/*-------- Gallery BLOCK --------*/

#photo > div {

  position: relative;

  padding: 0;

  overflow: hidden;

  box-shadow: none;

  height: 400px;

  border-radius: 12px;

  margin-top: 24px;

}

#photo > div > span {

  background: #7c7d77;

  float: left;

  position: relative;

  cursor: pointer;

  overflow: hidden;

}

#photo #im1 > img {height: 120%;}

#photo #im1 {

  width: calc(50% - 8px);

  height: 100%;

  margin-right: 8px;

}

#photo #im2 {

  width: 50%;

  height: calc(50% - 4px);

  margin-bottom: 4px;

}

#photo #im3 {

  width: 50%;

  height: calc(50% - 4px);

  margin-top: 4px;

}

#photo > div > span > img {

  position: absolute;

  top: 0%;

  left: 0%;

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: top;

  transition: .2s;

}

#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;

}

#photo > div > span:hover img {opacity:.4;filter: grayscale(60%);}

#photo > div > span:hover i {opacity:1;}

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

}

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

}









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

}

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

}





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

#mapblock {

  display: flex;

  gap:24px;

}

#mapblock > div {

	width:50%;

	overflow: hidden;

	border-radius: 8px;

}

#mapblock iframe {display: block}

#map {

  padding: 0;

  overflow: hidden;

  box-shadow: none;

  border: none;

}



#cities {

	background: #eee;

	box-shadow: none;

	padding: 0;

	width:50%;

}

#cities .head {

	display: flex;

	position: relative;

	border-bottom: 2px solid #fff;

	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){

	.company-logo > div {margin:18px 40px;height: auto}

	.company-logo > div img {position: relative}

	.dir, .dir > #important, .dir > #detailed  {display: block; width: 100%;padding: 0; margin: 0}

	#company {margin: 0 auto 24px;max-width: 374px;}

	#detailed > div {margin: 0 16px 32px;}

	#mapblock {flex-direction: column;padding: 0; gap:0;}

	#mapblock > div {width: 100%;margin: 0; border-radius:0;}

	.address, .openinghours {color: rgb(113, 113, 113)}

	.moretitle {font-size: 14px}

	#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}

}