/*
This file is used to contain all abstracts imports.
Files inside this folder can contain abstract settings,
helpers or functions. They have no direct output.
*/
/*
// Font-size / Line-height
$fs_lh-quote: calc(31.5rem/16)/1.4;
$fs_lh-quote-author: calc(16rem/16)/1.2;
$fs_lh-h5-form: 0.8125rem;
*/
/*
// Min-width in pixels
$xxxs  : 320px; pico 16   5vw
$xxs   : 360px; nano
$xs    : 375px; micro 20
$sm    : 390px; milli     6vw
$ms    : 412px; centi 24
$md    : 428px; deci
$ml    : 480px; deca 32   7vw
$lg    : 600px; hecto 40  8vw
$xl    : 768px; kilo 60
$xxl   : 992px; mega      10vw
$xxxl  : 1200px; giga     12vw
$xxx-xl: 1440px; tera     20vw
$xxx-xxl: 1921px; peta
$xxx-xxxl: 2561px; exa
*/
/*
This file is used to contain all abstracts imports.
Files inside this folder can contain abstract settings,
helpers or functions. They have no direct output.
*/
/*
@mixin auto-fill-col-50-8($r: 16px, $c: 16px, $mw: 8px) {
  display                : grid;
  grid-template-columns  : repeat(auto-fill, calc(50% - $mw));
  gap                    : $r $c;
  margin                 : auto;
}*/
/***
__base-dir
***/
html {
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-behavior: smooth;
  height: -webkit-fill-available;
}

html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: calc(var(--vh, 1vh) * 100);
  min-height: 100svh;
  min-height: -webkit-fill-available;
  background-color: #dedede;
}

*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
}

a {
  text-decoration: none;
}

menu,
ul {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

@media only screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
.opacity-0 {
  opacity: 0;
}

/**
 * Clear inner floats
 */
.clearfix::after {
  clear: both;
  content: "";
  display: table;
}

/**
 * Main content containers
 * 1. Make the container full-width with a maximum width
 * 2. Center it in the viewport
 * 3. Leave some space on the edges, especially valuable on small screens
 */
.container {
  /*max-width: $max-width; /* 1 */
  margin-left: auto; /* 2 */
  margin-right: auto; /* 2 */
  padding-left: 20px; /* 3 */
  padding-right: 20px; /* 3 */
  width: 100%; /* 1 */
}

/**
 * Hide text while making it readable for screen readers
 * 1. Needed in WebKit-based browsers because of an implementation bug;
 *    See: https://code.google.com/p/chromium/issues/detail?id=457146
 */
.hide-text {
  overflow: hidden;
  padding: 0; /* 1 */
  text-indent: 101%;
  white-space: nowrap;
}

/**
 * Hide element while making it readable for screen readers
 * Shamelessly borrowed from HTML5Boilerplate:
 * https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L119-L133
 */
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

#myInput {
  display: none;
}

.margin-auto {
  margin: 0 auto;
}

html {
  font: 1rem/1.5 sans-serif;
  /*letter-spacing: $ls-base;*/
}

body {
  font: 400 1rem "Lexend Deca", Tahoma, Arial, sans-serif;
  /*@media only screen and (min-width: $smallBreakpoint) {
    font-size: 15px;
  }

  @media only screen and (min-width: $largeBreakpoint) {
    font-size: $baseFontSize;
  }  */
}

nav {
  font: 500 1rem "Inconsolata", monospace;
  line-height: 20px;
}

.btn-nav-default {
  white-space: nowrap;
  color: #777;
}

.btn-logo-nav {
  font-size: 1rem;
  line-height: 16px;
  font-family: "Lexend Deca", Tahoma, Arial, sans-serif;
}

.btn-toc-panel {
  color: rgb(17, 17, 17);
  text-align: center;
  font-weight: 600;
  font-size: 0.9375rem;
  font-family: "Inconsolata", monospace;
}

.placeholder-field {
  line-height: 20px;
  font-size: 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Lexend Deca", Tahoma, Arial, sans-serif;
  line-height: 1.2;
}

h1,
.h1 {
  font-weight: 600;
  font-size: calc(2rem + 1vw);
  line-height: 1.005;
}
@media only screen and (min-width: 20rem) {
  h1,
  .h1 {
    font-size: calc(2.25rem + 1vw);
  }
}
@media only screen and (min-width: 22.5rem) {
  h1,
  .h1 {
    font-size: calc(2.5rem + 1vw);
  }
}
@media only screen and (min-width: 23.4375rem) {
  h1,
  .h1 {
    font-size: calc(2.625rem + 1vw);
  }
}
@media only screen and (min-width: 24.375rem) {
  h1,
  .h1 {
    font-size: calc(2.75rem + 1vw);
  }
}
@media only screen and (min-width: 25.75rem) {
  h1,
  .h1 {
    font-size: calc(2.875rem + 1vw);
  }
}
@media only screen and (min-width: 26.75rem) {
  h1,
  .h1 {
    font-size: calc(3rem + 1vw);
  }
}
@media only screen and (min-width: 37.5rem) {
  h1,
  .h1 {
    font-size: calc(3.375rem + 1vw);
  }
}
@media only screen and (min-width: 62rem) {
  h1,
  .h1 {
    font-size: calc(3.75rem + 1vw);
  }
}
@media only screen and (min-width: 75rem) {
  h1,
  .h1 {
    font-size: calc(4.25rem + 1vw);
  }
}
@media only screen and (min-width: 90rem) {
  h1,
  .h1 {
    font-size: calc(4.75rem + 1vw);
  }
}

.h1-hero {
  font-weight: 600;
  font-size: calc(1.625rem + 1vw);
  line-height: 1.105;
  letter-spacing: -0.2px;
}
@media only screen and (min-width: 20rem) {
  .h1-hero {
    font-size: calc(1.875rem + 1vw);
  }
}
@media only screen and (min-width: 22.5rem) {
  .h1-hero {
    font-size: calc(1.9375rem + 1vw);
  }
}
@media only screen and (min-width: 23.4375rem) {
  .h1-hero {
    font-size: calc(2rem + 1vw);
  }
}
@media only screen and (min-width: 24.375rem) {
  .h1-hero {
    font-size: calc(2.0625rem + 1vw);
  }
}
@media only screen and (min-width: 25.75rem) {
  .h1-hero {
    font-size: calc(2.125rem + 1vw);
  }
}
@media only screen and (min-width: 26.75rem) {
  .h1-hero {
    font-size: calc(2.1875rem + 1vw);
  }
}
@media only screen and (min-width: 37.5rem) {
  .h1-hero {
    font-size: calc(2.4375rem + 1vw);
  }
}
@media only screen and (min-width: 62rem) {
  .h1-hero {
    font-size: calc(2.625rem + 1vw);
  }
}
@media only screen and (min-width: 75rem) {
  .h1-hero {
    font-size: calc(2.75rem + 1vw);
  }
}
@media only screen and (min-width: 90rem) {
  .h1-hero {
    font-size: calc(3.25rem + 1vw);
  }
}

.h1-hero-subheader {
  font-size: 0.5em;
}

h2,
.h2 {
  font-size: calc(1.25rem + 1vw);
  line-height: 1.45;
}
@media only screen and (min-width: 20rem) {
  h2,
  .h2 {
    font-size: calc(1.375rem + 1vw);
  }
}
@media only screen and (min-width: 22.5rem) {
  h2,
  .h2 {
    font-size: calc(1.5rem + 1vw);
  }
}
@media only screen and (min-width: 23.4375rem) {
  h2,
  .h2 {
    font-size: calc(1.625rem + 1vw);
  }
}
@media only screen and (min-width: 24.375rem) {
  h2,
  .h2 {
    font-size: calc(1.6875rem + 1vw);
  }
}
@media only screen and (min-width: 25.75rem) {
  h2,
  .h2 {
    font-size: calc(1.75rem + 1vw);
  }
}
@media only screen and (min-width: 26.75rem) {
  h2,
  .h2 {
    font-size: calc(1.8125rem + 1vw);
  }
}

