html,body {
	font-family: 'Proxima Nova','Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* .navbar .container { margin-left: 5%; }

.row-flui { margin: 0 auto; padding: 2% 5% 2% 5%; }
*/

a {text-decoration: none;color:rgb(152,148,38);}
a:hover,a:active {text-decoration: underline;color:rgb(25,76,101);}

#brand {
  font-family: 'Jubilat';
  font-style: italic;
  font-weight: 900;
}

.navbar-inverse a.brand {
	color: rgb(152,148,38);
	letter-spacing: 0.0495em;
}

#overview {
	text-align: center;
	background: rgb(177,177,171);
	padding-bottom: 5%;
}

#overview h1 {
	font-size: 8em;
	line-height: .85em;
  font-family: 'Jubilat', serif;
}

#overview h5 {
	font-size: 1em;
	line-height: 1.5em;
	font-weight: 200;
	text-transform: uppercase;
	margin-left: 7.5%;
	margin-top: -0.75%;
}

#overview p {
	font-size: 1.115em;
}

#overview p a {
	color: rgb(25,76,101);
	font-weight: 400em;
}

#stories {
	background: rgb(119,158,177);
	color: rgb(10,10,10);
	text-align: center;
	padding-top: 6.5%;
}

.thumb {
	margin: 0 auto;
	padding: 0;
  margin-bottom: 15%;
  width: 200px;
  height: 200px;
  border-radius: 100%;
}

.thumb a {
	display: block;
	margin: 0 auto;
	width: 100%;
	height: 100%;
  border-radius: 100%;
	border: 5px solid rgb(177,177,171);
}

.thumb a:hover,.thumb a:active {
	border: 5px solid rgb(25,76,101);
}

h3.hed a, h3.hed a:visited {
  font-family: 'Jubilat', serif;
	color:rgb(25,76,101);
	line-height: .95em;
}

h3.hed {
	margin-bottom: -0.75%;
	font-style: italic;
	font-weight: 600;
	font-size: 1.4em;
	line-height: 1.5em;
}

#stories p {
	margin-bottom: 4%;
}


.dek {
  font-family: 'Jubilat', serif;
  font-weight: 400;
  font-size: 1.15em;
  line-height: 1.6em;
	padding: 0 5%;
}

.byline {
  margin-bottom: 10%;
  font-family: 'Proxima Nova';
  font-weight: 300;
  font-size: 1em;
  font-style: italic;
  line-height: 1.3em;
}

.byline ul {
  margin: 0;
  column-count: 2;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-gap: 20px;
  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
}
#robots .thumb a {
  background: url('../img/robots.jpg');
	background-size: cover;
}
#madbarista .thumb a {
  background: url('../img/madBarista.jpg');
	background-size: cover;
}

#bags .thumb a {
  background: url('../img/itsinthebag.jpg');
	background-size: cover;
}

#music .thumb a {
  background: url('../img/music.jpg');
	background-size: cover;
}

#tablets .thumb a {
  background: url('../img/childsPlay.jpg');
	background-size: cover;
}

#fandom .thumb a {
  background: url('../img/socialSuperfan.jpg');
	background-size: cover;
}

#techercise .thumb a {
  background: url('../img/techercise.jpg');
	background-size: cover;
}

#socialdesign .thumb a {
  background: url('../img/socialDesign.jpg');
	background-size: cover;
}

#teaching {
	padding: 2.75% 5%;
	background: rgb(25,76,101);
	color: rgb(177,177,171);
}
#teaching .description {
	margin-bottom: 0;
	padding-bottom: 0;
}
#teaching .title {
	margin-bottom: 0;
	padding-bottom: 0;
	margin-top: 0;
	padding-top: 0;
}
#teaching .names {
	margin-top: 0;
	padding-top: 0;
}
#teaching h3 {
	color: rgb(119,158,177);
  font-family: 'Jubilat', serif;
	margin-top: -0.75%;
	font-style: italic;
	font-weight: 600;
	font-size: 1.4em;
	line-height: 1.5em;
}


@media all and (min-width: 600px) {
	#stories [class*="span"] {
		margin-left: 0 !important;
		margin-right: 0.2% !important;
	}
}

@media all and (max-width: 600px) {
	#overview h1 {
		font-size: 5em;
	}
	#stories .stories {
		text-align: center;
	}
	#stories .stories,#teaching .span4, #teaching .span6 {
		min-width: 290px;
	}
}