@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Kulim+Park:ital,wght@0,200;0,300;0,400;0,600;0,700;1,200;1,300;1,400;1,600;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap");
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap");
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden],
template {
  display: none;
}

a {
  background-color: transparent;
}

a:active,
a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

mark {
  background: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 1em 40px;
}

hr {
  box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type=checkbox],
input[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  height: auto;
}

input[type=search] {
  -webkit-appearance: textfield;
  box-sizing: content-box;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

body {
  background-color: white;
  font-size: 0.875rem;
  line-height: 1.6;
  font-family: "DM Sans", sans-serif;
  color: #282a29;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* Define your main elements here ________________________________________*/
body {
  margin-top: 0;
  box-sizing: border-box;
  background-color: #fffef8;
}

#main {
  margin-left: 80px;
  max-width: 100%;
  transition: margin-left 0.5s;
}
@media screen and (max-width: 990px) {
  #main {
    margin-left: 80px;
  }
}
@media screen and (max-width: 500px) {
  #main {
    margin-left: 70px;
    margin-right: 50px;
  }
}
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
  #main {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 60px;
  }
}
#main.open {
  margin-left: 430px;
}
@media screen and (max-width: 1300px) {
  #main.open {
    margin-left: 35%;
  }
}
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
  #main.open {
    margin-left: 0;
    z-index: 0;
    padding-left: 80%;
  }
}

::selection {
  background: #c0ccf2;
}

img::selection {
  background: transparent;
}

img::-moz-selection {
  background: transparent;
}

body {
  -webkit-tap-highlight-color: #c0ccf2;
}

#typography .giant, .cutoff-hed h1, .hed h1 {
  font-family: "DM Sans", sans-serif;
  font-size: 6rem;
  font-weight: 700;
  color: #282a29;
  letter-spacing: -0.125rem;
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 500px) {
  #typography .giant, .cutoff-hed h1, .hed h1 {
    font-size: 3.5rem;
  }
}

#typography .serif-hed, .hidden h1 {
  font-size: 1.75rem;
  font-weight: 500;
  font-family: "DM Serif Display", serif;
}

.copy, .serif {
  font-size: 0.75rem;
  font-weight: 100;
  font-family: "Libre Caslon Text", serif;
  text-align: justify;
  text-justfy: inter-word;
}

#welcome .modal-copy h1, #typography .copy1, .subhead, .label, .words, .dek, h1 {
  font-family: "DM Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 100;
}

p {
  font-size: 0.875rem;
}

em {
  weight: 700;
}

hr {
  border: 1px solide #282a29;
  background-color: #282a29;
  color: #282a29;
}

a {
  text-decoration: underline;
  transition: 0.3s ease;
  color: #282a29;
}

a:hover {
  color: #0041ff;
  cursor: pointer;
}

a:active {
  color: #0041ff;
}

a:visited {
  color: #282a29;
}

h1 {
  font-size: 3rem;
  font-weight: 700;
}
@media screen and (max-width: 900px) {
  h1 {
    font-size: 2rem;
  }
}

.words {
  font-size: 0.75rem;
}

.label {
  font-size: 0.65rem;
}

.subhead {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.025rem;
  text-transform: uppercase;
}
@media screen and (max-width: 900px) {
  .subhead {
    font-size: 0.75rem;
  }
}

.italic {
  font-style: italic;
}

.symbol {
  font-size: 0.875rem;
}

.hidden h1 {
  font-size: 3rem;
}
@media screen and (max-width: 500px) {
  .hidden h1 {
    font-size: 2rem;
  }
}

#typography {
  width: 90%;
}
#typography .copy2 {
  font-size: 0.75rem;
  font-weight: 100;
  font-family: "Libre Caslon Text", serif;
  text-align: justify;
  text-justfy: inter-word;
}
#typography .copy3 {
  font-size: 0.75rem;
  font-weight: 100;
  font-family: "DM Serif Text", serif;
  text-align: justify;
  text-justfy: inter-word;
}
#typography .copy4 {
  font-size: 0.75rem;
  font-weight: 100;
  font-family: "Noto Serif", serif;
  text-align: justify;
  text-justfy: inter-word;
}

/* Circle Button  ––––––––––––––––––––––––––––––––––––––––––––– */
.halfcircle {
  cursor: pointer;
  height: 20px;
  width: 40px;
  background-color: #0041ff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  transition: transform 1s ease;
}
.halfcircle.small {
  height: 10px;
  width: 20px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.halfcircle.rotate {
  transform: rotate(180deg);
}
.halfcircle:hover {
  transform: rotate(0);
}

.halfrise {
  cursor: pointer;
  height: 20px;
  width: 40px;
  background-color: #0041ff;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  transition: transform 1s ease;
}
.halfrise.small {
  height: 10px;
  width: 20px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.quartercircle-right {
  border-radius: 0px 0px 20px 0px;
  height: 20px;
  width: 20px;
  background-color: #0041ff;
  opacity: 0;
}
.quartercircle-right.close {
  opacity: 1;
  transition: opacity 0.2s ease;
}

.quartercircle-left {
  border-radius: 0px 0px 0px 20px;
  height: 20px;
  width: 20px;
  background-color: #0041ff;
  opacity: 0;
}
.quartercircle-left.close {
  opacity: 1;
  transition: opacity 0.2s ease 0.2s;
}

.circle {
  cursor: pointer;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  transform: rotate(-45deg);
  background-color: transparent;
  transition: top 0.2s ease, background-color 0.4s linear;
  border-top: 4px solid #0041ff;
  border-right: 4px solid #0041ff;
  border-bottom: 4px solid #0041ff;
  border-left: 4px solid #0041ff;
  padding: 10px;
  background-clip: content-box;
}

/* opens the circle*/
/* uses jquery to listen for click and add class*/
/* makes the circle rotate back upwards when closing*/
.circle.rotate {
  transform: rotate -45deg;
  transition: top 0.2s ease, background-color 0.4s linear, transform 1s ease, border-bottom 0.2s linear 1s, border-left 0.2s linear 1.2s;
}

.circle.clicked {
  transform: rotate(-225deg);
  border-bottom: 4px solid transparent;
  border-left: 4px solid transparent;
  transition: top 0.2s ease, background-color 0.4s linear, border-left 0.2s linear, border-bottom 0.2s linear 0.2s, transform 1s ease 1s;
  /*note that the order of the transition matters*/
}

/* makes the circle blink when the section is scrolled upon. jquery adds this blink class which plays the blink animation below */
.blinks {
  animation: blink 3s none;
}

/*blinks twice and dissappears*/
@keyframes blink {
  0% {
    background-color: transparent;
  }
  5% {
    background-color: transparent;
  }
  20% {
    background-color: blue;
  }
  40% {
    background-color: transparent;
  }
  55% {
    background-color: transparent;
  }
  65% {
    background-color: blue;
  }
  85% {
    background-color: transparent;
  }
  100% {
    background-color: transparent;
  }
}
#nav {
  top: 0;
  left: 0;
  width: 80px;
  background-color: #fffef8;
  height: 100%;
  position: fixed;
}
@media screen and (max-width: 990px) {
  #nav {
    width: 40px;
  }
}
#nav #san {
  top: 20px;
  left: 0;
  margin-left: 30px;
  display: block;
  z-index: 500;
  text-align: center;
  border: none;
  color: #282a29;
  font-size: 1.5rem;
  position: fixed;
  background-color: transparent;
  padding: 0;
  transition: color 0.2s linear;
}
#nav #san:focus {
  outline: 0;
}
#nav #san:visited {
  color: #282a29;
}
#nav #san:hover {
  color: #ef4423;
}
#nav #san:active {
  color: #0041ff;
}
#nav #san.bling {
  animation: trans 0.3s ease forwards, bling 2s ease 2 1s forwards, bling2 2s ease 3s;
}
@keyframes trans {
  0% {
    color: #282a29;
  }
  100% {
    color: transparent;
  }
}
@keyframes bling {
  0% {
    color: transparent;
  }
  10% {
    color: #ef4423;
  }
  70% {
    color: #ef4423;
  }
  100% {
    color: #282a29;
  }
}
@keyframes bling2 {
  0% {
    color: #282a29;
  }
  10% {
    color: #ef4423;
  }
  70% {
    color: #ef4423;
  }
  100% {
    color: #282a29;
  }
}
@media screen and (max-width: 500px) {
  #nav #san {
    margin-left: 20px;
  }
}
#nav #section-mark {
  transform: rotate(-90deg);
  transform-origin: top left;
  display: inline-block;
  top: 80%;
  left: 30px;
  position: fixed;
}
#nav #section-mark a {
  text-decoration: none;
}
@media screen and (max-width: 500px) {
  #nav #section-mark {
    left: 15px;
  }
}

