.proyectos__title {
	font-size: 22px;
	text-align: center;
	margin-top: 160px;
	margin-bottom: 40px;
	font-weight: 500;
	font-family: roc-grotesk;
}

.counter {
	display: flex;
	justify-content: center;
	margin-top: 60px;
}
.counter__left span,
.counter__right span {
	font-size: 80px;
	color: #00BFB5;
	opacity: 0.4;
	font-weight: 500;
	font-family: roc-grotesk;
}
.counter__left {
	position: relative;
	width: 50%;
	text-align: center;
	border-right: 1px solid #ccc;
}
.counter__right {
	position: relative;
	width: 50%;
	text-align: center;
}
.counter__txt {
	position: absolute;
	color: #fff;
	opacity: 1;
	font-size: 20px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);

}

.wisdome {
	padding: 20px;
	max-width: 1100px;
	margin: auto;
}
.wisdome__title {
	font-size: 22px;
	font-weight: 500;
	font-family: roc-grotesk;
}
.wisdome__content {
	display: flex;
	flex-direction: column;
	grid-gap: 20px;
}
.wisdome__content__left p {
	color: #A09BAF;
	font-size: 18px;
	font-family: "Kumbh Sans";
}

.concepto {
	padding: 20px;
	max-width: 1100px;
	margin: auto;
}
.concepto__title {
	font-size: 20px;
	font-weight: 500;
	font-family: roc-grotesk;
}
.concepto__txt {
	color: #A09BAF;
	font-size: 18px;
	font-family: "Kumbh Sans";
}

.concepto__gallery {
	display: flex;
	grid-gap: 20px;
	flex-direction: column;
}
.concepto__gallery__left {
	height: 360px;
	background-size: cover;
	background-position: center bottom;
	background-image: url('../img/conceptos/01.webp');
}
.concepto__gallery__right {
	display: flex;
	flex-direction: column;
	grid-gap: 20px;
}
.concepto__gallery__right__top {
	height: 300px;
	background-position: top center;
	background-image: url('../img/conceptos/02.png');
}
.concepto__gallery__right__bottom {
	height: 300px;
	background-size: cover;
	background-position: bottom center;
	background-image: url('../img/conceptos/03.webp');
}

.posible {
	padding: 20px;
	max-width: 1100px;
	margin: auto;
}
.posible__title {
	font-size: 24px;
	font-weight: 500;
	font-family: roc-grotesk;
}
.posible__list,
.posible__txt {
	font-size: 24px;
	color: #A09BAF;
	font-family: "Kumbh Sans";
}

.gallery {
	padding: 20px;
	max-width: 1100px;
	margin: auto;
}
.gallery__top {
	height: 600px;
	background-image: url('../img/proyectos/gallery-1.jpg');
}
.gallery__content {
	display: flex;
	flex-direction: column;
	grid-gap: 20px;
}
.gallery__content__left {
	height: 400px;
	background-size: cover;
	background-position: center;
	background-image: url('../img/proyectos/gallery-2.jpg');
}
.gallery__content__right {
	height: 400px;
	background-size: cover;
	background-position: center;
	background-image: url('../img/proyectos/gallery-3.jpg');
}


/***/

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

input[type=radio] {
  display: none;
}

.card {
  position: absolute;
  width: 60%;
  height: 100%;
  left: 0;
  right: 0;
  margin: auto;
  transition: transform 0.4s ease;
  cursor: pointer;
}

.container {
  width: 100%;
  margin: auto;
  max-width: 1100px;
  max-height: 700px;
  height: 60%;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.cards {
  position: relative;
  width: 100%;
  height: 100%;
  margin-bottom: 20px;
}

.slider img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
}

#item-1:checked ~ .cards #song-11, 
#item-2:checked ~ .cards #song-1, 
#item-3:checked ~ .cards #song-2,
#item-4:checked ~ .cards #song-3,
#item-5:checked ~ .cards #song-4,
#item-6:checked ~ .cards #song-5,
#item-7:checked ~ .cards #song-6,
#item-8:checked ~ .cards #song-7,
#item-9:checked ~ .cards #song-8,
#item-10:checked ~ .cards #song-9,
#item-11:checked ~ .cards #song-10 {
  transform: translatex(-40%) scale(0.8);
  opacity: 0.4;
  z-index: 0;
}

