@font-face {
    font-family: 'Poppins Bold';
    src: local('Poppins Bold'), local('Poppins-Bold'),
        url('../fonts/Poppins-Bold.woff2') format('woff2'),
        url('../fonts/Poppins-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins SemiBold Italic';
    src: local('Poppins SemiBold Italic'), local('Poppins-SemiBoldItalic'),
        url('../fonts/Poppins-SemiBoldItalic.woff2') format('woff2'),
        url('../fonts/Poppins-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins SemiBold';
    src: local('Poppins SemiBold'), local('Poppins-SemiBold'),
        url('../fonts/Poppins-SemiBold.woff2') format('woff2'),
        url('../fonts/Poppins-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins Bold Italic';
    src: local('Poppins Bold Italic'), local('Poppins-BoldItalic'),
        url('../fonts/Poppins-BoldItalic.woff2') format('woff2'),
        url('../fonts/Poppins-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins Regular';
    src: local('Poppins Regular'), local('Poppins-Regular'),
        url('../fonts/Poppins-Regular.woff2') format('woff2'),
        url('../fonts/Poppins-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ABC Gravity Expanded';
	src: local('ABC Gravity Expanded'), local('ABCGravity-Expanded'),
        url('../fonts/ABCGravity-Expanded.woff2') format('woff2'),
        url('../fonts/ABCGravity-Expanded.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ABC Gravity Expanded Expanded Italic';
    src: local('ABC Gravity Expanded Expanded Italic'), local('ABCGravity-ExpandedItalic'),
        url('../fonts/ABCGravity-ExpandedItalic.woff2') format('woff2'),
        url('../fonts/ABCGravity-ExpandedItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

* {
   margin: 0;
   padding: 0;
}

html {
	padding: 0;
	margin: 0;
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust:100%;
	background: var(--farbe_hintergrund);
	scroll-behavior: smooth;
}

body {
   font-family: 'Poppins Regular';
   font-size: 25px;	
   line-height: 40px;
   color: var(--farbe);
	height: 100vh;
   margin:0;
   padding: 0;
   background: var(--farbe_hintergrund);
}

nav#dot-nav {
    position: fixed;
    right:30px;
	z-index: 100;
}

nav#dot-nav a {
    border: 2px solid var(--farbe);
    border-radius: 50%;
    width: 8px;
    height: 8px;
    display: block;
    margin: 10px;
    -webkit-transition: all .4;
    transition:all .4
}

nav#dot-nav a.active {
    background:var(--farbe);
}

.js-warning{
	margin: 0 auto 0 auto;
	top: 50%;
}

a {
	font-family: 'Poppins Regular';
	font-size: 25px;
	color: var(--farbe);
	text-decoration: underline;
    background-color: transparent;
    -webkit-text-decoration-skip:objects
}

a:hover{
	text-decoration: underline;
}

img {
    border-style:none
}

svg:not(:root) {
    overflow:hidden
}

#container {
  width: 100%;
  height: 100%; 
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
	z-index: 0;
}

section {
    width: 100%;
}

.mobile{
	display: none;
}

.accessibility {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.accessibility:focus {
	position: static;
	width: auto;
	height: auto;
}

h1{
	font-family: 'Poppins SemiBold';
	font-size: 70px;
	line-height: 80px;
	color: var(--farbe);
}

h2, h3, h4, h5, h6{
	font-family: 'Poppins SemiBold';
	font-size: 50px;
	line-height: 60px;
	padding-bottom:20px;
	color: var(--farbe);
}

h2.header_text{
	font-size: 30px;
	line-height: 40px;
	padding-bottom:10px;
	}

/* HEADER */

header{
	width: 100%;
	height: auto;
	position: absolute;
	z-index: 1;
	top: 50px;
}

nav ul{
	position: absolute;
	right: 90px;
	top: 0px;
	z-index: 100;
	float: left;
	list-style: none;
}

nav ul li{
	float:left;
	display: block;
	padding: 0px 20px;
}

nav ul li.lang_de, nav ul li.lang_de{
	padding-left: 0px;
	padding-right: 0px;
}

nav ul li.lang_de{
	margin-left: 50px;
	padding: 0px;
}

nav ul li a{
	font-family: 'ABC Gravity Expanded';
	font-size: 14px;
	color: var(--farbe);
	display:block;
	line-height:25px;
	float: left;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
    border-bottom: 3px solid transparent;
    -webkit-transition: border 1200ms ease;
    -moz-transition: border 1200ms ease;
    -ms-transition: border 1200ms ease;
    -o-transition: border 1200ms ease;
    transition: border 1200ms ease;
    transition: border-bottom 800ms;	
	vertical-align: middle;
}

nav ul li a:hover, nav ul li a:active {
	text-decoration: none;
  border-bottom: 3px solid var(--farbe);
}

/* FOOTER */

footer{
	position: fixed;
	padding: 0px 90px;
	bottom: 10px;
	height: auto;
	z-index: 1;
}

footer a{
	font-family: 'Poppins Regular';
	font-size: 14px;
	color: var(--farbe);
	display:block;
	line-height:25px;
	float: left;
	text-align: center;
	text-decoration: none;
}

footer a:nth-child(2){
	margin-left: 30px;
}

#logo{
	width: auto;
	height: 50px;
	border: 0px;
	fill:  var(--farbe);
    stroke-width: 0px;
	position: absolute;
	left: 90px;
	top: 0px;
}

/* NAVIGATION VERTICAL */

ul.links_right{
	position: fixed;
	top:50%;
	z-index: 100;
	right: -90px;
	rotate: 90deg;
	text-transform: uppercase;
}

ul.links_right li{
	float: left;
	display: block;
}

ul.links_right li a{
	font-size:14px;
	text-decoration: none;	
}

hr{
	float: top;
	border: 0;
	width: 40px;
    height: 1px;
	margin: 22px 20px 0px 20px;
    background: var(--farbe);
}

/* WORK */

.panel {
  width: 100%;
  height: 100%;
  display: block;
  align-items: center;
  text-align: center;
  position: relative;
  box-sizing: border-box;
  background: #000;
	z-index: 1;
	overflow: hidden;
}

.video_wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    z-index: 100;
}

.video_content {
  font-family: 'ABC Gravity Expanded';
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
}

.video_content h2 {
    color: #fff;
    font-size: 100px;
	line-height: 105px;
    margin: 0;
	position: relative;
	z-index: 0;
    padding: 0;
}

.titel_video{
	font-size: 60px;
	line-height: 70px;
  font-family: 'ABC Gravity Expanded';
	text-transform: uppercase;
	margin-bottom: 10px;
}

.text_video{
    font-size: 30px;
	font-family: 'Poppins Regular';
	max-width: 800px;
}

.video_content h3 {
    color: #ffffff;
    text-transform: uppercase;
    font-size: 40px;
    line-height: 50px;
    margin: 0;
    padding: 0px 0px 10px 0px;
	position: relative;
	z-index: 0;
}

.icon_scroll{
	position: absolute;
	left: 50%;
	bottom: 80px;
	z-index: 1;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.video_content a{	
	position: relative;
	height: 20px;
	margin: 200px auto 0px auto;
	z-index: 100;
	font-size: 15px;
	color: #fff;
	text-transform: uppercase;
	text-decoration: none;
	border: 0.0625em solid #fff;
	padding: 0.5em 0.8em 0.5em 0.8em;
  	background: linear-gradient(to right, white 50%, transparent 0%);
    background-size: 200% 100%;
    background-position:right bottom;
    transition:all 1.5s ease;
	pointer-events: auto;
	z-index: 1;
}

.video_content a:hover {
	color: #000;
    background-position:left bottom;	
}

@media (min-aspect-ratio: 16/9) {
    video {
        width: 100%;
        height: auto;
        position: relative;
        z-index: 0;
        overflow: hidden;
		top: 0px;
		left: 0px;
    }
}

@media (max-aspect-ratio: 16/9) {
    video {
        width: auto;
        height: 100%;
        position: relative;
        z-index: 0;
        overflow: hidden;
    }
}

.embed-container { 
	position: relative; 
	padding-bottom: 56.25%; 
	height: 0; 
	overflow: hidden; 
	max-width: 100%; 
} 

.embed-container iframe, .embed-container object, .embed-container embed { 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
}

.wrapper{
  width: 70%;
	position: relative;
	margin: 400px auto 0px auto;
}

.wrapper_center{
  width: 70%;
  height: auto;
  margin: 0;
  position: relative;
  margin: 200px auto 0 auto;
}

.content_ending{
  width: 100%;
  height: auto; 
  position: absolute;
  left:0;
  text-align: center;
  padding: 50px 0px;
  background: #ffffff;
}

.content_ending h4{
	color: #000;	
}

.content_ending ul{
	list-style: none;
	width: 352px;
	margin: 0 auto 0 auto;
}

.content_ending ul li{
	float: left;
	padding: 0px 20px;
}

.content_ending a{
	font-family: 'ABC Gravity Expanded';
	font-size: 20px;
	width: auto;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	color: #000000;
	border-bottom: 3px solid transparent;
    -webkit-transition: border 1200ms ease;
    -moz-transition: border 1200ms ease;
    -ms-transition: border 1200ms ease;
    -o-transition: border 1200ms ease;
    transition: border 1200ms ease;
    transition: border-bottom 800ms;	
	vertical-align: middle;
}

.content_ending a:hover, .content_ending a:active {
	text-decoration: none;
  	border-bottom: 3px solid #000000;
}

.intro{
	width: 100%;
	height: auto;
	display: block;
	margin: 0px 0px 100px 0px;
}

.intro_inner {
	font-family: 'ABC Gravity Expanded';
  margin: 0;
  text-align: center;
  font-size: 100px;
	text-transform:uppercase;
  overflow: hidden;
  line-height: 90px;
}
.intro_inner span {
  display: block;
}

.intro_inner:nth-child(1) span {
	animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) 0.5s;
}

.intro_inner:nth-child(2) span {
	animation: reveal 1.8s cubic-bezier(0.77, 0, 0.175, 1) 0.5s;
}

.intro_inner:nth-child(3) span {
	animation: reveal 2.1s cubic-bezier(0.77, 0, 0.175, 1) 0.5s;
}

.intro_inner:nth-child(4) span {
	animation: reveal 2.4s cubic-bezier(0.77, 0, 0.175, 1) 0.5s;
}

@keyframes reveal {
  0% {
	  visibility: hidden;
    transform: translate(0,100%);
  }
  100% {
	  visibility: visible;
    transform: translate(0,0);
  }
}

.container_text{
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
}

.text{
	width: 50%;
	float: left;
	margin-left: 10%;
}

.text_legal{
	width: 100%;
	float: left;
	margin-bottom: 50px;
}

.text_legal h1, h2, h3, h4{
	margin: 20px 0px;
	font-size: 40px;
}

.text_legal h2, h3, h4{
	font-size: 30px;
}

.intro_text, .project_text{
	width: 100%;
	height: 40vh;
	float: left;	
}

.project_text{
	width: 80%;
	height: auto;
	margin-bottom: 50px;
}

.inner{
	width: 60%;
	float: left;
}

.textblock{
	width: 100%;
	float: left;
	margin-bottom: 40px;
}

.title{
	width: 30%;
	float: left;
	color: #000000;
}

.title h1{
	font-size: 36px;
	line-height: 40px;
}

.image_text{
	width: 30%;
	float: left;
}

.image_text video{
	width: 100%;
  height: auto;
  object-fit: cover;
}

.lower{
	margin-top: 50px;
}

.box{
	width: 80%;
	margin: 0 auto 0 auto;
	font-family: 'ABC Simon Mono Thin';
	color: #000000;
	font-size: 1.4em;
	line-height: 2em;
}

.slider .box h2, .slider2 .box h2{
	font-family: 'ABC Simon Mono Thin';
	color: #000000;
	font-size: 1em;
	font-weight: 100;
	text-transform: none;
}

.wrapper_text{
	font-family: 'ABC Simon Mono Thin';
	font-size: 1.4em;
	line-height: 2em;
	width: 100%;
	max-width: 900px;
	height: auto;
	text-align: center;
	padding: 0px 0px;
	position: relative; 
	left: 50%;
	transform: translateX(-50%);
}

.wrapper_text img{
	width: 100%;
	max-width: 900px;
	height: auto;
	margin: 0px auto 50px auto;
	font-family: 'ABC Gravity Expanded';
	font-size: 12em;
	line-height: 0.8em;
	text-transform: uppercase;
	color: #000000;
}

.project_wrapper{
	width: 100%;
	max-width: 910px;
	margin: 0 auto;
	position: relative;
}

.project_header_image .project_wrapper{
	height: 100%;
}

.project_header_content{
	padding: 200px 0;
}

.project_content{
	width: 100%;
	float: left;
	margin-bottom: 50px;
}

.project_content img{
	width: 100%;
}

.project_info{
	width: 100%;
	margin: 200px 0px 100px 0px;
	float: left;
}

.project_info_content{
	width: calc(50% - 30px);
	max-width: calc();
	float: left;
}

.project_info_content:nth-child(2){
	margin-left: 60px;
}

iframe{
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

/*=============== IMAGE SLIDER ===============*/
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card__container {
  padding-block: 5rem;
}

.card__content {
  overflow: hidden;
}

.card__article {
  overflow: hidden;
}

.card__image {
  width: 100%;
  max-width: 910px;
  position: relative;
  padding-top: 1.5rem;
  margin-bottom: -.75rem;
}

.card__data {
  background-color: var(--container-color);
  padding: 1.5rem 2rem;
  border-radius: 1rem;
  text-align: center;
  position: relative;
}

.card__img {
  width: auto;
  height: auto;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}

/* Swiper class */
.swiper-button-prev:after,
.swiper-button-next:after {
  content: "";
}

.swiper-button-prev,
.swiper-button-next {
  width: initial;
  height: initial;
  font-size: 3rem;
  color: var(--second-color);
  display: none;
}

.swiper-button-prev {
  left: 0;
}

.swiper-button-next {
  right: 0;
}

.swiper-pagination-bullet {
  background-color: hsl(212, 32%, 40%);
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background-color: var(--second-color);
}

/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 320px) {
  .card__data {
    padding: 1rem;
  }
}

/* For medium devices */
@media screen and (min-width: 768px) {
  .card__content {
    margin-inline: 3rem;
  }

  .swiper-button-next,
  .swiper-button-prev {
    display: block;
  }
}

/* For large devices */
@media screen and (min-width: 1120px) {
  .card__container {
    max-width: 100%;
  }

  .swiper-button-prev {
    left: -1rem;
  }
  .swiper-button-next {
    right: -1rem;
  }
}


/* NAVIGATION */

ul.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.menu li {
  cursor: pointer;
  padding: 40px 20px;
  font-size: 48px;
}

button {
  opacity: 1.0;
  background-color: transparent;
  position: fixed;
  z-index: 70;
  top: 50px;
  right: 50px;
  border: none;
  width: 26px;
  height: 20px;
  outline: none;
  transition: opacity 0.2s ease-out;
  cursor: pointer;
}
button:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  right: auto;
  width: 100%;
  background: linear-gradient(to bottom, var(--farbe), var(--farbe) 20%, transparent 20%, transparent 40%, var(--farbe) 40%, var(--farbe) 60%, transparent 60%, transparent 80%, var(--farbe) 80%, var(--farbe) 100%);
  transition: opacity 0.2s ease-out, width 0.2s 0.2s ease-out;
}
button:after {
  opacity: 0;
  content: '×';
  color: white;
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: Arial, sans-serif;
  font-size: 36px;
  line-height: 0;
  transition: opacity 0.4s ease-out;
}
button:active {
  -webkit-transform: translateY(2px);
          transform: translateY(2px);
}
button:hover {
  opacity: 1;
}
.open button {
  opacity: 1;
}
.open button:before {
  opacity: 0;
  width: 0;
}
.open button:after {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0) rotate(360deg);
          transform: translate3d(0, 0, 0) rotate(360deg);
  transition: opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
  transition: transform 0.4s 1s ease-out, opacity 0.4s 1s ease-out;
  transition: transform 0.4s 1s ease-out, opacity 0.4s 1s ease-out, -webkit-transform 0.4s 1s ease-out;
}

#navigation {
  z-index: 60;
  position: fixed;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  overflow: hidden;
}
#navigation:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: rgba(0, 0, 0, 1.0);
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  border-radius: 100%;
  -webkit-transform: scale(0.04), translateY(9999px);
          transform: scale(0.04), translateY(9999px);
  overflow: hidden;
}
.open #navigation {
  top: 0;
}
.open #navigation:before {
  -webkit-animation: menu-animation 0.8s ease-out forwards;
          animation: menu-animation 0.8s ease-out forwards;
}

