/* Variables de color para esta sección */
    :root {
        --card-bg: #161617;
        --card-border: #2a2a2a;
        --accent-purple: #a855f7;
        --accent-green: #22c55e;
        --accent-pink: #ec4899;
        --accent-blue: #3b82f6;
    }

    .stats-section {
        background-color: #0f0f0f;
        padding: 60px 10%;
        color: white;
        text-align: center;
    }

    .stats-title {
        font-size: 32px;
        font-family: 'Serif', 'Georgia', serif;
        margin-bottom: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;
    }

    .stats-title i { color: var(--accent-pink); }

    /* Grid Superior: 4 columnas */
    .stats-grid-top {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin-bottom: 25px;
    }

    /* Grid Inferior: 3 columnas */
    .stats-grid-bottom {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
    }

    .stat-card {
background-color: #1A1A1A;
            border-radius: 12px;
            border: 1px solid #868586;
            padding: 25px;
            display: flex;
            flex-direction: column;
            align-items: center; /* Centra el contenido horizontalmente */
            text-align: justify;
            transition: transform 0.3s ease;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);

        
    }

    .stat-card:hover {
  transform: translateY(-5px);
  border-color: #df326e;
  box-shadow: 0 10px 20px rgba(223, 50, 110, 0.2);
    }

    .stat-card i {
        font-size: 24px;
        margin-bottom: 15px;
        display: block;
    }

    .stat-number {
        font-size: 36px;
        font-weight: bold;
        margin: 10px 0;
    }

    .stat-label {
        color: #888;
        font-size: 14px;
        text-transform: capitalize;
    }

    /* Estilos específicos para la tarjeta de actividad comunitaria */
    .activity-card {
        text-align: left;
        padding: 25px;
    }

    .activity-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
        font-weight: 600;
    }

    :root {
            --bg-color: #0f0f0f;
            --accent-pink: #ff4d94;
            --text-gray: #a0a0a0;
            --text-white: #ffffff;
        }

        body {
            margin: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-white);
        }

        footer {
            padding: 50px 10% 20px 10%;
            background-color: var(--bg-color);
            border-top: 1px solid #222;
        }

        .footer-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 40px;
        }

        /* Columna de Marca */
        .footer-brand {
            flex: 1;
            min-width: 300px;
        }

        .logo {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
                gap: 15px !important;
        }

        .logo i {
            color: var(--accent-pink);
            margin-right: 10px;
        }

        .description {
            color: var(--text-gray);
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 20px;
            max-width: 350px;
        }

        /* Botones de Redes/Stats */
        .social-stats {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }

        .discord-btn {
            background: #1a1a1a;
            padding: 8px 15px;
            border-radius: 5px;
            border: 1px solid #333;
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .status-dot {
            width: 8px;
            height: 8px;
            background: #43b581;
            border-radius: 50%;
        }

        .votes-badge {
            background: #000;
            border-radius: 5px;
            display: flex;
            overflow: hidden;
            border: 1px solid #333;
        }

        .votes-badge .icon {
            background: var(--accent-pink);
            padding: 5px 10px;
        }

        .votes-badge .count {
            padding: 5px 10px;
            font-weight: bold;
        }

        /* Enlaces de navegación */
        .footer-nav {
            display: flex;
            gap: 60px;
        }

        .nav-column h3 {
            color: var(--accent-pink);
            text-transform: uppercase;
            font-size: 16px;
            letter-spacing: 1px;
            margin-bottom: 20px;
        }

        .nav-column ul {
            list-style: none;
            padding: 0;
        }

        .nav-column ul li {
            margin-bottom: 12px;
        }

        .nav-column ul li a {
            text-decoration: none;
            color: var(--text-gray);
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: color 0.3s;
        }

        .nav-column ul li a:hover {
            color: var(--accent-pink);
        }


        /* Copyright Section */
        .footer-bottom {
            margin-top: 50px;
            text-align: center;
            border-top: 1px solid #222;
            padding-top: 20px;
            font-size: 12px;
            color: var(--text-gray);
        }

        .footer-bottom p { margin: 5px 0; }
        
    
/* Asegura que el contenido del hero se distribuya bien */
.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1; /* Empuja a las plataformas hacia abajo */
}