#sidebar {
  height: 100%;
  width: 0;
  max-width: 350px;
  position: fixed;
  top: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  transition: 0.5s;
  padding-top: 70px;
  display: block;
  background-color: #fffef8;
  border-right: solid 4px #282a29;
}
#sidebar.open {
  width: 30%;
}
@media screen and (max-width: 500px) {
  #sidebar.open {
    width: 40%;
  }
}
#sidebar #navigation {
  margin-left: 30px;
  margin-right: 30px;
  margin-top: 30px;
}
@media screen and (max-width: 500px) {
  #sidebar #navigation {
    margin-left: 20px;
    margin-right: 20px;
  }
}
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
  #sidebar #navigation {
    margin-top: 10px;
  }
}
#sidebar #navigation .navline {
  border: solid 0.5px #ef4423;
  color: #ef4423;
  background-color: #ef4423;
}
#sidebar #navigation .interests {
  font-family: "DM Sans", sans-serif;
  font-weight: 500;
  color: #ef4423;
  text-decoration: none;
  display: block;
  transition: color 0.4s;
  cursor: pointer;
}
#sidebar #navigation .interests a {
  color: #ef4423;
  text-decoration: none;
}
#sidebar #navigation .interests a:hover {
  color: #c0ccf2;
}
#sidebar #navigation .interests.focus {
  color: #c0ccf2;
}
#sidebar #navigation .interests.focus span.num {
  line-height: 1;
}
#sidebar #navigation .interests.focus a {
  color: #c0ccf2;
}
#sidebar #navigation .interests span.num {
  font-size: 3rem;
  vertical-align: middle;
  margin-right: 2rem;
  transition: line-height 0.4s;
  width: 40px;
  display: inline-block;
  line-height: 1.5;
}
#sidebar #navigation .interests span.num.open {
  line-height: 1;
}
@media screen and (max-width: 750px) {
  #sidebar #navigation .interests span.num.open {
    line-height: 0.75;
  }
}
@media screen and (max-width: 750px) {
  #sidebar #navigation .interests span.num {
    width: 100%;
    line-height: 1;
    font-size: 40px;
  }
}
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
  #sidebar #navigation .interests span.num {
    font-size: 30px;
    width: 5px;
  }
}
#sidebar #navigation .interests span.cat {
  font-size: 1rem;
  vertical-align: middle;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
  #sidebar #navigation .interests span.cat {
    font-size: 12px;
  }
}
#sidebar #navigation .interests:hover {
  color: #c0ccf2;
}
#sidebar #navigation .projects {
  max-height: 0;
  overflow-y: hidden;
  transition: max-height 0.4s ease-in-out;
  margin-left: 72px;
  font-weight: 100;
}
@media screen and (max-width: 750px) {
  #sidebar #navigation .projects {
    margin-left: 0;
  }
}
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
  #sidebar #navigation .projects {
    font-size: 10px;
    margin-left: 40px;
  }
}
#sidebar #navigation .projects.open {
  max-height: 100px;
}
#sidebar #navigation .projects .navline {
  border: solid 0.5px #c0ccf2;
  color: #c0ccf2;
  background-color: #c0ccf2;
  transition: 0.3s;
  margin-top: 0px;
}
#sidebar #navigation .projects .navline:hover {
  color: #0041ff;
}
#sidebar #navigation .projects a {
  color: #c0ccf2;
  text-decoration: none;
  transition: color 0.3s;
}
#sidebar #navigation .projects a:hover {
  color: #0041ff;
}
#sidebar #navigation .projects a:hover hr {
  border: solid 0.5px #c0ccf2;
  color: #c0ccf2;
  background-color: #c0ccf2;
}
#sidebar #interactivemenu .projects.open {
  max-height: 400px;
}

/* _project.sass */
/* Styles related to project sections ___________________________________*/
.project {
  margin-top: 10%;
  max-width: 100%;
  position: relative;
}
.project:before, .project:after {
  content: "";
  display: table;
}
.project:after {
  clear: both;
}
@media screen and (max-width: 990px) {
  .project {
    max-width: 100%;
  }
}
@media screen and (max-width: 600px) {
  .project {
    display: flex;
    flex-direction: column;
    max-width: 100%;
  }
}
.project .hed {
  z-index: 4;
}
.project .dek {
  z-index: 4;
  position: relative;
}
.project .copy {
  z-index: 4;
  position: relative;
}
.project .image {
  z-index: 4;
}
.project video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.project video:focus {
  outline: 0;
}
.project .hidden {
  z-index: 5;
  max-height: 0;
  width: 100%;
  overflow-y: hidden;
  overflow-x: hidden;
  padding-right: 5%;
  transition: max-height 2s ease-in-out;
}
.project .hidden .copy {
  column-count: 2;
  column-gap: 40px;
  margin-bottom: 5%;
}
@media screen and (max-width: 600px) {
  .project .hidden .copy {
    column-count: 1;
  }
}
.project .hidden.open {
  max-height: 800px;
  transition: max-height 2s ease;
}
@media screen and (max-width: 600px) {
  .project .hidden.open {
    max-height: 4000px;
  }
}
.project .circlepos {
  position: relative;
}
.project hr.line {
  width: 0;
  margin-left: 0;
  transition: left right;
}
.project hr.longline {
  width: 0;
  margin-left: 0;
  transition: left right;
}
.project hr.shortline {
  width: 0;
  margin-left: 0;
  transition: left right;
}
.project .line100 {
  animation: line100 2s 1 forwards;
}
.project .line100delay {
  animation: line100 2s 1 forwards;
  animation-delay: 0.5s;
}
.project .line25 {
  animation: line25 2s 1 forwards;
}
@keyframes line100 {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
    border: 0.5px solid;
  }
}
@keyframes line25 {
  0% {
    width: 0;
  }
  100% {
    width: 25%;
    border: 0.5px solid #282a29;
  }
}

/* copy styles ––––––––––––––––––––––––––––––––––––– */
/* color vars –––––––––––––––––––––––––––––––––––– */
/* modal –––––––––––––––––––––––––––––––––––*/
#welcome {
  /* modal –––––––––––––––––––––––––––––––––––*/
}
#welcome.modal {
  display: none;
  position: fixed;
  z-index: 300;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: pink;
}
#welcome .modal-content {
  position: relative;
  left: 50%;
  top: 50%;
  margin-top: -25vh;
  margin-left: -40%;
  width: 80%;
  background-color: #fffef8;
}
#welcome .modal-copy h1, #welcome h1, #welcome .dek, #welcome .words, #welcome .label, #welcome .subhead, #welcome #typography .copy1, #typography #welcome .copy1 {
  font-family: "DM Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 100;
}
#welcome .modal-copy {
  width: 60%;
  padding: 5%;
  margin: 0 auto;
}
#welcome .modal-copy h1 {
  font-size: 3rem;
  font-weight: 700;
  height: 4rem;
  color: #ef4423;
  line-height: 2rem;
}
@media screen and (max-width: 900px) {
  #welcome .modal-copy h1 {
    font-size: 2rem;
  }
}
#welcome .modal-copy p {
  font-size: 0.875rem;
}
#welcome .modal-par {
  margin-top: -0.5rem;
}
#welcome #modal-date {
  transform: rotate(90deg);
  max-width: 100%;
  display: inline-block;
  position: absolute;
  right: -1rem;
  top: 50%;
  font-size: 0.75rem;
}
#welcome .modal-circle {
  cursor: pointer;
  height: 20px;
  width: 40px;
  background-color: #0041ff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  transition: transform 1s ease;
  position: absolute;
  right: 0;
  top: 0;
  margin: 1rem;
}
#welcome .modal-circle.rotate {
  transform: rotate(180deg);
}
#welcome .modal-circle:hover {
  transform: rotate(0);
}