ul.menu {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-perspective: 1000;
          perspective: 1000;
  color: white;
}
ul.menu li {
  opacity: 0;
  height: auto;
	padding: 20px;
	margin: 0px;
  text-align: left;
  -webkit-transform: translate3d(0, 36px, 0);
  transform: translate3d(0, 36px, 0);
  cursor: pointer;
	line-height: 0.4em;
}
ul.menu li:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  left: auto;
  background-color: white;
  height: 100%;
  width: 0;
  overflow: hidden;
  transition: width 0.14s ease-out;
}
ul.menu li:after {
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  color: #000;
  overflow: hidden;
  -webkit-transform: translate(-24px, 6px);
  transform: translate(-24px, 6px);
  transition: opacity 0.1s ease-out, -webkit-transform 0.1s ease-out;
  transition: transform 0.1s ease-out, opacity 0.1s ease-out;
  transition: transform 0.1s ease-out, opacity 0.1s ease-out, -webkit-transform 0.1s ease-out;
}
ul.menu li.nav_lang{
	padding-top: 40px;
}
ul.menu li a{
  font-family: 'Poppins Regular';
  color: #ffffff;
  text-decoration: none;
  font-size: 18px;
  line-height: 2px;
  padding: 0px;
}
ul.menu li a:hover{
color: #feffca;
}
.open ul.menu li {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  transition: opacity 0.2s ease-out, -webkit-transform 0.2s ease-out;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out, -webkit-transform 0.2s ease-out;
}

