/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* https://mycolor.space/?hex=%234192B4&sub=1 */

* {
  box-sizing: border-box;
}
body {
  background-color: #EEE;
  color: #333;
  font-family: 'Roboto Slab', serif;
}
a {
  color: #D77C14;
  text-decoration: underline;
  text-decoration-color: #4192b4;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.1em;
}

.App-content {
  padding: 4vw;
}
.App-pageContent {
  animation-duration: 500ms;
  animation-name: fadeIn;
  margin: 40px 0;
}
.App-footer {
  font-size: 3vw;
  line-height: 1.3em;
  margin-top: 16vw;
}

@media (min-width: 768px) { 
  .App-content {
    padding: 30px 4vw 4vw;
  }
  .App-pageContent {
    margin: 6vw 0;
  }
}

@media (min-width: 1024px) {
  .App-content {
    margin: 0 auto;
    max-width: 1300px;
    padding: 30px 5vw 5vw;
  }
}

@media (min-width: 1300px) {
  .App-content {
    padding: 30px 65px 65px;
  }
}

@keyframes fadeIn {
  from {
    filter: grayscale(1);
    opacity: 0;
  }
  to {
    filter: grayscale(0);
    opacity: 1;
  }
}

/**
 * Nav
 */

.Nav {
  /*display: flex;
  flex-flow: row nowrap;*/
  margin-bottom: 20px;
}
.Nav-siteTitle {
  font-family: 'Pacifico', cursive;
  font-size: 30px;
  text-align: center;
}
.Nav-list {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin-left: 1px;
  margin-top: 20px;
  text-transform: lowercase;
}
.Nav-list li + li {
  margin-left: 22px;
}
.Nav-list a {
  color: #D77C14;
  text-decoration: underline;
  text-decoration-color: #4192b4;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.1em;
}
.Nav-list a.Nav-link--active {
  color: #333;
  position: relative;
  text-decoration-color: #333;
}
.Nav-list a.Nav-link--active::after {
  border-bottom: 8px solid transparent;
  border-top: 8px solid transparent;
  border-left: 8px solid #333;
  bottom: -12px;
  content: '';
  left: 50%;
  position: absolute;
  transform: translateX(-50%) rotate(90deg) scaleX(0.6);
}

@media (min-width: 768px) {
  .Nav-contents {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
  }
  .Nav-siteTitle {
    order: 2;
  }
  .Nav-list {
    margin-top: 8px;
  }
}

/**
 * Full-Width Figure Imagery
 */

.Portfolio-figure {
  margin-bottom: 8vw;
  margin-top: 8vw;
  page-break-inside: avoid;
}
.Portfolio-figure img {
  width: 100%;
}
.Portfolio-figure figcaption {
  color: #777;
  font-size: 12px;
  line-height: 1.4em;
}

