@font-face{ 
	font-family: 'roboto';
	src: url('../fonts/Roboto-Thin.ttf') format('truetype');
    font-weight: 300;
}
@font-face{ 
	font-family: 'roboto';
	src: url('../fonts/RobotoCondensed-Regular.ttf') format('truetype');
    font-weight: 500;
}
@font-face{ 
	font-family: 'roboto';
	src: url('../fonts/RobotoCondensed-Bold.ttf') format('truetype');
    font-weight: 800;
}
* {
    font-family: forma-djr-deck,roboto,sans-serif;
    font-weight: 300;
    box-sizing: border-box;
    /*word-spacing: .25em;*/
}
body {
    background-color: black;
    color: white;
    font-family: forma-djr-deck,roboto,sans-serif;
    font-weight: 300;
    overflow-x: hidden;
}
h1 {
    font-weight: 800;
    text-transform: uppercase;
    margin: 0;
}

.entry h1 {
    text-transform: none;
}
h2 {
    font-weight: 300;
    text-transform: uppercase;
    margin: 0;
}
p {
    font-size: 1.4rem;
}
@media screen and (max-width: 64em) {
    p {
        font-size: 4vw;
        padding: 2rem;
    }
    h1 {
        font-size: 6vw;
        padding: 0 2rem;
    }
    h2 {
        font-size: 4.5vw;
        padding: 1rem;
    }
    body {
        /*width: min-content;*/
    }
}

a {
    color: inherit;
    text-decoration: none;
}
a:hover {
    color: #ED1C24;
}
.w48 {
    max-width: 64em;
    margin-left: auto;
    margin-right: auto;
    display: flex;
}
.max-width {
    max-width: 1140px;
    left: 50%;
    transform: translate(-50%, 0);
    position: relative;
    /*position: absolute;*/
    width: 100%;
}
section {
    width: 100%;
    position: relative;
    overflow: hidden;
}
.pad-10p {
    padding: 10%;
}
mark.red {
    color: #ED1C24;
    background-color: transparent;
    font-weight: 800;
}
.modalVideo {
    min-height: 400px;
}

@media screen and (max-width: 1160px) {
    .full-w {
        padding: 0 5%;
    }
}

/*
#Erste Section -> ENTRY
*Video mit Funken
*Logo mittig + Headlines
*/
.entry {
    min-height: 100vh;
}
.entry-logo {
    padding: 35% 10% 10% 10%
}
.entry video {
    height: 100vh;
    width: 100%;
    object-fit: cover;
    position: absolute;
}
.entry > div {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-content: center;

}
.entry h1 {
    --minFontSize: 2rem;
    --maxFontSize: 3.75rem;
    --scaler: 5vw;
    font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
}
.entry h2 {
    --minFontSize: 1rem;
    --maxFontSize: 3rem;
    --scaler: 2vw;
    font-size: clamp( var(--minFontSize), var(--scaler), var(--maxFontSize) );
}
.entry .full-w {
    padding-bottom: 3em;
}

.return {
    position: absolute;
    margin: 2em;
    letter-spacing: normal;
    font-size: 1.4rem;
    padding: .2em;
    z-index: 1;
    width: 100%;
}

.return .back {
    border-bottom: solid;
}

#extreme_lang {
    position: absolute;
    width: auto;
    top: 0;
    right: 4em;
}

#menuLink1 {
    color: #ffffff;
}

#main_lang {
    background-color: transparent;
}

.pure-menu-link {
    color: #ffffff;
}

@media screen and (max-height: 900px) {
    .entry-logo {
        padding: 10%;
    }
}

@media screen and (max-width: 64em) {
    .entry h1 {
        --scaler: 8vw;
        padding: 0;
    }
    .entry h2 {
        --scaler: 4vw;
        padding: 0;
    }
    .return {
        font-size: 4vw;
    }
}

/*
#Zweite Section -> QUOTE
*Hintergrund grau
*Composing
*Zitat Brockmöller
*Inner Shadow top/bottom
*/