@keyframes menu-animation {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.04) translateY(300%);
            transform: scale(0.04) translateY(300%);
  }
  40% {
    -webkit-transform: scale(0.04) translateY(0);
            transform: scale(0.04) translateY(0);
    transition: ease-out;
  }
  40% {
    -webkit-transform: scale(0.04) translateY(0);
            transform: scale(0.04) translateY(0);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale(0.02) translateY(0px);
            transform: scale(0.02) translateY(0px);
  }
  61% {
    -webkit-transform: scale(0.04);
            transform: scale(0.04);
  }
  99.9% {
    height: 0;
    padding-bottom: 100%;
    border-radius: 100%;
  }
  100% {
    -webkit-transform: scale(2);
    transform: scale(2);
    height: 100%;
    padding-bottom: 0;
    border-radius: 0;
  }
}

.container_mobile_nav{
  display: none;
}

.overlay{
  opacity: 0;
  display:block;
  position: absolute;
  float: left;
  z-index: 20;
  width: 100%;
  height: 100%;
  min-height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
}

a.overlay .overlay_text{
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    text-decoration: none;
}

.overlay_text{
  position: absolute;
 top: 50%;
 transform: translateY(-50%);
  text-align: center;
  margin: 0 auto 0 auto;
  width: 70%;
  padding: 0 15% 0 15%;
}

