/**
 * @license
 * MyFonts Webfont Build ID 3131504, 2015-11-25T15:47:23-0500
 * 
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are 
 * explicitly restricted from using the Licensed Webfonts(s).
 * 
 * You may obtain a valid license at the URLs below.
 * 
 * Webfont: MeliorLTPro by Linotype
 * URL: http://www.myfonts.com/fonts/linotype/melior/pro-roman/
 * Copyright: Part of the digitally encoded machine readable outline data for producing the Typefaces provided is copyrighted © 1985 - 2007 Linotype GmbH, www.linotype.com. All rights reserved. This software is the property of Linotype GmbH, and may not be repro
 * Licensed pageviews: 250,000
 * 
 * Webfont: MeliorLTPro-Italic by Linotype
 * URL: http://www.myfonts.com/fonts/linotype/melior/pro-italic/
 * Copyright: Part of the digitally encoded machine readable outline data for producing the Typefaces provided is copyrighted © 1985 - 2007 Linotype GmbH, www.linotype.com. All rights reserved. This software is the property of Linotype GmbH, and may not be repro
 * Licensed pageviews: 500,000
 * 
 * Webfont: NeographikMT by Monotype 
 * URL: http://www.myfonts.com/fonts/mti/neographik-mt/neographik-mt/
 * Copyright: Digitized data copyright Monotype Typography, Ltd 1991-2001. All rights reserved. Neographik is a trademark of The Monotype Corporation PLC. 
 * Licensed pageviews: 250,000
 * 
 * 
 * License: http://www.myfonts.com/viewlicense?type=web&buildid=3131504
 * 
 * © 2015 MyFonts Inc
*/


/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/2fc870");

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

