/* 
---------------------------------------

	INTRO
	
---------------------------------------
*/

.intro{
	clear: both;
	padding: 5em 6.66666666666667%;
}

	.intro p{
		margin-bottom: 0;
	}


/* 
---------------------------------------

	TILES
	
---------------------------------------
*/

.data-tiles{
    position: relative;	
}

	.single-tile{
		width: 45%;
		margin-right: 10%;
		margin-bottom: 10%;
		float: left;
		overflow: hidden;
		background: #bdebff;
		text-align: center;
		position: relative;
	}
	
		.single-tile:nth-of-type(2n){
			margin-right: 0;
		}
		
		.single-tile:nth-of-type(3),
		.single-tile:nth-of-type(4){
			margin-bottom: 0;
		}
		
		.single-tile .overlay{
			/* display: block; */
			width: 100%;
			height: 100%;
			background: #8bc23e;
			
			position: absolute;
			left: 0;
			top: 0;
			
			-webkit-transition: opacity 0.25s ease;
			-moz-transition: opacity 0.25s ease;
			-ms-transition: opacity 0.25s ease;
			transition: opacity 0.25s ease;
			
			opacity: 0;
			visibility: hidden;
        	z-index: 500;
		}
		
			.single-tile:hover .overlay{
				opacity: 1;
				visibility: visible;
			}
		
			.single-tile .overlay a{
				display: block;
				width: 100%;
				font-weight: 900;
				vertical-align: middle;
				text-transform: uppercase;
				letter-spacing: 2px;
				line-height: 1.625;
				text-align: center;
				/* padding: 6em 0; */
				margin-bottom: 0;
				color: #fff;
				
				position: relative;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				z-index: 500;
				
            /* START Styles to fix display issue in Chrome */
				visibility: visible;
				opacity: 1;
            /* END Styles to fix display issue in Chrome */
			}
		
		.single-tile h4{
			display: block;
			font-family: "adelle", Georgia, serif;
			text-transform: none;
			letter-spacing: 1px;
			box-sizing: border-box;
			padding: .9375em 0;
			text-align: center;
			background: #566c77;
			color: #fff;
		}
		
		.single-tile p{
			box-sizing: border-box;
			padding: 1.75em 1em 1.25em 1em;
			font-size: .875em;
			line-height: 1.375;
			margin-bottom: 0;
		}
		
		.single-tile a{
			display: block;
			margin-bottom: 1.875em;
			color: #5a6054;
		}
		
			.single-tile a:hover{
				text-decoration: none;
			}


/* 
---------------------------------------

	ANNE ARUNDEL
	
---------------------------------------
*/

.anne-arundel{
	position: relative;
}

	.anne-arundel .left{
		width: 47%;
		margin-right: 6%;
		float: left;
	}
	
		.anne-arundel .left img{
			display: block;
			position: relative;
			z-index: 50;
		}
	
	.anne-arundel .right{
		width: 47%;
		box-sizing: border-box;
		padding-right: 6.66666666666667%;
		float: left;
	}
	
	.anne-arundel .divider{
		width: 100%;
		height: 3.75em;
		clear: both;
	}
		
		.anne-arundel .divider .split{
			position: relative;
			width: calc(47% - 1px);
			height: 100%;
		}
		
			.anne-arundel .divider .split:before{
				display: block;
				content: '';
				background: #51b8f0;
				width: 20em;
				height: 1px;
				
				position: absolute;
				right: -20em;
				bottom: -1px;
				display: none;
			}
			
			.anne-arundel .divider .split:after{
				display: block;
				content: '';
				background: #51b8f0;
				width: 1px;
				height: 20em;
				
				position: absolute;
				right: -1px;
				z-index: 25;
				bottom: 0;
				display: none;
			}

/* 
---------------------------------------

	CITY OF ANNAPOLIS
	
---------------------------------------
*/

.annapolis{
	position: relative;
	padding-bottom: 5em;
}

	.annapolis .left{
		width: 47%;
		box-sizing: border-box;
		padding-left: 6.66666666666667%;
		float: left;
	}
		
	.annapolis .right{
		width: 47%;
		margin-left: 6%;
		float: left;
	}
	
		.annapolis .right img{
			display: block;
		}



/* 
---------------------------------------

	CTA FORM
	
---------------------------------------
*/		