.panel_content{
	background: #ffffff;
	color: #000000;
}

.container {
    display: flex;
    justify-content: space-between;
    gap: 40px;
	width: 100%;
    margin: 0 auto;
    flex-wrap: wrap;
}

.item {
    flex: 1;
    min-width: 300px;
}

.item img,
.item iframe {
    width: 100%;
    height: auto;
    max-height: 1000px;
    object-fit: contain;
}

@media screen and (max-width: 1465px) {
.intro_inner {
	font-family: 'ABC Gravity Expanded';
  margin: 0;
  text-align: center;
  font-size: 80px;
	text-transform:uppercase;
  overflow: hidden;
  line-height: 70px;
}
}

@media screen and (max-width: 1170px) {
.intro_inner {
	font-family: 'ABC Gravity Expanded';
  margin: 0;
  text-align: center;
  font-size: 70px;
	text-transform:uppercase;
  overflow: hidden;
  line-height: 60px;
}
}

@media screen and (max-width: 1024px) {
	
	.wrapper{
  width: 80%;
	margin: 200px auto 0px auto;
}
	
	.wrapper_center{
  margin: 300px auto 0 auto;
}
	
	.intro{
	width: 100%;
	margin: 0px auto 100px auto;
}

.intro_inner {
  font-size: 60px;
  line-height: 60px;
}
	
	h1, h2{
		font-size: 50px;
		line-height: 60px;
		margin-bottom: 20px;
	}
	
	.title{
		font-size: 18px;
	}
	
	.video_content h2 {
    font-size: 60px;
	line-height: 50px;
	margin-bottom: 30px;
}
	
 .titel_video{
	font-size: 50px;
	line-height: 60px;
}

.text_video{
    font-size: 18px;
	line-height: 28px;
}

.video_content h3 {
    font-size: 30px;
    line-height: 40px;
}
	
	.video_content a{
		margin-top: 220px;
	}
	
	ul.links_right{
	right: -80px;
}
	
	ul.links_right li a{
	font-size:12px;
}
	
	hr{
	margin: 24px 20px 0px 20px;
}
	
	.icon_scroll{
		bottom: 25px;
	}
	
	.project_text{
	height: auto;	
}

.project_text{
	margin-bottom: 30px;
}
}