html,
body {
	min-height: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.preload {
	display: none;
}

body,
.upper-gradient,
.lower-gradient {
	background: #95999C;
	background: -moz-linear-gradient(-45deg,  #95999C 0%, #77787D 100%);
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#95999C), color-stop(100%,#77787D));
	background: -webkit-linear-gradient(-45deg,  #95999C 0%,#77787D 100%);
	background: -o-linear-gradient(-45deg,  #95999C 0%,#77787D 100%);
	background: -ms-linear-gradient(-45deg,  #95999C 0%,#77787D 100%);
	background: linear-gradient(135deg,  #95999C 0%,#77787D 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#95999C', endColorstr='#77787D',GradientType=1 );	
}

img {
	max-width: 100%;
}

::selection {
  background: #95999C; /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: #95999C; /* Gecko Browsers */
}

.image-field ::selection {
	background: transparent;
}

.image-field ::-moz-selection {
	background: transparent;
}


.article {
	background: #fff;
}

.gradient {
	position: relative;
	pointer-events: none;
	min-height: 100vh;
	overflow-x: hidden;
}

.article .gradient {
	min-height: 0px;
}



.upper-gradient,
.lower-gradient {
	padding-top: 100px;
	margin-top: -100px;
	overflow: hidden;
	position: absolute;
	top: -100px;
	left: 0;
	bottom: -100px;
	right: 0;
	width: 100%;
	height: calc(100% + 200px);
	z-index: -1;
}

.lower-gradient {
	margin: 100px 0 0;
}

.blur {
	width: 100%;
	height: 240px;
}

.blur.bottom {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+2,0.26+34,1+100 */
	background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0) 2%, rgba(255,255,255,0.26) 34%, rgba(255,255,255,1) 100%);/* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(2%,rgba(255,255,255,0)), color-stop(34%,rgba(255,255,255,0.26)), color-stop(100%,rgba(255,255,255,1)));/* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 2%,rgba(255,255,255,0.26) 34%,rgba(255,255,255,1) 100%);/* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 2%,rgba(255,255,255,0.26) 34%,rgba(255,255,255,1) 100%);/* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 2%,rgba(255,255,255,0.26) 34%,rgba(255,255,255,1) 100%);/* IE10+ */
	background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 2%,rgba(255,255,255,0.26) 34%,rgba(255,255,255,1) 100%);/* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );/* IE6-9 */
	margin-top: -230px;
}

.blur.top {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+0,0.26+66,0+98 */
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0.26) 66%, rgba(255,255,255,0) 98%, rgba(255,255,255,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(66%,rgba(255,255,255,0.26)), color-stop(98%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.26) 66%,rgba(255,255,255,0) 98%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.26) 66%,rgba(255,255,255,0) 98%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.26) 66%,rgba(255,255,255,0) 98%,rgba(255,255,255,0) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0.26) 66%,rgba(255,255,255,0) 98%,rgba(255,255,255,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}


/* Transitions */
a,
.button,
.reveal,
.authors,
.title,
.page,
strong,
p,
#menu,
#top h2,
#top h3,
.figure-link,
.article-list .title span,
.article-list a img,
.availability,
.cover {
	-webkit-transition: color .2s ease, opacity .2s ease;
	-moz-transition: color .2s ease, opacity .2s ease;
	-o-transition: color .2s ease, opacity .2s ease;
	transition: color .2s ease, opacity .2s ease;
}

.module-link,
.wrapper,
.active,
.image-field .space:hover img,
canvas,
#top,
.video img,
.issues-list li {
	-webkit-transition: opacity .5s ease;
	-moz-transition: opacity .5s ease;
	-o-transition: opacity .5s ease;
	transition: opacity .5s ease;
}

.tagline,
.tagline li,
.reveal p {
	-webkit-transition: opacity 1s ease;
	-moz-transition: opacity 1s ease;
	-o-transition: opacity 1s ease;
	transition: opacity 1s ease;
}

.tagline,
.tagline a {
	z-index: 999;
	position: relative;
	pointer-events: auto;
}

/* Typography */

@font-face {
	font-family: 'Melior';
	font-style: normal;
	font-weight: normal;
	src: url('webfonts/2FC870_0_0.eot');
	src: url('webfonts/2FC870_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/2FC870_0_0.woff2') format('woff2'),url('webfonts/2FC870_0_0.woff') format('woff'),url('webfonts/2FC870_0_0.ttf') format('truetype');
}
 
@font-face {
	font-family: 'Melior';
	font-style: italic;
	font-weight: normal;
	src: url('webfonts/2FC870_1_0.eot');
	src: url('webfonts/2FC870_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/2FC870_1_0.woff2') format('woff2'),url('webfonts/2FC870_1_0.woff') format('woff'),url('webfonts/2FC870_1_0.ttf') format('truetype');
}
  
@font-face {
	font-family: 'Neographik MT';
	font-style: normal;
	font-weight: normal;	
	src: url('webfonts/2FC870_2_0.eot');
	src: url('webfonts/2FC870_2_0.eot?#iefix') format('embedded-opentype'),url('webfonts/2FC870_2_0.woff2') format('woff2'),url('webfonts/2FC870_2_0.woff') format('woff'),url('webfonts/2FC870_2_0.ttf') format('truetype');
}


.masthead h1, 
.nav, 
.issues h2.number, 
.issues .wrapper h2.number {
	font: 32px/36px 'Neographik MT';
	color: #fff;
	word-spacing: -8px;
}

.article-module .number {
	font: 32px/42px 'Neographik MT';
}

.fancybox-overlay .number,
.issues-list .number,
.issues .wrapper h2.grey-matter,
.detail .article-module .number,
.filed-under .article-module .number,
.issues.issue .wrapper h3.grey-matter {
	font: 24px/26px 'Neographik MT';
}

.issues-list .number {
	line-height: 20px;
}

.article h2,
.article h3 p,
.support h2,
.contact-submissions h2,
.about h2,
.issues h2,
.people h2,
.filed-under h2,
.article-module h2,
.article-module h3,
.issues.issue .wrapper h4 {
	font: 32px/34px "akzidenz-grotesk", sans-serif;
	word-spacing: -3px;
	letter-spacing: 0;
	font-weight: 500;
	padding-right: 160px;
}

.tagline li, 
.fancybox-overlay h2, 
.fancybox-overlay h3, 
.body h1, 
.footnotes h1, 
.support .wrapper h3, 
.support .wrapper li, 
.issues-list .season, 
.authors, 
.article-list, 
.issues.article .body h1,
.issues.article .body h2,
.issues.article .body h3,
.issues.article .body h4,
.issues.article .body h5,
.issues.issue .wrapper h3,
.advertisement h3,
.people h3,
.people h3 {
	font: 20px/22px "akzidenz-grotesk", sans-serif;
	font-weight: 500;
}

.body sup,
.page,
.figure-link,
.people .article-module h2,
.people .article-module h3,
.filed-under .article-module h2,
.filed-under .article-module h3,
.byline {
	font: 17px/20px "akzidenz-grotesk", sans-serif;
	font-weight: 500;
	word-spacing: -1px;
}


em {
	font-style: italic;
}


.byline {
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 1px;
}


body, 
.footer, 
.col.authors, 
.people .wrapper .links h3, 
.people .wrapper .links p, 
.body .img .caption, 
.wrapper .img .caption p, 
.hero .caption p, 
.mit-press, 
.footer .col_1 strong, 
.type,
#top h2,
#top h3 {
	font: 14px/18px "akzidenz-grotesk", sans-serif;
	letter-spacing: 0.5px;
	font-weight: 500;
	word-spacing: -2px;
}