.quote {
    background-color: #434343;
    height: 40vh;
}
.quote img {
    position: absolute;
    height: 100%;
}
.quote .shadow {
    box-shadow: 
        inset 0px 10px 20px -10px #000000,
        inset 0px -10px 20px -20px #000000;
        height: 100%;
        width: 100%;
    position: absolute;
}
.quote .quote-text{
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
.quote-text .columns{
    padding: 2em;
}
.columns {
    columns: 2;
    column-gap: 2em;
    text-align: justify;
    /*font-size: 1.4em;*/
}
.qoute .columns {
    padding: 2em;
}
.quote .quotes {
    font-size: 8em;
    font-weight: 800;
    margin: 0;
    line-height: 0;
}
.quote-text :first-of-type {
    margin-bottom: -.2em;
    text-align: start;
}
.quote-text :last-of-type {
    text-align: right;
}
.quote-text div {
    position: absolute;
    right: 0;
    padding: 2em;
}
@media screen and (max-width: 64em){
    .quote {
        height: 50vh;
    }
    .quote-text div {
        padding: 0;
    }
    .quote img {
        opacity: 30%;
    }
    /*.quote .columns {
        font-size: 1.7em;
    }*/
}
@media screen and (max-width: 64em){
    .columns {
        columns: 1;
        /*font-size: 1.5em;*/
    }
}
@media screen and (max-height: 900px) {
    .quote {
        height: 50vh;
    }
    .columns {
        /*font-size: 1.2em;*/
    }
}

/*
#Dritte Section -> VIDEO-TEASER
*Paar Sequenzen aus dem Video
*Öffnet ein Modal mit dem vollen Video 
*/
.video-teaser {
    min-height: 80vh;
    /*max-height: 80vh;*/
}
.video-teaser video {
    min-height: 40vh;
    max-height: 40vh;
    width: 100%;
    object-fit: cover;
    position: absolute;
    opacity: 50%;
}
.video-teaser > div > div:first-child {
    min-height: 40vh;
    max-height: 40vh;
    display: flex;
    align-content: center;
    text-align: center;
}
.video-teaser h3 {
    opacity: 50%;
}
.video-teaser i:hover, .hackshare i:hover {
    opacity: 100%;
}
.video-teaser i, .hackshare i {
    font-size: 6em;
    opacity: 50%;
    cursor: pointer;
    transition: 500ms linear;
}
.video-teaser > div > div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 50%;
    flex-wrap: wrap;
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}
@media screen and (max-width: 64em){
    .video-teaser {
        /*height: 50vh;*/
    }
    .video-teaser video {
        min-height: 40vh;
    }
    .video-teaser > div > div > div{
        flex-direction: column;
    }
}
/*@media screen and (max-height: 900px) {
    .video-teaser {
        height: 60vh;
    }
    .video-teaser video {
        height: 60vh;
    }
    .video-teaser > div > div{
        height: 60vh;
    }
}*/

/*
#Vierte Section -> HACKSCHARE
*/

.hackshare {
    min-height: 80vh;
}
.hackshare h1 {
    text-transform: none;
    font-weight: 800;
}
.hackshare > img {
    transform: translate(0, -10%);
    position: absolute;
    right: 0;
    height: auto;
    width: 50%;
}
.hackshare > div > div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 50%;
    flex-wrap: wrap;
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}
#made-left img {
    width: 100%;
}

.buttons {
    /*gap: 10%;*/
    padding: 1em;
}

.buttons object {
    height: 100%;
}
.buttons > div > div >div {
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    flex-direction: column;
}

.button-pic {
    height: 100%;
    width: 100%;
    overflow: hidden;
    border-radius: 30px;
}

.button-pic img {
    width: 100%;
}

.buttons i {
    font-size: 3rem;
}

.buttons > div {
    height: 20em;
    flex: 0 0 auto;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-top: var(--bs-gutter-y);
}

.buttons > div > div {
    border-radius: 2em;
    border: solid 1px #ED1C24;
}

@media screen and (max-width: 64em) {
    .hackshare > div > div:first-child > div:last-child {
        padding-right: 0;
        padding: 1em;
    }
    .hackshare > img {
        z-index: 1;
        width: 90%;
        opacity: 50%;
    }
    .hackshare > div > div {
        flex-direction: column;
    }
    
    .buttons > div {
        height: 40em;
    }

    .buttons i {
        font-size: 6rem;
    }
}
@media screen and (max-width: 1160px) {
    .hackshare > div > div:first-child > div:last-child {
        padding-right: 1em;
    }
}

/*
#Fünfte Section -> EXTREME-CLAIM
*/

.extreme-claim{
    min-height: 50vh;
    margin-bottom: 5em;
}
.extreme-claim > div {
    top: 100;
    /*height: 100%;*/
    padding: 1em;
}
.extreme-claim > div > div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 50%;
}
.extreme-claim > div > div > div:first-child {
    position: absolute;
    z-index: -1;
}
.extreme-claim img {
    width: 100%;
}

@media screen and (max-width: 64em) {
    .extreme-claim > div > div > div {
        padding-right: 0;
        padding: 1em;
    }
    .extreme-claim > div {
        top: 0;
    }
    .extreme-claim > div > div > div:first-child {
        opacity: 50%;
        /*height: 50%;*/
        top: 0;
        overflow: hidden;
    }
    .extreme-claim > div > div > div:nth-child(2) {
        padding-top: 5%;
    }
    .extreme-claim img {
        top: -160;
        position: relative;
    }
    .extreme-claim > div > div {
        flex-direction: column;
    }
}
@media screen and (max-width: 1160px) {
    .extreme-claim > div > div > div{
        padding-right: 1em;
    }
}
@media screen and (max-height: 900px) {
    .extreme-claim {
        height: 70vh;
    }
}
@media screen and (max-width: 64em) {
    .extreme-claim {
        min-height: 60vh;
    }
    .extreme-claim .pure-u-2-3 {
        float: right;
    }
    .extreme-claim img {
        top: -50;
    }
}