#eyy {
  height: 2200px;
  max-width: 100%;
}
#eyy.project {
  margin-top: 0;
  top: 0;
}
#eyy.shorten {
  height: 500px;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
  #eyy {
    height: 1350px;
  }
}
#eyy #thisis {
  position: sticky;
  position: -webkit-sticky;
  top: 10px;
  margin-top: 100px;
  line-height: 3.5rem;
  display: block;
  z-index: 100;
  margin-bottom: 0;
  padding: 0;
}
#eyy #ey {
  vertical-align: top;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  transition: max-width 0.3s ease;
}
#eyy #ey.dissappear {
  max-width: 0%;
}
#eyy #ey.appear {
  max-width: 100%;
  transition: max-width 0.3s ease;
}
#eyy #this {
  vertical-align: top;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  max-width: 0%;
  transition: max-width 0.5s ease;
}
#eyy #this.appear {
  max-width: 100%;
  transition: max-width 0.3s ease;
}
#eyy #c {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  max-width: 0%;
  opacity: 1;
  margin-left: 0;
  cursor: pointer;
  transition: color 0.3s ease;
  visibility: hidden;
}
#eyy #c:hover {
  color: #0041ff;
}
#eyy #c.poof {
  margin-left: -60px;
  opacity: 0;
  visibility: hidden;
}
#eyy #c.appear {
  max-width: 100%;
  visibility: visible;
  transition: visibility 0s, margin-left 0.3s, opacity 0.3s ease 0.7s;
}
#eyy #c.winks {
  animation: wink 1s linear;
}
@keyframes wink {
  0% {
    color: #0041ff;
  }
  100% {
    color: #0041ff;
  }
}
#eyy #celena {
  display: inline-block;
  white-space: nowrap;
  vertical-align: top;
  font-size: 1.75rem;
  overflow: hidden;
  max-width: 0%;
  transition: max-width 0.5s ease;
}
#eyy #celena.appear {
  max-width: 100%;
  transition: 0.3s ease;
}
#eyy #ey-trigger {
  z-index: -1000;
  width: 80%;
  position: absolute;
  top: 0;
  height: 1500px;
}
#eyy #ey-trigger.shorten {
  top: -1600px;
}
#eyy #basement {
  max-width: 100%;
  height: 2000px;
  transition: height 0.3s ease;
}
#eyy #basement.shorten {
  height: 500px;
}
#eyy #breakerbox {
  max-width: 100%;
  top: 180px;
  position: sticky;
  position: -webkit-sticky;
  opacity: 1;
  z-index: 300;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  transition: height 0.3s ease, opacity 0.3s ease, visibility 0s linear 0.4s;
}
@media screen and (max-width: 800px) {
  #eyy #breakerbox {
    flex-direction: column;
    justify-content: space-evenly;
    align-items: flex-start;
  }
}
@media screen and (max-width: 600px) {
  #eyy #breakerbox {
    align-items: flex-start;
  }
}
#eyy #breakerbox.hide {
  height: 0px;
  opacity: 0;
  visibility: hidden;
}
#eyy #schematic {
  position: relative;
  width: 350px;
  min-width: 30%;
  height: 300px;
  display: inline-block;
  vertical-align: middle;
  z-index: 200;
}
@media screen and (max-width: 800px) {
  #eyy #schematic {
    margin-bottom: 150px;
  }
}
@media screen and (max-width: 600px) {
  #eyy #schematic {
    margin-top: 300px;
  }
}
#eyy #slideshow-sticky {
  position: sticky;
  top: 200px;
  width: 100%;
}
#eyy #intro-slideshow {
  position: relative;
  visibility: visible;
  opacity: 1;
  transition: margin-right 0.3s ease, opacity 0.3s ease-out 0.4s, visibility 0s linear 0.8s;
}
#eyy #intro-slideshow .slide {
  position: absolute;
  max-width: 70%;
  right: 0;
  overflow: hidden;
}
@media only screen and (max-width: 500px) {
  #eyy #intro-slideshow .slide {
    max-width: 100%;
  }
}
#eyy #intro-slideshow .slide img {
  max-width: 100%;
}
#eyy #intro-slideshow .slide video {
  width: 100%;
  height: auto;
}
#eyy #intro-slideshow .slide.bg {
  background-color: #282a29;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
