html {
  scroll-behavior: smooth;
  overflow-y: scroll; /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
}

/* work-sans-regular - latin-ext */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/work-sans-v9-latin-ext-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/work-sans-v9-latin-ext-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* work-sans-500 - latin-ext */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('../fonts/work-sans-v9-latin-ext-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/work-sans-v9-latin-ext-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* work-sans-600 - latin-ext */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('../fonts/work-sans-v9-latin-ext-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/work-sans-v9-latin-ext-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* work-sans-italic - latin-ext */
@font-face {
  font-family: 'Work Sans';
  font-style: italic;
  font-weight: 400;
  src: local(''),
       url('../fonts/work-sans-v9-latin-ext-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/work-sans-v9-latin-ext-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* work-sans-500italic - latin-ext */
@font-face {
  font-family: 'Work Sans';
  font-style: italic;
  font-weight: 500;
  src: local(''),
       url('../fonts/work-sans-v9-latin-ext-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/work-sans-v9-latin-ext-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* work-sans-600italic - latin-ext */
@font-face {
  font-family: 'Work Sans';
  font-style: italic;
  font-weight: 600;
  src: local(''),
       url('../fonts/work-sans-v9-latin-ext-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/work-sans-v9-latin-ext-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* space-grotesk-regular - latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/space-grotesk-v3-latin-ext-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/space-grotesk-v3-latin-ext-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* space-grotesk-500 - latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('../fonts/space-grotesk-v3-latin-ext-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/space-grotesk-v3-latin-ext-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* space-grotesk-600 - latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('../fonts/space-grotesk-v3-latin-ext-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/space-grotesk-v3-latin-ext-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* space-grotesk-700 - latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('../fonts/space-grotesk-v3-latin-ext-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/space-grotesk-v3-latin-ext-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/*Variables - Colors*/

:root {
  --dark-color: #263140;
  --darker-color:  #111D29;
  --light-color: #F7F8FA;
  --highlight-ligth-mode: #0062FF;
  --hightlight-dark-mode: #5999FF;
}


body {
    font-family: 'Work Sans', sans-serif;
    color:var(--dark-color);
    background-color: white;
    height: 100%;
    font-size: 16px;
    max-width: 1536px;
    margin: auto;
}


body.dark-theme {
    color: var(--light-color);
    background-color: var(--dark-color);
}

@media (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: var(--dark-color);
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--darker-color);
    color: var(--light-color);
  }
}

img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.white-background {
  background-color: white;
}


/* Text Styles */

p {
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: 0;
  margin-bottom: 1rem;
}

ul {
  margin-left: 0rem;
}
  
li {
  margin-bottom: 0.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: 0;
}

.huge {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-size: 4rem;
  line-height: 0.9;
  letter-spacing: -0.15rem;
}

.h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.1rem;
}

.h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.05rem;
  margin-bottom: 1rem;
}

.h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2rem;
  line-height: 2.25rem;
  letter-spacing: -0.05rem;
  margin-bottom: 1.25rem;
}

.h6 {
  font-family: 'Work Sans', sans-serif;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  font-weight: 500;
  margin: 0.75rem 0;
}

.body-large {
  font-size: 1.5rem;
  line-height: 2rem;
  letter-spacing: -0.05rem;
  margin-bottom: 1.5rem;
}


.small-text {
  font-size: 0.75rem;
  line-height: 1rem;
}

@media screen and (min-width: 40em) {
  p {
    font-size: 1.5rem;
    line-height: 2.25rem;
    letter-spacing: -0.025rem;}
  li {
    margin-bottom: 1rem;
    font-size: 1.5rem;
    line-height: 2.25rem;
    letter-spacing: 0;}
  .huge {
    font-size: 8rem;
    line-height: 0.9;
    letter-spacing: -0.3rem;
    margin:0;}
  .h1 {
    font-size: 6rem;
    line-height: 1;
    letter-spacing: -0.2rem;
    margin:0;}
  .h2 {
    font-size: 4rem;
    line-height: 1;}
  .h3 {
    font-size: 3rem;
    line-height: 3.25rem;
    letter-spacing: -0.1rem;}
  .h6 {
    font-size: 1.2rem;
    letter-spacing: 0.05rem;}
  .body-large {
    font-size: 2rem;
    line-height: 2.5rem;}
  .small-text {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}


a {
  color: var(--dark-color);
}

a:hover {
  color: var(--highlight-ligth-mode);
 }

.a-active {
  color: var(--highlight-ligth-mode);
 }

.a-active:hover {
  color: var(--dark-color);
}


@media (prefers-color-scheme: dark) {
  a {
    color: var(--light-color);
  }

  a:hover {
    color: #5999FF;
  }

  .a-active {
    color: #5999FF;
   }
  
  .a-active:hover {
    color: var(--light-color);
  }
} 

.row {
  margin:0;
  max-width: 100%;
}



/* Header Stylings */

.intro {
  height: 100%;
  margin: 0;
}

.intro:hover {
	color: var(--highlight-ligth-mode);
  cursor: default;
}

@media (prefers-color-scheme: dark) {
  .intro:hover {
    color: var(--hightlight-dark-mode);
  }
}

.description {
  height: 100%;
  color: var(--highlight-ligth-mode);
  display: inline-block;
  padding: 1.75rem;
  cursor: default;
}

@media screen and (min-width: 40em) {
  .description {
    padding: 1.75rem 0 0 1.75rem;
  }
}

@media (prefers-color-scheme: dark) {
  .description {
    color: var(--hightlight-dark-mode);
  }
}

#name2, #designer2, #inventor2, #illustrator2, #dude2 {
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 400ms, visibility 400ms;
            transition: opacity 400ms, visibility 400ms;
}

#name:hover,
#designer:hover,
#inventor:hover,
#illustrator:hover,
#dude:hover {
  transition: 0.2s;
  color: var(--highlight-ligth-mode);
}

@media (prefers-color-scheme: dark) {
  #name:hover,
  #designer:hover,
  #inventor:hover,
  #illustrator:hover,
  #dude:hover, {
    color: var(--hightlight-dark-mode);
  }
}


#name:hover #name2 {
  display: block;
  visibility: visible;
    opacity: 1;
    animation: moveToRight 0.4s;
}
   
