@font-face {
  font-family: "geomanist";
  src: url("assets/fonts/Geomanist/Geomanist-Light-Webfont/geomanist-light-webfont.eot");
  src: url("assets/fonts/Geomanist/Geomanist-Light-Webfont/geomanist-light-webfont.eot?#iefix") format("embedded-opentype"), url("assets/fonts/Geomanist/Geomanist-Light-Webfont/geomanist-light-webfont.woff2") format("woff2"), url("assets/fonts/Geomanist/Geomanist-Light-Webfont/geomanist-light-webfont.woff") format("woff"), url("assets/fonts/Geomanist/Geomanist-Light-Webfont/geomanist-light-webfont.ttf") format("truetype"), url("assets/fonts/Geomanist/Geomanist-Light-Webfont/geomanist-light-webfont.svg#geomanist") format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "geomanist";
  src: url("/assets/fonts/Geomanist/Geomanist-Light-Italic-Webfont/geomanist-light-italic-webfont.eot");
  src: url("/assets/fonts/Geomanist/Geomanist-Light-Italic-Webfont/geomanist-light-italic-webfont.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/Geomanist/Geomanist-Light-Italic-Webfont/geomanist-light-italic-webfont.woff2") format("woff2"), url("/assets/fonts/Geomanist/Geomanist-Light-Italic-Webfont/geomanist-light-italic-webfont.woff") format("woff"), url("/assets/fonts/Geomanist/Geomanist-Light-Italic-Webfont/geomanist-light-italic-webfont.ttf") format("truetype"), url("/assets/fonts/Geomanist/Geomanist-Light-Italic-Webfont/geomanist-light-italic-webfont.svg#geomanist") format("svg");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "geomanist";
  src: url("assets/fonts/Geomanist/Geomanist-Bold-Webfont/geomanist-bold-webfont.eot");
  src: url("assets/fonts/Geomanist/Geomanist-Bold-Webfont/geomanist-bold-webfont.eot?#iefix") format("embedded-opentype"), url("assets/fonts/Geomanist/Geomanist-Bold-Webfont/geomanist-bold-webfont.woff2") format("woff2"), url("assets/fonts/Geomanist/Geomanist-Bold-Webfont/geomanist-bold-webfont.woff") format("woff"), url("assets/fonts/Geomanist/Geomanist-Bold-Webfont/geomanist-bold-webfont.ttf") format("truetype"), url("assets/fonts/Geomanist/Geomanist-Bold-Webfont/geomanist-bold-webfont.svg#geomanist") format("svg");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "geomanist";
  src: url("assets/fonts/Geomanist/Geomanist-Bold-Italic-Webfont/geomanist-bold-italic-webfont.eot");
  src: url("assets/fonts/Geomanist/Geomanist-Bold-Italic-Webfont/geomanist-bold-italic-webfont.eot?#iefix") format("embedded-opentype"), url("assets/fonts/Geomanist/Geomanist-Bold-Italic-Webfont/geomanist-bold-italic-webfont.woff2") format("woff2"), url("assets/fonts/Geomanist/Geomanist-Bold-Italic-Webfont/geomanist-bold-italic-webfont.woff") format("woff"), url("assets/fonts/Geomanist/Geomanist-Bold-Italic-Webfont/geomanist-bold-italic-webfont.ttf") format("truetype"), url("assets/fonts/Geomanist/Geomanist-Bold-Italic-Webfont/geomanist-bold-italic-webfont.svg#geomanist") format("svg");
  font-weight: 600;
  font-style: italic;
}
.col-1 {
  width: 100%;
}

.col-1-2 {
  width: 50%;
}

.col-2-2 {
  width: 100%;
}

@media screen and (min-width: 1023px) {
  .col-md-1-2 {
    width: 50%;
  }
  .col-md-2-2 {
    width: 100%;
  }
}
.col-1-3 {
  width: 33.3333333333%;
}

.col-2-3 {
  width: 66.6666666667%;
}

@media screen and (min-width: 1023px) {
  .col-md-1-3 {
    width: 33.3333333333%;
  }
  .col-md-2-3 {
    width: 66.6666666667%;
  }
}
.col-1-4 {
  width: 25%;
}

.col-2-4 {
  width: 50%;
}

@media screen and (min-width: 1023px) {
  .col-md-1-4 {
    width: 25%;
  }
  .col-md-2-4 {
    width: 50%;
  }
}
.col-1-5 {
  width: 20%;
}

.col-2-5 {
  width: 40%;
}

@media screen and (min-width: 1023px) {
  .col-md-1-5 {
    width: 20%;
  }
  .col-md-2-5 {
    width: 40%;
  }
}
.col-1-6 {
  width: 16.6666666667%;
}

.col-2-6 {
  width: 33.3333333333%;
}

