style.scss

/* ==========================================================================
   Includes
   ========================================================================== */

@import "fonts";
@import "icons";

$breakpoint-phone:		30em;
$breakpoint-tablet:		50em;
$breakpoint-desktop:	70em;


:root {
  --color-primary: #36D995;
  --color-primary-active: #2DB77E;
}

$color-primary-default:		var(--color-primary); /* Light */
$color-primary-active:		var(--color-primary-active); /* Dark */

$color-yellow-100:	#FFC336;

$color-gray-97: #F2F3F5;
$color-gray-90: #E1E2E6;
$color-gray-85: #D4D5D9;
$color-gray-65: #9D9FA6;
$color-gray-50: #737580;
$color-gray-40: #595B66;
$color-gray-25: #363740;
$color-gray-15: #1F2026;


/* ==========================================================================
   Basics
   ========================================================================== */


html {}

body {
	font: 300 1em / 1.5em 'Merriweather Sans', sans-serif;
	color: $color-gray-40;
}

::-moz-selection, ::selection {
	color: #222;
	background: #D6EDFF;
	text-shadow: none;
}

a {
	color: inherit;
	text-decoration: none;
	font-weight: 400;
	-webkit-transition: all ease-out 0.2s;
	transition: all ease-out 0.2s;

	&:hover,
	&:focus {
		color: $color-gray-15;
	}
}

