/***********************************************
Contact Grid
***********************************************/

.contact-grid {
	
	@media screen and (min-width: 690px) {
		display: flex;
		align-items: center;
	}
}

/***********************************************
Contact Block
***********************************************/

.contact-details {
	
	@media screen and (min-width: 690px) {
		flex-basis: 250px;
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		flex-direction: column;
		flex-wrap: wrap;
	}
	@media screen and (min-width: $bp-laptop) {
		flex-basis: 465px;
	}
}

/***********************************************
Contact Address
***********************************************/

.contact-address {
	display: block;
	width: 100%;
	margin-top: 10px;
}
.contact-details h2 {
	width: 100%;
}
.contact-address p,
.contact-address a {
	font-size: $font-small;
	width: 100%;
	color: $color-primary !important;
	text-decoration: none !important;
	display: block;
	line-height: 1.5;

	@media screen and (min-width: 690px) {
		padding-right: 40px;
	}
	@media screen and (min-width: $bp-laptop) {
		float: left;
		width: 50%;
	}
}
.contact-address p a {
	display: inline !important;
}
.contact-address a:hover {
	color: $color-secondary !important;
}

/***********************************************
Contact Map
***********************************************/

.contact-map {
	border: $border-default;
	padding: 4px;
	overflow: hidden;
	height: 125px;

	img {
		left: -304px;
		margin-left: 50%;
	}

	@media screen and (min-width: 690px) {
		flex-shrink: 1;
		max-width: 100%;
		flex-grow: 1;
		height: 135px;

		img {
			left: -331px;
			margin-left: 50%;
			position: absolute;
			height: 100%;
			width: auto;
			display: block;
			top: 0;
			right: 0;
			bottom: 0;
		}
	}

	@media screen and (min-width: $bp-laptop) {
		height: 100px;

		img {
			left: -238px;
		}
	}

	@media screen and (min-width: 1150px) {
		height: 163px;

		img {
			left: -405px;
		}
	}
}