@import url('https://rsms.me/inter/inter.css');
html { font-family: 'Inter', sans-serif; }
@supports (font-variation-settings: normal) {
  html { font-family: 'Inter var', sans-serif; }
}

:root {
  /* --color__green: 12, 229, 169; */
  --color__green: 12, 214, 158;
  --color__green-dark: #09b585;
  --color__black: #424242;
  --karla: 'Karla', 'Helvetica Neue Light', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --inter: 'Inter var', 'Inter', Helvetica, sans-serif;
  --space-mono: 'Space Mono', monospace;
  --sporting: 'Sporting Grotesque_Regular', 'Helvetica', 'Arial', sans-serif;
  --text-font-stack: var(--inter);
  --mono-font: var(--space-mono);
  --display-font: var(--sporting);
  --text-color: var(--color__black);
  --brand-color: rgba(var(--color__green), 1);
  --light-gray: rgb(237, 237, 237);
  --mid-gray: rgb(153, 153, 153);
  --dark-gray: rgb(68, 68, 68);
  --max-width: 1380px;
  --description-padding: 1.5em;
  --section-padding: 2em;
}

@font-face {
  font-family: 'Sporting Grotesque_Regular';
  src: url('/fonts/Regular/Sporting_Grotesque-Regular_web.eot');
  src: url('/fonts/Regular/Sporting_Grotesque-Regular_web.eot?#iefix') format('embedded-opentype'),
    url('/fonts/Regular/Sporting_Grotesque-Regular_web.woff') format('woff'),
    url('/fonts/Regular/Sporting_Grotesque-Regular_web.woff2') format('woff2'),
    url('/fonts/Regular/Sporting_Grotesque-Regular_web.ttf') format('truetype'),
    url('/fonts/Regular/Sporting_Grotesque-Regular_web.svg#svgFontName') format('svg');
  font-weight: normal;
  font-style: normal;
}

/**
 * CSS Variables
 */

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
  letter-spacing: 0.02em;
}

/* All elements inherit box-sizing */
*,
*::before,
*::after {
  box-sizing: inherit;
}

/*****************
 * Helpers
 *****************/

.clearfix::after {
  clear: both;
  content: "";
  display: table;
}

.container {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--section-padding);
  padding-right: var(--section-padding);
  width: 100%;
}

.anchor-offset {
  position: relative;
  top: -100px;
  display: block;
}

img {
  max-width: 100%;
}

body {
  background-image: linear-gradient(to top, var(--brand-color) 0%, rgba(var(--color__green), 0.25) 5%, rgba(var(--color__green), 0) 11%);
  border-top: 9px solid var(--brand-color);
  /* iPhone X notch padding */
  padding-left: constant(safe-area-inset-left);
  padding-right: constant(safe-area-inset-right);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-left);
  color: var(--text-color);
  font: normal 300 100% / 1.65 var(--text-font-stack);
  /* font-weight: 300; */
}

@media (max-width: 700px) {
  body {
    background-image: linear-gradient(to top, var(--brand-color) 0%, rgba(var(--color__green), 0.25) 2%, rgba(var(--color__green), 0) 6%);
  }
}

/************
 * Typography
 ************/

h1, h2, h3, h4, h5, h6 {
  font-family: var(--display-font);
  font-weight: normal;
}

.italic {
  font-style: italic;
}

.section__heading {
  position: relative;
  display: inline-block;
  line-height: 1;
  font-size: 42px;
  font-size: calc(42em / 16);
}

@media (max-width: 550px) {
  .section__heading {
    font-size: 30px;
  }
}

.section__heading::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 25%;
  left: 0;
  background-color: var(--brand-color);
  mix-blend-mode: multiply;
  transform: translateY(55%);
}

/**
 * Basic styles for text links
 */

a.link,
.text-link {
  color: var(--brand-color);
  font-family: var(--space-mono);
  text-decoration: none;
  position: relative;
  transition: color 0.25s ease-in-out;
}

a.link:hover,
a.link:active,
a.link:focus,
a.current,
.text-link:hover,
.text-link:active,
.text-link:focus {
  color: var(--color__green-dark);
}

