@CHARSET "UTF-8";

.map {
	width: 500px;
	height:400px;
	margin: auto;
	margin-top: 20px;
	margin-bottom:40px;
	color: black !important;
}

.flex_container_contact
{
	display: flex;	
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    width: 100%;
}

.white_background
{
	background-color : white;	
	width: 100%;
	text-align: center;
}
.gray_background
{
	background-color : rgb(247, 247, 247);	
	width: 100%;	
}
.intro {
	text-align: center;
	font-family: "source sans pro" !important;
	font-style: normal;
	font-weight: 300;
	font-size: 20px;
	color: gray;
	margin-top: 40px;
}

.contact_link {
	text-decoration: none;
}
.contact_link:hover { 
    background-color: rgb(220,220,220);
    text-decoration: none;
}
.contact {
	text-align: center;	
	font-family: "source sans pro" !important;
	font-style: normal;
	font-weight: 300;
	font-size: 18px;
	margin-bottom: 20px;

}
.address
{
	width: 33%;
	min-width: 330px; 
	color: gray;
}
.phone
{
	width: 25%; 
	min-width: 250px; 	
	color: gray;	
}
.email
{
	width: 33%; 
	min-width: 330px; 	
	color: gray;
	text-decoration: underline !important;
}
.center {
	text-align: center;
	margin:20px;
}
.center_content {
	margin:auto;
	background:gray;
}
.map_button {
	position: relative;
	border-radius:30px;
	border: none;
	width: 250px;
	height: 60px;
    background-color: rgb(52, 52, 52) !important;
    display: inline-block;
}	
.map_button:hover {
	background-color: rgb(39, 38, 38) !important;
}
.map_button::after {
	position: absolute;
	color: rgb(255, 255, 255);
	font-family: "source sans pro" !important;
	font-style: normal !important;
	font-size: 24px !important;
	font-weight:300 !important;
	line-height: 1em;
	top: 18px;
	left: 100px;
	content: 'Open Maps';
	display: block; 
}
.map_button::before {
	position: absolute;
	left: 30px;
	top: 0px;
	color: rgb(255, 255, 255);
	font-family: 'FontAwesome';
	content: "\f041";
	font-size: 42px;
	display: block;
}
.map_button:hover::before {
	animation: drop 1s steps(5) forwards;
	transform: matrix(3, 0, 0, 3, -20px, 15px);
}
@keyframes drop {
  	
  10% {
  	transform: matrix(0.1, 0, 0, 0.1, 20, -20);
  }

  20% {
  	transform: matrix(0.2, 0, 0, 0.2, 15, -19);
  }

  30% {
  	transform: matrix(0.3, 0, 0., 0.3, 10, -18);
  }
  
  40% {
  	transform: matrix(0.4, 0, 0, 0.4, 5, -17);
  }
  
  50% {
  	transform: matrix(0.5, 0, 0, 0.5, 0, -16);
  }

  60% {
  	transform: matrix(0.6, 0, 0, 0.6, 0, -15) rotate(20deg);
  }
  
  70% {
  	transform: matrix(0.6, 0, 0, 0.6, 0, -13) rotate(0deg);
  }

  80% {
  	transform: matrix(0.6, 0, 0, 0.6, 0, -10) rotate(20deg);
  }
  
}