@charset "UTF-8";
@font-face {
  font-family: 'HeadingNow34';
  src: url("/fonts/HeadingNow 34 Regular.woff") format("woff"); }

/* ========================================================= 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; }

/* 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;
  /* my change disables font resets */
  /*
	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; }

/* ========================================================= COMMON v01 */
:root {
  --black:rgba(0,0,0,.75);
  --white: rgba(255,255,255,.85);
  --bp-small: 480px;
  --bp-med: 720px;
  --bp-large: 960px;
  --bp-xl: 1200px;
  --bp-xxl: 1520px; }

html {
  box-sizing: border-box;
  scroll-behavior: smooth; }

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

* {
  transition: all 0.25s ease; }

html, body {
  min-height: 100%; }

body {
  overscroll-behavior: none;
  position: relative; }

img {
  /* removes bottom space from img tag */
  vertical-align: top;
  /* can help with extra vertical space */
  line-height: 1; }

/* ========================================================= clearfix for FLOATS */
.clearfix::after {
  content: "";
  clear: both;
  display: table; }

/* ========================================================= SITE-WIDE */
/* --------------------------------------------------------- typography */
html {
  color: rgba(0, 0, 0, 0.7);
  font-size: 10px;
  text-decoration-skip-ink: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

body {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-display: swap;
  line-height: 2;
  font-size: 1.4rem; }
  @media (min-width: 960px) {
    body {
      font-size: 1.6rem; } }
header {
  font-size: 1.4rem; }

.hyphenate {
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-hyphens: manual;
  -moz-hyphens: manual;
  hyphens: manual; }

.bulletList {
  margin-left: 1em;
  list-style-position: inside;
  list-style: disc; }

/* ========================================================= COMPONENTS */
body.body__about-original {
  background-color: #faf6f4;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas: "main" "siteFooter";
  height: 100vh; }
  body.body__about-original h2 {
    color: #007FAC; }
  body.body__about-original h3 {
    line-height: 1.1; }
  body.body__about-original h2, body.body__about-original h3 {
    margin-top: 1em; }
  body.body__about-original h2 + h3 {
    margin-top: 0; }
  body.body__about-original main {
    grid-area: main;
    margin: 1.5em 3em; }
    @media (min-width: 720px) {
      body.body__about-original main {
        margin: 5.5em auto 1.5em auto;
        max-width: 45em; } }
  body.body__about-original header {
    margin-bottom: 2em; }
    body.body__about-original header h1 {
      color: #007FAC;
      font-size: 3em;
      font-weight: normal;
      line-height: 1.6; }
    body.body__about-original header p {
      text-transform: uppercase;
      line-height: 1.4; }
  body.body__about-original .testimonial article {
    margin: 2em 0;
    padding: 2em;
    background: rgba(0, 0, 0, 0.03); }
  body.body__about-original .testimonial blockquote {
    font-family: "PT Serif", Georgia, serif;
    font-size: 1.2em;
    font-style: italic;
    line-height: 1.5; }
  body.body__about-original .testimonial cite {
    margin: .5em 0 0 0;
    padding: 0;
    display: block;
    color: var(--themeColor);
    font-style: italic;
    line-height: 1.4; }
    body.body__about-original .testimonial cite span {
      margin: 0;
      padding: 0;
      font-weight: bold; }
    body.body__about-original .testimonial cite:before {
      content: '— '; }
  @media (min-width: 720px) {
    body.body__about-original .testimonial article {
      display: flex;
      flex-direction: column; }
    body.body__about-original .testimonial article:nth-of-type(even) {
      border-right: 6px solid rgba(0, 127, 172, 0.65);
      text-align: right; }
      body.body__about-original .testimonial article:nth-of-type(even) blockquote {
        /* cludge for lack of justify-item */
        margin-left: auto; }
    body.body__about-original .testimonial article:nth-of-type(odd) {
      border-left: 6px solid rgba(0, 127, 172, 0.65); }
    body.body__about-original .testimonial blockquote {
      width: 80%; } }
  body.body__about-original .body__about--description p, body.body__about-original .body__about--description ul {
    margin-bottom: 1.5em; }
  body.body__about-original .body__about--awards p {
    margin: 0;
    padding: 0;
    font-style: italic;
    line-height: 1.5; }
  body.body__about-original .body__about--contact {
    font-size: .8em; }
    @media (min-width: 720px) {
      body.body__about-original .body__about--contact {
        font-size: 1em; } }
  body.body__about-original .body__about--intro {
    margin: 1.5em 0;
    color: #007FAC;
    font-family: "PT Serif", Georgia, serif;
    font-size: 1.7em;
    font-style: italic;
    line-height: 1.7; }
    @media (min-width: 720px) {
      body.body__about-original .body__about--intro {
        font-size: 2em;
        line-height: 1.5; } }
    body.body__about-original .body__about--intro span {
      font-size: 1.5em; }
  body.body__about-original .body__about--list {
    margin-left: 1em;
    list-style-position: outside;
    list-style: disc; }

.body__work {
  background: #ccc; }
  @media (min-width: 720px) {
    .body__work {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr auto;
      grid-template-areas: "projDesc projPictures" "siteFooter siteFooter"; } }
  .body__work section {
    padding: 4em; }
    @media (min-width: 720px) {
      .body__work section {
        padding: 3em; } }
    @media (min-width: 960px) {
      .body__work section {
        padding: 4em; } }
  .body__work img {
    width: 100%; }
  .body__work summary, .body__work .requestAccess {
    margin: 1em 0;
    border-radius: 6px;
    padding: 1em;
    background: rgba(0, 0, 0, 0.5);
    color: white; }
    .body__work summary:hover, .body__work .requestAccess:hover {
      cursor: pointer;
      background: rgba(0, 0, 0, 0.85); }
  .body__work summary:focus {
    outline: none; }
  .body__work .gotAccess {
    margin: 1em 0;
    border-radius: 6px;
    padding: 1em;
    background-color: rgba(255, 0, 0, 0.5);
    color: white; }
    .body__work .gotAccess:hover {
      cursor: pointer;
      background: rgba(0, 0, 0, 0.85); }

section.proj__desc {
  grid-area: projDesc;
  background: #f7fbfd;
  min-height: 50vh; }
  @media (min-width: 960px) {
    section.proj__desc {
      min-height: 100vh; } }
  section.proj__desc header {
    margin-top: 12rem;
    margin-bottom: 3.2rem;
    line-height: 1; }
    section.proj__desc header h2 {
      margin-bottom: .25em; }
    section.proj__desc header p {
      margin-bottom: .5em; }
    @media (min-width: 960px) {
      section.proj__desc header {
        margin-top: 15rem;
        margin-bottom: 4.8rem; } }
    @media (min-width: 1200px) {
      section.proj__desc header {
        margin-bottom: 6.4rem; } }
  section.proj__desc h2 {
    margin-top: 1.5em;
    color: #007FAC; }
  section.proj__desc h3 {
    font-weight: 500; }
  section.proj__desc .bullets {
    margin-left: 1em;
    list-style: outside; }
  section.proj__desc .proj__desc--name {
    margin: 0 0 .2em 0;
    padding-bottom: 0;
    color: #007FAC;
    font-family: HeadingNow34, "HelveticaNeue-Condensed", "Arial Narrow", sans-serif;
    font-size: 7em;
    font-weight: 300;
    letter-spacing: 0;
    line-height: 1; }
    @media (min-width: 960px) {
      section.proj__desc .proj__desc--name {
        font-size: 8em; } }
    @media (min-width: 1200px) {
      section.proj__desc .proj__desc--name {
        font-size: 9em; } }
  section.proj__desc .proj__desc--nav {
    position: absolute;
    top: 2em;
    left: 4em; }
    section.proj__desc .proj__desc--nav img {
      margin-right: .5em;
      border: 1px solid #005B69;
      border-radius: 9999px;
      background: #005B69;
      width: 32px; }
      section.proj__desc .proj__desc--nav img:hover {
        border: 1px solid #e1523d;
        background: #e1523d; }
  section.proj__desc .proj__desc--client {
    font-size: 1.5em;
    text-transform: uppercase; }
  section.proj__desc .proj__desc--artifact {
    text-transform: uppercase;
    color: rgba(32, 32, 32, 0.5); }
  section.proj__desc .proj__desc--skills {
    margin-top: 1em; }
  section.proj__desc .proj__desc--skills span {
    display: inline-block;
    margin: 0 1em 0 0;
    border: none;
    border-radius: 999px;
    padding: .5em 1em;
    background-color: rgba(0, 0, 0, 0.05);
    min-width: 4em;
    text-align: center; }
  section.proj__desc .proj__desc--brief p {
    margin-bottom: 2em; }
  section.proj__desc .proj__desc--link {
    margin-top: 3em; }
    section.proj__desc .proj__desc--link a {
      border: 1px solid #005B69;
      border-radius: 6px;
      color: #005B69;
      padding: .5em 2em; }
    section.proj__desc .proj__desc--link a:hover, section.proj__desc .proj__desc--link a:active {
      background: #e1523d;
      border-color: #e1523d;
      color: white; }

section.proj__pictures {
  grid-area: projPictures;
  text-align: center;
  background: #455e67; }
  @media (min-width: 720px) {
    section.proj__pictures {
      padding-top: 12.8em; } }
  section.proj__pictures figure {
    margin-bottom: 1em; }
  section.proj__pictures img {
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4));
    width: 100%; }
  section.proj__pictures .video {
    margin-bottom: 2em; }
  section.proj__pictures .picture_wCaption {
    margin: 0 0 1em 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.1); }
  section.proj__pictures figcaption {
    margin-bottom: .25em;
    padding: 0 0 .5em 0;
    color: rgba(255, 255, 255, 0.65); }
  section.proj__pictures details {
    margin-bottom: 3em; }
    section.proj__pictures details a {
      color: #f7eba2; }
    section.proj__pictures details a:link, section.proj__pictures details a:visited {
      color: #f7eba2; }
    section.proj__pictures details a:hover, section.proj__pictures details a:active {
      color: var(--portfolio-accent-light); }

/* --------------------------------------------------------- hero */
.hero {
  border: none;
  display: flex;
  height: 100vh;
  width: 100vw;
  background-repeat: no-repeat;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center center;
  background-origin: border-box; }

/* ========================================================= BUTTON */
.proj__desc button {
  margin: 1em 0 2em 0;
  border: 1px solid var(--portfolio-accent-light);
  border-radius: 6px;
  padding: .58em 2em .6em 2em;
  background-color: transparent;
  color: var(--portfolio-dark);
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase; }
  .proj__desc button:hover {
    background-color: var(--portfolio-accent);
    color: white; }
  .proj__desc button::after {
    position: relative;
    left: 8px;
    display: inline-block;
    content: '';
    background: url("/images/icons/lock-sharp-25.svg");
    background-repeat: no-repeat;
    background-size: contain;
    height: 12px;
    width: 12px; }

/* ========================================================= IMPORTS */
/* ========================================================= NAVIGATION */
/* ========================================================= SITE NAV */
a {
  color: #005B69;
  text-decoration: none; }

a:link, a:visited {
  color: #005B69; }

a:hover, a:active {
  color: #e1523d; }

.siteNav {
  z-index: 1000;
  position: fixed;
  bottom: 0;
  left: 10%;
  height: 64px;
  width: 80%; }
  @media (min-width: 720px) {
    .siteNav {
      margin: 2.5em;
      padding: 0;
      left: auto;
      top: 0;
      right: 0;
      height: 44px;
      width: auto; } }
  .siteNav ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border: 1px solid rgba(250, 246, 244, 0.3);
    border-radius: 6px;
    padding: 0;
    box-shadow: 0 0 3px rgba(250, 246, 244, 0.3);
    background-color: #005B69; }
    @media (min-width: 720px) {
      .siteNav ul {
        background-color: #005b69; } }
  .siteNav li {
    margin: 0;
    padding: .25em 0;
    height: 100%; }
    .siteNav li:not(:last-child) {
      border-right: 1px solid #005B69; }
    @media (min-width: 720px) {
      .siteNav li {
        padding: 0; } }
    .siteNav li:hover {
      background: #e1523d; }
  .siteNav a {
    margin: 0;
    padding: 0 1em;
    text-decoration: none;
    text-transform: uppercase; }
  .siteNav a:link, .siteNav a:visited {
    color: #69ebff; }
  .siteNav a:hover, .siteNav a:active {
    color: #69ebff; }

/* ========================================================= WORK NAV */
.workNav {
  line-height: .5;
  position: fixed;
  top: 2em;
  left: 4em; }
  .workNav img {
    margin: 0;
    border: 0;
    border-radius: 9999px;
    padding: 0;
    background: #007FAC;
    width: 32px; }
    .workNav img:hover {
      border: 1px solid #e1523d;
      background: #e1523d; }
  .workNav a {
    display: inline-block; }
  .workNav a:not(:last-child) {
    margin: 0 16px 0 0; }
  @media (min-width: 720px) {
    .workNav {
      position: absolute; } }
/* ========================================================= FOOTER */
footer.siteFooter {
  grid-area: siteFooter;
  position: relative;
  /*
	width: 100vw;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 1000;
	overflow: hidden;
*/
  padding: 2em 2em 6em 2em;
  background-color: #231a1a;
  color: #F9F2E1;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  text-align: center; }
  @media (min-width: 720px) {
    footer.siteFooter {
      padding: 2em; } }
  footer.siteFooter h2 {
    margin: 0;
    padding: 0 0 .5em 0;
    font-weight: normal;
    letter-spacing: .4em;
    text-transform: uppercase; }
  footer.siteFooter .copyright {
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 6px;
    left: 0;
    width: 100%;
    font-size: .6em;
    letter-spacing: .1em;
    text-transform: uppercase; }
  footer.siteFooter .contact li {
    margin: 0;
    padding: 1.5em 0;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .7em; }
    @media (min-width: 720px) {
      footer.siteFooter .contact li {
        margin: 2em 1em 4em 1em;
        padding: 2em 0 1em 0;
        border-bottom: 1px solid #DB6B1A;
        border-top: 1px solid #DB6B1A;
        display: inline-block;
        width: 16em; } }
  footer.siteFooter .contact a {
    margin: 0;
    padding: 0;
    color: #F9F2E1;
    text-decoration: none; }
  footer.siteFooter .contact a:link, footer.siteFooter .contact a:visited {
    color: #F9F2E1; }
  footer.siteFooter .contact a:hover, footer.siteFooter .contact a:active {
    color: #e1523d; }
  footer.siteFooter .contact img {
    margin: 0;
    border: 1px solid #DB6B1A;
    border-radius: 6px;
    padding: 8px;
    background: #DB6B1A;
    height: 44px;
    width: 44px; }
  footer.siteFooter .contact img:hover {
    border: 1px solid white; }
  footer.siteFooter .icons {
    padding: 1em 0 .5em 0; }
  footer.siteFooter .icons img {
    margin: 10px;
    border: 1px solid #005B69;
    border-radius: 9999px;
    padding: 4px;
    background: #00212d;
    width: 50px;
    height: 50px; }
  footer.siteFooter .icons img:hover {
    border-color: transparent;
    background: #e1523d; }

@media print {
  #nav-secondary, #content-secondary, header, nav, footer {
    display: none; }
  body, main, div#wrapper-flex, div#content {
    margin: 0;
    padding: 0; }
  main {
    font-size: 1.0rem; }
  main h1, main h2, main h3, main h4, main h5, main h6, main p, main li,
  main a, main a:link, main a:visited, main a:hover, main a:active {
    color: black; }
  ul, img {
    page-break-inside: avoid; } }

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