@import "global.scss";

article {
	display: block;
}
aside {
	display: block;
}
details {
	display: block;
}
figcaption {
	display: block;
}
figure {
	display: block;
	margin: 0;
}
footer {
	display: block;
}
header {
	display: block;
}
hgroup {
	display: block;
}
main {
	display: block;
}
nav {
	display: block;
}
section {
	display: block;
}
summary {
	display: block;
}
audio {
	display: inline-block;
	&:not([controls]) {
		display: none;
		height: 0;
	}
}
canvas {
	display: inline-block;
}
video {
	display: inline-block;
}
[hidden] {
	display: none;
}
template {
	display: none;
}
html {
	font-family: $font_1;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	height: 100%;
	max-height: 100%;
	font-size: 62.5%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	input[type="button"] {
		-webkit-appearance: button;
		cursor: pointer;
	}
	input[disabled] {
		cursor: default;
	}
}
body {
	margin: 0;
	height: 100%;
	max-height: 100%;
	font-family: $font_4, $font_5;
	letter-spacing: 0.01rem;
	font-size: 1.8rem;
	line-height: 1.75em;
	color: $color_cape_cod_approx;
	-webkit-font-feature-settings: 'kern' 1;
	-moz-font-feature-settings: 'kern' 1;
	-o-font-feature-settings: 'kern' 1;
	text-rendering: geometricPrecision;
	&.nav-opened {
		.site-wrapper {
			overflow-x: hidden;
			-webkit-transform: translate3D(-240px, 0, 0);
			-ms-transform: translate3D(-240px, 0, 0);
			//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
			transform: translate3D(-240px, 0, 0);
			-webkit-transition: -webkit-transform 0.3s ease;
			//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
			transition: transform 0.3s ease;
		}
		.nav-cover {
			position: fixed;
			top: 0;
			left: 0;
			right: 240px;
			bottom: 0;
			z-index: 200;
		}
		.nav {
			opacity: 1;
			-webkit-transition: -webkit-transform 0.3s ease, opacity 0s ease 0s;
			//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
			transition: transform 0.3s ease, opacity 0s ease 0s;
			-webkit-transform: translate3D(0, 0, 0);
			-ms-transform: translate3D(0, 0, 0);
			//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
			transform: translate3D(0, 0, 0);
		}
	}
	&.nav-closed .nav {
		-webkit-transform: translate3D(97px, 0, 0);
		-ms-transform: translate3D(97px, 0, 0);
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translate3D(97px, 0, 0);
	}
	&:not(.post-template) .post-title {
		font-size: 3.6rem;
	}
}
a {
	background: transparent;
	color: $color_gravel_approx;
	//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
	transition: color 0.3s ease;
	&:focus {
		outline: thin dotted;
	}
	&:active {
		outline: 0;
	}
	&:hover {
		outline: 0;
		color: $color_woodsmoke_approx;
	}
}
h1 {
	font-size: 2em;
	margin: 0.67em 0;
	font-size: 5rem;
	letter-spacing: -2px;
	text-indent: -3px;
	@extend %extend_3;
}
abbr[title] {
	border-bottom: 1px dotted;
}
b {
	font-weight: 700;
}
strong {
	font-weight: 700;
}
dfn {
	font-style: italic;
}
hr {
	-moz-box-sizing: content-box;
	//Instead of the line below you could use @include box-sizing($bs)
	box-sizing: content-box;
	height: 0;
	display: block;
	height: 1px;
	border: 0;
	border-top: $gallery 1px solid;
	margin: 3.2em 0;
	padding: 0;
}
mark {
	background: $yellow;
	color: $black;
	background-color: $color_pale_prim_approx;
}
code {
	font-family: $font_2, $font_3;
	font-size: 1em;
	@extend %extend_5;
}
kbd {
	font-family: $font_2, $font_3;
	font-size: 1em;
	display: inline-block;
	margin-bottom: 0.4em;
	padding: 1px 8px;
	border: $color_celeste_approx 1px solid;
	color: $color_storm_dust_approx;
	//Instead of the line below you could use @include text-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
	text-shadow: $white 0 1px 0;
	font-size: 0.9em;
	font-weight: 700;
	background: $wild_sand;
	//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
	border-radius: 4px;
	//Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
	box-shadow: 0 1px 0 $black_20, 0 1px 0 0 $white inset;
}
pre {
	font-family: $font_2, $font_3;
	font-size: 1em;
	white-space: pre-wrap;
	-moz-box-sizing: border-box;
	//Instead of the line below you could use @include box-sizing($bs)
	box-sizing: border-box;
	margin: 0 0 1.75em 0;
	border: $color_mystic_approx 1px solid;
	width: 100%;
	padding: 10px;
	font-family: $font_11, $font_12, $font_13;
	font-size: 0.9em;
	white-space: pre;
	overflow: auto;
	background: $color_alabaster_approx;
	//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
	border-radius: 3px;
	code {
		@extend %extend_6;
	}
	tt {
		@extend %extend_6;
	}
}
samp {
	font-family: $font_2, $font_3;
	font-size: 1em;
}
q {
	quotes: "\201C" "\201D" "\2018" "\2019";
}
small {
	font-size: 80%;
}
sub {
	@extend %extend_1;
	bottom: -0.25em;
}
sup {
	@extend %extend_1;
	top: -0.5em;
}
img {
	border: 0;
}
fieldset {
	border: 1px solid $silver;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
}
legend {
	border: 0;
	padding: 0;
}
button {
	@extend %extend_2;
	line-height: normal;
	text-transform: none;
	-webkit-appearance: button;
	cursor: pointer;
}
input {
	@extend %extend_2;
	line-height: normal;
}
select {
	@extend %extend_2;
	text-transform: none;
}
textarea {
	@extend %extend_2;
	overflow: auto;
	vertical-align: top;
}
input[type="reset"] {
	-webkit-appearance: button;
	cursor: pointer;
}
input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}
button[disabled] {
	cursor: default;
}
input[type="checkbox"] {
	//Instead of the line below you could use @include box-sizing($bs)
	box-sizing: border-box;
	padding: 0;
}
input[type="radio"] {
	//Instead of the line below you could use @include box-sizing($bs)
	box-sizing: border-box;
	padding: 0;
}
input[type="search"] {
	-webkit-appearance: textfield;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	//Instead of the line below you could use @include box-sizing($bs)
	box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}