#eyy #intro-slideshow .slide.small img {
  width: 80%;
  padding: 10%;
}
#eyy #intro-slideshow.slide-out {
  visibility: hidden;
  opacity: 0;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
  #eyy #intro-slideshow.slide-out {
    visibility: visible;
    opacity: 1;
  }
}
#eyy #intro {
  width: 50%;
  margin-left: 10rem;
  margin-top: -200px;
  z-index: 500;
  display: inline-block;
  vertical-align: top;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.4s, margin 0.4s 0.2s;
}
@media screen and (max-width: 800px) {
  #eyy #intro {
    width: 90%;
    margin-left: 1px;
  }
}
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
  #eyy #intro {
    visibility: visible;
    opacity: 1;
  }
}
#eyy #intro h1 {
  white-space: nowrap;
  z-index: 3000;
  font-size: 72px;
  cursor: pointer;
  transition: color 1s ease-in-out 1s;
  margin: 0;
}
@media screen and (max-width: 1200px) {
  #eyy #intro h1 {
    font-size: 48px;
  }
}
@media screen and (max-width: 1200px) {
  #eyy #intro h1 {
    font-size: 36px;
  }
}
#eyy #intro h1.blue {
  color: #0041ff;
}
#eyy #intro h1.blue a {
  color: #0041ff;
}
#eyy #intro h1.blue a:hover {
  color: #282a29;
}
#eyy #intro h1.peri {
  color: #c0ccf2;
}
#eyy #intro h1.peri a {
  color: #c0ccf2;
}
#eyy #intro h1.peri a:hover {
  color: #0041ff;
}
#eyy #intro h1.yellow {
  color: #ffee5f;
}
#eyy #intro h1.yellow a {
  color: #ffee5f;
}
#eyy #intro h1.yellow a:hover {
  color: #0041ff;
}
#eyy #intro h1.orange {
  color: #ef4423;
}
#eyy #intro h1.orange a {
  color: #ef4423;
}
#eyy #intro h1.orange a:hover {
  color: #0041ff;
}
#eyy #intro h1.midnight {
  color: #002C68;
}
#eyy #intro h1.midnight a {
  color: #002C68;
}
#eyy #intro h1.midnight a:hover {
  color: #0041ff;
}
#eyy #intro.appear {
  visibility: visible;
  opacity: 1;
  margin: -130px 1rem 0 1rem;
}
@media screena and (max-width: 800px) {
  #eyy #intro.appear {
    margin: 0;
  }
}
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
  #eyy #intro.appear {
    margin: 0;
  }
}
#eyy #intro #thanks {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.4s;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) {
  #eyy #intro #thanks {
    visibility: visible;
    opacity: 1;
  }
}
#eyy #intro #thanks.appear {
  visibility: visible;
  opacity: 1;
}
#eyy #intro #home {
  cursor: pointer;
  transition: 0.3s ease;
  font-weight: 400;
  color: #282a29;
}
#eyy #intro #home:hover {
  color: #0041ff;
}
#eyy #intro #home.clicked {
  color: #c0ccf2;
  transition: 0.3s ease;
}
#eyy #intro #home.clicked:hover {
  color: #ef4423;
}
#eyy #slide-trigger {
  width: 80%;
  height: 1rem;
  position: absolute;
  top: 20vh;
}
#eyy #intro-trigger {
  width: 80%;
  position: absolute;
  top: 1000px;
  height: 1200px;
  z-index: -100;
}
#eyy #switch-rotate {
  position: absolute;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: 14px 44px;
  top: 0px;
  z-index: 600;
  opacity: 0;
}
#eyy #switch-rotate:hover {
  transform: rotate(45deg);
  cursor: pointer;
}
#eyy #switch-rotate .switch-rotate-circle {
  stroke: #0041ff;
}
#eyy #switch-rotate .switch-rotate-line {
  stroke: #0041ff;
}
#eyy #switch-rotate.appear {
  opacity: 1;
}
#eyy #switch-rotate-receiver {
  position: absolute;
  top: 0px;
  left: 44px;
  z-index: 500;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#eyy #switch-rotate-receiver .switch-rotate-receiver-circle {
  stroke: #c0ccf2;
}
#eyy #switch-rotate-receiver.appear {
  opacity: 1;
}
#eyy #circuit-container {
  position: absolute;
  top: 30px;
  left: 44px;
  z-index: 550;
}
#eyy #circuit-container #circuit {
  stroke: #0041ff;
}
#eyy #led {
  position: absolute;
  top: 266px;
  left: 284px;
}
#eyy #led #led-triangle {
  stroke: transparent;
}
#eyy #led #led-line {
  stroke: transparent;
}
#eyy #led.lit #led-triangle {
  stroke: #0041ff;
}
#eyy #led.lit #led-line {
  stroke: #0041ff;
}
#eyy #flash {
  position: absolute;
  top: 244px;
  left: 296px;
}
#eyy #flash .flash-arrow {
  fill: transparent;
}
#eyy #flash .flash-arrow.flash {
  animation: flash 2s ease 0.5s 2 forwards;
}
@keyframes flash {
  0% {
    fill: transparent;
  }
  100% {
    fill: #0041ff;
  }
}
#eyy #diode-trigger {
  width: 80%;
  height: 250px;
  position: absolute;
  top: 1900px;
}
#eyy #more {
  cursor: pointer;
  position: relative;
  display: inline-block;
  bottom: 0.5rem;
}
#eyy #more .triangle {
  border-right: 15px solid #c0ccf2;
}
#eyy #more .triangle.on {
  border-top: 10px solid transparent;
  border-right: 15px solid #282a29;
  border-bottom: 10px solid transparent;
}
#eyy #more span {
  vertical-align: middle;
}
#eyy #switcher {
  z-index: 300;
  display: inline-block;
  position: absolute;
  top: 310px;
  visibility: hidden;
}
#eyy #switcher.show {
  visibility: visible;
}
#eyy #switch2 {
  transform-origin: 14px 44px;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
  cursor: pointer;
}
#eyy #switch2 #switch-circle {
  stroke: #c0ccf2;
  transition: stroke 0.3s ease;
}
#eyy #switch2 #switch-line {
  stroke: #c0ccf2;
  transition: stroke 0.3s ease;
}
#eyy #switch2.hover {
  cursor: pointer;
  transform: rotate(0);
}
#eyy #switch2.hovered {
  cursor: pointer;
  transform: rotate(45deg);
}
#eyy #switch2.switched-off {
  transform: rotate(0);
}
#eyy #switch2.switched-off #switch-circle {
  stroke: #282a29;
}
#eyy #switch2.switched-off #switch-line {
  stroke: #282a29;
  transition: stroke 0.3s ease;
}
#eyy #switch2.hovering {
  transform: rotate(45deg);
}
#eyy #switch2.hovering #switch-circle {
  stroke: #c0ccf2;
}
#eyy #switch2.hovering #switch-line {
  stroke: #c0ccf2;
}
#eyy #switch-receiver {
  cursor: pointer;
}
#eyy #switch-receiver #switch-receiver-circle {
  stroke: #c0ccf2;
}
#eyy #switch-receiver.unlit #switch-receiver-circle {
  stroke: #282a29;
}
#eyy #switch-receiver.lite #switch-receiver-circle {
  stroke: #282a29;
}
#eyy #switch-receiver.lit #switch-receiver-circle {
  stroke: #c0ccf2;
}

#nomenclature .grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  justify-content: start;
  align-items: start;
}
#nomenclature h1 {
  grid-area: 1;
}
#nomenclature .img-container {
  grid-area: 2;
  padding: 1%;
}
#nomenclature .img-container img {
  width: 100%;
}
#nomenclature .dek {
  grid-area: 3;
  margin: 0 10% 0 0;
}
@media screen and (min-width: 1000px) {
  #nomenclature .grid {
    grid-template-columns: 2fr 5fr;
  }
  #nomenclature .left {
    margin: 0 15% 0 0;
  }
  #nomenclature h1 {
    grid-area: 1/1;
    align-self: start;
  }
  #nomenclature .dek {
    grid-area: 2/1;
    margin: 0 15% 0 0;
    align-self: stretch;
  }
  #nomenclature .img-container {
    grid-area: 2/2/2/2;
  }
}

#excerpts .grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}
#excerpts h1 {
  grid-area: 1;
}
#excerpts .img-container {
  grid-area: 2;
}
#excerpts .img-container img {
  width: 100%;
}
#excerpts .dek {
  grid-area: 3;
  margin: 0 10% 0 0;
}
@media screen and (min-width: 1000px) {
  #excerpts .grid {
    grid-template-columns: 3fr 1fr;
  }
  #excerpts .dek {
    grid-area: 2/2;
    margin: 0 13%;
  }
  #excerpts .img-container {
    grid-area: 2/1;
  }
}

#thediversitylist {
  width: 97%;
}
#thediversitylist .grid {
  width: 100%;
  display: grid;
  grid-template-columns: 4fr 1fr 1fr 2fr;
  grid-template-rows: auto;
}
@media screen and (max-width: 600px) {
  #thediversitylist .grid {
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
  }
}
#thediversitylist .grid .img-container {
  grid-area: 1/1/3/3;
  z-index: 10;
}
#thediversitylist .grid .img-container img {
  width: 100%;
}
@media screen and (max-width: 600px) {
  #thediversitylist .grid .img-container {
    grid-area: 2/1/4/5;
  }
}
#thediversitylist .grid h1 {
  grid-area: 1/3/2/5;
  margin: 5%;
  line-height: 1;
  z-index: 25;
}
@media screen and (max-width: 600px) {
  #thediversitylist .grid h1 {
    grid-area: 1/1/2/2;
  }
}
#thediversitylist .grid .dek {
  grid-area: 2/4/5/5;
  margin: 0 5%;
  padding-right: 5%;
}
@media screen and (max-width: 1000px) {
  #thediversitylist .grid .dek {
    grid-area: 3/1/4/2;
  }
}
@media screen and (max-width: 600px) {
  #thediversitylist .grid .dek {
    grid-area: 4/1/7/3;
  }
}
#thediversitylist .grid .mobile-container {
  grid-area: 2/2/3/4;
  z-index: 15;
  background-color: #d88b6c;
  padding: 10px;
  margin: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 1000px) {
  #thediversitylist .grid .mobile-container {
    grid-area: 2/2/5/5;
    margin: 10%;
  }
}
@media screen and (max-width: 600px) {
  #thediversitylist .grid .mobile-container {
    grid-area: 3/3/5/6;
    margin: 5% 0 0 0;
    padding: 5px;
  }
}
#thediversitylist .grid .mobile-container .mobile::before {
  content: "";
  width: 1px;
  margin-left: -1px;
  padding-top: 200%;
  height: 0;
  float: left;
}
#thediversitylist .grid .mobile-container .mobile::after {
  content: "";
  display: table;
  clear: both;
}
#thediversitylist .grid .mobile-container .mobile {
  border-radius: 20px;
  background-color: #282a29;
  width: 70%;
  margin: 30px;
  align-self: center;
  justify-self: center;
  transform: scale(0.95);
  transition: transform 0.3s ease;
  cursor: pointer;
  position: relative;
}
@media screen and (max-width: 1200px) {
  #thediversitylist .grid .mobile-container .mobile {
    border-radius: 25px;
  }
}
@media screen and (max-width: 850px) {
  #thediversitylist .grid .mobile-container .mobile {
    border-radius: 15px;
  }
}
@media screen and (max-width: 600px) {
  #thediversitylist .grid .mobile-container .mobile {
    border-radius: 10px;
    border-width: 1px;
  }
}
#thediversitylist .grid .mobile-container .mobile .screen {
  width: 95%;
  height: 80%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-color: #ff5904 white;
  scrollbar-width: thin;
  transition: 0.3s ease;
  position: absolute;
  left: 2.5%;
  top: 10%;
}
#thediversitylist .grid .mobile-container .mobile .screen:hover {
  scrollbar-color: #282a29 white;
}
#thediversitylist .grid .mobile-container .mobile .screen img {
  width: 100%;
}
#thediversitylist .grid .mobile-container .mobile:hover {
  transform: scale(1);
}

