/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

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;
}
/* HTML5 display-role reset for older browsers */
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,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

* {
	box-sizing: border-box;
	transition: all 0.2s;
}

/* *::after, *::before {
	margin: 0;
	padding: 0;
} */


/* actual styling */

/*

colours
	new green: 9bcc94
	green: e2fcf0
	old green: efffaa

*/

body {
	font-size: 16px;
	line-height: 1.5;
  font-family: 'Work Sans', 'Hiragino Sans GB', Microsoft Yahei, 微软雅黑, STXihei, 华文细黑, sans-serif;
	font-weight: 300;
	letter-spacing: 0.02em;
  background-color: #fff;
	color: #111;
}

a {
  color: inherit;
  text-decoration: none;
	border-bottom: 1px solid #9bcc94;
}

a:hover, a:focus, a:active {
  color: #9bcc94;
}

h1, .h1 {
	text-align: left;
	font-weight: 400;
	/* margin-bottom: 1em; */
}

em {
	font-style: italic;
}

u {
	border-bottom: 1px solid #444;
}

img {
	display: block;
	max-width: 100%;
}

figcaption {
	margin-top: 10px;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 300;
	opacity: 0.6;
}

pre, code, mark {
	background-color: #e2fcf0;
	font-family: 'courier new', Hiragino Sans GB, Microsoft Yahei, 微软雅黑, STXihei, 华文细黑, monospace;
}

pre {
	padding: 1.25rem;
}

hr {
	height: 0;
	border: none;
	text-align: center;
	padding: 0;
	background-color: red;
	margin:10px;

}

hr::before {
	content: "• • •"
}

strong, .strong {
	font-weight: 400;
}

#mc_embed_signup input {
	display: block;
	width: 100%;
	padding-bottom: 10px;
	font-family: 'Work Sans', 'Hiragino Sans GB', Microsoft Yahei, 微软雅黑, STXihei, 华文细黑, sans-serif;
	font-size: 1rem;
	font-weight: 300;
	border: none;
	border-bottom: 1px solid #9bcc94;
}

#mc_embed_signup label {
	display: inline-block;
	/* margin-bottom: 1.25rem; */
}

#mc_embed_signup input[type="submit"] {
	background-color: #9bcc94;
	border: none;
	padding: 15px;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 0.6875rem;
}

#mc_embed_signup input[type="submit"]:hover {
	background-color: #bde0b8;
}