/* Alineación de botones */
.hero-buttons {
    display: flex;
    flex-direction: row; /* Asegura que estén uno al lado del otro */
    gap: 20px;
    margin-top: 25px;
}

.btn-primary, .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* HEADER STYLES */
.main-header {
    background-color: rgba(15, 15, 15, 0.95);
    padding: 15px 10%;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid #222;
}
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav-menu {
    display: flex;
    gap: 25px;
}
.nav-menu a {
    text-decoration: none;
    color: #a0a0a0;
    font-size: 14px;
    transition: color 0.3s;
}
.nav-menu a:hover, .premium-link {
    color: #facc15 !important; /* El color dorado de 'Premium' */
}
.login-btn {
    background-color: #db2777;
    color: white;
    padding: 8px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* HERO SECTION STYLES */
.hero-section {
    position: relative;
    height: 85vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: linear-gradient(rgba(15, 15, 15, 0.9), rgba(15, 15, 15, 0.9)), 
                url('img/bbg2.gif');
    background-size: cover;
    background-position: center;
    color: white;
    overflow: hidden;
}
.hero-title {
    font-size: 70px;
    margin: 10px 0;
    font-weight: 900;
    letter-spacing: -2px;
    text-shadow: 0 0 20px rgba(236, 72, 153, 0.5);
    font-family: 
    'Rajdhani';
}
.hero-subtitle {
    font-size: 24px;
    color: #eee;
    margin-bottom: 10px;
}
.highlight {
    color: #ec4899;
    font-weight: bold;
}
.hero-description {
    color: #a0a0a0;
    max-width: 600px;
    margin-bottom: 30px;
}
.btn-primary {
    background-color: #be185d;
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    color: white;
    font-weight: bold;
}
.btn-secondary {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}






/* --- INICIA CÓDIGO PARA LAYOUT "LADO A LADO" --- */
.dashboard-container {
  display: flex;            /* ¡La magia! Pone los hijos en fila */
  flex-direction: row;      /* (Opcional, es el por defecto) */
  justify-content: center;  /* Centra los dos bloques horizontalmente */
  align-items: flex-start;  /* Los alinea en la parte superior */
  flex-wrap: wrap;          /* IMPORTANTE: Si no caben, se apilarán */
  gap: ;                /* Espacio entre los dos bloques */
  width: 100%;
  padding:;       /* Espacio arriba/abajo y en los bordes */
  box-sizing: border-box;   /* Para que el padding no afecte el ancho */
}
/* --- FIN CÓDIGO LAYOUT --- */

/* 4. Las imágenes (Clase única) */
  .slide-item-2 img {
    width: 140%;
    height: 100%;
    object-fit: cover;
    margin-left: -20%;
    transform: skewX(15deg);
    transition: transform 0.3s;
    
    /* --- AGREGA ESTAS 3 LÍNEAS --- */
    pointer-events: none;      /* Hace que el mouse 'traspase' la imagen (evita click y arrastre) */
    user-select: none;         /* Evita que se pueda seleccionar como texto azul */
    -webkit-user-drag: none;   /* Fuerza bruta para bloquear el arrastre en Chrome/Safari */
  }

  /* 4. Las imágenes (Clase única) */
  .slide-item img {
    width: 140%;
    height: 100%;
    object-fit: cover;
    margin-left: -20%;
    transform: skewX(15deg);
    transition: transform 0.3s;
    
    /* --- AGREGA ESTAS 3 LÍNEAS --- */
    pointer-events: none;      /* Hace que el mouse 'traspase' la imagen (evita click y arrastre) */
    user-select: none;         /* Evita que se pueda seleccionar como texto azul */
    -webkit-user-drag: none;   /* Fuerza bruta para bloquear el arrastre en Chrome/Safari */
  }

  /*AAAAAAAAAAAAAAAAAAA1
  /* 1. La ventana que recorta el contenido */
  .skew-carousel-wrapper {
    width: 100%;
    height: 150px; /* Altura del carrusel */
    overflow: hidden;
    background: #000;
    position: relative;
    display: flex;
    align-items: center;
  }
  /* 2. La pista larga que se mueve */
  .skew-track {
    display: flex;
    /* El ancho debe ser suficiente para todas las fotos. 
       La animación mueve la pista hacia la izquierda */
    animation: scroll-left 20s linear infinite;
  }
  /* La animación matemática */
  @keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Se mueve hasta la mitad (donde se repiten las fotos) */
  }
  /* Pausar la animación si pasas el mouse por encima */
  .skew-track:hover {
    animation-play-state: paused;
  }
  /* 3. Cada tarjeta individual */
  .slide-item {
    width: 300px; /* Ancho fijo de cada foto */
    height: 150px;
    flex-shrink: 0; /* Evita que se aplasten */
    position: relative;
    margin: 0 -10px; /* Un margen negativo para juntarlas más debido a la inclinación */
    
    /* La inclinación del marco */
    transform: skewX(-15deg); 
    border-right: 5px solid white; /* Borde blanco estilo "corte" */
    overflow: hidden;
  }
  /* 4. La imagen dentro */
  .slide-item img {
    width: 140%; /* Más ancha para compensar la inclinación */
    height: 100%;
    object-fit: cover;
    margin-left: -20%; /* Centrar la imagen expandida */
    /* Contrarrestar la inclinación para que la foto se vea recta */
    transform: skewX(15deg);
    transition: transform 0.3s;
  }
  /* Efecto al pasar el mouse sobre una foto específica */
  .slide-item:hover img {
    transform: skewX(15deg) scale(1.1); /* Zoom suave */
    filter: brightness(1.2);
  }
  /* --- MÓVIL (Responsive) --- */
  @media (max-width: 768px) {
    .skew-carousel-wrapper { height: 250px; }
    .slide-item { width: 150px; height: 250px; border-right: 2px solid white; }
  }

  /* --- ESTILOS DEL SLIDER 2 (INVERSO) --- */
  /* 1. La ventana (Clase única) */
  .skew-carousel-wrapper-2 {
    width: 100%;
    height: 150px;
    overflow: hidden;
    background: #000;
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 20px; /* Separación por si pones uno debajo del otro */
  }
  /* 2. La pista (Clase única y animación única) */
  .skew-track-2 {
    display: flex;
    /* Usamos una animación con nombre nuevo: 'scroll-right-2' */
    animation: scroll-right-2 20s linear infinite;
  }
  /* DEFINICIÓN DE LA ANIMACIÓN INVERSA */
  @keyframes scroll-right-2 {
    0% { transform: translateX(-50%); } /* Arranca desde la mitad (donde está el duplicado) */
    100% { transform: translateX(0); }   /* Se mueve hacia el principio (Derecha) */
  }
  /* Pausa al pasar el mouse */
  .skew-track-2:hover {
    animation-play-state: paused;
  }
  /* 3. Las tarjetas (Clase única) */
  .slide-item-2 {
    width: 300px;
    height: 400px;
    flex-shrink: 0;
    position: relative;
    margin: 0 -10px;
    /* Aquí puedes cambiar la inclinación SOLO de este slider si quieres */
    transform: skewX(-15deg); 
    border-right: 5px solid rgb(0, 0, 0);
    overflow: hidden;
  }
  /* 4. Las imágenes (Clase única) */
  .slide-item-2 img {
    width: 140%;
    height: 100%;
    object-fit: cover;
    margin-left: -20%;
    /* Contrarrestar inclinación */
    transform: skewX(15deg);
    transition: transform 0.3s;
  }
  .slide-item-2:hover img {
    transform: skewX(15deg) scale(1.1);
    filter: brightness(1.2);
  }
  /* Responsive para el Slider 2 */
  @media (max-width: 768px) {
    .skew-carousel-wrapper-2 { height: 250px; }
    .slide-item-2 { width: 150px; height: 250px; border-right: 2px solid rgb(0, 0, 0); }
  }

   /* Contenedor principal */
  .accordion-gallery {
    display: flex;
    width: 100%;
    height: 200px; /* Altura del slider */
    overflow: hidden;
    margin: 0 auto;
  }
  /* Cada tira de imagen */
  .accordion-item {
    position: relative;
    flex: 1; /* Todas empiezan con el mismo ancho (ancho = 1 unidad) */
    overflow: hidden;
    transition: all 0.5s ease-in-out; /* La magia de la animación suave */
    cursor: pointer;
    border-right: 1px solid #fff; /* Pequeña línea blanca separadora */
  }
  /* La imagen dentro */
  .accordion-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Mantiene la proporción sin deformar la foto */
    transition: all 0.5s ease;
    filter: brightness(0.8); /* Un poco oscuras por defecto para resaltar la activa */
  }
  /* --- LA MAGIA AL PASAR EL MOUSE --- */
  /* Cuando pasas el mouse sobre un item, este crece */
  .accordion-item:hover {
    flex: 3; /* Se vuelve 5 veces más grande que los otros */
  }
  /* La imagen se aclara al activarse */
  .accordion-item:hover img {
    filter: brightness(1);
    transform: scale(1.05); /* Un ligero zoom para dar vida */
  }
  /* --- TEXTO OPCIONAL (Si quieres poner títulos) --- */
  .accordion-content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: white;
    opacity: 0; /* Oculto por defecto */
    transition: opacity 0.3s 0.2s; /* Tarda un poco en aparecer */
    white-space: nowrap; /* Evita que el texto se rompa en líneas */
  }
  .accordion-item:hover .accordion-content {
    opacity: 1; /* Aparece al pasar el mouse */
  }
  h3 { margin: 0; font-size: 1.5rem; text-shadow: 1px 1px 5px rgba(0,0,0,0.8); }
  /* --- RESPONSIVE (Móviles) --- */
  @media (max-width: 768px) {
    .accordion-gallery {
      flex-direction: column; /* En celular se ponen verticales (uno sobre otro) */
      height: 600px;
    }
    .accordion-item:hover {
      flex: 3; /* Crecen un poco menos en vertical */
    }
    .accordion-item { border-right: none; border-bottom: 1px solid #fff; }
  }
  /* Espacio para la Imagen */
        .card-img {
            width: 100%;
            height: 150px;
            object-fit: cover; /* Asegura que la imagen no se deforme */
            border-radius: 8px;
            margin-bottom: 15px;
            background-color: #333; /* Placeholder mientras carga */
        }




        /* Contenedor Principal */
.jobs-section {
  width: 100%;
  max-width:1200px;
  margin:-30px auto;
}
.jobs-title {
  text-align: center;
  color: #00bcd4;
  font-family: 'Archivo', sans-serif;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 30px;
}
/* La Grilla Mágica */
.jobs-grid {
  display: grid;
  /* Esto crea columnas de al menos 280px. Si no caben, saltan abajo */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}
/* Estilo de la Tarjeta */
.job-card {
  background: #1a1a1a;
  border: 2px solid #333;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease;
  display: flex;
  flex-direction: column;
}
.job-card:hover {
  transform: translateY(-5px);
  border-color: #df326e; /* Rosa de tu paleta */
  box-shadow: 0 10px 20px rgba(223, 50, 110, 0.2);
}
/* Imagen del Empleo */
.job-image {
width: 100%; /* Ocupa el ancho de la tarjeta */
  display: flex; /* Usamos flexbox para centrar la imagen si es pequeña */
  justify-content: center; /* Centrado horizontal */
  align-items: center; /* Centrado vertical */
  background-color: #000; /* Fondo negro por si la imagen es pequeña */
  padding:0px; /* Un pequeño margen interno opcional */
  position: relative; /* Para el tag de "Urgente" */
}
/* 2. La imagen Mágica */
.job-image img {
  width: auto;  /* Respeta su ancho original */
  height: auto; /* Respeta su alto original */
  /* --- SEGURIDAD PARA MÓVILES --- */
  max-width: 100%; /* Si la imagen es GIGANTE, no rompe la tarjeta */
  max-height: 250px; /* Límite opcional de alto para que no se vea kilométrica */
  display: block;
}
.job-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #df326e;
  color: white;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 4px;
}
/* Información del Texto */
.job-info {
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.job-info h3 {
  color: #fff;
  margin-bottom: 10px;
  font-size: 1.2rem;
}
.job-info p {
  color: #aaa;
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 20px;
}
/* Botón de Aplicar */
.job-link {
  text-decoration: none;
  background: transparent;
  border: 1px solid #00bcd4;
  color: #00bcd4;
  padding: 8px 0;
  text-align: center;
  border-radius: 6px;
  font-weight: 600;
  transition: all 0.3s ease;
}
.job-link:hover {
  background: #00bcd4;
  color: #000;
}
/* Ajustes para pantallas muy pequeñas */
@media (max-width: 400px) {
  .jobs-grid {
    grid-template-columns: 1fr; /* Una sola columna total */
  }
}
/* Contenedor del botón para asegurar el centrado */
.job-actions {
  width: 100%;
  display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;     /* Centra verticalmente */
}



/* Contenedor principal */
  .accordion-gallery {
    display: flex;
    width: 100%;
    height: 200px; /* Altura del slider */
    overflow: hidden;
    margin: 0 auto;
  }
  /* Cada tira de imagen */
  .accordion-item {
    position: relative;
    flex: 1; /* Todas empiezan con el mismo ancho (ancho = 1 unidad) */
    overflow: hidden;
    transition: all 0.5s ease-in-out; /* La magia de la animación suave */
    cursor: pointer;
    border-right: 1px solid #fff; /* Pequeña línea blanca separadora */
  }
  /* La imagen dentro */
  .accordion-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Mantiene la proporción sin deformar la foto */
    transition: all 0.5s ease;
    filter: brightness(0.8); /* Un poco oscuras por defecto para resaltar la activa */
  }
  /* --- LA MAGIA AL PASAR EL MOUSE --- */
  /* Cuando pasas el mouse sobre un item, este crece */
  .accordion-item:hover {
    flex: 3; /* Se vuelve 5 veces más grande que los otros */
  }
  /* La imagen se aclara al activarse */
  .accordion-item:hover img {
    filter: brightness(1);
    transform: scale(1.05); /* Un ligero zoom para dar vida */
  }
  /* --- TEXTO OPCIONAL (Si quieres poner títulos) --- */
  .accordion-content {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: white;
    opacity: 0; /* Oculto por defecto */
    transition: opacity 0.3s 0.2s; /* Tarda un poco en aparecer */
    white-space: nowrap; /* Evita que el texto se rompa en líneas */
  }
  .accordion-item:hover .accordion-content {
    opacity: 1; /* Aparece al pasar el mouse */
  }
  h3 { margin: 0; font-size: 1.5rem; text-shadow: 1px 1px 5px rgba(0,0,0,0.8); }
  /* --- RESPONSIVE (Móviles) --- */
  @media (max-width: 768px) {
    .accordion-gallery {
      flex-direction: column; /* En celular se ponen verticales (uno sobre otro) */
      height: 600px;
    }
    .accordion-item:hover {
      flex: 3; /* Crecen un poco menos en vertical */
    }
    .accordion-item { border-right: none; border-bottom: 1px solid #fff; }
  }



@media (width >= 450px) {
  .header__img {
    width: 200px;
  }
}
@media (width >= 650px) {
  .header__img {
    width: 220px;
  }
}
  /*
Div Info, cuando el viewport horizontal sea menor de 560px el
info__container sera un display flex en vez de un grid.
*/
@media (width <= 560px) {
  .info__list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .info__item {
    width: 100%;
    max-width: 560px;
  }
}/*# sourceMappingURL=style.css.map */

}
.slider{width: 100%
min-width: 320px !important;}
.slider input{display: none;}
.testimonials{
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	min-height: 210px;
	perspective: 1000px;
	overflow: hidden;
}
.testimonials .item{
	width: 300px;
	padding: 5px;
	border-radius: 5px;
	background-color: #21262d;
	position: absolute;
	border:3px solid white;
	top: 0;
	box-sizing: border-box;
	text-align: center;
	transition: transform 0.4s;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
	user-select: none;
	cursor: pointer;
}
.testimonials .item h1{font-size: 114px; color: white;}
.dots{display: flex; justify-content: center;align-items: center;}
.dots label{
	height: 5px;
	width: 5px;
	border-radius: 50%;
	cursor: pointer;
	background-color: #413B52;
	margin: 7px;
	transition-duration: 0.2s;
}
#t-1:checked ~ .dots label[for="t-1"],
#t-2:checked ~ .dots label[for="t-2"],
#t-3:checked ~ .dots label[for="t-3"],
#t-4:checked ~ .dots label[for="t-4"],
#t-5:checked ~ .dots label[for="t-5"]{
	transform: scale(2);
	background-color: #fff;
	box-shadow: 0px 0px 0px 3px #dddddd24;
}