#item-1:checked ~ .cards #song-2, 
#item-2:checked ~ .cards #song-3, 
#item-3:checked ~ .cards #song-4,
#item-4:checked ~ .cards #song-5,
#item-5:checked ~ .cards #song-6,
#item-6:checked ~ .cards #song-7,
#item-7:checked ~ .cards #song-8,
#item-8:checked ~ .cards #song-9,
#item-9:checked ~ .cards #song-10,
#item-10:checked ~ .cards #song-11,
#item-11:checked ~ .cards #song-1 {
  transform: translatex(40%) scale(0.8);
  opacity: 0.4;
  z-index: 0;
}

#item-1:checked ~ .cards #song-1, 
#item-2:checked ~ .cards #song-2, 
#item-3:checked ~ .cards #song-3,
#item-4:checked ~ .cards #song-4,
#item-5:checked ~ .cards #song-5,
#item-6:checked ~ .cards #song-6,
#item-7:checked ~ .cards #song-7,
#item-8:checked ~ .cards #song-8,
#item-9:checked ~ .cards #song-9,
#item-10:checked ~ .cards #song-10,
#item-11:checked ~ .cards #song-11 {
  transform: translatex(0) scale(1);
  opacity: 1;
  z-index: 1;
}

.progress-bar {
  height: 3px;
  width: 100%;
  background-color: #e9efff;
  border-radius: 2px;
  overflow: hidden;
}

.progress {
  display: block;
  position: relative;
  width: 60%;
  height: 100%;
  background-color: #2992dc;
  border-radius: 6px;
}

#item-2:checked ~ .player #test {
  transform: translateY(0);
}

#item-2:checked ~ .player #test {
  transform: translateY(-40px);
}

#item-3:checked ~ .player #test {
  transform: translateY(-80px);
}

@media screen and (min-width: 360px) {

	.wisdome__title,
	.concepto__title,
	.posible__title {
		font-size: 24px;
	}

}

@media screen and (min-width: 768px) {

	.counter__left span, 
	.counter__right span {
		font-size: 100px;
	}
	.counter__txt {
		font-size: 22px;
	}
	.proyectos__title,
	.wisdome__title,
	.concepto__title,
	.posible__title {
		font-size: 28px;
	}

	.wisdome__content__left p,
	.concepto__txt {
		font-size: 22px;
	}
	.wisdome__content {
		flex-direction: row;
	}
	.wisdome__content__left p:first-child {
		margin: 0;
	}
	.concepto__gallery {
		flex-direction: row;
	}
	.concepto__gallery__left,
	.concepto__gallery__right {
		width: 50%;
	}
	.concepto__gallery__left {
		height: auto;
	}
	.gallery__content {
		flex-direction: row;
	}
	.gallery__content__left,
	.gallery__content__right {
		width: 50%;
	}

}

@media screen and (min-width: 1000px) {

	.container {
		height: 80%;
	}

	.proyectos__title,
	.wisdome__title,
	.concepto__title,
	.posible__title {
		font-size: 34px;
	}

	.wisdome__content__left p,
	.concepto__txt {
		font-size: 28px;
	}

}

@media screen and (min-width: 1200px) {

	.counter__left span, 
	.counter__right span {
		font-size: 120px;
	}

}

@media screen and (min-width: 1200px) {

	.container {
		height: 90%;
	}

}

@media screen and (min-width: 1400px) {

	.container {
		height: 100%;
	}

	.proyectos__title,
	.wisdome__title,
	.concepto__title,
	.posible__title {
		font-size: 44px;
	}

	.wisdome__content__left p,
	.concepto__txt {
		font-size: 30px;
	}
	.posible__list,
	.posible__txt {
		font-size: 30px;
	}
	.counter__left span, .counter__right span {
		font-size: 160px;
	}

}