.type,
.slideshow-close,
.count, 
.up {
	text-transform: uppercase;
	letter-spacing: 2px;
	font: 12px/16px "akzidenz-grotesk", sans-serif;
	font-weight: 400;
	border-bottom: 0 none;
}

.body, 
.footnotes, 
.text {
	font: 20px/25px "Melior";
	letter-spacing: -0.25px;
	word-spacing: -1px;
}

.footnotes {
	font: 14px/18px "Melior";
	letter-spacing: -0.25px;
	word-spacing: -1px;
	width: 80%;
}

/* Links */

.body a,
.text a {
	border-bottom: 1px solid;
}

.body a:hover,
.text a:hover {
	border-bottom: 1px solid transparent;
}

a:hover,
a:hover strong,
a:hover p,
.footer a:hover,
.masthead a:hover,
.nav a:hover {
	color: #000;
}

/* Header */

.masthead {
	position: relative;
	min-height: 56px;
	margin-bottom: 0;
	margin-top: 80px;
	margin-left: calc(6% - 40px);
	width: 375px;
	z-index: 10;
	pointer-events: none;
}

.masthead a,
.masthead #menu {
	pointer-events: auto;
}

.frontpage .masthead {
	margin-bottom: 20px;
}

.masthead h1 {
	position: absolute;
	left: 40px;
}

.nav {
	display: none;
	position: relative;
	left: 40px;
	top: 45px;
	padding-bottom: 60px;
}

#menu {
	width: 27px;
	height: 27px;
	background-image: url('/common/images/menu.svg');
	background-repeat: no-repeat;
	background-size: 22px;
	background-position: top left;
	position: absolute;
	left: 0;
	top: 5px;
	cursor: pointer;
}

#menu:hover {
	background-image: url('/common/images/menu-hover.svg');
}

.tagline li {
	position: fixed;
	color: #D6D6D6;
	font-weight: 500;
	z-index: 0;
	opacity: 1;
}

.tagline.invisible li {
	opacity: 0;
}

.tagline li:nth-child(1){
	top: 15px;
	left: 15px;
}

.tagline li:nth-child(2){
	top: 15px;
	right: 15px;
}

.tagline li:nth-child(3){
	bottom: 15px;
	left: 15px;
}

.tagline li:nth-child(4){
	bottom: 15px;
	right: 15px;
}

/* Image field */

.image-field {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
}

.space {
    display: block;
    width: 8%;
    width: calc((100% - 160px)/8);
    height: 200px;
    height: calc(20vh - 20px);
    float: left;
    margin: 10px;
    text-align: center;
}

.space a {
	position: relative;
	opacity: 0.1;
	display: inline-block;
	padding: 10px;	
	max-height: 100%;
	max-width: 100%;	
}

canvas {
	opacity: 0;
	position: absolute;	
}

.space img {
	max-height: 85%;
	max-height: calc(20vh - 40px);
	max-width: 100%;
	opacity: 1;
}

.space .active {
	opacity: 0.3;
}
.space a:hover,
.space a:hover canvas,
.space .active canvas {
	opacity: 1;
}

/* Article modules */

.module-link {
	margin: 20px 40px 20px 0;
	width: 340px;
	margin: 0 20px 40px;
	height: 460px;
	float: left;
	display: block;
	pointer-events: auto;
}

.detail .module-link {
	margin: 20px 20px 20px 0;
}

.wrapper > .module-link {
	margin-left: 0;
}

.module-link .greymatter {
	height: auto;
}

.module-link .issue {
	padding: 12px 15px;
	height: 100%;
	pointer-events: auto;
}

.detail .module-link,
.filed-under .module-link {
	width: 200px;
	height: 280px;
}

.detail .article-module.issue,
.filed-under .article-module.issue {
	padding: 12px 12px;
}


.module-link img {
	max-width: 100%;
	margin-bottom: 7px;
}

.module-link:hover {
	opacity: 0.5;
}

.module-link .number {
	color: #fff;
	margin-bottom: 2px;
}

.module-link h2,
.module-link h3 {
	font-weight: 500;
	margin: 0 !important;
	padding-right: 0;
}

.fancybox-overlay h2,
.fancybox-overlay h3 {
	font-weight: 500;
	max-width: 750px;
}

