@charset "UTF-8";
:root {
  --white: #fff;
  --off-white: #eee;
  --black: #000;
  --off-black: #111;
  --dark-grey: #666;
  --light-grey: #ddd;
  --darker-grey: #333;
  --code-grey: #232327;
  --blue-grey: #393f4c;
  --light-grey: #ccc;
  --orange: #f89820;
  --light-orange: #F9A339;
  --dark-orange: #DE7E07;
  --green: #46a546;
  --light-green: #a9dba9;
  --red: #e9322d;
  --light-red: #ee5f5b;
  --dark-red: #ce1a16;
}

/* ==========================================================================
   Base styles
   ========================================================================== */
html {
  background-color: var(--orange);
  color: var(--off-black);
  font: 62.5%/1.5 sans-serif;
  margin: 0;
  height: 100%;
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  padding: 0;
  scrollbar-color: var(--orange) var(--off-black);
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: var(--orange);
  -ms-text-size-adjust: 100%;
}

body {
  background-color: transparent;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  height: auto;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(----off-black) var(--orange);
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: var(--orange);
}

*::-webkit-scrollbar-thumb {
  background-color: var(----off-black);
  border-radius: 20px;
  border: 3px solid var(--orange);
}

/* $_Navigation
================================================== */
a {
  border-bottom: 1px solid var(--orange);
  color: #333;
  font-size: 1.6rem;
  outline: 0;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}
a:visited {
  color: #333;
  outline: 0;
  text-decoration: underline;
}
a:hover, a:focus {
  color: #000;
  border-color: var(--off-black);
}
a.img {
  border: 0;
}

p a {
  line-height: inherit;
}
p a:visited {
  line-height: inherit;
}

small a {
  font-size: inherit;
}

.nav a:hover,
.nav a:focus {
  outline: none;
}

.nav li {
  list-style: none;
}

.nav--list li {
  float: left;
  font-size: 14px;
  font-size: 1.4rem;
  border-right: 1px solid #ddd;
}

.nav--list li:last-child {
  border-right: none;
}

.nav--list li a {
  color: #999;
  border-bottom: none;
  float: left;
  padding: 0 10px;
  text-decoration: none;
}

.nav--list li a:hover,
.nav--list li a:focus {
  color: #333;
}

.nav--list li a:active {
  color: #666;
}

.nav--list li.active a {
  color: #333;
  font-weight: bold;
}

/*
 * Tel links
 */
@media only screen and (min-width: 45em) { /* 720 */
  a[href^="tel:"] {
    cursor: default;
    pointer-events: none;
  }
}
/* $_Helper_classes
================================================== */
.callout {
  background: #DDD;
  padding: 2%;
  width: 100%;
}

.large {
  font-size: 18px;
  font-size: 1.8rem;
  padding: 14px 24px;
  text-align: center;
}

.remove-bottom {
  margin-bottom: 0 !important;
}

.half-bottom {
  margin-bottom: 0.625em !important;
}

.add-bottom {
  margin-bottom: 1.25em !important;
}

.spaced-out {
  margin: 2% 0;
}