#interactive {
  margin-top: 10%;
}
#interactive #interactive-head.hed {
  line-height: 1;
  white-space: normal;
}
@media screen and (max-width: 600px) {
  #interactive #interactive-head.hed h1 {
    font-size: 48px;
  }
}

#object {
  display: grid;
  grid-template-columns: 1fr 1fr 3fr;
  grid-template-rows: 120px;
}
@media screen and (max-width: 800px) {
  #object {
    display: flex;
    flex-direction: column;
  }
}
#object .hed {
  grid-area: 1/1/2/3;
  overflow: hidden;
  padding-bottom: 3%;
  z-index: 20;
}
#object .hed h1 {
  line-height: 1;
  order: 1;
  margin-left: -22px;
  font-size: 64px;
}
@media screen and (max-width: 600px) {
  #object .hed h1 {
    margin-left: -25px;
  }
}
#object .dek {
  grid-area: 2/1/3/2;
  z-index: 4;
  margin-right: 10%;
  order: 3;
}
#object .circlepos {
  grid-area: 3/1/4/2;
  z-index: 10;
  order: 4;
}
#object .video-container {
  grid-area: 1/2/4/4;
  z-index: 15;
  order: 2;
}
#object .hidden {
  grid-area: 4/2/5/4;
  z-index: 100;
  width: 75%;
}
@media screen and (max-width: 600px) {
  #object .hidden {
    order: 5;
    align-self: flex-end;
  }
}
#object .stickycircle {
  position: sticky;
  position: -webkit-sticky;
  margin-left: 30px;
  top: 40%;
}
@media screen and (max-width: 500px) {
  #object .stickycircle {
    margin-left: 0;
  }
}

#counter {
  color: #002C68;
  width: 90%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
#counter a {
  color: #002C68;
}
#counter a:hover {
  color: #0041ff;
  cursor: pointer;
}
#counter a:active {
  color: #0041ff;
}
#counter a:visited {
  color: #282a29;
}
@media screen and (max-width: 700px) {
  #counter {
    display: flex;
    flex-direction: column;
  }
}
@media screen and (max-width: 600px) {
  #counter {
    width: 100%;
  }
}
@media screen and (max-width: 500px) {
  #counter {
    width: 100%;
  }
}
#counter .longline {
  border-color: #002C68;
  background-color: #002C68;
  color: #002C68;
  width: 100%;
}
#counter .square {
  width: 50%;
  padding-bottom: 50%;
  height: 0;
  background-color: #002C68;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: none;
}
@media screen and (max-width: 700px) {
  #counter .square {
    order: 1;
    width: 100%;
    padding-bottom: 100%;
    align-self: center;
  }
}
#counter .square .video-container {
  margin-top: 100%;
  padding: 10%;
  border: none;
}
#counter .square .video-container video {
  width: 100%;
  height: auto;
  border: none;
}
#counter .about {
  margin-left: 5%;
  width: 45%;
}
#counter .about em {
  color: #ff5904;
  font-style: normal;
}
#counter .about #s {
  font-size: 0.65rem;
}
@media screen and (max-width: 700px) {
  #counter .about {
    order: 2;
    width: 100%;
    align-self: center;
    margin-left: 0;
  }
}
#counter .clock {
  margin: 5% 0;
  overflow: hidden;
  height: 1em;
  width: 2ch;
  font-size: 12rem;
  font-weight: 500;
  letter-spacing: -1.5rem;
}
@media screen and (max-width: 1050px) {
  #counter .clock {
    font-size: 7rem;
    letter-spacing: -1rem;
    margin: 5% auto;
  }
}
@media screen and (max-width: 700px) {
  #counter .clock {
    font-size: 8rem;
    letter-spacing: -1rem;
  }
}
#counter .digit {
  display: inline-block;
  margin-top: -0.28em;
}
#counter .digit span {
  display: block;
  width: 100%;
  height: 1em;
}
#counter .digit.minute {
  text-align: right;
}
#counter .count-minute {
  animation: ten 1s ease 10s 1 forwards, twenty 1s ease 20s forwards, thirty 1s ease 30s forwards, forty 1s ease 40s forwards, fifty 1s ease 50s forwards, sixty 1s ease 60s forwards;
}
#counter .count-minute.seconds {
  text-align: left;
}
#counter .count-seconds {
  animation: seconds 10s 6 ease;
}
@keyframes ten {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-1em);
  }
}
@keyframes twenty {
  0% {
    transform: translateY(-1em);
  }
  100% {
    transform: translateY(-2em);
  }
}
@keyframes thirty {
  0% {
    transform: translateY(-2em);
  }
  100% {
    transform: translateY(-3em);
  }
}
@keyframes forty {
  0% {
    transform: translateY(-3em);
  }
  100% {
    transform: translateY(-4em);
  }
}
@keyframes fifty {
  0% {
    transform: translateY(-4em);
  }
  100% {
    transform: translateY(-5em);
  }
}
@keyframes sixty {
  0% {
    transform: translateY(-5em);
  }
  100% {
    transform: translateY(-6em);
  }
}
@keyframes seconds {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-1em);
  }
  20% {
    transform: translateY(-2em);
  }
  30% {
    transform: translateY(-3em);
  }
  40% {
    transform: translateY(-4em);
  }
  50% {
    transform: translateY(-5em);
  }
  60% {
    transform: translateY(-6em);
  }
  70% {
    transform: translateY(-7em);
  }
  80% {
    transform: translateY(-8em);
  }
  90% {
    transform: translateY(-9em);
  }
  100% {
    transform: translateY(0);
  }
}