a.link::after,
a.current::after,
.text-link::after {
  content: "";
  position: absolute;
  bottom: -.125em;
  height: .125em;
  width: 0%;
  left: 0;
  background-color: var(--color__green-dark);
  ;
  transition: width .25s ease-in-out;
}

a.link:hover::after,
a.current::after,
.text-link:hover::after {
  width: 100%;
}

/********************
 * Header
 ********************/

.site-header {
  color: var(--text-color);
  padding: var(--section-padding);
}

.site-title {
  font-size: 20px;
  font-size: calc(20em / 16);
  margin: 0;
}

@media (min-width: 1000px) {
.site-title {
    font-size: 30px;
    font-size: calc(30em / 16);
  }
}

.site-subhead,
.site-location {
  font-size: 14px;
  font-size: calc(14em / 16);
  font-family: var(--space-mono);
  margin: 0;
}

.site-location {
  color: var(--brand-color);
}
@media (max-width: 700px) {
  .site-header .site-nav {
    margin-top: 15px;
    padding-top: 10px;
    padding-bottom: 15px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--light-gray);
    border-bottom: 1px solid var(--light-gray);
  }

  .site-nav .nav-link {
   margin: 0;
  }
}

@media (min-width: 700px) {
  .site-header {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 1em;
  }

  .site-title {
    grid-column: 1 / span 5;
  }

  .site-subheads {
    grid-column: 6 / span 4;
    grid-column: 1 / span 6;
    margin-top: .25em;
  }

  .site-subhead {
    font-size: 18px;
    font-size: calc(18em / 16);
  }

  .site-location {
    font-size: 16px;
    font-size: 1em;
  }

  .site-nav {
    grid-column: 6 / span 7;
    text-align: right;
    font-size: 18px;
    grid-row: 1;
  }
}

@media (min-width: 1250px) {
  .site-subheads {
    margin-top: 10px;
    grid-column: 6 / span 3;
  }
  .site-nav {
    grid-column: 9 / span 4;
    margin-top: 10px;
  }
}

.nav-link {
  display: inline-block;
  margin-left: 10px;
}

.sticky-header {
  box-shadow: 0 0 35px rgba(0, 0, 0, 0.15);
  display: none;
  position: fixed;
  width: 100%;
  z-index: 100;
  margin-left: auto;
  margin-right: auto;
  padding-left: calc(var(--section-padding) * 2);
  padding-right: calc(var(--section-padding) * 2);
  padding-top: 2em;
  padding-bottom: 1em;
  background-color: rgba(255, 255, 255, 0.95);
  top: -9px;
  border-bottom: 9px solid var(--brand-color);
}

.sticky-header-flex {
  display: flex;
  align-items: center;
}


.sticky-header .site-title {
  line-height: 1;
}

.sticky-header .site-nav {
  margin-left: auto;
  margin-top: 3px;
  margin-bottom: 10px;
}

@media (max-width: 700px) {
  .sticky-header {
    padding-left: var(--section-padding);
    padding-right: var(--section-padding);
  }
  .sticky-header-flex {
    flex-direction: column;
    align-items: flex-start;
  }
  .sticky-header .site-nav {
    margin-left: 0;
    font-size: 14px;
    margin-bottom: 0;
  }
  .sticky-header .nav-link {
    margin-right: 10px;
  }
}
.site-title a {
  text-decoration: none;
  color: var(--text-color);
  transition: color .125s ease-in-out;
}
.site-title a:hover {
  color: var(--brand-color);
}

/********************
 * Intro
 ********************/

 .site-intro-content p {
   line-height: 1.6;
 }

 @media (min-width: 700px) {
   .site-intro {
     display: grid;
     grid-template-columns: repeat(12, 1fr);
     grid-column-gap: 1em;
   }
   .site-intro-content {
     grid-column: 6 / span 7;
   }
   .site-intro-content p {
     font-size: 20px;
   }
 }

 @media (min-width: 800px) {
   .site-intro {
     margin: 3em auto;
   }
 }

 @media (min-width: 1000px) {
   .site-intro p {
     font-size: 24px;
   }
 }

/********************
 * Dev Icons
 ********************/

 .dev-icons {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   margin-top: 3em;
 }
 .icon-wrapper {
   flex-basis: 50px;
   padding: 5px;
 }
 @media (min-width: 1200px) {
   .icon-wrapper {
     flex-basis: 60px;
   }
 }

 @media (max-width: 560px) {
   .icon-wrapper {
     flex-basis: 20%;
   }
 }