.body {
	font-size: 0.875em;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
	  box-sizing: inherit;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

.center {
	text-align: center;
}

.right-align {
	text-align: start;
}

.copy * {
	margin-bottom: 1.25rem;
}

.copy p a, ul a {
	border-bottom: 1px solid #9bcc94;
}

.copy h1 {
	font-size: 1.5rem;
	font-weight: 400;
}

.copy h2 {
	font-size: 1.5rem;
}

.copy ul > li::before {
	content: "·";
	display: inline-block;
	position: relative;
	width: 1.25rem;
	margin-right: -1.25rem;
	left: -1.25rem;
}

.copy blockquote {
	text-align: center;
	font-size: 1.25em;
	quotes: "\201C" "\201D";
	display: inline-block;
  position: relative;
	background: #fcfcfc;
	padding: 2.5em 1.25em 3em;
	margin-top: 2.5rem;
	margin-bottom: 2.5rem;
	min-width: 100%;
}

.copy blockquote:before {
  content: open-quote;
	font-family: serif;
  font-weight: bold;
  position: absolute;
  top: 2.5rem;
  left: 50%;
	color: #9bcc94;
  font-size: 2em;
  line-height: 0.1rem;
  vertical-align: -0.4rem;
}
.copy blockquote:after {
	content: close-quote;
	font-family: serif;
  font-weight: bold;
  position: absolute;
  bottom: 1.25rem;
	right: 47%;
	color: #9bcc94;
	font-size: 2em;
	line-height: 0.1rem;
	vertical-align: -0.4rem;
}

.copy blockquote p {
	margin-top: 0.625rem;
  display: inline;
}

.size-24 {
	font-size: 1.5em;
	line-height: 1.3;
}

.meta {
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 300;
}

.grid-copy > * {
	max-width: 100%;
}

.inline-block {
	display: inline-block;
}

.ul {
	border-bottom: 1px solid #9bcc94;
}

.pale {
	opacity: 0.7;
}

.line-length {
	max-width: 35em;
}

.line-height-1 {
	line-height: 1.2;
}

.lowercase {
	text-transform: lowercase;
}

.wrapper {
	max-width: 90rem; /* 1440px */
}

.margin-auto {
	margin: auto;
}

.margin {
	margin: 1.25rem;
}

.grid-container {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-gap: 1.25em;
}

.grid-container-two {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		grid-gap: 1.25em;
}

.grid-container-copy {
	grid-template-columns: repeat(1, 1fr);
	display: grid;
	grid-gap: 1.25em;
}

/* header */

.header {
	top: 0;
  background-color: #fff;
  /* position: fixed; */
  width: 100%;
  z-index: 3;
	border-bottom: 1px solid #eee;
	overflow: auto;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  /* background-color: #fff; */
}

.header li a {
  display: block;
  padding-top: 20px;
  text-decoration: none;
}

.header li a:hover,
.header .menu-btn:hover {
  /* background-color: #f4f4f4; */
	color: #888;
}

.header .logo {
  display: block;
  float: left;
  font-size: 1em;
	font-weight: 500;
  text-decoration: none;
}

.logo-img {
	max-width: 6.25rem;
	margin-top: -11px;
}

a.logo {
	border-bottom: none;
}

.full-height {
	position: relative;
	min-height: 80vh;
}

.ratio-4-3 {
	position: relative;
	width: 100%;
  padding-top: 61.8%; /* 1:1 Aspect Ratio */
}

.listing-image {
	position: absolute;
	top: 0;
	left: 0;
	max-height: 100%;
	max-width: 100%;
}

/* menu */

.menu a {
	border-bottom: none;
}

.header .menu {
	font-size: .875em;
	text-transform: lowercase;
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.header .burger {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 10px 0px;
  position: relative;
  user-select: none;
}

.header .burger .hr {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .burger .hr:before,
.header .burger .hr:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .burger .hr:before {
  top: 5px;
}

.header .burger .hr:after {
  top: -5px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 370px;
}

.header .menu-btn:checked ~ .burger .hr {
  background: transparent;
}

.header .menu-btn:checked ~ .burger .hr:before {
	-ms-transform: rotate(135deg);
	transform: rotate(135deg);
}

.header .menu-btn:checked ~ .burger .hr:after {
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);

}

.header .menu-btn:checked ~ .burger:not(.steps) .hr:before,
.header .menu-btn:checked ~ .burger:not(.steps) .hr:after {
  top: 0;
}


/* cookies bar */

.cookies-banner {
	display: none;
	background-color: #FFFF94;
	color: #000;
	padding: 15px 0;
	transition: all 1s ease;
}

.cookie-buttons {
	display: block;
	margin-top: 5px;
}

@media (min-width: 25rem) /* 400px */ {
	.cookie-buttons {
		display: inline-block;
		float: right;
		margin-top: -5px;
	}

	#accept-cookies, #reject-cookies {
		margin: 0 5px;
	}
}

.cookies-margin {
	margin: .25rem 1.25rem;
}

#accept-cookies, #reject-cookies {
	background-color: transparent;
	border: 1px solid;
	padding: 5px 7px;
	border-radius: 2px;
}

#accept-cookies:hover, #reject-cookies:hover {
	border: 1px solid rgba(0, 0, 0, .3);
}

.hero {
	border: 2px dashed pink;
}

