@import '_vars.less?2';


#page {
	position: relative;
}

.padded {
	max-width: 1140px;
	padding: 0 110px;
	margin: 0 auto;
	padding-top: 150px;
	@media (max-width: 540px) {
		padding: 0 20px;
		padding-top: 85px;
	}
}

#nav {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	// position: fixed;
 //    top: 0;
 //    height: 120px;
 //    width: 100%;
 //    z-index: 29;
	// background: #fff;
	// background: linear-gradient(180deg, #ffffff 75%, rgba(255, 255, 255, 0) 100%);
}

#services {
	font-size: 24px;
	line-height: 1.25em;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	@media (max-width: 719px) {
		font-size: 21px;
		line-height: 1.13em;
	}
	@media (min-width: 720px) {
		grid-gap: 0 80px;
	}
	div {
		a {
			font-weight: 600;
		}
		a:hover {
			text-decoration: underline;
		}
		@media (max-width: 719px) {
			padding: 8px 20px 8px 0;
		}
		@media (min-width: 720px) {
		}
	}
}

.promo {
	display: block;
	width: 100%;
	margin: 60px 0 70px;
	@media (max-width: 600px) {
		margin: 30px 0;
	}
}

#news {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	grid-gap: 60px 80px;
	@media (max-width: 600px) {
		grid-gap: 30px 40px;
	}
	a {
		position: relative;
		border-bottom: 2px solid #000;
		padding-bottom: 45px;
	}
	.title {
		font-size: 15px;
		line-height: 22px;
		font-weight: 500;
	}
	span {
		position: absolute;
		left: 0;
		bottom: 15px;
		font-size: 12px;
		&:after {
			content: '';
			display: inline-block;
			vertical-align: middle;
			width: 8px;
			height: 8px;
			margin-left: 5px;
			background: url('/images/arrow-right.svg') no-repeat center;
			transition: transform 0.2s ease;
		}
	}
	a:hover {
		span {
			text-decoration: underline;
			&:after {
				transform: translateX(3px);
			}
		}
	}
}

.moreEvents {
	margin-top: 50px;
	// text-align: right;
	a {
		color: @green;
		font-size: 15px;
		line-height: 22px;
		font-weight: 500;
		&:after {
			content: '';
			display: inline-block;
			vertical-align: middle;
			width: 8px;
			height: 8px;
			margin-left: 6px;
			background: url('/images/arrow-right-green.svg') no-repeat center;
			transition: transform 0.2s ease;
		}
		&:hover {
			text-decoration: underline;
			&:after {
				transform: translateX(3px);
			}
		}
	}
}
.video {
	margin-top: 85px;
	@media (max-width: 540px) {
		margin-top: 60px;
	}
	iframe {
		border:0;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
}

#buildings {
	display: none;
	z-index: 1000;
}

@media (max-width: 599px) {
	.right {
		text-align: right;
	}
}

@media (max-width: 599px) {
	.da-container {
		margin-bottom: 25px;
	}
	.wz-container {
		text-align: right;
		padding-right: 2px;
	}
	.duszenko-container {
		text-align: center;
		padding-bottom: 20px;
	}
}

.icon {
	display: inline-block;
	border: 0;
	background-color: transparent;
	appearance: none;
	-webkit-appearance: none;
	&.duszenko {
		fill: #0050FF;
		cursor: pointer;
	}
	@media (max-width: 599px) {
		&.mz {
			position: absolute;
			right: 16px;
			top: 286px;
		}
	}
	@media (min-width: 600px) {
		position: absolute;
		&.duszenko {
			left: 15px;
			top: 262px;
		}
		&.wz {
			right: 50px;
			top: 415px;
		}
		&.mz {
			right: 240px;
    		top: 176px;
		}
		&.da {
			left: 50px;
			top: 470px;
		}
	}
	@media (min-width: 600px) and (max-width: 980px) {
		&.mz {
			right: 60px;
		}
	}
	&:hover svg {
		path {
			stroke: @green;
		}
	}
	&.duszenko:hover svg {
		path, polygon {
			fill: #000;
			stroke: none;
		}
	}
}
.openModal {
	cursor: pointer;
}

.modal {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 10;
	.content {
		background-color: @green;
		opacity: 0;
		transition-property: opacity, transform;
		z-index: 1;
		color: #fff;
		@media @mt {
			width: 100%;
			height: 100%;
		}
		@media @d {
			transform: translate(-50%,-50%) scale(0.97);
			position: absolute;
			left: 50%;
			top: 50%;
			transition: all 0.3s @easing;
			padding: 35px 40px;
			width: 730px;
		}
		.text {
			@media @mt {
				height: 100%;
				overflow-y: scroll;
				padding: 30px 20px 20px;
			}
			.item:not(:first-child) {
				display: none;
			}
			.item {
				@media @mt {
					.photo {
						width: 100%;
						max-width: 400px;
						margin: 30px 0;
					}
				}
				@media @d {
					padding-right: 310px;
					.photo {
						margin-right: -310px;
						width: 265px;
						float: right;
						margin-top: -65px;
					}
				}
				.photo {
					display: block;
				}
				h2 {
					margin: 20px 0 15px;
					font-size: 24px;
					font-weight: 700;
				}
				p {
					font-size: 12px;
					line-height: 1.25em;
					margin-bottom: 15px;
				}
				.description {
					.pict {
						display: block;
						height: 35px;
					}
					a {
						display: inline-block;
						font-weight: 700;
						text-decoration: underline;
					}
				}
			}
		}
		.close {
			all: unset;
			display: block;
			position: absolute;
			right: 20px;
			top: 18px;
			cursor: pointer;
			font-size: 20px;
			&:after {
				font-weight: 700;
				content: '✕';
			}
			&:hover {
				opacity: 0.5;
			}
		}
		&:after {
			.clear;
		}
	}
	.background.close {
		background-color: rgba(250, 250, 250, 0);
		transition: background 0.3s ease;
		@media @mt {
			display: none;
		}
		@media @d {
			display: block;
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 0;
		}
	}
}


body.modalVisible {
	.modal {
		.content {
			opacity: 1;
			@media @d {
				transform: translate(-50%,-50%) scale(1);
				transition-delay: 0.1s;
			}
		}
		.background.close {
			background-color: rgba(250, 250, 250, 0.8);
		}
	}
}

#opening {
	.content {
		display: flex;
		align-items: center;
		.text {
			width: 100%;
			height: auto;
		}
	}
}


&.green {
	color: @green;
}