.cta-form{
	
}

	.cta-form h2{
		display: block;
		background: #5ebef5;
		box-sizing: border-box;
		margin-bottom: 0;
		padding: .75em 6.66666666666667%;
		color: #fff;
		font-size: 1.8125em;
	}
	
	.cta-form .wrapper{
		padding: 2.25em 6.66666666666667%;
	}
	
	.cta-form .contact{
		width: 36%;
		margin-top: 1em;
		float: left;
	}
	
		.cta-form .contact .image{
			width: 5.875em;
			margin-right: 2.5em;
			float: left;
		}
		
			.cta-form .contact .image img{
				display: block;
				border-radius: 50%;
				margin-bottom: 0;
			}
			
		.cta-form .contact .contact-info{
			margin-top: .875em;
		}
			
			.cta-form .contact .contact-info p{
				margin-bottom: 0;
				font-size: .875em;
				line-height: 1.75;
				text-transform: none;
			}
			
				.cta-form .contact .contact-info p strong{
					font-weight: 700;
				}
			
				.cta-form .contact .contact-info p span.divide{
					color: #5ebef5;
				}
				
				.cta-form .contact .contact-info p span.title{
					font-style: italic;
				}
				
				.cta-form .contact .contact-info p span.phone{
					color: #ff861e;
				}
				
				.cta-form .contact .contact-info p span.email{
					color: #ff861e;
				}
	
	.cta-form .form{
		width: 64%;
		float: left;
	}
	
		.cta-form .form form{
			
		}
		
			.cta-form .form form p{
				display: inline-block;
				line-height: .875;
				margin-bottom: 15px;
			}
			
				
			
				.cta-form .form form .cta-left{
					width: 47.5%;
					margin-right: 5%;
					float: left;
				}
				
				.cta-form .form form .cta-right{
					width: 47.5%;
					float: left;
				}
				
				
		
			.cta-form .form form label{
				font-size: 0em;
			    position: absolute;
			    left: -10000px;
			    top: auto;
			    width: 1px;
			    height: 1px;
			    overflow: hidden;
			}

		
			.cta-form .form input[type=text],
			.cta-form .form input[type=email]{
				display: block;
			    width: 100%;
			    padding: 10px 15px 10px 15px;
			    margin: 0;
			    border: 0;
			    font-family: "adelle", Georgia, serif;
			    color: #5a6054;
			    font-size: 1.125em;
			    box-sizing: border-box;
			    background-color: #d3e8f1;
			}
			
			.cta-form .form textarea{
				display: block;
			    width: 100%;
			    padding: 10px 15px 0px 15px;
			    margin: 0;
			    border: 0;
			    font-family: "adelle", Georgia, serif;
			    color: #5a6054;
			    font-size: 1.125em;
			    box-sizing: border-box;
			    overflow-y: 0;
			    resize: none;
			    background-color: #d3e8f1;
			    height: 10.5em;
			}
			
			.cta-form .form h5.btn{
				display: inline-block;
				width: calc(6.25em + 2px);
				margin-bottom: 0;
			}
			
				
			
			.cta-form .form input[type=submit]{
				display: inline-block;
			    font-family: "adelle", Georgia, serif;
			    font-size: 1em;
			    width: 6.125em;
			    font-style: italic;
			    color: #5a6054;
			    padding: 0.8em 1.25em;
			    background: #fff;
			    text-align: center;
			    border: 0px;
			    transition: color .3s, background .3s;
			    cursor: pointer;
			}
			
				.cta-form .form input[type=submit]:hover{
					background: #67c8f3;
					color: #fff;
				}
			
			.cta-form .form .ajax-loader{ display: none; }
		
			.wpcf7-response-output{
				float: left;
			}
		
		
/* 
---------------------------------------

	MEDIA QUERIES
	
---------------------------------------
*/	


@media only screen
and (min-width: 93.75em){ /* 1500px */
	
	.single-tile{
		font-size: 1.0875vw;
	}
	
}


@media only screen
and (max-width: 90.625em){ /* 1450px */
	
	.cta-form .contact{
		width: 28.25em;
	}
	
	.cta-form .form{
		width: calc(100% - 28.25em);
	}
	
}


@media only screen 
and (max-width: 81.25em){ /* 1300px */
	
	/* ANNE ARUNDEL */
	.anne-arundel .right{
		width: 38.25em;
	}
	
	.anne-arundel .left{
		width: calc(94% - 38.25em);
	}
	
	.anne-arundel .divider .split{
		width: calc(94% - 38.25em);
	}
	
		.anne-arundel .divider .split:after{
			right: 0px;
		}
	
	/* CITY OF ANNAPOLIS */
	.annapolis .left{
		width: 38.25em;
	}

	.annapolis .right{
		width: calc(94% - 38.25em);
	}		
	
}


@media only screen
and (max-width: 75em){ /* 1200px */
	
	/* ANNE ARUNDEL */
	.anne-arundel .divider .split:after,
	.anne-arundel .divider .split:before{
		display: none;
	}
	
	/* FORM */
	.cta-form .contact{
		width: 100%;
		margin-bottom: 1em;
	}
	
	.cta-form .form{
		width: 100%;
	}
	
		.cta-form .form form .cta-left p{
			width: 100%;
		}
	
}


@media only screen
and (max-width: 68.75em){ /* 1100px */
	
	/* ANNE ARUNDEL*/
	.anne-arundel .left{
		width: 26.375em;
	}
	
	.anne-arundel .right{
		width: calc(94% - 26.375em);
	}
	
	/* CITY OF ANNAPOLIS */
	.annapolis .left{
		width: calc(94% - 26.375em);
	}
	
	.annapolis .right{
		width: 26.375em; 
	}
	
	
}


@media only screen
and (max-width: 61.25em){ /* 980px */
	
	/* ANNE ARUNDEL*/
	.anne-arundel .left{ display: none; }
	
	.anne-arundel .right{
		width: 100%;
		padding-left: 6.66666666666667%;
	}
	
	/* CITY OF ANNAPOLIS */
	.annapolis .right{ display: none; }
	
	.annapolis .left{
		width: 100%;
		padding-right: 6.66666666666667%;
	}
	
	
}


@media only screen
and (max-width: 47.9375em){ /* 767px */

	.cta-form .form form .cta-left{
		width: 100%;
	}
	
	.cta-form .form form .cta-right{
		width: 100%;
	}
	
		.cta-form .form form .cta-right p{
			width: 100%;
		}
	
	
}



@media only screen
and (max-width: 34.375em){ /* 550px */
	
	.single-tile{
		width: 100%;
	}
	
		.single-tile:nth-of-type(3){
			margin-bottom: 10%;
		}
		
		.single-tile p{
			min-height: 80px;
		}
		
	/* CTA FORM */
	.cta-form .wrapper{
		padding-top: 1.5em;
	}

	
}


@media only screen
and (max-width: 30em){ /* 480px */
	
	.cta-form .contact{
		font-size: .9375em;
	}
	
		.cta-form .contact .image{ display: none; }
		
		.cta-form .contact .contact-info{
			margin-top: .125em;
		}
	
}