/* timeline-style.css */
.timeline {
    width: 80%; /* Adjust as needed */
    margin: 0 auto; /* Center the container */
	height:auto;
}
 .timeline .nav {
    width: calc(100% - 40px);
    margin: 0 auto;
    top: -32px;
  }
.timeline .swiper-slide {
    width: fit-content;
}

/* Swiper styles */
.timeline .swiper-container {
    /* You can add any additional styles for the swiper-container here */
	width:100%!important;
	height:auto;
	overflow:hidden;
	
}

.timeline .swiper-slide a {
    /* You can add any additional styles for the swiper-slide here */
	padding:0 20px;
	border-right:1px black solid;
	text-decoration:none;
}

.timeline .swiper-container {
    position: relative;
	height:auto;
	border-radius:40px;
	width: 100% !important;
    background: #ffffffe0;
    padding: 1em;

}

.timeline .swiper-wrapper {
    transition: transform 0.3s;
    display: flex;
	height:auto;
	width:100%;
	margin:0 auto;
}

.timeline .swiper-slide {
    flex-shrink: 0;
    margin-right: 10px;
}

/* Swiper navigation buttons */
.caja-timeline {
	display:flex;
	align-items:center;
	justify-content:center;
	background-image:url('https://guillermomoscosoartista.cl/wp-content/uploads/2023/12/memo-timeline-6.png');
	background-position: center;
 	background-size: cover;
 	height: auto;
 	background-repeat: no-repeat;
	padding: 5em 0;
}
@media screen and (min-width: 37.5em) {
	.caja-timeline {
 	background-size: contain;
		padding:15em 0;
 }
	.timeline {
		width:60%;
	}
}
.timeline {
	position:relative;
	/*display:flex;*/
	align-items:center;
	/*justify-content:center;*/

}
.timeline .nav {
	width: calc(100% - 40px);
	margin:0 auto;
	top:-32px;
}
.timeline .swiper-button-next,
.timeline .swiper-button-prev {
    position: absolute;
    top: 50%;
    width: 37px!important;
    height: 37px!important;
    margin-top: -13.5px;
    background-color: #fd2!important; /* Change the background color as needed */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black; /* Change the color as needed */
    font-size: 18px; /* Adjust the font size as needed */
    cursor: pointer;
    z-index: 10; /* Ensure the buttons are above the slides */
}

.timeline .swiper-button-next:hover,
.timeline .swiper-button-prev:hover {
    background-color: #555; /* Change the hover background color as needed */
}

.swiper-button-next::after, .swiper-button-prev::after {
	font-size:1em!important;
	color:black!important;
}



/* Swiper styles */
.timeline .swiper-container {
    position: relative;
    width: 100%!important;
	background:#ffffffe0;
		padding:1em;
}

.timeline .swiper-wrapper {
    transition: transform 0.3s;
    display: flex;
}

.timeline .swiper-slide {
    flex-shrink: 0;
    margin-right: 10px;
}

/* Swiper navigation buttons */
.timeline .swiper-button-next,
.timeline .swiper-button-prev {
    position: absolute;
    top: 50%;
    width: 27px;
    height: 27px;
    margin-top: -13.5px;
    background-color: #333; /* Change the background color as needed */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff; /* Change the color as needed */
    font-size: 18px; /* Adjust the font size as needed */
    cursor: pointer;
    z-index: 10; /* Ensure the buttons are above the slides */
}

.timeline .swiper-button-next:hover,
.timeline .swiper-button-prev:hover {
    background-color: #555; /* Change the hover background color as needed */
}