.article-module h3,
.fancybox-overlay h3 {
	color: #fff;
}

.article-module .type {
	margin-top: 6px;
}

.filed-under .article-module .type,
.detail .article-module .type {
	margin-top: 3px;
}

.fancybox-overlay .number,
.fancybox-overlay h3,
.fancybox-overlay .button {
	color: #fff;
}

/* General styles */

.wrapper {
	margin: 0px 6% 0;
	position: relative;
	overflow: hidden;/* For floated elements */
}

.issue .wrapper {
	overflow: visible;
}

.people.detail .wrapper {
	width: 85%;
}

.frontpage .wrapper {
	width: 88%;
}

.wrapper,
.text {
	width: 750px;
	margin-right: 0;
	min-height: 20px;
	pointer-events: none;
	z-index: 999;
}

 .upper-gradient + .wrapper {
 	margin-top: -40px;
}

 .gradient .wrapper {
	float: left;
	min-height: 150px;
}

.blur.top + .wrapper {
	float: none;
}

.footer {
	font-weight: 500;
	margin: 100px 6% 0;
	padding-bottom: 100px;
	overflow: hidden;
	position: relative;
	width: 750px;
	clear: both;
	pointer-events: none;
	z-index: 1;
}

.footer a,
.people li,
.support p,
.contact-and-submissions p,
.about p,
.support li,
.support a,
.contact-and-submissions a,
.contact-and-submissions li,
.about li,
.about a,
.links, 
.article-list li span {
	pointer-events: auto;
}

.footer .col {
	width: calc((90% - 180px) / 4);
	float: left;
	color: #fff;
}

.footer .col + .col {margin-left: 70px;
}


.footer .col_2 {
	width: calc(((90% - 180px) / 4) + 50px);
}

.footer .col_3 {
	margin-left: 20px !important;
}

.footer p {
	margin: 0;
}

.footer br + p {
	margin-top: 15px;
}

.footer strong {
	color: #fff;
	display: block;
}

.footer a {
	color: #fff;
	font-weight: 400;
}

/* Issues */
.issues-list {
    margin: 40px 4% 0;
    width: 80%;
    position: relative;
    z-index: 1;
}

.issues-list .number {
	width: 30px;
	color: #fff;
	padding-left: 20px;
	padding-right: 20px;
}

.issues-list .season, .issues-list .authors {
	width: 30%;
}

.issues-list .authors {
	width: 40%;
	font-weight: 400;
}

.issues-list li {
	padding: 15px 15px 11px;
	overflow: hidden;
}

.issues-list a:hover li {
	opacity: 0.6;
}

.issues-list .col {
	float: left;
	margin-right: 40px;
}

.issue-title {
    /* color: #fff; */
    margin-bottom: 0px;
}

.issue-title p {
	margin: 0;
}

/* Issue Detail */

.issues h2.number,
.issues .detail h2.number {
	margin: 0;
}

.heading {
	margin-bottom: 20px;
}

#top {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 10px 6% 8px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+42,ffffff+100&1+42,0.73+69,0.51+91,0+100 
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 42%, rgba(255,255,255,0.73) 69%, rgba(255,255,255,0.51) 91%, rgba(255,255,255,0) 100%)
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 42%,rgba(255,255,255,0.73) 69%,rgba(255,255,255,0.51) 91%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 42%,rgba(255,255,255,0.73) 69%,rgba(255,255,255,0.51) 91%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );/* IE6-9 */
    opacity: 0;
    z-index: -1;
    display: none;
}

/*#top.footnotes {
background: -moz-linear-gradient(top,  rgba(173,176,179,1) 0%, rgba(173,176,179,1) 51%, rgba(173,176,179,0.98) 52%, rgba(255,255,255,0) 100%);
background: -webkit-linear-gradient(top,  rgba(173,176,179,1) 0%,rgba(173,176,179,1) 51%,rgba(173,176,179,0.98) 52%,rgba(255,255,255,0) 100%);
background: linear-gradient(to bottom,  rgba(173,176,179,1) 0%,rgba(173,176,179,1) 51%,rgba(173,176,179,0.98) 52%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#95999C', endColorstr='#00ffffff',GradientType=0 );
}*/

#top.show {
	opacity: 1;
	z-index: 9999;
	display: none;
	cursor: pointer;
}

#top .up {
	width: 11px;
	height: 13px;
	float: left;
	margin-left: -30px;
	margin-right: 10px;
	background-image: url('/common/images/arrow-top-sm-black.svg');
	background-repeat: no-repeat;
	background-position: center;
}