/*
#Sechste Section -> X-TELL-ALL
*/

.x-tell-all {
    min-height: 60vh;
    overflow: initial;
    margin-bottom: 5em;
}
.x-tell-all > img {
    width: 70%;
    position: absolute;
    top: -10em;
    left: -5em;
}
.x-tell-all > div > div:nth-child(1) {
    display: flex;
    justify-content: center;
    align-items: center;
}
.x-tell-all object {
    height: 5em;
}
.x-tell-all > div {
    padding: 1em;
}
/*.x-tell-all > div > div:nth-child(2) {
    display: flex;
    justify-content: center;
    align-items: center;
}*/
.x-tell-all .gallery {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    padding: 2em 0;
}
.x-tell-all .gallery img:nth-child(1){
    width: 30%;
    transform: translateX(5em);
}
.x-tell-all .gallery img:nth-child(2){
    width: 50%;
    z-index: 2;
}
.x-tell-all .gallery img:nth-child(3){
    width: 30%;
    transform: translateX(-5em);
}

@media screen and (max-width: 64em) {
    .x-tell-all > img {
        width: 100%;
    }
}

/*
#Siebte Section -> EXTREME-INFO
*/
.extreme-info {
    min-height: 60vh;
    overflow: initial;
}
.extreme-info p {
    flex: 1;
}
.extreme-info > div > div:nth-child(2) {
    display: flex;
    column-gap: 1em;
    padding: 2em 1em;
    flex-direction: row;
    flex-wrap: wrap;
}
.extreme-info > div > div:first-child {
    padding: 2rem;
}
@media screen and (max-width: 64em) {
    .extreme-info > div > div:nth-child(2) {
        flex-direction: column;
    }
}
@media screen and (max-width: 64em) {
    /*.extreme-info p {
        flex: 1 0 33%;
    }*/
    .extreme-info p:nth-child(2) {
        order: 2;
    }
}
/*.extreme-info p {
    float: left;
    padding: 0 1em;
}*/

footer {
    width: 100%;
    font-weight: 500;
    font-size: inherit;
    position: relative;    
}
footer ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    column-gap: 1em;
}
footer nav {
    padding: 1em;
    display: flex;
    flex-wrap: wrap-reverse;
    column-gap: 2em;
    justify-content: space-between;
}
footer > img {
    width: 100%;
    position: absolute;
    bottom: 100;
    z-index: -1;
}
footer a {
    font-weight: 500;
    font-size: inherit;
}
footer p {
    font-size: inherit;
    font-weight: 500;
}
.footer-bottom{
    background-color: #005e45;
    width: 100%;
}
.footer-bottom > div {
    padding: 1em;
}

@media screen and (max-width: 64em) {
    footer ul {
        font-size: 4vw;
    }

    .footer-bottom {
        font-size: 4vw;
    }

    footer > img {
        bottom: 500;
    }
    nav img {
        height: 60;
    }

    #socialLinks {
        width: 100%;
        justify-content: space-around;
    }
    
}

/*
.ih-footer nav {
	padding: 30px 0;
  }
  @media only screen and (min-width: 64.063em) {
	.ih-footer nav {
	  display: -ms-grid;
	  display: grid;
	  -ms-grid-columns: auto auto;
	  grid-template-columns: auto auto;
	}
  }
  .ih-footer ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
  }
  @media only screen and (min-width: 40.063em) {
	.ih-footer ul {
	  display: flex;
	}
  }
  .ih-footer ul li:not(:last-child) {
	margin-bottom: 15px;
  }
  @media only screen and (min-width: 40.063em) {
	.ih-footer ul li:not(:last-child) {
	  margin-right: 50px;
	}
  }
  .ih-footer ul li a {
	color: #FFFFFF;
	text-decoration: none;
  }
  .ih-footer ul li a:hover {
	color: #005E45;
  }
  */
  li.alang_link.currlang.pure-menu-item {
    padding: .5em 1em;
}
li.alang_link.currlang.pure-menu-item span {
    color: #FFD700;
    text-decoration: underline;
}

.benefits {
    margin-top: 8rem;
}

.benefits h1{
    text-align: center;
}

.benefits object {
    height: 4em;
}

.benefits > div {
    display: flex;
    flex-direction: column;
}

.benefits > div > div {
    display: flex;
    align-items: center;
    margin: 1em;
}

.benefits > div > div:nth-child(2) {
    margin-left: 5%;
}

.benefits > div > div:nth-child(3) {
    margin-left: 10%;
}

.benefits > div > div:nth-child(4) {
    margin-left: 15%;
}

.benefits > div > div:nth-child(5) {
    margin-left: 20%;
}
.modal {
    background-color: 111111;
   
}