@media screen and (min-width: 1023px) {
  .col-md-1-6 {
    width: 16.6666666667%;
  }
  .col-md-2-6 {
    width: 33.3333333333%;
  }
}
.col-1-7 {
  width: 14.2857142857%;
}

.col-2-7 {
  width: 28.5714285714%;
}

@media screen and (min-width: 1023px) {
  .col-md-1-7 {
    width: 14.2857142857%;
  }
  .col-md-2-7 {
    width: 28.5714285714%;
  }
}
.mt-0, .my-0 {
  margin-top: 0rem;
}

.mb-0, .my-0 {
  margin-bottom: 0rem;
}

.ml-0, .mx-0 {
  margin-left: 0rem !important;
}

.mr-0, .mx-0 {
  margin-right: 0rem !important;
}

.pt-0, .py-0 {
  padding-top: 0rem;
}

.pb-0, .py-0 {
  padding-bottom: 0rem;
}

.pl-0, .px-0 {
  padding-left: 0rem;
}

.pr-0, .px-0 {
  padding-right: 0rem;
}

.mt-1, .my-1 {
  margin-top: 1rem;
}

.mb-1, .my-1 {
  margin-bottom: 1rem;
}

.ml-1, .mx-1 {
  margin-left: 1rem !important;
}

.mr-1, .mx-1 {
  margin-right: 1rem !important;
}

.pt-1, .py-1 {
  padding-top: 1rem;
}

.pb-1, .py-1 {
  padding-bottom: 1rem;
}

.pl-1, .px-1 {
  padding-left: 1rem;
}

.pr-1, .px-1 {
  padding-right: 1rem;
}

.mt-2, .my-2 {
  margin-top: 2rem;
}

.mb-2, .my-2 {
  margin-bottom: 2rem;
}

.ml-2, .mx-2 {
  margin-left: 2rem !important;
}

.mr-2, .mx-2 {
  margin-right: 2rem !important;
}

.pt-2, .py-2 {
  padding-top: 2rem;
}

.pb-2, .py-2 {
  padding-bottom: 2rem;
}

.pl-2, .px-2 {
  padding-left: 2rem;
}

.pr-2, .px-2 {
  padding-right: 2rem;
}

.mt-3, .my-3 {
  margin-top: 3rem;
}

.mb-3, .my-3 {
  margin-bottom: 3rem;
}

.ml-3, .mx-3 {
  margin-left: 3rem !important;
}

.mr-3, .mx-3 {
  margin-right: 3rem !important;
}

.pt-3, .py-3 {
  padding-top: 3rem;
}

.pb-3, .py-3 {
  padding-bottom: 3rem;
}

.pl-3, .px-3 {
  padding-left: 3rem;
}

.pr-3, .px-3 {
  padding-right: 3rem;
}

.mt-4, .my-4 {
  margin-top: 4rem;
}

.mb-4, .my-4 {
  margin-bottom: 4rem;
}

.ml-4, .mx-4 {
  margin-left: 4rem !important;
}

.mr-4, .mx-4 {
  margin-right: 4rem !important;
}

.pt-4, .py-4 {
  padding-top: 4rem;
}

.pb-4, .py-4 {
  padding-bottom: 4rem;
}

.pl-4, .px-4 {
  padding-left: 4rem;
}

.pr-4, .px-4 {
  padding-right: 4rem;
}

.mt-5, .my-5 {
  margin-top: 5rem;
}

.mb-5, .my-5 {
  margin-bottom: 5rem;
}

.ml-5, .mx-5 {
  margin-left: 5rem !important;
}

.mr-5, .mx-5 {
  margin-right: 5rem !important;
}

.pt-5, .py-5 {
  padding-top: 5rem;
}

.pb-5, .py-5 {
  padding-bottom: 5rem;
}

.pl-5, .px-5 {
  padding-left: 5rem;
}

.pr-5, .px-5 {
  padding-right: 5rem;
}

.mt-6, .my-6 {
  margin-top: 6rem;
}

.mb-6, .my-6 {
  margin-bottom: 6rem;
}

.ml-6, .mx-6 {
  margin-left: 6rem !important;
}

.mr-6, .mx-6 {
  margin-right: 6rem !important;
}

.pt-6, .py-6 {
  padding-top: 6rem;
}

.pb-6, .py-6 {
  padding-bottom: 6rem;
}

.pl-6, .px-6 {
  padding-left: 6rem;
}

.pr-6, .px-6 {
  padding-right: 6rem;
}

.mt-7, .my-7 {
  margin-top: 7rem;
}

.mb-7, .my-7 {
  margin-bottom: 7rem;
}

.ml-7, .mx-7 {
  margin-left: 7rem !important;
}