#designer:hover #designer2 {
  display: block;
  visibility: visible;
    opacity: 1;
    animation: moveToRight 0.4s;
}

#inventor:hover #inventor2 {
  display: block;
  visibility: visible;
    opacity: 1;
    animation: moveToRight 0.4s;
}

#illustrator:hover #illustrator2 {
  display: block;
  visibility: visible;
    opacity: 1;
    animation: moveToRight 0.4s;
}

#dude:hover #dude2 {
  display: block;
  visibility: visible;
    opacity: 1;
    animation: moveToRight 0.4s;
}

 @keyframes moveToRight {
     0% {
        opacity: 0;
        transform: translateX(-0.75rem);
      }
     100% {
        opacity: 1;
        transform: translateX(0rem);
      }
    }


.bullets {
  margin-left:1.5rem;
}

.divider {
 height: .2rem;
 width: 100%;
 background-color:var(--dark-color);
}

@media screen and (min-width: 40em) {
  .divider { 
   height: .4rem;}
}

@media (prefers-color-scheme: dark) {
  .divider {
    background-color: var(--light-color);
  }
}

/* Style the navbar */


#logo{
  width: 4rem;
  height: 4rem;
  margin: 1rem;
  z-index: 8;
  position:fixed;
  top:0;
}


@media (prefers-color-scheme: dark) {
  #logo {
    filter: brightness(165%) saturate(90%) hue-rotate(15deg);
  }
}  


@-ms-keyframes wiggle{0%{-ms-transform:rotate(3deg);}50%{-ms-transform:rotate(-3deg);}100%{-ms-transform:rotate(3deg);}}
@-moz-keyframes wiggle{0%{-moz-transform:rotate(3deg);}50%{-moz-transform:rotate(-3deg);}100%{-moz-transform:rotate(3deg);}}
@-webkit-keyframes wiggle{0%{-webkit-transform:rotate(3deg);}50%{-webkit-transform:rotate(-3deg);}100%{-webkit-transform:rotate(3deg);}}
@keyframes wiggle{0%{transform:rotate(3deg);}50%{transform:rotate(-3deg);}100%{transform:rotate(3deg);}}

#logo:hover {
-ms-animation:wiggle .3s 2;-moz-animation:wiggle .3s 2;-webkit-animation:wiggle .3s 2;animation:wiggle .3s 2;}
    


/*#logo-sticky {
  position:fixed;
  top:0;
  width:2.75rem;
  height: 2.75rem;
  margin: 1rem;
  z-index: 15;
  border-radius: 100%;
  background-color: #0062FF;
  text-align: center;
}

#logo-sticky span {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -2px;
  text-align: center;
  line-height: 2.75rem;
  color: white;
}

#logo-sticky:hover {
  background-color: #2A384D;
  cursor: pointer;
  animation: logoHover 0.2s;
}

@media screen and (min-width: 40em) {
#logo-sticky {
  margin-left: 1.75rem;
  width:3.5rem;
  height: 3.5rem;}

#logo-sticky span {
  font-size: 1.75rem;
  line-height: 3.5rem;}
}

 @keyframes logoHover {
     0% {
        background-color: #0062FF;
      }
     100% {
        background-color: #2A384D;
      }
    }
*/



