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;
    
    }
    .smalltext.right{
    text-align: right;
    }





/* A SOUND A SOUND --------------------------------------------------------------------------------------------------------*/
.flexbox1{
    opacity: 0.5;
}

.absolute{
position: absolute;
top: 0;
left: 25%;
right: 25%;
z-index: -1;
}

.zeile{
    position: absolute;
    top: 0;
    left: 0;
}

.uppercase{
font-family: Acumin Pro ExtraCondensed;
text-transform: uppercase;
text-align: center;
font-size: 20vw;
line-height: 50%;
color: #8DA091;
}

.trigger{
    position: absolute;
    top:0;
    left: 0;
    width: 100vw;
    height: 100vh;    
    opacity: 0.1;
}


.trigger:hover .first{
    transform:translateY(100%);
    transform-origin: top center;
    transition-duration: 1s;
    transition-timing-function: ease-in-out;
    opacity:1;
}

.trigger:hover .second{
    transform:translateY(140%);
    transform-origin: top center;
    transition-duration: 1s;
    transition-timing-function: ease-in-out;
    opacity:1;
}

.trigger:hover .third{
    transform:translateY(200%);
    transform-origin: top center;
    transition-duration: 1s;
    transition-timing-function: ease-in-out;
    opacity:1;
}
/* BOLD HIGHLIGHT */

.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
{
    background-color: ;
}

.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;
}

}