html, body{
    padding: 0;
    margin: 0;
    font-family: AkkReg;
    font-weight: normal;
    font-size: 1.1em;
    color: rgb(50,50,50);
    display: inline;
    letter-spacing: 0.02rem;
}

a, a:visited, a:active, a:link{
    text-decoration: none;
    color: white;
}

a:hover{
    text-decoration: underline;
    color: white;
    cursor: pointer;
}

#buttonLiveTiming{
    width: calc(80vw-4rem) !important;
    display: block;
    text-align: center; 
}

#buttonLiveTiming:hover{
    text-decoration: none;
    color: #7487b0 !important;
    background-color: white !important;
}

#buttonLiveTiming:visited, #buttonLiveTiming:active, #buttonLiveTiming:link{
    background-color: #7487b0;
    color: white;
}

@font-face{
    font-family: HelvCondBld;
    src: url("HelvCondBld.ttf");
    font-weight: normal;
    font-style:normal;
}

@font-face{
    font-family:AkkReg;
    src: url("AkkReg.ttf");
    font-weight: normal;
    font-style:normal;
}

@media (pointer: coarse) {
    html, body{
        color: white; 
        font-size: 0.9rem;
        overflow: hidden;
        display: block;
        opacity 1;
        transition: 1.5s;
        height: 100%;
    }
    
    #alertBoxWrapper{
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0,0,0,0.45);
        z-Index: 9999999999998;
    }
    
    #alertBox{
        position: relative;
        width: 80vw;
        height: auto;
        top: auto;
        display: inline-block;
        padding: 2rem;
        background-color: rgba(255,255,255,0.9);
        color: #4a6193;
        border-radius: 1rem;
        z-Index: 9999999999999;
        transition: 1s;
    }
    
    #buttonOkay{
        position: relative;
        left: 0;
        width: auto;
        transition: 0.5s;
        border: solid 0.1rem #4a6193;
        border-radius: 1.5rem;
        padding: 0.65rem 1rem;
        margin: 0.05rem 1rem;
        text-align: center;
        transition: all 0.7s ease;
    }
    
    .disappear{
        z-Index: -1000000 !important;
        opacity: 0;
    }
    
    #buttonOkay:hover{
        cursor: pointer;
        background-color: #4a6193;
        color: rgba(255,255,255,0.9);
    }
    
        .hide{
        display: none;
    }
    
    .show{
        display: block;
    }
    
    .content{
        height: 100%;
        transform: translateZ(-50vh);
        transition:1s
    }
        
    #container1{
        position: relative;
        width: 100vw;
        height: 100%;
        top: 0;
        left: 0;
        background-image: url(img/bild1.jpg);
        background-size:cover;
    }
    
    .header-touch{
        position: absolute;
        width:90vw;
        left: 5vw;
        top: 1rem;
        font-family: HelvCondBld;
        font-size: 2.5rem;
        line-height: 2.5rem;
        text-align: center;
        color: rgba(255,255,255,0.9);
        z-index: 999999;
    } 
    
    .buttonMenu{
        position: fixed;
        bottom: 2.5rem;
        left: 40vw;
        float: left;
        margin: 0;
        display: inline-block;
        border: solid 0.1rem white;
        border-radius: 1.5rem;
        padding: 0.65rem 1rem;
    }  
    
    .buttonMenu:hover{
        cursor: pointer;
        background-color: rgba(255,255,255,0.9);
        color: rgb(190,190,190);
        transition: 1s;
    }
    
    .button1, .button2, .buttonLiveTiming{
        position: relative;
        left: 0;
        width: auto;
        transition: 0.5s;
        border: solid 0.1rem white;
        border-radius: 1.5rem;
        padding: 0.65rem 1rem;
        margin: 0.05rem 1rem;
        text-align: center;
        transition: all 0.7s ease;
    }    
    
    .button1:hover, .button2:hover, .buttonLiveTiming:hover{
        cursor: pointer;
        background-color: rgba(255,255,255,0.9);
        color: #7487b0;
    }
    
    #backwards1{
        position: fixed;
        left: 150vw;
        bottom: 4rem;
        height: 3rem;
        width: 3rem;
        border-radius: 1.5rem;
        margin: -1.5rem;
        background-color: rgba(255,255,255,0.9);
        align-items: center;
        z-index: 999999;    
    }
    
    #backwards1 > img{
        position: absolute;
        left: 0.75rem;
        top: 0.92rem;
        width: 1.2rem;
    }  
    
    #backwards2{
        position: fixed;
        left: 250vw;
        bottom: 4rem;
        height: 3rem;
        width: 3rem;
        border-radius: 1.5rem;
        margin: -1.5rem;
        background-color: rgba(255,255,255,0.9);       align-items: center;
        z-index: 999999;
    }
    
    #backwards2 > img{
        position: absolute;
        left: 0.75rem;
        top: 0.92rem;
        width: 1.2rem;
    }   
    
    #backwards3{
        position: fixed;
        left: 350vw;
        bottom: 4rem;
        height: 3rem;
        width: 3rem;
        border-radius: 1.5rem;
        margin: -1.5rem;
        background-color: rgba(255,255,255,0.9);       align-items: center;
        z-index: 999999;
    }
    
    #backwards3 > img{
        position: absolute;
        left: 0.75rem;
        top: 0.92rem;
        width: 1.2rem;
    }      
    
    .footer{
        display: none;
    }
    
    .only-desktop{
        display: none;
    }
        
    .menu{
        position: absolute;
        padding: 1.5rem;
        padding-top: 4.5rem;
        padding-bottom: 3rem;
        height: 100%;        
        top: 0;
    }

    #menu1{
        background-color: #7487b0;
        left: 100vw;   
        width: 100vw;
    }
    
    #menu2{
        left: 200vw;
        background-color: #4a6193; 
        width: 100vw;
    }
    
    #menu3{
        left: 300vw;           
        background-color: #1b3265; 
        width: 100vw;
        padding: 0rem 3rem;
    }
    
    #inhalt1, #inhalt2, #inhalt3{
        position: absolute;
        width: 85vw;
        top: calc(9rem - 2.5rem);
        height: calc(100vh - 15rem);
        padding-top: 2.5rem;
        overflow-y: scroll;
        overflow-x: hidden;
    }
    
    .gradient1a{
        position: fixed;
        top: calc(9rem - 2.5rem);
        width: 80vw;
        height: 2.5rem;
        box-shadow: inset 0 1.25rem 1.25rem 0rem #7487b0;
        z-index: 9999;
    }
    
    .gradient1b{
        position: fixed;
        width: 80vw;
        height: 2.5rem;
        top: calc(100vh - 15rem + 9rem - 2.5rem);
        transform: rotate(180deg);
        box-shadow: inset 0 1.25rem 1.25rem 0rem #7487b0;
        z-index: 9999;
    }
    
    .gradient2a{
        position: fixed;
        top: calc(9rem - 2.5rem);
        width: 80vw;
        height: 2.5rem;
        box-shadow: inset 0 1.25rem 1.25rem 0rem #4a6193;
        z-index: 9999;
    }
    
    .gradient2b{
        position: fixed;
        width: 80vw;
        height: 2.5rem;
        top: calc(100vh - 15rem + 9rem - 2.5rem);
        transform: rotate(180deg);
        box-shadow: inset 0 1.25rem 1.25rem 0rem #4a6193;
        z-index: 9999;
    }   
    
    .gradient3a{
        position: fixed;
        width: 80vw;
        top: calc(9rem - 2.5rem);        
        height: 2.5rem;
        box-shadow: inset 0 1.25rem 1.25rem 0rem #1b3265;
        z-index: 9999;
    }
    
    .gradient3b{
        position: fixed;
        width: 80vw;
        height: 2.5rem;
        top: calc(100vh - 15rem + 9rem - 2.5rem);
        transform: rotate(180deg);
        box-shadow: inset 0 1.25rem 1.25rem 0rem #1b3265;
        z-index: 9999;
    }    
        
    a {
        position: relative;
        left:1.25rem;
        width: 70vw;
        display: inline-flex;
    }
    
    .shift-content-1{
        transform: translateX(-100vw);
    }
    
    .shift-content-2{
        transform: translateX(-200vw);
    }

    .shift-content-3{
        transform: translateX(-300vw);
    }
     
    .button1:hover, .button2:hover, .buttonLiveTiming:hover{
        position: relative;
        transition: 1s; 
        background-color:white;
        color: #7487b0;
    }

}    

