.SocialMediaContainer {
	width: 80%;
	height: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;

	div {
		a {
			> span {
				transition: all 0.5s;
			}
			:hover {
				transform: scale(1.05);
			}
		}
	}
}

.TwoColumnLayout {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	width: 90vw;
	height: 100%;
	padding: 0;
	margin: 0;
	.columnChild {
		height: 40vh;
		width: 40vw;
		min-width: 600px;
		margin: 1rem;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row;
		box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 15px;
		border-radius: 0.5rem;
	}
}

.mapouter {
	position: relative;
	text-align: right;
	height: 100%;
	width: 60%;
	border-radius: 0 0.5rem 0.5rem 0;
}

.gmap_canvas {
	overflow: hidden;
	background: none !important;
	height: 100%;
	width: 100%;
	border-radius: 0 0.5rem 0.5rem 0;
	border: none;
}

.contactInfo {
	width: 40%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	p {
		transition: all 0.25s ease-in-out;
		&:hover {
			transform: scale(1.05);
		}
	}
}

.infoContainer {
	flex-direction: row;
}

@media (max-width: 768px) {
	.TwoColumnLayout {
		flex-direction: column;
		width: 95vw;
		.columnChild {
			width: 90vw;
			height: 40vh;
			min-width: 0;
			.mapouter {
				// display: none;
				height: 100%;
				width: 100%;
			}
		}
		.infoContainer {
			flex-direction: column;
			height: 55vh;
		}
	}
	.contactInfo {
		width: 100%;
	}
	.SocialMediaContainer {
		justify-content: center;
		div {
			flex-basis: 50%;
			text-align: center;
		}
	}
}