.mr-7, .mx-7 {
  margin-right: 7rem !important;
}

.pt-7, .py-7 {
  padding-top: 7rem;
}

.pb-7, .py-7 {
  padding-bottom: 7rem;
}

.pl-7, .px-7 {
  padding-left: 7rem;
}

.pr-7, .px-7 {
  padding-right: 7rem;
}

.ml-auto, .mx-auto {
  margin-left: auto;
}

.mr-auto, .mx-auto {
  margin-right: auto;
}

.grid {
  display: flex;
  flex-wrap: wrap;
}

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

html {
  font-family: "geomanist", sans-serif;
  background-color: black;
  color: white;
  font-size: 19px;
  line-height: 1.5;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0 0 6rem 0;
}

* {
  box-sizing: border-box;
  text-underline-offset: 0.5em;
}

h1, h2, .title-h2, .btn-back, h3, h4, h5 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: 600;
  font-style: italic;
  line-height: 1.125;
}

h1 {
  text-align: center;
  margin-bottom: 2rem;
}

a:link, a:active, a:visited {
  color: inherit;
}

a:not(.work-link):not(.btn-back > a) {
  background: linear-gradient(90deg, rgb(255, 0, 0) 0%, rgb(255, 154, 0) 10%, rgb(208, 222, 33) 20%, rgb(79, 220, 74) 30%, rgb(63, 218, 216) 40%, rgb(47, 201, 226) 50%, rgb(28, 127, 238) 60%, rgb(95, 21, 242) 70%, rgb(186, 12, 248) 80%, rgb(251, 7, 217) 90%, rgb(255, 0, 0) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 800% 800%;
  animation: rainbow 50s linear infinite;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.1em;
}
a:not(.work-link):not(.btn-back > a):hover {
  animation: rainbow 2s linear infinite;
}

img {
  max-width: 100%;
}

@keyframes rainbow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.fat-text {
  text-transform: uppercase;
  font-size: 2rem;
  letter-spacing: 0.2em;
}

.header {
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
}

.site-title {
  margin-bottom: 0;
}
.site-title img {
  display: block;
  max-width: 200px;
  margin: 0 auto;
}

.main-menu > ul {
  list-style: none;
  padding: 0;
  display: flex;
}
.main-menu > ul > li {
  margin: 0 1rem;
}
.main-menu > ul a {
  text-decoration: none;
}

.main {
  padding: 0 2rem 6rem 2rem;
}

.spacer-menu {
  padding-top: 10rem;
}

.section {
  margin: 5rem auto;
}

.section-title {
  font-size: 3.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 4rem;
  text-align: center;
  text-transform: uppercase;
}

.anchor {
  padding-top: 4rem;
}

.works-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  text-align: center;
}

.work {
  margin: 3rem auto;
}

.work-title:hover, .btn-back:hover,
.work-link:hover .work-title,
.work-link:hover .btn-back {
  color: white;
  text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}

.work-link {
  display: inline-block;
  text-decoration: none;
}

.work-title, .btn-back {
  text-align: center;
  font-size: 3.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0;
  color: black;
  text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
  transition: color 0.5s ease-in-out, text-shadow 0.5s ease-in-out;
}

.work-img {
  position: fixed;
  z-index: -1;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: visibility 1s ease-in-out, opacity 1s ease-in-out;
}
.work-link:hover .work-img {
  opacity: 1;
  visibility: visible;
}

.work-img img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.template-work .work-title, .template-work .btn-back {
  margin-bottom: 2rem;
}

.intro {
  position: relative;
  z-index: 9999;
  width: 100%;
  min-height: 100vh;
  padding: 5rem 0 0 0;
  background-color: black;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
}
.intro:after {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  height: 5rem;
  width: 100%;
  background: linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.intro-logo {
  width: 100%;
}
.intro-logo > img {
  display: block;
  margin: 0 auto;
  width: 1200px;
  max-width: 100%;
  animation: respiration 20s linear 1s infinite;
}

.intro-txt {
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-align: center;
  max-width: 800px;
  margin-bottom: 3rem;
  color: silver;
}

.text-body,
.legend {
  width: 800px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.credits {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: rgb(150, 150, 150);
}

.layout-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
}

.btn-back {
  margin-top: 10rem;
  text-align: center;
}
.btn-back > a {
  text-decoration: none;
}

.img-fluid {
  max-width: 100%;
}

.video-container video {
  display: block;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

@keyframes respiration {
  0%, 10%, 90%, 100% {
    filter: grayscale(0) hue-rotate(0deg);
  }
  50% {
    filter: grayscale(0.8) hue-rotate(360deg);
  }
}
@media screen and (max-width: 1023px) {
  html {
    font-size: 14px;
  }
  .work-title, .btn-back {
    font-size: 3rem;
  }
}