/* -------------------------------------------------
	THANK YOU FOR THE AWESOME CSS RESET, ERIC MEYER!
	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, main, 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; }
:focus {
	outline: 1px dashed rgba(67,57,106,0.33); }

/* ==========================================================================
	Font Styles
========================================================================== */

@font-face {
	font-family: 'Clarendon URW Narrow Medium';
	src: url(../fonts/ClarendonURWNar-Med.woff2) format('woff2'),
	     url(../fonts/ClarendonURWNar-Med.woff) format('woff');
	font-style: normal;
	font-weight: normal; }
@font-face {
	font-family: 'Clarendon URW Narrow Light';
	src: url(../fonts/ClarendonURWNar-Lig.woff2) format('woff2'),
	     url(../fonts/ClarendonURWNar-Lig.woff) format('woff');
	font-style: normal;
	font-weight: normal; }
body, .logo span, .more {
	font-family: "Avenir Next","Helvetica Neue","Helvetica","Calibri","Arial",sans-serif; }
/* h1, h2, h3, h4, h5, h6, blockquote.pull p, dt, .share a, .post-content section:first-of-type > div > p:first-of-type {
	font-family: "Clarendon URW Narrow Light","Sentinel A","Sentinel B","Calisto MT","Georgia","Garamond","Times",serif; } */
h1, h2, h3 {
	font-family: "Clarendon URW Narrow Medium","Calisto MT","Georgia","Garamond","Times",serif;
	font-weight: 600; }
h4, h5, h6, blockquote.pull p, dt, .share a, .post-content section:first-of-type > div > p:first-of-type {
	font-family: "Clarendon URW Narrow Light","Calisto MT","Georgia","Garamond","Times",serif;
	font-weight: 400; }
pre, code, kbd {
	font-family: "Menlo","Bitstream Vera Sans Mono","DejaVu Sans Mono","Inconsolata","Monaco","Consolas",monospace; }


/* ==========================================================================
	Content Styles
========================================================================== */

* {
	box-sizing: border-box; }
html {
	font-size: 100%; }
