.events-slider-single{
display: flex;
transition: all 1s ease;
opacity: 0;
}
h3{
font-weight: 200;
font-size: 3em;
}
.events-slider-single img{
width: 100%;
object-fit: cover;
}
.events-carousel-content{
padding-bottom: 3em;
background-color: #18ACE3;
}
.events-carousel-content-row-1{
width: 100%;
}
.events-slider-single.active-day{
opacity: 1;
}
.events-slider-single:nth-child(2){
display: flex;
}
.single-content{
display: flex;
flex-direction: column;
justify-content: center;
gap: 2em;
width: 50%;
}
.single-content p {
margin-bottom: 0;
}
.single-content h3{
font-weight: 300;
}
.single-content h3 strong{
font-weight: 800;
}
.single-img{
width: 50%;
}
.events-carousel-content-inner{
overflow: hidden;
width: 80%;
margin: auto;
}
.events-carousel-row-1-slider{
transition: all 1s ease;
display: flex;
width: 500% !important;
left: 0%;
position: relative;
}
.events-carousel-row-2-slider{
transition: all 1s ease;
display: flex;
flex-direction: row-reverse;
left: -600%;
position: relative;
width: 700%;
}
.events-carousel-row-2-slider .events-slider-single{
flex-direction: row-reverse;
padding-bottom: 4em;
}
.events-slider-single{
color: white !important;
width: 100%;
padding-top: 4em;
gap: 4em;
}
.events-slider-single p{
font-size: 1.3em;
}
.events-slider-single h6{
font-size: 1em;
font-weight: 700;
margin: 5px 0px;
color: white !important;
}
.events-carousel-buttons{
width: 80%;
margin: auto;
justify-content: space-evenly;
gap: 10px;
display: flex;
}
.event-day{
display: flex;
justify-content: center;
align-items: center;
width: 300px;
cursor: pointer; 
background-color: #DCDDDD; transition: all 0.3s ease;
color: #333 ; 
border-radius: 10px 10px 0px 0px;
padding: 20px;
font-size: 19px;
text-align: center;
} .event-day.active-button{
transform: scale(1.02);
color: white !important;
background-color: #18ACE3;
}
.event-day.active-button h5{
font-weight: 800;
}
.tmp-button{
color: white;
display: flex;
}
.tmp-button svg{
max-width: 20px;
}
.tmp-button button:nth-child(1){
padding: 0px 20px;
border-radius: 30px;
}
.button-arrow{
transition: all 0.5s ease;
font-family: 'Open Sans', sans-serif !important;
border-radius: 50% !important;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.button-arrow img{
width: 50%;
height: auto;
}
.tmp-button button{
background-color: transparent;
border-radius: 10px;
}
.tmp-button:hover .button-arrow{
transform: translateX(15px);
}
.tmp-button button{
padding: 0;
}
.single-img{
display: flex;
align-items: center;
position: relative;
}
.single-img-round{
position: absolute;
bottom: -20px;
left: 0;
width: 150px!important;
height: 150px!important;
}
.single-img img{
height: 350px;
border-radius: 5px;
} .events-slider-single:nth-child(2) .single-img img{
object-fit: contain;
}
.single-img-round.top-img{
bottom: auto;
top: -20px;
left: auto;
right: 0;
}
@media only screen and (max-width: 1500px){
.single-img-round{
width: 120px !important;
height: 120px !important;
bottom: 0px;
}
}
@media only screen and (max-width: 1200px){
.event-day{
font-size: 20px;
}
.single-content h3{
font-size: 2em;
}
.events-slider-single{
align-items: center;
}
.single-img-round{
width: 120px !important;
height: 120px !important;
bottom: -20px;
}
}
@media only screen and (max-width: 1024px){
.event-day{
padding: 15px;
font-size: 18px;
}
}
@media only screen and (max-width: 880px){
.event-day{
padding: 10px;
font-size: 15px;
}
.single-content h3{
font-size: 1.5em;
}
.single-img-round{
width: 80px !important;
height: 80px !important;
}
}
@media only screen and (max-width: 767px){
.events-carousel-buttons{
flex-wrap: wrap;
width: 100%;
justify-content: center;
gap: 5px;
padding: 0 15px;
margin-bottom: 20px;
}
.events-carousel-content-inner{
width: 100%;
}
.events-carousel-content{
padding: 10px 15px;
}
.event-day{
width: auto;
border-radius: 10px;
}
.events-slider-single{
flex-wrap: wrap;
}
.single-img,.single-content{
width: 100%;
}
.events-slider-single{
gap: 1em;
display: block!important;
}
.single-content{
padding: 30px 0;
}
}