.post-content {
	display: flex;
  flex-direction: column;
  align-items: center;

	> * {
	  min-width: 100%;
	  max-width: 100%;
	  box-sizing: border-box;

		&:last-child {
			margin-bottom: 0;
		}

		&:first-child {
			margin-top: 0;
		}
	}

	a {
		border-bottom: 2px solid $color-primary-default;

		&:hover,
		&:focus {
			border-color: $color-primary-active;
		}
	}

	h1, h2, h3, h4, h5, h6 {
		text-rendering: optimizeLegibility;
		color: $color-gray-15;

		a {
			font-weight: inherit;
			color: inherit;
		}
	}

	h1 {
		font-size: 2em;
		line-height: 1em;
		margin: 1em 0;
	}

	h2 {
		font-size: 1.75em;
		line-height: 1.143em;
		margin: 1.143em 0;
	}

	h3 {
		font-size: 1.5em;
		line-height: 1.33333em;
		margin: 1em 0;
	}

	h4 {
		font-size: 1.25em;
		line-height: 1.2em;
		margin: 1.2em 0;
	}

	p {
		margin: 0 0 2em;
	}

	ul {
		list-style: none;
	}
	li {
		position: relative;
	}
	ul > li:before,
	ol > li:before {
		position: absolute;
		width: 2em;
		margin-left: -3em;
		font-size: 1em;
		font-weight: 400;
		line-height: 1.5em;
		text-align: right;
		color: $color-gray-15;
	}
	ul > li:before {
		margin-top: 0.125em;
		content: '*';
	}
	ol {
		list-style-type: none;
		counter-reset: item;
	}
	ol > li:before {
		content: counter(item) ". " !important;
		counter-increment: item;
	}

	ol,
	ul {
		padding-left: 3em;
		margin: 0 0 2em;

		ol,
		ul {
			padding-left: 1.5em;
			margin: 0 0 1em;
		}
	}

	dl {
		margin: 0 0 2em;

		dt {
			font-size: 0.875em;
			line-height: 1.143em;
			font-weight: 700;
			margin-bottom: 0.571em;
			color: $color-gray-15;
		}

		dd {
			margin-left: 1em;
			margin-bottom: 1.5em;
		}
	}

	hr {
		display: block;
		height: 1px;
		margin: 0 0 2em;
		padding: 0;
		background: $color-gray-90;
		border: 0;
	}

	blockquote {
		margin: 0 0 2em;
		padding: 0 1em;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		border-left: 0.25em solid $color-gray-85;
		font-style: italic;
		font-weight: 400;
		color: $color-gray-40;
		background: transparent;

		* {
			margin: 1em auto;
			color: inherit;

			&:first-child {
				margin-top: 0;
			}

			&:last-child {
				margin-bottom: 0;
			}
		}
	}

	em, i {
		font-style: italic;
		color: $color-gray-25;

		a {
			font-weight: inherit;
			font-style: inherit;
			color: inherit;
		}
	}

	strong, b {
		font-weight: 700;
		color: $color-gray-25;

		a {
			font-weight: inherit;
			color: inherit;
		}
	}

	small {
		font-size: 0.9em;
	}

	mark {
		background-color: $color-yellow-100;
	}

	code,
	tt {
		position: relative;
		top: -1px;
		padding: 3px 6px;
		margin: -1px 2px;
		font-family: 'Inconsolata', monospace;
		font-size: 0.875em;
		line-height: 1.143em;
		white-space: pre-line;
		background: $color-gray-90;
		color: #000;
		font-weight: 400;
		border-radius: 2px;
	}

	pre {
		margin: 0 0 2em;
		width: 100%;
		padding: 1em;
		font-family: 'Inconsolata', monospace;
		white-space: pre;
		overflow: auto;
		background: $color-gray-65;
		color: #fff;
		box-sizing: border-box;

		code,
		tt {
			position: static;
			top: auto;
			font-size: 1em;
			line-height: 1.5em;
			white-space: -moz-pre-wrap;
			white-space: pre-wrap;
			vertical-align: inherit;
			border: none;
			padding: 0;
			background: transparent;
		}
	}

	pre.codeblock {
		position: relative;
		padding: 1em;
		overflow: hidden;

		code {
			display: block;
			border: 0;
			padding: 1.5em;
			margin: -1em;
			margin-left: 2em;
			white-space: inherit;
			overflow-x: auto;
			background: $color-gray-90;
		}

		.lines {
			position: absolute;
			width: 3em;
			height: 100%;
			left: 0;
			top: 0;
			padding: 1.5em 0;
			border-right: 1px solid $color-gray-85;
			font-size: 1em;
			line-height: 1.5em;
			text-align: right;
			box-sizing: border-box;
			background: $color-gray-90;
			user-select: none;
			cursor: default;

			.line {
				display: block;
				padding-right: 0.5em;
				  color: $color-gray-65;
			}
		}
	}

	kbd {
		display: inline-block;
		margin: 0 2px 4px;
		padding: 1px 8px;
		border: #ccc 1px solid;
		color: #666;
		text-shadow: #fff 0 1px 0;
		font-size: 0.875em;
		font-weight: bold;
		background: $color-gray-97;
		border-radius: 4px;
		box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 1px 0 0 #fff inset;
	}


	table {
		width: 100%;
		max-width: 100%;
		margin: 0 0 2em;
		background-color: transparent;
		border: 1px solid $color-gray-90;
		border-collapse: collapse;

		th,
		td {
			position: relative;
			padding: 1em;
			line-height: 1em;
			text-align: left;
			border: 1px solid $color-gray-90;
		}

		th {
			font-weight: 700;
			font-size: 0.75em;
			line-height: 1.33333em;
			padding: 1.33333em;
			color: $color-gray-15;
		}
	}

	img {
		display: block;
		max-width: 100%;
		height: auto;
		margin: 2.5em auto;
	}

	figcaption {
		color: $color-gray-40;
		text-align: center;
		max-width: 32em;
		margin: auto;
		font-size: 0.75em;
		line-height: 1.25em;
		padding: 0.66666em 0;
	}

	iframe {
		margin: 2.5em auto;
	}

	.fluid-width-video-wrapper {
		margin: 0 0 2em;

		iframe {
			margin: auto;
		}
	}

	.kg-image-card {
	  margin: 0 0 2em;
	  max-width: none !important;

	  &.kg-width-wide {
	    max-width: 64em !important;
	    width: calc( 100vw - 16em );
			margin: 2vw 0 calc( 2em + 2vw);

			@media only screen and (max-width: $breakpoint-desktop) {
				width: calc( 100vw - 8em );
			}

			@media only screen and (max-width: $breakpoint-tablet) {
				width: calc( 100vw - 2em );
			}
	  }

	  &.kg-width-full {
			max-width: 80em !important;
	    width: calc( 100vw - 8em );
			margin: 2vw 0 calc( 2em + 2vw);

			@media only screen and (max-width: $breakpoint-desktop) {
				width: calc( 100vw - 4em );
			}

			@media only screen and (max-width: $breakpoint-tablet) {
				width: 100vw;
			}
	  }

	  .kg-image {
	    margin: 0 auto;
	  }

	  .kg-image-full + figcaption {
	    margin-bottom: 1.33333em;
	  }
	}

	.kg-gallery-card {
		max-width: 64em !important;
		width: calc( 100vw - 16em );
		margin: 2vw 0 calc( 2em + 2vw);

		@media only screen and (max-width: $breakpoint-desktop) {
			width: calc( 100vw - 8em );
		}

		@media only screen and (max-width: $breakpoint-tablet) {
			width: calc( 100vw - 2em );
		}
	}

	.kg-gallery-container {
		display: flex;
		flex-direction: column;
	}

	.kg-gallery-row {
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.kg-gallery-image img {
		display: block;
		margin: 0;
		width: 100%;
		height: 100%;
	}

	.kg-gallery-row:not(:first-of-type) {
		margin: 0.75em 0 0 0;
	}

	.kg-gallery-image:not(:first-of-type) {
		margin: 0 0 0 0.75em;
	}

	.kg-embed-card {
	  margin: 0 0 2em;

	  > * {
	    margin-left: auto;
	    margin-right: auto;
	  }
	}

	.kg-bookmark-card {
	  width: 100%;
	  margin: 0 0 2em;
	}

	.kg-bookmark-container {
	  display: flex;
	  text-decoration: none;
	  min-height: 10em;
	  background: $color-gray-97;
	  border: 0 !important;
	  overflow: hidden;
	}

	.kg-bookmark-content {
	  display: flex;
	  flex-direction: column;
	  flex-grow: 1;
	  align-items: flex-start;
	  justify-content: start;
	  padding: 1.5em;
	  color: $color-gray-40;
	}

	.kg-bookmark-title {
	  color: $color-gray-15;
	  font-size: 0.75em;
	  line-height: 2em;
	  font-weight: 700;
	}

	.kg-bookmark-description {
	  display: -webkit-box;
	  font-size: 0.75em;
	  line-height: 1.66666em;
	  font-weight: 400;
	  margin: 0.5em 0 1em;
	  max-height: 3.33333em;
	  overflow-y: hidden;
	  -webkit-line-clamp: 2;
	  -webkit-box-orient: vertical;
	}

	.kg-bookmark-thumbnail {
	  position: relative;
	  min-width: 33%;
	  max-height: 100%;
	}

	.kg-bookmark-thumbnail img {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  margin: 0;
	  object-fit: cover;
	}

	.kg-bookmark-metadata {
	  display: flex;
	  align-items: center;
	  font-size: 0.75em;
	  line-height: 1.66666em;
	  color: $color-gray-25;
	  font-weight: 400;
	  margin-top: 1em;
	  flex-wrap: wrap;
	}

	.kg-bookmark-icon {
	  width: 1.33333em;
	  height: 1.33333em;
	  margin: 0 0.75em 0 0;
	}

	.kg-bookmark-author:after {
	  content: "•";
	  margin: 0 0.33333em;
	}

	.kg-bookmark-publisher {
	    color: $color-primary-default;
	}

	@media (max-width: $breakpoint-tablet) {
	  .kg-bookmark-container {
	    flex-direction: column;
	  }

	  .kg-bookmark-thumbnail {
	    order: 1;
	    width: 100%;
	    min-height: 160px;
	  }

	  .kg-bookmark-thumbnail img {
	    border-radius: 3px 3px 0 0;
	  }

	  .kg-bookmark-content {
	    order: 2
	  }
	}
}



.avatar {
	position: relative;
	overflow: hidden;
	background: $color-gray-90;
	margin: 0;

	&:before,
	&:after {
		content: '';
		position: absolute;
		z-index: 1;
		width: 50%;
		height: 50%;
		bottom: 35%;
		left: 25%;
		border-radius: 100%;
		background: $color-gray-85;
	}

	&:after {
		width: 100%;
		bottom: -25%;
		left: 0;
	}

	img {
		position: relative;
		z-index: 2;
		display: block;
		width: 100%;
		height: auto;
	}
}


/* ==========================================================================
   Default
   ========================================================================== */

#nprogress {

	.bar {
		background: $color-primary-default !important;
		height: 3px !important;

		.peg {
			box-shadow: none !important;
		}
	}

	.spinner {
		display: none !important;
		top: 50% !important;
		right: 50% !important;

		.spinner-icon {
			width: 4em !important;
			height: 4em !important;
			margin: -4em -4em 0 0 !important;
			border-top-color: $color-primary-default !important;
			border-left-color: $color-primary-default !important;
		}
	}
}