#t-1:checked ~ .dots label[for="t-2"],
#t-2:checked ~ .dots label[for="t-1"],
#t-2:checked ~ .dots label[for="t-3"],
#t-3:checked ~ .dots label[for="t-2"],
#t-3:checked ~ .dots label[for="t-4"],
#t-4:checked ~ .dots label[for="t-3"],
#t-4:checked ~ .dots label[for="t-5"],
#t-5:checked ~ .dots label[for="t-4"]{
	transform: scale(1.5);
}

#t-1:checked ~ .testimonials label[for="t-3"],
#t-2:checked ~ .testimonials label[for="t-4"],
#t-3:checked ~ .testimonials label[for="t-5"],
#t-4:checked ~ .testimonials label[for="t-1"],
#t-5:checked ~ .testimonials label[for="t-2"]{
	transform: translate3d(600px, 0, -180px) rotateY(-25deg);
	z-index: 2;
}

#t-1:checked ~ .testimonials label[for="t-2"],
#t-2:checked ~ .testimonials label[for="t-3"],
#t-3:checked ~ .testimonials label[for="t-4"],
#t-4:checked ~ .testimonials label[for="t-5"],
#t-5:checked ~ .testimonials label[for="t-1"]{
	transform: translate3d(300px, 0, -90px) rotateY(-15deg);
	z-index: 3;
}

#t-2:checked ~ .testimonials label[for="t-1"],
#t-3:checked ~ .testimonials label[for="t-2"],
#t-4:checked ~ .testimonials label[for="t-3"],
#t-5:checked ~ .testimonials label[for="t-4"],
#t-1:checked ~ .testimonials label[for="t-5"]{
	transform: translate3d(-300px, 0, -90px) rotateY(15deg);
	z-index: 3;
}

#t-3:checked ~ .testimonials label[for="t-1"],
#t-4:checked ~ .testimonials label[for="t-2"],
#t-5:checked ~ .testimonials label[for="t-3"],
#t-2:checked ~ .testimonials label[for="t-5"],
#t-1:checked ~ .testimonials label[for="t-4"]{
	transform: translate3d(-600px, 0, -180px) rotateY(25deg);

}

#t-1:checked ~ .testimonials label[for="t-1"],
#t-2:checked ~ .testimonials label[for="t-2"],
#t-3:checked ~ .testimonials label[for="t-3"],
#t-4:checked ~ .testimonials label[for="t-4"],
#t-5:checked ~ .testimonials label[for="t-4"],
#t-5:checked ~ .testimonials label[for="t-5"]{

	z-index: 4;
  
}