/* Basic Elements */
body {
  font-family: 'Bitter', serif;
  font-size: 1.6rem;
  background: rgb(234,253,230); /* Dream Base */
}

/* quotes */
.q-wrapper {
	color: #FFF;
	font-size: 1.6rem;
	font-weight: 400;
	font-family: 'Lato' sans-serif;
	margin: 15px;
	text-align: right;
}

q:before {
	font-family: FontAwesome;
	content: "\a0\f10d\a0";
	vertical-align: super;  
	font-size: .8rem;
}

q:after {
	font-family: FontAwesome;
	content: "\a0\f10e\a0";
	vertical-align: super;  
	font-size: .8rem;
}

@media (min-width: 740px) {
	.q-wrapper {
		font-size: 1.8rem;
		}
	}

cite {
	font-size: 1.2rem;
	white-space: nowrap;
}
cite:before {
	content: "\a0\2014\a0";
}


/* Headings */
h1, h3, h4, h5 h6 {
  font-family: 'Lato' sans-serif;
  letter-spacing: normal;
}

h2 {
  font-weight: 600;
  font-family: 'Bitter', serif;
  font-size: 2.8rem;
}

h3 {
	font-weight: 600;
	font-size: 2.2rem;
}

@media (min-width: 550px) {
	h2 {
		font-size: 3.3rem;
	}
	h3 {
		font-size: 2.8rem;
	}
}

.subhead-text {
	font-size: 75%;
	font-weight: 400;
}

ul.nobull {
  list-style: none;
  margin-left: 20px;
}

header {
  width: 100%;
  padding: 30px 0 30px 0;
  border-bottom: 6px solid rgb(27,103,107); /* A Dream in Color */
  border-top: 2px solid rgb(27,103,107); /* A Dream in Color */
}

header .title {
  margin-bottom: 5px;
  margin-bottom: .5rem;
  font-size: 4rem;
  font-weight: 600;
}

@media (min-width: 740px) {
	header .title {
		font-size: 4.8rem;
	}
}

header .description {
  font-family: 'Bitter', serif;
  font-style: italic;
  font-size: 20px;
  font-size: 1.4rem;
  font-weight: 200;
  float: right;
}

/* Sections */

section {
  width: 100%;
  padding: 0;
  margin-bottom: 15px;
}

 section.about, section.contact, section.clients {
  padding-top: 15px;
  margin-bottom: 15px;
  border-top: solid 2px rgb(81,149,72); /* A Dream in Green */
}

section.services {
	padding-top: 15px;
	margin-bottom: 15px;
}

.philosophy-wrapper {
	width: 100%;
	margin: 0 0 15px 0;
	background: rgb(81,149,72); /* A Dream in Green */
	background-image: url('.././images/walkingpath-dk.jpg');
	background-position: center center;
	background-size: cover;
	border-bottom: 6px solid rgb(27,103,107); /* A Dream in Color */
}

section.philosophy {
	padding-top: 30px;
	padding-bottom: 45px;
}

.intro {
	color: #FFF;
	font-size: 1.6rem;
	font-weight: 400;
	font-family: 'Lato' sans-serif;
	margin: 1rem;
}
.intro li {
	margin-bottom: .5rem;
	padding-left: 1rem;
}
.intro a {
	color:#FFF;
	text-decoration: none;
}
.intro a:hover {
	color:#AAF;
}

.intro.attention {
	font-family: 'Bitter', serif;
	font-style: italic;
	text-align: center;
	font-size: 2rem;
	font-weight: 500;
}

.drop:first-letter {
	font-family: 'Bitter', serif;
	font-size: 2rem;
}


@media (min-width: 740px) {
	.intro {
		font-size: 1.8rem;
		padding-left: 10%;
		padding-right: 10%;
	}
	.intro.attention {
		font-size:2.4rem;
		padding-left: 5%;
		padding-right: 5%;
	}
	.drop:first-letter {
		font-family: 'Bitter', serif;
		font-size: 2.5rem;
	}
	section.philosophy {

	}
}
	
/* Service Accordian */
.collapse-title {
  width: 100%;
  font-size: 1.8rem;
  font-family: 'Lato', sans-serif;
  text-align: left;
  text-transform: none;
  margin-bottom: 0;
  border: none;
  border-bottom: 1px solid rgb(204, 255, 199); /* A Dream in Light */
  color: rgb(20,20,20);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.collapse-title .fa {
	font-weight: 600;
	float: right;
	padding-top: 10px;
}

.collapse-title.active .fa:before {
  content: "\f107";
}

.collapse-title.active, .collapse-title:hover, .collapse-title:active {
  width: 100%;
  font-size: 1.8rem;
  color: rgb(255, 255, 255);
  background: rgb(81,149,72); /* A Dream in Green */
  text-align: left;
  text-transform: none;
  margin-bottom: 0;
}

.collapse-content {
  display: none;
  font-weight: 400;
  margin: 0 0 15px;
  padding: 15px;
  border-top: none;
  border-left: 1px solid rgb(81,149,72); /* A Dream in Green */
  border-right: 1px solid rgb(81,149,72); /* A Dream in Green */
  border-bottom: 1px solid rgb(81,149,72); /* A Dream in Green */
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  background: rgb(255,255,255);
}

/* footer */

footer {
  width: 100%;
  background: rgb(27,103,107); /* A Dream in Color */
  color: rgb(255, 255, 255);
  padding: 15px 0 15px 0;
}

/* images */

img {
  max-width: 100%;
  
}

div.headshot-wrapper {
  
  padding: 6px;
  margin: auto;
  width: 160px;
  clear:both;
}

div.headshot-wrapper img {
	border: 2px solid rgb(81,149,72); /* A Dream in Green */
}

@media (min-width: 550px) {
  div.headshot-wrapper {
    float: left;
    margin: 0 12px 0 0;
  }
}

/* navigation */
.navbar {
  width:100%;
  position: fixed;
  top: 0;
  z-index: 100;
}

.nav-toggle {
  float: right;
  padding: 0 10px 12px 12px;
  margin: 6px 36px 6px 0;
  font-size: 20px;
  opacity: .95;
  border: none;
  color: rgb(30, 30, 30);
}

.nav-toggle:hover, .nav-toggle:focus, .nav-toggle:active, .nav-toggle.active {
  background: rgb(27,103,107); /* A Dream in Color */
  color: rgb(255,255,255);
}

.nav-toggle.active {
  border: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.nav-items {
  float: right;
  position: absolute;
  top: 44px;
  right: 0;
  padding: 24px;
  margin: 0 36px 6px 6px;
  background: rgb(27,103,107); /* A Dream in Color */
  opacity: .95;
  display: none;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

.nav-brand {
  font-weight: 600;
}

.nav-item a, .nav-item a:visited {
  display:block;
  font-family: 'Lato' sans-serif;
  text-decoration: none;
  color: #fff;
  padding: 6px;
  border-radius: 6px;
  width: 100%;
}

.nav-item a:hover, .nav-item a:focus {
  background: rgb(190,242,2); /* A Dream in Grellow */
  color: rgb(0,0,0);
}

.nav-item a:active {
	background: rgb(250, 170, 100);
	}