.v-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.flex {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

.gap-10 {
  gap: 10px;
}

.align-center {
  align-items: center;
}

/*
 * Skip to content
 */
.skip {
  background-color: var(--black);
  color: var(--white);
  left: -50%;
  padding: 0.5em 1em;
  position: fixed;
  text-decoration: none;
  top: 14px;
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  z-index: 2;
}
.skip:focus {
  color: var(--white);
  border: 1px solid var(--orange);
  left: 10px;
}

/*
 * Image replacement
 */
.ir {
  background-color: transparent;
  border: 0;
  overflow: hidden;
  text-indent: -9999px; /* IE 6/7 fallback */
}
.ir:before {
  content: "";
  display: block;
  width: 0;
  height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */
.hidden {
  display: none !important;
  visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */
.invisible {
  visibility: hidden;
}

/*
 * Clearfix
 */
.cf:before,
.cf:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.cf:after {
  clear: both;
}

article + article {
  margin-top: 1.6rem;
}

/*
  Icons
*/
.social-icons ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.social-icons a {
  border: none;
  display: block;
  height: 32px;
  width: 32px;
}
.social-icons .social-icons__icon {
  display: inline-block;
}
.social-icons .social-icons__icon svg {
  height: 32px;
  width: 32px;
  fill: var(--white);
  transition: fill 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
}
.social-icons .social-icons__icon a:hover use, .social-icons .social-icons__icon a:focus use {
  fill: var(--orange);
}
.social-icons--footer ul {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}
.social-icons--footer .social-icons__icon svg {
  fill: var(--off-black);
  stroke: var(--off-black);
}
.social-icons--footer .social-icons__icon a:hover use, .social-icons--footer .social-icons__icon a:focus use {
  fill: var(--off-white);
  stroke: var(--off-white);
}
.social-icons--profile .social-icons__icon path {
  fill: var(--off-black);
}
.social-icons--profile .social-icons__icon:hover path, .social-icons--profile .social-icons__icon:focus path {
  fill: var(--orange);
}

.social {
  display: flex;
  grid-gap: 1em;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
@media only screen and (min-width: 44.5em) {
  .social {
    flex-direction: row;
    justify-content: space-evenly;
  }
}
.social a {
  border-bottom: none;
}
.social__link:hover .social__icon, .social__link:focus .social__icon {
  fill: var(--white);
}
.social__icon {
  height: 150px;
  transition: fill 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  width: 150px;
}

/*
  Page
*/
.page {
  margin: 0 auto;
  width: 100%;
  min-height: 100%;
  z-index: 1;
}

/*
  Containers
*/
.container {
  padding: 54px 0;
  margin: 0 auto;
  width: 100%;
}

.content {
  margin: 0 auto;
  max-width: 1200px;
  position: relative;
  width: 80%;
}
@media only screen and (min-width: 75em) {
  .content {
    width: 60%;
  }
}
@media only screen and (min-width: 81.25em) {
  .content--slim {
    width: 50%;
  }
}
@media only screen and (min-width: 93.75em) {
  .content--slim {
    width: 40%;
  }
}
.content--wide {
  width: 80%;
}
.content--white {
  background-color: var(--white);
}
.content__heading {
  text-align: center;
}

.main {
  background: var(--white);
  position: relative;
  z-index: 1;
}

/*
    Header
*/
.page__header {
  background-color: var(--white);
  position: relative;
  z-index: 2;
}
.page__header .logo {
  border: none;
  display: block;
  height: 40px;
  text-decoration: none;
  width: 40px;
}

/*
  Navigation
*/
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  display: inline;
}
nav .nav--main {
  align-items: center;
  display: flex;
  justify-content: space-evenly;
  margin: 0 auto;
  max-width: 1024px;
  text-align: center;
  width: 100%;
}
nav .nav--main .nav__item {
  padding: 20px 4px;
}
nav .nav--main .nav__item:first-child {
  padding-left: 0;
}
nav .nav--main .nav__item:last-child {
  padding-right: 0;
}
@media only screen and (min-width: 40em) {
  nav .nav--main .nav__item {
    padding: 20px 6px;
  }
}
@media only screen and (min-width: 60em) {
  nav .nav--main .nav__item {
    padding: 17px;
  }
}
nav .nav--main .nav__item a:not(.logo) {
  border: none;
  color: var(--black);
  font-weight: 700;
  font-size: 12px;
  font-size: 1.2rem;
  letter-spacing: 0.075em;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
}
nav .nav--main .nav__item a:not(.logo):hover:not(.logo), nav .nav--main .nav__item a:not(.logo):focus:not(.logo) {
  color: var(--dark-grey);
  border-bottom: 4px solid var(--orange);
  padding-bottom: 2px;
}
@media only screen and (min-width: 60em) {
  nav .nav--main .nav__item a:not(.logo) {
    font-size: 14px;
    font-size: 1.4rem;
  }
}
nav .nav--main .nav__item--active a {
  color: var(--dark-grey);
  text-transform: none;
}
nav .nav--inline {
  margin-bottom: 2rem;
}

/*
    Intro
*/
.intro {
  background-color: var(--orange);
  background-image: linear-gradient(602deg, rgba(195, 195, 195, 0.02) 0%, rgba(195, 195, 195, 0.02) 16.667%, rgba(91, 91, 91, 0.02) 16.667%, rgba(91, 91, 91, 0.02) 33.334%, rgba(230, 230, 230, 0.02) 33.334%, rgba(230, 230, 230, 0.02) 50.001%, rgba(18, 18, 18, 0.02) 50.001%, rgba(18, 18, 18, 0.02) 66.668%, rgba(163, 163, 163, 0.02) 66.668%, rgba(163, 163, 163, 0.02) 83.335%, rgba(140, 140, 140, 0.02) 83.335%, rgba(140, 140, 140, 0.02) 100.002%), linear-gradient(512deg, rgba(151, 151, 151, 0.02) 0%, rgba(151, 151, 151, 0.02) 16.667%, rgba(11, 11, 11, 0.02) 16.667%, rgba(11, 11, 11, 0.02) 33.334%, rgba(162, 162, 162, 0.02) 33.334%, rgba(162, 162, 162, 0.02) 50.001%, rgba(171, 171, 171, 0.02) 50.001%, rgba(171, 171, 171, 0.02) 66.668%, rgba(119, 119, 119, 0.02) 66.668%, rgba(119, 119, 119, 0.02) 83.335%, rgba(106, 106, 106, 0.02) 83.335%, rgba(106, 106, 106, 0.02) 100.002%), linear-gradient(371deg, rgba(245, 245, 245, 0.01) 0%, rgba(245, 245, 245, 0.01) 16.667%, rgba(23, 23, 23, 0.01) 16.667%, rgba(23, 23, 23, 0.01) 33.334%, rgba(96, 96, 96, 0.01) 33.334%, rgba(96, 96, 96, 0.01) 50.001%, rgba(140, 140, 140, 0.01) 50.001%, rgba(140, 140, 140, 0.01) 66.668%, rgba(120, 120, 120, 0.01) 66.668%, rgba(120, 120, 120, 0.01) 83.335%, rgba(48, 48, 48, 0.01) 83.335%, rgba(48, 48, 48, 0.01) 100.002%), linear-gradient(387deg, rgba(106, 106, 106, 0.03) 0%, rgba(106, 106, 106, 0.03) 14.286%, rgba(203, 203, 203, 0.03) 14.286%, rgba(203, 203, 203, 0.03) 28.572%, rgba(54, 54, 54, 0.03) 28.572%, rgba(54, 54, 54, 0.03) 42.858%, rgba(75, 75, 75, 0.03) 42.858%, rgba(75, 75, 75, 0.03) 57.144%, rgba(216, 216, 216, 0.03) 57.144%, rgba(216, 216, 216, 0.03) 71.43%, rgba(39, 39, 39, 0.03) 71.43%, rgba(39, 39, 39, 0.03) 85.716%, rgba(246, 246, 246, 0.03) 85.716%, rgba(246, 246, 246, 0.03) 100.002%), linear-gradient(677deg, rgba(215, 215, 215, 0.01) 0%, rgba(215, 215, 215, 0.01) 16.667%, rgba(72, 72, 72, 0.01) 16.667%, rgba(72, 72, 72, 0.01) 33.334%, rgba(253, 253, 253, 0.01) 33.334%, rgba(253, 253, 253, 0.01) 50.001%, rgba(4, 4, 4, 0.01) 50.001%, rgba(4, 4, 4, 0.01) 66.668%, rgba(183, 183, 183, 0.01) 66.668%, rgba(183, 183, 183, 0.01) 83.335%, rgba(17, 17, 17, 0.01) 83.335%, rgba(17, 17, 17, 0.01) 100.002%), linear-gradient(488deg, rgba(119, 119, 119, 0.03) 0%, rgba(119, 119, 119, 0.03) 12.5%, rgba(91, 91, 91, 0.03) 12.5%, rgba(91, 91, 91, 0.03) 25%, rgba(45, 45, 45, 0.03) 25%, rgba(45, 45, 45, 0.03) 37.5%, rgba(182, 182, 182, 0.03) 37.5%, rgba(182, 182, 182, 0.03) 50%, rgba(243, 243, 243, 0.03) 50%, rgba(243, 243, 243, 0.03) 62.5%, rgba(162, 162, 162, 0.03) 62.5%, rgba(162, 162, 162, 0.03) 75%, rgba(190, 190, 190, 0.03) 75%, rgba(190, 190, 190, 0.03) 87.5%, rgba(148, 148, 148, 0.03) 87.5%, rgba(148, 148, 148, 0.03) 100%), linear-gradient(450deg, rgb(249, 163, 57), rgb(248, 152, 32));
  box-shadow: inset 0 -40px 24px -38px rgba(0, 0, 0, 0.25);
  color: #F2F2F2;
  padding: 122px 0;
  position: relative;
  text-align: center;
  width: 100%;
  z-index: 1;
}
@media only screen and (min-width: 60em) {
  .intro {
    background-attachment: fixed;
  }
}
.intro__heading {
  color: var(--off-black);
  font-size: 4rem;
  font-weight: 300;
  line-height: 1.125;
  letter-spacing: -0.05em;
}
.intro__heading--large {
  display: block;
  font-weight: bold;
}
@media only screen and (min-width: 60em) {
  .intro__heading--large {
    font-size: 6rem;
  }
}
.intro--sml {
  padding: 40px 0;
}
.intro--sml .intro__heading,
.intro--sml .intro__heading--large {
  margin-bottom: 0;
}
.intro--post {
  background-color: var(--orange);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
.intro--code-img {
  background-image: url("https://res.cloudinary.com/juanfernandes/f_auto/computer-18363301920-1.jpg");
}
.intro--code-img .intro__heading {
  color: var(--white);
}
.intro__content {
  margin: 0 auto;
  max-width: 120rem;
  padding: 0 1em;
}
@media only screen and (min-width: 40em) {
  .intro__content {
    padding: 8em 1em;
  }
}

.intro .actions {
  margin-top: 3em;
  text-align: center;
}

/*
  Homepage
*/
.recent-work {
  background-image: linear-gradient(602deg, rgba(195, 195, 195, 0.02) 0%, rgba(195, 195, 195, 0.02) 16.667%, rgba(91, 91, 91, 0.02) 16.667%, rgba(91, 91, 91, 0.02) 33.334%, rgba(230, 230, 230, 0.02) 33.334%, rgba(230, 230, 230, 0.02) 50.001%, rgba(18, 18, 18, 0.02) 50.001%, rgba(18, 18, 18, 0.02) 66.668%, rgba(163, 163, 163, 0.02) 66.668%, rgba(163, 163, 163, 0.02) 83.335%, rgba(140, 140, 140, 0.02) 83.335%, rgba(140, 140, 140, 0.02) 100.002%), linear-gradient(512deg, rgba(151, 151, 151, 0.02) 0%, rgba(151, 151, 151, 0.02) 16.667%, rgba(11, 11, 11, 0.02) 16.667%, rgba(11, 11, 11, 0.02) 33.334%, rgba(162, 162, 162, 0.02) 33.334%, rgba(162, 162, 162, 0.02) 50.001%, rgba(171, 171, 171, 0.02) 50.001%, rgba(171, 171, 171, 0.02) 66.668%, rgba(119, 119, 119, 0.02) 66.668%, rgba(119, 119, 119, 0.02) 83.335%, rgba(106, 106, 106, 0.02) 83.335%, rgba(106, 106, 106, 0.02) 100.002%), linear-gradient(371deg, rgba(245, 245, 245, 0.01) 0%, rgba(245, 245, 245, 0.01) 16.667%, rgba(23, 23, 23, 0.01) 16.667%, rgba(23, 23, 23, 0.01) 33.334%, rgba(96, 96, 96, 0.01) 33.334%, rgba(96, 96, 96, 0.01) 50.001%, rgba(140, 140, 140, 0.01) 50.001%, rgba(140, 140, 140, 0.01) 66.668%, rgba(120, 120, 120, 0.01) 66.668%, rgba(120, 120, 120, 0.01) 83.335%, rgba(48, 48, 48, 0.01) 83.335%, rgba(48, 48, 48, 0.01) 100.002%), linear-gradient(387deg, rgba(106, 106, 106, 0.03) 0%, rgba(106, 106, 106, 0.03) 14.286%, rgba(203, 203, 203, 0.03) 14.286%, rgba(203, 203, 203, 0.03) 28.572%, rgba(54, 54, 54, 0.03) 28.572%, rgba(54, 54, 54, 0.03) 42.858%, rgba(75, 75, 75, 0.03) 42.858%, rgba(75, 75, 75, 0.03) 57.144%, rgba(216, 216, 216, 0.03) 57.144%, rgba(216, 216, 216, 0.03) 71.43%, rgba(39, 39, 39, 0.03) 71.43%, rgba(39, 39, 39, 0.03) 85.716%, rgba(246, 246, 246, 0.03) 85.716%, rgba(246, 246, 246, 0.03) 100.002%), linear-gradient(677deg, rgba(215, 215, 215, 0.01) 0%, rgba(215, 215, 215, 0.01) 16.667%, rgba(72, 72, 72, 0.01) 16.667%, rgba(72, 72, 72, 0.01) 33.334%, rgba(253, 253, 253, 0.01) 33.334%, rgba(253, 253, 253, 0.01) 50.001%, rgba(4, 4, 4, 0.01) 50.001%, rgba(4, 4, 4, 0.01) 66.668%, rgba(183, 183, 183, 0.01) 66.668%, rgba(183, 183, 183, 0.01) 83.335%, rgba(17, 17, 17, 0.01) 83.335%, rgba(17, 17, 17, 0.01) 100.002%), linear-gradient(488deg, rgba(119, 119, 119, 0.03) 0%, rgba(119, 119, 119, 0.03) 12.5%, rgba(91, 91, 91, 0.03) 12.5%, rgba(91, 91, 91, 0.03) 25%, rgba(45, 45, 45, 0.03) 25%, rgba(45, 45, 45, 0.03) 37.5%, rgba(182, 182, 182, 0.03) 37.5%, rgba(182, 182, 182, 0.03) 50%, rgba(243, 243, 243, 0.03) 50%, rgba(243, 243, 243, 0.03) 62.5%, rgba(162, 162, 162, 0.03) 62.5%, rgba(162, 162, 162, 0.03) 75%, rgba(190, 190, 190, 0.03) 75%, rgba(190, 190, 190, 0.03) 87.5%, rgba(148, 148, 148, 0.03) 87.5%, rgba(148, 148, 148, 0.03) 100%), linear-gradient(450deg, rgb(97, 192, 136), rgb(5, 159, 81));
  padding: 54px 0;
}
.recent-work .content__heading {
  color: var(--black);
  margin-bottom: 40px;
}
.recent-work .projects-wrapper {
  gap: 4rem;
}
@media only screen and (min-width: 40em) {
  .recent-work .projects-wrapper { /* 640 */
    gap: 6rem;
  }
}
.recent-work .project {
  position: relative;
}
.recent-work .project a {
  border: 0;
  display: block;
  width: 200px;
}
.recent-work .project a:hover .project__effect, .recent-work .project a:focus .project__effect {
  box-shadow: inset 0 0 0 100px rgba(97, 192, 136, 0.6), 0 1px 2px rgba(0, 0, 0, 0.1);
}
.recent-work .project__effect, .recent-work .project__img {
  border-radius: 50%;
  height: 200px;
  width: 200px;
}
.recent-work .project__effect {
  box-shadow: inset 0 0 0 16px rgba(97, 192, 136, 0.6), 0 1px 2px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  position: absolute;
  transition: all 0.4s ease-in-out;
  top: 0;
}
.recent-work .project__heading {
  display: block;
  font-size: 2rem;
  margin-top: 20px;
  margin-bottom: 0;
  text-transform: uppercase;
  max-width: 200px;
}

.section--intro {
  padding: 54px 0;
  text-align: center;
}
.section--intro p {
  font-size: 26px;
  font-size: 2.6rem;
  margin-bottom: 0;
}
.section--dark {
  color: var(--orange);
  background-color: var(--off-black);
}

/*
  Testimonials
*/
.testimonials--section {
  background-image: linear-gradient(602deg, rgba(195, 195, 195, 0.02) 0%, rgba(195, 195, 195, 0.02) 16.667%, rgba(91, 91, 91, 0.02) 16.667%, rgba(91, 91, 91, 0.02) 33.334%, rgba(230, 230, 230, 0.02) 33.334%, rgba(230, 230, 230, 0.02) 50.001%, rgba(18, 18, 18, 0.02) 50.001%, rgba(18, 18, 18, 0.02) 66.668%, rgba(163, 163, 163, 0.02) 66.668%, rgba(163, 163, 163, 0.02) 83.335%, rgba(140, 140, 140, 0.02) 83.335%, rgba(140, 140, 140, 0.02) 100.002%), linear-gradient(512deg, rgba(151, 151, 151, 0.02) 0%, rgba(151, 151, 151, 0.02) 16.667%, rgba(11, 11, 11, 0.02) 16.667%, rgba(11, 11, 11, 0.02) 33.334%, rgba(162, 162, 162, 0.02) 33.334%, rgba(162, 162, 162, 0.02) 50.001%, rgba(171, 171, 171, 0.02) 50.001%, rgba(171, 171, 171, 0.02) 66.668%, rgba(119, 119, 119, 0.02) 66.668%, rgba(119, 119, 119, 0.02) 83.335%, rgba(106, 106, 106, 0.02) 83.335%, rgba(106, 106, 106, 0.02) 100.002%), linear-gradient(387deg, rgba(245, 245, 245, 0.01) 0%, rgba(245, 245, 245, 0.01) 16.667%, rgba(23, 23, 23, 0.01) 16.667%, rgba(23, 23, 23, 0.01) 33.334%, rgba(96, 96, 96, 0.01) 33.334%, rgba(96, 96, 96, 0.01) 50.001%, rgba(140, 140, 140, 0.01) 50.001%, rgba(140, 140, 140, 0.01) 66.668%, rgba(120, 120, 120, 0.01) 66.668%, rgba(120, 120, 120, 0.01) 83.335%, rgba(48, 48, 48, 0.01) 83.335%, rgba(48, 48, 48, 0.01) 100.002%), linear-gradient(371deg, rgba(106, 106, 106, 0.03) 0%, rgba(106, 106, 106, 0.03) 14.286%, rgba(203, 203, 203, 0.03) 14.286%, rgba(203, 203, 203, 0.03) 28.572%, rgba(54, 54, 54, 0.03) 28.572%, rgba(54, 54, 54, 0.03) 42.858%, rgba(75, 75, 75, 0.03) 42.858%, rgba(75, 75, 75, 0.03) 57.144%, rgba(216, 216, 216, 0.03) 57.144%, rgba(216, 216, 216, 0.03) 71.43%, rgba(39, 39, 39, 0.03) 71.43%, rgba(39, 39, 39, 0.03) 85.716%, rgba(246, 246, 246, 0.03) 85.716%, rgba(246, 246, 246, 0.03) 100.002%), linear-gradient(677deg, rgba(215, 215, 215, 0.01) 0%, rgba(215, 215, 215, 0.01) 16.667%, rgba(72, 72, 72, 0.01) 16.667%, rgba(72, 72, 72, 0.01) 33.334%, rgba(253, 253, 253, 0.01) 33.334%, rgba(253, 253, 253, 0.01) 50.001%, rgba(4, 4, 4, 0.01) 50.001%, rgba(4, 4, 4, 0.01) 66.668%, rgba(183, 183, 183, 0.01) 66.668%, rgba(183, 183, 183, 0.01) 83.335%, rgba(17, 17, 17, 0.01) 83.335%, rgba(17, 17, 17, 0.01) 100.002%), linear-gradient(488deg, rgba(119, 119, 119, 0.03) 0%, rgba(119, 119, 119, 0.03) 12.5%, rgba(91, 91, 91, 0.03) 12.5%, rgba(91, 91, 91, 0.03) 25%, rgba(45, 45, 45, 0.03) 25%, rgba(45, 45, 45, 0.03) 37.5%, rgba(182, 182, 182, 0.03) 37.5%, rgba(182, 182, 182, 0.03) 50%, rgba(243, 243, 243, 0.03) 50%, rgba(243, 243, 243, 0.03) 62.5%, rgba(162, 162, 162, 0.03) 62.5%, rgba(162, 162, 162, 0.03) 75%, rgba(190, 190, 190, 0.03) 75%, rgba(190, 190, 190, 0.03) 87.5%, rgba(148, 148, 148, 0.03) 87.5%, rgba(148, 148, 148, 0.03) 100%), linear-gradient(450deg, rgb(11, 11, 11), rgb(0, 0, 0));
  box-shadow: inset 0 -40px 24px -38px rgba(0, 0, 0, 0.25);
  color: var(--white);
  padding: 54px 0;
}
@media only screen and (min-width: 60em) {
  .testimonials--section {
    background-attachment: fixed;
  }
}
.testimonials--section .content__heading {
  color: var(--white);
}
.testimonials--section b {
  color: var(--orange);
}
.testimonials--section ul,
.testimonials--section .slick-slider {
  margin-bottom: 0;
}
.testimonials--section blockquote {
  border-color: var(--orange);
}
.testimonials--section cite {
  margin-left: 22px;
  font-size: 1.4rem;
}
.testimonials--page {
  padding: 54px 0;
}
.testimonials .testimonial:not(:last-child) {
  margin-bottom: 6em;
}
@media only screen and (min-width: 60em) {
  .testimonials .testimonial {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-gap: 2em;
  }
  .testimonials .testimonial .testimonial__quote {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .testimonials .testimonial:nth-child(2n) {
    grid-template-columns: 1fr 3fr;
  }
  .testimonials .testimonial:nth-child(2n) .testimonial__quote {
    grid-column-start: 2;
    grid-row-start: 1;
  }
  .testimonials .testimonial:nth-child(2n) .testimonial__thumb {
    grid-column-start: 1;
    grid-row-start: 1;
  }
}
.testimonials .testimonial__quote {
  border-left: 4px solid var(--orange);
}
.testimonials .testimonial__quote blockquote {
  border: 0;
  padding: 0;
  position: relative;
}
.testimonials .testimonial__quote cite {
  display: inline-block;
  font-size: 16px;
  font-size: 1.6rem;
  margin-left: 20px;
}
.testimonials .testimonial__thumb {
  display: flex;
  justify-content: center;
  margin-top: 2em;
}
@media only screen and (min-width: 60em) {
  .testimonials .testimonial__thumb {
    align-items: center;
    margin-top: 0;
  }
}
.testimonials .testimonial__thumb img {
  border-radius: 50%;
  align-self: flex-start;
  max-width: 200px;
}

/*
  Footer
*/
footer {
  background-image: linear-gradient(602deg, rgba(195, 195, 195, 0.02) 0%, rgba(195, 195, 195, 0.02) 16.667%, rgba(91, 91, 91, 0.02) 16.667%, rgba(91, 91, 91, 0.02) 33.334%, rgba(230, 230, 230, 0.02) 33.334%, rgba(230, 230, 230, 0.02) 50.001%, rgba(18, 18, 18, 0.02) 50.001%, rgba(18, 18, 18, 0.02) 66.668%, rgba(163, 163, 163, 0.02) 66.668%, rgba(163, 163, 163, 0.02) 83.335%, rgba(140, 140, 140, 0.02) 83.335%, rgba(140, 140, 140, 0.02) 100.002%), linear-gradient(512deg, rgba(151, 151, 151, 0.02) 0%, rgba(151, 151, 151, 0.02) 16.667%, rgba(11, 11, 11, 0.02) 16.667%, rgba(11, 11, 11, 0.02) 33.334%, rgba(162, 162, 162, 0.02) 33.334%, rgba(162, 162, 162, 0.02) 50.001%, rgba(171, 171, 171, 0.02) 50.001%, rgba(171, 171, 171, 0.02) 66.668%, rgba(119, 119, 119, 0.02) 66.668%, rgba(119, 119, 119, 0.02) 83.335%, rgba(106, 106, 106, 0.02) 83.335%, rgba(106, 106, 106, 0.02) 100.002%), linear-gradient(371deg, rgba(245, 245, 245, 0.01) 0%, rgba(245, 245, 245, 0.01) 16.667%, rgba(23, 23, 23, 0.01) 16.667%, rgba(23, 23, 23, 0.01) 33.334%, rgba(96, 96, 96, 0.01) 33.334%, rgba(96, 96, 96, 0.01) 50.001%, rgba(140, 140, 140, 0.01) 50.001%, rgba(140, 140, 140, 0.01) 66.668%, rgba(120, 120, 120, 0.01) 66.668%, rgba(120, 120, 120, 0.01) 83.335%, rgba(48, 48, 48, 0.01) 83.335%, rgba(48, 48, 48, 0.01) 100.002%), linear-gradient(387deg, rgba(106, 106, 106, 0.03) 0%, rgba(106, 106, 106, 0.03) 14.286%, rgba(203, 203, 203, 0.03) 14.286%, rgba(203, 203, 203, 0.03) 28.572%, rgba(54, 54, 54, 0.03) 28.572%, rgba(54, 54, 54, 0.03) 42.858%, rgba(75, 75, 75, 0.03) 42.858%, rgba(75, 75, 75, 0.03) 57.144%, rgba(216, 216, 216, 0.03) 57.144%, rgba(216, 216, 216, 0.03) 71.43%, rgba(39, 39, 39, 0.03) 71.43%, rgba(39, 39, 39, 0.03) 85.716%, rgba(246, 246, 246, 0.03) 85.716%, rgba(246, 246, 246, 0.03) 100.002%), linear-gradient(677deg, rgba(215, 215, 215, 0.01) 0%, rgba(215, 215, 215, 0.01) 16.667%, rgba(72, 72, 72, 0.01) 16.667%, rgba(72, 72, 72, 0.01) 33.334%, rgba(253, 253, 253, 0.01) 33.334%, rgba(253, 253, 253, 0.01) 50.001%, rgba(4, 4, 4, 0.01) 50.001%, rgba(4, 4, 4, 0.01) 66.668%, rgba(183, 183, 183, 0.01) 66.668%, rgba(183, 183, 183, 0.01) 83.335%, rgba(17, 17, 17, 0.01) 83.335%, rgba(17, 17, 17, 0.01) 100.002%), linear-gradient(488deg, rgba(119, 119, 119, 0.03) 0%, rgba(119, 119, 119, 0.03) 12.5%, rgba(91, 91, 91, 0.03) 12.5%, rgba(91, 91, 91, 0.03) 25%, rgba(45, 45, 45, 0.03) 25%, rgba(45, 45, 45, 0.03) 37.5%, rgba(182, 182, 182, 0.03) 37.5%, rgba(182, 182, 182, 0.03) 50%, rgba(243, 243, 243, 0.03) 50%, rgba(243, 243, 243, 0.03) 62.5%, rgba(162, 162, 162, 0.03) 62.5%, rgba(162, 162, 162, 0.03) 75%, rgba(190, 190, 190, 0.03) 75%, rgba(190, 190, 190, 0.03) 87.5%, rgba(148, 148, 148, 0.03) 87.5%, rgba(148, 148, 148, 0.03) 100%), linear-gradient(450deg, rgb(249, 163, 57), rgb(248, 152, 32));
  bottom: 0;
  color: var(--black);
  left: 0;
  min-height: 410px;
  position: sticky;
  width: 100%;
  z-index: 0;
}
footer .container {
  padding: 60px 0;
}
footer .copyright {
  display: block;
  font-size: 1.4rem;
  border-top: 2px solid var(--black);
  padding-top: 60px;
  text-align: center;
  margin: 0 auto;
}
footer .copyright p {
  margin-bottom: 0.4rem;
}
footer .copyright p:last-of-type {
  margin-bottom: 0;
}
footer .copyright a,
footer .copyright p {
  font-size: 1.4rem;
}
@media only screen and (min-width: 48em) {
  footer .copyright {
    max-width: 820px;
  }
}

@media only screen and (min-width: 60em) {
  footer {
    background-attachment: fixed;
  }
}
footer > .container > .sixteen {
  margin: 0 auto;
  bottom: 110px;
  position: fixed;
  z-index: 0;
}

.contact-me {
  margin: 0 auto;
  padding: 2em 0 2em 0;
  text-align: center;
}
.contact-me__heading {
  color: var(--off-black);
  font-size: 30px;
  font-size: 3rem;
}

.footer-links {
  align-items: center;
  border-top: 2px solid var(--black);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  margin: 24px auto 0 auto;
  padding: 25px 0;
}
.footer-links__other {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media only screen and (min-width: 64em) {
  .footer-links__other {
    align-items: center;
    flex-direction: row;
  }
}
.footer-links__other li {
  margin-right: 1em;
}
.footer-links__other a {
  border-color: transparent;
  text-transform: uppercase;
  color: var(--black);
}
.footer-links__other a:hover, .footer-links__other a:focus {
  border-color: var(--off-block);
}
@media only screen and (min-width: 40em) {
  .footer-links {
    max-width: 820px;
  }
}

/*
  WORK
*/
.work {
  padding-top: 54px;
}
.work .content__heading {
  margin-bottom: 40px;
}

.work figure {
  background: #3085A3;
  border: 1px solid var(--orange);
  cursor: pointer;
  height: 180px;
  margin: 0 0 24px 0;
  overflow: hidden;
  position: relative;
  width: 100%;
}
@media only screen and (min-width: 28.75em) {
  .work figure {
    height: 200px;
  }
}
@media only screen and (min-width: 32.5em) {
  .work figure {
    height: 320px;
  }
}
@media only screen and (min-width: 40em) {
  .work figure {
    height: 180px;
    margin: 0;
  }
}
@media only screen and (min-width: 52.5em) {
  .work figure {
    height: 220px;
  }
}
@media only screen and (min-width: 64em) {
  .work figure {
    height: 280px;
  }
}
@media only screen and (min-width: 68.75em) {
  .work figure {
    height: 300px;
  }
}
@media only screen and (min-width: 87.5em) {
  .work figure {
    height: 360px;
  }
}
.work figure img {
  display: block;
  margin-bottom: 0;
  max-width: 100%;
  min-height: 100%;
  opacity: 1;
  position: relative;
}
.work figure figcaption {
  backface-visibility: hidden;
  color: var(--white);
  margin-bottom: 0;
  padding: 2em;
  text-transform: uppercase;
}
.work figure figcaption::before, .work figure figcaption::after {
  pointer-events: none;
}
.work figure figcaption,
.work figure figcaption > a {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.work figure figcaption > a {
  font-size: 0;
  opacity: 0;
  text-indent: 200%;
  white-space: nowrap;
  z-index: 1000;
}
.work figure.effect {
  background-color: var(--orange);
  background-image: linear-gradient(602deg, rgba(195, 195, 195, 0.02) 0%, rgba(195, 195, 195, 0.02) 16.667%, rgba(91, 91, 91, 0.02) 16.667%, rgba(91, 91, 91, 0.02) 33.334%, rgba(230, 230, 230, 0.02) 33.334%, rgba(230, 230, 230, 0.02) 50.001%, rgba(18, 18, 18, 0.02) 50.001%, rgba(18, 18, 18, 0.02) 66.668%, rgba(163, 163, 163, 0.02) 66.668%, rgba(163, 163, 163, 0.02) 83.335%, rgba(140, 140, 140, 0.02) 83.335%, rgba(140, 140, 140, 0.02) 100.002%), linear-gradient(512deg, rgba(151, 151, 151, 0.02) 0%, rgba(151, 151, 151, 0.02) 16.667%, rgba(11, 11, 11, 0.02) 16.667%, rgba(11, 11, 11, 0.02) 33.334%, rgba(162, 162, 162, 0.02) 33.334%, rgba(162, 162, 162, 0.02) 50.001%, rgba(171, 171, 171, 0.02) 50.001%, rgba(171, 171, 171, 0.02) 66.668%, rgba(119, 119, 119, 0.02) 66.668%, rgba(119, 119, 119, 0.02) 83.335%, rgba(106, 106, 106, 0.02) 83.335%, rgba(106, 106, 106, 0.02) 100.002%), linear-gradient(371deg, rgba(245, 245, 245, 0.01) 0%, rgba(245, 245, 245, 0.01) 16.667%, rgba(23, 23, 23, 0.01) 16.667%, rgba(23, 23, 23, 0.01) 33.334%, rgba(96, 96, 96, 0.01) 33.334%, rgba(96, 96, 96, 0.01) 50.001%, rgba(140, 140, 140, 0.01) 50.001%, rgba(140, 140, 140, 0.01) 66.668%, rgba(120, 120, 120, 0.01) 66.668%, rgba(120, 120, 120, 0.01) 83.335%, rgba(48, 48, 48, 0.01) 83.335%, rgba(48, 48, 48, 0.01) 100.002%), linear-gradient(387deg, rgba(106, 106, 106, 0.03) 0%, rgba(106, 106, 106, 0.03) 14.286%, rgba(203, 203, 203, 0.03) 14.286%, rgba(203, 203, 203, 0.03) 28.572%, rgba(54, 54, 54, 0.03) 28.572%, rgba(54, 54, 54, 0.03) 42.858%, rgba(75, 75, 75, 0.03) 42.858%, rgba(75, 75, 75, 0.03) 57.144%, rgba(216, 216, 216, 0.03) 57.144%, rgba(216, 216, 216, 0.03) 71.43%, rgba(39, 39, 39, 0.03) 71.43%, rgba(39, 39, 39, 0.03) 85.716%, rgba(246, 246, 246, 0.03) 85.716%, rgba(246, 246, 246, 0.03) 100.002%), linear-gradient(677deg, rgba(215, 215, 215, 0.01) 0%, rgba(215, 215, 215, 0.01) 16.667%, rgba(72, 72, 72, 0.01) 16.667%, rgba(72, 72, 72, 0.01) 33.334%, rgba(253, 253, 253, 0.01) 33.334%, rgba(253, 253, 253, 0.01) 50.001%, rgba(4, 4, 4, 0.01) 50.001%, rgba(4, 4, 4, 0.01) 66.668%, rgba(183, 183, 183, 0.01) 66.668%, rgba(183, 183, 183, 0.01) 83.335%, rgba(17, 17, 17, 0.01) 83.335%, rgba(17, 17, 17, 0.01) 100.002%), linear-gradient(488deg, rgba(119, 119, 119, 0.03) 0%, rgba(119, 119, 119, 0.03) 12.5%, rgba(91, 91, 91, 0.03) 12.5%, rgba(91, 91, 91, 0.03) 25%, rgba(45, 45, 45, 0.03) 25%, rgba(45, 45, 45, 0.03) 37.5%, rgba(182, 182, 182, 0.03) 37.5%, rgba(182, 182, 182, 0.03) 50%, rgba(243, 243, 243, 0.03) 50%, rgba(243, 243, 243, 0.03) 62.5%, rgba(162, 162, 162, 0.03) 62.5%, rgba(162, 162, 162, 0.03) 75%, rgba(190, 190, 190, 0.03) 75%, rgba(190, 190, 190, 0.03) 87.5%, rgba(148, 148, 148, 0.03) 87.5%, rgba(148, 148, 148, 0.03) 100%), linear-gradient(450deg, rgb(249, 163, 57), rgb(248, 152, 32));
}
.work figure.effect img,
.work figure.effect span {
  transition: opacity 0.35s, transform 0.35s;
}
.work figure.effect:hover img {
  opacity: 0.1;
  transform: scale3d(2, 2, 1);
}
.work figure.effect span {
  background-color: var(--black);
  border: 2px solid var(--black);
  bottom: 0;
  left: 0;
  margin: 20px;
  opacity: 0;
  padding: 10px;
  position: absolute;
  text-transform: none;
  transform-origin: 50% -100%;
  transform: scale3d(0.8, 0.8, 1);
}
.work figure.effect:hover span {
  opacity: 1;
  transform: scale3d(1, 1, 1);
}

@supports (display: grid) {
  .client-list {
    --auto-grid-min-size: 200px;
    display: grid;
    grid-gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(var(--auto-grid-min-size), 1fr));
    width: 100%;
  }
  @media only screen and (min-width: 48.438em) {
    .client-list {
      --auto-grid-min-size: 146px;
    }
  }
  @media only screen and (min-width: 85.625em) {
    .client-list {
      --auto-grid-min-size: 198px;
    }
  }
}
.client img {
  border: 1px solid var(--light-grey);
  display: block;
  margin: 0 auto;
  width: 245px;
  filter: grayscale(1);
  opacity: 0.8;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
}
.client img:hover {
  filter: grayscale(0);
  opacity: 1;
}

/* Companies */
.companies,
.latest-post {
  padding: 54px 0;
}
.companies .content__heading,
.latest-post .content__heading {
  margin-bottom: 40px;
}

/* Projects */
.project__heading {
  text-align: center;
  width: 100%;
}
.project__sub-heading {
  border-bottom: 1px solid var(--orange);
  margin-top: 0;
  margin-bottom: 2rem;
}
.project__sub-heading--full {
  display: inline-block;
  margin-bottom: 4rem;
}
.project__images img {
  border: 1px solid var(--orange);
}
.project__images img:not(:last-of-type) {
  margin-bottom: 4rem;
}
.project__images figure {
  align-items: flex-start;
  margin: 0;
}
.project__meta {
  color: var(--black);
  font-size: 1.6rem;
  margin-bottom: 24px;
}
.project__meta > * {
  display: block;
  margin-bottom: 1rem;
}
@media only screen and (min-width: 40em) {
  .project .aside {
    position: sticky;
    top: 4em;
  }
}

.nav--portfolio {
  margin-bottom: 24px;
}
.nav--portfolio ul {
  height: 32px;
}
.nav--portfolio a {
  display: block;
  width: 32px;
  height: 32px;
  border: none;
}
.nav--portfolio__all {
  margin: 0 auto;
  width: 32px;
}
.nav--portfolio__controls {
  margin-top: -32px;
}
.nav--portfolio__prev {
  float: left;
}
.nav--portfolio__next {
  float: right;
}
.nav--portfolio svg {
  fill: var(--orange);
  height: 32px;
  width: 32px;
}

.nav--portfolio .nav--portfolio__all:hover svg,
.nav--portfolio .nav--portfolio__prev:hover svg,
.nav--portfolio .nav--portfolio__next:hover svg,
.nav--portfolio .nav--portfolio__all:focus svg,
.nav--portfolio .nav--portfolio__prev:focus svg,
.nav--portfolio .nav--portfolio__next:focus svg {
  fill: var(--black);
  transition: fill 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
}

.nav--portfolio .nav--portfolio--disabled:hover svg,
.nav--portfolio .nav--portfolio--disabled:focus svg,
.nav--portfolio .nav--portfolio--disabled svg {
  fill: var(--light-grey);
}

@media only screen and (min-width: 40em) {
  .project__heading {
    margin: 0 auto 40px auto;
    position: relative;
    width: 580px;
  }
  .nav--portfolio {
    position: absolute;
    top: 0;
    width: 100%;
  }
  .nav--portfolio .nav--portfolio__all {
    float: left;
    margin-top: 7px;
  }
  .nav--portfolio .nav--portfolio__controls {
    float: right;
    margin-top: 7px;
  }
}
.fyi {
  background-color: var(--off-white);
  border-left: 4px solid var(--orange);
  font-style: italic;
  margin-bottom: 24px;
  padding: 1em;
}
.fyi p:last-of-type {
  margin-bottom: 0;
}
.fyi::before {
  content: "FYI";
  display: block;
  margin-bottom: 0.4em;
  font-weight: bold;
  font-size: 1.2rem;
  font-style: normal;
}

/*
  Blog
*/
.blog .blog-posts {
  padding: 54px 0;
}
.blog .intro h1 {
  margin: 0;
}
.blog .intro .intro__heading--large {
  margin-bottom: 0;
}
.blog .post-list {
  margin: 0;
  padding: 0;
}
@media only screen and (min-width: 40em) {
  .blog .post-list {
    margin: 0 3em 0 0;
  }
}
.blog .post-list li {
  list-style: none;
}
.blog .post-list li:not(:last-child) {
  border-bottom: 1px solid var(--orange);
  margin-bottom: 24px;
  padding-bottom: 24px;
}
.blog .post-list .b-title {
  margin-bottom: 0;
  margin-top: 16px;
}
@media only screen and (min-width: 29.75em) {
  .blog .post-list .b-title {
    margin-top: 0;
  }
}
.blog .post-list .meta {
  color: var(--dark-grey);
  margin-bottom: 16px;
  text-transform: uppercase;
}
.blog .post-list--cards {
  display: grid;
  grid-gap: 2em;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin: 0 0 2rem 0;
  padding: 1em;
}
.blog .post-list--cards .card {
  align-items: center;
  background: var(--white);
  border-radius: 5px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);
  color: var(--off-black);
  display: flex;
  flex-direction: column;
  font-weight: 500;
  justify-content: center;
  padding: 1em;
  transition: 300ms box-shadow;
  width: fit-content;
}
.blog .post-list--cards .card:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.blog .post-list--cards .card__title {
  font-size: 16px;
  margin: 0;
}
.blog .post-list--cards .card__img {
  height: 200px;
  margin-bottom: 1em;
  object-fit: cover;
}
.blog .post {
  margin-bottom: 54px;
}
.blog .post--stream {
  margin-bottom: 0;
}
.blog .post--stream p {
  font-size: 2rem;
}
.blog .post--stream .meta {
  margin-bottom: 0;
}
.blog .post__heading {
  margin-bottom: 0;
  text-align: center;
}
.blog .post .meta {
  text-align: center;
}
.blog .post__img {
  margin-bottom: 24px;
}
.blog .post--img {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}
.blog .post--img figure {
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 56px;
}
.blog .post--img figcaption {
  font-weight: bold;
  margin: 0;
  padding: 1em;
  margin-bottom: -56px;
}
.blog .post--img img {
  border: 1px solid rgba(0, 0, 0, 0.2);
  margin: 0;
}
.blog .post--img .meta {
  margin: 2em 0 0;
}
.blog .post figure {
  margin: 0;
}
.blog .listing {
  list-style: none;
  padding: 0;
}

.post img {
  border: 1px solid #c6bfbf;
}

.sidebar {
  border-top: 2px solid var(--orange);
  height: fit-content;
  min-height: 400px;
  position: -webkit-sticky;
  position: sticky;
  top: 4em;
}
.sidebar.cols {
  margin-left: 0;
}
@media only screen and (min-width: 60em) {
  .sidebar.cols {
    margin-left: 2%;
  }
}

.meta .heading {
  align-items: center;
  display: flex;
  font-size: 1.8rem;
  font-size: 18px;
  gap: 0.6rem;
  text-transform: uppercase;
}
.meta .heading:first-of-type {
  margin-top: 0.6em;
}
.meta ul {
  margin-left: 4px;
}

.more::after {
  content: "";
  border-bottom: 6px solid transparent;
  border-left: 6px solid #333;
  border-top: 6px solid transparent;
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
}

.b-inner:hover .more {
  animation: arrow-bounce 1s cubic-bezier(0.4, 0.04, 0.4, 1);
}

.b-inner:hover .more::after {
  border-left: 6px solid var(--black);
}

@keyframes arrow-bounce {
  60% {
    transform: translateX(8px);
  }
  70% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(2px);
  }
  90% {
    transform: translateX(-1px);
  }
}
/*
  Contact
*/
.contact-options {
  display: grid;
  gap: 2rem;
}
@media only screen and (min-width: 40em) {
  .contact-options { /* 640 */
    gap: 0;
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.contact-options a:hover, .contact-options a:focus {
  fill: var(--orange);
}
.contact-options a[href^="tel:"] {
  cursor: pointer;
  pointer-events: auto;
}

/*
  Block
*/
.block {
  overflow: hidden;
}
.block p:last-child {
  margin-bottom: 0;
}
.block--thumb {
  border-collapse: collapse;
  display: table;
  width: 100%;
}
.block--thumb .b-inner {
  border: 0;
  display: table-row;
  vertical-align: top;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
}

@media all and (min-width: 29.75em) {
  .block--thumb .b-thumb {
    display: table-cell;
    padding-right: 1em;
    max-width: 10em;
    vertical-align: top;
    width: 30%;
  }
  .block--thumb .b-thumb img {
    display: block;
    width: 100%;
    height: auto;
  }
}
@media all and (min-width: 29.75em) {
  .block--thumb .b-text {
    display: table-cell;
    padding: 0;
  }
}
.book {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 3fr;
}
.book img {
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  margin-bottom: 0;
  transition: all 0.3s ease-in-out;
}
.book:hover img, .book:focus img {
  box-shadow: none;
}
.book .details {
  display: flex;
  flex-direction: column;
}
.book h3 {
  font-size: 2rem;
  margin-bottom: 0;
}
.book a:link {
  border: 0;
}
.book p {
  margin-bottom: 1rem;
}
.book .subtitle,
.book .author {
  margin-bottom: 1rem;
}
.book .author {
  font-size: 2rem;
}
.book .subtitle {
  font-size: 1.4rem;
}

.bookshelf {
  border-bottom: 2px solid var(--orange);
  display: grid;
  grid-gap: calc(1em + 2vw);
  margin-bottom: 4rem;
  padding-bottom: 4rem;
}
.bookshelf + .year {
  margin-top: 4rem;
}

@media (min-width: 40em) {
  .bookshelf {
    grid-template-columns: repeat(auto-fill, minmax(30em, 1fr));
  }
}
.links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(34ch, 1fr));
  gap: 2rem;
}

.link-card {
  align-items: center;
  background-color: #f5f5f5;
  border-bottom: 1px solid var(--orange);
  display: flex;
  flex-direction: row;
  gap: 1rem;
  justify-content: space-between;
  padding-block: 1rem;
  padding-inline: 1rem;
  transition: all 0.3s ease-in-out;
}
.link-card__link {
  align-items: center;
  border: none;
  display: flex;
  gap: 1rem;
}
.link-card:hover, .link-card:focus {
  background-color: var(--orange);
  border-color: var(--orange);
}
.link-card img {
  margin-bottom: 0;
}

.link {
  border-bottom: 1px solid var(--orange);
  margin-bottom: 2rem;
  padding-bottom: 1rem;
}
.link a {
  font-size: 2rem;
  position: relative;
}
.link a:after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 24 24' %3E%3Cpath d='M12.71 12.71 19 6.41 19 11 21 11 21 3 13 3 13 5 17.59 5 11.29 11.29 12.71 12.71z'%3E%3C/path%3E%3Cpath d='m11,5v-2h-6c-1.1,0-2,.9-2,2v14c0,1.1.9,2,2,2h14c1.1,0,2-.9,2-2v-6h-2v6H5V5h6Z'%3E%3C/path%3E%3C/svg%3E");
  content: "";
  height: 16px;
  margin-left: 4px;
  margin-top: 10px;
  position: absolute;
  right: auto;
  width: 16px;
}
.link a:hover, .link a:focus {
  border-color: var(--off-black);
}
.link__meta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.link__meta span, .link__meta a {
  font-size: 1.6rem;
}

.mastodon-post-wrapper {
  margin-top: 2.4rem;
  width: 100%;
}
@media only screen and (min-width: 1024px) {
  .mastodon-post-wrapper {
    max-width: 800px;
  }
}
.mastodon-post-wrapper blockquote {
  margin-top: 2rem;
  margin-left: 0;
}
.mastodon-post-wrapper blockquote p::after, .mastodon-post-wrapper blockquote p::before {
  content: "";
}
.mastodon-post-wrapper dl {
  align-items: center;
  display: flex;
  font-size: 1.6rem;
}
.mastodon-post-wrapper dt svg {
  margin-right: 1rem;
}
.mastodon-post-wrapper dd {
  margin: 0 2rem 0 0;
}
.mastodon-post-wrapper .invisible {
  visibility: hidden;
  display: none;
}

.share-dialog svg,
.share-button svg {
  margin-right: 7px;
}

.social-share {
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ddd;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  display: block;
  padding: 20px;
}
.social-share__header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.social-share__targets {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  margin-bottom: 20px;
}
.social-share__button {
  align-items: center;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid #ddd;
  color: #777;
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  font-weight: 500;
  gap: 10px;
  height: auto;
  justify-content: center;
  letter-spacing: 2px;
  line-height: 1.1;
  padding-bottom: 8px;
  padding-top: 8px;
  text-align: center;
  text-decoration: none;
  text-transform: capitalize;
  white-space: nowrap;
}
.social-share__button:hover, .social-share__button:focus {
  border-color: var(--off-black);
  background-color: var(--orange);
  color: var(--black);
  outline: none;
  transition: all 0.3s ease-in-out;
}
.social-share__button:hover svg, .social-share__button:focus svg {
  transition: stroke 0.3s ease-in-out;
  stroke: var(--black);
}
.social-share__link {
  align-items: center;
  background-color: #eee;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  padding: 10px;
}
.social-share__copy-link {
  flex-basis: fit-content;
  padding: 8px 30px;
}
.social-share__copy-link:hover, .social-share__copy-link:focus {
  border-color: var(--off-black);
  background-color: var(--orange);
  color: var(--black);
  outline: none;
  transition: all 0.3s ease-in-out;
}
.social-share__url {
  margin-right: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gfm-merge_request {
  display: none;
}

.latest-post .section-heading {
  border-bottom: 2px solid var(--orange);
  display: inline-block;
  font-size: 2rem;
  text-transform: uppercase;
}
.latest-post .post time {
  display: inline-block;
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.latest-post .post__link > * {
  font-size: 1.8rem;
}

.latest-post .content,
.recent-work .content,
.testimonials .content,
.companies .content {
  align-items: center;
  display: flex;
  flex-direction: column;
}
.latest-post .content__heading,
.recent-work .content__heading,
.testimonials .content__heading,
.companies .content__heading {
  border-bottom: 6px solid var(--orange);
}

.search {
  position: relative;
}
.search .search__box.hidden {
  transform: scale(0.96) translateY(-0.625rem);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
}
.search .search__box {
  inline-size: 35.625rem;
  position: absolute;
  inset-block-start: calc(100% + 0.813rem);
  inset-inline-end: -1.5rem;
  transform: scale(1) translateY(0);
  opacity: 1 !important;
  visibility: visible !important;
  top: 17px;
}
.search input[type=search] {
  border-color: var(--black);
  border-width: 2px;
  font-size: 1.6rem;
  margin-bottom: 0;
  padding: 1rem;
  width: 100%;
}
.search__clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  cursor: pointer;
  display: none;
  height: 24px;
  width: 24px;
}
.search__results {
  background-color: var(--white);
  border: 2px solid var(--black);
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  max-height: 300px;
  overflow-y: auto;
  padding: 0;
  position: relative;
  top: -2px;
}
.search__results li {
  margin-bottom: 0;
  display: flex;
  text-align: left;
}
.search__results li:not(:last-child) {
  border-bottom: 1px solid var(--orange);
}
.search__results li:hover, .search__results li:focus {
  background-color: var(--orange);
}
.search__results a {
  color: var(--black);
  text-decoration: none;
  border-bottom: none;
  padding: 1rem;
  width: 100%;
}

.search-input {
  position: relative;
  width: 100%;
}

.music-list .list-item {
  margin-bottom: 1rem;
}
.music-list .list-item .list-item-name {
  display: block;
  margin-bottom: 0.5rem;
}

/*
  Dashboard
*/
.dash-nav {
  margin-bottom: 24px;
}
.dash-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  list-style: none;
  padding: 0;
}
.dash-nav li {
  display: flex;
  gap: 0.6rem;
}
.dash-nav a {
  text-decoration: none;
}

.dash-grid {
  display: grid;
  gap: 1rem;
  margin: 1.25rem 0 2rem;
}
@media only screen and (min-width: 48em) {
  .dash-grid {
    grid-template-columns: repeat(auto-fill, minmax(242px, 1fr));
  }
}
@media only screen and (min-width: 48em) {
  .dash-grid--2-col {
    grid-template-columns: 6fr 6fr;
  }
}

.dash-card {
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: row;
  padding: 1rem 1rem 0.9rem;
  transition: all 0.3s ease-in-out;
}
.dash-card:hover, .dash-card:focus {
  transform: translateY(-4px);
}
.dash-card__body {
  width: 100%;
}
.dash-card__content {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.dash-card__header {
  align-items: start;
  display: grid;
  gap: 1rem;
  margin-bottom: 0;
}
@media only screen and (min-width: 23.438em) {
  .dash-card__header {
    grid-template-columns: 72px 1fr;
  }
}
.dash-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1rem 0 0;
}
.dash-card__heading {
  margin: 0 0 1rem;
  line-height: 1;
}
.dash-card__heading a {
  align-items: center;
  display: inline-flex;
  gap: 0.6rem;
}
.dash-card__title {
  font-size: 1.6rem;
  line-height: 1.4;
  margin: 0 0 1rem;
}
.dash-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}
.dash-card .pill {
  display: inline-block;
  font-size: 0.85rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  opacity: 0.95;
  white-space: nowrap;
}
.dash-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.dash-card__latest {
  margin-top: 0.9rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  flex-grow: 1;
}
.dash-card__muted {
  opacity: 0.8;
  margin-bottom: 0;
}
.dash-card__meta {
  padding-left: 0;
  margin-bottom: 1rem;
  list-style: none;
}
.dash-card__meta span {
  display: block;
  font-size: 1.4rem;
}

/*
  Media Grid
*/
.media-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
}
@media only screen and (min-width: 48em) {
  .media-grid--2-col {
    grid-template-columns: 6fr 6fr;
  }
}

.media-grid .media-card__poster {
  align-items: center;
  background: rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px 0 0;
  display: flex;
  justify-content: center;
  object-fit: cover;
  width: 100%;
}
.media-grid .media-card__poster--white-bg {
  background: var(--white);
}
.media-grid .media-card__poster-1-1 {
  aspect-ratio: 1/1;
  border-radius: 8px;
}
.media-grid .media-card__poster-3-3 {
  aspect-ratio: 2/3;
  border-radius: 8px;
}
.media-grid .media-card__body {
  padding: 1rem;
}

.media-grid--2-col summary {
  padding: 1rem;
}
.media-grid--2-col summary .media-card__body {
  padding: 0;
}
.media-grid--2-col .media-card__poster {
  aspect-ratio: 2/3;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  overflow: hidden;
}
@media only screen and (min-width: 23.438em) {
  .media-grid--2-col .media-card__poster {
    width: 72px;
  }
}
.media-grid--2-col .media-card__poster img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.media-card {
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}
.media-card:hover, .media-card:focus {
  transform: translateY(-4px);
}
.media-card__body {
  padding: 1rem;
}
.media-card__body p {
  font-size: 1.4rem;
}
.media-card__heading {
  margin: 0 0 1rem;
  line-height: 1;
}
.media-card__header {
  align-items: start;
  display: grid;
  gap: 1rem;
  margin-bottom: 0;
}
@media only screen and (min-width: 23.438em) {
  .media-card__header {
    grid-template-columns: 72px 1fr;
  }
}
.media-card__title {
  font-size: 2rem;
  line-height: 1.4;
}
.media-card__thumb {
  padding: 1rem 1rem 0 1rem;
}
.media-card__muted {
  margin-bottom: 0;
  opacity: 0.8;
}
.media-card__meta summary,
.media-card__meta span,
.media-card__meta a {
  font-size: 1.2rem;
  font-weight: normal;
}
.media-card__meta summary:not(:last-child),
.media-card__meta span:not(:last-child),
.media-card__meta a:not(:last-child) {
  margin-bottom: 0.4rem;
}
.media-card__meta span:not(.tag) {
  display: block;
}
.media-card__meta .tag {
  display: inline-block;
}
.media-card__badges {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.media-card__badges .tag {
  font-size: 0.85rem;
  padding: 0.15rem 0.45rem;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  opacity: 0.9;
  white-space: nowrap;
  text-transform: capitalize;
}
.media-card__latest {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 0.8rem;
  padding-top: 0.8rem;
}
.media-card__placeholder {
  align-items: center;
  aspect-ratio: 1/1;
  background: var(--off-black);
  border-radius: 8px 0 0;
  color: var(--white);
  display: flex;
  font-size: 2rem;
  justify-content: center;
  width: 100%;
}
.media-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1rem 0 0;
}

.media-card__list {
  display: grid;
  gap: 0.9rem;
  margin: 0 0 0.8rem 0;
}
.media-card__list .media-card__list-item {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 0.8rem;
}
.media-card__list .media-card__list-item summary {
  margin-bottom: 0;
  padding: 0 1rem;
}
.media-card__list .media-card__list-item h3 {
  margin: 0 0 0.45rem;
  font-size: 1rem;
}
.media-card__list .media-card__list-item ul {
  cursor: default;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  list-style: none;
  margin: 1rem 1rem 0 1rem;
  padding: 0;
}
.media-card__list .media-card__list-item ul li {
  line-height: 1.4;
}

.media-years {
  font-size: 1.6rem;
  margin-bottom: 2.4rem;
}

.tmdb-attrib {
  margin-top: 2.4rem;
}
.tmdb-attrib p {
  margin-bottom: 0;
}

.uses .heading {
  align-items: center;
  display: grid;
  gap: 1rem;
  grid-template-columns: 24px auto;
}
.uses .heading span {
  line-height: 1.2;
}

.beer-badge {
  transition: all 200ms;
}
.beer-badge:hover {
  transform: scale(1.2);
}

/*
 * Remove text-shadow in selection highlight
 */
::-moz-selection {
  background: var(--orange);
  color: var(--black);
  text-shadow: none;
}

::selection {
  background: var(--orange);
  color: var(--black);
  text-shadow: none;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

/*
* IE10 Touch Browsing Default
*/
canvas {
  -ms-touch-action: double-tap-zoom;
}

/*
 * A better looking default horizontal rule
 */
hr {
  border: 0;
  border-top: 1px solid var(--light-grey);
  display: block;
  height: 1px;
  margin: 0 0 54px 0;
  padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */
audio,
canvas,
img,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */
textarea {
  resize: vertical;
}

/* $_Typography
================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--off-black);
  font-weight: bold;
  margin: 0 0 0.4em;
  text-rendering: optimizelegibility;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  font-size: inherit;
  font-weight: inherit;
}

@media only screen and (min-width: 40em) {
  h1,
  .alpha {
    font-size: 4rem !important;
    line-height: 1.33333 !important;
  }
}

h2,
.beta {
  font-size: 3rem;
  line-height: 1.6;
}

h3,
.gamma {
  font-size: 2.4rem;
  line-height: 1.4;
}

h4,
.delta {
  font-size: 2rem;
  line-height: 1.2;
}

h5,
.epsilon {
  font-size: 1.6rem;
  line-height: 1.5;
}

h6,
.zeta {
  font-size: 1.4rem;
  line-height: 1.71429;
}

.giga {
  font-size: 9.6rem;
  line-height: 1;
}

.mega {
  font-size: 7.2rem;
  line-height: 1;
}

.kilo {
  font-size: 4.8rem;
  line-height: 1;
}

.lede,
.lead {
  font-size: 1.8rem;
  line-height: 1.5;
}

.smallprint,
.milli {
  font-size: 1.2rem;
  line-height: 2;
}

.micro {
  font-size: 1rem;
  line-height: 2.4;
}

dl {
  margin: 0;
}

dl,
dd {
  margin-bottom: 1.5em;
}

dt {
  font-weight: bold;
}

.dl-horizontal dt {
  clear: left;
  float: left;
  text-align: right;
  width: 20.25%;
}
.dl-horizontal dd {
  margin-left: 22.78%;
}

abbr[title] {
  border-color: var(--light-grey);
}

ins {
  background-color: var(--off-white);
  color: var(--black);
  text-decoration: none;
}

mark {
  background-color: var(--off-white);
  color: var(--black);
  font-style: italic;
  font-weight: bold;
  padding: 0 0.25em;
}

kbd,
samp {
  background: var(--blue-grey);
  color: var(--light-grey);
  display: block;
  font-family: "Inconsolata", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  font-size: 1.4rem;
  font-style: italic;
  line-height: 1.5;
  padding: 10px;
}

pre {
  box-shadow: 10px 10px 0 var(--orange);
  margin: 0 0 38px 0;
}
pre code {
  background-color: var(--code-grey);
  color: var(--off-white);
  display: block;
  font-family: "Inconsolata", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  font-size: 1.4rem;
  font-size: 3ex;
  padding: 2em;
}

p code, li code {
  background: var(--light-grey);
  border-radius: 2px;
  color: var(--off-black);
  display: inline;
  padding: 2px 4px;
}

pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

sub,
sup {
  font-size: 1.2rem;
}

p {
  font-size: 1.6rem;
  line-height: 1.4;
  margin: 0 0 1.6rem;
}
p.lead, p.lead a {
  color: var(--off-black);
  font-size: 2rem;
  font-weight: 600;
}
p.no-margin {
  margin: 0;
}
p img {
  margin: 0;
}

body > p:first-of-type {
  font-size: 1.8rem;
  line-height: 1.333;
}

em {
  font-style: italic;
}

del {
  text-decoration: line-through;
}

/*
  Blockquotes
*/
blockquote {
  border-left: 4px solid var(--orange);
  font-size: 1.7em;
  font-size: 1.7rem;
  font-style: italic;
  line-height: 1.5;
  margin: 0 0 1.25em 1.25em;
  padding: 0 1.25em 0 1.1875em;
  quotes: "“" "”";
  text-indent: -0.4em;
}
blockquote:before, blockquote:after {
  content: "";
  content: none;
}
blockquote p {
  font-size: 1.6rem;
  font-style: italic;
  line-height: 1.5;
}
blockquote p::before {
  content: open-quote;
}
blockquote p::after {
  content: close-quote;
}
blockquote p:last-of-type {
  margin-bottom: 0;
}
blockquote cite {
  color: var(--dark-grey);
  display: block;
  font-size: 1.2rem;
  font-style: normal;
}
blockquote cite:before {
  content: "— ";
}
blockquote cite a,
blockquote cite a:visited {
  color: var(--dark-grey);
}

.pull-quote {
  padding: 1em;
  position: relative;
}
.pull-quote:before, .pull-quote:after {
  color: var(--dark-grey);
  font-size: 4rem;
  height: 1em;
  opacity: 0.5;
  position: absolute;
}
.pull-quote:before {
  content: "“";
  top: 0;
  left: 0;
}
.pull-quote:after {
  content: "”";
  bottom: 0;
  right: 0;
}

q {
  quotes: "‘" "’" "“" "”";
}
q:before {
  content: "‘";
  content: open-quote;
}
q:after {
  content: "’";
  content: close-quote;
}

q q:before {
  content: "“";
  content: open-quote;
}

q q:after {
  content: "”";
  content: close-quote;
}

hr {
  border-color: var(--orange);
  margin-bottom: 2.4rem;
}

details {
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1.5;
}
details > summary {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 1rem;
  margin-left: 0;
}
details > * {
  margin-left: 2rem;
}

/* $_Buttons
================================================== */
input,
select,
button {
  cursor: pointer;
}

.button--cta, .button--cta:active {
  background: none repeat scroll 0% 0% var(--orange);
  border: 1px solid transparent;
  border-radius: 0.25em;
  box-shadow: 0 5px 0 var(--dark-orange);
  color: var(--off-black);
  font-size: 16px;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  outline: 0;
  padding: 0.5em 1em;
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  text-transform: uppercase;
}
.button--cta:hover, .button--cta:focus {
  background: none repeat scroll 0% 0% var(--light-orange);
  color: var(--off-white);
}
.button--cta:focus {
  border: 1px solid var(--off-black);
}
.button--full-width {
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center;
  width: 100%;
}
.button--center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.button--search {
  background: transparent;
  border: none;
  display: block;
  padding: 0;
  height: 24px;
  width: 24px;
}
.button--search:hover svg, .button--search:foucs svg {
  fill: var(--orange);
}

/* Fix for odd Mozilla border & padding issues */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* $_Forms
================================================== */
.form {
  margin: 0 0 4em;
}
.form--subscribe {
  background-color: var(--off-white);
  border-left: 8px solid var(--orange);
  margin-bottom: 54px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
}
@media only screen and (min-width: 1024px) {
  .form--subscribe {
    max-width: 800px;
  }
}
@media only screen and (min-width: 40em) {
  .form--subscribe .row,
  .form--subscribe .row .cols {
    margin-bottom: 0;
  }
}
.form--subscribe .content {
  width: 100%;
}
@media only screen and (min-width: 60em) {
  .form--subscribe .content {
    width: 90%;
  }
}
.form--subscribe small {
  display: block;
  text-align: center;
}
@media only screen and (min-width: 40em) {
  .form--subscribe small {
    text-align: left;
    display: inline;
  }
}
.form--subscribe input[type=text],
.form--subscribe input[type=email],
.form--subscribe input[type=submit] {
  width: 100%;
}
@media only screen and (min-width: 40em) {
  .form--subscribe input[type=text],
  .form--subscribe input[type=email],
  .form--subscribe input[type=submit] {
    width: auto;
  }
}
@media only screen and (min-width: 48em) {
  .form--subscribe input[type=text],
  .form--subscribe input[type=email],
  .form--subscribe input[type=submit] {
    width: 100%;
  }
}
.form--subscribe input[type=submit] {
  height: 28px;
  margin-bottom: 10px;
  margin-top: 26px;
  padding: 0.5em 1em 0.4em 1em;
  font-size: 14px;
}
@media only screen and (min-width: 40em) {
  .form--subscribe input[type=submit] {
    margin-bottom: 0;
  }
}
.form--horizontal .control-group {
  margin-bottom: 1.25em;
}
.form--horizontal .control-group:before {
  content: "";
  display: table;
  line-height: 0;
}
.form--horizontal .control-group:after {
  clear: both;
  content: "";
  display: table;
  line-height: 0;
}
.form--horizontal .control-group .control-label {
  float: left;
  padding: 0;
  width: 100%;
}
.form--horizontal .control-group .help-block {
  margin-bottom: 0;
}
.form--horizontal .control-group input + .help-block,
.form--horizontal .control-group select + .help-block,
.form--horizontal .control-group textarea + .help-block {
  margin-top: 0.625em;
}
.form--horizontal .control-group .form-actions {
  padding-left: 11.25em;
}
@media only screen and (min-width: 40em) {
  .form--comment {
    margin: 0 auto;
    max-width: 400px;
  }
}
.form .hide {
  display: none;
}
.form input:not(.button),
.form textarea,
.form select,
.form .help-inline,
.form .uneditable-input,
.form .input-prepend,
.form .input-append {
  display: inline-block;
  margin-bottom: 0;
  vertical-align: top;
}
@media only screen and (min-width: 40em) {
  .form .four {
    width: 23.5%;
  }
}

fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

legend {
  border: 0;
  border-bottom: 1px solid var(--off-white);
  color: var(--darker-grey);
  display: block;
  font-size: 21px;
  font-size: 2.1rem;
  line-height: 1.142857143;
  margin-bottom: 24px;
  padding: 0;
  width: 100%;
}

legend small {
  color: var(--dark-grey);
  font-size: 15px;
  font-size: 1.5rem;
}

label,
input,
button,
select,
textarea {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: normal;
  width: 100%;
}

textarea {
  overflow: auto;
}

label {
  display: block;
  margin-bottom: 0.3125em;
}

select,
textarea {
  border-radius: 0.1875em;
  color: var(--dark-grey);
  display: inline-block;
  height: auto;
  line-height: 1.25;
  margin-bottom: 0.5625em;
  padding: 0.5em 0.375em;
}

input[type=text],
input[type=password],
input[type=datetime],
input[type=datetime-local],
input[type=date],
input[type=month],
input[type=time],
input[type=week],
input[type=number],
input[type=email],
input[type=url],
input[type=search],
input[type=tel],
input[type=color] {
  border-radius: 0.1875em;
  color: var(--dark-grey);
  display: inline-block;
  font-size: 14px;
  font-size: 1.4rem;
  height: auto;
  line-height: 1.25;
  margin-bottom: 0.5625em;
  padding: 0.5em 0.37em;
}

.uneditable-input {
  border-radius: 0.1875em;
  color: var(--dark-grey);
  display: inline-block;
  height: auto;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.25;
  margin-bottom: 0.5625em;
  padding: 0.5em 0.375em;
}

textarea {
  background-color: var(--white);
  border: 1px solid var(--light-grey);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  height: auto;
  transition: border linear 0.2s, box-shadow linear 0.2s;
  width: 100%;
}
textarea:focus {
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  outline: 0;
}

input[type=text],
input[type=password],
input[type=datetime],
input[type=datetime-local],
input[type=date],
input[type=month],
input[type=time],
input[type=week],
input[type=number],
input[type=email],
input[type=url],
input[type=search],
input[type=tel],
input[type=color] {
  background-color: var(--white);
  border: 1px solid var(--light-grey);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  transition: border linear 0.2s, box-shadow linear 0.2s;
}

.uneditable-input {
  background-color: var(--white);
  border: 1px solid var(--light-grey);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  transition: border linear 0.2s, box-shadow linear 0.2s;
}

input[type=text]:focus,
input[type=password]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=date]:focus,
input[type=month]:focus,
input[type=time]:focus,
input[type=week]:focus,
input[type=number]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=search]:focus,
input[type=tel]:focus,
input[type=color]:focus {
  border-color: rgba(248, 152, 32, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(248, 152, 32, 0.6);
  outline: 0;
}

.uneditable-input:focus {
  border-color: rgba(248, 152, 32, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(248, 152, 32, 0.6);
  outline: 0;
}

input[type=radio],
input[type=checkbox] {
  cursor: pointer;
  line-height: normal;
  margin: 0.25em 0 0;
}

input[type=file],
input[type=image],
input[type=submit],
input[type=reset],
input[type=button],
input[type=radio],
input[type=checkbox] {
  width: auto;
}

select,
input[type=file] {
  line-height: 1.875;
}

select {
  background-color: var(--white);
  border: 1px solid var(--light-grey);
  width: 13.75em;
}
select:focus {
  outline: thin dotted var(--darker-grey);
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

select[multiple],
select[size] {
  height: auto;
}

input[type=file]:focus,
input[type=radio]:focus,
input[type=checkbox]:focus {
  outline: thin dotted var(--darker-grey);
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

.uneditable-input,
.uneditable-textarea {
  background-color: var(--off-white);
  border-color: var(--light-grey);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
  color: var(--darker-grey);
  cursor: not-allowed;
}

.uneditable-input {
  overflow: hidden;
  white-space: nowrap;
}

.uneditable-textarea {
  height: auto;
  width: auto;
}

input:-moz-placeholder,
textarea:-moz-placeholder,
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: var(--darker-grey);
}

.radio,
.checkbox {
  min-height: 1.125em;
  padding-left: 1.125em;
}

.radio input[type=radio],
.checkbox input[type=checkbox] {
  float: left;
  margin-left: -1.125em;
  margin-top: 2px;
  outline: none;
}

.controls > .radio:first-child,
.controls > .checkbox:first-child {
  padding-top: 0.3125em;
}

.radio.inline,
.checkbox.inline {
  display: inline-block;
  margin-bottom: 0;
  padding-top: 0.3125em;
  vertical-align: middle;
}

.radio.inline + .radio.inline,
.checkbox.inline + .checkbox.inline {
  margin-left: 0.625em;
}

input[class*=span],
select[class*=span],
textarea[class*=span],
.uneditable-input[class*=span] {
  float: none;
  margin-left: 0;
}

.row-fluid input[class*=span],
.row-fluid select[class*=span],
.row-fluid textarea[class*=span],
.row-fluid .uneditable-input[class*=span] {
  float: none;
  margin-left: 0;
}

.input-append input[class*=span],
.input-append .uneditable-input[class*=span] {
  display: inline-block;
}

.input-prepend input[class*=span],
.input-prepend .uneditable-input[class*=span] {
  display: inline-block;
}

.row-fluid input[class*=span],
.row-fluid select[class*=span],
.row-fluid textarea[class*=span],
.row-fluid .uneditable-input[class*=span],
.row-fluid .input-prepend [class*=span],
.row-fluid .input-append [class*=span] {
  display: inline-block;
}

input,
textarea,
.uneditable-input {
  margin-left: 0;
}

.controls-row [class*=span] + [class*=span] {
  margin-left: 1.25em;
}

.controls-row:before {
  content: "";
  display: table;
  line-height: 0;
}

.controls-row:after {
  clear: both;
  content: "";
  display: table;
  line-height: 0;
}

.controls-row [class*=span] {
  float: left;
}

input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
  background-color: var(--off-white);
  cursor: not-allowed;
}

input[type=radio][disabled],
input[type=checkbox][disabled],
input[type=radio][readonly],
input[type=checkbox][readonly] {
  background-color: transparent;
}

.control-group.warning > label,
.control-group.warning .help-block,
.control-group.warning .help-inline,
.control-group.warning .checkbox,
.control-group.warning .radio,
.control-group.warning input,
.control-group.warning select,
.control-group.warning textarea {
  color: var(--light-orange);
}

.control-group.warning input,
.control-group.warning select,
.control-group.warning textarea {
  border-color: var(--light-orange);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.control-group.warning input:focus,
.control-group.warning select:focus,
.control-group.warning textarea:focus {
  border-color: #a47e3c;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
}

.control-group.warning .input-prepend .add-on,
.control-group.warning .input-append .add-on {
  background-color: #fcf8e3;
  border-color: var(--light-orange);
  color: var(--light-orange);
}

.control-group.error > label,
.control-group.error .help-block,
.control-group.error .help-inline,
.control-group.error .checkbox,
.control-group.error .radio,
.control-group.error input,
.control-group.error select,
.control-group.error textarea,
.ideal-field.invalid input,
.ideal-error {
  color: #b94a48;
}

.control-group.error input,
.control-group.error select,
.control-group.error textarea,
.ideal-field.invalid input {
  border-color: #b94a48;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.control-group.error input:focus,
.control-group.error select:focus,
.control-group.error textarea:focus,
.ideal-field.invalid input:focus {
  border-color: #953b39;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
}

.control-group.error .input-prepend .add-on,
.control-group.error .input-append .add-on {
  background-color: #f2dede;
  border-color: #b94a48;
  color: #b94a48;
}

.control-group.success > label,
.control-group.success .help-block,
.control-group.success .help-inline,
.control-group.success .checkbox,
.control-group.success .radio,
.control-group.success input,
.control-group.success select,
.control-group.success textarea {
  color: #468847;
}

.control-group.success input,
.control-group.success select,
.control-group.success textarea {
  border-color: #468847;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.control-group.success input:focus,
.control-group.success select:focus,
.control-group.success textarea:focus {
  border-color: #356635;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
}

.control-group.success .input-prepend .add-on,
.control-group.success .input-append .add-on {
  background-color: #dff0d8;
  border-color: #468847;
  color: #468847;
}

.control-group.info > label,
.control-group.info .help-block,
.control-group.info .help-inline,
.control-group.info .checkbox,
.control-group.info .radio,
.control-group.info input,
.control-group.info select,
.control-group.info textarea {
  color: #3a87ad;
}

.control-group.info input,
.control-group.info select,
.control-group.info textarea {
  border-color: #3a87ad;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.control-group.info input:focus,
.control-group.info select:focus,
.control-group.info textarea:focus {
  border-color: #2d6987;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
}

.control-group.info .input-prepend .add-on,
.control-group.info .input-append .add-on {
  background-color: #d9edf7;
  border-color: #3a87ad;
  color: #3a87ad;
}

input:focus:required:invalid,
textarea:focus:required:invalid,
select:focus:required:invalid {
  border-color: var(--light-red);
  color: var(--dark-red);
}

input:focus:required:invalid:focus,
textarea:focus:required:invalid:focus,
select:focus:required:invalid:focus {
  border-color: var(--red);
  box-shadow: 0 0 6px var(--light-red);
}

.form-actions {
  background-color: var(--off-white);
  border-top: 1px solid var(--off-white);
  margin: 1.125em 0;
  padding: 1.1875em 1.25em 1.25em;
}

.form-actions:before {
  content: "";
  display: table;
  line-height: 0;
}

.form-actions:after {
  clear: both;
  content: "";
  display: table;
  line-height: 0;
}

.help-block,
.help-inline {
  color: var(--darker-grey);
}

.help-block {
  display: block;
  margin-bottom: 0.625em;
}

.help-inline {
  display: inline-block;
  padding-left: 0.3125em;
  vertical-align: middle;
  line-height: 2.15em;
}

.input-append,
.input-prepend {
  font-size: 0;
  margin-bottom: 0.3125em;
  white-space: nowrap;
}

.input-append input,
.input-prepend input,
.input-append select,
.input-prepend select,
.input-append .uneditable-input,
.input-prepend .uneditable-input {
  border-radius: 0 3px 3px 0;
  font-size: 14px;
  font-size: 1.4rem;
  margin-bottom: 0;
  position: relative;
  vertical-align: top;
}

.input-append input:focus,
.input-prepend input:focus,
.input-append select:focus,
.input-prepend select:focus,
.input-append .uneditable-input:focus,
.input-prepend .uneditable-input:focus {
  z-index: 2;
}

.input-append .add-on,
.input-prepend .add-on {
  background-color: var(--off-white);
  border: 1px solid var(--light-grey);
  display: inline-block;
  font-size: 14px;
  font-size: 1.4rem;
  font-weight: normal;
  height: auto;
  line-height: 1.25;
  min-width: 1em;
  padding: 0.5em 0.3125em;
  text-align: center;
  text-shadow: 0 1px 0 var(--white);
  width: auto;
}

.input-append .add-on,
.input-prepend .add-on {
  line-height: 1.2;
}

.input-append .add-on,
.input-prepend .add-on,
.input-append .btn,
.input-prepend .btn {
  border-radius: 0;
  vertical-align: middle;
}

.input-append .active {
  background-color: var(--light-green);
  border-color: var(--green);
}

.input-prepend .active {
  background-color: var(--light-green);
  border-color: var(--green);
}

.input-prepend .add-on,
.input-prepend .btn {
  margin-right: -0.0625em;
}

.input-prepend .add-on:first-child,
.input-prepend .btn:first-child {
  border-radius: 3px 0 0 3px;
}

.input-append input,
.input-append select,
.input-append .uneditable-input {
  border-radius: 3px 0 0 3px;
}

.input-append .add-on,
.input-append .btn {
  margin-left: -0.0625em;
}

.input-append .add-on:last-child,
.input-append .btn:last-child {
  border-radius: 0 3px 3px 0;
}

.input-prepend.input-append input,
.input-prepend.input-append select,
.input-prepend.input-append .uneditable-input {
  border-radius: 0;
}

.input-prepend.input-append .add-on:first-child,
.input-prepend.input-append .btn:first-child {
  border-radius: 3px 0 0 3px;
  margin-right: -1px;
}

.input-prepend.input-append .add-on:last-child,
.input-prepend.input-append .btn:last-child {
  border-radius: 0 3px 3px 0;
  margin-left: -0.0625em;
}

input.search-query {
  border-radius: 1em;
  margin-bottom: 0;
  padding-right: 0.875em;
  padding-left: 0.875em;
}

/* Allow for input prepend/append in search forms */
.form-search .input-append .search-query,
.form-search .input-prepend .search-query {
  border-radius: 0;
}

.form-search .input-append .search-query {
  border-radius: 0.875em 0 0 0.875em;
}

.form-search .input-append .btn {
  border-radius: 0 0.875em 0.875em 0;
}

.form-search .input-prepend .search-query {
  border-radius: 0 0.875em 0.875em 0;
}

.form-search .input-prepend .btn {
  border-radius: 0.875em 0 0 0.875em;
  height: auto;
}

.form-search input {
  display: inline-block;
  margin-bottom: 0;
  vertical-align: top;
}

.form-search label,
.form-inline label,
.form-search .btn-group,
.form-inline .btn-group {
  display: inline-block;
}

.form-search .input-append,
.form-inline .input-append,
.form-search .input-prepend,
.form-inline .input-prepend {
  margin-bottom: 0;
}

.form-search .radio,
.form-search .checkbox {
  margin-bottom: 0;
  padding-left: 0;
  vertical-align: middle;
}

.form-inline .radio,
.form-inline .checkbox {
  margin-bottom: 0;
  padding-left: 0;
  vertical-align: middle;
}

.form-search .radio input[type=radio],
.form-search .checkbox input[type=checkbox] {
  float: left;
  margin-right: 0.1875em;
  margin-left: 0;
}

.form-inline .radio input[type=radio],
.form-inline .checkbox input[type=checkbox] {
  float: left;
  margin-right: 0.1875em;
  margin-left: 0;
}

.form-inline.ideal-form .ideal-error {
  margin-left: 10px;
  line-height: 2.185;
}

.control-group {
  margin-bottom: 0.625em;
}

legend + .control-group {
  margin-top: 1.25em;
  -webkit-margin-top-collapse: separate;
}

@media only screen and (min-width: 40em) {
  /* 640 =================================================== */
  .input--mini {
    width: 10%;
  }
  .input--small {
    width: 20%;
  }
  .input--medium {
    width: 40%;
  }
  .input--large {
    width: 60%;
  }
  .input--xlarge {
    width: 80%;
  }
  .input--xxlarge {
    width: 100%;
  }
}
/* Grid
================================================== */
.row,
.thirds {
  margin-bottom: 1.25em;
  width: 100%;
}

.row:after,
.thirds:after {
  clear: both;
  content: "";
  display: table;
}

.row .col,
.row .cols,
.thirds .col {
  margin-bottom: 2%;
}

.alpha {
  margin-left: 0;
}

.omega {
  margin-right: 0;
}

.one,
.two,
.three,
.four,
.five,
.six,
.seven,
.eight,
.nine,
.ten,
.eleven,
.twelve,
.thirteen,
.fourteen,
.fifteen,
.sixteen,
.third {
  width: 100%;
}

.col:first-child,
.cols:first-child,
.thirds .col:first-child {
  margin-left: 0;
}

@media only screen and (min-width: 40em) {
  /* 640 =================================================== */
  .alignleft {
    float: left;
    margin: 0% 2% 2% 0;
  }
  .alignright {
    float: right;
    margin: 0% 0 2% 2%;
  }
  .col,
  .cols {
    float: left;
    margin-left: 2%;
  }
  .col:first-child,
  .cols:first-child {
    margin-left: 0;
  }
  .thirds .col {
    float: left;
    margin-left: 1.545%;
    width: 32.2916666667%;
  }
  .alt-spacing {
    margin-left: 4.5%;
  }
  .one {
    width: 4.375%;
  }
  .two {
    width: 10.75%;
  }
  .three {
    width: 17.125%;
  }
  .four {
    width: 48%;
  }
  .five {
    width: 29.875%;
  }
  .six {
    width: 36.25%;
  }
  .seven {
    width: 42.625%;
  }
  .eight {
    width: 49%;
  }
  .nine {
    width: 55.375%;
  }
  .ten {
    width: 61.75%;
  }
  .eleven {
    width: 68.125%;
  }
  .twelve {
    width: 100%;
  }
  .thirteen {
    width: 80.875%;
  }
  .fourteen {
    width: 87.25%;
  }
  .fifteen {
    width: 93.625%;
  }
  .sixteen {
    width: 100%;
  }
}
@media only screen and (min-width: 60em) {
  /* 960 =================================================== */
  .four {
    width: 23.5%;
  }
  .twelve {
    width: 74.5%;
  }
}
.grid {
  display: grid;
}

@media only screen and (min-width: 40em) {
  .grid-3-col { /* 640 */
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.grid-8-4 {
  display: grid;
}
@media only screen and (min-width: 40em) {
  .grid-8-4 { /* 640 */
    grid-template-columns: 8fr 4fr;
  }
}

@media only screen and (min-width: 40em) {
  .grid-9-3 { /* 640 */
    grid-template-columns: 9fr 3fr;
  }
}

.grid-4-col {
  display: grid;
}
@media only screen and (min-width: 40em) {
  .grid-4-col { /* 640 */
    grid-template-columns: 8fr 8fr;
  }
}
@media only screen and (min-width: 60em) {
  .grid-4-col {
    grid-template-columns: 4fr 4fr 4fr 4fr;
  }
}

.grid-6-6 {
  display: grid;
  gap: 4rem;
}
@media only screen and (min-width: 40em) {
  .grid-6-6 { /* 640 */
    grid-template-columns: 6fr 6fr;
  }
}

.gap-1 {
  gap: 1rem;
}

.gap-2 {
  gap: 2rem;
}

.gap-3 {
  gap: 3rem;
}

.gap-4 {
  gap: 4rem;
}

.gap-5 {
  gap: 5rem;
}

.gap-6 {
  gap: 6rem;
}

/* $_Images
================================================== */
img {
  display: block;
  height: auto;
  max-width: 100%;
}
img--rounded {
  border-radius: 4px;
}
img--circle {
  border-radius: 500px;
}
img--polaroid {
  background-color: var(--white);
  border: 1px solid #c6bfbf;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  padding: 12px;
}
img--right {
  float: right;
  margin-bottom: 24px;
  margin-left: 24px;
}
img--left {
  float: left;
  margin-right: 24px;
  margin-bottom: 24px;
}
img--center {
  display: block;
  margin-right: auto;
  margin-bottom: 24px;
  margin-left: auto;
}
img--short {
  height: 120px;
}
img--medium {
  height: 240px;
}
img--tall {
  height: 360px;
}

svg:not(:root) {
  overflow: hidden;
}

/* $_Figures
================================================== */
figure {
  align-items: center;
  display: flex;
  flex-direction: column;
}
figure img {
  margin-bottom: 2rem;
}
figure figcaption {
  color: var(--off-black);
  font-style: italic;
  font-size: 1.6rem;
  font-weight: normal;
  margin-bottom: 4rem;
}
figure figcaption > * {
  margin: 0;
}

/* $_Lists
================================================== */
ul,
ol {
  font-size: 1.6rem;
  margin: 0;
  margin-bottom: 24px;
  padding-left: 24px;
}
ul li,
ol li {
  line-height: 1.5;
}

ol {
  list-style: decimal;
}

ul.square,
ul.circle,
ul.disc {
  margin-left: 1.875em;
}

ul.square {
  list-style: square outside;
}
ul.circle {
  list-style: circle outside;
}
ul .disc {
  list-style: disc outside;
}

ul ul,
ul ol {
  margin: 0.25em 0.3125em;
}

ol ol,
ol ul {
  margin: 0.25em 0.3125em;
}

ul ul li,
ul ol li {
  margin-bottom: 0.375em;
}

ol ol li,
ol ul li {
  margin-bottom: 0.375em;
}

ul.large li,
li p {
  line-height: 1.3125;
}

.list-bordered {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.list-bordered li:not(:last-child) {
  border-bottom: 1px dashed var(--off-black);
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}

.list-style-none {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.list-style-none li:not(:last-child) {
  margin-bottom: 0.6rem;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.tags a {
  border-radius: 8px;
  border: 1px solid var(--orange);
  font-size: 1.4rem;
  padding: 2px 6px;
}
.tags a:hover, .tags a:focus {
  background-color: var(--orange);
  color: var(--white);
}
.tags--lrg {
  gap: 1.4rem;
  justify-content: center;
}
.tags--lrg a {
  font-size: 1.8rem;
  line-height: 1;
  padding: 6px;
  text-transform: uppercase;
}

.tag {
  border-radius: 8px;
  border: 1px solid var(--orange);
  font-size: 1.4rem;
  padding: 2px 6px;
}

.tags-list {
  padding: 54px 0;
}

.tags--inline li {
  display: inline-block;
}
.tags--inline li a {
  background: var(--light-grey);
  border-radius: 4px;
}

.watchlist .item {
  display: flex;
  gap: 2rem;
}
.watchlist .item a {
  font-weight: 600;
  font-size: 1.8rem;
}
.watchlist .item p {
  margin-top: 1rem;
}
.watchlist .item img {
  max-width: 100px;
}

/* $_Tables
================================================== */
table {
  border: 1px solid var(--light-grey);
  border-collapse: collapse;
  font-size: 14px;
  margin: 0 0 24px 0;
  padding: 0;
  table-layout: fixed;
  width: 100%;
}
table caption {
  margin: 0.5em 0 0.75em;
}
table tr {
  background-color: var(--off-white);
  border: 1px solid var(--dark-grey);
  padding: 0.35em;
}
table th,
table td {
  padding: 0.625em;
  text-align: left;
}
table th {
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media screen and (max-width: 768px) {
  table {
    border: 0;
  }
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  table tr {
    border-bottom: 3px solid var(--dark-grey);
    display: block;
    margin-bottom: 0.625em;
  }
  table td {
    border-bottom: 1px solid var(--dark-grey);
    display: block;
    text-align: right;
  }
  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
    margin-right: 10px;
  }
  table td:last-child {
    border-bottom: 0;
  }
}
.avatar__link {
  border: none;
  display: block;
}
.avatar__img {
  border-radius: 50%;
  border: 2px solid var(--off-black);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12);
  height: 48px;
  margin-bottom: 0;
  object-fit: cover;
  transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
  width: 48px;
}
.avatar__img:hover, .avatar__img:focus {
  border-color: var(--orange);
  box-shadow: none;
}

.announcement {
  background: var(--off-black);
  color: var(--orange);
  display: flex;
  font-size: 1.4rem;
  font-weight: bold;
  justify-content: center;
  padding: 1em;
  text-align: center;
}

.alert {
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
}
.alert P {
  margin-bottom: 0;
}
.alert--info {
  background-color: var(--off-white);
  border-left: 8px solid var(--orange);
  color: var(--off-black);
}

/* $_Pagination
================================================== */
.pagination {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5ch;
  justify-content: space-between;
  position: relative;
  width: 100%;
}
.pagination__pages {
  bottom: 0;
  display: flex;
  gap: 1rem;
  justify-content: center;
  position: absolute;
  text-align: center;
  width: 100%;
}
@media only screen and (min-width: 40em) {
  .pagination__pages {
    padding-bottom: 0;
    position: relative;
    width: auto;
  }
}
.pagination__pages a {
  align-content: center;
  border: 1px solid;
  height: 30px;
  margin: 0;
  padding: 0;
  width: 30px;
}
.pagination__pages a:hover, .pagination__pages a:focus {
  background-color: var(--orange);
  border-color: var(--orange);
}
.pagination [aria-current=page] {
  background-color: var(--orange);
  border-color: var(--orange);
}

.post-pagination {
  display: grid;
  gap: var(--space, 1rem);
  grid-template-columns: 1fr 1fr;
  margin-top: 54px;
}
.post-pagination__item {
  border-radius: 0.75rem;
  border: 1px solid var(--light-grey);
  display: block;
  padding: 1rem;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  position: relative;
}
.post-pagination__item:hover, .post-pagination__item:focus {
  border-color: var(--orange);
  transform: translateY(-4px);
}
.post-pagination__item span {
  background: white;
  display: block;
  font-size: 1.2rem;
  padding: 0 2px;
  position: absolute;
  text-transform: uppercase;
  top: -10px;
}
.post-pagination__item strong {
  display: block;
  line-height: 1.4;
  margin-top: 0.25rem;
  width: 100%;
}
.post-pagination__item-grid {
  align-items: center;
  display: grid;
  gap: 1rem;
  height: 100%;
}
.post-pagination__item--previous .post-pagination__item-grid {
  grid-template-columns: 32px 3fr;
}
.post-pagination__item--previous span {
  left: 10px;
}
.post-pagination__item--next .post-pagination__item-grid {
  grid-template-columns: 3fr 32px;
}
.post-pagination__item--next span {
  right: 10px;
}
.post-pagination--older {
  text-align: right;
  grid-column: 2;
}

@media (max-width: 600px) {
  .post-pagination {
    grid-template-columns: 1fr;
  }
  .post-pagination__item--older {
    grid-column: auto;
    text-align: left;
  }
}
/* ==========================================================================
   Utility Classes
   ========================================================================== */
.u-block {
  display: block;
}

.u-flex {
  display: flex;
}

.u-flex--inline {
  display: inline-flex;
}

.u-flex-wrap {
  flex-wrap: wrap;
}

.u-grid {
  display: grid;
}

.u-grid-4 {
  grid-template-columns: 4fr 4fr 4fr 4fr;
}

.u-gap-04 {
  gap: 0.24rem;
}

.u-gap-1 {
  gap: 1rem;
}

.u-gap-2 {
  gap: 2rem;
}

.u-flex-col {
  flex-direction: column;
}

.u-flex-row {
  flex-direction: row;
}

.u-flex-grow-1 {
  flex-grow: 1;
}

.u-inline {
  display: inline;
}

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

.u-center {
  align-items: center;
  justify-content: center;
}

.u-vert-center {
  align-items: center;
}

.u-border-none {
  border-width: 0;
}

.u-width-auto {
  width: auto;
}

.u-width-max-80 {
  max-width: 80%;
}

.u-width-max-content {
  width: max-content;
}

.u-mb-0 {
  margin-bottom: 0 !important;
}

.u-mb-05 {
  margin-bottom: 0.5rem;
}

.u-mb-1 {
  margin-bottom: 1rem;
}

.u-mb-2 {
  margin-bottom: 2rem;
}

.u-mb-3 {
  margin-bottom: 3rem;
}

.u-mb-4 {
  margin-bottom: 4rem;
}

.u-mb-5 {
  margin-bottom: 5rem;
}

.u-mb-6 {
  margin-bottom: 6rem;
}

.u-mb-7 {
  margin-bottom: 7rem;
}

.u-mb-8 {
  margin-bottom: 8rem;
}

.u-mb-9 {
  margin-bottom: 9rem;
}

.u-mb-10 {
  margin-bottom: 10rem;
}

.u-mt-0 {
  margin-top: 0 !important;
}

.u-mt-1 {
  margin-top: 1rem;
}

.u-mt-2 {
  margin-top: 2rem;
}

.u-mt-3 {
  margin-top: 3rem;
}

.u-mt-4 {
  margin-top: 4rem;
}

.u-mt-5 {
  margin-top: 5rem;
}

.u-mt-6 {
  margin-top: 6rem;
}

.u-mt-7 {
  margin-top: 7rem;
}

.u-mt-8 {
  margin-top: 8rem;
}

.u-mt-9 {
  margin-top: 9rem;
}

.u-mt-10 {
  margin-top: 10rem;
}

.u-mr-1 {
  margin-right: 1rem;
}

.u-pb-0 {
  padding-bottom: 0 !important;
}

.u-pb-1 {
  padding-bottom: 1rem;
}

.u-pb-2 {
  padding-bottom: 2rem;
}

.u-pb-3 {
  padding-bottom: 3rem;
}

.u-pb-4 {
  padding-bottom: 4rem;
}

.u-p-6 {
  padding: 6px;
}

.u-p-0 {
  padding: 0;
}

.u-p-1 {
  padding: 1rem;
}

.u-p-2 {
  padding: 2rem;
}

.u-pt-0 {
  padding-top: 0 !important;
}

.rotate-180 {
  transform: rotate(180deg);
}

.u-uppercase {
  text-transform: uppercase;
}

.border-radius--1 {
  border-radius: 1rem;
}
.border-radius--2 {
  border-radius: 2rem;
}

.u-text--center {
  text-align: center;
}
.u-text--left {
  text-align: left;
}
.u-text--right {
  text-align: right;
}
.u-text--bold {
  font-weight: bold;
}

.u-content-gap {
  padding: 54px 0;
}

.u-stroke-black {
  stroke: var(--black);
}

.u-sticky {
  position: sticky;
}

.u-top-4 {
  top: 4rem;
}