.ep-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 2rem 0;
}
.ep-card {
    overflow: hidden;
    --rpx: 100vw / 8000;
}
  
.ep-card,
.ep-card * {
    box-sizing: border-box;
}
  
  
.ep-card {
    position: relative;
    width: calc(1167 * var(--rpx));
    height: calc(1167 * var(--rpx));
    flex: 1 1 calc(33.333% - 1rem); /* Adjust the width as needed */
    margin: 0.5rem;
}

.ep-avatar {
    position: relative;
    width: calc(600 * var(--rpx));
    height: calc(600 * var(--rpx));
    margin: calc(93 * var(--rpx)) 0 0 calc(284 * var(--rpx));
    /* background: url(https://static.igem.wiki/teams/5316/images/ihp-daniel-tornero.png)
      no-repeat center;
    background-size: cover; */
    z-index: 1;
    border-radius: calc(473.5 * var(--rpx));
}
.rectangle {
    position: absolute;
    width: calc(1167 * var(--rpx));
    height: calc(1167 * var(--rpx));
    top: 0;
    left: 0;
    background: rgba(227, 211, 251, 0.35);
    border-radius: calc(76 * var(--rpx));
    /* box-shadow: 0 0 calc(72.0999984741211 * var(--rpx)) 0 rgba(56, 56, 56, 0.25); */
}
.group-1 {
    position: absolute;
    width: calc(711 * var(--rpx));
    height: auto; /* calc(241 * var(--rpx)); */
    /*top*/
    bottom: calc(106 * var(--rpx));
    left: calc(88 * var(--rpx));
    font-size: 0px;
    z-index: 2;
    font-family: var(--text-font);
}
.ep-name{
    display: block;
    position: relative;
    height: auto; /*calc(116 * var(--rpx));*/
    margin: 0 0 0 0;
    color: #000000;
    font-family: Open Sans, var(--default-font-family);
    font-size: calc(96 * var(--rpx));
    font-weight: 600;
    line-height: calc(116 * var(--rpx));
    text-align: left;
    /*white-space: nowrap;*/
    white-space: auto;
    /* white-space: auto;*/
    z-index: 3;
}
.ep-title {
    display: block;
    position: relative;
    height: auto; /*calc(116 * var(--rpx));*/
    margin: calc(9 * var(--rpx)) 0 0 calc(10 * var(--rpx));
    color: #000000;
    font-family: Open Sans, var(--default-font-family);
    font-size: calc(64 * var(--rpx));
    font-weight: 300;
    line-height: calc(87.15625 * var(--rpx));
    text-align: left;
    white-space: autop;
    z-index: 4;
}

.ellipse {
    position: absolute;
    width: calc(138 * var(--rpx));
    height: calc(138 * var(--rpx));
    top: calc(858 * var(--rpx));
    left: calc(895 * var(--rpx));
    background: linear-gradient(180deg, rgba(116,51,255,1) 0%, rgba(183,138,253,1) 100%);;
    background-size: cover;
    z-index: 5;
    border-radius: 50%;
}

.btn-content {
    display: flex;
    align-items: center;
    justify-self: center;
    position: absolute;
    height: calc(110 * var(--rpx));
    top: calc(865 * var(--rpx));
    left: calc(935 * var(--rpx));
    color: var(--background);
    font-family: var(--text-font);
    font-size: calc(100 * var(--rpx));
    font-weight: 600;
    z-index: 6;
}

.ep-button-container:hover{
    cursor:pointer;
}

/*Supply chain descriptions*/
.ep-desc {
    font-family: var(--text-font);
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 2rem;
    width: 100%;
}
  
  
.card {
    background-color: #F5F1EB;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); 
    border-radius: 20px;
    height: auto;
    padding: 1rem 2rem;
    width: 100%;
    flex-wrap: wrap-around;
    position: relative;
    display: flex;
    flex-direction: row;
    
}
  
.card-text{
    flex-grow:1;
    padding-right:2rem;
    text-align:justify;
}
.card-image img{
    max-width: 100%;
    padding-top:3rem;
}
  