button::-moz-focus-inner {
	border: 0;
	padding: 0;
}
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
	-moz-box-sizing: border-box;
	//Instead of the line below you could use @include box-sizing($bs)
	box-sizing: border-box;
	margin: 1.75em 0;
	width: 100%;
	max-width: 100%;
	background-color: transparent;
	th {
		@extend %extend_7;
		color: $black;
	}
	td {
		@extend %extend_7;
	}
	tbody {
		+ tbody {
			border-top: $gallery 2px solid;
		}
		> tr:nth-child(odd) {
			> td {
				background-color: $color_black_haze_approx;
			}
			> th {
				background-color: $color_black_haze_approx;
			}
		}
	}
	caption + thead tr:first-child {
		th {
			border-top: 0;
		}
		td {
			border-top: 0;
		}
	}
	colgroup + thead tr:first-child {
		th {
			border-top: 0;
		}
		td {
			border-top: 0;
		}
	}
	thead:first-child tr:first-child {
		th {
			border-top: 0;
		}
		td {
			border-top: 0;
		}
	}
	table table {
		background-color: $white;
	}
	&.plain tbody > tr:nth-child(odd) {
		> td {
			background: transparent;
		}
		> th {
			background: transparent;
		}
	}
}
@font-face {
    font-family: "casper-icons";
    src:url("../fonts/casper-icons.eot?v=1");
    src:url("../fonts/casper-icons.eot?v=1#iefix") format("embedded-opentype"),
        url("../fonts/casper-icons.woff?v=1") format("woff"),
        url("../fonts/casper-icons.ttf?v=1") format("truetype"),
        url("../fonts/casper-icons.svg?v=1#icons") format("svg");
    font-weight: normal;
    font-style: normal;
}

