@charset "UTF-8";
.contactPanel {
	width: 100%;
	position: fixed;
	left: 100%;
	height: 100vh;
	background-color: var(--light_panelTint);
	z-index: 300;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
	opacity: 0;
}
.contactPanel.contactPanelOpen {
	left: 0;
	opacity: 1;
}
.contactPanel .container {
	padding-left: 0;
	padding-right: 0;
}
.contactsAndMap {
	display: flex;
	flex-flow: column;
	height: 100vh;
	padding-bottom: 10%;
}
.contactDetails {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1rem;
}
.contactLogo {
	width: 100px;
	align-self: center;
	line-height: 0;
}
.address { align-self: center; }
.contactLogo a:link { display: block; }
.contactLogo img {
	width: 100%;
	height: auto;
}
.osmMapwrap {
	flex: 1;
	background-color: #ffffff;
	margin-top: 1rem
}
.socialMedia {
	display: flex;
	gap: 1rem;
	margin-top: 1rem;
}
.socialMedia a:link {
	display: block;
	height: 24px;
}
.socialMedia img {
	height: 24px;
	width: auto;
}
@media (min-width: 390px) {
	.contactDetails { gap: 2rem; }
}
@media (min-width: 560px) {
	.address { align-self: auto; }	
}
@media (min-width: 768px) {
	.socialMedia img { height: 30px; }
	.socialMedia a:link { height: 30px; }
	.contactsAndMap { padding-bottom: 4rem; }
	.contactLogo { width: 140px; }
	.contactDetails { gap: 3rem; }
}
@media (min-width: 1024px) {
	.contactLogo { width: 180px; }	
}
#closefindUs { margin: 2rem 0 1rem auto; }
#closefindUs p { color: var(--paragraph-color); }