@font-face {
  font-family: "Source Sans Pro";
  src: url(font/source-sans-pro/SourceSansPro-Light.ttf);
	font-weight: 300;
	font-style: normal;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url(font/source-sans-pro/SourceSansPro-LightItalic.ttf);
	font-weight: 300;
	font-style: italic;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url(font/source-sans-pro/SourceSansPro-Regular.ttf);
	font-weight: 400;
	font-style: normal;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url(font/source-sans-pro/SourceSansPro-Italic.ttf);
	font-weight: 400;
	font-style: italic;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url(font/source-sans-pro/SourceSansPro-SemiBold.ttf);
	font-weight: 600;
	font-style: normal;
}
@font-face {
  font-family: "Source Sans Pro";
  src: url(font/source-sans-pro/SourceSansPro-SemiBoldItalic.ttf);
	font-weight: 600;
	font-style: italic;
}

body {
	font-family: 'Source Sans Pro', sans-serif; 
  color: black; }

/* Navigation and page masthead. */

.navbar {
	margin: 10px 0 0 0; }
section nav a {
	color: inherit;
	text-transform: uppercase;
	text-decoration: none; }
.nav > li > a {
	padding: 0 1em; }

h1, h2 {
	font-weight: 300; }
h3 {
	font-size: 150%;
	clear:left; }
.content h2, .content h3, .lead, details {
	color: #DF5A49;
}

.lead {
	font-weight: 400; }

code, tt {
	font-size:86%; }

.content p, .content ol > li, .content ul > li, .content blockquote, .content details {
	font-size: 120%;
	max-width: 40em;
  margin-bottom:0.6em; }
.content li > p, .content li li { font-size: inherit; }

.content details {
  line-height: 1.2;
  margin-left:1em; }
.content summary {
  margin:0 0 0.6em -1em; }
.content blockquote ul {
	font-size: 100%; }
.content blockquote p, .content blockquote li {
	font-size: 95%;
	max-width: 36em; }
.content img {
	max-width: 100%;
	height: auto; }

.content .banner {
	margin-bottom:1em;
	width:960px;
}
.content .banner img {
	margin:0;
}
@media (max-width: 640px) {
	.content .banner {
		width:100%;
	}
	.content .banner img {
		max-width:33%;
	}
}

.content table {
	border-collapse: collapse;
	margin: 1.5em 0;
}
.content th, .content td {
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	padding: 0.2em 0.5em;vertical-align: top;
}

section {
	min-height: 10px;
	color: white; }

section a {
	text-decoration: underline; }
section h2 a {
	color: inherit;
	text-decoration: none; }

section.main {
	background-color: #334D5C; }

section.development {
	background-color: #45B29D; }

section.writing {
	color: #334D5C;
	background-color: #EFC94C; }
section.writing .sites a {
	background-color:  #334D5C; }

section.speaking {
	background-color: #E27A3F; }

section.music {
	background-color: #DF5A49; }

section.main a {
	color: #7FC4FF; }
	
section.development a {
	color: #C0E2FF; }

section.speaking a, section.music a {
	color: #B2D9FE; }
section.speaking h2 a, section.speaking nav a,
section.music h2 a, section.music nav a {
	color: white}


/* Main section */

.thumbnail.pull-right {
	margin: 0 0 20px 20px; }


/* Page footer */

footer {
  clear: both;
	margin-top: 4em;
	padding: 2em 0;
	border-top: 1px solid #ccc;
	font-size: 85%; }
footer a {
	color: inherit;
	text-decoration: underline; }


/* Original pages. */
.content img {
	margin-top:0; margin-bottom:1em; margin-left:1em; margin-right:1em; }
.blog .content img {
	margin: 0; }
.content img.framed {
	border:solid 4px black; margin-left:0; float:left; }
.content img.square {
	border:solid 4px black; margin-left:0; float:left; width:320px; height:320px; }
.content img.inline {
	border:solid 4px black; margin:0; }
.content img.icon {
	border:none; margin:0; }
.content div.indent {
	margin-left: 328px; padding-left: 1em; min-height:328px; clear:left; }

/* /blog/ */

.blog h3.title, .tag h3.title {
	margin-bottom: 0; }

.tags {
  line-height: 1.65em; }

.related {
	font-weight: 600;
	margin-top: 3em; }

.social img {
	margin-right: 32px;
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	-ms-filter: grayscale(100%); }
.social img:hover {
	filter: none;
	-webkit-filter: none;
	-moz-filter: none;
	-o-filter: none;
	-ms-filter: none; }

.social, .social2, .comments {
	margin-top: 3em; }

blockquote.big {
background-color: #334D5C;
color: white;
border-left: 0;
padding:1em;
margin:1.5em 0;
max-width: 26em; }

blockquote.big p {
	font-size: 2em; }

blockquote.big a {
	color: #D9EDFF; }
blockquote.big.solid-three a {
	color: #005199; }

.solid-one {
	background-color: #334D5C ! important; }
.solid-two {
	background-color: #45B29D ! important; }
.solid-three {
	color: #334D5C ! important;
	background-color: #EFC94C ! important; }
.solid-four {
	background-color: #E27A3F ! important; }
.solid-five {
	background-color: #DF5A49 ! important; }

.bordered {
	border: 1px solid #ccc; }

/* Unsplash photo icon link */
a.unsplash {
  background-color:#ccc;
  color:white;
  text-decoration:none;
  padding:4px 6px;
  font-family:-apple-system, sans-serif;
  font-size:12px;
  font-weight:bold;
  line-height:1.2;
  display:inline-block;
  border-radius:3px;
}
a.unsplash:hover {
	background-color: #7FC4FF;
}
a.unsplash span:first-child {
  display: inherit;
  padding: inherit;
}
a.unsplash span {
  display:inline-block;
  padding:2px 3px;
}
a.unsplash svg {
  height:12px;
  width:auto;
  position:relative;
  vertical-align:middle;
  top:-1px;
  fill:white;
}

a.photocredit {
  color:white;
  text-decoration:none;
  padding:4px 6px;
  font-family:-apple-system, sans-serif;
  font-size:12px;
  font-weight:bold;
  line-height:1.2;
  display:inline-block;
  border-radius:3px;
  filter:grayscale(1) opacity(0.5);
  background-color: #7FC4FF;
}
a.photocredit:before {
  content:'📷 ';
}
a.photocredit:hover {
  filter:grayscale(0) opacity(1);
}