#layout-group-opening,
.map-image {
	background-position: center;
	background-repeat: no-repeat
}

.layout-group,
.map,
.map-image {
	width: 100%;
	height: 100%
}

.map-label .address,
.map-label .neighborhood {
	background-color: #fff;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 10%)
}

.page-layout-section {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: calc(var(--header-height) + var(--margin-spacing-60))
}

.page-layout-wrapper {
	width: 100%;
	max-width: 920px;
	display: flex;
	gap: 20px;
	justify-content: center;
	align-items: center;
	margin: 0 var(--external-margin)
}

.page-layout-column {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 20px
}

.layout-group {
	display: flex;
	justify-content: stretch;
	align-items: stretch;
	box-shadow: inset 0 0 0 1px rgba(29, 29, 31, 20%);
	border-radius: var(--border-radius-30);
	overflow: hidden
}

#layout-group-opening {
	background-image: url('../img/contacts/opening-text-background.jpg');
	background-size: cover
}

.opening-text {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 60px
}

.title {
	max-width: 260px;
	line-height: 54px;
	margin-bottom: 20px
}

.map {
	min-height: 450px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative
}

.map-image {
	background-image: url('../img/contacts/map.jpg');
	background-size: 770px 894px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1
}

#layout-group-more-resources,
.availability-group {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover
}

.indicator-dot-group {
	flex: 0 0 20px;
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10
}

.indicator-dot-halo {
	width: 60px;
	height: 60px;
	background-color: var(--blue);
	border-radius: 30px;
	opacity: 20%;
	position: absolute;
	transform: scale(1);
	animation: 6s ease-in-out infinite forwards bounce-halo;
	will-change: transform
}

@keyframes bounce-halo {

	0%,
	100% {
		transform: scale(1)
	}

	50% {
		transform: scale(2)
	}
}

.indicator-dot {
	width: 20px;
	height: 20px;
	background-color: var(--blue);
	border: 4px solid #fff;
	border-radius: 40px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 30%);
	position: absolute
}

.form,
.map-label {
	position: relative
}

.map-label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin-bottom: 110px;
	z-index: 20;
	filter: drop-shadow(0 2px 20px rgba(0, 0, 0, 25%))
}

.map-label .neighborhood {
	font-size: 20px;
	font-weight: 500;
	letter-spacing: -.04px;
	height: 40px;
	display: flex;
	align-items: center;
	border-radius: 10px;
	padding: 0 15px
}

.map-label .address {
	font-size: 14px;
	font-weight: 600;
	padding: 2px 10px;
	border-radius: 5px
}

.form {
	background-color: var(--bg-gray);
	width: 100%;
	padding: 60px;
	transition: height 1s ease-in-out
}

.form .form-title {
	font-size: 30px;
	font-weight: 600;
	margin-bottom: 20px
}

.form input,
.form label,
.form textarea {
	font-size: 16px;
	font-weight: 400;
	display: block
}

.form label {
	color: var(--gray);
	display: flex;
	justify-content: space-between;
	margin-bottom: 6px
}

.required-label {
	font-size: 14px;
	font-weight: 500;
	color: var(--red);
	display: none;
	will-change: opacity
}

.required-label.show {
	display: block;
	opacity: 0;
	animation: .2s forwards showRequiredLabel
}

@keyframes showRequiredLabel {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

.required-label.hide {
	display: block;
	opacity: 1;
	animation: .2s forwards hideRequiredLabel
}

@keyframes hideRequiredLabel {
	0% {
		opacity: 1
	}

	100% {
		opacity: 0
	}
}

.form #email,
.form #message,
.form #name {
	width: calc(100% - 16px * 2);
	height: 40px;
	border-radius: 10px;
	border: 1px solid rgba(29, 29, 31, 10%);
	margin-bottom: 12px;
	padding: 0 16px
}

.form #message {
	height: 180px;
	margin-bottom: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	resize: none
}

.checkbox-group {
	display: flex;
	align-items: center;
	cursor: pointer
}

.form #privacy {
	width: 0;
	height: 0;
	visibility: hidden
}

.visible-checkbox {
	width: 16px;
	height: 16px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #fff;
	border-radius: 4px;
	box-shadow: inset 0 0 0 1px rgba(29, 29, 31, 10%)
}

.after-submit-group,
.submitting-text span {
	min-height: 40px;
	top: 0;
	transition: opacity .5s;
	position: absolute;
	left: 0;
	width: calc(100% - 60px);
    padding: 0 30px;
}

.checkbox-group.highlight-red .visible-checkbox {
	background-color: rgba(255, 59, 48, 20%);
	box-shadow: inset 0 0 0 1px var(--red)
}

.visible-checkbox .icon.checkmark {
	width: 12px;
	height: 12px;
	display: none
}

.form #privacy:checked+.visible-checkbox .icon.checkmark {
	display: block
}

.checkbox-group label {
	display: block;
	margin-left: 8px;
	margin-bottom: 0
}

.checkbox-group label .privacy-link {
	color: var(--gray);
	text-decoration: underline
}

.form #privacy:checked+.visible-checkbox {
	background-color: var(--black)
}

.form #privacy:checked+.visible-checkbox:active {
	background-color: rgba(29, 29, 31, 75%)
}

.form #privacy+.visible-checkbox:active {
	background-color: rgba(29, 29, 31, 5%)
}

.checkbox-group.highlight-red label,
.checkbox-group.highlight-red label .privacy-link {
	color: var(--red)
}

