body{
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    width: 100vw;;
    
}
#PageAnimation{
    background-color: #ffffff;
    top: 0vh;
    width: 100vw;
    height: 400vh;
    position: absolute;
    z-index: 2;
    opacity: 0;
    animation: appear1 forwards 3s;
}


#BlackSec1{
    background-color: #000000;
    top: 0vh;
    width: 100vw;
    height: 270vh;
    position: absolute;
}

#BlackSec2{
    background-color: #000000;
    top: 375vh;
    width: 100vw;
    height: 270vh;
    position: absolute;
}

@keyframes appear1 {
    0%{
        opacity: 0;
    }
    60%{
        opacity: 0;
    }
    65%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

#TollkühnLogo{
    width: 20vw;
    top: 2vh;
    left: 40vw;
    position: absolute;
    z-index: 2;
}

#BikeBlack{
position: absolute;
width: 50vw;
top: 14vh;
left: 25vw;
opacity: 1;
}

#BikeWhite{
    position: absolute;
    width: 80vw;
    top: 10vh;
    left: 10vw;
}

#Biker{
    width: 30vw;
    top: 180vh;
    left: 0vw;
    position: absolute;
}

#Navigatorzeile{
top: 15vh;
position: fixed;
width: 100vw;
text-align: center;
z-index: 12;
font-size: 9vw;
font-family: roc-grotesk, sans-serif;
font-weight: 600;
font-style: normal;
display: none;
}

a{
    text-decoration: none;
    color: black
}

a:hover{
    color: #7C2529;
    transition: 1s;
}

#BurgerButton{
    width: 10vw;
    position: fixed;
    top: 5vh;
    right: 4vw;
    z-index: 5;
}

#BurgerButton2{
    width: 6vw;
    position: absolute;
    top: 4vh;
    left: 4vw;
}

#LinkPage{
    width: 100vw; 
    background-color: white;
    top: 0vh;
    height: 100vh;
    z-index: 3;
    position: fixed;
    opacity: 0;
    
}

@media only screen and (orientation: portrait) {


#Home{
    visibility: hidden;
}
#TollkühnLogo{
width: 55vw;
height: 15vh;
top: 0vh;
left: 0vw;
position: absolute;
z-index: 2;
}


#BikeBlack{
    position: absolute;
    width: 100vw;
    top: 15vh;
    left: 0vw;
    opacity: 1;
    }

    
    #BikeWhite{
    position: absolute;
    width: 100vw;
    top: 15vh;
    left: 0vw;
    opacity: 1;
    
    
    }


#Biker{
    width: 90vw;
    top: 320vh;
    left: 0vw;
    position: absolute;
    z-index: 10;
}
}

#Tshirts{
    width: 100vw;
    position: absolute;
    top: 120vh;
    text-align: center;
    font-size: 9vw;
font-family: roc-grotesk, sans-serif;
font-weight: 600;
font-style: normal;
color: white;
z-index: 3;
}



#WhiteT{
    width: 90vw;
    position: absolute;
    left: 5vw;
    top: 140vh;
    opacity: 1;
    display: block;
}

#PurpleT{
    width: 90vw;
    position: absolute;
    left: 5vw;
    top: 140vh; 
    opacity: 0;
    display: none;
}

#ArrowRight{
    width: 15vw;
    position: absolute;
    left: 55vw;
    top: 200vh; 
    z-index: 10;
    
}

#ArrowLeft{
    width: 15vw;
    position: absolute;
    left: 30vw;
    top: 200vh; 
    z-index: 10;
    
}

#ArrowRight2{
    width: 15vw;
    position: absolute;
    left: 55vw;
    top: 460vh; 
    z-index: 10;
    
}

#ArrowLeft2{
    width: 15vw;
    position: absolute;
    left: 30vw;
    top: 460vh; 
    z-index: 10;
    
}

#Headline{
    font-family: open-sans-condensed, sans-serif;
    
    font-weight: 700;
    
    font-style: normal;
    font-size: 8vw;
}
#WhiteTText{
    width: 90vw;
    position: absolute;
    left: 5vw;
    top: 220vh;
    text-align: left;
    color: white;

    font-family: open-sans-condensed, sans-serif;
    
    font-weight: 700;
    
    font-style: normal;
}
#Dünn{
    

font-family: open-sans-condensed, sans-serif;

font-weight: 300;

font-style: normal;

}











#Caps{
    width: 100vw;
    position: absolute;
    top: 395vh;
    text-align: center;
    font-size: 9vw;
font-family: roc-grotesk, sans-serif;
font-weight: 600;
font-style: normal;
color: white;
z-index: 3;
}

#CapWhite{
    width: 90vw;
    position: absolute;
    left: 5vw;
    top: 420vh;
    opacity: 1;
    display: block;
}

#CapRed{
    width: 90vw;
    position: absolute;
    left: 5vw;
    top: 412vh; 
    opacity: 0;
    display: none;
}

#WhiteCapText{
    width: 90vw;
    position: absolute;
    left: 5vw;
    top: 480vh;
    text-align: left;
    color: white;

    font-family: open-sans-condensed, sans-serif;
    
    font-weight: 700;
    
    font-style: normal;
}

#Headline2{
    font-family: open-sans-condensed, sans-serif;
    
    font-weight: 700;
    
    font-style: normal;
    font-size: 8vw;
}
#Dünn{
    

font-family: open-sans-condensed, sans-serif;

font-weight: 300;

font-style: normal;

}















#TextTollkühn{
    width: 80vw;
    left: 10vw;
    text-align: center;
    font-size: 5vw;
    font-family: montserrat, sans-serif;
    font-weight: 200;
    font-style: normal;
    color: white;
    position: absolute;
    top: 285vh;
}

#Gradientblock{
    width: 100vw;
    top: 50vh;
    position: absolute;
    z-index: 2;
    
}

































































































/*------------------------------------------------------------------------------------------------------------------------------------*/


#Tollkühn{
    font-family: roc-grotesk, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 9vw;
}

#DieGefahr{
    font-family: open-sans-condensed, sans-serif;
    
    font-weight: 700;
    
    font-style: normal;
    font-size: 8vw;
color: #000000;
opacity: 0;
animation: appear2 2s ease-in forwards;
}

@keyframes appear2 {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

#Saying{
    width: 100vw;
    text-align: center;
    position: absolute;
    top: 40vh;
    
}