.desc-name{
    font-size:20px;
    margin: 15px 0 5px 0;
}
.desc-title{
    font-size:15px;
}  
.desc-text{
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.card p {
    font-size: 16px;
    color: grey;
    line-height:2;
}
.card-image{
    flex-shrink: 0;
    width: 15rem;
    height: 15rem;  
}
  
.card-title{
    display:flex;
    float:left;
}          


/*PRIMERA IMATGE*/
.containerEP {
    position: relative;
    display: flex;
    width: 100%;
    height: 45rem;
    justify-content: center;
    align-items: center;
    padding-top: 5rem;
}

.circle1, .circle2, .circle3 {
    width: 20rem;
    height: 20rem;
    border-radius: 50%;
    background-color: #ca9be0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
    color: white;
    font-family: var(--text-font);
    font-size: 1rem;
    position: absolute;
    transition: transform 0.3s ease-in-out; /* Suaviza la transformación */
}
.circle1{
    left: 50%;
    top: 3%;
}
.circle2{
    left: 30%;
    top: 3%;
}



.circle1:hover, .circle2:hover, .circle3:hover {
    transform: scale(1.2); /* Aumenta el tamaño del círculo al pasar el ratón */
    cursor: pointer;
}

.circle1 h2, .circle2 h2, .circle h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.circle1 p, .circle2 p, .circle3 p {
    font-size: 1rem;
}

/*PAGINA 2*/
/* Mostrar las secciones al clicar */
input[type="radio"] {
    display: none;
  }
  
  .sections section {
    display: none;
  }
  
  #btn-os:checked ~ .sections #os {
    display: block;
  }
  
  #btn-fl:checked ~ .sections #fl {
    display: block;
  }
  
  #btn-sc:checked ~ .sections #sc {
    display: block;
  }
  #btn-ep:checked ~ .sections #ep {
    display: block;
  }
  
  /* Titulos, textos... */
  
  .hp-main-full {
    display: flex; /* Así el listado de secciones puede ponerse al lado del texto */
    flex-direction: column; /* Organiza los elementos verticalmente, primero labels, luego contenido */
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
  }
  
  /* Caja para cambiar entre secciones de la página */
  .hp-main-sections {
    width: 100%; /* Ancho completo para la barra de labels */
    display: flex; /* Aplica flexbox */
    justify-content: space-around; /* Distribuye los labels con espacio entre ellos */
    flex-direction: row; /* Alinea los labels en horizontal */
    margin-bottom: 20px; /* Espacio debajo para separarlo del contenido */
  }
  
 
  
  .hp-main-us img, .hp-main-os img{
      margin-top: 1%;
      margin-bottom: 4%;
      /*The size is determined in the html*/
  }
  
  .hp-main-os li{
      font-size: var(--font-size);
      text-align: left;
  }
  
  .highlight {
    color: var(--main-color); /* Color para el span */
}
/* Posicionamiento de los círculos */
/* Posicionamiento de los círculos */
/* Posicionamiento de los círculos */
.hp-main-circles {
    position: relative;
    display: flex;
    width: 100%;
    height: 35rem;
    justify-content: center;
    align-items: center;
    z-index: 0;
}

.circle_tam,
.circle_sam,
.circle_som {
    position: relative;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--text-font);
    color: var(--background);
    text-align: center;
    cursor: pointer;
}

.circle_tam {
    width: 400px;
    height: 400px;
    left: 50%;
    background-color: #6a0dad;
    z-index: 1;
}
.tamp{
    font-family: var(--text-font);
    position: absolute; /* Cambia según necesites */
    left: 1rem; /* Posición inicial */
    color: var(--background) !important;
}

.circle_sam {
    width: 300px;
    height: 300px;
    left: -7rem;
    background-color: #9370db;
    z-index: 2;
}
.samp{
    font-family: var(--text-font);
    position: absolute; /* Cambia según necesites */
    left: 1rem; /* Posición inicial */
    color: var(--background) !important;
}

.circle_som {
    width: 200px;
    height: 200px;
    left: -20rem;
    background-color: #dab3ff;
    z-index: 3;
}

.somp{
    font-family: var(--text-font);
    position: absolute; /* Cambia según necesites */
    left: 1rem; /* Posición inicial */
    color: var(--background) !important;
}

.hp-main-tam p{
    text-align: center;
}
.hp-main-sam p{
    text-align: center;
}
.hp-main-som p{
    text-align: center;
}