body {
	background: #fff;
}

.menu-initial {

	body {
		transition:  all ease-out 0.3s;
		overflow: hidden;
	}
}

.menu-active {

	body {
		background: $color-gray-15;
	}
}


.inner {
	max-width: 48em;
	margin: 0 auto;
	padding: 0 4em;

	@media only screen and (max-width: $breakpoint-tablet) {
		padding: 0 2em;
	}

	@media only screen and (max-width: $breakpoint-phone) {
		padding: 0 1em;
	}
}

#wrapper {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	min-height: 100vh;
	padding-bottom: 6em;
	background: $color-gray-97;

	@media only screen and (max-width: $breakpoint-phone) {
		padding-bottom: 8.66666em;
	}
}

.wrapper-o {
	padding: 4em;

	@media only screen and (max-width: $breakpoint-desktop) {
		padding: 2em;
	}

	@media only screen and (max-width: $breakpoint-tablet) {
		padding: 0;
	}
}

.wrapper {
	position: relative;
	max-width: 80em;
	margin: 0 auto 4em;
	padding: 0;
	transition: opacity ease-in 0.5s;
	z-index: 10;
}

.loading .wrapper {
		opacity: 0;
}

.post-template .wrapper,
.page-template .wrapper {
	background: #fff;
	padding-bottom: 4em;
	border-radius: 2px;
	overflow: hidden;
  transform: scale(1) translate3d(0,0,0);
	transform-style: preserve-3d;
	transform-origin: 50% top;
	opacity: 1;
	transition: all ease-out .5s;

	@media only screen and (max-width: $breakpoint-tablet) {
		border-top: 1px solid $color-gray-90;
		border-bottom: 1px solid $color-gray-90;
		border-radius: 0;
		padding-bottom: 2em;
	}
}

.post-loading .post-template .wrapper,
.post-loading .page-template .wrapper {
	transform: scale(0.9) translate3d(0,2em,0);
	opacity: 0;
}

/* ==========================================================================
   Push Animations
   ========================================================================== */

@keyframes pushPrev {
	0% {
		transform: translate3d(0,0,0);
	}
	75% {
		opacity: 1;
	}
	100% {
		transform: translate3d(-150%,0,0);
		opacity: 0;
	}
}

@keyframes pushedPrev {
	0% {
		transform: translate3d(100%,0,0);
		opacity: 0;
	}
	100% {
		transform: translate3d(0,0,0);
		opacity: 1;
	}
}

@keyframes pushNext {
	0% {
		transform: translate3d(0,0,0);
	}
	75% {
		opacity: 1;
	}
	100% {
		transform: translate3d(150%,0,0);
		opacity: 0;
	}
}

@keyframes pushedNext {
	0% {
		transform: translate3d(-100%,0,0);
		opacity: 0;
	}
	100% {
		transform: translate3d(0,0,0);
		opacity: 1;
	}
}

#push {
	transform: translate3d(0,0,0);
	transform-style: preserve-3d;
	opacity: 1;
}

.push-next {

	#push {
		animation: pushNext ease-in 0.5s forwards !important;
	}
}