/********************
 * Software Section
 ********************/

.software-project {
  margin-bottom: 2em;
}

.s-project__title {
  margin: 0;
  font-size: 26px;
}

@media (max-width: 700px) {
  .s-project__title {
    margin-top: 1em;
  }
}

@media (min-width: 700px) {
  .software-project {
    display: grid;
    grid-column-gap: 1em;
    grid-template-columns: repeat(12, 1fr);
  }
  .s-project__content {
    grid-column: 1 / span 6;
    padding-right: 2em;
  }
  .s-project__images {
    grid-column: 7 / span 6;
    grid-row: 1;
  }
}

@media (min-width: 1000px) {
  .s-project__content {
    grid-column: 1 / span 5;
  }
  .s-project__images {
    grid-column: 6 / span 7;
  }
  .s-project__title {
    font-size: 28px;
  }
  .s-project__content {
    font-size: 17px;
  }
}

@media (min-width: 1300px) {
  .s-project__title {
    font-size: 32px;
  }
  .s-project__content p {
    font-size: 18px;
  }
}

/*******************
 * Digital Projects Section
 *******************/

.projects-list {
  list-style: none;
  padding: 0;
  margin: 3em 0;
}

.l-project {
  border-top: 1px solid var(--light-gray);
  padding-bottom: 3em;
  padding-top: 1em;
}

.l-project-title {
  margin-bottom: 10px;
}

.l-project-title h2 {
  margin-bottom: 0;
  font-size: 20px;
  font-size: calc(20em / 16);
}

@media (min-width: 1200px) {
  .l-project-title h2 {
    font-size: 24px;
    font-size: calc(24em / 16);
  }
}

@media (min-width: 1000px) {
  .l-project-description p {
    font-size: 17px;
  }
}

@media (min-width: 1300px) {

  .l-project-description p {
    font-size: 18px;
  }
}

.l-project-link {
  display: inline-block;
  text-decoration: none;
  color: var(--text-color);
  position: relative;
}

.l-project-link h2 {
  display: inline;
  background-image: linear-gradient(to right, rgba(255,255,255,0) 50%, var(--brand-color) 50%);
  background-position: 0 0;
  background-size: 200.1%;
  transition: background-position 0.3s ease-in-out;
}

.l-project-link:hover h2 {
  background-position: -100% 0;
}

.l-project-link:hover h2::after {
  transform: translateY(10%) scaleX(1);
}

.l-project-description p {
  margin: 0;
}

/* Project Tags */

.l-project-tags {
  margin-top: 10px;
  /* text-align: right; */
}

.l-project-tag,
.badge {
  font-family: var(--space-mono);
  font-size: 13px;
  font-size: calc(13em / 16);
  background-color: var(--brand-color);
  color: white;
  padding: 2px 7px 3px 7px;
  border-radius: 2px;
  margin-bottom: 5px;
  text-align: center;
  display: inline-block;
}

@media (min-width: 700px) {
  .l-project {
    display: grid;
    grid-column-gap: 1em;
    grid-template-columns: repeat(12, 1fr);
  }

  .l-project-title {
    grid-column-start: 1;
    grid-column: 1 / span 5;
  }

  .l-project-description {
    grid-column: 6 / span 7;
  }

  /* .l-project-tags {
    margin-left: auto;
    grid-column: 11 / span 2;
    display: block;
  } */
}

@media (max-width: 700px) {
  .l-project {
    padding-bottom: 0.75em;
  }
  .l-project-tags {
    text-align: left;
    font-size: 11px;
  }
}

/*********************
 * Logo Grid
 *********************/

.logo img {
  height: 100%;
  width: 100%;
}