@media screen and (max-width: 880px) {
	
	@media (min-aspect-ratio: 16/9) {
    video {
        width: 100%;
        height: auto;
        position: relative;
        z-index: 0;
        overflow: hidden;
		top: 0px;
		left: 0px;
    }
}

@media (max-aspect-ratio: 16/9) {
    video {
        width: auto;
        height: 120%;
        position: relative;
        z-index: 0;
        overflow: hidden;
    }
}
	
	body {
   font-size: 18px;	
   line-height: 30px;
}
	
	a {
	font-size: 18px;
}
	
nav ul{
	right: 50px;
}
	
	.wrapper{
  width: 80%;
	margin: 200px auto 0px auto;
}
	
	.wrapper_center{
		width: 80%;
  margin: 200px auto 0 auto;
}
	
	.intro{
	width: 100%;
	margin: 200px auto 100px auto;
}

.intro_inner {
  font-size: 50px;
  line-height: 50px;
}
	
	h1, h2{
		font-size: 50px;
		line-height: 60px;
		margin-bottom: 20px;
	}
	
	.title{
		font-size: 24px;
	}
	
	.video_content h2 {
    font-size: 60px;
	line-height: 50px;
	margin-bottom: 30px;
}
	
#logo{
	height: 40px;
}
	
 .titel_video{
	 font-size: 40px;
	line-height: 50px;
}