#top h2, #top h3 {
	display: inline-block;
	padding: 0 10px 0 0;
}

#top a:hover h2 {
	color: #fff !important;
}

#top a:hover h3 {
	color: #000;
}

.article-availability {
	font-weight: 400;
	margin: 20px 0 40px;
}

.issues .wrapper h2.grey-matter {
	margin: 60px 0 0;
}

.issues.issue .wrapper h3.grey-matter {
	margin-top: 40px;
}

h2.grey-matter + ul {
	margin-top: -10px;
}


span.abstract,
span.full {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 10px;
	background: #000;
	margin-right: 10px;
}

span.full {
	background: #eee;
}

.article-list {
	width: 640px;
	margin-top: 40px;
}

.article-list .authors {
	color: #fff;
	font-weight: 500;
}

.article-list a:hover .authors {
	color: #000;
}

.article-list a:hover .title span,
.article-list a:hover .availability  {
	color: #fff;
}

.article-list a:hover img {
	opacity: 0.5;
}

.article-list .full,
.article-list .abstract {
	margin-bottom: 1px;
	margin-left: 2px;
}

.article-list li {
	margin: 20px 0
}

.article-list img {
	max-width: 240px;
	margin: 0 0 4px;
}

.mit-press {
	overflow: hidden;
	width: 310px;
	position: absolute;
	right: -30%;
	pointer-events: auto;
}

.mit-press strong {
	font-weight: 500;
}

.mit-press,
.mit-press p {
	margin: 0;
	font-weight: 400;
	color: #fff;
}

.mit-press .cover {
	float: left;
	width: 60px;
	margin-right: 10px;
}

.mit-press img {
	width: 54px;
	border: 3px solid #fff;
	float: left;
}

.mit-press .purchase {
	width: 185px;
	float: left;
}

.mit-press:hover .cover {
	opacity: 0.6;
}

/* Article */

.article h2,
.article h3 {
	font-weight: 500;
	margin: 0;
}

.article h3 {
	color: #fff;
}

.hero {
	margin: 30px 0;
	width: 100%;
	float: left;
	text-align: center;
}

.video:hover img {
	opacity: 0.6;
}

.text {
	pointer-events: none;
}

.hero img,
.hero .caption span,
.text span {
	pointer-events: auto;
}

.image-wrapper {
	position: relative;
}

.play {
    width: 60px;
    height: 70px;
    background: url('/common/images/play.svg');
    position: absolute;
    left: 50%;
    margin-left: -30px;
    top: 50%;
    margin-top: -35px;
}

.article .hero img {
	width: auto !important;
	max-width: 100%;
	max-height: 480px;
	height: auto !important;
}

.hero.video iframe {
	display: none;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -320px;
	width: 640px;
	max-height: 427px;
}

.article .links {
	margin: 30px 0;
	width: calc(23% - 100px);
	margin-top: 0;
	float: right;
	margin-right: 100px;
	color: #fff;
	font-weight: 400;
	padding-left: 30px;
	position: relative;
	z-index: 999;
}


.slideshow-controls {
    position: fixed;
    display: none;
    z-index: 99999;
    pointer-events: auto;
}

.slideshow-close {
    position: fixed;
    right: 20px;
    padding-bottom: 3px;
    top: 20px;
    cursor: pointer;
    height: auto;
}

.slideshow-prev,
.slideshow-next {
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    cursor: pointer;
    display: block;
    z-index: 99999999;
}

.slideshow-prev {
	background-image: url('/common/images/arrow-left-sm-black.svg');
	margin-right: 7px;
	float: left;
	margin-top: 0px;
}

.slideshow-next {
	background-image: url('/common/images/arrow-right-sm-black.svg');
	margin-left: 6px;
	float: right;
	margin-top: 0px;
}

.button {
	display: block;
	max-width: 300px;
}


.body {
	width: 100%;
}

.body em,
.citation em,
.caption em,
.fancybox-title em,
.footnotes em {
	font-style: italic;
}

p {
	margin: 13px 0;
}

.title p,
h2 p,
h3 p {
	margin: 0;
}

.body p {
	text-indent: 0;
	text-align: left;
	margin: 15px 0px;
}

.body p span,
.footnotes li span,
.article-list li img,
.article-list li a,
h1,
h2 span,
h3 span,
h4,
h5 {
	pointer-events: auto;	
}

.body h1 + p,
.body h2 + p,
.body h3 + p,
.body h4 + p,
.body h5 + p {
	margin: 0;
}

.img {
	margin: 20px 0 0;
}

