<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">
#slider-container {
    position: relative;
    font-family: "Ubuntu", Sans-serif;
}

#slider-container .slider {
    background-color: black;
    height: 100vh;
    width: 100%;
    position: relative;
}
#slider-container .slider .slide-item {
    height: 100%;
    width: 100%;
    opacity: 0;
    position: absolute;
}
#slider-container .slider .slide-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#slider-container .slider .slide-item.active {
   
    opacity: 1;
}

#slider-container .slider .slide-item.disappear {
    animation: disappear 0.75s linear ;
}

#slider-container .slider .slide-item.appear {
    animation: appear 0.75s linear ;
}

#slider-container .slider .slide-item .box {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items:center ;
    justify-content :center ;
    z-index: 2;
    color: white;
    transform: translateX(-50%);
    left: 50%;
    top: 200px;
}

#slider-container .box .title {
    margin-top: 20px;
    font-size: 8vh;
}



#slider-container .slider .slide-item.active .box .title {
    animation: down-title 0.6s linear ;
}



#slider-container .slider .slide-item.active .box .description {
    animation: down-description 0.7s linear ;
}




#slider-container .slider .slide-item.active .box a {
    animation: down-a 0.8s linear ;
}



#slider-container .box .description {
    margin-top: 20px;
    
    font-size: 3vh;
    text-align: center;
}

#slider-container .box a {
    margin-top: 20px;
    font-size: 1.8vh;
    padding: 8px 15px;
    border: 2px solid white;
    color: white;
    text-decoration: none;
}

#slider-container .buttons {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    position: absolute;
    bottom: 50px;
    left: 20%;
}

    
#slider-container .buttons .previous { grid-area: 1 / 1 / 2 / 2; }
#slider-container .buttons .active { grid-area: 2 / 1 / 3 / 2; }
#slider-container .buttons .next { grid-area: 3 / 1 / 4 / 2; }

#slider-container .buttons button{
    display: none;
    border: 0;
    background: none;
    color: white;
    cursor: pointer;
    padding: 10px 20px;
}



#slider-container .buttons .hr {
    border-left: 2px solid white;
    width: 2px;
    height: 25px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#slider-container .buttons button.active {
    display: block;
}

#slider-container .buttons button.previous, 
#slider-container .buttons button.next
{
    display: block;
    opacity: 0.7;
}

#slider-container .buttons button.previous-animation{
    animation: prevButton 0.5s linear;
}

#slider-container .buttons button.next-animation{
    animation: nextButton 0.5s linear;
}

/* Styles for screens up to 1080 pixels wide */
@media only screen and (max-width: 1080px) {
    
    #slider-container .box  {
        height: 90%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 80%;
    
    }
#slider-container .box .title {
    margin-top: 20px;
    font-size: 7vh;
    text-align: center;

}
    #slider-container .box .description {
        font-size: 2.6vh;
    }
    #slider-container .slider .slide-item .box {
        top: 0;
    }
#slider-container .slider .slide-item.disappear ,
#slider-container .slider .slide-item.appear ,
#slider-container .slider .slide-item.active .box .title ,
#slider-container .slider .slide-item.active .box .description,
#slider-container .slider .slide-item.active .box a,
#slider-container .buttons button.previous-animation,
#slider-container .buttons button.next-animation
    {
        animation: none;;
    }
    #slider-container .buttons {
        display: flex;
        left: 0;
        width: 100%;
        justify-content: center;
        gap: 20px;
        z-index: 2;
    
    }
    #slider-container .buttons button{
        padding: 0;
        display: block;
        height: 2px;
        width: 20px;
        padding: 2px;
        border-radius: 5px;
        background-color: rgb(255, 0,0, 0.5);
        margin-top: 10px;
        bottom: 15px;
    }
    #slider-container .buttons button.active{
        background-color: rgb(255, 0,0, 1);
    }
    #slider-container .buttons button span{
        display: none;
    }

    
#slider-container .buttons .hr {
    border-left: 0;
}
    #slider-container   {
        position: initial;
    }
  }

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

@keyframes down-title{
    0%{
        opacity: 0;
        transform: translateY(-10px);
    }
    100%{
        
        opacity: 1;
        opacity: translateY(0);
    }
}

@keyframes down-description{
    0%{
        opacity: 0;
        transform: translateY(-50px);
    }
    100%{
        
        opacity: 1;
        opacity: translateY(0);
    }
}

@keyframes down-a{
    0%{
        opacity: 0;
        transform: translateY(-80px);
    }
    100%{
        
        opacity: 1;
        opacity: translateY(0);
    }
}

@keyframes nextButton{
    0%{
        transform: translateY(20px);
    }
    100%{
        
        transform: translateY(0);
    }
}

@keyframes prevButton{
    0%{
        transform: translateY(-20px);
    }
    100%{
        
        transform: translateY(0);
    }
}


@keyframes disappear{
    0%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}</pre></body></html>