/* -------------------------------- 

File#: _1_sliding-panels
Title: Sliding Panels
Descr: A group of sections that expand to reveal additional content, or hide to show the navigation
Usage: codyhouse.co/license

-------------------------------- */
/* reset */
*, *::after, *::before {
  box-sizing: border-box;
}

* 
 

ol, ul, menu {
  list-style: none;
}

button, input, textarea, select {
  background-color: transparent;
  border-radius: 0;
  color: inherit;
  line-height: inherit;
  appearance: none;
}

textarea {
  resize: vertical;
  overflow: auto;
  vertical-align: top;
}

 

 

img, video, svg {
  display: block;
  max-width: 100%;
}

@media (min-width: 64rem) {
  body {
    font-size: 1.25rem;
  }

  h1 {
    font-size: 3.051rem;
  }

    h2 {
    font-size: 2.44rem;
  }

    h3 {
    font-size: 1.75rem;
  }

    h4 {
    font-size: 1.5625rem;
  }
}

/* variables */
:root {
  /* colors */
  --sn3-color-primary-hsl: 250, 84%, 54%;
  --sn3-color-bg-hsl: 0, 0%, 100%;
  --sn3-color-contrast-high-hsl: 230, 7%, 23%;
  --sn3-color-contrast-higher-hsl: 230, 13%, 9%;
  --sn3-color-contrast-medium-hsl: 225, 4%, 47%;
  --sn3-color-black-hsl: 230, 13%, 9%;
  --sn3-color-white-hsl: 0, 0%, 100%;
  --sn3-color-accent-hsl: 342, 89%, 48%;
  --sn3-color-contrast-lower-hsl: 240, 4%, 85%;

  /* spacing */
  --sn3-space-4xs: 0.125rem;
  --sn3-space-xs: 0.5rem;
  --sn3-space-sm: 0.75rem;
  --sn3-space-md: 1.25rem;
  --sn3-space-lg: 2rem;
  --sn3-space-xl: 3.25rem;
  --sn3-space-3xl: 8.5rem;

  /* typography */
  --sn3-text-3xl: 2.488rem;
  --sn3-text-2xl: 2.0736rem;
  --sn3-text-sm: 0.833rem;
  --sn3-text-sm: 0.833rem;
}

@media(min-width: 64rem){
  :root {
    /* spacing */
    --sn3-space-4xs: 0.1875rem;
    --sn3-space-xs: 0.75rem;
    --sn3-space-sm: 1.125rem;
    --sn3-space-md: 2rem;
    --sn3-space-lg: 3.125rem;
    --sn3-space-xl: 5.125rem;
    --sn3-space-3xl: 13.25rem;

    /* typography */
    --sn3-text-3xl: 3.815rem;
    --sn3-text-2xl: 3.051rem;
    --sn3-text-sm: 1rem;
    --sn3-text-sm: 1rem;
  }
}

/* icons */
.sn3-icon {
  height: var(--sn3-size, 1em);
  width: var(--sn3-size, 1em);
  display: inline-block;
  color: inherit;
  fill: currentColor;
  line-height: 1;
  flex-shrink: 0;
  max-width: initial;
}

.sn3-icon--sm {
  --sn3-size: 24px;
}

