:root {
  --content-width: 100%;
  --page-top-padding: 2rem;
  --page-side-padding: 5vw;
  --color-red: hsla(354, 95%, 55%, 1.0);
  --top-padding: 3em; }

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

html {
  /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";; */
  font-family: 'CentSchbook Mono BT W011455489', Arial, sans-serif;
  font-size: 15px;
  /* color: hsla(0, 0%, 17%, 1.0); */
  scroll-behavior: smooth; }

body {
  padding-bottom: 10em;
  /* THIS SHOULD APPEAR */
  padding-top: 0; }

li {
  list-style: none; }

a {
  color: currentColor;
  text-decoration: none; }

strong, b {
  font-weight: 500; }

img {
  width: 100%; }

.hide {
  display: none !important; }

.page {
  padding: var(--page-top-padding) var(--page-side-padding) calc(var(--page-top-padding) * 3); }

.page > * {
  max-width: var(--content-width);
  margin: 0 auto; }

.header {
  margin-bottom: 1.5rem; }

.header a {
  position: relative;
  text-transform: uppercase;
  font-size: .875rem;
  letter-spacing: .05em;
  padding: .5rem 0;
  font-weight: 700; }

.header .logo {
  display: block;
  margin-bottom: 1.5rem;
  padding: .5rem 0; }

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

.menu a {
  margin: 0 .75rem; }

.menu a[aria-current] {
  border-bottom: 2px solid #000; }

@media screen and (min-width: 40rem) {
  .header .logo {
    margin-bottom: 0; }
  .header {
    flex-direction: row;
    justify-content: space-between; }
  .menu {
    margin-right: -.75rem; } }

main {
  min-height: calc(100vh - 10rem); }

.intro {
  padding: 10vh 0;
  text-align: center; }

.intro h1 {
  position: relative;
  margin-bottom: 1rem;
  font-weight: 900;
  font-size: calc(1vw + 2rem);
  z-index: 1; }

.tags {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  font-size: .75rem;
  font-weight: 600; }

.text {
  line-height: 1.5em; }

.text p,
.text figure,
.text ul,
.text ol {
  margin-bottom: 1.5em; }

.text h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  text-align: center; }

.text > *:first-child {
  margin-top: 0; }