.Portfolio-figureMultiple .Portfolio-figureImages,
.Portfolio-figureMultipleTwo .Portfolio-figureImages,
.Portfolio-figureMultipleThree .Portfolio-figureImages,
.Portfolio-figureMultipleFour .Portfolio-figureImages,
.Portfolio-figureMultipleWide .Portfolio-figureImages {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.Portfolio-figureMultiple img {
  margin-bottom: 2%;
  width: 49%;
}
.Portfolio-figureMultipleTwo img,
.Portfolio-figureMultipleThree img,
.Portfolio-figureMultipleWide img {
  margin-bottom: 4%;
  width: 100%;
}
.Portfolio-figureMultipleFour img {
  margin-bottom: 2%;
  width: 49%;
}

@media (min-width: 540px) {
  .Portfolio-figure figcaption {
    font-size: 16px;
  }

  .Portfolio-figure.Portfolio-figure--half {
    align-items: center;
    display: flex;
    flex-flow: column nowrap;
  }
  .Portfolio-figure.Portfolio-figure--half img,
  .Portfolio-figure.Portfolio-figure--half figcaption {
    width: 75%;
  }

  .Portfolio-figureMultiple .Portfolio-figureImages {
    justify-content: flex-start;
    margin-left: -1.3333%;
  }

  .Portfolio-figureMultiple img {
    margin-bottom: 1.3333%;
    margin-left: 1.3333%;
    width: 32%;
  }
  .Portfolio-figureMultipleTwo img {
    margin-bottom: 2%;
    width: 49%;
  }
  .Portfolio-figureMultipleThree img {
    margin-bottom: 1%;
    width: 32%;
  }
}

@media (min-width: 768px) {
  .Portfolio-figure figcaption {
    line-height: 1.5em;
  }

  .Portfolio-figure.Portfolio-figure--half img,
  .Portfolio-figure.Portfolio-figure--half figcaption {
    width: 50%;
  }

  .Portfolio-figureMultiple .Portfolio-figureImages {
    margin-left: -1%;
  }
  .Portfolio-figureMultipleWide {
    margin-left: auto;
    margin-right: auto;
    width: 75%;
  }

  .Portfolio-figureMultiple img {
    margin-bottom: 1%;
    margin-left: 1%;
    width: 24%;
  }
  .Portfolio-figureMultipleFour img {
    margin-bottom: 1%;
    width: 24%;
  }
}

@media (min-width: 1024px) {
  .Portfolio-figure {
    margin-bottom: 5vw;
    margin-top: 5vw;
  }

  .Portfolio-figureMultiple img {
    width: 19%;
  }
  .Portfolio-figureMultipleWide {
    margin-left: 0;
    margin-right: 0;
    width: auto;
  }
  .Portfolio-figureMultipleWide img {
    margin-bottom: 2%;
    width: 49%;
  }
}

@media (min-width: 1300px) {
  .Portfolio-figure {
    margin-bottom: 64px;
    margin-top: 64px;
  }
}

/**
 * Text
 */

.Text .nowrap {
  display: block;
}
.Text img {
  max-width: 100%;
}
.Text em {
  font-style: italic;
}
.Text strong {
  font-weight: 600;
}

.Text section {
  page-break-inside: avoid;
}
.Text h2,
.Text h4 {
  font-size: 20px;
  font-weight: 600;
}
.Text h3 {
  font-family: 'Pacifico', cursive;
  font-size: 28px;
  line-height: 1.4em;
}
.Text p {
  font-weight: 400;
}
.Text h5,
.Text p,
.Text ul,
.Text dl,
.Text ol {
  font-size: 16px;
}
.Text p.subtitle {
  font-size: 14px;
}
.Text .inline-code {
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}
.Text figcaption {
  color: #777;
  font-size: 12px;
}
.Text dl { 
  display: flex;
  flex-flow: row wrap;
}
.Text dt {
  font-weight: 600;
  width: 28%;
}
.Text dd {
  margin-left: 4%;
  width: 68%;
}
.Text ul {
  list-style-type: square;
  padding-left: 4vw;
}
.Text ul.flatlist {
  list-style-type: none;
  padding: 0;
}
.Text ul ul {
  list-style-type: circle;
}
.Text ol {
  list-style-type: decimal;
  padding-left: 4vw;
}

.Text-tableOfContentsBox {
  border: 1px dotted #777;
  display: inline-block;
  margin-left: 1px;
  padding: 15px;
}
.Text-tableOfContents h5 {
  font-weight: 600;
}

.Text-featureComparisonTableContainer {
  display: flex;
  flex-flow: row nowrap;
  max-width: 100%;
  overflow-x: auto;
}
.Text-featureComparisonTable {
  border: 1px solid #AAA;
  font-size: 12px;
}
.Text-featureComparisonTable th,
.Text-featureComparisonTable td {
  padding: 6px;
  text-align: left;
}
.Text-featureComparisonTable th {
  /*background-color: #F9F871;*/
  background-color: #EEE;
  font-weight: 600;
}
.Text-featureComparisonTable td {
  border-top: 1px solid #AAA;
}
.Text-featureComparisonTable th:not(:first-child),
.Text-featureComparisonTable td:not(:first-child) {
  border-left: 1px solid #AAA;
  text-align: center;
}
.Text-featureComparisonTable td:not(:first-child) {
  /*background-color: #EEE;*/
  padding: 0;
  vertical-align: middle;
}

.Text-icon {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  display: block;
  height: 28px;
  margin: 0 auto;
  width: 28px;
}
.Text-icon.Icon-checkmark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z' fill='%23007C43'/%3E%3C/svg%3E");
}
.Text-icon.Icon-x {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z' fill='%23DA5852'/%3E%3C/svg%3E");
}
.Text-icon .Text-iconDescription {
  left: -9999em;
  position: absolute;
}
.Text-featureComparisonTable .Text-icon.Icon-x {
  height: 22px;
  width: 22px;
}

.Text code[class*=language-],
.Text pre[class*=language-] {
  font-size: 12px;
}