.form .pill-links-wrapper {
	justify-content: start;
	margin-top: 40px
}

.form .pill-links-wrapper .pill-link {
	min-width: 120px
}

.contact-form {
	transition: opacity .5s;
	opacity: 1
}

.form.processing .contact-form {
	opacity: 0
}

.after-submit-group {
	display: none;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 10px;
	right: 0;
	bottom: 0;
	z-index: 10;
	opacity: 0
}

.after-submit-group .pill-links-wrapper.show,
.after-submit-group.show,
.submitting-text span.show {
	display: flex
}

.after-submit-group .pill-links-wrapper.fade-in,
.after-submit-group.fade-in,
.submitting-text span.fade-in {
	opacity: 1
}

#circle circle {
	fill: none;
	stroke: var(--black);
	stroke-linecap: round;
	stroke-miterlimit: 10;
	stroke-width: 5px;
	stroke-dasharray: 219.9114857513;
	stroke-dashoffset: 32.9867228627;
	transform-origin: 50% 50%;
	transition: stroke-dashoffset .5s, stroke .5s;
	animation: 1.2s linear infinite forwards rotateCircle;
	will-change: transform
}

@keyframes rotateCircle {
	0% {
		transform: rotate(0)
	}

	100% {
		transform: rotate(360deg)
	}
}

#circle polyline {
	fill: none;
	stroke: var(--black);
	stroke-linejoin: round;
	stroke-width: 6px;
	stroke-linecap: round;
	stroke-dasharray: 43.9948178153;
	stroke-dashoffset: 43.9948178153;
	transition: stroke-dashoffset .3s ease-out, stroke .3s ease-out, opacity 50ms;
	opacity: 0
}

.form.success #circle circle,
.form.success #circle polyline {
	stroke: var(--blue);
	stroke-dashoffset: 0;
	opacity: 1
}

#circle path {
	fill: var(--black);
	transition: .5s ease-out;
	transition-property: fill, opacity, transform;
	opacity: 0;
	transform: scale(.75);
	transform-origin: center
}

.form.error #circle circle {
	stroke: var(--red);
	stroke-dashoffset: 0
}

.form.error #circle path {
	fill: var(--red);
	opacity: 1;
	transform: scale(1)
}

.submitting-text {
	font-size: 18px;
	font-weight: 500;
	color: var(--gray);
	width: calc(100% - 60px);
	min-height: 40px;
    padding: 0 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative
}

.submitting-text span {
	text-align: center;
	display: none;
	justify-content: center;
	align-items: center;
	opacity: 0
}

.after-submit-group .pill-links-wrapper {
	width: 100%;
	display: none;
	justify-content: center;
	margin-top: 0;
	position: absolute;
	bottom: var(--margin-spacing-60);
	left: 0;
	opacity: 0;
	transition: opacity 1s .2s, margin-top 1s
}

#layout-group-more-resources {
	background-image: url('../img/contacts/more-resources-background.jpg')
}

.more-resources {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 60px
}

.more-resources-title {
	font-size: 30px;
	font-weight: 600;
	margin-bottom: 10px
}

.more-resources .pill-links-wrapper {
	flex-direction: column;
	align-items: start;
	gap: var(--margin-spacing-20);
	margin-top: var(--margin-spacing-40)
}

.horizontal-line {
	max-width: 920px
}

.availability-wrapper {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: var(--margin-spacing-80)
}

.availability-group {
	width: 100%;
	max-width: 920px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 30px;
	background-color: var(--bg-gray);
	background-image: url('../img/contacts/availability-background.jpg');
	margin: 0 var(--external-margin);
	padding: var(--margin-spacing-40) 0;
	border-radius: var(--border-radius-30)
}

.availability-core {
	width: 100%;
	display: flex;
	justify-content: start;
	align-items: center;
	gap: 30px;
	padding: 0 60px
}

.availability-badge {
	color: #fff;
	height: 40px;
	display: flex;
	align-items: center;
	gap: 10px;
	background-color: var(--green);
	padding: 0 15px;
	border-radius: 10px;
	box-shadow: 0 0 20px rgba(56, 194, 72, 66%)
}

.availability-badge-label {
	font-weight: 600;
	letter-spacing: .1px
}

.availability-text {
	font-size: 20px;
	font-weight: 600
}

@media (max-width:768px) {
	.page-layout-wrapper {
		flex-direction: column
	}

	.layout-group {
		height: auto
	}

	.more-resources,
	.opening-text {
		padding: 40px 30px 50px
	}

	.title {
		line-height: 46px;
		max-width: 240px
	}

	.map {
		height: calc(100svw - 40px);
		min-height: 0
	}

	.form {
		padding: 35px 30px 50px
	}

	.form.processing {
		height: calc(100vw - 90px - 20px * 2) !important
	}

	.after-submit-group .pill-links-wrapper.show {
		position: relative;
		bottom: 0;
		margin-top: -40px
	}

	.after-submit-group .pill-links-wrapper.fade-in,
	.more-resources .pill-links-wrapper {
		margin-top: 30px
	}

	.availability-core {
		flex-direction: column;
		align-items: center;
		gap: 15px;
		padding: 0 30px
	}

	.availability-group {
		padding: 30px 0 28px
	}

	.availability-text {
		font-size: 18px;
		text-align: center
	}

	.availability-badge {
		height: 36px;
		gap: 8px
	}

	.icon.checkmark {
		width: 18px;
		height: 18px
	}

	.availability-badge-label {
		font-size: 14px
	}
}