#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;
} @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;
}
}