.pushed-next {

	#push {
		animation: pushedNext ease-out 0.5s forwards;
	}
}

.push-prev {

	#push {
		animation: pushPrev ease-in 0.5s forwards !important;
	}
}

.pushed-prev {
	#push {
		animation: pushedPrev ease-out 0.5s forwards;
	}
}



/* ==========================================================================
   Navigation
   ========================================================================== */

#nav {
	position: relative;
	width: 100%;
	top: 0;
  display: flex;
  justify-content: space-between;
	background: #fff;
	z-index: 70;
	transition: all ease-out 0.4s;
	transform: translate3d(0,0,0);
	transform-style: preserve-3d;
	opacity: 1;

	.nav-logo {
		max-width: 100%;
		height: 4em;
		padding: 1em;
		box-sizing: border-box;

		a {
			display: inline-flex;
		}

		img {
			display: block;
			width: auto;
			max-width: none;
			height: 2em;
			margin: 0;
			margin-right: 1em;
		}

		.name {
			display: block;
			line-height: 2em;
			font-weight: 800;
			color: $color-gray-25;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.description {
			display: block;
			line-height: 2em;
			font-weight: 300;
			color: $color-gray-65;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin-left: 0.5em;

			@media only screen and (max-width: $breakpoint-phone) {
				display: none;
			}
		}
	}

	.nav-menu {
    display: flex;

    .menu-list {
      display: flex;
      list-style: none;
      padding: 0;
      margin: 0;
      line-height: 2em;

      @media only screen and (max-width: $breakpoint-tablet) {
				display: none;
			}

      .menu-list-item {
        padding: 1em;

        a {
          display: block;
          white-space: nowrap;

          &.current {
  					font-weight: 700;
  					color: $color-gray-25;
  				}
        }
      }
    }

		.nav-menu-open {
			display: none;
			width: 1em;
			height: 1em;
			line-height: 1em;
			padding: 1.5em;
			text-align: center;
			float: left;
			cursor: pointer;

      @media only screen and (max-width: $breakpoint-tablet) {
				display: block;
			}

			&:hover,
			&:focus {
				background: $color-gray-90;
			}

			i:before {
				margin: auto;
			}
		}
	}
}

.loading #nav {
	transform: translate3d(0,-100%,0);
	opacity: 0;
}

#menu {
	display: none;
	position: fixed;
	left: 50%;
	top: 5%;
	width: 30em;
	height: 90%;
	margin-left: -15em;
	background: transparent;
	box-sizing: border-box;
	padding: 3em 0 5em;
	overflow: hidden;
	transition: all ease-out 0.3s;
	transform: translate3d(0,2em,0);
	transform-style: preserve-3d;
	opacity: 0;
	z-index: 100;

	@media only screen and (max-width: $breakpoint-tablet) {
		width: 90%;
		left: 5%;
		margin-left: auto;
	}

	&.initial {
		display: block;
	}

	&.active {
		opacity: 1;
		transform: translate3d(0,0,0);
	}

	.menu-header {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 3.5em;
		padding: 1em 1.5em 0.5em;
		margin-bottom: 1em;
		line-height: 2em;
		z-index: 110;
		box-sizing: border-box;
		background: #fff;

		&:before {
			content: '';
			position: absolute;
			left: -5%;
			bottom: -1em;
			width: 110%;
			height: 2em;
			background: #fff;
			border-bottom: 4px solid $color-primary-default;
			box-shadow: 0 0.125em 0.125em rgba(0,0,0,0.1);
			transform: rotate(2.5deg);
			transition: all ease-out 0.2s;
			z-index: 115;
		}

		&:after {
			clear: both;
			content: '';
			display: table;
		}

		.menu-label {
			position: relative;
			display: block;
			float: left;
			z-index: 120;
		}

		.menu-close {
			position: relative;
			display: block;
			float: right;
			width: 2em;
			height: 2em;
			padding: 1em;
			margin: -1em -1.5em -1em 0;
			cursor: pointer;
			z-index: 125;

			&:after,
			&:before {
				content: '';
				position: absolute;
				left: 50%;
				top: 50%;
				background: $color-gray-65;
				transform: rotate(45deg);
			}

			&:hover,
			&:focus {

				&:after,
				&:before {
					background: $color-gray-50;
				}
			}

			&:after {
				width: 2px;
				height: 1em;
				margin: -0.5em 0 0 -1px;
			}
			&:before {
				width: 1em;
				height: 2px;
				margin: -1px 0 0 -0.5em;
			}
		}
	}

	.menu-list {
		position: relative;
		list-style: none;
		margin: 0;
		padding: 2em 0;
		height: 100%;
		box-sizing: border-box;
		overflow-x: hidden;
		overflow-y: scroll;
		background: #fff;

		.menu-list-item {
			position: relative;
			z-index: 5;

			&:after {
				content: '';
				position: absolute;
				left: 1.5em;
				top: 0;
				width: 100%;
				border-top: 1px solid $color-gray-90;
			}

			&:first-child {

				&:after {
					display: none;
				}
			}

			a {
				position: relative;
				display: block;
				padding: 1em 1.5em;
				font-weight: inherit;
				font-weight: 400;

				&:hover,
				&:focus {
					background: $color-gray-90;
				}

				i {
					color: inherit;
				}

				&.current {
					font-weight: 700;
					color: $color-gray-25;

					&:before {
						content: '';
						position: absolute;
						left: 0;
						top: 0;
						height: 100%;
						border-left: 4px solid $color-primary-default;
					}
				}
			}
		}
	}

  .menu-members {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    padding: 0.5em 1em;
    box-sizing: border-box;
    justify-content: space-around;
    align-content: stretch;
    z-index: 105;
    background: #fff;
    border-top: 1px solid $color-gray-90;

    button {
      display: block;
      margin: 0.5em;
      padding: 1em;
      flex: 1;
      border: 0;
      color: $color-gray-25;
      background: $color-gray-90;
      border-radius: 2px;
      font-weight: 700;
      cursor: pointer;

      &:hover,
      &:focus {
        background: $color-gray-85;
      }

      &.cta {
        color: #fff;
        background: $color-primary-default;

        &:hover,
        &:focus {
          background: $color-primary-active;
        }
      }
    }
  }
}