#touchbase {
  width: 95%;
  margin-right: 80px;
  /* Fading animation */
}
@media only screen and (max-width: 600px) {
  #touchbase {
    margin-right: 0;
    width: 100%;
  }
}
#touchbase .hed {
  z-index: 300;
}
#touchbase .flexthis {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}
@media only screen and (max-width: 800px) {
  #touchbase .flexthis {
    flex-direction: column;
  }
}
#touchbase .about {
  margin-top: 20px;
  margin-right: 30px;
  width: 40%;
}
@media only screen and (max-width: 800px) {
  #touchbase .about {
    order: 2;
    margin-right: 0;
    width: 75%;
  }
}
@media only screen and (max-width: 600px) {
  #touchbase .about {
    width: 100%;
  }
}
#touchbase .slideshow-carousel {
  z-index: 200;
  width: 80%;
  position: relative;
  margin: auto;
}
@media only screen and (max-width: 800px) {
  #touchbase .slideshow-carousel {
    width: 100%;
    order: 1;
  }
}
#touchbase .slideshow-carousel .slide {
  display: none;
  z-index: 20;
  max-width: 100%;
  margin: 0 auto;
}
#touchbase .slideshow-carousel .slide img {
  max-width: 100%;
}
#touchbase .number {
  font-size: 1rem;
  position: absolute;
  z-index: 100;
  letter-spacing: 0.25rem;
  right: 0;
  bottom: 0;
  color: #282a29;
}
#touchbase .number.charcoal {
  color: #282a29;
}
#touchbase .dots {
  text-align: center;
}
#touchbase .dots .halfrise {
  cursor: pointer;
  background-color: #c0ccf2;
  transition: background-color 0.6s ease;
  display: inline-block;
  margin: 0 4px;
}
#touchbase .dots .halfrise:hover {
  background-color: #0041ff;
}
#touchbase .dots .active {
  background-color: #0041ff;
  transform: rotate(180deg);
}
#touchbase .fade {
  animation-name: fade;
  animation-duration: 1.5s;
}
@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

#creature {
  background-color: #c0ccf2;
  margin-right: 80px;
  width: 95%;
}
#creature h1 {
  margin-left: 5%;
}
#creature .flex-container {
  margin: 0 5% 5% 5%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
@media screen and (max-width: 850px) {
  #creature .flex-container {
    flex-direction: column;
  }
}
#creature .mobile {
  border-radius: 25px;
  background-color: #282a29;
}
#creature .mobile::before {
  content: "";
  padding-top: 50%;
  width: 1%;
  margin-left: -1%;
  float: left;
}
#creature .mobile::after {
  content: "";
  display: table;
  clear: both;
}
#creature .mobile {
  width: 48%;
  position: relative;
}
@media screen and (max-width: 850px) {
  #creature .mobile {
    width: 95%;
    border-radius: 20px;
  }
}
@media screen and (max-width: 500px) {
  #creature .mobile {
    border-radius: 15px;
  }
}
#creature .mobile .screen {
  position: absolute;
  width: 85%;
  height: 95%;
  left: 7.5%;
  top: 2.5%;
}
#creature .dek {
  margin-left: 50px;
  width: 40%;
}
@media screen and (max-width: 850px) {
  #creature .dek {
    align-self: flex-start;
    margin: 5% 0 0 0;
    width: 75%;
  }
}
@media screen and (max-width: 600px) {
  #creature .dek {
    width: 100%;
  }
}

#longtime .flex-this {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
@media screen and (max-width: 600px) {
  #longtime .flex-this {
    flex-direction: column;
  }
}
#longtime .video-container {
  width: 60%;
  order: 1;
}
@media screen and (max-width: 600px) {
  #longtime .video-container {
    width: 100%;
  }
}
#longtime .dek {
  width: 30%;
  margin: 0 5%;
  order: 2;
}
@media screen and (max-width: 600px) {
  #longtime .dek {
    width: 100%;
  }
}