/* Lottie File */

#logoanimation {
  width: 200px;
  height: 100px;
  position: relative;
  left: -34px;
  margin-bottom: 4px;
}

@media screen and (min-width: 40em) {
  #logoanimation {
    width: 360px;
    height: 180px;
    left: -64px;
    margin-bottom: 8px;
  }
}

@media (prefers-color-scheme: dark) {
  #logoanimation {
     filter: brightness(165%) saturate(90%) hue-rotate(15deg);
  }
}

#menumobile {
 margin-top: 1rem;
}

@media (prefers-color-scheme: dark) {
  #menumobile img {
    filter: invert(100%) brightness(3.0) ;
  }
}

.topmenu {
  text-align: right;
  margin:0;
}

.topmenu ul {
  padding-right: 1rem;
}

.topmenu li {
	display: inline-block;
}

.topmenu a {
	text-align: left;
}

.menuitem {
  padding: 1rem 2rem;
  margin: 0.75rem 0;
  cursor:pointer;
}

.menuitem span {
  color: var(--dark-color);
}

.menuitem:hover {
  color: var(--highlight-ligth-mode);
}

@media (prefers-color-scheme: dark) {
  .menuitem span {
    color: var(--light-color);
  }

  .menuitem:hover {
    color: var(--hightlight-dark-mode);
  }
}



#menu2 {
  min-width:160px !important;
  margin:0;
  left: -6rem;
  top: 3rem;
}

.dropdown {
  position: relative;
  display: inline-block;
  z-index: 10;
}

.dropdown-content {
  display: none;
  padding: .5rem 0;
  position: absolute;
  overflow: hidden;
  top: 5rem;
  background-color: var(--darker-color);
  min-width: 232px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.16), 0px 0px 2px rgba(0, 0, 0, 0.16);
  z-index: 10;
}

@media (prefers-color-scheme: dark) {
  .dropdown-content{
    background-color: var(--dark-color);
  }
}

 @keyframes moveDown {
     0% {
        opacity: 0;
        transform: translateY(-1rem);
      }
     100% {
        opacity: 1;
        transform: translateY(0rem);
      }
    }

.sticky.is-stuck {
  position: fixed;
  z-index: 0;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: white;
  opacity: 0.7;
  font-size: 1.5rem;
  line-height: 2.5rem;
  padding: .25rem 1rem;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  opacity:1;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
  animation: moveDown 0.2s;
}
/*
.dropdown:hover {
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16), 0px 0px 2px rgba(0, 0, 0, 0.16);
  border-radius: 100%;
}
*/

.currentpage {
  border-left: 6px solid #0062ff;
}

@media (prefers-color-scheme: dark) {
  .currentpage {
    border-left: 6px solid #5999FF;
  }
}

.currentpage a {
	opacity:1;
}

.home {
    height: 80vh;
    position: relative;
}

.vertical-center {
  margin: 0;
  position: inherit;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.project-tile {
   overflow:auto;
}

.tooltip {
  background-color: var(--darker-color);
  color: var(--light-color);
  font-size: 1.25rem;
  line-height: 1.5rem;
  padding: 1.5rem;
  position: absolute;
  z-index: 10;
  top: calc(100% + 0.5rem);
  max-width: 25rem !important;
  box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.16), 0px 0px 2px rgba(0, 0, 0, 0.16);}

  .tooltip::before {
    border-color: transparent transparent var(--darker-color);}

@media (prefers-color-scheme: dark) {
  .tooltip{
    background-color: var(--dark-color);
  }
}


@media screen and (min-width: 40em) {
.p-description {
  padding: 1rem;
}
}

.drop-shadow {
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16), 0px 0px 2px rgba(0, 0, 0, 0.16);
}

#main {
  width: 100%;
  min-height: calc(100vh - 9rem);
}

.footer-container {
  height: 100%
}

.footer {
  margin-top: 3rem;
  padding-bottom: 2rem;
}

.footer-item-right p, .footer-item-left p {
  text-align: center;
}

@media screen and (min-width: 40em) {
  .footer-item-left p {
    text-align: left!important;}
  .footer-item-right p {
    text-align: right!important;}
}


/* Spacing */

.spacing-xs {
  margin-bottom: 0.25rem;
}