/* Apply these base styles to all icons */
[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "casper-icons", "Open Sans", sans-serif;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    text-decoration: none !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
::-moz-selection {
	background: $color_mabel_approx;
}
::selection {
	background: $color_mabel_approx;
}
h2 {
	@extend %extend_3;
	font-size: 3.6rem;
	letter-spacing: -1px;
}
h3 {
	@extend %extend_3;
	font-size: 3rem;
}
h4 {
	@extend %extend_3;
	font-size: 2.5rem;
}
h5 {
	@extend %extend_3;
	font-size: 2rem;
}
h6 {
	@extend %extend_3;
	font-size: 2rem;
}
p {
	@extend %extend_4;
}
ul {
	@extend %extend_4;
	padding-left: 3rem;
	ul {
		margin: 0 0 0.4em 0;
		padding-left: 2em;
	}
	ol {
		margin: 0 0 0.4em 0;
		padding-left: 2em;
	}
}
ol {
	@extend %extend_4;
	padding-left: 3rem;
	ol {
		margin: 0 0 0.4em 0;
		padding-left: 2em;
	}
	ul {
		margin: 0 0 0.4em 0;
		padding-left: 2em;
	}
}
dl {
	@extend %extend_4;
	dt {
		float: left;
		width: 180px;
		overflow: hidden;
		clear: left;
		text-align: right;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: 700;
		margin-bottom: 1em;
	}
	dd {
		margin-left: 200px;
		margin-bottom: 1em;
	}
}
li {
	margin: 0.4em 0;
	li {
		margin: 0;
	}
}
blockquote {
	-moz-box-sizing: border-box;
	//Instead of the line below you could use @include box-sizing($bs)
	box-sizing: border-box;
	margin: 1.75em 0 1.75em 0;
	padding: 0 0 0 1.75em;
	border-left: $color_gravel_approx 0.4em solid;
	p {
		margin: 0.8em 0;
		font-style: italic;
	}
	small {
		display: inline-block;
		margin: 0.8em 0 0.8em 1.5em;
		font-size: 0.9em;
		color: $color_celeste_approx;
		&:before {
			content: "\2014 \00A0";
		}
	}
	cite {
		font-weight: 700;
		a {
			font-weight: normal;
		}
	}
}
tt {
	@extend %extend_5;
}
iframe {
	display: block;
	margin: 1.75em 0;
}
.fluid-width-video-wrapper {
	display: block;
	margin: 1.75em 0;
	iframe {
		margin: 0;
	}
}
.clearfix {
	zoom: 1;
	clear: both;
	&:before {
		content: " ";
		display: table;
	}
	&:after {
		content: " ";
		display: table;
		clear: both;
	}
}
.hidden {
	text-indent: -9999px;
	visibility: hidden;
	display: none;
}
.inner {
	position: relative;
	width: 80%;
	max-width: 710px;
	margin: 0 auto;
}
.vertical {
	display: table-cell;
	vertical-align: middle;
}
.site-wrapper {
	position: relative;
	z-index: 10;
	min-height: 100%;
	background-color: $color_wild_sand_approx;
	-webkit-transition: -webkit-transform 0.5s ease;
	//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
	transition: transform 0.5s ease;
}
.main-header {
	position: relative;
	display: table;
	width: 100%;
	height: 100vh;
	margin-bottom: 5rem;
	text-align: center;
	background: $color_log_cabin_approx no-repeat center center;
	background-size: cover;
	overflow: hidden;
	.inner {
		width: 80%;
	}
}
.main-nav {
	position: relative;
	padding: 35px 40px;
	margin: 0 0 30px 0;
	a {
		text-decoration: none;
		font-family: $font_14, $font_15;
	}
	&.overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 70px;
		border: none;
		background: linear-gradient(to bottom, $black_20 0,rgba(0,0,0,0) 100%);
	}
}
.nav {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
	width: 240px;
	opacity: 0;
	background: $color_woodsmoke_approx;
	margin-bottom: 0;
	text-align: left;
	overflow-y: auto;
	-webkit-transition: -webkit-transform 0.5s ease, opacity 0.3s ease 0.7s;
	//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
	transition: transform 0.5s ease, opacity 0.3s ease 0.7s;
	ul {
		padding: 90px 9% 5%;
		list-style: none;
		counter-reset: item;
	}
	li {
		margin: 0;
		&:before {
			display: block;
			float: right;
			padding-right: 4%;
			padding-left: 5px;
			text-align: right;
			font-size: 1.2rem;
			vertical-align: bottom;
			color: $color_pink_swan_approx;
			content: counter(item, lower-roman);
			counter-increment: item;
		}
		a {
			text-decoration: none;
			line-height: 1.4;
			font-size: 1.4rem;
			display: block;
			padding: 0.6rem 4%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			&:after {
				display: inline-block;
				content: " .......................................................";
				color: $white_20;
				margin-left: 5px;
			}
		}
		&.nav-current a {
			color: $white;
		}
	}
	.nav-current {
		&:before {
			color: $white;
		}
		a:after {
			content: " ";
			border-bottom: $white_50 1px solid;
			width: 100%;
			height: 1px;
		}
	}
	a {
		&:link {
			color: $color_pink_swan_approx;
		}
		&:visited {
			color: $color_pink_swan_approx;
		}
		&:hover {
			color: $white;
		}
		&:active {
			color: $white;
		}
		&:focus {
			color: $white;
		}
	}
}
.nav-title {
	position: absolute;
	top: 45px;
	left: 30px;
	font-size: 16px;
	font-weight: 100;
	text-transform: uppercase;
	color: $white;
}
.nav-close {
	position: absolute;
	top: 38px;
	right: 25px;
	width: 20px;
	height: 20px;
	padding: 0;
	font-size: 10px;
	&:focus {
		outline: 0;
	}
	&:before {
		@extend %extend_8;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: rotate(45deg);
	}
	&:after {
		@extend %extend_8;
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: rotate(-45deg);
	}
	&:hover {
		&:before {
			background: $white;
		}
		&:after {
			background: $white;
		}
	}
}
.subscribe-button {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	//Instead of the line below you could use @include box-sizing($bs)
	box-sizing: border-box;
	display: block;
	position: absolute;
	bottom: 30px;
	left: 30px;
	right: 30px;
	height: 38px;
	padding: 0 20px;
	color: $color_woodsmoke_approx !important;
	text-align: center;
	font-size: 12px;
	font-family: $font_16, $font_17;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 35px;
	//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
	border-radius: 3px;
	background: $white;
	//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
	transition: all ease 0.3s;
	&:before {
		font-size: 9px;
		margin-right: 6px;
	}
}
.scroll-down {
	display: block;
	position: absolute;
	z-index: 100;
	bottom: 45px;
	left: 50%;
	margin-left: -16px;
	width: 34px;
	height: 34px;
	font-size: 34px;
	text-align: center;
	text-decoration: none;
	color: $white_70;
	-webkit-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
	transform: rotate(-90deg);
	-webkit-animation: bounce 4s 2s infinite;
	animation: bounce 4s 2s infinite;
	&:hover {
		color: $white;
		-webkit-animation: none;
		animation: none;
	}
}
.home-template {
	.page-title {
		-webkit-animation: fade-in-down 0.6s;
		animation: fade-in-down 0.6s;
		-webkit-animation-delay: 0.2s;
		animation-delay: 0.2s;
	}
	.page-description {
		-webkit-animation: fade-in-down 0.9s;
		animation: fade-in-down 0.9s;
		-webkit-animation-delay: 0.1s;
		animation-delay: 0.1s;
	}
	.main-header:after {
		display: block;
		content: " ";
		width: 150px;
		height: 130px;
		//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
		border-radius: 100%;
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -75px;
		background: radial-gradient(ellipse at center, $black_15 0,rgba(0,0,0,0) 70%,rgba(0,0,0,0) 100%);
	}
}
.no-cover {
	.scroll-down {
		display: none;
	}
	&.main-header {
		min-height: 160px;
		max-height: 40vh;
		background: $color_black_haze_approx;
		&:after {
			display: none;
		}
	}
	.page-title {
		color: $black_80;
	}
	.page-description {
		color: $black_50;
	}
	.main-nav.overlay {
		background: none;
	}
	&.post-head.main-header {
		height: 85px;
		min-height: 0;
		margin-bottom: 0;
		background: transparent;
	}
	&.author-head.main-header {
		height: 10vh;
		min-height: 100px;
		background: transparent;
	}
}
.archive-template {
	.scroll-down {
		display: none;
	}
	.main-header {
		max-height: 30vh;
		&:after {
			display: none;
		}
	}
	.extra-pagination {
		display: block;
	}
	.author-profile .author-meta {
		display: none;
	}
}
.blog-logo {
	display: block;
	float: left;
	background: none !important;
	border: none !important;
	img {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		//Instead of the line below you could use @include box-sizing($bs)
		box-sizing: border-box;
		display: block;
		height: 38px;
		padding: 1px 0 5px;
		width: auto;
	}
}
.menu-button {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	//Instead of the line below you could use @include box-sizing($bs)
	box-sizing: border-box;
	display: inline-block;
	float: right;
	height: 38px;
	padding: 0 15px;
	border-style: solid;
	border-width: 1px;
	opacity: 1;
	text-align: center;
	font-size: 12px;
	text-transform: uppercase;
	line-height: 35px;
	white-space: nowrap;
	//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
	border-radius: 3px;
	//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
	transition: all 0.5s ease;
	&:before {
		font-size: 12px;
		font-weight: bold;
		margin-right: 6px;
		position: relative;
		top: 1px;
	}
	&:hover {
		background: $white;
	}
	&:focus {
		outline: 0;
	}
}
.nav-closed {
	.menu-button {
		color: $white;
		border-color: $white_60;
		&:hover {
			color: $color_log_cabin_approx;
		}
	}
	.no-cover .menu-button {
		border-color: $color_loblolly_approx;
		color: $color_hit_gray_approx;
		&:hover {
			border-color: $color_fuscous_gray_approx;
			color: $color_fuscous_gray_approx;
		}
	}
}
.page-title {
	margin: 10px 0;
	font-size: 5rem;
	letter-spacing: -1px;
	font-weight: 700;
	font-family: $font_18, $font_19;
	color: $white;
}
.page-description {
	margin: 0;
	font-size: 2rem;
	line-height: 1.5em;
	font-weight: 400;
	font-family: $font_20, $font_21;
	letter-spacing: 0.01rem;
	color: $white_80;
}
.post-template {
	.post {
		position: relative;
		width: 80%;
		max-width: 710px;
		margin: 4rem auto;
		padding-bottom: 4rem;
		border-bottom: $color_aqua_haze_approx 1px solid;
		word-wrap: break-word;
		margin-top: 0;
		border-bottom: none;
		padding-bottom: 0;
		&:after {
			display: block;
			content: "";
			width: 7px;
			height: 7px;
			border: $color_aqua_squeeze_approx 1px solid;
			position: absolute;
			bottom: -5px;
			left: 50%;
			margin-left: -5px;
			background: $white;
			//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
			border-radius: 100%;
			//Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
			box-shadow: $white 0 0 0 5px;
			display: none;
		}
	}
	.post-header {
		margin-bottom: 3.4rem;
        
        &__breadcrumb {
            list-style: none;
            margin: 0 0 1em 0;
            padding: 0;
            font-size: 0.8em;
            
            li {
                display: inline-block;
                font-style: italic;
                
                a {
                    font-style: normal;
                }
            }
        }
	}
	.post-title {
		margin-bottom: 0;
	}
	.post-meta {
		margin: 0;
	}
	.post-date {
		padding: 0;
		margin: 0;
		border: none;
	}
	.content {
		overflow: hidden;
	}
}
.read-more {
	text-decoration: none;
	font-weight: 700;
	position: relative;
    display: inline-block;
	&:after {
		content: '\003e';
		display: inline-block;
		font-size: 1.5em;
		color: $color_rose_approx;
		position: absolute;
		//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
		transition: all 0.2s ease;
	}
	&:hover:after {
		margin-left: 5px;
	}
}
.post-meta {
	display: block;
	margin: 1.75rem 0 0 0;
	font-family: $font_22, $font_23;
	font-size: 1.5rem;
	line-height: 2.2rem;
	color: $color_hit_gray_approx;
	a {
		color: $color_hit_gray_approx;
		text-decoration: none;
		&:hover {
			text-decoration: underline;
		}
	}
}
.author-thumb {
	width: 24px;
	height: 24px;
	float: left;
	margin-right: 9px;
	//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
	border-radius: 100%;
}
.user-meta {
	position: relative;
	padding: 0.3rem 40px 0 100px;
	min-height: 77px;
}
.post-date {
	display: inline-block;
	margin-left: 8px;
	padding-left: 12px;
	border-left: $color_geyser_approx 1px solid;
	text-transform: uppercase;
	font-size: 1.3rem;
	white-space: nowrap;
}
.user-image {
	position: absolute;
	top: 0;
	left: 0;
}
.user-name {
	display: block;
	font-weight: 700;
}
.user-bio {
	display: block;
	max-width: 440px;
	font-size: 1.4rem;
	line-height: 1.5em;
}
.publish-meta {
	position: absolute;
	top: 0;
	right: 0;
	padding: 4.3rem 0 4rem 0;
	text-align: right;
}
.publish-heading {
	display: block;
	font-weight: 700;
}
.publish-date {
	display: block;
	font-size: 1.4rem;
	line-height: 1.5em;
}
.footnotes {
	font-style: italic;
	font-size: 1.3rem;
	line-height: 1.6em;
	li {
		margin: 0.6rem 0;
	}
	p {
		margin: 0;
		a:last-child {
			text-decoration: none;
		}
	}
}
.post-footer {
	position: relative;
	margin: 6rem 0 0;
	padding: 6rem 0 0;
	border-top: $color_aqua_haze_approx 1px solid;
	h4 {
		font-size: 1.8rem;
		margin: 0;
		a {
			color: $color_mine_shaft_approx;
			text-decoration: none;
			&:hover {
				text-decoration: underline;
			}
		}
	}
	p {
		margin: 1rem 0;
		font-size: 1.4rem;
		line-height: 1.75em;
	}
	.author {
		margin-right: 180px;
	}
	.share {
		position: absolute;
		top: 6rem;
		right: 0;
		width: 140px;
		a {
			font-size: 1.8rem;
			display: inline-block;
			margin: 1rem 1.6rem 1.6rem 0;
			color: $color_submarine_approx;
			text-decoration: none;
		}
		.icon-twitter:hover {
			color: $color_picton_blue_approx;
		}
		.icon-facebook:hover {
			color: $color_azure_approx;
		}
		.icon-google-plus:hover {
			color: $color_valencia_approx;
		}
	}
}
.author-meta {
	padding: 0;
	margin: 0;
	list-style: none;
	font-size: 1.4rem;
	line-height: 1;
	font-style: italic;
	color: $color_hit_gray_approx;
	margin: 1.6rem 0;
	a {
		color: $color_hit_gray_approx;
		text-decoration: none;
		&:hover {
			color: $color_woodsmoke_approx;
		}
	}
	span {
		display: inline-block;
		margin: 0 2rem 1rem 0;
		word-wrap: break-word;
	}
}
.author-profile {
	padding: 0 15px 5rem;
	border-bottom: $color_aqua_haze_approx 1px solid;
	text-align: center;
	&:after {
		display: block;
		content: "";
		width: 7px;
		height: 7px;
		border: $color_aqua_squeeze_approx 1px solid;
		position: absolute;
		bottom: -5px;
		left: 50%;
		margin-left: -5px;
		background: $white;
		//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
		border-radius: 100%;
		//Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
		box-shadow: $white 0 0 0 5px;
	}
	.author-image {
		position: relative;
		left: auto;
		top: auto;
		width: 120px;
		height: 120px;
		padding: 3px;
		margin: -100px auto 0 auto;
		//Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
		box-shadow: none;
	}
	.author-meta {
		margin: 2rem 0;
		font-family: $font_24, $font_25;
		letter-spacing: 0.01rem;
		font-size: 1.7rem;
	}
}
.author-image {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	//Instead of the line below you could use @include box-sizing($bs)
	box-sizing: border-box;
	display: block;
	position: absolute;
	top: -40px;
	left: 50%;
	margin-left: -40px;
	width: 80px;
	height: 80px;
	//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
	border-radius: 100%;
	overflow: hidden;
	padding: 6px;
	background: $white;
	z-index: 2;
	//Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
	box-shadow: $color_aqua_squeeze_approx 0 0 0 1px;
	.img {
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
		background-size: cover;
		background-position: center center;
		//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
		border-radius: 100%;
	}
}
.author-title {
	margin: 1.5rem 0 1rem;
}
.author-bio {
	font-size: 1.8rem;
	line-height: 1.5em;
	font-weight: 200;
	color: $color_scarpa_flow_approx;
	letter-spacing: 0;
	text-indent: 0;
}
.read-next {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: stretch;
	-webkit-align-items: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
	margin-top: 10rem;
	+ .site-footer {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0;
	}
}
.read-next-story {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-flex: 1;
	-webkit-flex-grow: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	min-width: 50%;
	text-decoration: none;
	position: relative;
	text-align: center;
	color: $white;
	background: $color_log_cabin_approx no-repeat center center;
	background-size: cover;
	overflow: hidden;
	&:hover {
		&:before {
			background: $black_80;
			//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
			transition: all 0.2s ease;
		}
		.post:before {
			color: $color_log_cabin_approx;
			background: $white;
			//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
			transition: all 0.2s ease;
		}
	}
	&:before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: $black_70;
		//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
		transition: all 0.5s ease;
	}
	.post {
		padding-top: 6rem;
		padding-bottom: 6rem;
		&:before {
			content: "Read This Next";
			padding: 4px 10px 5px;
			text-transform: uppercase;
			font-size: 1.1rem;
			font-family: $font_26, $font_27;
			color: $white_80;
			border: $white_50 1px solid;
			//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
			border-radius: 4px;
			//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
			transition: all 0.5s ease;
		}
	}
	h2 {
		margin-top: 1rem;
		color: $white;
	}
	p {
		margin: 0;
		color: $white_80;
	}
	&.no-cover {
		background: $color_black_haze_approx;
		&:before {
			display: none;
		}
		h2 {
			color: $black_80;
		}
		p {
			color: $black_50;
		}
		.post:before {
			color: $black_50;
			border-color: $black_20;
		}
		+ .read-next-story.no-cover {
			border-left: $color_arapawa_4_approx 1px solid;
		}
	}
	&.prev .post:before {
		content: "You Might Enjoy";
	}
}
.gist {
	table {
		margin: 0;
		font-size: 1.4rem;
	}
	td {
		line-height: 1.4;
	}
	.line-number {
		min-width: 25px;
	}
}
.pagination {
	position: relative;
	width: 80%;
	max-width: 710px;
	margin: 4rem auto;
	font-family: $font_28, $font_29;
	font-size: 1.3rem;
	color: $color_hit_gray_approx;
	text-align: center;
	a {
		color: $color_hit_gray_approx;
		//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
		transition: all 0.2s ease;
	}
}
.older-posts {
	@extend %extend_9;
	right: 0;
	&:hover {
		color: $color_oslo_gray_approx;
		border-color: $color_pewter_approx;
	}
}
.newer-posts {
	@extend %extend_9;
	left: 0;
	&:hover {
		color: $color_oslo_gray_approx;
		border-color: $color_pewter_approx;
	}
}
.page-number {
	display: inline-block;
	padding: 2px 0;
	min-width: 100px;
}
.extra-pagination {
	display: none;
	border-bottom: $color_aqua_haze_approx 1px solid;
	&:after {
		display: block;
		content: "";
		width: 7px;
		height: 7px;
		border: $color_aqua_squeeze_approx 1px solid;
		position: absolute;
		bottom: -5px;
		left: 50%;
		margin-left: -5px;
		background: $white;
		//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
		border-radius: 100%;
		//Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
		box-shadow: $white 0 0 0 5px;
	}
	.pagination {
		width: auto;
	}
}
.site-footer {
	position: relative;
	margin: 8rem 0 0;
	padding: 1rem 15px;
	font-family: $font_30, $font_31;
	font-size: 1rem;
	line-height: 1.75em;
	color: $color_submarine_approx;
	a {
		color: $color_submarine_approx;
		text-decoration: none;
		font-weight: bold;
		&:hover {
			border-bottom: $color_submarine_approx 1px solid;
		}
	}
}
.poweredby {
	display: block;
	width: 45%;
	float: right;
	text-align: right;
}
.copyright {
	display: block;
	width: 45%;
	float: left;
}
@media only screen and(max-width: 900px) {
	blockquote {
		margin-left: 0;
	}
	.main-header {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		//Instead of the line below you could use @include box-sizing($bs)
		box-sizing: border-box;
		height: auto;
		min-height: 240px;
		height: 60vh;
		padding: 15% 0;
	}
	.scroll-down {
		display: none;
	}
	.page-title {
		font-size: 4rem;
		letter-spacing: -1px;
	}
	.page-description {
		font-size: 1.8rem;
		line-height: 1.5em;
	}
	.post {
		font-size: 0.95em;
	}
	hr {
		margin: 2.4em 0;
	}
	ol {
		padding-left: 2em;
	}
	ul {
		padding-left: 2em;
	}
	h1 {
		font-size: 4.5rem;
		text-indent: -2px;
	}
	h2 {
		font-size: 3.6rem;
	}
	h3 {
		font-size: 3.1rem;
	}
	h4 {
		font-size: 2.5rem;
	}
	h5 {
		font-size: 2.2rem;
	}
	h6 {
		font-size: 1.8rem;
	}
	.author-profile {
		padding-bottom: 4rem;
		.author-bio {
			font-size: 1.6rem;
		}
		.author-meta span {
			font-size: 1.6rem;
		}
	}
	.no-cover {
		&.post-head.main-header {
			height: 55px;
			padding: 0;
		}
		&.author-head.main-header {
			padding: 0;
		}
	}
	.read-next {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		margin-top: 4rem;
		p {
			display: none;
		}
	}
	.home-template .main-header:after {
		display: none;
	}
	.archive-template .main-header {
		min-height: 180px;
		padding: 10% 0;
	}
	.blog-logo img {
		padding: 4px 0;
	}
	body:not(.post-template) .post-title {
		font-size: 3.2rem;
	}
	.author-meta span {
		display: block;
		margin: 1.5rem 0;
	}
	.post-head.main-header {
		height: 45vh;
	}
	.tag-head.main-header {
		height: 30vh;
	}
	.author-head.main-header {
		height: 30vh;
	}
	.read-next-story.no-cover + .read-next-story.no-cover {
		border-top: $color_arapawa_6_approx 1px solid;
		border-left: none;
	}
}
@media only screen and(max-width: 500px) {
	.main-header {
		margin-bottom: 15px;
		height: 40vh;
	}
	.no-cover {
		&.main-header {
			height: 30vh;
		}
		.main-nav.overlay {
			background: none;
			.menu-button {
				border: none;
			}
		}
	}
	.main-nav {
		padding: 5px;
		margin-bottom: 2rem;
		&.overlay {
			.menu-button {
				border-color: transparent;
			}
			a:hover {
				color: $white;
				border-color: transparent;
				background: transparent;
			}
		}
	}
	.blog-logo {
		padding: 5px;
		img {
			height: 30px;
		}
	}
	.menu-button {
		padding: 0 5px;
		//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
		border-radius: 0;
		border-width: 0;
		color: $color_mine_shaft_approx;
		background: transparent;
		&:hover {
			color: $color_mine_shaft_approx;
			border-color: transparent;
			background: none;
		}
	}
	body {
		&.nav-opened .menu-button {
			background: none;
			border: transparent;
		}
		&:not(.post-template) .post-title {
			font-size: 2.5rem;
		}
	}
	.nav-title {
		top: 25px;
	}
	.nav-close {
		position: absolute;
		top: 18px;
	}
	.inner {
		width: auto;
		margin: 2rem auto;
	}
	.pagination {
		width: auto;
		margin: 2rem auto;
	}
	.post {
		width: auto;
		margin-top: 2rem;
		margin-bottom: 2rem;
		margin-left: 16px;
		margin-right: 16px;
		padding-bottom: 2rem;
		line-height: 1.65em;
	}
	.post-date {
		display: none;
	}
	.post-template {
		.post-header {
			margin-bottom: 2rem;
		}
		.post-date {
			display: inline-block;
		}
		.site-footer {
			margin-top: 0;
		}
	}
	hr {
		margin: 1.75em 0;
	}
	p {
		font-size: 0.95em;
		margin: 0 0 2.5rem 0;
	}
	ul {
		font-size: 0.95em;
		margin: 0 0 2.5rem 0;
	}
	ol {
		font-size: 0.95em;
		margin: 0 0 2.5rem 0;
	}
	dl {
		font-size: 0.95em;
		margin: 0 0 2.5rem 0;
	}
	.page-title {
		font-size: 3rem;
	}
	.page-description {
		font-size: 1.6rem;
	}
	h1 {
		margin: 0 0 0.3em 0;
		font-size: 2.8rem;
		letter-spacing: -1px;
	}
	h2 {
		margin: 0 0 0.3em 0;
		font-size: 2.4rem;
		letter-spacing: 0;
	}
	h3 {
		margin: 0 0 0.3em 0;
		font-size: 2.1rem;
	}
	h4 {
		margin: 0 0 0.3em 0;
		font-size: 1.9rem;
	}
	h5 {
		margin: 0 0 0.3em 0;
		font-size: 1.8rem;
	}
	h6 {
		margin: 0 0 0.3em 0;
		font-size: 1.8rem;
	}
	.post-meta {
		font-size: 1.3rem;
		margin-top: 1rem;
	}
	.post-footer {
		padding: 5rem 0 3rem;
		text-align: center;
		.author {
			margin: 0 0 2rem 0;
			padding: 0 0 1.6rem 0;
			border-bottom: $color_aqua_haze_approx 1px dashed;
		}
		.share {
			position: static;
			width: auto;
			a {
				margin: 1.4rem 0.8rem 0 0.8rem;
			}
		}
	}
	.older-posts {
		position: static;
		margin: 10px 0;
	}
	.newer-posts {
		position: static;
		margin: 10px 0;
	}
	.page-number {
		display: block;
	}
	.site-footer {
		margin-top: 3rem;
	}
	.author-profile {
		padding-bottom: 2rem;
		.author-image {
			margin-top: -70px;
		}
		.author-meta span {
			font-size: 1.4rem;
		}
	}
	.read-next {
		margin-top: 2rem;
		margin-bottom: -37px;
		.post {
			width: 100%;
		}
	}
	.archive-template .main-header {
		max-height: 20vh;
		min-height: 160px;
		padding: 10% 0;
		.page-description {
			display: none;
		}
	}
	.nav ul {
		padding: 60px 9% 5%;
	}
	.post-excerpt p {
		font-size: 0.85em;
	}
	.post-content img {
		padding: 0;
		width: calc(100% +32px);
		min-width: 0;
		max-width: 112%;
	}
	.author-meta li {
		float: none;
		margin: 0;
		line-height: 1.75em;
		&:before {
			display: none;
		}
	}
	.post-head.main-header {
		height: 30vh;
	}
	.tag-head.main-header {
		height: 20vh;
	}
	.author-head.main-header {
		height: 20vh;
	}
}
@-webkit-keyframes fade-in-down {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-10px);
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translateY(-10px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translateY(0);
	}
}
@keyframes fade-in-down {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-10px);
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translateY(-10px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translateY(0);
	}
}
@-webkit-keyframes bounce {
	0% {
		-webkit-transform: translateY(0) rotate(-90deg);
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translateY(0) rotate(-90deg);
	}
	10% {
		-webkit-transform: translateY(0) rotate(-90deg);
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translateY(0) rotate(-90deg);
	}
	25% {
		-webkit-transform: translateY(0) rotate(-90deg);
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translateY(0) rotate(-90deg);
	}
	40% {
		-webkit-transform: translateY(0) rotate(-90deg);
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translateY(0) rotate(-90deg);
	}
	50% {
		-webkit-transform: translateY(0) rotate(-90deg);
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translateY(0) rotate(-90deg);
	}
	20% {
		-webkit-transform: translateY(-10px) rotate(-90deg);
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translateY(-10px) rotate(-90deg);
	}
	30% {
		-webkit-transform: translateY(-5px) rotate(-90deg);
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translateY(-5px) rotate(-90deg);
	}
}
@keyframes bounce {
	0% {
		-webkit-transform: translateY(0) rotate(-90deg);
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translateY(0) rotate(-90deg);
	}
	20% {
		-webkit-transform: translateY(0) rotate(-90deg);
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translateY(0) rotate(-90deg);
	}
	50% {
		-webkit-transform: translateY(0) rotate(-90deg);
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translateY(0) rotate(-90deg);
	}
	80% {
		-webkit-transform: translateY(0) rotate(-90deg);
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translateY(0) rotate(-90deg);
	}
	100% {
		-webkit-transform: translateY(0) rotate(-90deg);
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translateY(0) rotate(-90deg);
	}
	40% {
		-webkit-transform: translateY(-10px) rotate(-90deg);
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translateY(-10px) rotate(-90deg);
	}
	60% {
		-webkit-transform: translateY(-5px) rotate(-90deg);
		//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
		transform: translateY(-5px) rotate(-90deg);
	}
}
.wrapper {
	width: 95%;
	margin: 3em auto;
}
.masonry {
	margin: 1.5em 0;
	padding: 0;
	-moz-column-gap: 1.5em;
	-webkit-column-gap: 1.5em;
	//Instead of the line below you could use @include column-gap($width)
	column-gap: 1.5em;
	font-size: .85em;
	.post {
		display: inline-block;
		background: $white;
		padding: 1.5em;
		margin: 0 0 1.5em;
		width: 100%;
		//Instead of the line below you could use @include box-sizing($bs)
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		//Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
		box-shadow: 0 1px 1px 0 $black_18;
		//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
		border-radius: 3px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		&:hover {
			//Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
			box-shadow: 2px 2px 4px 0 $color_celeste_approx;
            
            .post-image img {
				@extend %extend_10;
			}
		}
		.post-image {
			display: block;
			margin: 0;
			padding: 0;
			position: relative;
			margin: -1.5em -1.5em 0;
            overflow: hidden;
            
			&:after {
				content: '';
				position: absolute;
				bottom: -2.0em;
                left: -5%;
				width: 110%;
				height: 4em;
				background: $white;
				border-top: 4px solid $color_rose_approx;

                -moz-transform: rotate(5deg);
                -o-transform: rotate(5deg);
                -ms-transform: rotate(5deg);
			}
			img {
				transition: all ease-out 1s;
				opacity: 1.0;
				display: block;
				width: 100%;
				height: auto;
				margin: 0;
				padding: 0;
			}
		}
		&:focus .post-image img {
			@extend %extend_10;
		}
	}
	.post-excerpt a {
		color: $color_rose_approx;
	}
}
@media only screen and(min-width: 400px) {
	.masonry {
		-moz-column-count: 2;
		-webkit-column-count: 2;
		//Instead of the line below you could use @include column-count($count)
		column-count: 2;
	}
}
@media only screen and(min-width: 700px) {
	.masonry {
		-moz-column-count: 3;
		-webkit-column-count: 3;
		//Instead of the line below you could use @include column-count($count)
		column-count: 3;
	}
}
@media only screen and(min-width: 1280px) {
	.wrapper {
		width: 1260px;
	}
}
svg:not(:root) {
	overflow: hidden;
}
.icon-ghost:before {
	content: "\f600";
}
.icon-feed:before {
	content: "\f601";
}
.icon-twitter:before {
	content: "\f602";
	font-size: 1.1em;
}
.icon-google-plus:before {
	content: "\f603";
}
.icon-facebook:before {
	content: "\f604";
}
.icon-arrow-left:before {
	content: "\f605";
}
.icon-stats:before {
	content: "\f606";
}
.icon-location:before {
	content: "\f607";
	margin-left: -3px;
}
.icon-link:before {
	content: "\f608";
}
.icon-menu:before {
	content: "\f609";
}
.nav-opened .menu-button {
	padding: 0 12px;
	background: $color_woodsmoke_approx;
	border-color: $color_woodsmoke_approx;
	color: $white;
	-webkit-transform: translate3D(94px, 0, 0);
	-ms-transform: translate3D(94px, 0, 0);
	//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
	transform: translate3D(94px, 0, 0);
	//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
	transition: all 0.3s ease;
	.word {
		opacity: 0;
		//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
		transition: all 0.3s ease;
	}
}
.post-title a {
	text-decoration: none;
}
.post-excerpt p {
	margin: 0;
	font-size: 0.9em;
	line-height: 1.7em;
}
.post-content img {
	display: block;
	max-width: 126%;
	height: auto;
	padding: 0.6em 0;
	position: relative;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	//Instead of the line below you could use @include transform($scale, $rotate, $transx, $transy, $skewx, $skewy, $originx, $originy)
	transform: translateX(-50%);
}
.post-head.main-header {
	height: 65vh;
	min-height: 180px;
}
.tag-head.main-header {
	height: 40vh;
	min-height: 180px;
}
.author-head.main-header {
	height: 40vh;
	min-height: 180px;
}
.content .embedPastebin {
	margin-bottom: 1.75em;
}