.img.nofield {
	display: none;
}

.body img {
	max-width: 100%;
	margin: 0 auto;
	display: block;
}

.body .img .caption, .wrapper .img .caption p, .hero .caption p, .fancybox-title-over-wrap {
	font-weight: 400;
	margin: 10px 0 20px;
	max-width: 360px;
	text-align: left;
}

.fancybox-title-over-wrap {
	margin-top: 0;
}

.caption em {
	font-style: italic;/*Need Italic*/
}

.body blockquote {
	margin: 30px 60px;
}


.body sup {
	font-weight: 500;
	vertical-align: super;
	margin-left: 0;
	margin-right: 2px;
	line-height: 11px;
}

.body sup a {
	border-bottom: 0 none;
	margin-right: 1px;
}

.figure-link {
	font-weight: 500;
	color: #bbb;
	margin-right: 6px;
}

.page {
	display: inline;
	overflow: hidden;
	color: #bbb;
	font-weight: 500;
	width: auto;
	opacity: 1;
	padding: 0 5px;
}

.figure-link {
	cursor: pointer;
}

.body h1,
.footnotes h1 {
	margin: 60px 0 2px;	
	font-weight: 500;
}

.body h1:first-child {
	margin-top: 0;
}

h1.abstract {
	text-transform: uppercase;
	letter-spacing: 0.5px;
	display: inline;
	margin-right: 10px;
}

h1.abstract + p {
	display: inline;
}

.footnotes ol {
	list-style-type: none;
	margin-left: 0;
}

.footnotes ol > li {
	counter-increment: customlistcounter;
  	clear: both;
	margin: 16px 0;
}

.footnotes ol > li:before {
	content: counter(customlistcounter) ". ";
	float: left;
	font-weight: 500;
	margin-right: 4px;
}

.footnotes ol:first-child {
	counter-reset: customlistcounter;
}

.citation strong {
	cursor: pointer;
}

.citation .reveal p {
	opacity: 0;
	margin: 0;
	max-height: 0;
	overflow: hidden;
}

.citation.open .reveal p {
	opacity: 1;
	max-height: 400px;
}

.advertisement {
    background: rgba(191, 191, 191, 0.21);
    padding: 20px;
    margin: 80px 0;
    pointer-events: auto;
}

.advertisement p {
	margin: 5px 0;
}

/* Pages */

.support .wrapper h2,
.contact-submissions .wrapper h2,
.about .wrapper h2,
.issues .wrapper h2,
.people .wrapper h2,
.filed-under .wrapper h2 {
	margin-bottom: 15px;
}

.issues.issue .wrapper h2 {
	margin-bottom: 0;
}

.filed-under .wrapper h2 .tag {
	color: #fff;
}

.issues.article h2 {
	margin-bottom: 0;
}

.issues.article .body h1,
.issues.article .body h2,
.issues.article .body h3,
.issues.article .body h4,
.issues.article .body h5 {
	color: #000;
	margin-top: 25px;
	text-transform: uppercase;
	margin-bottom: 5px;
	letter-spacing: 0.5px;
}

.issues.article .wrapper h2 + p {
	text-indent: 0;
	margin-top: 0;
}

.support .body p + h3 {
	margin-top: 40px;
}

/* Support */
.support .wrapper h3,
.support .wrapper li{
	margin: 4px 0;
}

.people .wrapper .links h3,
.people .wrapper .links p {
	margin: 0 0;
	font-weight: 400;
}

.support ul {
	color: #fff;
	margin: 0 0 40px;
}


/* People */
.people .wrapper li {
	font-weight: 400;
	color: #fff;
	width: 100%;
}

.people .wrapper h3 + ul {
	margin-top: 10px;
}

.people .wrapper ul {
	margin-bottom: 40px;
	-webkit-column-count: 4;
	-moz-column-count: 4;
	-o-column-count: 4;
	column-count: 4;
	-webkit-column-gap: 25px;
	-moz-column-gap: 25px;
	-o-column-gap: 25px;
	column-gap: 25px;
	max-width: 750px;
}

.editor li {
	display: inline-block;
	margin-bottom: 20px;
}

.people .portrait {
	width: auto;
	margin: 0 auto;
	height: 140px;
	display: block;
	background-size: 100%;
	background-size: cover;
	background-position: center;
	margin-bottom: 10px;
}

.people.detail h2 {
	margin-bottom: 0;
}

.people.detail .text {
	float: left;
	max-width: 750px;
	width: 50%;
}