.overlay {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 80;
	display: none;

	&:before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: $color-gray-15;
		opacity: 0;
		transition: all ease-out 0.3s;
		transform-style: preserve-3d;
	}
}

.menu-initial {

	.overlay {
		display: block;
	}
}

.menu-active {

	.overlay:before {
		opacity: 0.9;
	}
}


/* ==========================================================================
   Header
   ========================================================================== */

#header {
	position: relative;
	padding: calc( 4em + 4vw) 0 calc( 2em + 2vw );

	.inner {
		position: relative;
		z-index: 2;
	}

	.header-title {
		display: block;
		text-align: center;
	}

	.header-name {
		font-weight: 700;
		letter-spacing: -1px;
		display: block;
		line-height: 1em;
		font-size: calc( 2em + 1vw);
		text-decoration: none;
		color: $color-gray-15;
		padding: 0;
		margin: 0;

		em {
			font-family: 'Helvetica Neue', sans-serif;
			position: relative;
			top: -0.33333em;
			margin-left: -0.25em;
			display: inline-block;
			width: auto;
			min-width: 0.5em;
			height: 1.5em;
			padding: 0 0.66666em;
			line-height: 1.5em;
			font-style: normal;
			font-weight: 400;
			font-size: 0.5em;
			letter-spacing: 1px;
			background: $color-primary-default;
			color: #fff;
			border-radius: 2em;
		}
	}

	&.has-cover .header-name {
		color: #fff;
	}

	.header-description {
		display: block;
		margin: 1em auto 0;
		color: $color-gray-65;
		position: relative;
		font-weight: 300;
		font-size: calc( 1em + 0.5vw);
		line-height: 1.25em;

		&:after {
			content: '';
			position: absolute;
			height: 1px;
			width: 100px;
			margin-left: -50px;
			left: 50%;
			top: -0.5em;
			background: $color-gray-85;
		}
	}

	&.has-cover .header-description {
		color: #fff;

		&:after {
			background: #fff;
		}
	}


	.header-image {
		width: 3em;
		height: 3em;
		margin: -1em auto 1em;
		overflow: hidden;
		border-radius: 3em;
		border: 2px solid $color-primary-default;

		img {
			width: 100%;
			margin: auto;
		}
	}

	&.has-cover .header-image {
		border-color: #fff;
	}

	.header-meta {
		display: block;
		margin: 1.25em auto -1.25em;
		color: $color-gray-65;
		position: relative;
		font-weight: 300;
		font-size: 0.8em;
		line-height: 1.25em;

		span {
			display: inline-block;
			font-weight: 400;
			color: $color-gray-40;
			margin-right: 1em;
			margin-bottom: 1em;
			white-space: nowrap;

			a {
				color: inherit;
				text-decoration: none;
				border-bottom: 1px solid transparent;

				&:hover,
				&:focus {
					border-bottom-color: $color-primary-default;
				}
			}

			i {
				color: $color-gray-65;
			}
		}

	}

	&.has-cover .header-meta {
		color: #fff;

		span {
			color: #fff;

			i {
				color: #fff;
				opacity: 0.5;
			}
		}
	}

	.header-cover {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		margin-top: -4em;
		padding: 4em 0 8em;
		background: no-repeat fixed center 100% / cover;
		z-index: 1;

		@media only screen and (max-width: $breakpoint-tablet) {
			background-attachment: scroll;
			padding: 4em 0;
		}

		&:before {
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			background: $color-gray-15;
			opacity: 0.2;
		}

		&:after {
			content: '';
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 0;
			border-bottom: 4px solid $color-primary-default;
		}
	}
}


/* ==========================================================================
   Footer
   ========================================================================== */

#footer {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
	font-size: 1em;
	line-height: 1em;
	border-top: 1px solid $color-gray-90;
	color: $color-gray-50;
	z-index: 20;
	transition: all ease-out 0.4s;
	transform: translate3d(0,0,0);
	transform-style: preserve-3d;
	opacity: 1;

	a {
		color: $color-gray-40;
		font-weight: 400;
	}

	.credits {
		display: flex;
		justify-content: space-between;
		text-align: center;
		font-size: 0.75em;
		line-height: 1.33333em;
		padding: 2.66666em;

		@media only screen and (max-width: $breakpoint-phone) {
			flex-direction: column;
		}

		span {
			display: block;
		}

		.credits-theme {

			@media only screen and (max-width: $breakpoint-phone) {
				order: 2;
				margin-bottom: 0.66666em;
			}
		}

		.credits-links {

			@media only screen and (max-width: $breakpoint-phone) {
				order: 1;
				margin-bottom: 1.33333em;
			}

			a {
				margin: 0 0.66666em;
			}
		}

		.credits-software {

			@media only screen and (max-width: $breakpoint-phone) {
				order: 3;
			}
		}
	}
}

