/* @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap'); */

/* @import url('https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap'); */

body {
  /* font-family: "neue-haas-grotesk-display"; */
  /* font-family: -apple-system, BlinkMacSystemFont; */
  font-family: 'Space Grotesk', sans-serif;
  /* font-display: block; */
  color: #222222;
  z-index: 3;
  /* font-weight: 1 999; */
}

.flex-container {
  display: flex;
  z-index: 0;
}

/* add to a row div */
.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

/* overriding bootstraps default gutters */
.row {
  margin-left: 0;
  margin-right: 0;
}

@media (min-width: 767px) {
  .text-right-sm {
    text-align: right;
  }
}

@media (max-width: 767px) {
  .text-right-sm {
    text-align: left;
  }
}

.sticky-top {
  z-index: 99;
  height: 100%;
}

.fixed-top {
  display: flex;
  padding: 15px 25px 15px 30px;
}

@media (max-width: 767px) {
  .fixed-top {
    background-color: white;
    padding: 0px 0px 0px 12px;
    display: inline-block;
  }
}

.left-nav {
  margin: 0;
  z-index: 99;
  display: inline-block;
}

@media (max-width: 767px) {
  .left-nav {
    background-color: white;
    padding-top: 9px;
    padding-left: 0px;
    padding-bottom: 6px;
  }
}

@media (min-width: 767px) {
  .footer {
    position: absolute;
    left: 2.2%;
    bottom: 0;
    width: 100%;
    font-weight: 400;
    font-size: 1em;
    color: #212529;
    line-height: 30px;
    text-align: left;
    z-index: 200;
    content: '';
  }
}

@media (max-width: 767px) {
  .footer {
    padding-top: 0%;
    z-index: -1;
    content: '';
  }
}

.body-text {
  padding-top: 0px;
  padding-right: 0px;
  padding-left: 0px;
  color: #212529;
  font-size: 1.125em;
  line-height: 30px;
}

.medium-padding {
  padding-right: 20%;
  padding-left: 20%;
}

@media (max-width: 767px) {
  .medium-padding {
    padding-right: 5%;
    padding-left: 5%;
  }
}

.heavy-padding {
  padding-right: 25%;
  padding-left: 25%;
}

@media (max-width: 767px) {
  .heavy-padding {
    padding-right: 10%;
    padding-left: 10%;
  }
}

.light-padding {
  padding-right: 10%;
  padding-left: 10%;
}

@media (max-width: 1600px) {
  .light-padding {
    padding-right: 5%;
    padding-left: 5%;
  }
}

.micro-padding {
  padding-right: 2%;
  padding-left: 2%;
}

.full-width {
  padding-top: 0px;
  padding-right: 0px;
  padding-left: 0px;
  color: #212529;
}

h1 {
  font-weight: 400;
  font-size: 2.2vw;
  line-height: 150%;
  color: #222222;
  margin: auto;
  display: inline-block;
}

@media (max-width: 767px) {
  h1 {
    font-weight: 400;
    font-size: 1.1em;
    line-height: 130%;
    color: #222222;
    margin: auto;
  }
}

h2 {
  /* color: #464646; */
  padding-top: 0px;
  color: #222222;
  font-weight: 600;
  font-size: 2.8em;
  z-index: 0;
}

@media (max-width: 767px) {
  h2 {
    /* color: #464646; */
    padding-top: 14px;
    color: #222222;
    font-weight: 600;
    font-size: 1.8em;
    z-index: 0;
  }
}

h3 {
  color: rgb(255, 255, 255);
  line-height: 130%;
  font-weight: 400;
  font-size: 24px;
}

@media (max-width: 767px) {
  h3 {
    color: rgb(255, 255, 255);
    line-height: 130%;
    font-weight: 400;
    font-size: 1.2em;
  }
}

h4 {
  color: #222222;
  font-weight: 400;
  line-height: 150%;
  margin: 0px;
  display: inline-block;
}

@media (max-width: 767px) {
  h4 {
    font-weight: 400;
    font-size: 1.1em;
    color: #222222;
    line-height: 130%;
    margin: 0px;
  }
}