.people.detail .links {
	margin: 30px 0;
	width: 300px;
	margin-top: 0;
	float: right;
	margin-right: 100px;
	color: #fff;
	font-weight: 500;
	padding-left: 30px;
	position: relative;
}

.people.detail .links h3 {
	color: #000;
	margin-top: 10px;
}

.related-articles {
	margin-top: 60px;
}

@media screen and (max-width: 1230px) {
	.article h2, .article h3, .support .wrapper h2, .contact-submissions .wrapper h2, .about .wrapper h2, .issues .wrapper h2, .issues .wrapper h3 p, .people .wrapper h2, .filed-under .wrapper h2, .article-module h2, .article-module h3, .issues.issue .wrapper h3, .issues.issue .wrapper h4 p  {
		font: 24px/26px "akzidenz-grotesk", sans-serif;
		word-spacing: -3px;
		letter-spacing: 0;
		font-weight: 500;
	}

	.people .wrapper h3,
	.detail .article-module h2,
	.detail .article-module h3 {
		font: 17px/20px "akzidenz-grotesk", sans-serif;
		font-weight: 500;
		word-spacing: -1px;
	}



	.module-link {
		width: 260px;
		margin: 0 20px 20px 0;
		height: 340px;
	}


}

@media screen and (max-width: 1000px) {

	* {
		pointer-events: auto;
	}
	
	.upper-gradient .wrapper, 
	.upper-gradient + .wrapper, 
	.lower-gradient .wrapper, 
	.issue .wrapper, 
	.image-field .body, 
	.support .wrapper, 
	.contact-submissions .wrapper, 
	.about .wrapper,
	.people.detail .text, 
	.wrapper, 
	.footer, 
	.text {
		width: 100%;
		margin: 0 auto;
		padding: 0 15px 20px;
		float: none;
	}
	

	
	.text {
		padding: 0;
	}

	.footer {
		margin-top: 60px;
	}

	.frontpage .wrapper,
	.people.detail .wrapper {
		width: 100%;
	}

	.people.detail .text {
		padding: 0;
		width: 100%;
		margin: 0;
	}

	.people.detail .links {
		margin: 40px 0 0;
		padding: 0;
		width: 100%;
	}

	.masthead {
		margin-left: 15px;
		margin-top: 40px;
	}

	.masthead h1,
	.masthead .nav {
		left: 40px;
	}

	.masthead + .module-link {
		margin-left: 15px;
	}

	.figure-link {
		display: none;
	}

	.image-field {
		display: none;
	}	

	.img.nofield {
		display: block;
	}

	.article .hero {
		margin-bottom: 0;
		float: none;
	}

	.article .links	{
		float: none;
		width: 100%;
		padding: 0 15px;
		margin: 0 0 100px;
	}

	.article .hero + .links {
		margin: -40px 0 100px;		
	}

	.mit-press {
		overflow: hidden;
		width: 310px;
		position: relative;
		right: auto;
	}

	.footer .col,
	.footer .col + .col,
	.footer .col_3,
	.footer .col_2,
	.footer .col_1 {
		width: 100%;
		float: none;
		margin: 20px 0 20px !important;
		padding: 0;
	}

	.footer div:nth-child(2) {
		min-height: 170px;
	}
	
	.footer div + div {
		margin: 0;
	}

	.footer div:nth-child(odd) {
		margin-right: 20px;
	}


	.tagline li:nth-child(1){
		top: 8px;
		left: 8px;
	}

	.tagline li:nth-child(2){
		top: 8px;
		right: 8px;
	}

	.tagline li:nth-child(3){
		bottom: 8px;
		left: 8px;
	}

	.tagline li:nth-child(4){
		bottom: 8px;
		right: 8px;
	}

}

@media screen and (max-width: 750px) {
	.people .wrapper .article-module h2, 
	.people .wrapper .article-module h3, 
	.filed-under .wrapper .article-module h2, 
	.filed-under .wrapper .article-module h3, 
	.issues.issue li p  {
		font: 17px/20px "akzidenz-grotesk", sans-serif;
		font-weight: 500;
		word-spacing: -1px;
	}	

		
}