body {
	background: #fff;
	color: #333537; }
p, main ul, main ol, dd {
	font-size: 1rem;
	line-height: 1.5;
	margin: 0 0 1.5em; }
h1 {
	font-size: 3rem;
	line-height: 1;
	margin: 0 0 0.5em; }
h2 {
	font-size: 2.5rem;
	line-height: 1.2;
	margin: 0 0 0.6em; }
h3 {
	font-size: 2rem;
	line-height: 1.5;
	margin: 0 0 0.75em; }
h4 {
	font-size: 1.5rem;
	line-height: 1;
	margin: 0 0 1em; }
h5, blockquote p, dt, .post-content section:first-of-type > div > p:first-of-type {
	font-size: 1.25rem;
	line-height: 1.2; }
h5, .post-content section:first-of-type > div > p:first-of-type {
	margin: 0 0 1.2em; }
h6 {
	font-size: 1rem;
	line-height: 1.5;
	margin: 0 0 1.5em; }
main ul, main ol, dl {
	margin-left: 3em; }
main ul {
	list-style: disc; }
main ul ul, main ol ol {
	margin-top: 0.75em;
	margin-bottom: 0.75em; }
main ul ul {
	list-style: circle; }
main ul ul ul {
	list-style: square; }
main ol {
	list-style: decimal; }
main ol ol {
	list-style: lower-alpha; }
main ol ol ol {
	list-style: lower-roman; }
a {
	text-decoration: none;
	transition: all 0.35s cubic-bezier(0.5, -0.7, 0.5, 1.7); }
.post-content a:link, .post-tease p a:link, .links dt a:link, .more a:link, .quote .centered a:link {
	border-bottom: 1px solid rgba(65,151,212,0.33);
	color: #4197d4; }
.post-content a:visited, .post-tease p a:visited, .links dt a:visited, .more a:visited, .quote .centered a:visited {
	border-bottom: 1px dashed rgba(85,87,89,0.33);
	color: #555759; }
.post-content a:hover, .post-content a:focus, .post-tease p a:hover, .post-tease p a:focus,
.links dt a:hover, .links dt a:focus, .more a:hover, .more a:focus, .quote .centered a:hover,
.quote .centered a:focus {
	background: rgba(95,85,131,0.2);
	border-bottom-color: rgba(65,151,212,0);
	color: #43396a; }
.post-content a:active, .post-tease p a:active, .links dt a:active, .more a:active {
	position: relative;
	top: 1px; }
.post-content > p:first-of-type, p.first {
	font-size: 1.25rem;
	line-height: 1.2;
	margin: 0 0 1.2em; }
strong, b {
	font-weight: bold;
	line-height: 1.4; }
em, i {
	font-style: italic; }

aside {
	border-style: solid;
	border-width: 2px 0;
	margin: 0 0 1.5em;
	padding: 0.65em 1em; }
aside :last-child {
	margin: 0; }
aside ul {
	text-align: left; }

.button {
	border: none !important;
	border-radius: 0.75em;
	color: #fff;
	display: inline-block;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
	margin: 0 0.75em 1.5em 0;
	padding: 0.75em 1.5em;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 0 6px rgba(0,0,0,0.5);
	transition: none;
	transition: border-radius 0.35s cubic-bezier(0.5, -0.7, 0.5, 1.7), transform 0.35s cubic-bezier(0.5, -0.7, 0.5, 1.7); }
.button:link, .button:visited {
	color: #fff !important; }
.button.expand {
	display: block;
	margin-right: 0;
	width: 100%; }
.button.inline {
	display: block;
	margin: 0;
	padding: 0.25em 1.5em; }
.centered .button {
	margin: 0.75em; }
.button.primary {
	background: #4197d4;
	background: -moz-linear-gradient(top, #4197d4 0%, #1f73ae 100%);
	background: -webkit-linear-gradient(top, #4197d4 0%, #1f73ae 100%);
	background: linear-gradient(to bottom, #4197d4 0%, #1f73ae 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4197d4', endColorstr='#1f73ae',GradientType=0 ); }
.button.secondary {
	background: #43396a;
	background: -moz-linear-gradient(top, #6f6398 0%, #43396a 100%);
	background: -webkit-linear-gradient(top, #6f6398 0%, #43396a 100%);
	background: linear-gradient(to bottom, #6f6398 0%, #43396a 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6f6398', endColorstr='#43396a',GradientType=0 ); }
.button.tertiary {
	background: #555759;
	background: -moz-linear-gradient(top, #555759 0%, #333537 100%);
	background: -webkit-linear-gradient(top, #555759 0%, #333537 100%);
	background: linear-gradient(to bottom, #555759 0%, #333537 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555759', endColorstr='#333537',GradientType=0 ); }
.button.facebook {
	background: #3b5998; }
.button.twitter {
	background: #00aced; }
.button.linkedin {
	background: #0077b5; }
.button:hover, .button:focus {
	background: #d6b941 !important;
	border-radius: 1.5em;
	cursor: pointer;
	transform: scale(1.1); }
.button:active {
	background: #222324 !important;
	transform: scale(0.9); }
.button i {
	margin-right: 0.25em; }

blockquote {
	border-color: rgba(85,87,89,0.2);
	border-style: solid;
	border-width: 2px 0;
	margin: 0 0 1.5em;
	padding: 0.65em 0 0.65em 3em; }
blockquote p {
	font-style: italic; }
blockquote.pull {
	border-color: rgba(95,85,131,0.2); }
blockquote.pull p {
	color: #43396a;
	font-style: normal;
	letter-spacing: -1px; }
blockquote > p:last-of-type {
	margin: 0; }
blockquote cite {
	display: block;
	font-style: normal;
	line-height: 1.5; }
blockquote cite:before {
	content: "\2014 \2009"; }

table {
	margin: 1.5em 0;
	width: 100%; }
thead th {
	font-size: 0.75rem;
	font-weight: 800;
	line-height: 2;
	padding: 0 5px; }
tbody th, td {
	font-size: 1rem;
	line-height: 1.5em;
	padding: 0.75em 5px;
	text-align: center; }

pre {
	background: rgba(20,20,20,0.85);
	border-radius: 0.2em;
	color: #fff;
	line-height: 1.5;
	margin: 0 0 1.5em 0;
	overflow-x: auto;
	padding: 0.75em; }
code, kbd {
	border-radius: 3px;
	display: inline-block;
	font-size: 0.875em;
	overflow-wrap: normal;
	white-space: pre; }
p code, li code, label code, kbd {
	background: rgba(47,45,43,0.1);
	padding: 0 7px; }
.post-content > p:first-of-type code, p.first code {
	line-height: 1.2; }
pre code {
	line-height: 1.71428571428571; }

main img, main embed, main object, main video {
	height: auto;
	margin: 0 auto;
	max-width: 100%; }
img {
	display: block; }
img.frame {
	background: rgba(255,255,255,0.5);
	border: 1px solid rgba(128,128,128,0.25);
	padding: 5px; }
img.wide, img.full {
	width: 100%; }
.media-wrap {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	margin: 1.5em 0;
	max-width: 100%; }
.media-wrap iframe, .media-wrap object, .media-wrap embed {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%; }

.mute, .breadcrumb, .post-list .post-date, .index-list .post-date, .byline, .quotes cite, .quote-meta .source .button,
.post-tease .post-date {
	font-size: 0.875rem;
	line-height: 1.71428571428571; }
.mute {
	opacity: 0.5; }
.breadcrumb {
	margin: 0 0 1.71428571428571em; }
.caption {
	color: #777981;
	font-size: 0.8rem;
	font-style: italic;
	line-height: 1.875;
	margin: 0 auto 1.875em;
	max-width: 75%;
	text-align: center; }
aside .caption {
	max-width: 100%; }
.post-list .post-date, .index-list .post-date {
	text-transform: uppercase; }
.post-excerpt .button {
	margin: 0; }
.post-excerpt .button a {
	padding: 0 1.5em; }
.button a:hover, .button a:focus, .author-link:hover, .author-link:focus {
	text-decoration: none; }
.post-content .button a {
	padding: 0 3em; }
aside .button a {
	display: block;
	width: 100%; }

label {
	display: block;
	line-height: 1.5; }
.droidplease {
	display: none !important; }
input[type="text"], input[type="email"], input[type="url"], input[type="number"], input[type="tel"],
input[type="search"], input[type="password"], textarea {
	border: none;
	border: 2px solid rgba(0,0,0,0.15);
	display: block;
	font-size: 1rem;
	line-height: 1.25;
	padding: 0.25em;
	margin: 0 0 1.3em;
	transition: transform 0.35s cubic-bezier(0.5, -0.7, 0.5, 1.7), box-shadow 0.35s cubic-bezier(0.5, -0.7, 0.5, 1.7);
	width: 100%;
	-webkit-appearance: none; }
input[type="text"]:hover, input[type="email"]:hover, input[type="url"]:hover, input[type="number"]:hover, input[type="tel"]:hover, input[type="search"]:hover, input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="search"]:focus, input[type="password"]:hover, input[type="password"]:focus, textarea:hover, textarea:focus {
	border-color: #d6b941; }
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="number"]:focus, input[type="tel"]:focus, input[type="search"]:focus, input[type="password"]:focus, textarea:focus {
	box-shadow: 0 0 15px rgba(0,0,0,0.5); }
label.checkbox {
	margin: 0 0 1.5em;
	padding: 0 0 0 2em;
	position: relative; }
label.checkbox input[type="checkbox"] {
	left: 0.75em;
	position: absolute;
	top: 50%;
	transform: scale(1.5) translateY(-50%); }
label code {
	display: inline;
	white-space: pre-wrap;
	word-wrap: break-word; }
.error {
	border-color: #a00 !important;
	margin: 0 !important; }
.errorMsg {
	background: #a00;
	color: #fff;
	margin: 0 0 1em;
	padding: 0.5em; }

.hero {
	background-color: #43396a;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative; }
.hero::after {
	background: -moz-linear-gradient(top,  rgba(255,255,255,0) 67%, rgba(255,255,255,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 67%,rgba(255,255,255,1) 100%);
	background: linear-gradient(to bottom,  rgba(255,255,255,0) 67%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
	bottom: 0;
	content: '';
	display: block;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1; }
.post-tease {
	background: rgba(255,255,255,0.9);
	margin: 0 -3%;
	padding: 0.75em 3% 0;
	width: 106%; }

.post-tease p, .post-tease .columns .with-love {
	margin-bottom: 0; }
.post-tease a:link {
	color: #444; }
.post-tease a:visited {
	/* color: #555759; */ }

article > header {
	background-image: url(../img/uxc-bg.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	width: 100%; }
article > header::after {
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.66) 100%);
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.66) 100%);
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.66) 100%);
	bottom: 0;
	content: '';
	display: block;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a8000000',GradientType=0 );
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1; }
article > header.no-hero::after {
	opacity: 0.15; }
.overlay {
	left: 0;
	position: absolute;
	right: 0;
	z-index: 2; }
article .overlay {
	bottom: 0.75em;
	color: #fff; }
.hero .overlay {
	bottom: 0; }
.overlay h1 {
	line-height: 1;
	margin-bottom: 0.25em;
	text-align: center;
	text-shadow: 0 0 10px rgba(0,0,0,0.75); }
.overlay h1, .overlay h1 a {
	color: #fff;
	display: block;
	transition: none; }
.no-hero .overlay h1, .no-hero .overlay h1 a {
	color: #333537;
	text-shadow: 1px 1px 0 rgba(255,255,255,0.75), 0 0 10px rgba(255,255,255,0.5); }
.overlay h1 a {
	margin: 0 -3%;
	padding: 0 3%;
	width: 106%; }
.overlay h1 a:hover, .overlay h1 a:focus {
	color: #333;
	transform: translate(-4px, -4px);
	transition: all 0.5s cubic-bezier(0.5, -0.7, 0.5, 1.7);
	text-shadow: 1px 1px 0 rgba(255,255,255,0.75),
	             2px 2px 0 rgba(0,0,0,0.05),
	             3px 3px 0 rgba(0,0,0,0.05),
	             4px 4px 0 rgba(0,0,0,0.05); }
.post-tease h1 {
	text-align: left;
	text-shadow: none; }
.post-tease h1 a {
	color: #20608d; }
.post-tease h1 a:hover, .post-tease h1 a:focus {
	/* color: #4197d4; */ }
.overlay .post-info {
	font-size: 0.8rem;
	line-height: 1.875; }
article .overlay .post-info {
	text-shadow: 0 0 5px rgba(0,0,0,0.5); }
.post-info span {
	margin-right: 1.5em; }
.post-info i {
	margin-right: 0.25em; }
.post-info a:link, .post-info a:visited {
	border: none; }
article .post-info a:link, article .post-info a:visited {
	color: #fff; }
.post-notes {
	line-height: 1.5; }
.post-notes a:link {
	border: none; }
.post-notes .byline {
	opacity: 1; }
.post-notes .byline .mute {
	display: block; }
.columns .with-love a {
	border-radius: 0.25em;
	color: #777981;
	display: block;
	padding: 0.75em; }
.with-love a:hover, .with-love a:focus {
	background: #fff;
	color: #4197d4; }
.with-love img {
	display: inline-block;
	height: auto;
	margin: 0;
	max-width: 130px;
	padding: 0;
	width: 100%; }
.with-love p {
	font-size: 0.75rem;
	margin: 0; }
.columns > .with-love {
	text-align: center;
	margin-bottom: 0.75em; }
.share .button {
	margin: 0 0.5em 0.5em 0;
	padding: 0.25em 0.5em; }

.explore {
	padding-bottom: 0; }
.index .explore {
	padding-top: 0; }
.explore ul {
	display: flex;
	list-style: none;
	margin: 0; }
.explore li {
	background-color: #43396a;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	flex-grow: 1;
	overflow: hidden;
	padding: 48% 0 0;
	position: relative; }
.explore a {
	background: rgba(34,35,36,0.8);
	border: 5px solid transparent !important;
	bottom: 0;
	color: #fff !important;
	display: block;
	left: 0;
	position: absolute;
	right: 0;
	top: 0; }
.explore a:hover, .explore a:focus {
	background: rgba(31,115,174,0.8);
	border-color: #fff !important; }
.explore h4 {
	bottom: 0.75em;
	left: 0.75em;
	margin: 0;
	position: absolute;
	right: 0.75em;
	transition: all 0.35s cubic-bezier(0.5, -0.7, 0.5, 1.7); }
.explore a:hover h4, .explore a:focus h4 {
	text-shadow: 0 0 10px rgba(0,0,0,0.75);
	transform: scale(1.05) translateY(-10%); }

.posts, .categories, .post-list, .topic-list, .topic-list ul {
	list-style: none;
	margin: 0 0 1.5em; }
.posts, .post-list, .topic-list, .library, .quotes {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between; }
.posts li {
	margin: 0 0 1.5em; }
.posts a {
	backface-visibility: hidden;
	background: #fff;
	box-shadow: 0 5px 10px rgba(51,53,55,0.25);
	display: block;
	height: 100%;
	padding: 0 0 1px;
	transform: translateZ(0); }
.posts a:hover, .posts a:focus {
	background: #fff;
	border: none;
	box-shadow: 0 15px 30px rgba(51,53,55,0.15);
	transform: scale(1.025) translateY(-10px);
	transition: all 0.35s cubic-bezier(0.5, -0.7, 0.5, 1.7); }
.posts .img {
	background-color: #43396a;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 56.25% 0 0;
	position: relative; }
.posts .img::after {
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 33%, rgba(0,0,0,0.66) 100%);
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 33%,rgba(0,0,0,0.66) 100%);
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 33%,rgba(0,0,0,0.66) 100%);
	bottom: 0;
	content: '';
	display: block;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a8000000',GradientType=0 );
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1; }
.posts h5 {
	bottom: 0.5em;
	color: #fff;
	left: 0.5em;
	margin: 0;
	position: absolute;
	right: 0.5em;
	text-shadow: 0 0 6px rgba(0,0,0,0.5);
	z-index: 2; }
.posts p, .post-list p, .topic-list p, .topic-list ul {
	color: #555759;
	font-size: 0.8rem;
	line-height: 1.875; }
.posts p {
	margin: 0.75em; }
.post-list {
	margin-top: -0.75em; }
.post-list a {
	display: block;
	margin: 0 -0.75em;
	padding: 0.75em; }
.post-list h5 {
	color: #4197d4; }
.post-list h5, .post-list p, .topic-list h4, .topic-list p {
	margin-bottom: 0; }
.post-list a:hover, .post-list a:focus, .quotes a:hover, .quotes a:focus {
	background: rgba(255,255,255,0.5);
	box-shadow: 1px 1px 0 rgba(85,87,89,0.15), 2px 2px 0 rgba(85,87,89,0.15);
	transform: translate(-2px, -2px);
	transition: all 0.35s cubic-bezier(0.5, -0.7, 0.5, 1.7); }
.post-list a:hover h5, .post-list a:focus h5, .quotes a:hover cite, .quotes a:focus cite {
	color: #5f5583; }
.topic-list h4 a {
	color: #222324; }
.topic-list h4 a:hover, .topic-list h4 a:focus {
	color: #4197d4; }
.topic-list ul {
	border-top: 2px solid #aaadb2;
	margin: -2px 0 3.75em; }
.topic-list ul a {
	border-bottom: 1px dotted rgba(170,173,178,0.5);
	color: #4197d4;
	display: block;
	margin-bottom: -1px;
	padding: 0 0.75em;
	transition: all 0.25s ease-in-out; }
.topic-list ul a:hover, .topic-list ul a:focus {
	background: #5f5583;
	color: #fff; }
.index .three h5 a {
	border-bottom: 1px solid transparent;
	color: #4197d4;
	display: block;
	margin-top: -1px;
	transition: color 0.35s ease-in-out; }
.index .three h5 a:hover, .index .three h5 a:focus {
	border-bottom-color: #aaadb2;
	color: #333537; }

.categories {
	font-size: 0.8rem;
	line-height: 1.875; }
.categories a {
	border-bottom: none !important;
	color: #555759;
	display: block;
	margin-left: -0.5em;
	padding: 0 0.5em; }
.categories a:hover, .categories a:focus {
	background: #5f5583;
	color: #fff; }

.index section:first-child h1, .page section:first-child h1, .products section:first-child h1 {
	margin-bottom: 0; }
.products section a:hover img, .products section a:focus img {
	box-shadow: 0 0 20px rgba(0,0,0,0.1);
	transform: scale(1.05);
	transition: all 0.35s cubic-bezier(0.5, -0.7, 0.5, 1.7); }
.product section:first-child h1 {
	margin-bottom: 0.5em;
	text-shadow: 0 0 15px rgba(0,0,0,0.67); }
.product section.dark:first-child img {
	box-shadow: 0 0 30px rgba(0,0,0,0.33); }
.product section:first-child {
	position: relative; }
.product section.dark:first-child::after {
	background: -moz-linear-gradient(top,  rgba(85,87,89,0) 67%, rgba(85,87,89,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(85,87,89,0) 67%,rgba(85,87,89,1) 100%);
	background: linear-gradient(to bottom,  rgba(85,87,89,0) 67%,rgba(85,87,89,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00555759', endColorstr='#555759',GradientType=0 );
	bottom: 0;
	content: '';
	display: block;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 3; }
.product section.dark:first-child .lg-four.columns {
	position: relative;
	z-index: 4; }
.product-nav {
	list-style: none;
	margin: 0;
	text-align: justify; }
.product-nav li {
	display: inline-block;
	line-height: 1.5; }
.product-nav a:link, .product-nav a:visited {
	border: none;
	color: #333537;
	display: block;
	padding: 0.75em;
	text-align: center; }
.product-nav a:hover, .product-nav a:focus {
	background: #333537;
	color: #fff;
	transition: all 0.25s ease-in-out; }

.mc label {
	text-align: left; }

.library, .quotes {
	margin: 0; }
.library li, .quotes li {
	list-style: none;
	margin: 0 0 1.5em; }
.library li {
	text-align: center; }
.library a, .quotes a {
	color: #333537;
	display: block; }
.library a {
	border: none !important; }
.quotes a {
	padding: 0.75em;
	transition: all 0.35s ease-in-out; }
.library img {
	transition: all 0.35s cubic-bezier(0.5, -0.7, 0.5, 1.7); }
.library a:hover, .library a:focus {
	background: none !important; }
.library a:hover img, .library a:focus img {
	box-shadow: 0 3px 15px rgba(0,0,0,0.33);
	transform: scale(1.1); }
.library h5 {
	margin: 0; }
.library-head h3 {
	font-weight: 400;
	line-height: 1;
	opacity: 0.67; }
.byline, .quotes cite {
	opacity: 0.5; }
.book-head h2, .book-head h4 {
	margin: 0; }
.book-head h2 {
	line-height: 1; }
.book-head h4 {
	font-weight: 400;
	line-height: 1.2; }
.book-head .four.columns {
	perspective: 1500px; }
.book-head img {
	margin: 0 auto 1.5em;
	transform-origin: 0 50%;
	transition: all 0.5s cubic-bezier(0.5, -0.7, 0.5, 1.7); }
.book-head a:hover img, .book-head a:focus img {
	transform: rotateY(-18deg); }
.book-meta h5, .quote-meta h5 {
	margin-bottom: 0; }
.quotes blockquote {
	border: none;
	margin: 0;
	padding: 0; }
.quotes p {
	font-size: 1rem;
	font-style: normal; }
.quote .pull {
	border: none;
	margin: 1.5em 0;
	padding: 0.75em 0; }
.quote-meta .source a {
	color: #333435; }
.quote-meta .source img {
	float: left;
	height: auto;
	margin-right: 0.75em;
	max-width: 3em; }
.quote-meta .source h6, .quote-meta .byline {
	margin: 0 0 0 3.75rem; }
.quote-meta .byline {
	font-size: 0.75rem; }
.quote-meta .source .button {
	border-radius: 0.5em;
	font-size: 0.75em;
	line-height: 1.875;
	padding: 0.5em 1em; }
.links {
	margin-left: 0; }
.more {
	font-size: 0.5em;
	font-weight: normal; }

.tags {
	list-style: none;
	margin: 0 0 1.25em; }
.post-info .tags {
	display: inline; }
.tags li {
	display: inline; }
.tags a {
	background: rgba(170,173,178,0.15);
	border-radius: 0.25em;
	color: #333537;
	display: inline-block;
	font-size: 0.8rem;
	margin: 0 0.25em 0.25em 0;
	padding: 0 0.5em;
	transition: all 0.2s ease-in-out; }
.tags a:hover, .tags a:focus {
	background: #5f5583;
	color: #fff;
	text-shadow: 0 0 2px rgba(0,0,0,0.5);
	transform: scale(1.1); }

.share {
	text-align: center; }
.avatar {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	border: 3px solid #fff;
	border-radius: 50%;
	height: 6em;
	width: 6em; }
.author h5 {
	margin-bottom: 0; }
.elsewhere, .author p {
	font-size: 0.8em;
	line-height: 1.875; }


/* ==========================================================================
	Layout Styles
========================================================================== */

.page > header {
	background: #fff;
	border-bottom: 1px solid rgba(85,87,89,0.5);
	box-shadow: 0 5px 0 rgba(0,0,0,0.1);
	position: relative; }
header .logo {
	color: #333537;
	font-size: 1.75rem;
	line-height: 0.67;
	margin: 0;
	padding-left: 2.25em;
	padding-top: 0.33em;
	position: relative; }
header .logo::before {
	background: url(../img/logo.svg) center center no-repeat;
	background-size: contain;
	bottom: 0;
	content: '';
	left: 0;
	position: absolute;
	top: 0;
	transition: all 0.35s cubic-bezier(0.5, -0.7, 0.5, 1.7);
	width: 2em; }
.logo span {
	display: block;
	font-size: 0.8rem;
	font-weight: 200;
	line-height: 1.25; }
header a:hover .logo, header a:focus .logo, header a:hover .logo::before, header a:focus .logo::before {
	 }
header a:hover .logo, header a:focus .logo {
	color: #4197d4; }
header a:hover .logo::before, header a:focus .logo::before {
	transform: scale(1.2); }
header .convo li {
	display: inline; }
.convo a, .convo button {
	display: inline-block;
	font-size: 0.8rem;
	line-height: 1.5;
	padding: 0.5em;
	position: relative; }
.convo a {
	color: #555759;
	perspective: 150px;
	perspective-origin: top; }
.convo button {
	background: #43396a;
	border: none;
	color: #fff; }
.convo i {
	transition: none; }
.convo a::before {
	background: #43396a;
	content: '';
	box-sizing: content-box;
	height: 100%;
	left: -4px;
	padding: 0 4px;
	position: absolute;
	top: 0;
	transition: transform 0.35s;
	transition-timing-function: cubic-bezier(0.5, -0.7, 0.5, 1.7); /* cubic-bezier(0.7,0,0.3,1); */
	transform: rotateX(-90deg);
	transform-origin: top;
	width: 100%;
	z-index: -1; }
.convo a:hover, .convo a:focus {
	color: #fff; }
.convo a:hover::before, .convo a:focus::before {
	transform: rotateX(0deg); }
.convo button:hover, .convo button:focus {
	background: #4197d4;
	cursor: pointer; }
header nav a {
	color: #555759;
	display: block;
	font-weight: 700;
	line-height: 1.5; }
header nav a span, header nav a i { transition: none; }

section {
	background-color: transparent;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
	padding: 1.5em 0;
	width: 100%; }
section div > :last-child:not(input) { margin-bottom: 0; }
.inline-content p:last-child, .inline-content ul:last-child { margin-bottom: 1.5em; }
section.halfpad {
	padding: 0.75em 0; }
section.unpad {
	padding: 0; }
.centered {
	text-align: center; }
.pagewrap {
	margin: 0 auto;
	max-width: 48em;
	width: 90%; }
.index .pagewrap, .products .pagewrap {
	max-width: 60em; }
.article .post-content section .pagewrap, .content-block {
	max-width: 36em; }
section.yellow {
	background: #d6b941; }
section.blue {
	background: #1f73ae;
	background: -moz-linear-gradient(top,  #1f73ae 0%, #4197d4 100%);
	background: -webkit-linear-gradient(top,  #1f73ae 0%,#4197d4 100%);
	background: linear-gradient(to bottom,  #1f73ae 0%,#4197d4 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f73ae', endColorstr='#4197d4',GradientType=0 ); }
section.dark, footer {
	background: #222324;
	background: -moz-linear-gradient(top,  #222324 0%, #555759 100%);
	background: -webkit-linear-gradient(top,  #222324 0%,#555759 100%);
	background: linear-gradient(to bottom,  #222324 0%,#555759 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222324', endColorstr='#555759',GradientType=0 ); }
section.light {
	background: #dde0e3;
	background: -moz-linear-gradient(top,  #dde0e3 0%, #ffffff 100%);
	background: -webkit-linear-gradient(top,  #dde0e3 0%,#ffffff 100%);
	background: linear-gradient(to bottom,  #dde0e3 0%,#ffffff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dde0e3', endColorstr='#ffffff',GradientType=0 ); }
section.medium {
	background: #aaadb2;
	background: -moz-linear-gradient(top,  #aaadb2 0%, #cccfd2 100%);
	background: -webkit-linear-gradient(top,  #aaadb2 0%,#cccfd2 100%);
	background: linear-gradient(to bottom,  #aaadb2 0%,#cccfd2 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaadb2', endColorstr='#cccfd2',GradientType=0 ); }
section.purple {
	background: #43396a;
	background: -moz-linear-gradient(top,  #43396a 0%, #6f6398 100%);
	background: -webkit-linear-gradient(top,  #43396a 0%,#6f6398 100%);
	background: linear-gradient(to bottom,  #43396a 0%,#6f6398 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#43396a', endColorstr='#6f6398',GradientType=0 ); }
.blue, .dark, .purple, footer {
	color: #fff; }
.blue a:link, .dark a:link, .purple a:link, footer a {
	border-color: rgba(214,185,65,0.33);
	color: #d6b941; }
.dark a:visited, .purple a:visited {
	border-color: rgba(170,173,178,0.33);
	color: #aaadb2; }
.blue a:visited {
	border-color: rgba(204,207,211,0.33);
	color: #cccfd3; }
.dark a:hover, .purple a:hover, .dark a:focus, .purple a:focus {
	background: rgba(65,151,212,0.1);
	border-color: rgba(65,151,212,0);
	color: #4197d4; }
.blue a:hover, .blue a:focus {
	background: rgba(67,57,106,0.1);
	border-color: rgba(67,57,106,0);
	color: #43396a; }
.baseline {
	background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 95%, rgba(0,0,0,0.1) 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(95%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.1)));
	background-image: -webkit-linear-gradient(top, rgba(0,0,0,0) 95%,rgba(0,0,0,0.1) 100%);
	background-image: -o-linear-gradient(top, rgba(0,0,0,0) 95%, rgba(0,0,0,0.1) 100%);
	background-image: -ms-linear-gradient(top, rgba(0,0,0,0) 95%,rgba(0,0,0,0.1) 100%);
	background-image: linear-gradient(top, rgba(0,0,0,0) 95%,rgba(0,0,0,0.1) 100%);
	background-position: top center;
	background-repeat: repeat;
	-webkit-background-size: 100% 30px;
	-o-background-size: 100% 30px;
	background-size: 100% 30px; }
.newsletter .button {
	margin-bottom: 0; }
.subscribe input[type="email"] {
	margin-bottom: 0; }
.subscribe h5 {
	line-height: 1.56; }

.search {
	position: relative; }
.search input {
	margin-bottom: 0;
	position: relative;
	width: 90%;
	z-index: 2; }
.search button {
	background: rgba(67,57,106,0);
	border: none;
	color: #fff;
	font-size: 1.25rem;
	padding: 0.18em 0;
	position: absolute;
	right: 0;
	text-align: center;
	top: 0;
	transition: all 0.35s cubic-bezier(0.5, -0.7, 0.5, 1.7);
	width: 10%;
	z-index: 1; }
.search button:hover, .search button:focus {
	background: rgba(67,57,106,0.75);
	cursor: pointer; }
.top-search label {
	text-align: right; }
.top-search input, .top-search label {
	display: inline; }
.top-search input {
	opacity: 0;
	transition: width 0.35s cubic-bezier(0.5, -0.7, 0.5, 1.7), opacity 0.35s cubic-bezier(0.5, -0.7, 0.5, 1.7);
	width: 1px; }
.top-search input:focus, .top-search input:valid {
	opacity: 1; }

footer {
	border-top: 5px solid #d6b941;
	padding: 1.5em 0; }
footer :last-child {
	margin-bottom: 0; }
footer h6 {
	margin-bottom: 0; }
footer h6:not(:first-child) {
	margin-top: 1.5em; }
footer p, footer ul {
	font-size: 0.8rem;
	line-height: 1.875; }
footer a:hover, footer a:focus {
	border-bottom: 1px solid rgba(255,255,255,0.5);
	color: #fff; }
footer ul a {
	transition: none; }
.site-legal {
	color: #aaadb2; }

/* ==========================================================================
	The Grid
========================================================================== */

.row {
	width: 100%; }
.row:before, .row:after {
	clear: both;
	content: '';
	display: table; }
.column, .columns {
	float: left;
	margin-right: 4%;
	position: relative;
	width: 100%; }
.column:last-child, .columns:last-child {
	margin-right: 0; }
.column.centered, .columns.centered {
	float: none;
	margin: 0 auto; }

/* ==========================================================================
	Media Queries
========================================================================== */

@media screen and (max-width: 39.9375em) {
	.inline.button { padding: 0.75em 1.5em; width: 100%; }
	.column, .columns { margin-bottom: 1.5em; }
	.convo { position: relative; }
	header .convo li { display: block; float: left; text-align: center; width: 25%; }
	header .convo:after { clear: both; content: ''; display: table; }
	.convo a { background: #fff; position: relative; z-index: 2; width: 100%; }
	header .convo .top-search { bottom: 0; float: none; left: 0; position: absolute; right: 0; top: 0; width: 100%; }
	.top-search label { background: #fff; float: left; position: relative; width: 75%; }
	.top-search input { margin: 0.275em 5% 0.275em 0; position: relative; }
	.top-search label:focus { z-index: 4; }
	.top-search input:focus, .top-search input:valid { width: 90%; z-index: 4; }
	.top-search button { float: right; width: 25%; }
	.convo i { font-size: 1.25rem; }
	.convo span { display: none; }
	header nav a { line-height: 1.5; }
	.hero { padding: 30em 0 0; }
	.post-hero { padding: 75% 0 0; }
	.no-hero { padding: 75% 0 0; }
	.hero .with-love { display: none; }
	.post-tease .columns { margin-bottom: 0; }
	blockquote.pull { padding-left: 0; text-align: center; }
	blockquote.pull p { font-size: 1.5em; line-height: 1em; }
	blockquote cite { font-size: 0.75em; line-height: 2; }
	.author .avatar { margin: 0 auto 0.75em; }
	.explore ul { display: block; }
	.post-tease p { font-size: 0.8rem; line-height: 1.875; }
	textarea { height: 10.5em; }
	.product section.dark:first-child img { margin-bottom: 1.5em; }
	footer .pagewrap > div { margin-bottom: 1.5em; }
	.library li, .quotes li { margin: 0 0 0.75em; width: 100%; }
	.library li { text-align: left; }
	.library img { float: left; margin: 0 0.75em 0 0; max-height: 4em; width: auto; }
	.library li:after { clear: both; content: ''; display: table; }
}

@media screen and (min-width: 40em) {
	html { font-size: 125%; }
	input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="number"]:focus,
		input[type="tel"]:focus, input[type="search"]:focus, textarea:focus { transform: scale(1.05); }
	textarea { height: 7.5em; }
	.convo i { margin-right: 0.25em; }
	.top-search { background: #43396a; float: right; margin-left: 5px; }
	.top-search label { display: inline-block; padding: 0.2em 0.3em; }
	.top-search input { border: none; font-size: 0.8rem; line-height: 1; margin: 0; padding: 0; }
	.top-search input:focus, .top-search input:valid { padding: 0.25em; transform: none; width: 10em; }
	.top-search button { color: #fff; display: inline-block; margin-left: -1.1em; }
	.top-search input:focus + button, .top-search input:valid + button { margin-left: 0; }
	header nav li { float: left; text-align: center; width: 25%; }
	header nav:after, header:after { clear: both; content: ''; display: table; }
	header nav i { display: block; font-size: 1.5em; }
	.post-hero { padding: 56.25% 0 0; }
	.no-hero { padding: 28.125% 0 0; }
	blockquote.p-left, blockquote.p-right, .caption.p-left, .caption.p-right, aside.p-left,
		aside.p-right { width: 50%; }
	.pull { padding-left: 0; text-align: center; }
	aside, blockquote.p-left, blockquote.p-right { margin: 0.75em 0 2.25em; }
	blockquote.p-left, blockquote.p-right { padding-left: 0; }
	img.p-left, img.p-right { margin: 0.75em 0; }
	.p-left { float: left; margin-right: 3% !important; text-align: left; }
	.caption.p-left { text-align: left; }
	.p-right { float: right; text-align: right; margin-left: 3% !important; }
	.author .avatar { float: left; margin: 0 0.75em 0.75em 0; }
	.explore ul { flex-flow: row wrap; }
	.explore li { width: 50%; }
	.quotes li { text-align: center; width: 48%; }
	.product section.dark:first-child img { margin-bottom: -1.5em; }
	.article-foot { padding: 1.5em 0 1em; }
	.article-foot h5.centered { margin-top: 0.25em; }
	
	.one.column, .one.columns { width: 4.66666666667%; }
  .two.columns              { width: 13.3333333333%; }
  .three.columns            { width: 22%; }
  .four.columns             { width: 30.6666666667%; }
  .five.columns             { width: 39.3333333333%; }
  .six.columns              { width: 48%; }
  .seven.columns            { width: 56.6666666667%; }
  .eight.columns            { width: 65.3333333333%; }
  .nine.columns             { width: 74%; }
  .ten.columns              { width: 82.6666666667%; }
  .eleven.columns           { width: 91.3333333333%; }
  .twelve.columns           { width: 100%; margin-right: 0; }

  /* Offsets */
  .offset-one.column, .offset-one.columns       { margin-left: 8.66666666667%; }
  .offset-two.column, .offset-two.columns       { margin-left: 17.3333333333%; }
  .offset-three.column, .offset-three.columns   { margin-left: 26%; }
  .offset-four.column, .offset-four.columns     { margin-left: 34.6666666667%; }
  .offset-five.column, .offset-five.columns     { margin-left: 43.3333333333%; }
  .offset-six.column, .offset-six.columns       { margin-left: 52%; }
  .offset-seven.column, .offset-seven.columns   { margin-left: 60.6666666667%; }
  .offset-eight.column, .offset-eight.columns   { margin-left: 69.3333333333%; }
  .offset-nine.column, .offset-nine.columns     { margin-left: 78.0%; }
  .offset-ten.column, .offset-ten.columns       { margin-left: 86.6666666667%; }
  .offset-eleven.column, .offset-eleven.columns { margin-left: 95.3333333333%; }
  
  /* Push and pull for better source ordering */
  .push-one.column, .push-one.columns       { left: 8.66666666667%; right: auto; }
  .push-two.column, .push-two.columns       { left: 17.3333333333%; right: auto; }
  .push-three.column, .push-three.columns   { left: 26%; right: auto; }
  .push-four.column, .push-four.columns     { left: 34.6666666667%; right: auto; }
  .push-five.column, .push-five.columns     { left: 43.3333333333%; right: auto; }
  .push-six.column, .push-six.columns       { left: 52%; right: auto; }
  .push-seven.column, .push-seven.columns   { left: 60.6666666667%; right: auto; }
  .push-eight.column, .push-eight.columns   { left: 69.3333333333%; right: auto; }
  .push-nine.column, .push-nine.columns     { left: 78.0%; right: auto; }
  .push-ten.column, .push-ten.columns       { left: 86.6666666667%; right: auto; }
  .push-eleven.column, .push-eleven.columns { left: 95.3333333333%; right: auto; }
  .pull-one.column, .pull-one.columns       { right: 8.66666666667%; left: auto; }
  .pull-two.column, .pull-two.columns       { right: 17.3333333333%; left: auto; }
  .pull-three.column, .pull-three.columns   { right: 26%; left: auto; }
  .pull-four.column, .pull-four.columns     { right: 34.6666666667%; left: auto; }
  .pull-five.column, .pull-five.columns     { right: 43.3333333333%; left: auto; }
  .pull-six.column, .pull-six.columns       { right: 52%; left: auto; }
  .pull-seven.column, .pull-seven.columns   { right: 60.6666666667%; left: auto; }
  .pull-eight.column, .pull-eight.columns   { right: 69.3333333333%; left: auto; }
  .pull-nine.column, .pull-nine.columns     { right: 78.0%; left: auto; }
  .pull-ten.column, .pull-ten.columns       { right: 86.6666666667%; left: auto; }
  .pull-eleven.column, .pull-eleven.columns { right: 95.3333333333%; left: auto; }
  
  .site-info, .site-articles, .site-tools { float: left; }
  .site-info { width: 48%; }
  .site-articles, .site-tools { width: 22%; }
  .site-info, .site-articles { margin-right: 4%; }
  .site-legal { clear: both; padding-top: 1.5em; text-align: center; }
  .library li { width: 48%; }
  .library img { margin: 0 auto 0.75em; }
}

@media screen and (min-width: 40em) and (max-width: 59.9375em) {
	.convo span { display: none; }
	.convo i { margin-right: 0; }
	
	.md-one.column, .md-one.columns { width: 4.66666666667%; }
  .md-two.columns              { width: 13.3333333333%; }
  .md-three.columns            { width: 22%; }
  .md-four.columns             { width: 30.6666666667%; }
  .md-five.columns             { width: 39.3333333333%; }
  .md-six.columns              { width: 48%; }
  .md-seven.columns            { width: 56.6666666667%; }
  .md-eight.columns            { width: 65.3333333333%; }
  .md-nine.columns             { width: 74%; }
  .md-ten.columns              { width: 82.6666666667%; }
  .md-eleven.columns           { width: 91.3333333333%; }
  .md-twelve.columns           { width: 100%; margin-right: 0; }
  .md-one:first-child + .md-eleven, 
  .md-two:first-child + .md-ten,
  .md-three:first-child + .md-nine,
  .md-four:first-child + .md-eight,
  .md-five:first-child + .md-seven,
  .md-six:first-child + .md-six,
  .md-seven:first-child + .md-five,
  .md-eight:first-child + .md-four,
  .md-nine:first-child + .md-three,
  .md-ten:first-child + .md-two,
  .md-eleven:first-child + .md-one { margin-right: 0; }

  /* Offsets */
  .md-offset-one.column, .md-offset-one.columns       { margin-left: 8.66666666667%; }
  .md-offset-two.column, .md-offset-two.columns       { margin-left: 17.3333333333%; }
  .md-offset-three.column, .md-offset-three.columns   { margin-left: 26%; }
  .md-offset-four.column, .md-offset-four.columns     { margin-left: 34.6666666667%; }
  .md-offset-five.column, .md-offset-five.columns     { margin-left: 43.3333333333%; }
  .md-offset-six.column, .md-offset-six.columns       { margin-left: 52%; }
  .md-offset-seven.column, .md-offset-seven.columns   { margin-left: 60.6666666667%; }
  .md-offset-eight.column, .md-offset-eight.columns   { margin-left: 69.3333333333%; }
  .md-offset-nine.column, .md-offset-nine.columns     { margin-left: 78.0%; }
  .md-offset-ten.column, .md-offset-ten.columns       { margin-left: 86.6666666667%; }
  .md-offset-eleven.column, .md-offset-eleven.columns { margin-left: 95.3333333333%; }
  
  /* Push and pull for better source ordering */
  .md-push-one.column, .md-push-one.columns       { left: 8.66666666667%; right: auto; }
  .md-push-two.column, .md-push-two.columns       { left: 17.3333333333%; right: auto; }
  .md-push-three.column, .md-push-three.columns   { left: 26%; right: auto; }
  .md-push-four.column, .md-push-four.columns     { left: 34.6666666667%; right: auto; }
  .md-push-five.column, .md-push-five.columns     { left: 43.3333333333%; right: auto; }
  .md-push-six.column, .md-push-six.columns       { left: 52%; right: auto; }
  .md-push-seven.column, .md-push-seven.columns   { left: 60.6666666667%; right: auto; }
  .md-push-eight.column, .md-push-eight.columns   { left: 69.3333333333%; right: auto; }
  .md-push-nine.column, .md-push-nine.columns     { left: 78.0%; right: auto; }
  .md-push-ten.column, .md-push-ten.columns       { left: 86.6666666667%; right: auto; }
  .md-push-eleven.column, .md-push-eleven.columns { left: 95.3333333333%; right: auto; }
  .md-pull-one.column, .md-pull-one.columns       { right: 8.66666666667%; left: auto; }
  .md-pull-two.column, .md-pull-two.columns       { right: 17.3333333333%; left: auto; }
  .md-pull-three.column, .md-pull-three.columns   { right: 26%; left: auto; }
  .md-pull-four.column, .md-pull-four.columns     { right: 34.6666666667%; left: auto; }
  .md-pull-five.column, .md-pull-five.columns     { right: 43.3333333333%; left: auto; }
  .md-pull-six.column, .md-pull-six.columns       { right: 52%; left: auto; }
  .md-pull-seven.column, .md-pull-seven.columns   { right: 60.6666666667%; left: auto; }
  .md-pull-eight.column, .md-pull-eight.columns   { right: 69.3333333333%; left: auto; }
  .md-pull-nine.column, .md-pull-nine.columns     { right: 78.0%; left: auto; }
  .md-pull-ten.column, .md-pull-ten.columns       { right: 86.6666666667%; left: auto; }
  .md-pull-eleven.column, .md-pull-eleven.columns { right: 95.3333333333%; left: auto; }
}

@media screen and (max-width: 44.9375em) {
	header nav { border-top: 1px solid rgba(170,173,178,0.25); border-bottom: 1px solid rgba(170,173,178,0.25);
		margin-bottom: 0.75em; }
	header nav a { padding: 0.75em; }
	header nav a:hover, header nav a:focus { background: #4197d4; color: #fff; }
	header .logo { display: inline-block; left: 50%; margin: 0.3em auto; position: relative; transform: translateX(-50%); }
	.overlay h1 { font-size: 2em; }
	.post-info span { display: block; }
	.hero { padding: 30em 0 0; }
}

@media screen and (min-width: 45em) {
	html, body { height: 100%; }
	.page { min-height: 100%; position: relative; }
	main { padding-bottom: 18em; }
	aside.p-left, aside.p-right { width: 33%; }
	blockquote.pull p { font-size: 2em; line-height: 1.5em; }
	.page > header { padding: 0 0.75em; }
	header .logo { left: 0.3em; padding-left: 2.5em; position: absolute; top: 50%; transform: translateY(-50%); width: 38%; }
	header .convo { text-align: right; }
	header .convo, header nav { clear: right; float: right; width: 60%; }
	header nav { margin-top: 0.75em; }
	header nav a { border-left: 1px solid #fff; border-right: 1px solid #fff; padding: 0.75em 0; position: relative; }
	header nav a span, header nav a i { position: relative; z-index: 3; }
	header nav a::after { background: rgba(65,151,212,0.5); bottom: 0; content: ''; height: 5px; left: 0;
		position: absolute; right: 0; transition: all 0.2s ease-in-out; z-index: 1; }
	header nav a:hover, header nav a:focus { color: #fff; }
	header nav a:hover::after, header nav a:focus::after { background: rgba(65,151,212,1); height: 100%; }
	.explore li { padding: 36% 0 0; }
	.hero { padding: 85% 0 0; }
	.post-tease .summary { font-size: 1.25rem; line-height: 1.2; }
	.posts li { width: 48.5%; }
	.quotes li { width: 32%; }
	.categories a:hover, .categories a:focus { transform: scale(1.1); }
	footer { bottom: 0; height: 18em; left: 0; position: absolute; right: 0; }
}

@media screen and (min-width: 45em) and (max-width: 59.9375em) {
	.overlay h1 { font-size: 2.5em; }
}

@media screen and (min-width: 60em) {
	header .logo { font-size: 2.5rem; padding-left: 2em; }
	.overlay h1 { font-size: 4rem; }
	.explore ul { flex-flow: row nowrap; }
	.posts li { width: 31%; }
	.post-list li, .topic-list > li { width: 48%; }
	.quote .pull { margin: 3em 0; }
	.quotes li { width: 24%; }
	/* .library li { width: 31%; } */
	
	.lg-one.column, .lg-one.columns { width: 4.66666666667%; }
  .lg-two.columns              { width: 13.3333333333%; }
  .lg-three.columns            { width: 22%; }
  .lg-four.columns             { width: 30.6666666667%; }
  .lg-five.columns             { width: 39.3333333333%; }
  .lg-six.columns              { width: 48%; }
  .lg-seven.columns            { width: 56.6666666667%; }
  .lg-eight.columns            { width: 65.3333333333%; }
  .lg-nine.columns             { width: 74%; }
  .lg-ten.columns              { width: 82.6666666667%; }
  .lg-eleven.columns           { width: 91.3333333333%; }
  .lg-twelve.columns           { width: 100%; margin-right: 0; }

  /* Offsets */
  .lg-offset-one.column, .lg-offset-one.columns       { margin-left: 8.66666666667%; }
  .lg-offset-two.column, .lg-offset-two.columns       { margin-left: 17.3333333333%; }
  .lg-offset-three.column, .lg-offset-three.columns   { margin-left: 26%; }
  .lg-offset-four.column, .lg-offset-four.columns     { margin-left: 34.6666666667%; }
  .lg-offset-five.column, .lg-offset-five.columns     { margin-left: 43.3333333333%; }
  .lg-offset-six.column, .lg-offset-six.columns       { margin-left: 52%; }
  .lg-offset-seven.column, .lg-offset-seven.columns   { margin-left: 60.6666666667%; }
  .lg-offset-eight.column, .lg-offset-eight.columns   { margin-left: 69.3333333333%; }
  .lg-offset-nine.column, .lg-offset-nine.columns     { margin-left: 78.0%; }
  .lg-offset-ten.column, .lg-offset-ten.columns       { margin-left: 86.6666666667%; }
  .lg-offset-eleven.column, .lg-offset-eleven.columns { margin-left: 95.3333333333%; }
  
  /* Push and pull for better source ordering */
  .lg-push-one.column, .lg-push-one.columns       { left: 8.66666666667%; right: auto; }
  .lg-push-two.column, .lg-push-two.columns       { left: 17.3333333333%; right: auto; }
  .lg-push-three.column, .lg-push-three.columns   { left: 26%; right: auto; }
  .lg-push-four.column, .lg-push-four.columns     { left: 34.6666666667%; right: auto; }
  .lg-push-five.column, .lg-push-five.columns     { left: 43.3333333333%; right: auto; }
  .lg-push-six.column, .lg-push-six.columns       { left: 52%; right: auto; }
  .lg-push-seven.column, .lg-push-seven.columns   { left: 60.6666666667%; right: auto; }
  .lg-push-eight.column, .lg-push-eight.columns   { left: 69.3333333333%; right: auto; }
  .lg-push-nine.column, .lg-push-nine.columns     { left: 78.0%; right: auto; }
  .lg-push-ten.column, .lg-push-ten.columns       { left: 86.6666666667%; right: auto; }
  .lg-push-eleven.column, .lg-push-eleven.columns { left: 95.3333333333%; right: auto; }
  .lg-pull-one.column, .lg-pull-one.columns       { right: 8.66666666667%; left: auto; }
  .lg-pull-two.column, .lg-pull-two.columns       { right: 17.3333333333%; left: auto; }
  .lg-pull-three.column, .lg-pull-three.columns   { right: 26%; left: auto; }
  .lg-pull-four.column, .lg-pull-four.columns     { right: 34.6666666667%; left: auto; }
  .lg-pull-five.column, .lg-pull-five.columns     { right: 43.3333333333%; left: auto; }
  .lg-pull-six.column, .lg-pull-six.columns       { right: 52%; left: auto; }
  .lg-pull-seven.column, .lg-pull-seven.columns   { right: 60.6666666667%; left: auto; }
  .lg-pull-eight.column, .lg-pull-eight.columns   { right: 69.3333333333%; left: auto; }
  .lg-pull-nine.column, .lg-pull-nine.columns     { right: 78.0%; left: auto; }
  .lg-pull-ten.column, .lg-pull-ten.columns       { right: 86.6666666667%; left: auto; }
  .lg-pull-eleven.column, .lg-pull-eleven.columns { right: 95.3333333333%; left: auto; }
}

@media screen and (min-width: 60em) and (max-width: 74.9375em) {
	.library li { margin: 0 0 0.75em; }
	.library li { text-align: left; }
	.library img { float: left; margin: 0 0.75em 0 0; max-height: 4em; width: auto; }
}

@media screen and (max-width: 74.9375em) {
	.post-notes { border-top: 1px solid rgba(95,85,131,0.2); border-bottom: 1px solid rgba(95,85,131,0.2); margin: 0 0 1.5em; padding: 0.7em 0; }
	.post-notes .with-love { max-width: 10em; float: right; text-align: right; margin-left: 1.5em; }
	.post-notes:after { clear: both; content: ''; display: table; }
}

@media screen and (min-width: 75em) {
	.top-search input:focus, .top-search input:valid { width: 18em; }
	h1 { font-size: 3.5rem; line-height: 1.285714286; }
	blockquote.pull p { font-size: 2.5em; line-height: 1.2em; }
	.p-left { margin-left: -25% !important; }
	.p-right { margin-right: -25% !important; }
	aside.p-left, aside.p-right { width: 45%; }
	blockquote.p-left, blockquote.p-right { width: 62%; }
	img.wide, .media-wrap.wide, figure.wide, .article .pagewrap .library, .row.wide { max-width: 150%; width: 150%; margin: 0 -25%; }
	.explore li { padding: 20% 0 0; }
	.hero { padding: 75% 0 0; }
	.library li { width: 24%; }
	.quote .pull { margin: 4.5em 0; }
	.pagewrap { position: relative; }
	.post-notes { position: absolute; left: 0; top: 0; width: 10em; margin-left: -11.5em; padding-bottom: 11em; text-align: right; }
	.post-notes div { margin: 0 0 0.75em; }
	.post-notes .with-love { position: absolute; bottom: 0; }
}

@media screen and (min-width: 90em) {
	.hero, .post-hero { background-position: top center; padding: 45em 0 0; }
}

@media print {
	*, *:before, *:after, *:first-letter, p:first-line, div:first-line, blockquote:first-line, li:first-line { 
		background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
	.page > header, footer, .breadcrumb, .explore, .newsletter, .post-info, .article-foot, .four.columns, .media-wrap iframe,
	.post-notes .tags, .post-notes .with-love {
		display: none; }
	article .overlay { position: relative; }
	.overlay h1 { font-size: 2.5rem; margin: 0 !important; padding: 0.5em 0 0; }
	main a:after { content: " (" attr(href) ") "; font-size: 0.875rem; }
	.byline { margin-bottom: 1.5em; }
	.byline .mute { display: inline-block !important; }
	.p-right a:after, .p-left a:after { display: none; }
	aside.p-right, aside.p-left, img.p-right, img.p-left { width: 33%; }
	blockquote.p-right, blockquote.p-left { width: 40%; }
	img.p-right { margin-left: 1em; }
	img.p-left { margin-right: 1em; }
	.p-right { float: right; }
	.p-left { float: left; }
	.media-wrap { height: 3em; padding: 0; }
	.media-wrap:after { border: 1px solid #ccc; content: "See video online"; display: block; margin: 0 auto;
		padding: 0.75em; text-align: center; width: 75%; }
}