.logo__orangemade img:last-child {
  display: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.logo__orangemade:hover img:first-child {
  display: none;
}

.logo__orangemade:hover img:last-child {
  display: block;
  opacity: 1;
}

.logo-grid {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: 1fr;
  grid-auto-rows: 300px;
  margin: 3em 0 6em;
}

@media (min-width: 700px) {
  .logo-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 950px) {
  .logo-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/*********************
 * Design Projects
 *********************/

.projects-button-wrapper {
  display: flex;
}
#show-projects-button {
  cursor: pointer;
  margin: 0 auto 3em;
  text-align: center;
  font-size: 18px;
}

.design-project {
  margin: 3em 0;
}

.design-project img {
  display: block;
}

figure {
  margin: 0;
}

@media (min-width: 1000px) {
  .design-project {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(auto-fill, 140px);
    grid-gap: 1em;
    margin-bottom: 8em;
  }
}

@media (max-width: 1000px) {
  .d-project-image {
    margin-bottom: 1.5em;
  }
}

.d-project-image img {
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.15);
}

@media (max-width: 1000px) {
  .d-description {
    margin: 4em 0 2em;
  }
}

@media (min-width: 1300px) {
  .d-description {
    font-size: 18px;
  }
  .d-description h3 {
    font-size: 24px;
  }
}

.owl-nav {
  font-family: var(--space-mono);
  color: var(--brand-color);
  font-size: 50px;
  line-height: 1;
  display: flex;
  justify-content: space-between;
  margin-bottom: -1em;
}

.owl-prev,
.owl-next {
  transition: all .125s ease;
}

.owl-prev:hover,
.owl-prev:focus,
.owl-next:hover,
.owl-next:focus {
  color: var(--color__green-dark)!important;
  outline: none;
}

.owl-prev:hover {
  transform: translateX(-3px);
}

.owl-next:hover {
  transform: translateX(3px);
}

.weights-measures,
.new-commons,
.match,
.spot-magazine,
.downtownmag {
  grid-template-rows: 1fr;
}
.weights-measures .d-description,
.new-commons .d-description {
  grid-column: 1 / span 4;
  padding-right: var(--description-padding);
}
.weights-measures .d-project-slider,
.new-commons .d-project-slider {
  grid-column: 5 / span 8;
}

.match .d-description,
.spot-magazine .d-description,
.downtownmag .d-description {
  grid-column: 9 / span 4;
  padding-left: var(--description-padding);
  order: 2;
}

@media (max-width: 1050px) {
  .match .d-description,
  .spot-magazine .d-description,
  .downtownmag .d-description {
    padding-left: 0;
  }
}

.match .d-project-slider,
.spot-magazine .d-project-slider,
.downtownmag .d-project-slider {
  grid-column: 1 / span 8;
  order: 1;
}

@media (max-width: 900px) {
  .on-immediacy {
    display: block;
  }
}

.on-immediacy .d-description {
  grid-column: 9 / span 4;
  grid-row: 1 / span 1;
  padding-left: var(--description-padding);
}

@media (max-width: 1050px) {
  .on-immediacy .d-description {
    grid-column: 8 / span 5;
    padding-left: 0;
  }
}

.on-immediacy .d-project-image:nth-of-type(1) {
  grid-column: 1 / span 8;
  grid-row: 1 / span 6;
  z-index: 10;
}

@media (max-width: 1050px) {
  .on-immediacy .d-project-image:nth-of-type(1) {
    grid-column: 1 / span 7;
  }
}

.on-immediacy .d-project-image:nth-of-type(2) {
  grid-column: 8 / span 4;
  grid-row: 5 / span 3;
  z-index: 20;
}

@media (max-width: 1050px) {
  .on-immediacy .d-project-image:nth-of-type(2) {
    grid-column: 7 / span 5;
    grid-row: 6 / span 3;
  }
}

.ibrs15 .d-description {
  grid-column: 9 / span 4;
  grid-row: 1 / span 1;
  padding-left: var(--description-padding);
}

@media (max-width: 1050px) {
  padding-left: 0;
}

.ibrs15 .d-project-image:nth-of-type(1) {
  grid-column: 1 / span 8;
  grid-row: 1 / span 6;
  z-index: 10;
}

.ibrs15 .d-project-image:nth-of-type(2) {
  grid-column: 8 / span 5;
  grid-row: 5 / span 3;
  z-index: 20;
}

@media (max-width: 1100px) {
  .ibrs15 .d-project-image:nth-of-type(2) {
    grid-row: 6 / span 3;
  }
}

.moody-foundation .d-description {
  grid-column: 1 / span 4;
  grid-row: 1 / span 2;
  padding-right: var(--description-padding);
}