.text a {
  position: relative;
  white-space: nowrap;
  font-weight: 500;
  z-index: 1;
  display: inline-block;
  border-bottom: 2px solid #000; }

.text figure {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem; }

.text img {
  width: 100%; }

.footer {
  padding: 1.5rem 5vw 10vh;
  text-align: center;
  max-width: var(--content-width);
  margin: 0 auto;
  line-height: 1.5em; }

.footer a {
  display: inline-block;
  font-size: .875rem; }

.footer > a {
  margin-bottom: 1.5rem;
  border-top: 2px solid #000;
  width: 16.5rem;
  padding-top: .5rem; }

.social a {
  margin: 0 .75rem;
  padding: .5rem 1rem;
  border: 2px solid #000;
  width: 7.5rem; }

.social a:hover {
  background: #000;
  color: #fff; }

/* Animations */
@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.fade-in {
  animation: fadeIn 300ms ease-in-out forwards; }

.fade-in-fast {
  animation: fadeIn 100ms ease-in-out forwards; }

.fade-in-slow {
  animation: fadeIn 350ms ease-in-out forwards; }

main {
  animation: fadeIn 500ms ease-in-out forwards; }

/* Common Name Styles */
/* Logos */
.logo-description {
  margin-top: 1rem;
  text-indent: 8.5rem; }

.logo-letters {
  position: relative;
  display: flex;
  align-items: flex-start;
  height: 10rem;
  margin-bottom: -2.2rem;
  left: -0.175rem; }

.logo-letters div {
  text-align: center;
  width: 1rem;
  position: -webkit-sticky;
  position: sticky; }

.logo-letters div:nth-child(1) {
  top: calc(var(--page-top-padding) + 0rem); }

.logo-letters div:nth-child(2) {
  top: calc(var(--page-top-padding) + 1rem); }

.logo-letters div:nth-child(3) {
  top: calc(var(--page-top-padding) + 2rem); }

.logo-letters div:nth-child(4) {
  top: calc(var(--page-top-padding) + 3rem); }

.logo-letters div:nth-child(5) {
  top: calc(var(--page-top-padding) + 4rem); }

.logo-letters div:nth-child(6) {
  top: calc(var(--page-top-padding) + 5rem); }

.logo-letters div:nth-child(7) {
  top: calc(var(--page-top-padding) + 6rem); }

.logo-letters div:nth-child(8) {
  top: calc(var(--page-top-padding) + 7rem); }

.cv-letters {
  position: fixed;
  bottom: 2rem;
  right: -3rem;
  width: 10rem;
  height: 4rem;
  display: flex; }

.cv-letters div {
  text-align: center;
  width: 0.5rem;
  transition: 300ms ease all; }

.cv-letters div:nth-child(1) {
  transform: translateY(0rem);
  transition: 300ms ease all; }

.cv-letters div:nth-child(2) {
  transform: translateY(1rem);
  transition: 200ms ease all; }

.cv-letters div:nth-child(3) {
  transform: translateY(2rem);
  transition: 400ms ease all; }

.cv-letters div:nth-child(4) {
  transform: translateY(3rem);
  transition: 500ms ease all; }

.cv-letters div:nth-child(5) {
  transform: translateY(2rem);
  transition: 100ms ease all; }

.cv-letters div:nth-child(6) {
  transform: translateY(1rem);
  transition: 500ms ease all; }

.cv-letters div:nth-child(7) {
  transform: translateY(0rem);
  transition: 200ms ease all; }

/* .cv-letters:hover div:nth-child(1), .cv-letters.flip div:nth-child(1) { transform: translateY(3rem); } */
/* .cv-letters:hover div:nth-child(2), .cv-letters.flip div:nth-child(2) { transform: translateY(2rem); } */
/* .cv-letters:hover div:nth-child(3), .cv-letters.flip div:nth-child(3) { transform: translateY(1rem); } */
/* .cv-letters:hover div:nth-child(4), .cv-letters.flip div:nth-child(4) { transform: translateY(0rem); } */
/* .cv-letters:hover div:nth-child(5), .cv-letters.flip div:nth-child(5) { transform: translateY(1rem); } */
/* .cv-letters:hover div:nth-child(6), .cv-letters.flip div:nth-child(6) { transform: translateY(2rem); } */
/* .cv-letters:hover div:nth-child(7), .cv-letters.flip div:nth-child(7) { transform: translateY(3rem); } */
.cv-letters.flip div:nth-child(1) {
  transform: translateY(3rem); }

.cv-letters.flip div:nth-child(2) {
  transform: translateY(2rem); }

.cv-letters.flip div:nth-child(3) {
  transform: translateY(1rem); }

.cv-letters.flip div:nth-child(4) {
  transform: translateY(0rem); }

.cv-letters.flip div:nth-child(5) {
  transform: translateY(1rem); }

.cv-letters.flip div:nth-child(6) {
  transform: translateY(2rem); }

.cv-letters.flip div:nth-child(7) {
  transform: translateY(3rem); }

.cv-letters.shape div:nth-child(1) {
  transform: translateY(1.5rem) translateX(3rem); }

.cv-letters.shape div:nth-child(2) {
  transform: translateY(1.5rem) translateX(2rem); }

.cv-letters.shape div:nth-child(3) {
  transform: translateY(1.5rem) translateX(1rem); }

.cv-letters.shape div:nth-child(4) {
  transform: translateY(1.5rem) translateX(0rem); }

.cv-letters.shape div:nth-child(5) {
  transform: translateY(1.5rem) translateX(-1rem); }

.cv-letters.shape div:nth-child(6) {
  transform: translateY(1.5rem) translateX(-2rem); }

.cv-letters.shape div:nth-child(7) {
  transform: translateY(1.5rem) translateX(-3rem); }

.cv-letters.shape2 div:nth-child(1) {
  transform: translateY(1.5rem) translateX(3rem); }

.cv-letters.shape2 div:nth-child(2) {
  transform: translateY(0.5rem) translateX(1.75rem); }

.cv-letters.shape2 div:nth-child(3) {
  transform: translateY(2.5rem) translateX(1.25rem); }

.cv-letters.shape2 div:nth-child(4) {
  transform: translateY(1.5rem) translateX(0rem); }

.cv-letters.shape2 div:nth-child(5) {
  transform: translateY(2.5rem) translateX(-1.25rem); }

.cv-letters.shape2 div:nth-child(6) {
  transform: translateY(0.5rem) translateX(-1.75rem); }

.cv-letters.shape2 div:nth-child(7) {
  transform: translateY(1.5rem) translateX(-3rem); }

/* Grids */
.main-grid {
  display: grid;
  grid-gap: 4rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.main-grid h3 {
  margin-bottom: 1rem;
  font-size: 1rem;
  font-weight: normal;
  text-transform: uppercase; }

.main-grid section {
  margin-bottom: 3rem; }

section a {
  outline: none; }

section a:hover, section a:focus {
  color: var(--color-red); }

/* Lists */
.list li {
  margin-bottom: 0.3rem;
  padding-left: 1.2rem; }

.list li:before {
  content: '\25CF';
  font-size: 5px;
  margin-left: -1rem;
  padding-right: 0.1rem;
  position: relative;
  top: -0.25rem; }

.list-padded li {
  padding-bottom: 1rem; }

.list-padded li:last-child {
  padding-bottom: 0; }

/* Project Images */
.overlay {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.75);
  z-index: 10; }

.project {
  position: fixed;
  left: 1rem;
  right: 1rem;
  max-width: 82vw;
  height: 80vh;
  top: 10vh;
  margin: 0 auto;
  z-index: 11;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  justify-content: center;
  background: white; }

.project-caption {
  z-index: 11;
  padding-top: 1rem;
  text-align: center; }

.project-description {
  z-index: 11;
  padding-top: 1rem;
  width: 50vw; }

.slider {
  width: 100vw; }

.carousel {
  height: 100%;
  width: 100%; }
  .carousel .flickity-viewport {
    height: 100%; }

.project-images {
  width: 100%;
  max-height: 100%;
  height: 100%;
  position: relative;
  z-index: 11;
  /* padding: 2rem 0; */
  /* background-color: red; */ }

.project-images img {
  /* max-height: 100%; */
  object-fit: contain;
  object-position: 50% 50%;
  height: 100%;
  width: auto;
  /* max-height: 100%;
  width: auto;
  max-width: 100%; */
  margin-right: 2rem; }

.project-images img.active {
  display: block; }

.project-close {
  /* reset button styles */
  border: 0;
  box-shadow: none;
  background: transparent;
  /* position the buttom */
  position: fixed;
  top: 2rem;
  right: 2rem;
  z-index: 12 !important;
  /* new button styles */
  /* background-image: url('/assets/images/civ-icon-close.svg'); */
  background-size: cover;
  width: 50px;
  height: 50px;
  cursor: pointer;
  transition: 100ms ease all; }

.project-close:focus {
  outline: none; }

@keyframes drawline {
  from {
    stroke-dashoffset: 150%; }
  to {
    stroke-dashoffset: 0; } }

.project-close .close-line {
  stroke-width: 1;
  stroke: #000;
  stroke-dasharray: 150%;
  stroke-dashoffset: 150%;
  transition: all 100ms ease; }

.project-close:hover .close-line {
  stroke: var(--color-red);
  stroke-width: 1;
  /* stroke-dashoffset: 0; */ }

.project-close:focus .close-line {
  stroke: var(--color-red);
  stroke-width: 1; }

#close-line1 {
  animation: drawline 0.5s ease forwards; }

#close-line2 {
  animation: drawline 1s ease forwards; }