.text_video{
    font-size: 18px;
	line-height: 28px;
}

.video_content h3 {
    font-size: 30px;
    line-height: 40px;
}
	
	.video_content a{
		margin-top: 220px;
	}
	
	hr{
	margin: 18px 20px 0px 20px;
}
	
	.icon_scroll{
		bottom: 25px;
	}
	
	.project_text{
	height: auto;	
}

.project_text{
	margin-bottom: 30px;
}
}

@media screen and (max-width: 812px) {
	.desktop{
		display: none;
	}
	
	.mobile{
		display: block;
	}
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
        gap: 20px;
    }
}

@media screen and (max-width: 550px) {
		.titel_video{
	 font-size: 40px;
	line-height: 50px;
}
}

@media screen and (max-width: 480px) {
	
	body {
   font-family: 'Poppins Regular';
   font-size: 16px;	
   line-height: 26px;
	}
	
	.desktop{
		display: none;
	}	
	
	.mobile{
		display: block;
	}
	
	a {
	font-size: 16px;
}
	
	nav a{
		width: 100%;
	}
	
	.titel_video{
	font-size: 30px;
	line-height: 40px;
}
	
	#logo{
		left: 40px;
	}

.text_video{
    font-size: 14px;
	line-height: 20px;
}
	
	.icon_scroll{
		bottom: 30px;
	}
	
	.video_content{
		width: 80%;
		
	}
	
	.video_content h2 {
    font-size: 40px;
	line-height: 40px;
	margin-bottom: 30px;
}

.video_content h3 {
    font-size: 20px;
    line-height: 30px;
}
	
	.video_content a{
		margin-top: 220px;
	}
	
	.wrapper_center{
  width: 80%;
  height: auto;
  margin: 200px auto 0 auto;
  position: relative;
  top: auto;
  left: auto;
  transform: none;
}
	
	.intro{
	width: 80%;
	height: auto;
	display: block;
	margin: 0px auto 100px auto;
}

.intro_inner {
	font-family: 'ABC Gravity Expanded';
  margin: 0;
  text-align: center;
  font-size: 40px;
	text-transform:uppercase;
  overflow: hidden;
  line-height: 40px;
}
	
	.title{
		width: 100%;
		float: left;
	}
	
	.text{
		width: 100%;
		float: left;
		margin: 30px 0px 0px 0px;
	}
	
	.lower{
		margin-top: 0px;
	}
	
	.intro_text{
		width: 100%;
		float: left;
	}
	
	.inner{
		width: 100%;
		float: left;	
	}
	
	.mobile_margin{
		margin-top: 120px;
	}
	
	h1, h2{
		font-size: 30px;
		line-height: 40px;
		margin-bottom: 20px;
		padding: 0px;
	}
	
	h2.header_text{
		font-size: 20px;
	line-height: 10px;
	padding: 30px 0px 0px 0px;
	}
	
	.project_wrapper {
        width: 90%;
    }

    .project_info {
        width: 100%;
        margin-bottom: 100px;
        float: left;
    }

    .project_info_content {
        width: 100%;
        font-size: 1em;
        line-height: 1.6em;
    }

    .project_info_content:nth-child(2) {
        margin: 40px 0px 0px 0px;
    }

    .project_content h4, .project_info_content h3 {
        font-size: 1.6em;
    }

    .project_header_image h1, .project_header_image h2 {
        font-size: 1.4em;
    }

    .project_header_image h1 {
        font-size: 2em;
        margin-top: 10px;
    }
	