h5 {
  font-weight: 300;
  font-size: 1.3em;
  color: #222222;
  line-height: 100%;
}

@media (max-width: 767px) {
  h5 {
    font-weight: 500;
    font-size: 1em;
    color: #222222;
  }
}

h6 {
  font-weight: 300;
  font-size: 1.3em;
  color: #222222;
  line-height: 40px;
}

@media (max-width: 767px) {
  h6 {
    font-weight: 500;
    font-size: 1em;
    color: #222222;
    line-height: 30px;
  }
}

h8 {
  color: #222222;
  font-weight: 300;
  font-size: 2em;
  letter-spacing: 1%;
  line-height: 150%;
}

@media (max-width: 767px) {
  h8 {
    color: #222222;
    font-weight: 300;
    font-size: 1.6em;
    letter-spacing: 1%;
  }
}

h7 {
  color: #222222;
  font-weight: 600;
  font-size: 1.2em;
  letter-spacing: 1.5px;
  line-height: 150%;
  z-index: 0;
}

@media (max-width: 767px) {
  h7 {
    color: #222222;
    font-weight: 600;
    font-size: 1em;
    letter-spacing: 1.5px;
    line-height: 40px;
    z-index: 0;
  }
}

h11 {
  color: #222222;
  font-weight: 400;
  font-size: 2em;
  letter-spacing: 1.5px;
}

@media (max-width: 767px) {
  h11 {
    color: #222222;
    font-weight: 400;
    font-size: 1.2em;
    letter-spacing: 1.5px;
  }
}

hr {
  width: 30%;
  border-top: 7px solid #d7d7d7;
}

hr.thin {
  width: 100%;
  border-top: 1px solid #e9e9e9;
  line-height: 0px;
  padding: 0px;
  margin: 0px;
}

hr.hero {
  width: 100%;
  border-top: 10px solid #9ebaff;
  line-height: 0px;
  padding: 0px;
  margin: 0px;
  mix-blend-mode: exclusion;
}

a {
  color: #222222;
  font-size: 24px;
  font-weight: 400;
  line-height: 150%;
  margin: 0px;
  transition: font-weight 0.5s ease-out;
}

@media (max-width: 767px) {
  a {
    font-weight: 400;
    font-size: 1.1em;
    color: #222222;
    line-height: 80%;
    margin: 0px;
  }
}

a:hover {
  text-decoration: none;
  color: #222222;
  font-weight: 700;
}

a.class2 {
  color: rgb(45, 45, 45);
}

