:root {
     --primary-color: #153983;
     --secundary-color: #1F1F1F;
     --gray: #f4f4f4;
     --link-gray: #fff;
     --white: #ffffff;
     --frame: 10.3125%;
     --full: 100%;
     --large: 79.375%;
     --big: 65.833333333333333%;
     --medium: 52.291666666666667%;
     --small: 38.75%;
     --space-large: 200px;
     --space-big: 150px;
     --space-medium: 100px;
     --space-small: 50px;
     --space-xsmall: 25px;
     --space-xxsmall: 15px;
     --space-xxxsmall: 10px;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
	 font-family: "Inter", serif;
	 font-optical-sizing: auto;
	 font-style: normal;
     font-weight: 400;
     font-size: 1.5rem;
     color: var(--secundary-color);
     font-style: normal;
     letter-spacing: .05rem;
     line-height: 2.25rem;
 }

 .space-large {
     margin: var(--space-large) 0 0 0;
 }

 .space-big {
     margin: var(--space-big) 0 0 0;
 }

 .space-medium {
     margin: var(--space-medium) 0 0 0;
 }

 .space-small {
     margin: var(--space-small) 0 0 0;
 }

 .space-xsmall {
     margin: var(--space-xsmall) 0 0 0;
 }

 .space-xxsmall {
     margin: var(--space-xxsmall) 0 0 0;
 }

 .space-xxxsmall {
     margin: var(--space-xxxsmall) 0 0 0;
 }

 p {
     hyphens: auto;

 }

 a {
     text-decoration: underline;
 }

 a:link {
     color: var(--secundary-color);
 }

 a:visited {
     color: var(--secundary-color);
 }

 a:hover {
     color: var(--primary-color);
 }

 a:active {
     color: var(--secundary-color);
 }

 img {
     width: 100%;
     display: block;
 }

 li {
     list-style: none;
 }

 h1 {
     font-size: 7.4rem;
     line-height: 7.2rem;
     font-weight: 800;
 }

 h2 {
     font-size: 4.8rem;
     line-height: 5.625rem;
 }

 h3 {
     font-size: 2.25rem;
     line-height: 3rem;
 }

 h4 {
     font-size: 1.8rem;
     font-weight: 300;
     text-transform: uppercase;
 }

 h5 {
     font-size: 1.25rem;
     font-weight: 800;
     margin: 0 0 20px 0;
 }

 h6 {
     font-size: 1.5625rem;
     font-weight: 200;
     line-height: 1.8rem;
 }

 .lead {
     font-size: 2.25rem;
     line-height: 2.8rem;
     font-weight: 300;
 }

 .img-description {
     font-size: 0.9rem;
     text-align: right;
 }

 .btn {
     border: 3px solid var(--secundary-color);
     font-size: 1.4rem;
     background: none;
     cursor: pointer;
     padding: 22px 60px;
     transition: all 0.3s;
     border-radius: 4rem;
     font-weight: 700;
     color: var(--secundary-color);
 }

 .btn:hover {
     background-color: var(--secundary-color);
     border-color: var(--secundary-color);
     color: var(--white);
 }

 .space-right {
     margin: 0 30px 0 0;
 }

 .btn-neg {
     border: 3px solid var(--white);
     font-size: 1.4rem;
     background: none;
     cursor: pointer;
     padding: 22px 60px;
     transition: all 0.3s;
     border-radius: 4rem;
     font-weight: 700;
     color: var(--white);
 }

 .btn-neg:hover {
     background-color: var(--white);
     border-color: var(--white);
     color: var(--primary-color);
 }

 .btn-small {
     border: 3px solid var(--secundary-color);
     font-size: 1.2rem;
     background: none;
     cursor: pointer;
     padding: 14px 55px;
     transition: all 0.3s;
     border-radius: 4rem;
     font-weight: 700;
     color: var(--secundary-color);
 }

 .btn-small:hover {
     background-color: var(--secundary-color);
     border-color: var(--secundary-color);
     color: var(--white);
 }

 /* Header ---------------------------------------------------------------------- */

 header {
     height: 100vh;
     position: relative;
 }

 #logo {
     width: 212px;
     position: absolute;
     top: var(--frame);
     left: var(--frame);
 }

 #intro {
     position: absolute;
     left: var(--frame);
     bottom: 25vh;
     color: var(--white);
 }

 #intro h1 {
     font-size: 5.8rem;
     line-height: 5.4rem;
 }

 #doncho-promo {
     position: absolute;
     top: var(--frame);
     right: var(--frame);
 }

 #doncho-promo a {
     text-decoration: none;

 }

 #doncho-promo-content {
     display: flex;
     align-items: center;
     color: var(--white);
 }

 #doncho-promo-content img {
     width: 60px;
 }


 #explore {
     display: flex;
     position: absolute;
     bottom: 0;
     left: var(--frame);
     height: 130px;
     font-weight: 600;
     color: var(--white);
     font-size: 1.8rem;
 }

 #explore a {
     text-decoration: none;
     color: var(--white);
 }

 #line {
     width: 3px;
     background-color: rgba(255, 255, 255, 0.0);
     height: 130px;
     margin: 0 20px 0 0;
     overflow: hidden;
 }

 #line-animation {
     width: 3px;
     height: 50px;
     background-color: var(--white);
     animation: scroll-line 3s ease-in-out infinite;
 }

 @keyframes scroll-line {
     0% {
         transform: translateY(-50px);
     }

     100% {
         transform: translateY(130px);
     }
 }

 #bg-video video {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     z-index: -1;
 }

 /* End Header ---------------------------------------------------------------------- */

 /* Nav ---------------------------------------------------------------------- */
 .top-nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
     color: var(--white);
     height: 12vh;
     background-color: var(--primary-color);
     padding: 0 var(--frame);
     font-size: 1.375rem;
     font-weight: 600;
     margin: 0 0 var(--space-large) 0;
     position: sticky;
     top: 0;
     z-index: 999;
 }

 #links ul {
     list-style: none;
 }

 #links a {
     text-decoration: none;
 }

 #links li {
     display: inline-block;
     padding: 0 2vw 0 0;
 }

 sup {
     font-size: 11px;
     font-weight: 400;
     padding: 0 12px 0 0;
 }

 .top-nav a {
     transition: all 0.3s ease 0s
 }

 .top-nav a:hover {
     color: var(--link-gray)
 }

 .top-nav a:link {
     color: var(--white);
 }

 .top-nav a {
     color: var(--white);
 }

 #rechts {
     display: flex;
     align-items: center;
 }


 #rechts ul {
     list-style: none;
     line-height: 0;
     padding: 0 20px 0 0;
 }

 #rechts li {
     display: inline-block;
     height: 42px;
     width: 42px;
     margin: 0 20px 0 0;
     cursor: pointer;
 }

 #icon-instagram {
     fill: var(--white);
     transition: ease-in 0.3s all;
 }

 #icon-instagram:hover {
     fill: var(--white);
 }

 #icon-youtube {
     fill: var(--white);
     transition: ease-in 0.3s all;
 }

 #icon-youtube:hover {
     fill: var(--white);
 }

 .nav-button {
     overflow: hidden;
     border: 2px solid var(--white);
     font-size: 1rem;
     background: none;
     cursor: pointer;
     padding: 12px 40px;
     transition: all 0.3s;
     border-radius: 4rem;
     font-weight: 700;
     color: var(--white);
 }

 .nav-button:hover {
     color: var(--primary-color);
     background-color: var(--white);
 }

 /* End Nav ---------------------------------------------------------------------- */

 /* Anker Links ---------------------------------------------------------------------- */
 .anchor {
     position: relative;
 }

 .position-anchor {
     position: absolute;
     top: -150px;
 }


 /* Anker Links End ---------------------------------------------------------------------- */

 .text-block-1 {
     width: var(--small);
     margin: 0 auto var(--space-large) auto;
 }

 .img-large {
     width: var(--large);
     margin: 0 auto var(--space-large) auto;
 }

 .img-big {
     width: var(--big);
     margin: 0 auto var(--space-large) auto;
 }

 .img-medium {
     width: var(--medium);
     margin: 0 auto var(--space-small) auto;
 }

 .img-small {
     width: var(--small);
     margin: 0 auto var(--space-small) auto;
 }

 .center-section {
     display: flex;
     justify-content: center;
     position: relative;
     text-align: center;
     padding: var(--space-medium) 20%;
     height: 44vw;
     background-color: var(--primary-color);
     color: var(--white);
     margin: 0 0 calc(var(--space-big) + var(--space-big)) 0;
 }

 .center-section-text {
     position: relative;
     z-index: 99;
 }

 .center-section-img {
     position: absolute;
     bottom: -300px;
     width: 90%;
 }

 .image-section {
     position: relative;
     width: var(--full);
     color: var(--white);
     margin: 0 0 var(--space-large) 0;

 }

 .image-section-text {
     position: absolute;
     bottom: var(--frame);
     left: var(--frame);
     width: 40%;
 }

 .image-section-text p {
     font-size: 1.375rem;
     line-height: 1.8rem;
 }

 .shop-block-1 {
     width: var(--small);
     margin: 0 auto var(--space-large) auto;
 }

 #donchos {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
 }

 .doncho {
     width: 30%;
     text-align: center;
     margin: var(--space-small) 0 0 0;
 }

 .publications {
     display: flex;
     background-color: var(--white);
 }

 .publications a {
     text-decoration: underline;
 }

 .publications-logo {
     width: 140px;
     padding: 30px 25px;
 }

 .publications-logo img {
     mix-blend-mode: multiply;
 }

 .publications-text {
     width: calc(100% - 100px);
     padding: 30px 20px 40px;
 }

 .publications-text p {
     font-size: 1.2rem;
     line-height: 1.4rem;
 }

 .publications-bg {
     background-color: var(--gray);
 }

 .date {
     font-size: 1rem;
     font-weight: 600;
 }

 .place {
     font-size: 1.2rem;
     line-height: 1.4rem;
 }

 /* Start Footer ---------------------------------------------------------------------- */


 .footer {
     color: var(--secundary-color);
     text-align: center;
     padding: 0 25% var(--space-big);
 }

 .footer-blue {
     background-color: var(--primary-color);
     color: var(--white);
     text-align: center;
     padding: var(--space-medium) 25%;
 }

 /* End Footer ---------------------------------------------------------------------- */