/* component */
.s-panels__nav-control {
  position: fixed;
  z-index: 10;
  top: var(--sn3-space-md);
  right: var(--sn3-space-md);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid hsla(var(--sn3-color-white-hsl), 0.1);
  background-color: hsla(var(--sn3-color-black-hsl), 0.95);
  display: flex;
  justify-content: center;
  align-items: center;
  color: hsl(var(--sn3-color-white-hsl));
  transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.s-panels__nav-control:active {
  -webkit-transform: translateY(2px);
          transform: translateY(2px);
}
.s-panels__nav-control .icon__group * {
  transition: stroke-dashoffset 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), stroke-dashoffset 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), stroke-dashoffset 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  stroke-dasharray: 24;
}
.s-panels__nav-control .icon__group *:nth-child(1) {
  -webkit-transform-origin: 2px 6px;
          transform-origin: 2px 6px;
}
.s-panels__nav-control .icon__group *:nth-child(2) {
  -webkit-transform-origin: 2px 12px;
          transform-origin: 2px 12px;
}
.s-panels__nav-control .icon__group *:nth-child(3) {
  -webkit-transform-origin: 2px 18px;
          transform-origin: 2px 18px;
}
@media (orientation: portrait) {
  .s-panels__nav-control.s-panels__nav-control--arrow-down {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  .s-panels__nav-control.s-panels__nav-control--arrow-down:active {
    -webkit-transform: translateY(2px) rotate(-180deg);
            transform: translateY(2px) rotate(-180deg);
  }
}
@media (orientation: landscape) {
  .s-panels__nav-control.s-panels__nav-control--arrow-down {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
  .s-panels__nav-control.s-panels__nav-control--arrow-down:active {
    -webkit-transform: translateY(2px) rotate(-90deg);
            transform: translateY(2px) rotate(-90deg);
  }
}
.s-panels__nav-control.s-panels__nav-control--arrow-down .icon__group *:nth-child(1),
.s-panels__nav-control.s-panels__nav-control--arrow-down .icon__group *:nth-child(3) {
  stroke-dashoffset: 14;
}
.s-panels__nav-control.s-panels__nav-control--arrow-down .icon__group *:nth-child(1) {
  -webkit-transform: translateY(6px) rotate(-45deg);
          transform: translateY(6px) rotate(-45deg);
}
.s-panels__nav-control.s-panels__nav-control--arrow-down .icon__group *:nth-child(3) {
  -webkit-transform: translateY(-6px) rotate(45deg);
          transform: translateY(-6px) rotate(45deg);
}
.s-panels__nav-control.s-panels__nav-control--close:active {
  -webkit-transform: translateY(2px);
          transform: translateY(2px);
}
.s-panels__nav-control.s-panels__nav-control--close .icon__group *:nth-child(1) {
  -webkit-transform: translateX(2.93px) translateY(-1.07px) rotate(45deg);
          transform: translateX(2.93px) translateY(-1.07px) rotate(45deg);
}
.s-panels__nav-control.s-panels__nav-control--close .icon__group *:nth-child(2) {
  stroke-dashoffset: 24;
}
.s-panels__nav-control.s-panels__nav-control--close .icon__group *:nth-child(3) {
  -webkit-transform: translateX(2.93px) translateY(1.07px) rotate(-45deg);
          transform: translateX(2.93px) translateY(1.07px) rotate(-45deg);
}

.s-panels__projects-list {
  position: relative;
  z-index: 2;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
}

.s-panels__project-preview {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  transition: -webkit-transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

@media (orientation: landscape) {
  .s-panels__project-preview:nth-child(2) .s-panels__project-figure {
    -webkit-transform: translateX(25%) scaleX(0.25);
            transform: translateX(25%) scaleX(0.25);
  }
  .s-panels__project-preview:nth-child(2) .s-panels__project-intro {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }

  .s-panels__project-preview:nth-child(3) .s-panels__project-figure {
    -webkit-transform: translateX(50%) scaleX(0.25);
            transform: translateX(50%) scaleX(0.25);
  }
  .s-panels__project-preview:nth-child(3) .s-panels__project-intro {
    -webkit-transform: translateX(200%);
            transform: translateX(200%);
  }

  .s-panels__project-preview:nth-child(4) .s-panels__project-figure {
    -webkit-transform: translateX(75%) scaleX(0.25);
            transform: translateX(75%) scaleX(0.25);
  }
  .s-panels__project-preview:nth-child(4) .s-panels__project-intro {
    -webkit-transform: translateX(300%);
            transform: translateX(300%);
  }

  .s-panels__project-preview--hide {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}
@media (orientation: portrait) {
  .s-panels__project-preview:nth-child(2) .s-panels__project-figure {
    -webkit-transform: translateY(25%) scaleY(0.25);
            transform: translateY(25%) scaleY(0.25);
  }
  .s-panels__project-preview:nth-child(2) .s-panels__project-intro {
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }

  .s-panels__project-preview:nth-child(3) .s-panels__project-figure {
    -webkit-transform: translateY(50%) scaleY(0.25);
            transform: translateY(50%) scaleY(0.25);
  }
  .s-panels__project-preview:nth-child(3) .s-panels__project-intro {
    -webkit-transform: translateY(200%);
            transform: translateY(200%);
  }

  .s-panels__project-preview:nth-child(4) .s-panels__project-figure {
    -webkit-transform: translateY(75%) scaleY(0.25);
            transform: translateY(75%) scaleY(0.25);
  }
  .s-panels__project-preview:nth-child(4) .s-panels__project-intro {
    -webkit-transform: translateY(300%);
            transform: translateY(300%);
  }

  .s-panels__project-preview--hide {
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
  }
}
.s-panels__project-preview--selected {
  z-index: 1;
  pointer-events: auto;
}
.s-panels__project-preview--selected .s-panels__project-figure {
  overflow: visible;
}
.s-panels__project-preview--selected .s-panels__project-img {
  opacity: 0.9 !important;
  -webkit-filter: none !important;
          filter: none !important;
}
.s-panels__project-preview--selected .s-panels__project-intro {
  opacity: 0;
}
.s-panels__project-preview--selected .s-panels__project-control {
  pointer-events: none;
}
.s-panels__project-preview--selected .s-panels__text-component::before,
.s-panels__project-preview--selected .s-panels__text-component::after {
  display: none;
}
.s-panels__project-preview--selected .s-panels__project-title-wrapper {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s 0.2s;
}
.s-panels__project-preview--selected .s-panels__project-title {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  transition-delay: 0.2s;
}

@media (orientation: landscape) {
  .s-panels__project-preview--selected .s-panels__project-figure {
    -webkit-transform: translateX(calc(50% - 50%/4)) scaleX(0.25) !important;
            transform: translateX(calc(50% - 50%/4)) scaleX(0.25) !important;
  }
}
@media (orientation: portrait) {
  .s-panels__project-preview--selected .s-panels__project-figure {
    -webkit-transform: translateY(calc(50% - 50%/4)) scaleY(0.25) !important;
            transform: translateY(calc(50% - 50%/4)) scaleY(0.25) !important;
  }
}
.s-panels__project-preview--no-transition {
  transition: none !important;
}
.s-panels__project-preview--no-transition > * {
  transition: none !important;
}

.s-panels__project-figure,
.s-panels__project-img,
.s-panels__project-intro,
.s-panels__project-control {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.s-panels__project-figure {
  overflow: hidden;
  transition: -webkit-transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}

@media (orientation: landscape) {
  .s-panels__project-figure {
    -webkit-transform-origin: left center;
            transform-origin: left center;
    -webkit-transform: scaleX(0.25);
            transform: scaleX(0.25);
  }
}
@media (orientation: portrait) {
  .s-panels__project-figure {
    -webkit-transform-origin: center top;
            transform-origin: center top;
    -webkit-transform: scaleY(0.25);
            transform: scaleY(0.25);
  }
}
.s-panels__project-img {
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0.25;
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
  transition: opacity 0.4s, -webkit-filter 0.4s, -webkit-transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.4s, filter 0.4s, transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 0.4s, filter 0.4s, transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-filter 0.4s, -webkit-transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
}
@media (min-width: 64rem) {
  .s-panels__project-img {
    opacity: 0.15;
  }
}

.s-panels__project-intro {
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
  transition: opacity 0.3s;
}
.s-panels__project-intro:hover + .s-panels__project-figure .s-panels__project-img, .s-panels__project-intro:focus-within + .s-panels__project-figure .s-panels__project-img {
  opacity: 0.5;
  -webkit-filter: grayscale(50%);
          filter: grayscale(50%);
}
.s-panels__project-intro:hover .s-panels__text-component::before, .s-panels__project-intro:focus-within .s-panels__text-component::before {
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
}
.s-panels__project-intro:hover .s-panels__text-component::after, .s-panels__project-intro:focus-within .s-panels__text-component::after {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}

@media (orientation: landscape) {
  .s-panels__project-img {
    -webkit-transform: scaleX(4);
            transform: scaleX(4);
  }

  .s-panels__project-intro {
    width: 25%;
  }
}
@media (orientation: portrait) {
  .s-panels__project-img {
    -webkit-transform: scaleY(4);
            transform: scaleY(4);
  }

  .s-panels__project-intro {
    height: 25%;
  }
}
.s-panels__text-component {
  --icon-size: 20px;
  --icon-stroke-width: 1px;
  --icon-margin-top: 12px;
  position: relative;
}
.s-panels__text-component::before, .s-panels__text-component::after {
  content: "";
  position: absolute;
  background-color: hsl(var(--sn3-color-white-hsl));
  transition: -webkit-transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.s-panels__text-component::before {
  width: var(--icon-stroke-width);
  height: var(--icon-size);
  bottom: calc(-1 * var(--icon-size) - var(--icon-margin-top));
  left: calc(50% - var(--icon-stroke-width) / 2);
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}
.s-panels__text-component::after {
  width: var(--icon-size);
  height: var(--icon-stroke-width);
  bottom: calc(-0.5 * (var(--icon-size) + var(--icon-stroke-width)) - var(--icon-margin-top));
  left: calc(50% - var(--icon-size) / 2);
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}
@media (min-width: 64rem) {
  .s-panels__text-component {
    --icon-size: 24px;
    --icon-margin-top: 16px;
  }
}

.s-panels__project-control {
  color: transparent;
}
.s-panels__project-control:focus {
  outline: none;
}

.s-panels__project-title-wrapper {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
  background: linear-gradient(hsla(var(--sn3-color-black-hsl), 0), hsla(var(--sn3-color-black-hsl), 0.7));
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0s 0.4s;
}

.s-panels__project-title {
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
  transition: -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.s-panels__nav-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.s-panels__nav-link {
  color: hsl(var(--sn3-color-bg-hsl));
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding: var(--sn3-space-4xs) 0;
  line-height: 1;
}
.s-panels__nav-link::before, .s-panels__nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 100%;
  background-color: currentColor;
}
.s-panels__nav-link::before {
  opacity: 0.15;
}
.s-panels__nav-link::after {
  -webkit-transform-origin: right center;
          transform-origin: right center;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.s-panels__nav-link:hover::after {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
  -webkit-transform-origin: left center;
          transform-origin: left center;
}

.s-panels__social-link {
  color: hsl(var(--sn3-color-bg-hsl));
  text-decoration: none;
  opacity: 1;
  transition: 0.2s;
}
.s-panels__social-link:hover {
  opacity: 0.65;
}

.s-panels__project-content {
  position: relative;
  z-index: 2;
}

.s-panels__overlay-layer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  z-index: 2;
  visibility: hidden;
  transition: 0.5s;
}

.s-panels__overlay-layer--visible {
  opacity: 1;
  visibility: visible;
  z-index: 3;
}

/* utility classes */
.sn3-bg-black {
  --sn3-bg-o: 1;
  background-color: hsla(var(--sn3-color-black-hsl), var(--sn3-bg-o, 1));
}

.sn3-color-contrast-medium {
  --sn3-color-o: 1;
  color: hsla(var(--sn3-color-contrast-medium-hsl), var(--sn3-color-o, 1));
}

.sn3-max-width-sm {
  max-width: 48rem;
}

.sn3-container {
  width: calc(100% - 2*var(--sn3-space-md));
  margin-left: auto;
  margin-right: auto;
}

.sn3-text-component :where(h1, h2, h3, h4) {
  line-height: var(--sn3-heading-line-height, 1.2);
  margin-top: calc(var(--sn3-space-md) * var(--sn3-space-multiplier, 1));
  margin-bottom: calc(var(--sn3-space-sm) * var(--sn3-space-multiplier, 1));
}

.sn3-text-component :where(p, blockquote, ul li, ol li) {
  line-height: var(--sn3-body-line-height, 1.4);
}

.sn3-text-component :where(ul, ol, p, blockquote, .sn3-text-component__block) {
  margin-bottom: calc(var(--sn3-space-sm) * var(--sn3-space-multiplier, 1));
}

.sn3-text-component :where(ul, ol) {
  padding-left: 1.25em;
}

.sn3-text-component ul :where(ul, ol), .sn3-text-component ol :where(ul, ol) {
  padding-left: 1em;
  margin-bottom: 0;
}

.sn3-text-component ul {
  list-style-type: disc;
}

.sn3-text-component ol {
  list-style-type: decimal;
}

.sn3-text-component img {
  display: block;
  margin: 0 auto;
}

.sn3-text-component figcaption {
  margin-top: calc(var(--sn3-space-xs) * var(--sn3-space-multiplier, 1));
  font-size: var(--sn3-text-sm);
  text-align: center;}

.sn3-text-component em {
  font-style: italic;
}

.sn3-text-component strong {
  font-weight: bold;
}

.sn3-text-component s {
  text-decoration: line-through;
}

.sn3-text-component u {
  text-decoration: underline;
}

.sn3-text-component mark {
  background-color: hsla(var(--sn3-color-accent-hsl), 0.2);
  color: inherit;
}

.sn3-text-component blockquote {
  padding-left: 1em;
  border-left: 4px solid hsl(var(--sn3-color-contrast-lower-hsl));
  font-style: italic;
}

.sn3-text-component hr {
  margin: calc(var(--sn3-space-md) * var(--sn3-space-multiplier, 1)) auto;
  background: hsl(var(--sn3-color-contrast-lower-hsl));
  height: 1px;
}

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

.sn3-text-component > *:last-child {
  margin-bottom: 0;
}

.sn3-text-component.sn3-line-height-xs {
  --sn3-heading-line-height: 1;
  --sn3-body-line-height: 1.1;
}

.sn3-text-component.sn3-line-height-sm {
  --sn3-heading-line-height: 1.1;
  --sn3-body-line-height: 1.2;
}

.sn3-text-component.sn3-line-height-md {
  --sn3-heading-line-height: 1.15;
  --sn3-body-line-height: 1.4;
}

.sn3-text-component.sn3-line-height-lg {
  --sn3-heading-line-height: 1.22;
  --sn3-body-line-height: 1.58;
}

.sn3-text-component.sn3-line-height-xl {
  --sn3-heading-line-height: 1.3;
  --sn3-body-line-height: 1.72;
}

.sn3-article {
  --sn3-heading-line-height: 1.22;
  --sn3-body-line-height: 1.66;
  --sn3-space-multiplier: 1.2;
}

.sn3-hide {
  display: none !important;
}

.sn3-padding-y-lg {
  padding-top: var(--sn3-space-lg);
  padding-bottom: var(--sn3-space-lg);
}

.sn3-bg {
  --sn3-bg-o: 1;
  background-color: hsla(var(--sn3-color-bg-hsl), var(--sn3-bg-o, 1));
}

.sn3-gap-xs {
  gap: var(--sn3-space-xs);
}

.sn3-flex-column {
  flex-direction: column;
}

.sn3-flex {
  display: flex;
}

.sn3-margin-top-auto {
  margin-top: auto;
}

.sn3-text-2xl {
  font-size: var(--sn3-text-2xl);
}

.sn3-gap-sm {
  gap: var(--sn3-space-sm);
}

.sn3-margin-bottom-md {
  margin-bottom: var(--sn3-space-md);
}

.sn3-height-100\% {
  height: 100%;
}

.sn3-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.sn3-grid > * {
  min-width: 0;
  grid-column-end: span 12;
}

.sn3-padding-bottom-md {
  padding-bottom: var(--sn3-space-md);
}

.sn3-padding-top-3xl {
  padding-top: var(--sn3-space-3xl);
}

.sn3-font-smooth {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sn3-bg-contrast-higher {
  --sn3-bg-o: 1;
  background-color: hsla(var(--sn3-color-contrast-higher-hsl), var(--sn3-bg-o, 1));
}

.sn3-text-shadow-md {
  text-shadow: 0 1px 2px rgba(#000, 0.1), 0 2px 4px rgba(#000, 0.2);
}

.sn3-color-white {
  --sn3-color-o: 1;
  color: hsla(var(--sn3-color-white-hsl), var(--sn3-color-o, 1));
}

.sn3-text-3xl {
  font-size: var(--sn3-text-3xl);
}

.sn3-text-center {
  text-align: center;
}

.sn3-max-width-md {
  max-width: 64rem;
}

.sn3-padding-top-xl {
  padding-top: var(--sn3-space-xl);
}

.sn3-padding-bottom-lg {
  padding-bottom: var(--sn3-space-lg);
}

.sn3-opacity-60\% {
  opacity: 0.6;
}

.sn3-color-inherit {
  color: inherit;
}

.sn3-text-shadow-lg {
  text-shadow: 0 1px 4px rgba(#000, 0.1), 0 2px 8px rgba(#000, 0.15), 0 4px 16px rgba(#000, 0.2);
}

.sn3-padding-x-md {
  padding-left: var(--sn3-space-md);
  padding-right: var(--sn3-space-md);
}

.sn3-bg-opacity-0 {
  --sn3-bg-o: 0;
}

@media(min-width: 48rem){
  .sn3-text-sm\@sm {
    font-size: var(--sn3-text-sm);
  }

  .sn3-justify-end\@sm {
    justify-content: flex-end;
  }

  .sn3-flex-row\@sm {
    flex-direction: row;
  }

  .sn3-text-3xl\@sm {
    font-size: var(--sn3-text-3xl);
  }

  .sn3-margin-top-auto\@sm {
    margin-top: auto;
  }

  .sn3-flex\@sm {
    display: flex;
  }

  .sn3-margin-bottom-0\@sm {
    margin-bottom: 0;
  }

  .sn3-padding-y-md\@sm {
    padding-top: var(--sn3-space-md);
    padding-bottom: var(--sn3-space-md);
  }

  .sn3-col-6\@sm {
    grid-column-end: span 6;
  }
}


.s-panels__nav-control {
  display:none;
}


.sn3-padding-bottom-lg {
  padding-bottom: 30%;
  }



  .sn3-color-white h1{color:#fff;}



  .s-panels__project-preview--selected .s-panels__project-title {
     
    width: 50%;
    }



.s-panels__project-preview--selected .s-panels__project-title-wrapper {
 
  position: relative;
  }


  .s-panels__project-preview--selected .s-panels__project-title-wrapper {
    position: relative;
    top: 20%;
}

.s-panels__project-preview--selected .s-panels__project-title-wrapper {
 
  z-index: 9999;
}


@media (max-width: 600px) {
  .s-panels__project-preview--selected .s-panels__project-title {
    width: 100%; /* Adjust this value as needed for mobile devices */
  }

  .sn3-max-width-md {
    
    margin-top: 10rem;
    }
}