.loading #footer {
	transform: translate3d(0,100%,0);
	opacity: 0;
}

/* ==========================================================================
   Post
   ========================================================================== */

.post {
	position: relative;
	z-index: 20;

	.post-image {
		display: block;
		margin: 0;
		padding: 0;

		img {
			display: block;
			width: 100%;
			height: auto;
			margin: 0;
			padding: 0;
		}
	}

	.post-meta {
		position: relative;
		display: block;
		font-size: 0.75em;
		line-height: 1.33333em;
		font-weight: 400;
		margin-bottom: 1.33333em;

		a {
			color: $color-gray-40;
			text-decoration: none;
			border-bottom: 1px solid transparent;

			&:hover,
			&:focus {
				border-bottom-color: $color-primary-default;
			}
		}
	}

	.post-title {
		position: relative;
		color: #000;
		font-size: calc( 2em + 2vw );
		line-height: 1.375em;
		font-weight: 800;
		text-indent: -1px;
		letter-spacing: -1px;
		margin: 0.25em 0 0.75em;
		hyphens: auto;

		&:before {
			content: '';
			position: absolute;
			left: 0;
			bottom: -0.33333em;
			width: 1em;
			margin-bottom: -2px;
			border-bottom: 4px solid $color-primary-default;
		}

		a {
			text-decoration: none;
			color: inherit;
			font-weight: inherit;
		}
	}

	.post-header {
		padding: 8vw 0 2vw;

		&.has-cover {
			position: relative;
			display: flex;
			flex-direction: column;
			margin-bottom: 2em;
			padding: calc( 6em + 4vw) 0 calc( 8em + 2vw);
			box-sizing: border-box;
			background: $color-gray-15;
			overflow: hidden;
			color: #fff;

			&:after {
				content: '';
				position: absolute;
				left: -5%;
				bottom: -4em;
				width: 110%;
				height: 8em;
				background: #fff;
				border-top: 4px solid $color-primary-default;
				box-shadow: 0 0 2em rgba(0,0,0,0.2);
				transform: rotate(5deg);
				transition: all ease-out 0.2s;
				z-index: 20;
			}

			&:before {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: $color-gray-15;
				opacity: 0.2;
				z-index: 10;
			}

			* {
				color: inherit;

				&:before {
					display: none;
				}
			}

			.inner {
				width: 100%;
				margin: auto;
				z-index: 15;
			}

			.post-cover {
				position: absolute;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: 5;

				img {
					display: block;
					width: 100%;
					height: 100%;
					object-fit: cover;
  				object-position: 50% 50%;
				}
			}
		}
	}
}

/* ==========================================================================
   Index
   ========================================================================== */

@keyframes fade {
	0% {
		transform: translate3d(0,3em,0);
		opacity: 0;
	}
	100% {
		transform: translate3d(0,0,0);
		opacity: 1;
	}
}