input[type="radio"] {
    display: none;
  }
  
  .sectionscircles section {
    display: none;
  }
  
  #btn-tam:checked ~ .sectionscircles #tam {
    display: flex;
  }
  
  #btn-sam:checked ~ .sectionscircles #sam {
    display: block;
  }
  
  #btn-som:checked ~ .sectionscircles #som {
    display: block;
  }
  .hp-main-dev {
    width: 100%; /* Ancho completo para la barra de labels */
    display: grid; /* Aplica grid */
    grid-template-columns: repeat(3, 1fr); /* Tres columnas de igual ancho */
    gap: 1rem; /* Espaciado entre elementos */
    padding: 20px; /* Espaciado interno */
  }
  
  .item-dev {
    border: 1px solid #ccc; /* Bordes opcionales para las imágenes */
    border-radius: 8px; /* Bordes redondeados */
    overflow: hidden; /* Ocultar cualquier desbordamiento */
    transition: transform 0.3s ease; /* Suavizar la transformación */
    position: relative; /* Para posicionar el contenido correctamente */
  }
  
  .item-dev img {
    width: 100%; /* Asegura que la imagen ocupe todo el ancho */
    height: 100%; /* Asegura que la imagen ocupe todo el alto */
    display: block; /* Elimina espacio extra debajo de la imagen */
  }
  
  .item-dev:hover {
    transform: scale(1.05); /* Escala al pasar el mouse */
  }

  .item-dev.active {
    background-color: #e0f7fa; /* Color de fondo al hacer clic */
    border: 1rem solid var(--main-color); /* Cambia el color y grosor del borde al hacer clic */
    opacity: 0.5;
  }
  
  
/* Mostrar las secciones al clicar */
input[type="radio"] {
    display: none;
  }
  
  .sections section {
    display: none;
  }
  
  #btn-dev1:checked ~ .sections #dev1 {
    display: block;
  }
  
  #btn-dev2:checked ~ .sections #dev2 {
    display: block;
  }
  
  #btn-dev3:checked ~ .sections #dev3 {
    display: block;
  }
  #btn-dev4:checked ~ .sections #dev4 {
    display: block;
  }
  #btn-dev5:checked ~ .sections #dev5 {
    display: block;
  }
  #btn-dev6:checked ~ .sections #dev6 {
    display: block;
  }
  #btn-dev7:checked ~ .sections #dev7 {
    display: block;
  }
  #btn-dev8:checked ~ .sections #dev8 {
    display: block;
  }
  #btn-dev9:checked ~ .sections #dev9 {
    display: block;
  }
.point-list li{
    padding:1.25rem 2rem;
}
    

  
  
/* Mostrar las secciones al clicar */
  
.item-devp {
    border: 1px solid #ccc; /* Bordes opcionales para las imágenes */
    border-radius: 8px; /* Bordes redondeados */
    overflow: hidden; /* Ocultar cualquier desbordamiento */
    transition: transform 0.3s ease; /* Suavizar la transformación */
    position: relative; /* Para posicionar el contenido correctamente */
  }
  
  .item-devp img {
    width: 100%; /* Asegura que la imagen ocupe todo el ancho */
    height: 100%; /* Asegura que la imagen ocupe todo el alto */
    display: block; /* Elimina espacio extra debajo de la imagen */
  }
  
  .item-devp:hover {
    transform: translateY(-5px) rotate(2deg);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  }

  .item-devp.active {
    opacity: 0.5;
    animation: ripple 0.6s linear;
    pointer-events: none; /* Para que no interfiera con el clic */
}

@keyframes ripple {
    to {
        transform: translate 0.5s(-100%, -100%) scale(0.5);
        opacity: 0; /* Se desvanece el efecto */
    }
}

input[type="radio"] {
    display: none;
  }
  
  .sections section {
    display: none;
  }
  
  #btn-devp1:checked ~ .sections #devp1 {
    display: block;
  }
  
  #btn-devp2:checked ~ .sections #devp2 {
    display: block;
  }


  
input[type="radio"] {
    display: none;
  }
  
  .sectionsdev section {
    display: none;
  }
  
  #btn-devp3:checked ~ .sectionsdev #devp3 {
    display: block;
  }
  
  #btn-devp4:checked ~ .sectionsdev #devp4 {
    display: block;
  }

  input[type="radio"] {
    display: none;
  }
  
  .sectionsskill section {
    display: none;
  }
  
  #btn-sk:checked ~ .sectionsskill #sk {
    display: block;
  }