#moreinteractive {
  width: 90%;
}
#moreinteractive .card-dek {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}
#moreinteractive.project {
  background-color: pink;
}
#moreinteractive .card {
  width: 200px;
  height: 300px;
  border: 1px solid #282a29;
  margin: 10px;
  display: flex;
}
#moreinteractive .card h4 {
  transform: rotate(-90deg);
  border: 1px solid #282a29;
  align-self: flex-end;
}
#design {
  max-width: 95%;
}
#design .hed {
  left: 0px;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  line-height: 1;
  margin-bottom: 2%;
  height: 7rem;
  background-color: #fffef8;
  width: 100%;
  border: 1px solid #fffef8;
}
@media screen and (max-width: 500px) {
  #design .hed {
    height: 4rem;
  }
}
#design .retaining_wall {
  width: 95%;
  margin-top: 5%;
  display: grid;
  justify-content: start;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  grid-gap: 0.5rem;
}
@media screen and (max-width: 600px) {
  #design .retaining_wall {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
}
#design .retaining_wall .card {
  border: 1px solid #282a29;
  display: grid;
  width: 100%;
  height: 100%;
}
#design .retaining_wall .card .card_img {
  width: 100%;
  justify-self: center;
  align-self: center;
  padding: 2rem 1rem;
  transform: scale(0.95);
  transition: transform 0.3s ease;
  cursor: pointer;
}
#design .retaining_wall .card .card_img:hover {
  transform: scale(1);
}
#design .retaining_wall .mobile::before {
  content: "";
  width: 1px;
  margin-left: -1px;
  padding-top: 200%;
  height: 0;
  float: left;
}
#design .retaining_wall .mobile::after {
  content: "";
  display: table;
  clear: both;
}
#design .retaining_wall .mobile {
  border: 3px solid #282a29;
  border-radius: 25px;
  width: 70%;
  margin: 30px;
  align-self: center;
  justify-self: center;
  transform: scale(0.95);
  transition: transform 0.3s ease;
  cursor: pointer;
  position: relative;
}
@media screen and (max-width: 850px) {
  #design .retaining_wall .mobile {
    border-radius: 15px;
  }
}
@media screen and (max-width: 600px) {
  #design .retaining_wall .mobile {
    border-radius: 25px;
  }
}
#design .retaining_wall .mobile .screen {
  width: 95%;
  height: 80%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-color: #ffffc0 #282a29;
  scrollbar-width: thin;
  transition: 0.3s ease;
  position: absolute;
  left: 2.5%;
  top: 10%;
}
#design .retaining_wall .mobile .screen:hover {
  scrollbar-color: #ef4423 #282a29;
}
#design .retaining_wall .mobile .screen img {
  width: 100%;
}
#design .retaining_wall .mobile:hover {
  transform: scale(1);
}
#design .retaining_wall .cardSlide {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#design .retaining_wall .cardSlide:hover .caption {
  margin-left: 10%;
  cursor: pointer;
}
#design .retaining_wall .cardSlide:hover .card_imgSlide {
  transform: translate(10%, 0);
}
#design .retaining_wall .cardSlide .caption {
  color: #fffef8;
  font-size: 1.75rem;
  align-self: center;
  margin-left: -20%;
  transition: margin 0.3s ease;
}
#design .retaining_wall .cardSlide .card_imgSlide {
  width: 100%;
  margin: 2rem;
  justify-self: center;
  align-self: center;
  transition: transform 0.3s ease;
  cursor: pointer;
}
#design .retaining_wall .overlay {
  position: fixed;
  z-index: 600;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fffef8;
  border: 0;
  padding: 2rem;
  visibility: hidden;
  opacity: 0;
  transition: 0.3s linear 0.5s;
}
#design .retaining_wall .overlay.open {
  visibility: visible;
  opacity: 1;
  transition: visibility 0s, opacity 0.3s linear, width 1s;
}
#design .retaining_wall .overlay .box {
  border: 1px solid #282a29;
  width: 95%;
  height: 90%;
  display: grid;
  grid-template-columns: 2f 1f 1f;
  grid-template-rows: 10% 80% 10%;
  grid-template-areas: "halfcircle halfcircle halfcircle" "image image about" "footer footer footer";
}
#design .retaining_wall .overlay .box .halfcircle {
  position: fixed;
  z-index: 601;
  top: 2.5rem;
  margin: 1rem;
  right: 2.5rem;
}
#design .retaining_wall .overlay .box .quartercircle-right {
  position: fixed;
  z-index: 601;
  top: 0.2rem;
  margin: 1rem;
  right: -1rem;
}
#design .retaining_wall .overlay .box .quartercircle-left {
  position: fixed;
  z-index: 601;
  top: 0.2rem;
  margin: 1rem;
  right: 0.25rem;
}
#design .retaining_wall .overlay .box .img {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: image;
  align-self: stretch;
  justify-self: stretch;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 500px) {
  #design .retaining_wall .overlay .box .img {
    display: none;
  }
}
#design .retaining_wall .overlay .box .img img {
  width: 80%;
}
#design .retaining_wall .overlay .box .about {
  -ms-grid-row: 2;
  -ms-grid-column: 3;
  grid-area: about;
  padding: 0 2rem 0 0;
}
#design .retaining_wall .overlay .box .about hr.underline {
  margin: -2rem 0 2rem 0;
  /*t,r,b,l*/
  width: 3rem;
  border: 2px solid #282a29;
}
#design .retaining_wall .overlay .box .footer {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  grid-area: footer;
}
#design .retaining_wall .square::before {
  content: "";
  padding-top: 100%;
  display: block;
}
#design .retaining_wall .square {
  width: 100%;
  position: relative;
}
#design .retaining_wall .square img {
  position: absolute;
}
#design .retaining_wall .slideshow {
  position: relative;
  height: auto;
}
#design .retaining_wall .slideshow .slide {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#design .retaining_wall .slideshow .card_img {
  padding: 0rem;
}
#design .retaining_wall .slideshow .landscape {
  width: 70%;
}
#design .retaining_wall .slideshow .landscape.small {
  width: 60%;
}
@media only screen and (max-width: 500px) {
  #design .retaining_wall .slideshow .landscape {
    width: 100%;
  }
}
#design .retaining_wall .slideshow .portrait {
  width: 35%;
}
#design .retaining_wall .slideshow .portrait.large {
  width: 80%;
}
@media only screen and (max-width: 500px) {
  #design .retaining_wall .slideshow .portrait {
    width: 100%;
  }
}
#design .retaining_wall #aboutsj {
  grid-area: 5/4/6/5;
  border: none;
  display: block;
}
#design .retaining_wall #aboutsj .text-block {
  width: 80%;
  margin: 0 auto;
}
#design .retaining_wall #aboutsj h2 {
  line-height: 1rem;
}
#design .retaining_wall #aboutsj h2 a {
  text-decoration: none;
}
#design .retaining_wall #aboutrivet {
  grid-area: 7/2/8/3;
  border: none;
  display: block;
}
#design .retaining_wall #aboutrivet h2 a {
  text-decoration: none;
}
#design .retaining_wall #rivet6cover {
  grid-area: 3/1/5/3;
}
#design .retaining_wall #rivet6cover .slideshow {
  padding-top: 100%;
}
#design .retaining_wall #rivet50-piero {
  grid-area: 4/3/6/4;
  background: #c0ccf2;
  border: none;
}
#design .retaining_wall #rivet-icon {
  grid-area: 4/4/5/5;
  background-color: #ffffc0;
  width: 100%;
  margin: 0 auto;
  border: none;
}
#design .retaining_wall #rivet-icon img {
  width: 50%;
  transition: transform 0.3s ease-out;
}
#design .retaining_wall #rivet-icon img:hover {
  transform: rotate(180deg);
}
#design .retaining_wall #rivet9_mag {
  grid-area: 1/1/3/4;
  background-color: #282a29;
}
#design .retaining_wall #rivet9_mag .card_img {
  padding: 0rem;
}
#design .retaining_wall #rivet9_mag .slideshow {
  padding-top: 20%;
}
#design .retaining_wall #rivet9_mag .slideshow .portrait {
  width: 45%;
}
#design .retaining_wall #rivet9_mag .slideshow .landscape {
  width: 80%;
}
#design .retaining_wall #madeinlaopener {
  grid-area: 9/1/11/3;
}
#design .retaining_wall #madeinlaopener img {
  width: 80%;
}
#design .retaining_wall #rivet6spread {
  grid-area: 12/2/14/5;
  background-color: #282a29;
}
#design .retaining_wall #rivet6spread img {
  width: 90%;
}
#design .retaining_wall #innovationday {
  grid-area: 2/4/3/5;
  border-color: rgb(0, 236, 215);
}
#design .retaining_wall #innovationday img {
  width: 85%;
}
#design .retaining_wall #sustainability-event {
  border: none;
}
#design .retaining_wall #sustainability-event img {
  width: 100%;
}
#design .retaining_wall #hk19_summit {
  grid-area: 6/3/7/4;
  border-color: rgb(239, 73, 35);
}
#design .retaining_wall #hk19_summit img {
  width: 90%;
}
#design .retaining_wall #hk19_badge {
  grid-area: 6/4/8/5;
  border-color: rgb(239, 73, 35);
}
#design .retaining_wall #hk19_badge img {
  width: 70%;
}
#design .retaining_wall #hk19_circle {
  grid-area: 7/3/8/4;
  border-color: rgb(239, 73, 35);
}
#design .retaining_wall #hk19_circle img {
  width: 50%;
}
#design .retaining_wall #hk19_tote {
  grid-area: 8/3/10/5;
  border-color: rgb(239, 73, 35);
}
#design .retaining_wall #ny19_summit {
  grid-area: 11/3/12/4;
}
#design .retaining_wall #ny19_summit img {
  width: 80%;
}
#design .retaining_wall #sj2018_tote {
  grid-area: 1/4/2/5;
}
#design .retaining_wall #hk18_badge {
  grid-area: 11/4/12/5;
  border-color: rgb(224, 227, 28);
}
#design .retaining_wall #hk18_badge img {
  width: 50%;
}
#design .retaining_wall #outdoor-report-20 {
  grid-area: 5/1/7/3;
  border-color: rgb(125, 119, 255);
}
#design .retaining_wall #outdoor-report-20 .slideshow .slide {
  width: 65%;
}
#design .retaining_wall #outdoor-report-20 .slideshow .smaller {
  width: 30%;
}
#design .retaining_wall #sustain-report-20 {
  grid-area: 3/3/4/5;
  display: flex;
  flex-direction: row;
  background-color: #282a29;
}
#design .retaining_wall #sustain-report-20 .slideshow {
  flex-basis: 50%;
  padding-top: 65%;
}
#design .retaining_wall #sustain-report-20 .slideshow .slide {
  left: 0%;
  top: 10%;
  transform: translate(0%, 0%);
}
#design .retaining_wall #sustain-report-20 .slideshow .slide img {
  width: 100%;
}
#design .retaining_wall #sustain-report-20 #sustain-report-slides {
  margin-right: 5%;
  margin-bottom: 5%;
  margin-left: 1%;
}
#design .retaining_wall #sustain-report-20 #sustain-report-single {
  margin-left: 5%;
  margin-bottom: 5%;
  margin-right: 1%;
}
#design .retaining_wall #research_reports {
  grid-area: 10/3/11/5;
  background-color: #282a29;
}
#design .retaining_wall #research_reports .slideshow {
  padding-top: 60%;
}
#design .retaining_wall #research_reports .slideshow .slide {
  width: 80%;
}
#design .retaining_wall #hk-newsletter {
  grid-area: 8/1/9/3;
  border: none;
  background-color: #c0ccf2;
}
#design .retaining_wall #hk-newsletter .tablet {
  border: 3px solid #282a29;
  border-radius: 25px;
  width: 80%;
  padding-top: 55%;
  margin: 30px;
  align-self: center;
  justify-self: center;
  position: relative;
}
#design .retaining_wall #hk-newsletter .tablet .screen {
  position: absolute;
  background-color: #282a29;
  border: 1px solid #282a29;
  width: 90%;
  height: 95%;
  align-self: center;
  justify-self: center;
  left: 5%;
  top: 2%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#design .retaining_wall #hk-newsletter .tablet .screen:hover {
  scrollbar-color: #ef4423 #282a29;
}
#design .retaining_wall #hk-newsletter .tablet .email {
  background-color: #fffef8;
  border: 2px solid #fffef8;
  border-radius: 2px 2px 0 0;
  height: 90%;
  width: 90%;
  display: grid;
  grid-template-areas: "header header" "inbox email";
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 1fr 11fr;
  transform: scale(0.95);
  transition: transform 0.3s ease;
}
#design .retaining_wall #hk-newsletter .tablet .email:hover {
  transform: scale(1);
}
#design .retaining_wall #hk-newsletter .tablet .email .header {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: header;
  border-bottom: 1px solid #282a29;
}
#design .retaining_wall #hk-newsletter .tablet .email .inbox {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: inbox;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #282a29;
}
#design .retaining_wall #hk-newsletter .tablet .email .inbox .inbox-text {
  border-bottom: 1px solid #282a29;
  padding-left: 0.5rem;
}
#design .retaining_wall #hk-newsletter .tablet .email .inbox .inbox-text p {
  font-size: 0.5rem;
}
#design .retaining_wall #hk-newsletter .tablet .email .inbox .message {
  background-color: #fffef8;
  border-bottom: 1px solid #282a29;
  height: 20%;
  padding: 0.5rem;
  cursor: pointer;
  transition: 0.3s ease;
}
#design .retaining_wall #hk-newsletter .tablet .email .inbox .message p {
  font-size: 0.75rem;
  line-height: 0.75rem;
}
@media screen and (max-width: 875px) {
  #design .retaining_wall #hk-newsletter .tablet .email .inbox .message p {
    font-size: 0.5rem;
  }
}
#design .retaining_wall #hk-newsletter .tablet .email .inbox .message.hover {
  color: #ef4423;
  font-weight: 600;
}
#design .retaining_wall #hk-newsletter .tablet .email .inbox .message.active {
  color: #ef4423;
  font-weight: 600;
}
#design .retaining_wall #hk-newsletter .tablet .email .inbox .message.nothover {
  color: #282a29;
  font-weight: 100;
}
#design .retaining_wall #hk-newsletter .tablet .email .newsletter {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: email;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-color: #ef4423 #282a29;
  scrollbar-width: thin;
  max-width: 100%;
  max-height: 100%;
  display: block;
  transition: 0.3s ease;
  cursor: pointer;
}
#design .retaining_wall #hk-newsletter .tablet .email .newsletter img {
  width: 90%;
  margin: 5%;
}
#design .retaining_wall #hk-newsletter .tablet .email .newsletter:hover {
  scrollbar-color: #ffffc0 #282a29;
}
#design .retaining_wall #hk-newsletter .tablet .email .newsletter .hidden {
  display: none;
}
#design .retaining_wall #hk-newsletter .tablet .email .newsletter .reveal {
  display: block;
}
#design .retaining_wall #sjad_perspective {
  grid-area: 11/2/12/3;
}
#design .retaining_wall #sjad_perspective img {
  width: 80%;
}
#design .retaining_wall #sjad_perspective .card_overlay {
  border: 0;
  position: absolute;
  top: 100%;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 20px;
  background-color: pink;
  z-index: 2;
  transition: 0.3s ease;
  opacity: 0.8;
}
#design .retaining_wall #sjad_perspective:hover {
  cursor: pointer;
}
#design .retaining_wall #sjad_perspective:hover .card_overlay {
  top: 0;
}
#design .retaining_wall #nike-airmax {
  grid-area: 11/1/13/2;
  background: #c0ccf2;
  border: none;
  order: 7;
  overflow: hidden;
}
#design .retaining_wall #nike-airmax img {
  transform: rotate(90deg);
  width: 150%;
}
#design .retaining_wall #nike-airmax img:hover {
  transform: rotate(60deg);
}