a.links {
  background-image: linear-gradient(to bottom, #79c0d3 0%, #79c0d3 100%);
  background-position: 0 100%;
  background-repeat: repeat-x;
  background-size: 4px 6px;
  color: #222222;
  text-decoration: none;
  /* transition: background-size 0.4s; */
  transition: font-weight 0.5s ease-out;
}

a.links:hover {
  /* background-size: 4px 26px; */
  font-weight: 700;
}

a.links-large {
  background-size: 14px 10px;
  color: #222222;
  font-size: 1em;
  font-weight: 400;
}

/* a.links-large:hover {
  background-size: 4px 44px; 
} */

/* title */
a.title {
  line-height: 100%;
  font-weight: 400;
  font-size: 3.5vw;
  background-image: linear-gradient(to bottom, #e8e8e8 0%, #e8e8e8 100%);
  background-position: bottom 8px right;
  background-repeat: repeat-x;
  background-size: 11px 14px;
  color: #222222;
  text-decoration: none;
  /* transition: background-size 0.1s; */
  animation: wheelHueColor 220s infinite;
  transition: font-weight 0.8s ease-out;
}

@media (max-width: 767px) {
  a.title {
    color: #222222;
    font-weight: 500;
    font-size: 1.8em;
    background-size: 5px 0px;
  }
}

a.title:hover {
  /* background-size: 4px 52px; */
  font-weight: 900;
}

.caselink {
  font-weight: 400;
  font-size: 1.4em;
  line-height: 100%;
  color: #ffffff;
  margin: 0;
  text-decoration: none;
  position: absolute;
  bottom: 5%;
  left: 3%;
  transition: font-weight 0.5s ease-out;
}

.hover-zoom:hover .caselink {
  font-weight: 900;
  font-size: 1.4em;
  line-height: 100%;
  color: #ffffff;
  margin: 0;
  text-decoration: none;
  position: absolute;
  bottom: 5%;
  left: 3%;
}

.caselink:hover {
  color: #ffffff;
}

@media (max-width: 767px) {
  .caselink {
    font-size: 1.1em;
  }
}

@keyframes wheelHueColor {
  from,
  to {
    background-image: #e6a294;
  }
  10% {
    background-image: #e8c8c2;
  }
  20% {
    background-image: #8bb7d1;
  }
  30% {
    background-image: #83bc6b;
  }
  40% {
    background-image: #dce673;
  }
  50% {
    background-image: #907491;
  }
  60% {
    background-image: #e7d0cb;
  }
  70% {
    background-image: #cec4c0;
  }
}

.word-wrap {
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

a.class2:hover {
  color: #3eb6d6;
  text-decoration: none;
}

.current-page {
  color: #3eb6d6;
  text-decoration: none;
}

/* main container for site */
.container-fluid {
  padding-right: 0;
  padding-left: 0;
  margin-right: 0;
  margin-left: 0;
  z-index: 0;
}

.img-fluid {
  max-width: 100% !important;
  height: auto !important;
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  width: 100% !important;
  max-width: 100% !important;
}

.modal {
  width: 100% !important; /* Full width */
  height: 100% !important; /* Full height */
}

.padding-top-54 {
  margin-top: 54%;
}

.padding-top-40 {
  margin-top: 40%;
}

.padding-top-100 {
  margin-top: 100%;
}

.padding-top-10 {
  margin-top: 5%;
}

.grey-fill {
  background-color: rgb(204, 204, 204);
  padding-left: 0px;
  padding-right: 0px;
  margin-left: 0px;
  margin-right: 0px;
  border-radius: 1px;
  /* box-shadow: 2px 4px 7px rgba(0, 0, 0, 0.4); */
}

.border {
  border-width: 1px !important;
  border-color: #000000 !important;
}

.mix-blend {
  mix-blend-mode: color-dodge;
}

.gradient-white {
  background: linear-gradient(rgba(0, 0, 255, 0), rgba(255, 255, 255, 0.536));
  z-index: 99;
}

.gradient-nav {
  background: linear-gradient(to top right, #f0f0e9, #cccccc);
}

.gradient-nav2 {
  background: linear-gradient(to top right, #ffffff, #cccccc);
}

.gradient-turk {
  background: linear-gradient(#b9bebe, #cccccc);
}

.fade-in {
  animation: fadeIn 6s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-out {
  animation: fadeinout 4s linear forwards;
}

@keyframes fadeinout {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

.fade-in-left {
  animation: fadeInLeft 6s;
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.z-0 {
  z-index: 0;
}

.z-12 {
  z-index: 12;
}

.padding-turbo-1 {
  margin-top: 3200px;
}

.padding-turbo-2 {
  margin-top: 5200px;
}

.background-trans {
  background-color: #e0e3e7e5;
}

.height-100 {
  height: 100px;
}

.fill-width {
  min-width: 100vh;
  width: 100%;
}

.hero-height {
  min-height: 30vh;
  height: 30%;
}

.animateObject {
  font-weight: 900;
}

.bump {
  margin-top: 0px;
}

@media (max-width: 767px) {
  .bump {
    margin-top: 50px;
  }
}

.hover-zoom {
  margin: 0px;
  padding: 0px;
  height: 380px;
  width: 100%;
  background-size: 140%;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  cursor: pointer;
}

.hover-zoom:hover {
  background-size: 180%;
}

/* If the content is smaller than the minimum width, the minimum width will be applied. */

@media (min-width: 992px) {
  .hover-zoom {
    background-size: 170%;
  }
}

@media (min-width: 1400px) {
  .hover-zoom {
    background-size: 130%;
  }
  .hover-zoom {
    background-size: 150%;
  }
}

.text-bottom {
  bottom: 0;
  position: absolute;
}

.carousel-item {
  height: 300px;
}

.middle-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.middle {
  margin: auto;
  width: 50%;
}

@media (max-width: 767px) {
  .middle {
    margin: auto;
    width: 100%;
  }
}

.carousel-control-next,
.carousel-control-prev {
  filter: invert(100%);
}

/* line break that disappears on small screens  */
.br:before {
  content: '\A';
  white-space: pre;
}

@media (max-width: 767px) {
  .br:before {
    content: ' ';
    white-space: pre;
  }
}

/* line break that disappears on big screens  */
.br2:before {
  content: '\A';
  white-space: pre;
}

@media (max-width: 767px) {
  .br2:before {
    content: '';
    white-space: pre;
  }
}

.spacer-section {
  padding: 7vh;
}

@media (max-width: 767px) {
  .spacer-5rem-md {
    padding: 0rem;
    margin-bottom: 0rem;
  }
}

.heading-card {
  padding-top: 12px;
  padding-bottom: 0px;
  padding-left: 4%;
  padding-right: 4%;
}

.quote {
  color: #222222;
  font-weight: 400;
  font-size: 1.7em;
  letter-spacing: 1.5px;
  line-height: 135%;
  z-index: 0;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 35px;
  padding-right: 0px;
  background-position: left;
  background-repeat: repeat-y;
  background-size: 10px;
  text-decoration: none;
}

@media (max-width: 767px) {
  .quote {
    font-size: 1.2em;
  }
}

.quote-blue {
  background-image: linear-gradient(to bottom, #3eb6d6 0%, #3eb6d6 50%);
}

.quote-white {
  background-image: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%);
}

.hero {
  height: 700px;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@media (max-width: 767px) {
  .hero {
    margin-top: 100px;
    height: 400px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }
}

.wrkiit-img {
  background-image: url('../images/wrkiit.png');
}

@media (max-width: 767px) {
  .wrkiit-img {
    background-image: url('../images/wrkiit_sm.png');
    margin-top: 100px;
  }
}

.pandora-img {
  background-image: url('../images/visible_cloaks4.png');
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@media (max-width: 767px) {
  .pandora-img {
    background-image: url('../images/visible_cloaks_sm.png');
  }
}

.nelara-img {
  background-image: url('../images/nelara/nelara-white-blk-bg.png');
}

@media (max-width: 767px) {
  .nelara-img {
    background-image: url('../images/nelara/nelara-white-blk-bg.png');
  }
}

.nav-bg {
  background-color: transparent;
}

@media (max-width: 767px) {
  .nav-bg {
    background-color: white;
  }
}

/* Progress progress-bar */

.header {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
  background-color: rgb(238, 238, 238);
  z-index: 100;
}

.header h2 {
  text-align: center;
}

.progress-container {
  width: 100%;
  height: 6px;
  background: transparent;
}

.progress-bar {
  height: 6px;
  background: #3eb6d6;
  width: 0%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

.progress-bar-nel {
  height: 6px;
  background: #6c5fff;
  width: 0%;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

@media (max-width: 767px) {
  .progress-container {
    padding-top: 94px;
    height: 100px;
    width: 100%;
    background: transparent;
  }
}

.content {
  padding: 100px 0;
  margin: 50px auto 0 auto;
  width: 80%;
}

#sketch-holder {
  position: flex;
  overflow: hidden;
  width: 100%;
  height: 90vh;
  margin: auto;
  cursor: pointer;
}

@media (max-width: 767px) {
  #sketch-holder {
    width: 100%;
    height: 90vh;
    margin: auto;
  }
}

.external {
  width: 25px;
}

canvas {
  width: 100% !important;
}

.canvas-container {
  width: 100%;
  height: 75vh;
  position: absolute;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

@media (max-width: 767px) {
  .canvas-container {
    margin-top: 80px;
  }
}

.glsl-padding {
  height: 75vh;
}

@media (max-width: 767px) {
  .glsl-padding {
    padding-top: 90vh;
  }
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  z-index: 99;
}

@media (max-width: 767px) {
  .centered {
    width: 95%;
  }
}

.noise-img {
  opacity: 15%;
  width: 100%;
  height: 100%;
  padding-bottom: 9px;
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}