.h2-tile {
  color: #fff;
  font-weight: 300;
  font-size: calc(0.71875rem + 0.5vw);
  line-height: 0.8;
  font-family: "Inconsolata", monospace;
  /*
  @media only screen and (min-width: $tera) {//and (hover: hover) {
    font-size: calc((12rem/16) + 0.2vw);
  }
  */
}
@media only screen and (min-width: 24.375rem) {
  .h2-tile {
    font-size: calc(0.78125rem + 0.4vw);
  }
}
@media only screen and (min-width: 30rem) {
  .h2-tile {
    font-size: calc(0.84375rem + 0.3vw);
  }
}
@media only screen and (min-width: 37.5rem) {
  .h2-tile {
    font-size: calc(0.90625rem + 0.2vw);
  }
}
@media only screen and (min-width: 48rem) {
  .h2-tile {
    font-size: calc(0.96875rem + 0.1vw);
  }
}
@media only screen and (min-width: 62rem) {
  .h2-tile {
    font-size: calc(1rem + 0.05vw);
  }
}
@media only screen and (min-width: 90rem) {
  .h2-tile {
    color: #000;
    font-weight: 400;
    font-size: calc(0.8125rem + 0.1vw);
  }
}

.h2-header {
  color: #fff;
  font-weight: 300;
  font-size: calc(0.71875rem + 0.5vw);
  line-height: 0.8;
  font-family: "Inconsolata", monospace;
  text-align: center;
  /*
  @media only screen and (min-width: $tera) {//and (hover: hover) {
    font-size: calc((12rem/16) + 0.2vw);
  }
  */
}
@media only screen and (min-width: 24.375rem) {
  .h2-header {
    font-size: calc(0.78125rem + 0.4vw);
  }
}
@media only screen and (min-width: 30rem) {
  .h2-header {
    font-size: calc(0.84375rem + 0.3vw);
  }
}
@media only screen and (min-width: 37.5rem) {
  .h2-header {
    font-size: calc(0.90625rem + 0.2vw);
  }
}
@media only screen and (min-width: 48rem) {
  .h2-header {
    font-size: calc(0.96875rem + 0.1vw);
  }
}
@media only screen and (min-width: 62rem) {
  .h2-header {
    font-size: calc(1rem + 0.05vw);
  }
}
@media only screen and (min-width: 90rem) {
  .h2-header {
    color: #fff;
    font-weight: 400;
    font-size: calc(0.8125rem + 0.1vw);
  }
}

.inactive {
  color: #aaa !important;
  opacity: 0.6;
}

.h1-tile {
  font-weight: 500;
  line-height: 1.25;
  font-size: calc(0.875rem + 0.5vw);
  font-family: "Lexend Deca", Tahoma, Arial, sans-serif;
  /*
  @media only screen and (min-width: $tera) {//and (hover: hover) {
    font-size: calc((14rem/16) + 0.2vw);
  }

  @media only screen and (min-width: $giga) and (hover: hover) {
    font-size: calc((15.5rem/16) + 0.15vw);
  }
  */
}
@media only screen and (min-width: 20rem) {
  .h1-tile {
    font-size: calc(0.90625rem + 0.5vw);
  }
}
@media only screen and (min-width: 22.5rem) {
  .h1-tile {
    font-size: calc(0.9375rem + 0.5vw);
  }
}
@media only screen and (min-width: 24.375rem) {
  .h1-tile {
    font-size: calc(0.96875rem + 0.5vw);
  }
}
@media only screen and (min-width: 26.75rem) {
  .h1-tile {
    font-size: calc(1rem + 0.5vw);
  }
}
@media only screen and (min-width: 30rem) {
  .h1-tile {
    font-size: calc(1.03125rem + 0.5vw);
  }
}
@media only screen and (min-width: 37.5rem) {
  .h1-tile {
    font-size: calc(1.0625rem + 0.4vw);
  }
}
@media only screen and (min-width: 48rem) {
  .h1-tile {
    font-size: calc(1.09375rem + 0.3vw);
  }
}
@media only screen and (min-width: 62rem) {
  .h1-tile {
    font-size: calc(1.125rem + 0.2vw);
  }
}
@media only screen and (min-width: 75rem) {
  .h1-tile {
    font-size: calc(1.15625rem + 0.1vw);
  }
}
@media only screen and (min-width: 90rem) {
  .h1-tile {
    font-size: calc(1.1875rem + 0.05vw);
  }
}
@media only screen and (min-width: 90rem) {
  .h1-tile {
    font-size: calc(1.0625rem + 0.1vw);
  }
}

.h1-header {
  color: #fff;
  font-weight: 500;
  line-height: 1.25;
  font-size: calc(0.875rem + 0.5vw);
  font-family: "Lexend Deca", Tahoma, Arial, sans-serif;
  text-align: center;
  /*
  @media only screen and (min-width: $tera) {//and (hover: hover) {
    font-size: calc((14rem/16) + 0.2vw);
  }

  @media only screen and (min-width: $giga) and (hover: hover) {
    font-size: calc((15.5rem/16) + 0.15vw);
  }
  */
}
@media only screen and (min-width: 20rem) {
  .h1-header {
    font-size: calc(0.90625rem + 0.5vw);
  }
}
@media only screen and (min-width: 22.5rem) {
  .h1-header {
    font-size: calc(0.9375rem + 0.5vw);
  }
}
@media only screen and (min-width: 24.375rem) {
  .h1-header {
    font-size: calc(0.96875rem + 0.5vw);
  }
}
@media only screen and (min-width: 26.75rem) {
  .h1-header {
    font-size: calc(1rem + 0.5vw);
  }
}
@media only screen and (min-width: 30rem) {
  .h1-header {
    font-size: calc(1.03125rem + 0.5vw);
  }
}
@media only screen and (min-width: 37.5rem) {
  .h1-header {
    font-size: calc(1.0625rem + 0.4vw);
  }
}
@media only screen and (min-width: 48rem) {
  .h1-header {
    font-size: calc(1.09375rem + 0.3vw);
  }
}
@media only screen and (min-width: 62rem) {
  .h1-header {
    font-size: calc(1.125rem + 0.2vw);
  }
}
@media only screen and (min-width: 75rem) {
  .h1-header {
    font-size: calc(1.15625rem + 0.1vw);
  }
}
@media only screen and (min-width: 90rem) {
  .h1-header {
    font-size: calc(1.1875rem + 0.05vw);
  }
}
@media only screen and (min-width: 90rem) {
  .h1-header {
    font-size: calc(1.0625rem + 0.1vw);
  }
}

.open-h1-tile {
  font-size: calc(0.9375rem + 0.2vw);
}

#work-icon {
  fill: #777;
}

.open-article-work-tiles {
  font-size: 0.875rem;
  line-height: 1.5;
}

@media only screen and (min-width: 90rem) {
  .open-h2-tile {
    color: #000;
    font-weight: 500;
  }
}

@media only screen and (min-width: 90rem) {
  .unopen-h2-tile {
    color: #000;
    font-weight: 500;
    font-size: 0.8125rem;
  }
}

@media only screen and (min-width: 90rem) {
  .open-h2-tile {
    visibility: hidden;
  }
}

@media only screen and (min-width: 90rem) {
  .unopen-h2-tile {
    color: #fff;
    font-weight: 500;
    font-size: 0.8125rem;
  }
}

@media only screen and (min-width: 90rem) {
  .unopen-h2-tile {
    visibility: hidden;
  }
}

.h1-tile {
  color: rgb(245, 245, 245);
}

.unopen-h1-tile {
  font-weight: 400;
  font-size: calc(0.6875rem + 0.2vw);
}

.h3-panel {
  color: #000;
  font-weight: 700;
  font-size: 1.125rem;
  font-family: "Inter", Tahoma, Arial, sans-serif;
}

/*
.h3-sections-panel {
  writing-mode: tb-rl;
  transform: rotate(180deg) translate(-50%, -100%);

  @media only screen and (min-width: $mega) {//and (hover: hover) {
    writing-mode: initial;
    transform: initial;
  }
}*/
.h3-toc-panel {
  font-weight: 600;
  font-size: 1rem;
  font-family: "Inter", Tahoma, Arial, sans-serif;
  color: #999;
}

.h4-toc-panel {
  font-weight: 400;
  font-size: 0.875rem;
  font-family: "Inter", Tahoma, Arial, sans-serif;
  color: #999;
}

.p-panel {
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.8;
}

.p-next-image {
  margin-top: 4rem;
}

.h4-panel {
  color: #000;
  font-weight: 700;
  font-size: 0.9375rem;
  font-family: "Inter", Tahoma, Arial, sans-serif;
}

.h5-panel {
  color: #444;
  font-weight: 400;
  font-size: 0.9375rem;
  font-family: "Inconsolata", monospace;
}

/*h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  margin: 0;
  margin-bottom: $pad;
  line-height: $lh-h;

  a {
    font-weight: inherit;
  }
}*/
.address-main-ftr, .copyright-main-ftr {
  font-weight: 300;
  font-size: 0.65625rem;
  font-style: normal;
  color: #666;
}

footer * {
  font-weight: 300;
  font-size: 0.8125rem;
  line-height: 1.2;
  font-family: "Inconsolata", monospace;
  color: #eee;
}

