/* Layout
-----------------------------------------------------------------------------*/
body {
	background: #cfe0c8 url("../images/grey-washed-wall5.png") repeat; 
	font: normal 100% 'Crimson Text', Georgia, serif;
	color: #7c6a55;
	position: relative;
}

img {
	max-width:100%;
}

p, div.list {
	font-size: 1.25em; /* 20pt/16pt = 1.125em; */
	margin-top: 18pt;
	line-height: 28px;
}

h1 {
	color: #ffffff;
	font: normal 4.0em 'Crimson Text', Georgia, serif; /* 64pt/16pt = 4.0em */
	letter-spacing: -.02em;
	text-rendering: optimizeLegibility;
  	font-feature-settings: "kern";
  	-webkit-font-feature-settings: "kern";
  	-moz-font-feature-settings: "kern";
  	-moz-font-feature-settings: "kern=1";
}

.smallh1 {
	font-size: 70%;
}

h2 {
	font: normal 2.25em 'concourse_c4regular', Verdana, sans-serif; /* 36pt/16pt = 2.25em; */
}

#home h2, #home h3 {
	color: #d1a943;
}

#about h2, #about h3 {
	color: #a48bc1;
}

#services h2, #services h3 {
	color: #d58469;
}

h3 {
	font: normal 1.75em 'concourse_t4regular', Verdana, sans-serif;  /* 28pt/16pt = 1.75em; */
	margin-top: 10px;
	padding-top: 30px;
	border-top: solid 1px #cfe0c8;
}

blockquote {
	font-size: 1.875em; /* 30pt/16pt = 1.875em; */
	font-weight: 400;
	text-align: center;
	margin: 30px 0px;
	padding: 30px;
	line-height: 1.3em;
}

#home blockquote {
	background-color: rgba(209,169,67,.25);
}

#about blockquote {
	background-color: rgba(165,140,193,.25);
}

#services blockquote {
	background-color: rgba(214,133,105,.25);
}

a {
	color: #6c87c3;
	font-family: 'concourse_c4regular', Verdana, sans-serif;	
	text-decoration: none;
}

a:hover {
	color: #9fc290;
}

ul {
	margin-left: 21px;
}

li {
	list-style: initial;
}

#wrapper {
	width: 95%;
	max-width: 860px;
	margin: 0 auto;
}

.portrait {
	float:left;
	margin-right: 20px;
	position: relative;
	top: 5px;
}

.first-initial {
	color: #ffffff;
	position: relative;
	padding: 0 11px 0 10px;
}

.circle {
	position: absolute;
	margin-top: 1px;
}

/* Header
-----------------------------------------------------------------------------*/
header {
	position: relative;
}

nav {
	margin-bottom: 25px;
	width: 360px;
}

nav ul {
	margin-left: 0;
	font-size: 1em;
}

nav ul li {
	display: inline-block;
	float: left;
	text-align: center;
	width: 33.33%;
	min-width: 95px;
	height: 30px;
}

nav ul li a {
	color: #ffffff;
	padding: 25px;
	font-size: 1.0em; /* 16px/16px = 1.0em */
	line-height: 1.8em;
}

nav ul li a:hover {
	color: #ffffff;
} 

nav ul li:nth-child(1) {
	background-color: rgba(209,169,67,.4);
}

nav ul li:nth-child(1).current-li, nav ul li:nth-child(1):hover {
	background-color: rgba(209,169,67,1.0);
}

nav ul li:nth-child(2) {
	background-color: rgba(165,140,193,.4);
}

nav ul li:nth-child(2).current-li, nav ul li:nth-child(2):hover {
	background-color: rgba(165,140,193,1.0);
}

nav ul li:nth-child(3) {
	background-color: rgba(214,133,105,.4);
}

nav ul li:nth-child(3).current-li, nav ul li:nth-child(3):hover {
	background-color: rgba(214,133,105,1.0);
}

nav ul li:nth-child(n) a {
	color: #7c6a55;	
} 

nav ul li:nth-child(n).current-li a, nav ul li:nth-child(n) a:hover {
	color: #ffffff;	
} 

/* header img {
	display: block;
	width: 100%;
} */

#responsive-header-image {
	width: 100%;
	padding-bottom: 55.46666%; /* 416px/750px */
	background-image:url("../images/beach-walk-large.png");
	background-size:cover;
	background-position:center; /* IE fix */
	position: relative;
}

#title {
	background-color: rgba(44,37,30,.3);
	position: absolute; 
	top: 10%;
	z-index: 20;
	padding: 7px 6.66666% 30px 6.66666%; /* left padding matches padding for main 50px/750px = 6.66666% */
    text-shadow: 2px 2px 8px rgba(44,37,30,0.25);
}

#title p {
	color: #cfe0c8; 
	font-size: 1.3em;  /* 17pt/16pt = 1.0625em; */
	letter-spacing: .01em;
	line-height: 32px;
}