.Text .Text-figureMultiple,
.Text .Text-figureMultipleThree,
.Text .Text-figureMultipleFour,
.Text .Text-figureMultipleWide {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.Text .Text-figureMultiple > img {
  margin-bottom: 2%;
  width: 49%;
}
.Text .Text-figureMultipleThree > img,
.Text .Text-figureMultipleWide > img {
  margin-bottom: 4%;
  width: 100%;
}
.Text .Text-figureMultipleFour > img {
  margin-bottom: 4%;
  width: 49%;
}

/* SUB ELEMENT MARGIN TOP */

.Text-tableOfContents ul.dense,
.Text dt,
.Text dd,
.Text li {
  margin-top: 3vw;
}
.Text-tableOfContents ul.dense ul.dense {
  margin-top: 1.5vw;
}
.Text .dense li {
  margin-top: 1.5vw;
}
.Text .flatlist li {
  margin-top: 0;
}
.Text dt:first-child,
.Text dd:nth-child(2),
.Text li:first-child {
  margin-top: 0;
}

/* LINE HEIGHT */

.Text figcaption,
.Text h2,
.Text h4,
.Text p,
.Text dl,
.Text ol,
.Text ul,
.Text-featureComparisonTable td {
  line-height: 1.4em;
}

/* MARGIN TOP */

.Text h2,
.Text h3,
.Text h4,
.Text section {
  margin-top: 8vw;
}
.Text h3 + h4,
.Text h3 + section {
  margin-top: 4vw;
}
.Text dl,
.Text ol,
.Text p,
.Text pre[class*="language-"],
.Text ul {
  margin-top: 4vw;
}
.Text figure,
.Text-tableOfContents,
.Text-featureComparisonTable {
  margin-bottom: 8vw;
  margin-top: 8vw;
}
.Text ul.flatlist {
  margin-top: 0;
}
.Text p.caption,
.Text p.subtitle {
  margin-top: 0;
}
.Text h2:first-child,
.Text h3:first-child,
.Text h4:first-child,
.Text dl:first-child,
.Text p:first-child,
.Text p.first {
  margin-top: 0;
}

@media (min-width: 540px) {
  .Text h2,
  .Text h4 {
    font-size: 22px;
  }
  .Text h3 {
    font-size: 32px;
  }
  .Text h5,
  .Text p,
  .Text ul,
  .Text dl,
  .Text ol {
    font-size: 20px;
  }
  .Text p.subtitle {
    font-size: 16px;
  }
  .Text figcaption {
    font-size: 16px;
  }

  .Text figure.half {
    align-items: center;
    display: flex;
    flex-flow: column nowrap;
  }
  .Text figure.half img,
  .Text figure.half figcaption {
    width: 75%;
  }

  .Text-featureComparisonTable {
    font-size: 14px;
  }
  .Text-featureComparisonTable th,
  .Text-featureComparisonTable td {
    padding: 8px;
  }
  .Text-icon {
    height: 32px;
    width: 32px;
  }
  .Text-featureComparisonTable .Text-icon.Icon-x {
    height: 26px;
    width: 26px;
  }

  .Text .Text-figureMultiple {
    justify-content: flex-start;
    margin-left: -1.3333%;
  }
  .Text .Text-figureMultiple > img {
    margin-bottom: 1.3333%;
    margin-left: 1.3333%;
    width: 32%;
  }
  .Text .Text-figureMultipleThree > img {
    margin-bottom: 2%;
    width: 49%;
  }

  .Text code[class*=language-],
  .Text pre[class*=language-] {
    font-size: 14px;
  }
}

@media (min-width: 768px) {
  .Text {
    /*padding: 4vw 4vw 8vw;*/
    padding: 0 4vw;
  }
  
  .Text figure.half img,
  .Text figure.half figcaption {
    width: 50%;
  }

  .Text h2,
  .Text h4 {
    font-size: 24px;
  }
  .Text h3 {
    font-size: 38px;
  }
  .Text p.subtitle {
    font-size: 18px;
  }

  .Text h2,
  .Text h3,
  .Text h4,
  .Text section {
    margin-top: 6vw;
  }
  .Text h3 + h4,
  .Text h3 + section {
    margin-top: 3vw;
  }
  .Text-tableOfContents ul.dense,
  .Text dt,
  .Text dd,
  .Text li {
    margin-top: 2.5vw;
  }
  .Text-tableOfContents ul.dense ul.dense {
    margin-top: 1.25vw;
  }
  .Text .dense li {
    margin-top: 1.25vw;
  }

  .Text figcaption,
  .Text h2,
  .Text h4,
  .Text p,
  .Text dl,
  .Text ol,
  .Text ul {
    line-height: 1.5em;
  }

  .Text dt {
    width: 20%;
  }
  .Text dd {
    margin-left: 4%;
    width: 76%;
  }

  .Text-featureComparisonTable {
    border: 0.5px solid #333;
    font-size: 16px;
  }
  .Text-featureComparisonTable th,
  .Text-featureComparisonTable td {
    padding: 10px;
  }
  .Text-featureComparisonTable td {
    border-top: 0.5px solid #333;
  }
  .Text-featureComparisonTable th:not(:first-child),
  .Text-featureComparisonTable td:not(:first-child) {
    border-left: 0.5px solid #333;
  }

  .Text .Text-figureMultiple {
    margin-left: -1%;
  }
  .Text .Text-figureMultiple > img {
    margin-bottom: 1%;
    margin-left: 1%;
    width: 24%;
  }
  .Text .Text-figureMultipleThree > img {
    margin-bottom: 1%;
    width: 32%;
  }
  .Text .Text-figureMultipleFour > img {
    margin-bottom: 1%;
    width: 24%;
  }

  .Text code[class*=language-],
  .Text pre[class*=language-] {
    font-size: 16px;
  }
}

@media (min-width: 1024px) {
  .Text {
    /*padding: 6vw 6vw 8vw;*/
    padding: 0 6vw;
  }

  .Text h2,
  .Text h4 {
    font-size: 28px;
  }
  .Text h5,
  .Text p,
  .Text ul,
  .Text dl,
  .Text ol {
    font-size: 22px;
  }
  .Text p.subtitle {
    font-size: 20px;
  }

  .Text dl,
  .Text ol,
  .Text p,
  .Text pre[class*="language-"],
  .Text ul {
    margin-top: 2.5vw;
  }
  .Text figure,
  .Text-tableOfContents,
  .Text-featureComparisonTable {
    margin-bottom: 5vw;
    margin-top: 5vw;
  }
  .Text-tableOfContents ul.dense,
  .Text dt,
  .Text dd,
  .Text li {
    margin-top: 20px;
  }
  .Text-tableOfContents ul.dense ul.dense {
    margin-top: 10px;
  }
  .Text .dense li {
    margin-top: 10px;
  }

  .Text .Text-figureMultiple > img {
    width: 19%;
  }
  .Text .Text-figureMultipleWide > img {
    margin-bottom: 1%;
    width: 49%;
  }
}

@media (min-width: 1300px) {
  .Text {
    /*padding: 78px 78px 100px;*/
    padding: 0 78px;
  }

  .Text ul,
  .Text ol {
    padding-left: 52px;
  }

  .Text h2,
  .Text h3,
  .Text h4,
  .Text section {
    margin-top: 78px;
  }
  .Text h3 + h4,
  .Text h3 + section {
    margin-top: 38px;
  }
  .Text dl,
  .Text ol,
  .Text p,
  .Text pre[class*="language-"],
  .Text ul {
    margin-top: 32px;
  }
  .Text figure,
  .Text-tableOfContents,
  .Text-featureComparisonTable {
    margin-bottom: 64px;
    margin-top: 64px;
  }
}

/**
 * Home
 */

.Home p {
  line-height: 1.3em;
}
.Home-mainImage {
  display: block;
  /*filter: grayscale(50%);*/
  /*margin-top: 40px;*/
  max-width: 100%;
}
.Home-description {
  font-size: 20px;
  margin-top: 30px;
  text-align: center;
}
.Home-descriptor {
  display: inline-block;
  white-space: nowrap;
}
.Home-descriptionSecondary {
  font-size: 14px;
  margin-top: 20px;
  padding: 0 10px;
  text-align: center;
}
.Home-descriptionSecondary > a {
  white-space: nowrap;
}

@media (min-width: 768px) {
  .Home-mainImage {
    /*margin-top: 6vw;*/
  }
  .Home-description {
    font-size: 24px;
    margin-top: 4vw;
  }
  .Home-descriptor + .Home-descriptor {
    margin-left: 10px;
  }
  .Home-descriptionSecondary {
    font-size: 18px;
    margin-top: 2vw;
    padding: 0;
  }
}

/**
 * About
 */

.About-imageContainer {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  margin: 8vw 0;
}
.About-image {
  width: 66.67%;
}

@media (min-width: 768px) {
  .About-image {
    width: 400px;
  }
}

@media (min-width: 1024px) {
  .About-imageContainer {
    margin: 2.5vw 0;
  }
}

@media (min-width: 1300px) {
  .About-imageContainer {
    margin: 64px 0;
  }
}

/**
 * Portfolio
 */

.Portfolio-timeline {
  padding: 10px 0 20px;
  position: relative;
}
.Portfolio-timeline::before {
  border-left: 2px solid #333;
  bottom: 0;
  content: '';
  left: 5px;
  position: absolute;
  top: 0;
}

.Portfolio-entry {
  color: #333;
  display: block;
  line-height: 1.2em;
  padding-left: 25px;
  padding-top: 16px;
  position: relative;
  text-decoration: none;
}
.Portfolio-entry + .Portfolio-entry {
  margin-top: 60px;
}
.Portfolio-entry::before {
  background-color: #333;
  box-shadow: 0 0 0 3px #EEE;
  content: '';
  height: 6px;
  left: 3px;
  transform: rotate(45deg);
  top: 5px;
  position: absolute;
  width: 6px;
}
.Portfolio-entry::after {
  border-top: 0.5px solid #333;
  content: '';
  left: 7px;
  position: absolute;
  right: 0;
  top: 7.5px;
}

.Portfolio-entryYear {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 2px;
} 
.Portfolio-entryTitle {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
}
.Portfolio-entryDescription {
  font-size: 14px;
}
.Portfolio-entryImage {
  display: block;
  margin-top: 10px;
  width: 100%;
}
.Portfolio-entryImageBg {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 10px;
  padding-top: 58%;
}
.Portfolio-entryImageBg--condensed {
  padding-top: 36%;
}
.Portfolio-entryScreenshots {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.Portfolio-entryScreenshot {
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 6px;
  padding-top: 32%;
  width: 49%;
}
.Portfolio-entryCta {
  color: #D77C14;
  font-size: 14px;
  margin-top: 6px;
  text-decoration: underline;
  text-decoration-color: #4192b4;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.1em;
}

@media (min-width: 540px) {
  .Portfolio-entry {
    padding-left: 36px;
    padding-top: 18px;
  }
  .Portfolio-entryYear {
    font-size: 14px;
    margin-bottom: 4px;
  }
  .Portfolio-entryTitle {
    font-size: 22px;
    margin-bottom: 8px;
  }
  .Portfolio-entryDescription,
  .Portfolio-entryCta {
    font-size: 16px;
  }
  .Portfolio-entryCta {
    margin-top: 8px;
  }
  .Portfolio-entryImage {
    margin-top: 14px;
  }
  .Portfolio-entryScreenshot {
    margin-top: 10px;
  }
}

@media (min-width: 768px) {
  .Portfolio-timeline::before {
    left: 50%;
    transform: translateX(-50%);
  }
  .Portfolio-entry {
    margin-left: calc(50% + 20px);
    padding-left: 0;
  }
  .Portfolio-entry:nth-child(odd) {
    margin-left: 0;
    margin-right: calc(50% + 20px);
  }
  .Portfolio-entry::before {
    left: -23px;
    top: 3px;
  }
  .Portfolio-entry:nth-child(odd)::before {
    left: auto;
    right: -23px;
  }
  .Portfolio-entry::after {
    left: -20px;
    top: 6px;
  }
  .Portfolio-entry:nth-child(odd)::after {
    left: 0;
    right: -20px;
  }
  .Portfolio-entry + .Portfolio-entry {
    margin-top: -140px;
  }
}

@media (min-width: 1024px) {
  .Portfolio-entry {
    line-height: 1.6em;
    margin-left: calc(50% + 36px);
  }
  .Portfolio-entry:nth-child(odd) {
    margin-left: 0;
    margin-right: calc(50% + 36px);
  }
  .Portfolio-entry::before {
    left: -39px;
  }
  .Portfolio-entry:nth-child(odd)::before {
    left: auto;
    right: -39px;
  }
  .Portfolio-entry::after {
    left: -36px;
  }
  .Portfolio-entry:nth-child(odd)::after {
    left: 0;
    right: -36px;
  }
  .Portfolio-entryYear {
    font-size: 16px;
    margin-bottom: 6px;
  }
  .Portfolio-entryTitle {
    font-size: 28px;
    margin-bottom: 10px;
  }
  .Portfolio-entryDescription,
  .Portfolio-entryCta {
    font-size: 20px;
  }
  .Portfolio-entryCta {
    margin-top: 10px;
  }
}