/*
Well hello there! Thanks for taking a look around. If you are curious about the SCSS document feeding this main.css, just swap out the suffix in your browser's address bar.
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after {
  content: "";
  content: none; }

q:before, q:after {
  content: "";
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* 800px / 16 = 50em */
/* 320px / 16 = 20em */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

/* There seems to be a bug rendering fonts in mozilla on macs. The moz-osx css line fixed the visual issue. This may only be necessary when there is only one font served from typekit and the weights are specified by numerical values. */
body {
  font: 400 100%/1.5 "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
  color: #9e9e9e;
  text-rendering: optimizeLegibility; }

h1, h2, h3, h4 {
  color: #9e9e9e;
  margin-bottom: 15px; }
  @media screen and (min-width: 50em) {
    h1, h2, h3, h4 {
      margin-bottom: 43px; } }

h1 {
  font-size: 137.5%;
  /*22 px*/
  line-height: 1.36;
  /*30 px*/
  max-width: 30em; }

p, ul, ol {
  font-size: 100%;
  margin-bottom: 1em;
  max-width: 37em; }
  p.experiment-number, ul.experiment-number, ol.experiment-number {
    color: #565656;
    letter-spacing: 1.5px;
    font-size: 87.5%;
    margin-bottom: 4px; }
  p.article-header, ul.article-header, ol.article-header {
    color: #565656;
    letter-spacing: 1.5px;
    font-size: 87.5%;
    margin-bottom: 11px;
    text-transform: uppercase; }
  p.experiment-keywords, ul.experiment-keywords, ol.experiment-keywords {
    color: #565656;
    font-size: 87.5%;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 0; }
  p a, ul a, ol a {
    color: #649752;
    text-decoration: none;
    -webkit-transition: all .15s ease-in-out;
    -moz-transition: all .15s ease-in-out;
    -o-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out; }
    html.no-touch p a:hover, html.no-touch ul a:hover, html.no-touch ol a:hover {
      color: white; }

article p:last-child, article ol:last-child {
  margin-bottom: 0; }

ol, ul {
  margin-left: 1.4em; }

/* margin-left 1.4 makes it so at least in Safari, the numbers don't extend past the bounding box to the left. The ol's don't left align as well as I would like in Chrome or Firefox but I need to satisfy the Safari issue. */
ul {
  list-style: disc; }

ol {
  list-style: decimal; }

footer p {
  color: #565656;
  font-size: 87.5%; }
footer a {
  color: #649752;
  -webkit-transition: all .15s ease-in-out;
  -moz-transition: all .15s ease-in-out;
  -o-transition: all .15s ease-in-out;
  transition: all .15s ease-in-out; }
  html.no-touch footer a:hover {
    color: white; }

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

/* Apply a natural box layout model to all elements see http://paulirish.com/2012/box-sizing-border-box-ftw */
div,
article,
section,
header,
footer,
nav,
figure,
li {
  position: relative; }

/* For absolutely positioning elements within containers  */
html {
  background: #282828; }

body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%; }

header, footer {
  width: 100%;
  padding: 27px 20px;
  margin: 0; }
  @media screen and (min-width: 50em) {
    header, footer {
      margin-top: 22px;
      padding: 49px 20px; } }

img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 2em;
  margin-top: 2em;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15); }
  img:last-child {
    margin-bottom: .75em; }
  img.logo {
    width: 183px;
    margin-bottom: 0;
    margin-top: 0;
    box-shadow: none; }

/* img { display:block; } This is to get rid of the weird, tiny 4px white space between the images horizontally */
img + p {
  margin-top: 2em; }

.cp_embed_iframe {
  margin-top: 1em;
  margin-bottom: .75em; }

.outer-wrapper {
  width: 100%;
  max-width: 50em;
  min-width: 20em;
  text-align: left;
  margin: 0 auto; }

.question-list {
  max-width: 100%;
  padding-left: 0;
  list-style: none;
  margin-left: 0; }

.question {
  border-top: 1px solid #212121;
  cursor: pointer; }
  .question:last-child {
    border-bottom: 1px solid #212121; }
  .question a {
    display: block;
    overflow: hidden;
    padding: 34px 20px;
    -webkit-transition: all .15s ease-in-out;
    -moz-transition: all .15s ease-in-out;
    -o-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out; }
    html.no-touch .question a:hover {
      background-color: #2d2d2d; }

article {
  border-top: 1px solid #212121;
  padding: 34px 20px; }
  article:last-child {
    border-bottom: 1px solid #212121; }

/*.project-wrapper { 
	margin:2em 0; 
	cursor:pointer;
	text-align:left;
	-webkit-transition: all .15s ease-in-out;
  	-moz-transition: all .15s ease-in-out;
  	-o-transition: all .15s ease-in-out;
  	transition: all .15s ease-in-out;
	&:before { 
		content:'';
		background-color:rgba(20,20,20,0.875);
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height: 100%; 						
		-webkit-transition: all .15s ease-in-out;
  		-moz-transition: all .15s ease-in-out;
  		-o-transition: all .15s ease-in-out;
  		transition: all .15s ease-in-out;
	}
	&:last-child { margin-bottom:0; }
}
.light-image {
	&:before {
		background-color:rgba(20,20,20,0.96);
	}
}*/
/*.experiment-info { 
	position:absolute;
	top:0;
	left:0;
	padding:1.25em;
	-webkit-transition: all .15s ease-in-out;
  	-moz-transition: all .15s ease-in-out;
  	-o-transition: all .15s ease-in-out;
  	transition: all .15s ease-in-out;
	p { padding:0; color:rgba(200,200,200,1.0);
		&.experiment-question { color:rgba(100,100,100,1.0); }
	}
	@media screen and (min-width: $width-small) { 
		padding: 2em;
	}
	@media screen and (min-width: $width-medium) { 
		padding: 3em;
	}
}*/
/*.experiment-number {
font-family: OpenSans, sans-serif;
font-size: 14px;
color: #565656;
letter-spacing: 1px;
line-height: 19px; }
.experiment-title { font-size: 200%; font-weight:700; line-height:1.2; margin-top:0.25em; 
	@media screen and (min-width: $width-medium) {
		font-size: 275%; 
	}
}*/
/*.experiment-question { 
	display:none;
	font-size:130%;
	margin-top:1.25em;
	line-height:1.6;
	@media screen and (min-width: $width-small) {
		display:block;
	}
	@media screen and (min-width: $width-medium) {
		font-size:200%;
		margin-top:2.5em;
		line-height:1.6;
	}
}*/
/*html.no-touch {
	.project-wrapper {
		&:hover {
			.experiment-info { opacity:0; }
			&:before { background-color:rgba(20,20,20,0.0); } 
		}
	}
}*/