.moody-foundation .d-project-image:nth-of-type(1) {
  grid-column: 5 / span 8;
  grid-row: 1 / span 6;
  z-index: 10;
}

.moody-foundation .d-project-image:nth-of-type(2) {
  grid-column: 1 / span 6;
  grid-row: 6 / span 3;
  z-index: 20;
}

.moody-foundation .d-project-image:nth-of-type(3){
  grid-row: 9 / span 2;
  grid-column: 4 / span 3;
}

.moody-foundation .d-project-image:nth-of-type(3){
  grid-row: 8 / span 3;
  grid-column: 8 / span 5;
  z-index: 30;
}


.bbp-maps .d-description {
  grid-column: 1 / span 4;
  grid-row: 1 / span 1;
  padding-right: var(--description-padding);
}

.bbp-maps .d-project-image:nth-of-type(1) {
  grid-column: 5 / span 8;
  grid-row: 1 / span 5;
  z-index: 20;
}

.bbp-maps .d-project-image:nth-of-type(2) {
  grid-column: 1 / span 7;
  grid-row: 5 / span 4;
  z-index: 10;
}

/*********************
 * Experience
 *********************/

.experience-list {
  list-style: none;
  padding: 0;
  margin: 3em 0;
}

@media (max-width: 700px) {
  .experience-list {
    margin-bottom: 0;
  }
}

.l-experience {
  border-top: 1px solid var(--light-gray);
  padding-bottom: 3em;
  padding-top: 0.75em;
}

@media (max-width: 700px) {
  .l-experience {
    padding-bottom: 0.75em;
  }
}

.l-experience-company h3 {
  margin-bottom: 0;
  color: var(--brand-color);
  font-size: 24px;
}

.l-experience-title {
  font-size: 18px;
  font-size: calc(18em / 16);
  margin: -5px 0 0;
  font-weight: 500;
}

.l-experience-dates {
  font-family: var(--space-mono);
  margin: 0;
}

@media (min-width: 700px) {
  .l-experience {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 1em;
  }
  .l-experience-title,
  .l-experience-company,
  .l-experience-dates {
    grid-column: 1 / span 5;
  }
  .l-experience-description {
    grid-column: 6 / span 7;
    grid-row: 1 / span 4;
  }
}

@media (min-width: 1300px) {
  .l-experience-description {
    font-size: 18px;
  }
}

.l-experience-description .bullets li {
  margin-bottom: 5px;
}

/********************
 * Footer
 ********************/

 .site-footer {
  padding-top: 3em;
  padding-bottom: 3em;
}

@media (max-width: 700px) {
  .site-footer {
    padding-top: 1em;
  }
}

@media (min-width: 700px) {
  .footer-row {
    display: grid;
    grid: auto-flow / 5fr 7fr;
  }
}

.social-links__heading {
  margin-top: 2em;
  font-family: var(--space-mono);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.social-links {
  list-style: none;
  margin: 0;
  padding: 0;
  grid-column: 2;
}

.social-links a {
  display: inline;
  color: var(--text-color);
  text-decoration: none;
  font-size: 10vw;
  font-family: var(--sporting);
  -webkit-background-clip: text;
  background-clip: text;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 50%, white 50%);
  background-position: 0 0;
  background-size: 200.1% 200.1%;
  color: transparent;
  -webkit-text-stroke: 1px var(--text-color);
  -webkit-text-fill-color: transparent;
  transition: background-position 0.5s ease-in-out;
}

@media (min-width: 1200px) {
  .social-links a {
    font-size: 108px;
    font-size: calc(108em / 16);
  }
}

.social-links a:hover,
.social-links a:active,
.social-links a:focus {
  color: white;
  background-position: 0 100%;
}

/******************
 * Tooltip
 ******************/

[tooltip] {
  position: relative;
}

[tooltip]::after {
  transition: all .125s ease-in-out;
  content: attr(tooltip);
  position: absolute;
  left: 50%;
  bottom: 0px;
  transform: translateX(-50%) translateY(100%);
  background: var(--brand-color);
  text-align: center;
  color: #fff;
  padding: 4px 6px;
  font-size: 12px;
  border-radius: 3px;
  pointer-events: none;
  opacity: 0;
}

[tooltip]:hover::after {
  opacity: 1;
}