/* Bios */
.bio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "name name" "image text";
  gap: 0.5rem 3rem;
  grid-template-rows: 20px calc(100% - 20px);
  height: 100%;
  background-color: white;
  padding: 1rem 1rem 1.5rem; }

.bio-name {
  grid-area: name; }

.bio-image {
  grid-area: image; }
  .bio-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: 0 100%; }

.bio-text {
  grid-area: text;
  display: flex;
  align-items: flex-end; }

.bio-links a {
  text-decoration: dotted 1px rgba(0, 0, 0, 0.1) !important; }

/* Utility styles */
.project-title-desktop {
  display: inline; }

.project-title-mobile {
  display: none; }

/* Lazy loading */
.lazyload {
  opacity: 0;
  transition: ease all 700ms; }

.lazyloaded {
  opacity: 1;
  transition: ease all 700ms;
  filter: none; }

@media (max-width: 645px) {
  .project-title-desktop {
    display: none; }
  .project-title-mobile {
    display: inline; }
  main {
    padding-top: var(--top-padding); }
  .cv-letters {
    z-index: 10; }
  .logo-letters div:nth-child(1) {
    top: calc(var(--page-top-padding) + var(--top-padding) + 0rem); }
  .logo-letters div:nth-child(2) {
    top: calc(var(--page-top-padding) + var(--top-padding) + 1rem); }
  .logo-letters div:nth-child(3) {
    top: calc(var(--page-top-padding) + var(--top-padding) + 2rem); }
  .logo-letters div:nth-child(4) {
    top: calc(var(--page-top-padding) + var(--top-padding) + 3rem); }
  .logo-letters div:nth-child(5) {
    top: calc(var(--page-top-padding) + var(--top-padding) + 4rem); }
  .logo-letters div:nth-child(6) {
    top: calc(var(--page-top-padding) + var(--top-padding) + 5rem); }
  .logo-letters div:nth-child(7) {
    top: calc(var(--page-top-padding) + var(--top-padding) + 6rem); }
  .logo-letters div:nth-child(8) {
    top: calc(var(--page-top-padding) + var(--top-padding) + 7rem); }
  .main-grid {
    grid-gap: 0rem; }
  .main-grid section {
    margin-bottom: 3rem; }
  .overlay {
    display: none; }
  .project {
    position: relative;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    margin: 0;
    z-index: 0; }
  .list-project {
    padding-top: 1em; }
    .list-project:first-child {
      padding-top: 0; }
  .project.hide {
    display: block !important; }
  .project-caption {
    padding-top: 0rem;
    margin: -1rem 1rem 1rem;
    text-align: center;
    display: none; }
  .project-description {
    margin-bottom: 1rem;
    width: 100%; }
  .project-images {
    width: 100%;
    max-height: none !important;
    display: block;
    align-items: center;
    justify-content: center;
    padding: 0em 1em 0em 0;
    margin-top: 0em; }
  .project-images img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: initial;
    margin-top: 1rem; }
  .bio-grid {
    display: block;
    padding: 0; }
  .bio-name {
    display: none; }
  .bio-image {
    width: 100%;
    max-height: none !important;
    display: block;
    align-items: center;
    justify-content: center;
    padding: 0em 1em 0em 0;
    margin-top: 0em; }
  .bio-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: initial;
    margin: 1rem 0; }
  .bio-text {
    margin-bottom: 1rem; } }

.flickity-button {
  background-color: white !important;
  border-radius: 0 !important; }
  .flickity-button :hover, .flickity-button :focus, .flickity-button :active {
    border-radius: 0 !important;
    background-color: white !important; }

.flickity-prev-next-button {
  height: 121px !important;
  width: 76px !important; }
  .flickity-prev-next-button svg {
    opacity: 0; }
  .flickity-prev-next-button.previous {
    background-image: url("/assets/images/left-arrow.svg") !important;
    background-size: cover;
    left: -78px !important; }
  .flickity-prev-next-button.next {
    background-image: url("/assets/images/right-arrow.svg") !important;
    background-size: cover;
    right: -78px !important; }

.flickity-page-dots {
  display: none; }