.post {
	overflow: auto;
	text-align: left;
	padding: 20px;
	max-width: 50em;
	background-color: transparent;
	margin: 20px;
}

.post:hover {
	opacity: 0.9;
	/* background-color: yellow; */
	color: blue;
}

.footer {
	min-height: 20vh;
	background-color: #F9F9F9;
	overflow: auto;
	bottom: 0;
}

.tag {
	font-size: 0.625rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	display: inline-block;
	border-bottom: 1px solid #9bcc94;
}

.tag a:hover, .tag a:active, .tag a:focus {
	opacity: 0.8;
	color: #9bcc94;
}

.tag::before {
	content: "#";
}

.links > li a {
	font-size: 0.625rem;
	display: inline-block;
	letter-spacing: 1px;
	margin-bottom: 4px;
}

.overflow {
	overflow: hidden;
}

.padding {
	padding: 1.25rem;
}

.pb {
	padding-bottom: 1.25rem;
}

.pb-0 {
	padding-bottom: 0.625rem; /* 10px */
}

.pb-2 {
	padding-bottom: 2.5rem; /* 40px */
}

.pb-3 {
	padding-bottom: 3.75rem; /* 60px */
}

.pt {
	padding-top: 1.25rem; /* 20px */
}

.pt-0 {
	padding-top: 0.625rem; /* 10px */
}

.pt-2 {
	padding-top: 2.5rem; /* 20px */
}

.mt {
	margin-top: 1.25rem; /* 20px */
}

.mb-none {
	margin-bottom: 0;
}

.pl {
	padding-left: 1.25rem;
}

.pr {
	padding-right: 1.25rem;
}

.border-top {
	border-top: 1px solid #eee;
}

.block {
	display: block;
}

.fixed {
	position: fixed;
}

.relative {
	position: relative;
}

.vertical-text {
	text-align: center;
}

.promo {
	padding: 1em 1.25rem;
	/* background-color: rgba(155, 204, 148, .1); */
	background-color: #f7f7f7;
}

.pagination-item {
	padding: 20px;
}

.pagination-item:hover, .pagination-item:focus {
  background: #9bcc94;
  color: #fff;
}

.pagination-item:active {
  background: #9bcc94;
}

.pagination-item path {
  fill: currentColor;
}

.pagination-item.is-inactive {
	display: none;
  color: #e4e3e6;
  border: 1px solid currentColor;
  background: transparent;
}

.article-title {
	font-size: 1.5em;
}

.article {
	overflow: auto;
	/* text-align: left; */
	padding: 1.25em;
	width: 100%;
	/* background-color: #fcfcfc; */
	margin: 1.25em 1.25em 0 0 ;
	float: left;
	position: relative;
}

.article a span {
  position: absolute;
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 1;
	opacity: 0.4;
}

.article a span:hover {
	background-color: #9bcc94;
}

.article:hover {
	opacity: 0.9;
	/* background-color: yellow; */
}

.article-more {
	opacity: 0;
}

.article:hover .article-more {
	opacity: 1;
}

a.article {
	display: block;
}

.intro {
	font-weight: 500;
	font-size: 2.25rem;
	line-height: 1.2;
}

.group > .article:first-child {
	/* position: sticky;
	position: -webkit-sticky; */
	/* background-color: red; */
	top: 0;
	height: 200px;
}

.sticky {
	/* background-color: yellow; */
	width: 100%;
}

.right-sticky {
	float: left;
}

.right-sticky > .article {
	max-width: 100%;
}

.latest-issue-image {
	position: relative;
	max-height: 70vh;
	margin: auto;
}

/* CSS grid */

.grid-contributor-name {
	grid-column: 4 / 6;
}

.grid-contributor-piece {
	grid-column: 6 / 11;
}

.right-half {
	grid-column: 1 / 13;
}

.grid-copy:first-child {
	grid-row-start: 1;
}

.grid-meta-left {
	grid-row-start: 2;
}

