/* type */
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,600');

/* reset */
*{
	margin:0;
	padding:0;
	font-size:inherit;
	font-weight:inherit;
}

/* page fade in */
@keyframes fadeIn{
	from{opacity:0;}
	to{opacity:1;}
}

body{
	opacity:0;
	animation:fadeIn ease-in 1;
	animation-fill-mode:forwards;
	animation-duration:0.3s;
	animation-delay:0.2s;
}

/* general */
body{
	font-family:"Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size:16px;
	line-height:1;
	padding:2em;
	color:#333;
	overflow-x:hidden;
  max-width:27em;
  margin:0 auto;
}

@media (min-width:60em){
	body{
		font-size:24px;
		padding:4em;
	}
}

img,
video{
  display:block;
  width:100%;
  margin:2em 0 2em 0;
	box-shadow:0 1em 2em rgba(0,0,0,0.1);
}

img.no-shadow{
	box-shadow:none;
}

p,
ol,
ul{
	line-height:1.4;
	margin-bottom:1em;
}

li{
	margin-bottom:0.2em;
	margin-left:2em;
}

a{
	color:blue;
	text-decoration:none;
	font-weight:bold;
}

a:hover{
	border-bottom: 0.12em solid blue;
}

/* headings */
h1{
	font-size:2.4em;
	margin-bottom:1em;
	font-weight:300;
}

h2{
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:0.1em;
	margin:4em 0 1em 0;
	color:#666;
}

/* logo */
#logo{
	display:block;
	border:solid 0.1em #ddd;
	background:#fff;
	width:2em;
	height:2em;
	line-height:1.8em;
	text-align:center;
	text-decoration:none;
	color:#ddd;
	box-sizing:border-box;
	transition:opacity .3s;
	margin-bottom:4.8em;
	font-weight:normal;
	transition:color .3s, border-color .3s;
	user-select:none;
}

#logo:hover{
	border-color:blue;
	color:blue;
}

/* footer */
footer{
	margin:4em 0 2em 0;
	text-align:right;
	position:relative;
}

footer p,
footer a{
	font-size:0.8em;
}

/* index-specific */
.project{
	margin-bottom:2em;
	text-decoration:none;
	display:block;
	padding:1.6em;
	color:#333;
	border:solid 0.1em #ddd;
	transition:border-color .3s;
}

.project:hover{
	color:blue;
	border-color:blue;
	background:white;
}

.project img{
	margin-bottom:1em;
	box-shadow:none;
	margin-top:0;
	transition:opacity .3s, filter .3s;
}

.featured-image{
	background:blue;
}

.featured-image img{
	/* opacity:0.6; */
}

.project:hover img{
	opacity:0.2;
	filter:grayscale(100%);
}

.project .post-title{
	font-weight:bold;
	font-size:1.2em;
	margin-bottom:0.6em;
	color:blue;
	text-decoration:underline;
}

.case-study{
	font-size:0.6em;
	text-transform:uppercase;
	margin-bottom:0.2em;
	text-decoration:none;
	letter-spacing:0.1em;
	font-weight:bold;
}

.project .post-excerpt{
	margin-bottom:0;
}

.post-title{
	margin-bottom:0.2em;
	max-width:20em;
}

.post-excerpt{
	max-width:20em;
}

.blog-post{
	text-decoration:none;
	display:block;
	position:relative;
	transition:padding .2s, border-color .3s;
	border-color:white;
}

.blog-post:hover{
	color:blue;
	background:transparent;
	padding-left:1em;
	border-left:solid 0.1em blue;
}

.blog-post .post-title{
	text-decoration:underline;
	font-weight:bold;
}

.blog-post .post-excerpt{
	color:#333;
}

.blog-post:hover .post-excerpt{
	color:blue;
}

/* Details. */
.call-out{
	font-style:italic;
	font-size:1.2em;
	line-height:1.2;
	font-weight:300;
}

.call-out em{
	font-style:normal;
}

.hero,
.centerfold{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}

.hero img{
	box-shadow:none;
}

.centerfold{
	margin-top:2em;
}

.centerfold img,
.centerfold video{
	box-sizing:border-box;
	width:90vw;
	margin:5vw auto;
}

blockquote{
	font-style:italic;
	padding:0 1.2em;
	border-left:solid 0.1em #eee;
	margin:2em 0;
}

strong{
	font-weight:bold;
}

em{
	font-style:italic;
}

tt{
	color:#000;
	background:#eee;
}