#title p#line1 {
	font-family:'concourse_c4regular', Verdana, sans-serif;
	text-transform: uppercase;
	margin-top: 0px;
}

#title p#line2 {
	font-family:'concourse_t4regular', Verdana, sans-serif;;
	margin-top: 0;
	letter-spacing: .04em;
}

/* Main
-----------------------------------------------------------------------------*/
main {
	background-color: #ffffff;
	padding: 6.66666%; /* 50px/750px = 6.66666% */
	position: relative;
}

section.content {
	position: relative;
	z-index: 15;
}

#bar {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 10;	
}

#grass {
	position: absolute;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: 5;	
}

section.contact {
	margin-top: 150px;
	position: relative;
	z-index: 15;
}

address {
	font-size: 1.0em; /* 16pt/16pt = 1.0em; */
	margin-bottom: 70px;	
}

#copyright {
	position: absolute;
	font-size: .9em;
	bottom: 30px;
	z-index: 15;
}

/* Footer
-----------------------------------------------------------------------------*/
footer {
	height: 80px;
}

#credit {
	font: normal 1.0625em 'concourse_t4regular', Verdana, sans-serif; /* 17px/16px = 1.0625em */
	text-align: center;
}

p#credit {
	margin-top: 25pt;	
}

/* Misc
-----------------------------------------------------------------------------*/
.group:after {
  content: "";
  display: table;
  clear: both;
}

.bold {
	font-weight: 700;
	line-height: .9em;
}

/* Media Queries
-----------------------------------------------------------------------------*/

/* Break Point #1 (screens 676px to 860px)
-----------------------------------------------------------------------------*/
@media screen and (max-width:860px) {

	nav {
		width: 100%;
	}

	nav ul {
		width: 75%;
		margin: 0 auto;
	}

	h1 {
		font-size: 3.0em; /* 48pt/16pt = 3.0; */
	}

	#title p {
		font-size: 1.125em;  /* 18pt/16pt = 1.125em; */
		line-height: 23px;
	}

	h2 {
		font-size: 2.0em; /* 32pt/16pt = 2.0; */
	}

	h3 {
		font-size: 1.5em; /* 24pt/16pt = 1.5; */
	}

	blockquote {
		font-size: 1.5em; /* 24pt/16pt = 1.5em; */
	}

	p, div.list {
		font-size: 1.375em; /* 22pt/16pt = 1.375em; */
		line-height: 30px; 
		margin-top: 14pt;
	}

	.circle {
		margin-top: 2px;
	}

	.portrait {
		width: 130px;
	}

	#bar {
		display: none;
	}

	section.contact {
		margin-top: 75px;
	}

}	

/* Break Point #2 (screens 675px to 556px)
-----------------------------------------------------------------------------*/
@media screen and (max-width:675px) {

	nav ul li {
		height: 35px;
	}

	nav ul li a {
		line-height: 2.0em;
	}

	#responsive-header-image {
		padding-bottom: 75.33333%; /* 565px/750px */
		background-image:url("../images/beach-walk-medium.png");
	}

	h1 {
		font-size: 2.625em; /* 42pt/16pt = 2.625; */
	}

	#title {
		padding: 17px 5% 40px 5%; /* left padding matches padding for main */
		background-color: rgba(44,37,30,.4);
	}

	#title p {
		font-size: 1.125em;  /* 18pt/16pt = 1.125em; */
		line-height: 23px;
	}

	h2 {
		font-size: 1.75em;  /* 28pt/16pt = 1.75em; */
	}

	h3 {
		font-size: 1.25em;  /* 20pt/16pt = 1.25em; */
	}

	nav {
		margin-bottom: 0px;
	}

	nav ul {
		width: 100%;
	}

	nav ul li {
		min-width: 10px;
	}

	p, div.list {
		line-height: 27px;
		margin-top: 10pt;
	}

	main {
		padding: 5%;
	}
	
	.portrait {
		width: 110px;
		margin-right: 10px;
	}

	section.contact {
		margin-top: 50px;
	}

}	

/* Break Point #3 (screens 555px to 431px)
-----------------------------------------------------------------------------*/
@media screen and (max-width:555px) {

	#wrapper {
		width: 97%;
	}

	h1 {
		font-size: 2.25em; /* 36pt/16pt = 2.25; */
	}

	#title p {
		font-size: 0.9em;  /* 14.4pt/16pt = .9em; */
		line-height: 21px;
	}

	p, div.list {
		margin-top: 12pt;
	}

}

/* Break Point #4 (screens 430px and smaller)
-----------------------------------------------------------------------------*/
@media screen and (max-width:430px) {

	#responsive-header-image {
		background-image:url("../images/beach-walk-small.png");
	}

	h1 {
		font-size: 2.0em; /* 32pt/16pt = 2.0; */
	}

	#title p {
		font-size: 0.8em;  /* 12.8pt/16pt = .8em; */
		line-height: 19px;
	}

}