.post-list {
	position: relative;
	margin: 0 -0.5em;
	box-sizing: border-box;

	@media only screen and (max-width: $breakpoint-tablet) {
		margin: 0 0.5em;
	}

	.post {
		width: 33.3%;
		padding: 0.5em;
		box-sizing: border-box;

		@media only screen and (max-width: $breakpoint-tablet) {
			width: 49.9%;
		}

		@media only screen and (max-width: $breakpoint-phone) {
			width: 100%;
			float: none;
		}

		transform: translate3d(0,3em,0);
		transform-style: preserve-3d;
		opacity: 0;

		animation: fade ease-out 0.5s forwards;
		animation-delay: 1.4s;

		&.initial {
			z-index: 25;

			.inner {
				transition: all ease-in 0.5s;
			}
		}

		&.active {

			.inner {
				transform: scale(1.5);
			}
		}

		&:nth-child(1) {
			animation-delay: 0.1s;
		}
		&:nth-child(2) {
			animation-delay: 0.2s;
		}
		&:nth-child(3) {
			animation-delay: 0.3s;
		}
		&:nth-child(4) {
			animation-delay: 0.4s;
		}
		&:nth-child(5) {
			animation-delay: 0.5s;
		}
		&:nth-child(6) {
			animation-delay: 0.6s;
		}
		&:nth-child(7) {
			animation-delay: 0.7s;
		}
		&:nth-child(8) {
			animation-delay: 0.8s;
		}
		&:nth-child(9) {
			animation-delay: 0.9s;
		}
		&:nth-child(10) {
			animation-delay: 1.0s;
		}
		&:nth-child(11) {
			animation-delay: 1.1s;
		}
		&:nth-child(12) {
			animation-delay: 1.2s;
		}

		&.post.featured {

			.inner {
				background: $color-gray-15;
				color: $color-gray-65;

				&:after {
					content: '';
					position: absolute;
					right: 0;
					top: 0;
					width: 0;
					height: 0;
					border-right: 3em solid $color-yellow-100;
					border-bottom: 3em solid transparent;
					z-index: 1;
				}

				&:before {
					font-family: "icons";
					content: '\e808';
					position: absolute;
					right: 0;
					top: 0;
					width: 1.75em;
					height: 1.75em;
					line-height: 2em;
					text-align: center;
					color: $color-gray-15;
					z-index: 2;
				}
			}

			.post-image {

				&:after {
					background: $color-gray-15;
					bottom: -2.5em;
					height: 5em;
				}
			}

			.post-title {
				color: #fff;
			}

			.post-more a {
				color: #fff;
			}
		}

		.inner {
			padding: 2em;
			margin: 0;
			max-width: none;
			background: #fff;
			box-sizing: border-box;
			transition: all ease-out 0.2s;
			transform: scale(1);
			transform-style: preserve-3d;
			border-radius: 2px;
			overflow: hidden;

			@media only screen and (max-width: $breakpoint-tablet) {
				padding: 1em;
			}
		}

		.post-link {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 10;
		}

		.post-image {
			position: relative;
			margin: -2em -2em 0;
			overflow: hidden;
			background: $color-primary-default;

			@media only screen and (max-width: $breakpoint-tablet) {
				margin: -1em -1em 0;
			}

			img {
				transition: all ease-out 0.3s;
				transform: scale(1);
				transform-style: preserve-3d;
				opacity: 1;
			}

			&:after {
				content: '';
				position: absolute;
				left: -5%;
				bottom: -2.5em;
				width: 110%;
				height: 4em;
				background: #fff;
				border-top: 4px solid $color-primary-default;
				box-shadow: 0 0 2em rgba(0,0,0,0.2);
				transform: rotate(5deg);
				transition: all ease-out 0.2s;
			}
		}

		&:hover,
		&:focus {

			.inner {
				box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 2px 6px rgba(0,0,0,0.05), 0 8px 48px rgba(0,0,0,0.1);
			}

			.post-image {

				img {
					transform: scale(1.05);
					opacity: 0.5;
				}

				&:after {
					border-top-width: 0;
					box-shadow: none;
				}
			}
		}

		.post-meta {

		}

		.post-title {
			font-size: 1.5em;
			line-height: 1.167em;
		}

		.post-excerpt {
			margin: 0;
		}

		.post-more {
			display: block;
			margin-top: 1.5em;

			a {
				display: inline-block;
				font-size: 0.875em;
				line-height: 1.143em;
				font-weight: 400;
				color: $color-gray-25;

				&:hover,
				&:focus {
					color: $color-gray-15;
				}

				i {
					color: $color-primary-active;
				}
			}
		}
	}
}


/* ==========================================================================
   Post Footer
   ========================================================================== */

.post-footer {
	margin: 4em 0;

	&:after {
		clear: both;
		content: '';
		display: table;
	}

	.post-tags {
		float: left;
		max-width: 60%;

		a {
			font-size: 0.875em;
			line-height: 1.714em;
			display: inline-block;
			border: 0;
			margin-bottom: 0.286em;
			padding: 0.286em 0.714em;
			border-radius: 2px;
			color: #fff;
			background: $color-primary-default;
			font-weight: 400;

			&:hover,
			&:focus {
				background: $color-primary-active;
			}
		}
	}

	.post-share {
		float: right;

		a {
			font-size: 0.75em;
			display: block;
			width: 2em;
			height: 2em;
			line-height: 2em;
			text-align: center;
			text-decoration: none;
			padding: 0.33333em;
			margin: 0 0 0.33333em 0.33333em;
			float: left;
			border-radius: 2px;
			color: #fff;
			background: $color-gray-50;

			&:hover,
			&:focus {

			}

			&:before {
				margin: auto;
			}

			span {
				display: none;
			}

			&.icon-twitter {
				background-color: #3ea9dd;
			}

			&.icon-facebook {
				background-color: #3c5a98;
			}
		}
	}
}

/* ==========================================================================
   Post Author
   ========================================================================== */

.post-author {
    margin-top: 4em;
    padding-top: 4em;
  	border-top: 1px solid $color-gray-90;

    @media only screen and (max-width: $breakpoint-phone) {
  		padding-bottom: 2em;
  	}
}

.post-authors {
	text-align: center;

	.post-authors-info {}
	.post-authors-authors {}
}


.post-author-card {
	display: flex;

	@media only screen and (max-width: $breakpoint-phone) {
    flex-direction: column;
    justify-content: center;
    padding-left: 1em;
    padding-right: 1em;
	}

	.post-author-avatar {
    flex-shrink: 0;
		display: block;
		width: 6em;
		height: 6em;
		margin: 0 2em 0 0;
		border-radius: 12em;
		overflow: hidden;

		@media only screen and (max-width: $breakpoint-phone) {
			width: 4em;
			height: 4em;
			margin: 0 auto 1em;
		}

		img {
			display: block;
			width: 100%;
			height: auto;
			margin: 0;
		}
	}

	.post-author-bio {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;

    @media only screen and (max-width: $breakpoint-phone) {
      text-align: center;
		}

		.post-author-name {
			font-size: 1.25em;
			line-height: 1.2em;
			margin-top: 0;
			margin-bottom: 0.75rem;
			font-weight: 800;
			color: $color-gray-25;
		}

		.post-author-about {
			margin-top: 0;
      margin-bottom: 0.75rem;
		}

		.post-author-meta {
      display: flex;
      flex-wrap: wrap;

      @media only screen and (max-width: $breakpoint-phone) {
        justify-content: center;
  		}

			span {
				display: block;
				font-size: 0.875em;
				line-height: 1.143em;
				margin-right: 1rem;
				margin-bottom: 1rem;
				color: $color-gray-50;
        white-space: nowrap;
			}

			.post-author-meta-location {
        font-style: italic;
			}

			.post-author-meta-website {

			}

			.post-author-meta-twitter {

			}

			.post-author-meta-facebook {

			}
		}
	}
}

