/* --------------------------------------------------------- ABOUT */
/* ========================================================= VARIABLES */
:root {
  --portfolio-dark: hsl(199,16%,35%);
  --portfolio-light: hsl(42,67%,93%);
  --portfolio-header: hsl(41,29%,89%);
  --portfolio-accent: hsl(25,78%,48%);
  --portfolio-accent-light: hsl(25, 78%, 65%);
  --portfolio-gray: hsl(25,20%,40%);
  --themeColor: #005B69;
  --themeColor-accent: #DB6B1A;
  --textDark: #4A5D66;
  --textLight: #FBF2EA; }

body.body__process main {
  margin: 0; }
  body.body__process main section {
    margin: 6em; }

header.processHeader {
  position: relative;
  display: flex;
  align-items: flex-end;
  background-color: var(--portfolio-header);
  background-image: url("../images/pen-w.svg");
  background-repeat: no-repeat;
  background-size: 50%;
  min-height: 33vh; }
  @media (min-width: 960px) {
    header.processHeader {
      min-height: 50vh; } }
  header.processHeader > div {
    margin: 6em; }
  header.processHeader p {
    color: var(--portfolio-gray);
    font-family: "PT Serif", Georgia, serif;
    font-size: 2em;
    font-style: italic;
    letter-spacing: 0;
    line-height: 1; }
  header.processHeader h1 {
    color: var(--themeColor);
    font-family: HeadingNow34, "HelveticaNeue-Condensed", "Arial Narrow", sans-serif;
    font-size: 6.4em;
    font-weight: normal;
    line-height: 1; }

.body__process--description {
  margin: 6em auto;
  position: relative;
  max-width: 80%; }
  .body__process--description h2, .body__process--description h3 {
    color: var(--themeColor); }
  .body__process--description h2 {
    margin-top: 2em; }
  .body__process--description h3 {
    margin-top: .5em; }
  .body__process--description .aboutIntro {
    font-weight: bold; }
  .body__process--description .bullet {
    list-style: outside; }
  .body__process--description p, .body__process--description li {
    color: var(--portfolio-gray); }
  @media (min-width: 960px) {
    .body__process--description {
      max-width: 35em; } }
  .body__process--description .heroQuote {
    margin: 1em 0;
    position: relative; }
    @media (min-width: 960px) {
      .body__process--description .heroQuote {
        left: -6em; } }
  .body__process--description .heroQuote--quote {
    font-style: italic;
    font-size: 2em;
    line-height: 1.4;
    color: black; }
  .body__process--description .heroQuote--author {
    font-size: 1em; }

/*# sourceMappingURL=process.css.map */