#fine {
  width: 100%;
}
#fine .hed {
  left: 0px;
  top: 0;
  line-height: 1;
  margin-bottom: 2%;
  height: 7rem;
  background-color: #fffef8;
  border: 1px solid #fffef8;
}
@media screen and (max-width: 500px) {
  #fine .hed {
    height: 4rem;
  }
}
#fine .work {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10%;
}
@media screen and (max-width: 600px) {
  #fine .work {
    flex-direction: column;
    align-items: flex-start;
  }
}
#fine .work .painting {
  width: 70%;
}
@media screen and (max-width: 600px) {
  #fine .work .painting {
    width: 100%;
  }
}
#fine .work .painting img {
  width: 100%;
}
#fine .work .painting.portrait {
  width: 45%;
}
@media screen and (max-width: 600px) {
  #fine .work .painting.portrait {
    width: 100%;
  }
}
#fine .work .painting.portrait.small {
  width: 35%;
}
@media screen and (max-width: 600px) {
  #fine .work .painting.portrait.small {
    width: 100%;
  }
}
#fine .work .dek {
  padding: 5%;
  width: 20%;
  max-width: 100%;
}
#fine .work.center {
  justify-content: center;
}
#fine #woven {
  margin-right: 80px;
  display: grid;
  justify-content: start;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-gap: 0.5rem;
  justify-items: center;
  align-items: center;
}
@media screen and (max-width: 600px) {
  #fine #woven {
    display: flex;
    flex-direction: column;
    margin-right: 30px;
  }
}
#fine #woven .weaving {
  width: 100%;
  display: grid;
}
#fine #woven .weaving img {
  width: 100%;
}
@media screen and (max-width: 600px) {
  #fine #woven .weaving img {
    align-self: center;
  }
}
#fine #woven h1 {
  justify-self: start;
  align-self: end;
}
#fine #woven #weave {
  grid-area: 1/1/3/3;
  align-self: end;
}
#fine #woven #trunk {
  align-self: start;
}
#fine #woven #wood {
  align-self: start;
}
#video {
  width: 95%;
}
#video .dek {
  width: 30%;
}
#video h1 {
  line-height: 1;
  padding: 0;
  margin: 5% 0 0 0;
}
@media screen and (max-width: 600px) {
  #video {
    width: 100%;
  }
  #video .dek {
    width: 100%;
  }
}
#video #carpere {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#video #carpere video {
  width: 90%;
}
#video #carpere-poster .dek {
  margin-top: 5%;
}
#video #carpere-poster .flex-this {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  background-color: #282a29;
}
#video #carpere-poster .flex-this img-container {
  width: 35%;
  margin: 2%;
}
#video #carpere-poster .flex-this img-container img {
  width: 100%;
}

#about {
  margin-bottom: 10%;
}
#about h1 {
  color: #002C68;
}
#about .about {
  width: 60%;
}
@media screen and (max-width: 600px) {
  #about .about {
    width: 100%;
  }
}

#footer {
  height: 150px;
  margin-right: 5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#footer form {
  width: 30%;
}
@media screen and (max-width: 500px) {
  #footer form {
    width: 60%;
  }
}
#footer input[type=text], #footer select {
  color: #0041ff;
}
#footer input[type=text] {
  border: none;
  color: #282a29;
  width: 100%;
}
#footer .label {
  margin-top: 1rem;
  text-align: center;
}

#stills {
  margin-bottom: 100px;
}
#stills #draft {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 10px;
}
#stills .rectangle {
  background-color: #282a29;
  width: 100%;
  padding-top: 56.25%;
}
#stills .square {
  background-color: #282a29;
  width: 100%;
  padding-top: 100%;
}
#stills #draft2 {
  margin: 150px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px 10px;
}
#stills #draft3 {
  margin: 150px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px 10px;
}
#stills #draft3 #specific1 {
  background-color: #282a29;
  grid-area: 2/1/5/3;
  padding-top: 56.25%;
}
#stills #draft3 #specific2 {
  background-color: #282a29;
  grid-area: 5/1/8/9;
  padding-top: 56.25%;
}