.spacing-s {
  margin-bottom: 0.5rem;
}

.spacing-m {
  margin-bottom: 2rem;
}

.spacing-l {
  margin-bottom: 4rem;
}

.spacing-xl {
  margin-bottom: 6rem;
}

.spacing-xxl {
  margin-bottom: 12rem;
}

@media screen and (min-width: 40em) {

.spacing-s {
  margin-bottom: 2rem;
}

.spacing-m {
  margin-bottom: 4rem;
}

.spacing-l {
  margin-bottom: 8rem;
}
.spacing-xl {
  margin-bottom: 12rem;
}
.spacing-xxl {
  margin-bottom: 20rem;
}
}

.image {
  margin: 1rem 0 1rem 0;
}

@media (prefers-color-scheme: dark) {
  .image{
    filter:  opacity(90%);
  }
}

.hero-image{
  width:100%;
  height: auto;
  border-radius: 0px;
}

@media screen and (min-width: 40em) {
  .hero-image {
   height: auto;
  }
}

.nav-desktop {
  padding-right: 3rem;
  z-index: 0;
}


/* Image overlay*/

.image-hover-wrapper {
  position: relative;
}

.image-hover-wrapper a {
  display: inline-block;
  letter-spacing: normal;
  line-height: initial;
  margin: 0;
  padding: 0;
  position: relative;
}

.image-hover-wrapper a img {
  float: left;
  overflow: hidden;
  width: 100%;
  height: auto;
}

@media screen and (min-width: 40em) {
  .image-hover-wrapper a img {
    height: auto;
  }
}


.image-hover-wrapper a .image-hover-wrapper-reveal {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  display: inline;
  height: 100%;
  margin-left: -100%;
  opacity: 0;
  position: absolute;
  width: 100%;
  z-index: 10;
  transition: all 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition-delay: 0s;
}

.image-hover-wrapper a .image-hover-wrapper-reveal:hover {
  opacity: 1;
  transition: all 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.image-hover-wrapper a .image-hover-wrapper-reveal:hover p {
  opacity: 1;
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
  transition: all 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition-delay: 0s;
}

.image-hover-wrapper a .image-hover-wrapper-reveal p {
  bottom: 0;
  display: block;
  opacity: 0;
  position: absolute;
  text-align: left;
  margin: 0;
  padding-left: 1.5rem;
  line-height: 1.75rem;
  width: 100%;
  transition: all 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}




/* Image carousell*/

.orbit-previous, .orbit-next {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 10;
  padding: 1rem;
  font-size: 2rem;
  color: #fff;
  background-color: transparent;
  text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16), 0px 4px 2px rgba(0, 0, 0, 0.16);}
  

  [data-whatinput='mouse'] .orbit-previous, [data-whatinput='mouse'] .orbit-next {
    outline: 0; }
  .orbit-previous:hover, .orbit-next:hover, .orbit-previous:active, .orbit-next:active, .orbit-previous:focus, .orbit-next:focus {
    background: rgba(42, 56, 77, 0.3);;
  }

.orbit-previous {
  left: 0; }

.orbit-next {
  left: auto;
  right: 0; }

.orbit-bullets {
  position: relative;
  margin-top: 2rem;
  margin-bottom: 1rem;
  text-align: center; }

  [data-whatinput='mouse'] .orbit-bullets {
    outline: 0; }
  .orbit-bullets button {
    width: 1rem;
    height: 1rem;
    margin: 0.2rem;
    background-color: rgba(42, 56, 77, 0.3);
    border-radius: 100%; }
    .orbit-bullets button:hover {
      background-color: var(--dark-color); }
    .orbit-bullets button.is-active {
      background-color: var(--dark-color); }


/*Video*/

.video-wrap {
  padding-bottom:56.25%;
  position:relative;
  display:block;
  width: 100%;
  margin: 2rem 0 3rem 0;
}

.video-iframe {
  position:absolute;
  width: 100%;
  height: 100%;
  top:0;
  left: 0;
}

.video-container {
  width:100%;
}

.video {
  position: relative;
  right: -50%;
  transform: translateX(-50%);
  max-height: 90vh;
}


.pullout {
  background-color: var(--highlight-ligth-mode);
  margin-bottom: 8rem;
}

.pullout p {
  color: var(--light-color);
  text-align: center;
}

.pullout-content {
  padding: 4rem 0;
}

.pullquote {
  border-left: 4px solid var(--highlight-ligth-mode);
  margin-bottom: 1rem;
}

@media (prefers-color-scheme: dark) {
  .pullquote {
    border-left: 4px solid var(--hightlight-dark-mode);
  }
}