/* ==========================================================================
   Post Comments
   ========================================================================== */

.post-comments {
	clear: both;
	margin: -3em 0 4em;
	border-radius: 2px;
	padding: 1em;
	border: 1px solid $color-gray-90;

	@media only screen and (max-width: $breakpoint-phone) {
		padding: 0.5em;
	}
}

/* ==========================================================================
   Post Nav
   ========================================================================== */

.post-nav {
	position: relative;

	@media only screen and (max-width: $breakpoint-desktop) {
		height: 7em;
		margin: 2em 0;
	}

	&:after {
		clear: both;
		content: '';
		display: table;
	}

	.post-nav-item {
		position: fixed;
		top: 50%;
		display: block;
		margin-top: -4em;
		overflow: hidden;
		border-radius: 10em;
		transition: none;

		@media only screen and (max-width: $breakpoint-desktop) {
			position: absolute;
			top: auto;
			margin: auto;
			max-width: 50%;
		}

		&:hover,
		&:focus {
			border-radius: 0;

			.post-nav-teaser {

				.post-nav-icon {
					box-shadow: 0 0 0 25em $color-primary-default;

					@media only screen and (max-width: $breakpoint-tablet) {
						box-shadow: 0 0 0 2px $color-primary-default;
					}
				}

				.post-nav-info {
					display: block;

					@media only screen and (max-width: $breakpoint-tablet) {
						display: none;
					}

					.post-nav-title {
						color: $color-gray-15;
					}

					.post-nav-excerpt {
						color: #fff;
					}
				}
			}
		}

		&.post-nav-next {
			left: 0;
			text-align: left;

			.post-nav-icon {
				float: left;

				i {
					left: -0.05em;
				}
			}

			.post-nav-info {
				padding-left: 6em;
			}
		}

		&.post-nav-prev {
			right: 0;
			text-align: right;

			.post-nav-icon {
				float: right;

				i {
					right: -0.05em;
				}
			}

			.post-nav-info {
				padding-right: 6em;
			}
		}

		.post-nav-teaser {
			display: block;
			padding: 1.5em;
			transition: all ease-out 0.2s;
			max-width: 25em;
			overflow: visible;

			&:after {
				clear: both;
				content: '';
				display: table;
			}

			.post-nav-icon {
				display: block;
				width: 5em;
				height: 5em;
				line-height: 5em;
				text-align: center;
				box-sizing: border-box;
				border-radius: 10em;
				border: 1px solid $color-primary-default;
				box-shadow: 0 0 0 0 transparent;
				transition: all ease-out 0.1s;
				background: $color-gray-97;

				@media only screen and (max-width: $breakpoint-phone) {
					width: 4em;
					height: 4em;
					line-height: 4em;
				}

				i {
					position: relative;
					font-size: 2em;

					@media only screen and (max-width: $breakpoint-phone) {
						font-size: 1.5em;
					}

					&:before {
						margin: auto;
					}
				}
			}

			.post-nav-info {
				display: none;
				width: 100%;
				box-sizing: border-box;
				transition: all ease-out 0.2s;

				.post-nav-title {
					display: block;
					max-height: 1.25em;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin: 1.25em 0 0.25em;
					font-size: 1em;
					line-height: 1.25em;
					font-weight: 700;
					color: $color-gray-25;
				}

				.post-nav-excerpt {
					display: block;
					max-height: 1.33333em;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin: 0;
					font-size: 0.75em;
					line-height: 1.33333em;
					font-weight: 400;
					color: $color-gray-65;
				}
			}
		}
	}
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.pagination {
	min-height: 3em;
	margin: 4em auto 2em;
	padding: 0;
	position: relative;

	.pagination-item {
		position: relative;
		display: block;
		height: 3em;
		line-height: 3em;
		padding: 0 1em;
		text-align: center;
		text-decoration: none;
		font-weight: 700;
		color: $color-gray-25;
		border: 1px solid $color-primary-default;
		transition: all ease-out 0.1s;
		border-radius: 4em;
		z-index: 60;

		&:hover,
		&:focus {
			color: $color-gray-15;
			box-shadow: 0 0 0 2px $color-primary-default;
		}

		i {
			position: relative;
		}

		@media only screen and (max-width: $breakpoint-phone) {
			width: 4em;
			height: 4em;
			line-height: 4em;
			margin-top: -0.5em;
			padding: 0 !important;

			i {
				font-size: 1.5em;
			}

			> span {
				display: none;
			}
		}
	}

	.pagination-prev {
		float: right;

		i {
			right: -0.05em;
		}
	}

	.pagination-next {
		float: left;

		i {
			left: -0.05em;
		}
	}

	.pagination-info {
		display: block;
		left: 0;
		top: 0;
		height: 3em;
		line-height: 3em;
		position: absolute;
		text-align: center;
		width: 100%;
		z-index: 50;
		color: $color-gray-65;
	}
}