.btn-close-ftr {
  font-weight: 200;
}

.h1-about-ftr {
  font-weight: 300;
}

.p-about-ftr {
  font-weight: 300;
  font-size: 0.875rem;
}

.ul-about-ftr {
  font-weight: 300;
}

.address-site-ftr {
  font-size: 0.875rem;
  font-style: normal;
}

.copyright-site-ftr {
  font-size: 1.125rem;
}

em {
  font-style: italic;
}

strong {
  font-weight: bold;
}

.upperwork {
  text-transform: uppercase;
}

/*
This file is used to contain all layout imports.
Files inside this folder should contain all styles relating
to layouts.
*/
.show-footer, .standard-footer {
  position: fixed;
  bottom: 0;
  height: -moz-min-content;
  height: min-content;
  z-index: 9;
}
.standard-footer {
  position: static;
  z-index: initial;
}

.show-card-ftr, .hide-card-ftr {
  position: fixed;
  bottom: 0;
  transform: translate(0, 0);
  width: 100%;
  height: -moz-min-content;
  height: min-content;
  padding-bottom: 3rem;
  padding-left: 5vw;
  padding-right: 5vw;
  opacity: 0.98;
  background-image: linear-gradient(#222, #222);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  box-shadow: 0 0 16px 4px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  transition: all 0.4s;
}
@media only screen and (min-width: 22.5rem) {
  .show-card-ftr, .hide-card-ftr {
    padding-left: 5.5vw;
    padding-right: 5.5vw;
  }
}
@media only screen and (min-width: 24.375rem) {
  .show-card-ftr, .hide-card-ftr {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media only screen and (min-width: 30rem) {
  .show-card-ftr, .hide-card-ftr {
    padding-left: 6.5vw;
    padding-right: 6.5vw;
  }
}
@media only screen and (min-width: 37.5rem) {
  .show-card-ftr, .hide-card-ftr {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media only screen and (min-width: 48rem) {
  .show-card-ftr, .hide-card-ftr {
    padding-left: 5vw;
    padding-right: 5vw;
  }
}
@media only screen and (min-width: 62rem) {
  .show-card-ftr, .hide-card-ftr {
    padding-left: 6.5vw;
    padding-right: 6.5vw;
  }
}
@media only screen and (min-width: 75rem) {
  .show-card-ftr, .hide-card-ftr {
    padding-left: 8vw;
    padding-right: 8vw;
  }
}
@media only screen and (min-width: 90rem) {
  .show-card-ftr, .hide-card-ftr {
    padding-left: 16vw;
    padding-right: 16vw;
  }
}
@media only screen and (min-width: 120.0625rem) {
  .show-card-ftr, .hide-card-ftr {
    padding-left: 16vw;
    padding-right: 16vw;
  }
}
@media only screen and (min-width: 62rem) {
  .show-card-ftr, .hide-card-ftr {
    padding-left: 4vw;
    padding-right: 4vw;
  }
}
@media only screen and (min-width: 48rem) {
  .show-card-ftr, .hide-card-ftr {
    flex-direction: row;
  }
}
@media only screen and (min-width: 90rem) {
  .show-card-ftr, .hide-card-ftr {
    flex-direction: column;
    right: 0;
    border-top: initial;
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    flex: 1 1 auto;
    width: 24ch;
    height: calc(var(--vh, 1vh) * 100);
    height: 100svh;
    padding: 4rem 1.25rem 3rem 2rem;
    box-shadow: initial;
  }
}

.hide-card-ftr {
  opacity: 0.8;
  bottom: -440px;
  transition: all 0.4s;
}
@media only screen and (min-width: 48rem) {
  .hide-card-ftr {
    bottom: -240px;
  }
}
@media only screen and (min-width: 90rem) {
  .hide-card-ftr {
    opacity: 1;
    bottom: 0;
    right: -24ch;
  }
}

.about-ftr {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 4rem 0 0 0;
}
@media only screen and (min-width: 90rem) {
  .about-ftr {
    padding: 0;
  }
}

@media only screen and (min-width: 90rem) {
  .pad-about-ftr {
    padding-left: 4vw;
  }
}

.h1-about-ftr {
  height: 24px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
@media only screen and (min-width: 90rem) {
  .h1-about-ftr {
    height: 32px;
    margin: 8px 0;
  }
}

.p-about-ftr {
  margin: 1.5rem 0;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.ul-contact-about-ftr {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 10%;
  flex-wrap: wrap;
}

.site-ftr {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 4rem 0 0 0;
}

@media only screen and (min-width: 90rem) {
  .pad-site-ftr {
    padding-right: 4vw;
  }
}

.address-site-ftr {
  cursor: default;
  position: relative;
  margin: 1.25rem 0;
  margin-right: -12px;
  height: 2rem;
  padding: 0 12px 0 12px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.address-site-ftr:hover {
  border: 1px dashed rgba(204, 204, 204, 0.2);
  border-radius: 4px;
}

.icon-link-svg {
  display: none;
}

.address-site-ftr::before {
  opacity: 0;
  transition: all 0.2s;
}

.address-site-ftr:hover::before {
  content: attr(data-text-hover);
  position: absolute;
  top: 100%;
  margin-top: 12px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 4px;
  width: auto;
  height: -moz-min-content;
  height: min-content;
  padding: 6px;
  color: #111;
  background-color: #eee;
  text-align: center;
  white-space: nowrap;
  opacity: 1;
}

.address-site-ftr::after {
  opacity: 0;
  transition: all 0.2s;
}

.address-site-ftr:hover::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  margin-top: -5px;
  border: 10px solid #eee;
  border-color: transparent transparent #eee transparent;
  opacity: 1;
}

.container-logo-ftr {
  width: 24px;
  height: 24px;
}

.copyright-site-ftr {
  display: inline-block;
  height: 24px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.grid-all {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: min-content;
  gap: 0 12px;
  margin: 0 auto;
}

header {
  position: absolute;
  /*
  @media only screen and (min-width: $tera) {//and (hover: hover) {
    position: fixed;
    top: 0;
    left: 0;
    width: auto;
    height: calc(vh(100) - 96px);
  }*/
}

@media (hover: hover) {
  nav a:hover {
    color: #777777;
    /*
    transform: translate(0, .2px);
    text-decoration: line-through;
    font-weight: 400;
    filter: blur(.8px) drop-shadow(0 0 8px rgba(32, 32, 32, .7));
    transform: scale(1.08);
    */
  }
}

nav a:active {
  color: #aaaaaa;
  /*
    font-weight: 700;
    filter: blur(1px) drop-shadow(0 0 12px rgba(85, 85, 85, .5));
  */
}

.layout-nav-default {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
}
@media only screen and (min-width: 90rem) {
  .layout-nav-default {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
  }
}

.show-nav-default, .hide-nav-default {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 4px;
  background-color: #dedede;
  z-index: 7;
  transform: translate(0, 0);
  transition: all 0.3s;
}
@media only screen and (min-width: 62rem) {
  .show-nav-default, .hide-nav-default {
    padding-left: 1vw;
    padding-right: 1vw;
  }
}
@media only screen and (min-width: 90rem) {
  .show-nav-default, .hide-nav-default {
    left: 0;
    padding: 48px 0;
    width: initial;
    height: 100%;
    padding-left: max(4px, 2.5vw - 24px);
    padding-right: max(4px, 2.5vw - 24px);
    background-color: initial;
  }
}
@media only screen and (min-width: 90rem) and (min-width: 22.5rem) {
  .show-nav-default, .hide-nav-default {
    padding-left: max(4px, 2.75vw - 24px);
    padding-right: max(4px, 2.75vw - 24px);
  }
}
@media only screen and (min-width: 90rem) and (min-width: 24.375rem) {
  .show-nav-default, .hide-nav-default {
    padding-left: max(4px, 3vw - 24px);
    padding-right: max(4px, 3vw - 24px);
  }
}
@media only screen and (min-width: 90rem) and (min-width: 30rem) {
  .show-nav-default, .hide-nav-default {
    padding-left: max(4px, 3.25vw - 24px);
    padding-right: max(4px, 3.25vw - 24px);
  }
}
@media only screen and (min-width: 90rem) and (min-width: 37.5rem) {
  .show-nav-default, .hide-nav-default {
    padding-left: max(4px, 3vw - 24px);
    padding-right: max(4px, 3vw - 24px);
  }
}
@media only screen and (min-width: 90rem) and (min-width: 48rem) {
  .show-nav-default, .hide-nav-default {
    padding-left: max(4px, 2.5vw - 24px);
    padding-right: max(4px, 2.5vw - 24px);
  }
}
@media only screen and (min-width: 90rem) and (min-width: 62rem) {
  .show-nav-default, .hide-nav-default {
    padding-left: max(4px, 3.25vw - 24px);
    padding-right: max(4px, 3.25vw - 24px);
  }
}
@media only screen and (min-width: 90rem) and (min-width: 75rem) {
  .show-nav-default, .hide-nav-default {
    padding-left: max(4px, 4vw - 24px);
    padding-right: max(4px, 4vw - 24px);
  }
}
@media only screen and (min-width: 90rem) and (min-width: 90rem) {
  .show-nav-default, .hide-nav-default {
    padding-left: max(4px, 4.75vw - 24px);
    padding-right: max(4px, 4.75vw - 24px);
  }
}
@media only screen and (min-width: 90rem) and (min-width: 120.0625rem) {
  .show-nav-default, .hide-nav-default {
    padding-left: max(4px, 6vw - 24px);
    padding-right: max(4px, 6vw - 24px);
  }
}

.hide-nav-default {
  transform: translate(0, -56px);
  transition: all 0.3s;
}
@media only screen and (min-width: 90rem) {
  .hide-nav-default {
    transform: translate(-254px, 0);
  }
}

.wrap-nav-border {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
@media only screen and (min-width: 90rem) {
  .wrap-nav-border {
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }
}

.nav-border {
  width: calc(100% - 8px);
  border-bottom: 1px solid rgba(119, 119, 119, 0.15);
  position: absolute;
  top: 56px;
}
@media only screen and (min-width: 62rem) and (hover: none) {
  .nav-border {
    width: 98vw;
  }
}
@media only screen and (min-width: 90rem) {
  .nav-border {
    margin-left: max(4px, 2.5vw - 24px);
    width: -moz-min-content;
    width: min-content;
    height: 100%;
    position: relative;
    top: 0;
    display: none;
  }
}
@media only screen and (min-width: 90rem) and (min-width: 22.5rem) {
  .nav-border {
    margin-left: max(4px, 2.75vw - 24px);
  }
}
@media only screen and (min-width: 90rem) and (min-width: 24.375rem) {
  .nav-border {
    margin-left: max(4px, 3vw - 24px);
  }
}
@media only screen and (min-width: 90rem) and (min-width: 30rem) {
  .nav-border {
    margin-left: max(4px, 3.25vw - 24px);
  }
}
@media only screen and (min-width: 90rem) and (min-width: 37.5rem) {
  .nav-border {
    margin-left: max(4px, 3vw - 24px);
  }
}
@media only screen and (min-width: 90rem) and (min-width: 48rem) {
  .nav-border {
    margin-left: max(4px, 2.5vw - 24px);
  }
}
@media only screen and (min-width: 90rem) and (min-width: 62rem) {
  .nav-border {
    margin-left: max(4px, 3.25vw - 24px);
  }
}
@media only screen and (min-width: 90rem) and (min-width: 75rem) {
  .nav-border {
    margin-left: max(4px, 4vw - 24px);
  }
}
@media only screen and (min-width: 90rem) and (min-width: 90rem) {
  .nav-border {
    margin-left: max(4px, 4.75vw - 24px);
  }
}
@media only screen and (min-width: 90rem) and (min-width: 120.0625rem) {
  .nav-border {
    margin-left: max(4px, 6vw - 24px);
  }
}

.li-logo-nav-default {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0;
}
@media only screen and (min-width: 90rem) {
  .li-logo-nav-default {
    height: -moz-min-content;
    height: min-content;
  }
}

.li-with-ul-nest-nav-default {
  flex-basis: 33.33%;
}
@media only screen and (min-width: 90rem) {
  .li-with-ul-nest-nav-default {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    flex: 0 0 33.33%;
  }
}

.ul-nested-nav-default {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
@media only screen and (min-width: 90rem) {
  .ul-nested-nav-default {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex-basis: 100%;
  }
}

.li-nested-nav-default {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.li-switch-nav-default {
  flex-shrink: 1;
}
@media only screen and (min-width: 90rem) {
  .li-switch-nav-default {
    height: -moz-min-content;
    height: min-content;
  }
}

/*
This file is used to contain all component imports.
Files inside this folder should contain all styles relating
to a reusable component.
*/
.btn-ftr, .btn-logo-ftr, .btn-toc-panel {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  justify-items: center;
  align-items: center;
  gap: 12px;
  border-radius: 24px;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (hover: hover) {
  .hover-parent:hover > * {
    margin-top: -6px;
    margin-bottom: 6px;
  }
}

.hover-parent > * {
  transition: all 0.2s;
}

.btn-nav-default {
  border-radius: 48px;
  width: 48px;
  height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  cursor: pointer;
}

.icon-page-svg {
  transition: all 0.2s;
}

.btn-logo-nav {
  width: 48px;
  height: 48px;
  padding: 12px;
}
@media only screen and (min-width: 90rem) {
  .btn-logo-nav {
    padding: 8px;
  }
}

.logo-svg {
  transition: all 0.2s;
}

.btn-switch-nav-default {
  margin-left: auto;
  width: 48px;
  height: 48px;
  padding: 8px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  visibility: hidden;
}

.switch-line {
  width: 32px;
  height: 10px;
  border-radius: 8px;
  background-color: #bbb;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}

.switch-handle {
  box-sizing: content-box;
  width: 24px;
  height: 24px;
  border: 12px solid rgba(0, 0, 0, 0);
  border-radius: 24px;
  outline: rgba(119, 119, 119, 0.1) solid 2px;
  outline-offset: -12px;
  background-image: radial-gradient(circle at center, #dedede 70%, white 80%);
  background-clip: padding-box;
  position: absolute;
  left: -24px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
@media only screen and (min-width: 90rem) {
  .switch-handle {
    left: -12px;
  }
}

.btn-toc-panel {
  text-align: left;
  justify-content: flex-start;
  margin-left: -1.5rem;
}

.btn-ftr, .btn-logo-ftr {
  width: 48px;
  height: 48px;
  padding: 12px;
  margin: -12px -12px -12px -12px;
}

.icon-social-svg {
  transition: all 0.2s;
}

.btn-close-ftr {
  cursor: pointer;
  background-color: transparent;
  border: initial;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
  height: 48px;
  padding: 0 1.5rem;
}
@media only screen and (min-width: 90rem) {
  .btn-close-ftr {
    left: 0.5rem;
    transform: initial;
  }
}

@media only screen and (min-width: 90rem) {
  .chevron-down-ftr {
    transform: rotate(-90deg);
  }
}

.btn-logo-ftr {
  padding: 12px;
}

/*
// Make button sticky
.sticky-btn {
  position    : relative;
  position    : -webkit-sticky;
  position    : sticky;
  // either...
  top: 0;
  bottom      : 128px;
  //
  align-self  : start;
}*/
/*
.btn-to-top {
  @extend %btn;
  border-radius: $radius-tile;
  border: 1px solid #222;
  width: 100%;
  padding-top   : calc(8rem/16);
  padding-bottom: calc(8rem/16);
  padding-left  : calc(16rem/16);
  padding-right : calc(16rem/16);
}

.btn-prev-next {
  position: relative;
  @extend %btn;
  border-radius: $radius-tile;
  border: 1px solid #222;
  width: 100%;
  padding-top   : calc(8rem/16);
  padding-bottom: calc(8rem/16);
  padding-left  : calc(16rem/16);
  padding-right : calc(16rem/16);
}

.btn-next-work {  

  @media only screen and (min-width: $deca) {
    order: 2;
  }
}

.icon-next {
  position: absolute;
  right: calc(16rem/16);
}

.btn-prev-work {  

  @media only screen and (min-width: $deca) {
    order: 1;
  }
}

.icon-prev {
  position: absolute;
  left: calc(16rem/16);
}

.btn-to-top-sect {
  margin-top: 2rem;
}
*/
.line-tile-proj {
  position: relative;
  position: sticky;
  bottom: 0;
  height: 2px;
  display: none;
}

.btn-tile:active .line-tile-proj {
  transition: transform 0.12s;
}
@media only screen and (min-width: 62rem) and (hover: hover) {
  .btn-tile:active .line-tile-proj {
    transform: translate(0, 20px);
  }
}

.cmyk-gradient {
  background-image: linear-gradient(135deg, #0ff 0.1%, #f0f, #ff0);
}

.rgb-gradient {
  background-image: linear-gradient(135deg, #f00 0.1%, #0f0, #00f);
}

.unopen-gradient {
  display: none;
}

.pg-indicator {
  position: absolute;
  bottom: 0;
  border-radius: 1px;
  width: 32px;
  height: 4px;
}
@media only screen and (min-width: 90rem) {
  .pg-indicator {
    width: 28px;
    bottom: -4px;
  }
}

.pg-indicator-2 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 28px;
  display: none;
}
@media only screen and (min-width: 90rem) {
  .pg-indicator-2 {
    background-color: #777;
  }
}

.tile-indicator {
  border-radius: 1px;
  width: 8px;
  height: 100%;
  background-color: #ccc;
}
@media only screen and (min-width: 90rem) {
  .tile-indicator {
    display: none;
  }
}

.tile-indicator-1 {
  background-color: #777;
}

.article-panel {
  display: none;
}

.open-article-panel {
  display: block;
}
@media only screen and (min-width: 62rem) {
  .open-article-panel {
    display: grid;
    grid-template-columns: 1fr minmax(200px, 20%);
  }
}
.btn-header-left, .btn-header-right, .btn-header-mid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 0.75rem;
  height: 96px;
  background-color: #222;
  position: relative;
  position: sticky;
  top: 120px;
  grid-column: 1/3;
  order: -1;
  transition: transform 0.2s;
  box-shadow: 0 5px 20px 0 hsla(0, 0%, 0%, 0.15);
  z-index: 6;
}
@media only screen and (min-width: 90rem) {
  .btn-header-left, .btn-header-right, .btn-header-mid {
    top: 114px;
    z-index: 1;
    grid-column: 1/3;
    order: -1;
    border-top: initial;
    border-radius: 0 4px 4px 4px;
  }
}

.btn-header-mid {
  /*@include flex($fd: column);
  gap: 0.75rem;
  height: calc((vh(100)/1.5));

  transition: transform $hover-s;
  background-color: #222;
  */
}
@media only screen and (min-width: 90rem) {
  .btn-header-mid {
    /*
    height: 96px;
    position    : relative;
    position    : -webkit-sticky;
    position: sticky;  
    top: $top-btn-header-desktop;//57px;//105px;//$height-nav-top;//8px;
    z-index: 1;
    grid-column: 1/3;
    order: -1;
    //margin: 0 4vw;*/
    border-radius: 4px;
  }
}

.btn-header-right {
  /*
  @include flex($fd: column);
  gap: 0.75rem;
  height: calc((vh(100)/1.5));

  transition: transform $hover-s;
  background-color: #222;
  */
}
@media only screen and (min-width: 90rem) {
  .btn-header-right {
    /*
    height: 96px;
    position    : relative;
    position    : -webkit-sticky;
    position: sticky;  
    top: $top-btn-header-desktop;//57px;//105px;//$height-nav-top;//8px;
    z-index: 1;
    grid-column: 1/3;
    order: -1;
    //margin: 0 4vw;
    */
    border-radius: 4px 0 4px 4px;
  }
}

.btn-header-left:hover,
.btn-header-mid:hover,
.btn-header-right:hover {
  filter: brightness(122%);
}
.h1-header {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  transition: transform 0.2s;
}

.placeholder-chevron {
  width: 16px;
  height: 16px;
}
@media only screen and (min-width: 90rem) {
  .placeholder-chevron {
    display: none;
  }
}

.btn-header-left:hover > .h1-header,
.btn-header-mid:hover > .h1-header,
.btn-header-right:hover > .h1-header {
  transform: translate(0, -4px);
}

.filter-brightness {
  filter: brightness(122%);
}

.h1-header-hover {
  transform: translate(0, -4px);
}

.chevron-up-tile {
  top: 50%;
  right: 5vw;
}
@media only screen and (min-width: 20rem) {
  .chevron-up-tile {
    right: 5.5vw;
  }
}
@media only screen and (min-width: 22.5rem) {
  .chevron-up-tile {
    right: 6vw;
  }
}
@media only screen and (min-width: 24.375rem) {
  .chevron-up-tile {
    right: 8vw;
  }
}
@media only screen and (min-width: 26.75rem) {
  .chevron-up-tile {
    right: 10vw;
  }
}
@media only screen and (min-width: 30rem) {
  .chevron-up-tile {
    right: 9vw;
  }
}
@media only screen and (min-width: 37.5rem) {
  .chevron-up-tile {
    right: 8vw;
  }
}
@media only screen and (min-width: 48rem) {
  .chevron-up-tile {
    right: 7vw;
  }
}
@media only screen and (min-width: 62rem) and (hover: none) {
  .chevron-up-tile {
    right: 6vw;
  }
}
@media only screen and (min-width: 90rem) {
  .chevron-up-tile {
    display: none;
    top: 50%;
    right: 3vw;
  }
}

/*
.open-btn-tile {
  height: 96px;
  position    : relative;
  position    : -webkit-sticky;
  position: sticky;  
  top: $height-nav-top;//8px;
  z-index: 1;

  @media only screen and (min-width: $hecto) {
    top: $height-nav-top;
  }

  @media only screen and (min-width: $tera) {//and (hover: hover) {  
    top: 0;
    margin-left: 4vw;
    margin-right: 4vw;
  }
}*/
.sect-panel {
  border-top: 1px solid rgba(119, 119, 119, 0.3);
  margin-left: 5vw;
  margin-right: 5vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding-top: 1.5rem;
  padding-right: 8vw;
}
@media only screen and (min-width: 22.5rem) {
  .sect-panel {
    margin-left: 5.5vw;
    margin-right: 5.5vw;
  }
}
@media only screen and (min-width: 24.375rem) {
  .sect-panel {
    margin-left: 6vw;
    margin-right: 6vw;
  }
}
@media only screen and (min-width: 30rem) {
  .sect-panel {
    margin-left: 6.5vw;
    margin-right: 6.5vw;
  }
}
@media only screen and (min-width: 37.5rem) {
  .sect-panel {
    margin-left: 6vw;
    margin-right: 6vw;
  }
}
@media only screen and (min-width: 48rem) {
  .sect-panel {
    margin-left: 5vw;
    margin-right: 5vw;
  }
}
@media only screen and (min-width: 62rem) {
  .sect-panel {
    margin-left: 6.5vw;
    margin-right: 6.5vw;
  }
}
@media only screen and (min-width: 75rem) {
  .sect-panel {
    margin-left: 8vw;
    margin-right: 8vw;
  }
}
@media only screen and (min-width: 90rem) {
  .sect-panel {
    margin-left: 16vw;
    margin-right: 16vw;
  }
}
@media only screen and (min-width: 120.0625rem) {
  .sect-panel {
    margin-left: 16vw;
    margin-right: 16vw;
  }
}
@media only screen and (min-width: 62rem) {
  .sect-panel {
    margin-left: 4vw;
    margin-right: 2vw;
    grid-column: 1/2;
    order: 1;
    padding-right: initial;
  }
}

.li-toc-panel {
  display: flex;
}

.h3-panel {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  padding-top: calc(164px + 0.75rem);
  margin-top: calc(-1 * (152px + 0.75rem));
}
@media only screen and (min-width: 90rem) {
  .h3-panel {
    padding-top: calc(108px + 0.75rem);
    margin-top: calc(-1 * (96px + 0.75rem));
  }
}

.icon-chevron-up-h3-panel {
  display: none;
}

.wrap-content-sect-panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 4rem;
}

.close-wrap-content-sect-panel {
  display: none;
}

.p-panel {
  width: min(70ch, 100%);
  margin-bottom: 1.25rem;
}

@media only screen and (min-width: 62rem) {
  .overview-panel {
    border-top: initial;
    order: -1;
  }
}

.h4-panel {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  padding-top: calc(164px + 0.75rem);
  margin-top: calc(-1 * (152px + 0.75rem));
}
@media only screen and (min-width: 90rem) {
  .h4-panel {
    padding-top: calc(108px + 0.75rem);
    margin-top: calc(-1 * (96px + 0.75rem));
  }
}

.h5-panel {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
}

.container-img-flex {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.img-full-width {
  margin: 24px 0;
  margin-bottom: calc(var(--vh, 1vh) * 10);
  margin-bottom: 10svh;
}

.img-size-2-col-max {
  flex: 1 0 auto;
  padding: clamp(24px, 10vw, 80px);
  margin-bottom: calc(var(--vh, 1vh) * 10);
  margin-bottom: 10svh;
}
@media only screen and (min-width: 37.5rem) {
  .img-size-2-col-max {
    width: min(50%, 528px);
  }
}
@media only screen and (min-width: 90rem) {
  .img-size-2-col-max {
    width: max(50%, 212px);
    padding: clamp(24px, 4vw, 80px);
  }
}

.img-size-4-col-max {
  flex: 1 0 auto;
  padding: clamp(24px, 10vw, 80px);
  margin-bottom: calc(var(--vh, 1vh) * 10);
  margin-bottom: 10svh;
}
@media only screen and (min-width: 37.5rem) {
  .img-size-4-col-max {
    width: min(25%, 528px);
  }
}
@media only screen and (min-width: 90rem) {
  .img-size-4-col-max {
    width: max(25%, 212px);
    padding: clamp(24px, 4vw, 80px);
  }
}

.img-column-container {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.img-row-container {
  width: min(70ch, 100%);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

/*
.wrap-btn-next-prev-to-top-work {
  align-self: center;
  margin: 2rem 0 0;
  width: 100%;
  max-width: 440px;
  @include flex($fd: column, $ai: stretch);
  gap: 12px;
}

.wrap-btn-next-prev-work {
  margin: 0;
  @include flex($fd: column, $jc: space-between);
  gap: 12px;

  @media only screen and (min-width: $deca) {
    @include flex($jc: space-between);
  }
}
*/
#prototype-finvo {
  margin-bottom: 1.25rem;
}
@media only screen and (min-width: 37.5rem) {
  #prototype-finvo {
    width: 480px;
  }
}
@media only screen and (min-width: 48rem) {
  #prototype-finvo {
    width: 720px;
  }
}

.sect-toc-panel {
  border-top: initial;
}
@media only screen and (min-width: 62rem) {
  .sect-toc-panel {
    grid-column: 2/3;
    justify-self: start;
    align-self: start;
    margin-left: 2vw;
    position: relative;
    position: sticky;
    top: 216px;
  }
}
@media only screen and (min-width: 90rem) {
  .sect-toc-panel {
    top: 208px;
  }
}

.menu-toc-panel {
  border-radius: 8px;
  border: 1px solid rgba(119, 119, 119, 0.3);
  padding: 1rem 1.5rem;
}
@media only screen and (min-width: 62rem) {
  .menu-toc-panel {
    border-radius: 0;
    border-width: 0 0 0 1px;
  }
}

a:active {
  filter: brightness(-500%);
}

.li-work-tile {
  flex-basis: 33.33%;
  height: auto;
}

.open-li-work-tile {
  display: none;
}
@media only screen and (min-width: 90rem) {
  .open-li-work-tile {
    display: list-item;
  }
}

.unopen-li-work-tile {
  flex-basis: 50%;
  height: auto;
}
@media only screen and (min-width: 90rem) {
  .unopen-li-work-tile {
    flex-basis: 33.33%;
    height: auto;
  }
}

/*
.li-work-tile-left {

  @media only screen and (min-width: $tera) {//and (hover: hover) {
     order: 1;
     flex-basis: $flex-basis-unopen-li-work; 
     top: 0;
     position: relative;
     top: -48px;
     height: 144px;
  }  
}

.li-work-tile-right {

  @media only screen and (min-width: $tera) {//and (hover: hover) {
    order: 3;
    flex-basis: $flex-basis-unopen-li-work;
    top: 0;
    position: relative;
    top: -48px;
    height: 144px;
  }  
}
*/
.btn-tile {
  display: block;
  height: calc((var(--vh, 1vh) * 100) / 1.5);
  height: 66.6666666667svh;
  transition: transform 0.2s;
}
@media only screen and (min-width: 90rem) {
  .btn-tile {
    height: calc((var(--vh, 1vh) * 100) - 3rem - 3rem);
    height: calc(100svh - 3rem - 3rem);
  }
}

@media only screen and (min-width: 90rem) {
  .btn-tile:hover .txt-h2-tile {
    position: absolute;
    color: #eee;
  }
}

@media only screen and (min-width: 90rem) {
  .btn-tile:hover .open-h2-tile > .txt-h2-tile,
  .btn-tile:hover .unopen-h2-tile > .txt-h2-tile {
    margin-top: -6px;
    margin-bottom: 6px;
    filter: brightness(112%);
    position: initial;
    color: #555;
  }
}

@media only screen and (min-width: 90rem) {
  .btn-tile:hover .h1-tile {
    margin-top: -48px;
    margin-bottom: 48px;
  }
}

@media only screen and (min-width: 90rem) {
  .btn-tile:hover .open-h1-tile,
  .btn-tile:hover .unopen-h1-tile {
    margin-top: -6px;
    margin-bottom: 6px;
    filter: brightness(112%);
  }
}

.btn-tile:active {
  transform: translate(20px, 0);
  transition: transform 0.2s;
}
@media only screen and (min-width: 90rem) {
  .btn-tile:active {
    transform: translate(0, 8px);
  }
}

.btn-bg-cortland {
  background-image: linear-gradient(hsla(0, 0%, 0%, 0.65), hsla(0, 0%, 0%, 0.65)), url("../img/cortland/ribeye-5.jpg");
  background-position: 46% 48%;
  background-size: cover;
  transition: all 0.2s;
}
@media only screen and (min-width: 90rem) {
  .btn-bg-cortland {
    background-image: none;
  }
}

.btn-bg-cortland:hover {
  filter: brightness(122%);
}
.open-btn-cortland {
  display: none;
}
@media only screen and (min-width: 90rem) {
  .open-btn-cortland {
    display: flex;
    background-position: 46% 48%;
    background-size: cover;
    border-radius: 4px 4px 0 0;
    height: 72px;
    background-image: linear-gradient(hsla(0, 0%, 0%, 0.75), #222), url("../img/cortland/ribeye-5.jpg");
    transition: transform 0.2s;
  }
}

.open-btn-cortland:hover,
.open-btn-finvo:hover,
.open-btn-cfp:hover {
  opacity: initial;
  filter: brightness(122%);
}

.unopen-btn-cortland:hover,
.unopen-btn-finvo:hover,
.unopen-btn-cfp:hover {
  transform: initial;
}

.unopen-btn-cortland {
  height: 60px;
}
@media only screen and (min-width: 90rem) {
  .unopen-btn-cortland {
    background-image: linear-gradient(hsla(0, 0%, 0%, 0.65), hsla(0, 0%, 0%, 0.65)), url("../img/cortland/ribeye-5.jpg");
    background-position: 46% 48%;
    background-size: cover;
    height: 64px;
    border-radius: 4px;
    transition: all 0.2s;
  }
}

.btn-bg-finvo {
  background-image: linear-gradient(hsla(0, 0%, 0%, 0.65), hsla(0, 0%, 0%, 0.65)), url("../img/finvo/woman_holding_iphone_14.jpg");
  background-position: 49% 42%;
  background-size: cover;
  transition: all 0.2s;
}
@media only screen and (min-width: 90rem) {
  .btn-bg-finvo {
    background-image: none;
  }
}

.btn-bg-finvo:hover {
  filter: brightness(122%);
}
.open-btn-finvo {
  display: none;
}
@media only screen and (min-width: 90rem) {
  .open-btn-finvo {
    display: flex;
    background-position: 46% 48%;
    background-size: cover;
    border-radius: 4px 4px 0 0;
    height: 72px;
    background-image: linear-gradient(hsla(0, 0%, 0%, 0.75), #222), url("../img/finvo/woman_holding_iphone_14.jpg");
    transition: transform 0.2s;
  }
}

.unopen-btn-finvo {
  height: 60px;
}
@media only screen and (min-width: 90rem) {
  .unopen-btn-finvo {
    background-image: linear-gradient(hsla(0, 0%, 0%, 0.65), hsla(0, 0%, 0%, 0.65)), url("../img/finvo/woman_holding_iphone_14.jpg");
    background-position: 46% 48%;
    background-size: cover;
    height: 64px;
    border-radius: 4px;
    transition: all 0.2s;
  }
}

.btn-bg-cfp {
  background-image: linear-gradient(hsla(0, 0%, 0%, 0.65), hsla(0, 0%, 0%, 0.65)), url("../img/cfp/food-container.jpg");
  background-position: 46% 48%;
  background-size: cover;
  transition: all 0.2s;
}
@media only screen and (min-width: 90rem) {
  .btn-bg-cfp {
    background-image: none;
  }
}

.btn-bg-cfp:hover {
  filter: brightness(122%);
}
.open-btn-cfp {
  display: none;
}
@media only screen and (min-width: 90rem) {
  .open-btn-cfp {
    display: flex;
    background-position: 46% 48%;
    background-size: cover;
    border-radius: 4px 4px 0 0;
    height: 72px;
    background-image: linear-gradient(hsla(0, 0%, 0%, 0.75), #222), url("../img/cfp/food-container.jpg");
    transition: transform 0.2s;
  }
}

.unopen-btn-cfp {
  height: 60px;
}
@media only screen and (min-width: 90rem) {
  .unopen-btn-cfp {
    background-image: linear-gradient(hsla(0, 0%, 0%, 0.65), hsla(0, 0%, 0%, 0.65)), url("../img/cfp/food-container.jpg");
    background-position: 46% 48%;
    background-size: cover;
    height: 64px;
    border-radius: 4px;
    transition: all 0.2s;
  }
}

.btn-bg-how-write {
  background-image: linear-gradient(hsla(220, 10%, 10%, 0.9), hsla(220, 10%, 10%, 0.9)), url("../img/how_to_write_it/homepage-macbook_couch.jpg");
  background-position: 54% 82%;
  background-size: cover;
}
@media only screen and (min-width: 90rem) {
  .btn-bg-how-write {
    background-image: none;
  }
}

/*  
.open-btn-tile {
  height: 96px;
  position    : relative;
  position    : -webkit-sticky;
  position: sticky;  
  top: $height-nav-top;//8px;
  z-index: 1;

  @media only screen and (min-width: $hecto) {
    top: $height-nav-top;
  }

  @media only screen and (min-width: $tera) {//and (hover: hover) {  
    top: 0;
    height: 120px;
    //margin-left: 4vw;
    //margin-right: 4vw;    
    //background-color: rgba(0, 0, 255, 0.4);
  }
}

.open-btn-tile:active {

  @media only screen and (min-width: $tera) {//and (hover: hover) {
    transform: translate(0, 4px);
  }
}

.unopen-btn-tile {

  @media only screen and (min-width: $tera) {//and (hover: hover) {  
    top: 0;    
    height: 96px;
    position    : relative;
    position    : -webkit-sticky;
    position: sticky;
  }
}
*/
.unopen-btn-tile {
  height: 96px;
  position: relative;
  position: sticky;
  top: 56px;
  z-index: 1;
}
@media only screen and (min-width: 37.5rem) {
  .unopen-btn-tile {
    top: 56px;
  }
}
@media only screen and (min-width: 90rem) {
  .unopen-btn-tile {
    top: 0;
    height: 120px;
  }
}

@media only screen and (min-width: 90rem) {
  .unopen-btn-tile:active {
    transform: translate(0, 4px);
  }
}

.wrap-header-tile {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  height: 100%;
}
@media only screen and (min-width: 90rem) {
  .wrap-header-tile {
    position: relative;
  }
}

.open-wrap-header-tile {
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  background-image: linear-gradient(#222, #222);
}
@media only screen and (min-width: 90rem) {
  .open-wrap-header-tile {
    background-image: none;
  }
}

.h2-tile {
  flex: 0 0 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transition: transform 0.2s;
}
@media only screen and (min-width: 90rem) {
  .h2-tile {
    border-bottom: initial;
  }
}

/*
  .open-h2-tile {
    //justify-content: flex-start;
    //padding-bottom: 0.75rem;
    //@include paddings-left-right($paddings-lr-map);
    flex: 0 0 32px;


    @media only screen and (min-height: 600px) {
    }

    @media only screen and (min-width: $hecto) {
      //justify-content: center;
      flex: 0 0 40px;
    }

    @media only screen and (min-width: $tera) {//and (hover: hover) {
      flex: 0 0 48px;
      background-color: $color-bg;
    }
  }
  */
@media only screen and (min-width: 90rem) {
  .open-h2-tile {
    display: none;
  }
}

.unopen-h2-tile {
  display: none;
  font-size: 0.59375rem;
  line-height: 2;
}
.txt-h2-tile {
  transition: all 0.2s;
}

.h1-tile {
  position: relative;
  flex-grow: 1;
  height: 100%;
  white-space: nowrap;
  transition: margin 0.2s;
}
@media only screen and (min-width: 90rem) {
  .h1-tile {
    position: static;
    border-radius: 4px;
  }
}

@media only screen and (min-width: 90rem) {
  .h1-bg-cortland {
    background-image: linear-gradient(hsla(0, 0%, 0%, 0.65), hsla(0, 0%, 0%, 0.65)), url("../img/cortland/ribeye-5.jpg");
    background-position: 46% 48%;
    background-size: cover;
  }
}

@media only screen and (min-width: 90rem) {
  .h1-bg-cfp {
    background-image: linear-gradient(hsla(0, 0%, 0%, 0.65), hsla(0, 0%, 0%, 0.65)), url("../img/cfp/food-container.jpg");
    background-position: 50% 50%;
    background-size: cover;
  }
}

@media only screen and (min-width: 90rem) {
  .h1-bg-finvo {
    background-image: linear-gradient(hsla(0, 0%, 0%, 0.65), hsla(0, 0%, 0%, 0.65)), url("../img/finvo/woman_holding_iphone_14.jpg");
    background-position: 49% 42%;
    background-size: cover;
  }
}

@media only screen and (min-width: 90rem) {
  .h1-bg-how-write {
    background-image: linear-gradient(hsla(220, 10%, 10%, 0.9), hsla(220, 10%, 10%, 0.9)), url("../img/how_to_write_it/homepage-macbook_couch.jpg");
    background-position: 54% 68%;
    background-size: cover;
  }
}

@media only screen and (min-width: 90rem) {
  .open-h1-bg {
    display: none;
  }
}

@media only screen and (min-width: 90rem) {
  .unopen-h1-bg {
    background-image: initial;
  }
}

@media only screen and (min-width: 90rem) {
  .open-h1-tile {
    position: relative;
    background-image: linear-gradient(#222, #222);
    transition: all 0.2s;
  }
}

@media only screen and (min-width: 90rem) {
  .unopen-h1-tile {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-image: none;
    transition: all 0.2s;
  }
}

.txt-h1-tile {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.txt-h1-cfp {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

@media only screen and (min-width: 90rem) {
  .hide-txt-h1-tile {
    display: none;
  }
}

.chevron-down-tile {
  position: absolute;
  top: 50%;
  right: 5vw;
  transform: translate(0, -50%);
}
@media only screen and (min-width: 20rem) {
  .chevron-down-tile {
    right: 5.5vw;
  }
}
@media only screen and (min-width: 22.5rem) {
  .chevron-down-tile {
    right: 6vw;
  }
}
@media only screen and (min-width: 24.375rem) {
  .chevron-down-tile {
    right: 8vw;
  }
}
@media only screen and (min-width: 26.75rem) {
  .chevron-down-tile {
    right: 10vw;
  }
}
@media only screen and (min-width: 30rem) {
  .chevron-down-tile {
    right: 9vw;
  }
}
@media only screen and (min-width: 37.5rem) {
  .chevron-down-tile {
    right: 8vw;
  }
}
@media only screen and (min-width: 48rem) {
  .chevron-down-tile {
    right: 7vw;
  }
}
@media only screen and (min-width: 62rem) and (hover: none) {
  .chevron-down-tile {
    right: 6vw;
  }
}
@media only screen and (min-width: 90rem) {
  .chevron-down-tile {
    top: 50%;
    right: 3vw;
    transform: translate(0, -50%);
  }
}

.unopen-chevron-down {
  display: none;
}

@media only screen and (min-width: 90rem) {
  .open-icon-h1-tile {
    right: 5vw;
  }
}

/***
__page-dir
***/
.home-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  position: relative;
}
@media only screen and (min-width: 90rem) {
  .home-body {
    flex-direction: row;
  }
}

.hide-overlay {
  display: none;
  opacity: 0;
  transition: all 0.3s;
}

.show-overlay, .hide-overlay {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  height: 100svh;
  background-image: linear-gradient(rgba(0, 0, 0, 0) 0.01%, rgba(0, 0, 0, 0.8));
  opacity: 1;
  z-index: 8;
  transition: all 0.3s;
}

.main {
  width: 100%;
  transition: all 0.8s;
}

@media only screen and (min-width: 90rem) {
  .main-with-ftr {
    width: calc(100% - 24ch);
  }
}

.sect-home {
  padding-left: 5vw;
  padding-right: 5vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 56px;
  height: calc((var(--vh, 1vh) * 100) - 104px);
  height: calc(100svh - 104px);
}
@media only screen and (min-width: 22.5rem) {
  .sect-home {
    padding-left: 5.5vw;
    padding-right: 5.5vw;
  }
}
@media only screen and (min-width: 24.375rem) {
  .sect-home {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media only screen and (min-width: 30rem) {
  .sect-home {
    padding-left: 6.5vw;
    padding-right: 6.5vw;
  }
}
@media only screen and (min-width: 37.5rem) {
  .sect-home {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media only screen and (min-width: 48rem) {
  .sect-home {
    padding-left: 5vw;
    padding-right: 5vw;
  }
}
@media only screen and (min-width: 62rem) {
  .sect-home {
    padding-left: 6.5vw;
    padding-right: 6.5vw;
  }
}
@media only screen and (min-width: 75rem) {
  .sect-home {
    padding-left: 8vw;
    padding-right: 8vw;
  }
}
@media only screen and (min-width: 90rem) {
  .sect-home {
    padding-left: 16vw;
    padding-right: 16vw;
  }
}
@media only screen and (min-width: 120.0625rem) {
  .sect-home {
    padding-left: 16vw;
    padding-right: 16vw;
  }
}
@media only screen and (min-width: 90rem) {
  .sect-home {
    padding-top: 0;
    height: calc((var(--vh, 1vh) * 100) - 96px);
    height: calc(100svh - 96px);
  }
}

.open-sect-home {
  height: calc((var(--vh, 1vh) * 100) - 88px);
  height: calc(100svh - 88px);
}
@media only screen and (min-width: 37.5rem) {
  .open-sect-home {
    height: calc((var(--vh, 1vh) * 100) - 96px);
    height: calc(100svh - 96px);
  }
}
@media only screen and (min-width: 90rem) {
  .open-sect-home {
    height: calc((var(--vh, 1vh) * 100) - 90px);
    height: calc(100svh - 90px);
  }
}

.h1-hero {
  width: min(16ch, 100%);
  text-align: center;
  animation: 1.5s ease-out welcome-animation;
}
@media only screen and (min-width: 90rem) {
  .h1-hero {
    position: relative;
    top: 49px;
  }
}

@keyframes welcome-animation {
  0% {
    transform: translate(0, 100%);
    opacity: 0;
  }
  34% {
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}
.sect-work {
  height: -moz-min-content;
  height: min-content;
  padding: 56px 0 0;
  position: relative;
}
@media only screen and (min-width: 90rem) {
  .sect-work {
    padding: 48px 0 48px 0;
    padding-left: 5vw;
    padding-right: 5vw;
    padding-left: max(4px, 5vw + 12px);
    padding-right: max(4px, 5vw + 12px);
  }
}
@media only screen and (min-width: 90rem) and (min-width: 22.5rem) {
  .sect-work {
    padding-left: 5.5vw;
    padding-right: 5.5vw;
  }
}
@media only screen and (min-width: 90rem) and (min-width: 24.375rem) {
  .sect-work {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media only screen and (min-width: 90rem) and (min-width: 30rem) {
  .sect-work {
    padding-left: 6.5vw;
    padding-right: 6.5vw;
  }
}
@media only screen and (min-width: 90rem) and (min-width: 37.5rem) {
  .sect-work {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media only screen and (min-width: 90rem) and (min-width: 48rem) {
  .sect-work {
    padding-left: 5vw;
    padding-right: 5vw;
  }
}
@media only screen and (min-width: 90rem) and (min-width: 62rem) {
  .sect-work {
    padding-left: 6.5vw;
    padding-right: 6.5vw;
  }
}
@media only screen and (min-width: 90rem) and (min-width: 75rem) {
  .sect-work {
    padding-left: 8vw;
    padding-right: 8vw;
  }
}
@media only screen and (min-width: 90rem) and (min-width: 90rem) {
  .sect-work {
    padding-left: 16vw;
    padding-right: 16vw;
  }
}
@media only screen and (min-width: 90rem) and (min-width: 120.0625rem) {
  .sect-work {
    padding-left: 16vw;
    padding-right: 16vw;
  }
}
@media only screen and (min-width: 90rem) and (min-width: 22.5rem) {
  .sect-work {
    padding-left: max(4px, 5.5vw + 12px);
    padding-right: max(4px, 5.5vw + 12px);
  }
}
@media only screen and (min-width: 90rem) and (min-width: 24.375rem) {
  .sect-work {
    padding-left: max(4px, 6vw + 12px);
    padding-right: max(4px, 6vw + 12px);
  }
}
@media only screen and (min-width: 90rem) and (min-width: 30rem) {
  .sect-work {
    padding-left: max(4px, 6.5vw + 12px);
    padding-right: max(4px, 6.5vw + 12px);
  }
}
@media only screen and (min-width: 90rem) and (min-width: 37.5rem) {
  .sect-work {
    padding-left: max(4px, 6vw + 12px);
    padding-right: max(4px, 6vw + 12px);
  }
}
@media only screen and (min-width: 90rem) and (min-width: 48rem) {
  .sect-work {
    padding-left: max(4px, 5vw + 12px);
    padding-right: max(4px, 5vw + 12px);
  }
}
@media only screen and (min-width: 90rem) and (min-width: 62rem) {
  .sect-work {
    padding-left: max(4px, 6.5vw + 12px);
    padding-right: max(4px, 6.5vw + 12px);
  }
}
@media only screen and (min-width: 90rem) and (min-width: 75rem) {
  .sect-work {
    padding-left: max(4px, 8vw + 12px);
    padding-right: max(4px, 8vw + 12px);
  }
}
@media only screen and (min-width: 90rem) and (min-width: 90rem) {
  .sect-work {
    padding-left: max(4px, 9.5vw + 12px);
    padding-right: max(4px, 9.5vw + 12px);
  }
}
@media only screen and (min-width: 90rem) and (min-width: 120.0625rem) {
  .sect-work {
    padding-left: max(4px, 12vw + 12px);
    padding-right: max(4px, 12vw + 12px);
  }
}

.layout-work-tiles {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 4px;
  background-color: #dedede;
}
@media only screen and (min-width: 48rem) {
  .layout-work-tiles {
    gap: 4px;
  }
}
@media only screen and (min-width: 90rem) {
  .layout-work-tiles {
    flex-direction: row;
    gap: 12px;
  }
}

.open-layout-work-tiles {
  position: relative;
  position: sticky;
  top: 56px;
  flex-direction: row;
  padding-bottom: 4px;
  background-color: #dedede;
  z-index: 6;
}
@media only screen and (min-width: 90rem) {
  .open-layout-work-tiles {
    top: 0;
    overflow: hidden;
    padding: 42px 0 0 0;
  }
}

@media only screen and (min-width: 90rem) {
  .open-center-layout-work-tiles {
    position: relative;
    justify-content: space-between;
    margin: 0 4vw;
  }
}

@media only screen and (min-width: 90rem) {
  .open-right-layout-work-tiles {
    position: relative;
    justify-content: flex-start;
    margin: 0 4vw;
  }
}

.main-ftr {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  gap: 2rem;
  height: 48px;
  position: absolute;
  bottom: 0;
  left: max(4px, 2.5vw - 8px);
  right: max(4px, 2.5vw - 8px);
}
@media only screen and (min-width: 22.5rem) {
  .main-ftr {
    left: max(4px, 2.75vw - 8px);
    right: max(4px, 2.75vw - 8px);
  }
}
@media only screen and (min-width: 24.375rem) {
  .main-ftr {
    left: max(4px, 3vw - 8px);
    right: max(4px, 3vw - 8px);
  }
}
@media only screen and (min-width: 30rem) {
  .main-ftr {
    left: max(4px, 3.25vw - 8px);
    right: max(4px, 3.25vw - 8px);
  }
}
@media only screen and (min-width: 37.5rem) {
  .main-ftr {
    left: max(4px, 3vw - 8px);
    right: max(4px, 3vw - 8px);
  }
}
@media only screen and (min-width: 48rem) {
  .main-ftr {
    left: max(4px, 2.5vw - 8px);
    right: max(4px, 2.5vw - 8px);
  }
}
@media only screen and (min-width: 62rem) {
  .main-ftr {
    left: max(4px, 3.25vw - 8px);
    right: max(4px, 3.25vw - 8px);
  }
}
@media only screen and (min-width: 75rem) {
  .main-ftr {
    left: max(4px, 4vw - 8px);
    right: max(4px, 4vw - 8px);
  }
}
@media only screen and (min-width: 90rem) {
  .main-ftr {
    left: max(4px, 4.75vw - 8px);
    right: max(4px, 4.75vw - 8px);
  }
}
@media only screen and (min-width: 120.0625rem) {
  .main-ftr {
    left: max(4px, 6vw - 8px);
    right: max(4px, 6vw - 8px);
  }
}

.address-main-ftr, .copyright-main-ftr {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/*.sect-about {
  height: calc($height-full + $height-nav-top-bottom);
  padding: $height-nav-top 0 $height-nav-bottom;
}*/
/***
__theme-dir
***//*# sourceMappingURL=main.css.map */