/* STRUKTUR --------------------------------------------------------------------------------------------------------------------- */

section{    
position: relative;
top: 0px;
left: 0px;
}

.flexbox1{
    width: 100vw;
    height: 60vh;
    display: flex;
    flex-direction: column;
}

.flexbox2{
width: 100vw;
height: 40vh;
display: flex;
justify-content: flex-end;
flex-direction: column;
}

.flexbox3{
width: 100vw;
height: 50vh;
display: flex;
flex-direction: column;
}

 /* SMALLTEXT  -------------------------------------------------------------------------------------------------------- */
  
 .smalltext{
    font-family: "acumin-pro";
    font-weight: bold;
    line-height: 160%;
    padding: 40px;
    animation-name: appear;
    animation-duration: 3s;
  }
   

    .smalltext.right{
    text-align: right;
    }

    @keyframes appear {
        0%{
            opacity: 0;
            transform: translateY(-20px);

        }
    
        100%{
            opacity: 1;
            transform: translateY(0);
        }
    
    }




/* A SOUND A SOUND --------------------------------------------------------------------------------------------------------*/


.zeile{
    animation-name: scale;
    animation-duration: 3s;
  }

.uppercase1{
    font-family: "acumin-pro-extra-condensed";
    text-transform: uppercase;
    text-align: center;
    font-size: 15vw;
    line-height: 40%;
    color: #F0F2F0;
}

.uppercase2{
    font-family: "acumin-pro-extra-condensed";
    text-transform: uppercase;
    text-align: center;
    font-size: 20vw;
    line-height: 40%;
    color: #F0F2F0;
}

@keyframes scale {
    0%{
        transform: scale(0);
        opacity: 0;
    }

    100%{
        transform: scale(1);
        opacity: 1;
    }

}

/* BOLDTEXT --------------------------------------------------------------------------------------------------------*/


.boldtext.right{
    text-align: right;
    font-size: 9vw;
    font-family: "acumin-pro";
    font-weight: bold;
    }
    
.boldtext.left{
    text-align: right;
    font-size: 9vw;
    font-family: "acumin-pro";
    font-weight: bold;
    transform: rotate(-180deg);
    }


.highlight-green{
   
   position: relative;

 }
 
 .highlight-green:after  {
   content: "";
   display: inline-block;
   position: absolute;
   width: 0;
   height: 100%;
   z-index: -1; 
   top: 0;
   left: 0;
   background: linear-gradient(to top, #8DA091 50%, transparent 50%);
   animation-name: highlight;
   animation-duration: 1s;
   animation-iteration-count: 1; 
   animation-fill-mode: forwards; 
 }
 .highlight-green.delay:after{
     animation-delay: 1s;
 }



.highlight-orange{
display: inline-block;   
position: relative;
}

.highlight-orange:after {
content: "";
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
z-index: -1; /* Place the pseudo element right under the content */
top: 0;
left: 0;
background: linear-gradient(to top, #FFAF46 50%, transparent 50%);
animation-name: highlight;
animation-duration: 1s;
animation-iteration-count: 1;
animation-direction: alternate; 
}

@keyframes highlight {
0% {
width: 0;
opacity: 0;
}

100% {
width: 100%;
opacity: 1;
}

}

/* RESPONSIVE --------------------------------------------------------------------------------------------------------*/

@media screen and (max-width: 768px){
    .uppercase1{ font-size: 30vw;}
    .uppercase2{ font-size:40vw;}
    .boldtext.right{font-size: 12vw;}
    .boldtext.left{font-size: 12vw;}




}