.quote {
  padding: .75rem 0 .25rem 1.5rem;
}

.quote p {
  margin-bottom:0;
}

@media screen and (min-width: 40em) {
.pullout {
  margin-bottom: 12rem;
}

.pullout-content {
  padding: 8rem 0;
}

.pullquote {
  padding: 0rem;
}

.quote {
  padding: 1rem 0 1rem 2rem;}
}

table {
  font-size: .75rem;
  line-height: 1rem;
  overflow: scroll;
  background-color: transparent !important;
}

@media screen and (min-width: 40em) {
  table {
    font-size: 1.25rem;
    line-height: 1.75rem;
    letter-spacing: 0;}
}

td {
  padding: 1rem .5rem !important; 
}

th {
  font-weight: 600 !important;
  font-size: .75rem;
  margin-bottom: 1.5rem;
  color:var(--dark-color);
}

@media screen and (min-width: 40em) {
  th {
    font-size: 1.25rem;}
}

table thead {
  border-bottom: 2px solid var(--dark-color);
  background-color: transparent; }
table thead,
table tfoot {
  background: rgba(192, 194, 197, 0.15);}
table tbody tr:nth-child(even) {
  background-color: rgba(192, 194, 197, 0.15); }


@media (prefers-color-scheme: dark) {
  table th{
    color: var(--light-color);
  }
  table thead {
    border-bottom: 2px solid var(--light-color);
  }
}

figcaption {
  text-align: center !important;
  font-size: .75rem;
  line-height: 1rem;
  opacity: .75;
}

@media screen and (min-width: 40em) {
  figcaption {
    font-size: 1rem;
    line-height: 1.25rem;}
  }




/*Masonry styling*/

.masonry-css {
  -webkit-column-count: 1;
          column-count: 1;
  -webkit-column-gap: 2rem;
          column-gap: 2rem;
}

@media screen and (min-width: 50em) {
  .masonry-css {
    -webkit-column-count: 1;
            column-count: 1;
  }
}

@media screen and (min-width: 68.75em) {
  .masonry-css {
    -webkit-column-count: 2;
            column-count: 2;
  }
}

.masonry-css-item {
  -webkit-column-break-inside: avoid;
          break-inside: avoid;
  margin-bottom: 1rem;
}



/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgba(38, 49, 64, 0.8);
  max-height: 100vh;
}

/* Modal Content */
.modal-content {
  position: relative;
  padding-top: 2rem;
  margin: auto;
  padding: 0;
  height: 90vh;
}

/* Caption text */
.caption-container {
  width: 100%;
  text-align: center;
  color: var(--light-color);
  background-color: var(--dark-color);
  height: 3rem;
}

/* Modal image */
.modal-image {
  height: calc(100vh - 8rem);
}

/* The Close Button */
.close {
  color: var(--light-color);
  position: absolute;
  top: 3rem;
  right: 2rem;
  font-size: 2.5rem;
  font-weight: bold;
  z-index: 50;
}

.close:hover,
.close:focus {
  color: var(--hightlight-dark-mode);
  text-decoration: none;
  cursor: pointer;
  z-index: 7;
}

/* Hide the slides by default */
.mySlides {
  display: none;
}

.mySlides img {
  position: absolute;
  top: calc(50% + 1.5rem);
  left: 50%;
  transform: translate(-50%, -50%) rotateY(0deg);
  max-height:calc(100% - 3rem);
  max-width:100%;
  z-index: 12;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16), 0px 0px 2px rgba(0, 0, 0, 0.16);
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 1.5rem;
  margin-top: -50px;
  color: var(--light-color);
  font-weight: bold;
  font-size: 2rem;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  z-index: 15;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(42, 56, 77, 0.05);
  color: var(--hightlight-dark-mode);
}

.demonav {
  height: 5rem;
  width: 100%;
  background: var(--dark-color);
  position: absolute;
  bottom: 0px;
  margin: auto;
  display: block;
  padding: 0.5rem;
  overflow: auto;
  white-space: nowrap;
}

.demo-nav {
  -webkit-overflow-scrolling: touch;
}

img.demo {
  opacity: 0.6;
  height: 3rem;
  width: 3rem;
  margin: 0.25rem 0;
  display:inline-block;
}

.active-img,
.demo:hover {
  opacity: 1;
}

img.hover-image {
  transition: 0.3s;
}

.hover-image:hover {
  cursor: pointer;
  opacity: 0.6;
}

.disable-scrollbars::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* Chrome/Safari/Webkit */
}

.disable-scrollbars {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
}