.content_ending{
		display: none;
}
	
	/*
	.content_ending{
		display: none;
  padding: 30px 0px;
}
	
	.content_ending h4{
	line-height: 40px;
	padding-bottom:0px;
	}
	
	.content_ending ul{
	width: 280px;
}
	
	.content_ending a{
	font-size: 14px;
}
	*/
}

@media screen and (max-width: 320px) {
		.titel_video{
	font-size: 20px;
	line-height: 30px;
}
}

/*! locomotive-scroll v4.1.3 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */html.has-scroll-smooth{overflow:hidden}html.has-scroll-dragging{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.has-scroll-smooth body{overflow:hidden}.has-scroll-smooth [data-scroll-container]{min-height:100vh}[data-scroll-direction=horizontal] [data-scroll-container]{display:inline-block;height:100vh;white-space:nowrap}[data-scroll-direction=horizontal] [data-scroll-section]{display:inline-block;height:100%;vertical-align:top;white-space:nowrap}.c-scrollbar{height:100%;opacity:0;position:absolute;right:0;top:0;transform-origin:center right;transition:transform .3s,opacity .3s;width:11px}.c-scrollbar:hover{transform:scaleX(1.45)}.c-scrollbar:hover,.has-scroll-dragging .c-scrollbar,.has-scroll-scrolling .c-scrollbar{opacity:1}[data-scroll-direction=horizontal] .c-scrollbar{bottom:0;height:10px;top:auto;transform:scaleY(1);width:100%}[data-scroll-direction=horizontal] .c-scrollbar:hover{transform:scaleY(1.3)}.c-scrollbar_thumb{background-color:#000;border-radius:10px;cursor:-webkit-grab;cursor:grab;margin:2px;opacity:.5;position:absolute;right:0;top:0;width:7px}.has-scroll-dragging .c-scrollbar_thumb{cursor:-webkit-grabbing;cursor:grabbing}[data-scroll-direction=horizontal] .c-scrollbar_thumb{bottom:0;right:auto}

/* COOKIECONSENT */
.cc-window{font-family: 'Poppins Regular';font-size: 14px;border-top: 1px solid #000000; opacity:1;-webkit-transition:opacity 1s ease;transition:opacity 1s ease}.cc-window.cc-invisible{opacity:0}.cc-animate.cc-revoke{-webkit-transition:transform 1s ease;-webkit-transition:-webkit-transform 1s ease;transition:-webkit-transform 1s ease;transition:transform 1s ease;transition:transform 1s ease,-webkit-transform 1s ease}.cc-animate.cc-revoke.cc-top{-webkit-transform:translateY(-2em);transform:translateY(-2em)}.cc-animate.cc-revoke.cc-bottom{-webkit-transform:translateY(2em);transform:translateY(2em)}.cc-animate.cc-revoke.cc-active.cc-top{-webkit-transform:translateY(0);transform:translateY(0)}.cc-animate.cc-revoke.cc-active.cc-bottom{-webkit-transform:translateY(0);transform:translateY(0)}.cc-revoke:hover{-webkit-transform:translateY(0);transform:translateY(0)}.cc-grower{max-height:0;overflow:hidden;-webkit-transition:max-height 1s;transition:max-height 1s}
.cc-revoke,.cc-window{position:fixed;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;z-index:9999}.cc-window.cc-static{position:static}.cc-window.cc-floating{padding:2em;max-width:24em;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner{padding:1em 1.8em;width:100%;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.cc-revoke{padding:.5em}.cc-revoke:hover{text-decoration:underline}..cc-btn,.cc-close,.cc-link,.cc-revoke{cursor:pointer}.cc-link{font-size: 14px;opacity:.8;display:inline-block;padding:.2em;text-decoration:underline}.cc-link:hover{font-size: 14px;opacity:1}.cc-link:active,.cc-link:visited{font-size: 14px;color:initial}.cc-btn{font-size: 14px;cursor:pointer;display:block;padding:.4em .8em;border-width:2px;border-style:solid;text-align:center;white-space:nowrap}.cc-highlight .cc-btn:first-child{background-color:transparent;border-color:transparent}.cc-highlight .cc-btn:first-child:focus,.cc-highlight .cc-btn:first-child:hover{background-color:transparent;text-decoration:underline}.cc-close{display:block;position:absolute;top:.5em;right:.5em;opacity:.9;line-height:.75}.cc-close:focus,.cc-close:hover{opacity:1}.cc-revoke.cc-top{top:0;left:3em;border-bottom-left-radius:.5em;border-bottom-right-radius:.5em}.cc-revoke.cc-bottom{bottom:0;left:3em;border-top-left-radius:.5em;border-top-right-radius:.5em}.cc-revoke.cc-left{left:3em;right:unset}.cc-revoke.cc-right{right:3em;left:unset}.cc-top{top:1em}.cc-left{left:1em}.cc-right{right:1em}.cc-bottom{bottom:1em}.cc-floating>.cc-link{margin-bottom:1em}.cc-floating .cc-message{display:block;margin-bottom:1em}.cc-window.cc-floating .cc-compliance{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}.cc-window.cc-banner{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.cc-banner.cc-top{left:0;right:0;top:0}.cc-banner.cc-bottom{left:0;right:0;bottom:0}.cc-banner .cc-message{display:block;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;max-width:100%;margin-right:1em}.cc-compliance{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:justify;align-content:space-between}.cc-floating .cc-compliance>.cc-btn{-webkit-box-flex:1;-ms-flex:1;flex:1}.cc-btn+.cc-btn{margin-left:.5em}
@media print{.cc-revoke,.cc-window{display:none}}@media screen and (max-width:900px){.cc-btn{white-space:normal}}@media screen and (max-width:414px) and (orientation:portrait),screen and (max-width:736px) and (orientation:landscape){.cc-window.cc-top{top:0}.cc-window.cc-bottom{bottom:0}.cc-window.cc-banner,.cc-window.cc-floating,.cc-window.cc-left,.cc-window.cc-right{left:0;right:0}.cc-window.cc-banner{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner .cc-compliance{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.cc-window.cc-floating{max-width:none}.cc-window .cc-message{margin-bottom:1em}.cc-window.cc-banner{-webkit-box-align:unset;-ms-flex-align:unset;align-items:unset}.cc-window.cc-banner .cc-message{margin-right:0}}
.cc-floating.cc-theme-classic{padding:1.2em;border-radius:5px}.cc-floating.cc-type-info.cc-theme-classic .cc-compliance{text-align:center;display:inline;-webkit-box-flex:0;-ms-flex:none;flex:none}.cc-theme-classic .cc-btn{border-radius:5px}.cc-theme-classic .cc-btn:last-child{min-width:140px}.cc-floating.cc-type-info.cc-theme-classic .cc-btn{display:inline-block}
.cc-theme-edgeless.cc-window{padding:0}.cc-floating.cc-theme-edgeless .cc-message{margin:2em;margin-bottom:1.5em}.cc-banner.cc-theme-edgeless .cc-btn{margin:0;padding:.8em 1.8em;height:100%}.cc-banner.cc-theme-edgeless .cc-message{margin-left:1em}.cc-floating.cc-theme-edgeless .cc-btn+.cc-btn{margin-left:0}

/* PAGE TRANSITIONS */

html.is-changing .transition-main {
  transition: transform 400ms ease-in-out;
}

html.is-animating.is-leaving .transition-main {
  transform: translateY(calc(1 * 5vh * var(--overlay-direction, 1)));
}

html.is-animating.is-rendering .transition-main {
  transform: translateY(calc(-1 * 5vh * var(--overlay-direction, 1)));
}


.transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background-color: #000000;
  opacity: 0;
  transform: translate3d(0, calc(-1 * 100% * var(--overlay-direction, 1)), 0);
  pointer-events: none;
}

html.is-changing .transition-overlay {
  transition: transform 400ms ease-in-out;
  opacity: 1;
}

html.is-animating .transition-overlay {
  transform: translate3d(0, 0, 0);
}

html.is-rendering .transition-overlay {
  transform: translate3d(0, calc(var(--overlay-direction, 1) * 100%), 0);
}

html.to-back {
  /* --overlay-direction: -1; */
}