div#workArea {
	display: none;
}

.contacts {
}

#contactMap {
	position: relative;
}

#contactMapYandex {
	width: 100%;
	height: 630px;
}

.contactsAddress {
	position: absolute;
	width: 330px;
	border-radius: 5px;
	background: #fff;
	right: 70px;
	top: 70px;
	z-index: 1;
	box-shadow: 0px 30px 70px rgba(0, 0, 0, .15);
	height: 450px;
}

#wrapper.animationON .contactsAddress {
	animation: fadeInUp_30px 1.2s ease;
}

.contactsAddress > div {
	overflow: hidden;
	height: 100%;
}

.contacts .sectionNameActive {
	font-size: 16px;
	padding: 30px 36px 28px 36px;
	cursor: pointer;
	box-shadow: 0px 4px 51px rgba(0, 0, 0, .1);
	box-sizing: border-box;
	height: 80px;
}

.contacts .sectionNameActive p {
	position: relative;
	display: inline-block;
}

.contacts .sectionNameActive svg {
	position: absolute;
	top: 8px;
	right: -22px;
	transition: transform .2s linear;
}

.contacts .sectionNameActive.active svg {
	transform: rotate(180deg);
}

/* city */
.contacts .sectionBlock {
	height: 0;
	overflow: hidden;
	transition: height .3s ease-out;
	position: relative;
}

.contacts .sectionBlock.sectionUp {
	height: 370px;
	transition: height .4s ease-out;
}

.sectionBlockWrapper {
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: none;
	width: 107%;
	-webkit-overflow-scrolling: touch;
}

.contacts .sectionBlockWrapper .sectionName {
	padding: 20px 36px 18px 36px;
}

.contacts .sectionBlockWrapper .sectionName.active {
	background: #e9e9e9;
}

.contacts .sectionBlockWrapper .sectionName:hover {
	background: #e9e9e9;
	cursor: pointer;
}

#contactSectionScrollBar {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 4px;
	height: 0;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: .15s ease-out;
	transition: .15s ease-out;
	-webkit-transition-property: height;
	transition-property: height;
	border-radius: 4px;
	background: #C2C2C2;
}

/* address */
.contacts .elementBlock {
	overflow: hidden;
}

.contacts .elementBlock.elementUp {
	animation: elementUp .25s ease-out;
	animation-fill-mode: forwards;
}

.contacts .elementsSectionWrapper {
	position: relative;
}

.contacts .elementsSectionList {
	padding: 31px 36px 24px 36px;
	height: 370px;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: none;
	box-sizing: border-box;
}

.contacts .elementsSectionList .element {
	margin: 0 0 30px 0;
	font-size: 13px;
}

.contacts .elementsSectionList .element:last-child {
	margin-bottom: 0;
}

.contacts .elementsSectionList .elementName {
	display: inline-block;
	color: #121212;
	cursor: pointer;
	margin: 0 0 6px 0;
}

.contacts .elementsSectionList .elementName:hover {
	text-decoration: underline;
}

.contacts .elementsSectionList .workingHours {
	color: #8C8C8C;
	line-height: 23px;
}

.contactScrollBar {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 4px;
	height: 0;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: .15s ease-out;
	transition: .15s ease-out;
	-webkit-transition-property: height;
	transition-property: height;
	border-radius: 4px;
	background: #C2C2C2;
}

.contact-element-name {
	margin: 0 0 10px 0;
	font-size: 22px;
	color: #8C8C8C;
	text-transform: uppercase;
}

.contact-element-property {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}

.contact-element-legal-name {
	margin: 15px 0 0 0;
}

.contact-element-route {
	margin: 30px 0 0 0;
}

.contacts-gallery {
	max-width: 1170px;
	margin: 0 auto 50px auto;
	padding: 0 5px;
	box-sizing: border-box;
}

.contacts-gallery * {
	box-sizing: border-box;
}

.contacts-gallery-images {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	margin: 0 -5px;
}

.contacts-gallery-images-col {
	width: 83.33%;
	padding: 0 5px;
	margin: 0 0 10px 0;
}

.contacts-gallery-images-col.col-small {
	width: 0.6%;
}

.contacts-gallery-image {
	position: relative;
	height: -1px;
	overflow: hidden;
}

.contacts-gallery-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 990px)
{
	.contacts-gallery-images-col {
		width: 66.66%;
	}

	.contacts-gallery-images-col.col-small {
		width: 33.33%;
	}

	.contacts-gallery-image {
		height: 360px;
	}
}

@media (max-width: 767px) {
	.contacts-gallery-image {
		height: 280px;
	}
}

@media (max-width: 465px) {
	.contacts-gallery-image {
		height: 220px;
	}
}


/* Modal Div for contacts */
#modalContact {
	position: absolute;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	background: #fff;
	z-index: 1;
	border-radius: 5px;
	padding: 75px 40px 40px 40px;
	display: none;
	box-sizing: border-box;
}

.modalContactClose {
	position: absolute;
	top: 34px;
	right: 35px;
	cursor: pointer;
}

#modalContact > div {
	line-height: 23px;
	margin: 0 0 31px 0;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

#modalContact > div:last-child {
	margin-bottom: 0;
}

#modalContact > div svg {
	height: 23px;
}

#modalContact > div span {
	width: 86%;
}


/* Button zoom */
.contactZoom {
}

.contactZoom div {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	cursor: pointer;
	position: relative;
	background: #fff;
	box-shadow: 0px 15px 30px rgba(0, 0, 0, .1), 0px 7px 15px rgba(0, 0, 0, .1), 0px 2px 4px rgba(0, 0, 0, .1), 0px 1px 2px rgba(0, 0, 0, .1);
}

.contactZoom #zoomIn {
	margin: 0 0 20px 0;
}

.contactZoom div svg {
	position: absolute;
	top: 50%;
	left: 50%;
}

.contactZoom #zoomIn svg {
	margin: -7px 0 0 -7px;
}

.contactZoom #zoomOut svg {
	margin: -1.5px 0 0 -7px;
}


@media all and (max-width: 1100px) {
	.contactsAddress {
		right: 50px;
	}
}

@media all and (max-width: 1000px) {
	.contactsAddress {
		right: 25px;
	}
}

@media all and (max-width: 900px) {
	.contacts {
		position: relative;
		padding: 80px 0 0 0;
	}

	#contactMapYandex {
		height: 480px;
	}

	.contactsAddress {
		position: relative;
		top: 0;
		width: 100%;
		right: 0;
		height: auto;
		border-radius: 0;
	}

	.contactsAddress .elementBlock {
		/*display: none;*/
	}

	.contacts .elementsSectionList {
		height: auto;
		padding: 20px 36px 20px 36px;
	}

	.contacts .sectionBlock.sectionUp {
		height: auto;
	}

	.contactZoom div {
		display: none;
	}
}

@media all and (max-width: 490px) {
	#contactMapYandex {
		height: 400px;
	}
}

/*
@keyframes moveDown {
	from {
		opacity: 1;
		margin-top: 0;
	}
	to {
		opacity: 0;
		margin-top: 40px;
	}
}
*/

@keyframes elementUp {
	from {
		opacity: 0;
		margin-top: 30px;
	}
	to {
		opacity: 1;
		margin-top: 0;
	}
}