@font-face {
  font-family: "Century Expanded";
  src: local("Century Expanded LT Std"), url("../fonts/century-expanded.woff2") format("woff2"); }
@font-face {
  font-family: "Century Expanded";
  font-style: italic;
  src: local("Century Expanded LT Std"), url("../fonts/century-expanded-italic.woff2") format("woff2"); }
@font-face {
  font-family: "VerizonNHG";
  src: local("Verizon NHG DS"), url("../fonts/VerizonNHGDS-Regular.otf") format("opentype"), url("../fonts/VerizonNHGDS-Regular.ttf") format("truetype"); }
html {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased; }

body {
  margin: 0;
  margin-top: 100px;
  transform: translate3d(0, 0, 0); }

#main {
  padding: 12px; }

h1, h2 {
  font-family: 'VerizonNHG', Helvetica, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 30px;
  line-height: 96%;
  text-align: center;
  letter-spacing: -0.03em;
  margin-bottom: 0; }

h2.title-grid {
  margin-bottom: 0.5em; }

h3, li {
  font-family: 'Century Expanded', 'Times New Roman', Times, serif;
  font-style: normal;
  font-weight: 400;
  /* font-size: 30px; */
  font-size: 20px;
  /* line-height: 96%; */
  line-height: 106%;
  text-align: center;
  letter-spacing: -0.03em;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 700px;
  margin: auto;
  transition: color 300ms; }

h1, h2, li {
  cursor: default; }

a h1, a h2, a li {
  cursor: pointer; }

h3 {
  font-size: 28px; }

ul {
  margin: 0;
  padding: 0; }

span {
  position: relative;
  transition: left 700ms, top 700ms, scale 700ms, background 300ms;
  background: transparent;
  top: 0px;
  left: 0px;
  scale: 1; }

span.animated {
  display: inline-block;
  animation: rotate 2500ms linear infinite;
  color: transparent;
  border-radius: 50%;
  /* filter: blur(1px); */
  mix-blend-mode: hard-light;
  scale: 3;
  z-index: -1;
  transform: translate3d(0, 0, 0); }

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

a svg {
  display: none; }

a li span:last-child:after {
  content: url("../img/arrow.svg");
  display: none;
  position: absolute;
  margin-left: 3px; }

a:hover li span:last-child:after {
  display: inline; }

@keyframes blurry {
  /* 0%{filter:blur(1px)}
  50%{filter:blur(4px)}
  100%{filter:blur(1px)} */ }
@keyframes rotate {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }
span.absolute {
  position: absolute;
  transition: 1500ms; }

.main {
  width: 100%;
  height: 100%;
  position: relative;
  background: none;
  box-sizing: border-box;
  /* Makes sure any padding or border won't make the main larger than the viewport */ }

#navigation {
  position: fixed;
  left: -100vw; }

.transparent {
  background: #efefef;
  /* background:#000000; */
  /* background:#00ff00; */
  background: #111111; }

.transparent * {
  /* color: rgba(0,0,0,0.1); */
  user-select: none;
  /* background:black; */ }

.transparent span.animated {
  color: transparent;
  z-index: 100 !important; }

.transparent span.animated:before {
  content: attr(data-content);
  width: 100%;
  height: 100%;
  background: white;
  z-index: -3;
  /* position:relative; */
  color: black;
  position: absolute;
  top: 0px;
  left: 0px;
  mix-blend-mode: none; }

#skip-to {
  position: fixed;
  top: 10px;
  text-align: center;
  left: 50vw;
  transform: translateX(-50%);
  background: white;
  padding: 3px 5px;
  border: 1px solid #d6d6d6;
  z-index: 1000;
  border-radius: 1px;
  font-family: 'VerizonNHG';
  cursor: pointer;
  font-size: 18px; }

@media screen and (max-width: 965px) {
  .work .project-item {
    --thumbWidth: calc(33.333vw - var(--gap)*2/3 - var(--margin)*2/3 - 6px); } }
@media screen and (max-width: 735px) {
  .work .project-item {
    --thumbWidth: calc(50vw - var(--gap)*1/2 - var(--margin) - 8px); } }
@media screen and (max-width: 450px) {
  h3, li {
    font-size: 18px; }

  h4 {
    font-size: 15px; }

  h1, h2 {
    font-size: 28px; } }
#main > span[data-content],
.name-description > span[data-content],
.cols-container > span[data-content],
.cols > span[data-content] {
  display: none; }

.cols-container {
  display: block;
  z-index: 100;
  position: relative; }

.cols-container:after {
  content: '';
  width: 100%;
  position: absolute;
  height: 1px;
  background: #dedede;
  mix-blend-mode: multiply;
  z-index: 0; }

.cols {
  display: flex;
  width: 100%;
  padding: 4px 0px;
  gap: 20px;
  font-family: 'VerizonNHG', sans-serif;
  font-size: 14px; }
  .cols .name-description {
    flex: 5; }
    .cols .name-description .name {
      flex: 2; }
    .cols .name-description .description {
      flex: 3;
      position: relative; }
  .cols .date-place {
    flex: 2; }
    .cols .date-place > div {
      flex: 1; }

.cols > * {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; }

@media screen and (max-width: 1050px) {
  .cols {
    margin-bottom: 8px; }

  .cols .date-place {
    display: block;
    flex: 1; } }
@media screen and (max-width: 820px) {
  .cols .name-description {
    display: block;
    flex: 2; } }
@media screen and (max-width: 550px) {
  .cols {
    display: block; }

  .watch {
    margin-left: 20px; } }
.watch::before {
  content: url('data:image/svg+xml;utf8,<svg width="13" height="13" viewBox="0 0 35 35" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 24V10L27 16.4615L11 24Z" fill="black"/><path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 32.6667C25.8763 32.6667 32.6667 25.8763 32.6667 17.5C32.6667 9.12368 25.8763 2.33333 17.5 2.33333C9.12368 2.33333 2.33333 9.12368 2.33333 17.5C2.33333 25.8763 9.12368 32.6667 17.5 32.6667ZM17.5 35C27.165 35 35 27.165 35 17.5C35 7.83502 27.165 0 17.5 0C7.83502 0 0 7.83502 0 17.5C0 27.165 7.83502 35 17.5 35Z" fill="black"/></svg>');
  position: absolute;
  left: -20px;
  top: 2px; }