@media (pointer: fine) {
    html, body{
        color: white;
        display: block;
        opacity 1;
        transition: 1.5s;
    }
    
    #buttonLiveTiming:hover{
        text-decoration: none !important;
        color: #7487b0 !important;
    }

    #buttonLiveTiming:visited{
        background-color: #7487b0 !important;
        color: white !important;
    }
    
    .only-touch{
        display: none;
    }
    
    .text{
        position: relative;
        padding: 1.75rem;
        margin: 0;
    }
    
    #alertBoxWrapper{
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0,0,0,0.45);
        z-Index: 9999999999998;
    }
    
    #alertBox{
        position: relative;
        width: 33.3vw;
        height: auto;
        top: auto;
        display: inline-block;
        padding: 2rem;
        background-color: rgba(255,255,255,0.9);
        color: #4a6193;
        border-radius: 1rem;
        z-Index: 9999999999999;
        transition: 1s;
    }
    
    #buttonOkay{
        position: relative;
        left: 0;
        width: auto;
        transition: 0.5s;
        border: solid 0.1rem #4a6193;
        border-radius: 1.5rem;
        padding: 0.65rem 1rem;
        margin: 0.05rem 1rem;
        text-align: center;
        transition: all 0.7s ease;
    }
    
    .disappear{
        z-Index: -1000000 !important;
        opacity: 0;
    }
    
    #buttonOkay:hover{
        cursor: pointer;
        background-color: #4a6193;
        color: rgba(255,255,255,0.9);
    }
    
    .footer{
        position: absolute;
        width:33.3vw;
        bottom: 0;
        font-family: HelvCondBld;
        font-size: 4.3rem;
        text-align: center;
    }
    
    #footer1, #footer2, #footer3{
        color: rgba(255,255,255,0.75);
    }
    
    .header{
        position: relative;
        width:33.3vw;
        top: 0;
        font-family: HelvCondBld;
        font-size: 4.3rem;
        text-align: center;
        color: rgba(255,255,255,0.9);
    }   
    
    .section{
        width: 100%;
        height: 100%;
        position: relative;
        transform-style: preserve-3d;   
    }
    
    #container1{
        left:0;
        background-image: url(img/bild1.jpg);
        background-size:cover;
    }
    #container2{
        left:33.3vw;
        background-image: url(img/bild2.jpg);
        background-size:cover;
    }
    #container3{
        width: 33.4vw;
        left:66.6vw;
        background-image: url(img/bild3.jpg);
        background-size:cover;
    }
         
    .container{
        position: absolute;
        top: 0vh;
        width:33.3vw;
        height:100vh;
        overflow: scroll;
        z-index: 999999;
        -moz-box-shadow: inset -10px 0px 10px -8px  rgba(0,0,0,0.5); 
        -webkit-box-shadow: inset -10px 0px 10px -8px  rgba(0,0,0,0.5); 
        box-shadow: inset -10px 0px 10px -8px  rgba(0,0,0,0.5);   
        transform: rotateX(0deg) translateZ(50vh);
        transition: 1.5s linear;
    }
    
    .menu{       
        position: absolute;
        top: 0vh;
        width:33.3vw;
        height:100vh;
        overflow: scroll;
        -moz-box-shadow: inset -10px 0px 10px -10px rgba(0,0,0,0.5); 
        -webkit-box-shadow: inset -10px 0px 10px -10px rgba(0,0,0,0.5); 
        box-shadow: inset -10px 0px 10px -10px rgba(0,0,0,0.5);
        transform: rotateX(-90deg) translateZ(50vh);
        transition: 1.5s linear;   
    }

    .tilt-container{
        transform: rotateX(90deg) translateZ(50vh);
    }

    .tilt-menu{
        transform: rotateX(0deg) translateZ(50vh);
    }
    
    #menu1{
        background-color: #7487b0;
    }
   
    #menu2{
        background-color: #4a6193;
        left:33.3vw;
    }
     
    #menu3{
        background-color: #1b3265;
        left:66.6vw;
        width: 33.4vw;
    }
    
    a {
        position: relative;
        left:1.25rem;
        width: 23vw;
        display: inline-flex;
    } 

    .hide{
        display:none;
    }
    
    .show{
        display:show;
    }
        
    .button1, .button2, .buttonLiveTiming{
        position: relative;
        left: 0;
        width: auto;
        transition: 0.5s;
        border: solid 0.1rem white;
        border-radius: 1.5rem;
        padding: 0.65rem 1rem;
        margin: 0.05rem 1rem;
        text-align: center;
        transition: all 0.7s ease;
    }
    
    .buttonMenu{
        position: absolute;
        top: 1.5rem;
        left: 1.5rem;
        float: left;
        margin: 0;
        display: inline-block;
        border: solid 0.1rem white;
        border-radius: 1.5rem;
        padding: 0.65rem 1rem;
    }    

    .buttonMenu:hover{
        cursor: pointer;
        background-color: rgba(255,255,255,0.9);
        color: rgb(190,190,190);
        transition: 1s;
    }
    
    .button1:hover, .button2:hover, .buttonLiveTiming:hover{
        cursor: pointer;
        background-color: rgba(255,255,255,0.9);
        color: #7487b0;
    }
    
    .active{
        background-color: rgba(255,255,255,0.9);
        color: #7487b0;
    }
    
    #cancelMenu{
        position: absolute;
        bottom: 1.75rem;
        width: 28vw;
        text-align: center;
        z-index:9999999;
    }
    
    #cancelMenu:hover{
        cursor:pointer;
    }
    
    #cancelMenu>img{
        width: 1.3rem;
        transition: 0.4s;
    }
    
    #cancelMenu>img:hover{
        width:2rem;
    }
        
}