@media screen and (max-width: 650px) {
	.wrapper .article h2, 
	.article-module h2 p, 
	.article h2 p, 
	.article h3, 
	.support .wrapper h2, 
	.contact-submissions .wrapper h2, 
	.about .wrapper h2, 
	.issues .wrapper h2, 
	.people .wrapper h2, 
	.filed-under .wrapper h2 {
		font-size: 24px;
		line-height: 26px;
	}

	.people .wrapper .article-module h2 p, 
	.people .wrapper .article-module h3 p, 
	.filed-under .wrapper .article-module h2, 
	.filed-under .wrapper .article-module h3, 
	.issues.issue li p  {
		font: 17px/20px "akzidenz-grotesk", sans-serif;
		font-weight: 500;
		word-spacing: -1px;
	}	



	.body, 
	.wrapper p, 
	.footnotes ol > li,
	#top h2 p,
	#top h3,
	.issues.article .body h1,
	.issues.article .body h2,
	.issues.article .body h3,
	.issues.article .body h4,
	.issues.article .body h5 {
		font-size: 14px;
		line-height: 18px;
	}


	.body sup, 
	a[rel="page"], 
	.figure-link {
		font-size: 12px;
		line-height: 0px;
		margin: 0 5px 0 0px;
		font-family: "akzidenz-grotesk", sans-serif
	}

	.module-link {
		max-width: 100%;
		width: 100%;
		padding: 10px 0;
		margin: 0;
		height: auto;
		position: relative;
		float: left;
		display: block;
	}

	.article-module.issue {
		height: 100%;
		padding-bottom: 19px;
	}

	.masthead + .module-link {
		margin-left: 0;
	}

	#top {
		padding: 10px 15px;
	}

	#top .up {
		position: absolute;
		right: 12px;
		top: 12px;
		margin: 0;
	}


	.body, 
	.body p {
		text-align: left;
	}

	.body p {
		text-indent: 20px;		
	}
	
	.masthead {
		margin-left: 15px;
		width: calc(100% - 15px);
		margin-top: 20px;
		min-height: 25px;
		margin-bottom: 10px;
	}	

	.masthead h1, 
	.masthead .nav {
		left: 40px;
	}

	.tagline {
		display: none;
	}
	
	.frontpage .wrapper {
		margin-top: 40px;
		padding: 0;
	}


	.frontpage .wrapper .module-link {
		width: 100%;
		margin: 0px 0 40px;
		padding: 0 15px;
		display: block;
		float: none;
	}

	.upper-gradient .wrapper, 
	.upper-gradient + .wrapper, 
	.lower-gradient .wrapper, 
	.issue .wrapper, 
	.image-field .body, 
	.support .wrapper, 
	.contact-submissions .wrapper, 
	.about .wrapper, 
	.people.detail .text, 
	.wrapper, 
	.article .links, 
	.footer {
		padding: 15px;
		float: none;
		margin: 0;
	}

	.people.detail .text {
		padding: 0;
	}

	.article h2, .article h3, .support h2, .contact-submissions h2, .about h2, .issues h2, .people h2, .filed-under h2, .article-module h2, .article-module h3, .issues.issue .wrapper h4 {
		padding-right: 0;
	}

	.people.detail .links {
		margin: 20px 0;
		padding: 0;
		left: 0;
		width: 100%;
	}

	.wrapper.hov {
		pointer-events: none;
	}

	.article .hero {
		float: none;
		margin: 20px 0;
	}	

	.article .hero, .article .links {
		clear: both;
	}

	.article .links {
		margin: -40px 0 60px;
	}

	.issues-list {
		margin: 0 10px 20px;
		width: calc(100% - 20px);
	}

	.issues-list .number {
		padding: 0;
		line-height: 26px;
	}

	.issues-list .col {
		width: 100%;
		float: none;
	}

	.img {
		margin: 20px 0 20px;
	}

	.body img {
		margin: 0;
	}
	
	.body .img .caption, 
	.wrapper .img .caption p, 
	.hero .caption p, 
	.fancybox-title-over-wrap {
		margin: 10px 0 20px;
		display: block;
		text-indent: 0;
	}

	.body blockquote {
		margin: 20px;
	}

	.article-module	{
		width: 100%;
		max-width: 100%;
		height: auto;
		max-height: none;
	}

	.article-list,
	.article-availability {
		position: relative;
		width: 100%;
	}

	.people .wrapper ul {
		margin-bottom: 40px;
		-webkit-column-count: 2;
		-moz-column-count: 2;
		-o-column-count: 2;
		column-count: 2;
		width: 100%;
	}

	.people .wrapper .editors {
		-webkit-column-count: 1;
		-moz-column-count: 1;
		-o-column-count: 1;
		column-count: 1;		
	}

	.people .wrapper .editors li {
		width: calc(50% - 10px);
		display: inline-block;
		vertical-align: top;
	}

	.people .wrapper .editors li:nth-child(even) {
		margin-right: 0;
	}

	.people .portrait {
		width: 100%;
		height: 120px;
	}
	
}