.grid-meta-right {
	grid-row-start: 3;
}

/* vimeo */

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 25px;
	height: 0;
}
.videoWrapper object,
.videoWrapper embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
	height: auto;
	}

.embed-container iframe,
.embed-container object,
.embed-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* media queries */

@media (min-width: 25rem) /* 400px */ {

	.pb {
		padding-bottom: 1.25rem;
	}

	.pb-2 {
		padding-bottom: 3.75rem; /* 80px */
	}

	.pb-3 {
		padding-bottom: 6.25rem; /* 100px */
	}

	.pt-2 {
		padding-top: 3.75rem;
	}

	.left-sticky {
		width: 33.33%;
		float: left;
		position: -webkit-sticky;
		position: sticky;
		top: -1.25em;
		padding-right: 10px;
	}

	.right-sticky {
		padding-left: 10px;
		float: right;
		width: 66%;
	}

	.grid-container { /* IE fallback */
		column-count: 3;
		max-width: 1440px;
	}

	.grid-container {
		grid-template-columns: repeat(3, 1fr);
	}

	.grid-container-copy {
		column-count: 1;
		max-width: 100%;
	}

	.grid-container-copy {
		grid-template-columns: repeat(12, 1fr);
	}


	.grid-copy-left {
		grid-column: 2 / 4;
	}

	.grid-copy-right {
		grid-column: 11 / 13;
	}

	.grid-meta-left {
		grid-column: 2 / 4;
		grid-row-start: 1;
	}

	.grid-meta-right {
		grid-row-start: 1;
		grid-column: 11 / 12;
	}

	.grid-copy {
		grid-column: 4 / 10;
	}

	.grid-span {
		grid-column: 4 / 10;
	}

	.grid-half.left {
		grid-column: 1 / 7;
	}

	.grid-half.right {
		grid-column: 7 / 13;
	}

	.pagination-item.left {
		grid-column: 1 / 7;
		grid-row-start: 1;
	}

	.pagination-item.right {
		grid-column: 7 / 13;
		grid-row-start: 1;
	}

	.meta-vertical {
		height: 100vh;
		top: 8rem;
		position: absolute;
	}

	.vertical-text {
		/* text-transform: full-width; */
		text-align: left;
		writing-mode: vertical-lr;
		text-orientation: upright;
		text-combine-upright: digits 2;
	}

	.vertical-text.right {
		writing-mode: vertical-rl;
	}
}

@media (min-width: 48rem) /* 768px */ {

	.header ul {
		float: right;
	}
  .header li {
    float: left;
  }
  .header li a {
    padding: 0 20px;
  }
  .header .menu {
    clear: none;
    max-height: none;
  }
  .header .burger {
    display: none;
  }

	.grid-container-copy {
		grid-template-columns: repeat(12, 1fr);
		grid-column-gap: 1.25em;
	}

	.grid-container-two /* IE!! */ {
		column-count: 2;
		max-width: 100%;
	}

	.grid-container-two {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-gap: 1.25em;
	}

	.grid-indent {
		grid-column: 3 / 5;
	}

	.grid-article {
		grid-column-end: span 4;
	}

	.right-half {
		grid-column: 7 / 13;
	}

	.hero {
		padding: 2.5em; /* 40px */
	}

	.grid-contributor {
		grid-column: 5 / 9;
	}

	.grid-contributor-piece {
		grid-column: 6 / 11;
	}

	.grid-half.left {
		grid-column: 4 / 7;
	}

	.grid-half.right {
		grid-column: 7 / 10;
	}

	.pagination-item.left {
		grid-column: 4 / 7;
		grid-row-start: 1;
	}

	.pagination-item.right {
		grid-column: 7 / 10;
		grid-row-start: 1;
	}

}

@media (min-width: 90rem) /* 1440px */ {
	.wrapper {
		margin: 20px auto;
	}

	.mb-none {
		margin-bottom: 0;
	}

}