body{
    width: 100vw;
    overflow-x: hidden;
    padding: 0 ;
    margin: 0;
}
main{
    margin-top: 100vh;
}

header{
    
  
   
    position: absolute;
    top: -250vh;
 
    left: -170vw;
    width: 440vw;
    height: 400vh;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(6, 1fr);
    
    grid-template-areas: 
    "a b c d e"
    "a b c d e"
    "a b div d e"
    ". g div i j"
    "f g h i j"
    "f g h i j"
    ;
    overflow: hidden;
    background-color: #212121;
}
header img:first-child{
    width: 60vw;
    grid-area: a;
}
header img:nth-child(2){
    width: 60vw;
    grid-area: b;
    
}
img:nth-child(3){
    width: 100%;
    grid-area: c;
    align-self: center;
    justify-self: end;
}
img:nth-child(4){
    width: 84vw;
    grid-area: d;
    align-self: end;
    padding-bottom: 10%;
    justify-self: end;
    margin-right: -10%;
}
img:nth-child(5){
    width: 60vw;
    grid-area: e;
    justify-self: end;
    
}

header div{
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    grid-area: div;
    justify-self: center;
   align-self: center;
color: white;
    background-color: #121212 ;
display: flex;
flex-direction: column;
justify-content: center;
padding-inline: 25%;


}
header h2:first-child{
    margin-left: -10%;
}
header div h2{
      font-family: "Architects Daughter", cursive;
      text-transform: uppercase;
      font-size: 4vw;
      opacity: 50%;
      text-decoration: underline;
      margin: 0;
      line-height: 4vw;



}

h2.fineprint{
    margin-left: 24%;
    font-size: 1vw;

    font-family: "Montserrat";

}

h2.fineprintPl{
    margin-left: 7%;
    font-size: 1vw;

    font-family: "Montserrat";
}

h2.fineprintDe{
    margin-left: 19%;
    font-size: 1vw;

    font-family: "Montserrat";
}

header div h1{
    font-family: "monterrat", sans-serif;
    font-weight: 300;
    text-transform: uppercase;
    font-size: 6vw;
    text-align: center;
    margin: 0;

    width: max-content;
}
img:nth-child(7){
    width: 40vw;
    grid-area: f;
    justify-self: center;
}
img:nth-child(8){
    width: 52vw;
    grid-area: g;
}
img:nth-child(9){
    width: 100%;
    grid-area: h;
    margin-left: -10%;
}
img:nth-child(10){
    width: 48vw;
    grid-area: i;
    justify-self: center;
    align-self: center;
}
img:nth-child(11){
    width: 60vw;
    grid-area: j;
}
main{
    box-sizing: border-box;
    color: #ffff;
    width: 100vw;


}
body{
    width: 100vw;
    box-sizing: border-box;
    background-color: #212121;
    
}
h1,h2,h3,h4{
    font-family: "montserrat",sans-serif;
    text-decoration: underline;
   
}
p, ul, td{
    font-family: "hind", sans-serif;
}
h1{
    font-size: 5rem;
    font-weight: 400;

}
main article{
    display: flex;
    justify-content: space-between;
    gap: 3rem;
    align-items: center;

   

}




section{
    display: flex;
    flex-direction: column;

    align-items: center;

    img{
        width: 20vw;
    };
}


.loop--slider{
    margin-block: 5rem;
}

main article p , main article div{
    text-align: left;
    font-size:  1.3rem;
    width: 40vw;
}

main article img{
    width: 40vw;
    align-self: center;
    
}


table, th, td{
    padding: 0.5rem;
    border-collapse: collapse;
    font-size: 0.7rem;
   
}
th{
    background-color: #000;
    color: #fff;
    font-family: "montserrat",sans-serif;
}
tr:nth-of-type(2n){
    background-color: #eee;
}
table:nth-of-type(4){
    grid-column: 1 / 4;
}

section:nth-of-type(2) img{
    width: 30vw;
  
}

.kontakt{
   
margin-top: 3rem;

display: block;
margin-inline: auto;

}
footer{

    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    h2{
        font-size: 2rem;
        text-decoration: none;
        color: #666;
    }
}
.left{
    left: 1.5rem;
}
h2{
    font-size: 4rem;
}

#oMnie{
    background-color: #fff;
    width: 1000px;
    padding: 1rem;
    margin-inline: auto;
    rotate: -10deg;
    -webkit-box-shadow: 6px 6px 0px 0px #a8a8a8;
    -moz-box-shadow: 6px 6px 0px 0px #a8a8a8;
    box-shadow: 6px 6px 0px 0px #a8a8a8;
    color: #121212;
   
}
.oMnieContainer{
height: 1200px;
display: flex;
align-items: center;
justify-content: center;
}

#oMnie h2{
    font-size: 6rem;
    font-weight: 500;
    font-family: "Montserrat", sans-serif;
    text-decoration: underline;
    margin-top: 0;
    margin-bottom: 1rem;
    width: 100%;
    
}

#oMnie h2::after{

content: "";
display: block;
height: 30px;
width: 30px;
border-radius: 50%;
background-color: #000;
float: right;


}

#oMnie p{

    font-family: "Montserrat", sans-serif;
    font-size: 1.2rem;
   width: 150%;
    margin-right: 3rem;
    text-align: justify;
   
    

}
#oMnie article{
    
    width: 1000px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    

}

#oMnie img{
  
    width: 350px;
    
}
#oMnie img:nth-of-type(2){
    background-color: #121212;
}
#oMnie img:nth-of-type(3){
    background-color: #012676;
}

@media screen and (max-width: 1000px){


    main article p, main article div {
        width: 100% ;
        text-align: justify ;
    }
    main img{
        width: 70vw ;
    }
    
    #oMnie article{
        flex-direction: column;
       padding: 3rem;
        width: 100vw;
        box-sizing: border-box;
          
    }

    #oMnie{
        rotate: 0deg;
        width: 100vw;
        box-sizing: border-box;

    }
    #oMnie div{
        display: flex;
        flex-direction: column;

        align-items: center;
        gap: 1rem;
    }
    #oMnie div img{
        width: 85vw;
        
    }

    .oMnieContainer{
        height: auto;
    }
    #oMnie p{
        width: 100%;
        margin: 0;
        font-size: 1.5rem;  
    }

}
@media screen and (max-width: 600px){


    .tracker{
        display: none;
        
    }
    main{
        padding-inline: 1rem;
    }
    main img{
        width: 90vw !important;
    }
    header video{
        display: none;
    }
    h1{
        font-size: 3rem;
    }
    header{
        grid-template-areas: 
        ". . . . ."
        ". . . . ."
        ". b div d ."
        ". f div . ."
        ". f h e ."
        ". . . . ."
        ;
    }

}