@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700';
@import 'https://fonts.googleapis.com/css?family=Roboto+Slab:500, 700';

body {
	width: 100%;
	font-family: 'roboto', sans-serif;
 	font-weight: 500;
	color: #003d4b;
	padding: 0 0;
	margin: 0 0;
	}

#logo-banner {
	overflow: auto;
	padding: 20px 0;
	position: relative;
	width: 100%;
	}
	
.logo {
	float: left;
	width: 150px;
	padding-left: 20px;
	}
	
.logo img{
	width: 100%;
	}
	
.contact {
	float: left;
	font-family: 'Roboto Slab', serif;
	font-weight: 500;
	vertical-align: bottom;
	line-height: .8em;
	font-size: .8em;
	position: relative;
	padding-left:20px;
	right: 0;
	clear: both;
	}
	
.contact p {
	margin-bottom: 0;
	line-height: 1.3em;
	}	
	
.contact a{
	text-decoration: none;
	color: #003d4b;
	}
	
.contact a:hover, .contact a:active {
	color: #000f11;
	}
	
#content-area {
	background-image: url('images2016/watercolor_1800.jpg');
	background-size: cover;
	overflow: auto;
	width: 100%;
	}
	
.text-bar {
	background-image: url('images2016/trans-white-40pct.png');
	line-height: 1.4em;
	padding: .5em 20px .06em 20px; 
	margin: 2em auto 4em auto;
	font-size: 1.5em;
	}
	
.text-bar h1 {
	font-family: 'Roboto Slab', serif;
	font-weight: 500;
	color: #fff;
	font-size: 1.5em;
	margin-bottom: 0;
	}
	
.text-bar h2 a {
	font-family: 'roboto', sans-serif;
 	font-weight: 700;
 	color: #c917b0;
 	text-decoration: none;
 	font-size: 1em;
 	}
 	
 .text-bar h2 a:hover, .text-bar h2 a:active {
 	color: #8c117a;
 	}
 	
 	
@media screen and (min-width:700px)
 	{
		#logo-banner {
		width: auto;
		}
		
		.logo {
		float: left;
		width: 225px;
		padding-left:40px;
		}
		
		#logo-banner {
		padding: 40px 0;
		}
	
		.text-bar {
		line-height: 1.25em;
		font-size: 2.8em;
		padding: .5em 0 .06em 90px; 
		margin-top:3em;
		margin-bottom: 5em;
		}
		
		.contact {
			float: right;
			width: 12em;
			bottom: 40px;
			position: absolute;
			padding-left:40px;
			font-size: 1.1em;
			}
 	}