/*
	Halcyonic 3.1 by HTML5 UP
	html5up.net | @n33co
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

/*********************************************************************************/
/* Global                                                                        */
/*********************************************************************************/

/* Basic */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
	display: block;
}
	body
	{
		background: #D4D9DD url('images/bg03.jpg');
	}

	body, input, textarea, select
	{
		color: #474f51;
		font-size: 13.5pt;
		font-family: 'italic';
		line-height: 1.85em;
		font-weight: 300;
	}

	ul, ol, p, dl
	{
		margin: 0 0 2em 0;
	}

	a
	{
		text-decoration: underline;
	}
	
	a:hover
	{
		text-decoration: none;
	}

	section > :last-child, .last-child
	{
		margin-bottom: 0 !important;
	}

/* Multi-use */

	.link-list
	{
	}
	
		.link-list li
		{
			padding: 0.2em 0 0.2em 0;
		}
		
		.link-list li:first-child
		{
			padding-top: 0 !important;
			border-top: 0 !important;
		}
		
		.link-list li:last-child
		{
			padding-bottom: 0 !important;
			border-bottom: 0 !important;
		}

		#content .link-list li
		{
			border-bottom: solid 1px #e2e6e8;
		}

		#footer .link-list li
		{
			border-top: solid 1px #e0e4e6;
			border-bottom: solid 1px #b5bec3;
		}

	.quote-list
	{
	}
	
		.quote-list li
		{
			padding: 1em 0 1em 0;
			overflow: hidden;
		}
		
		.quote-list li:first-child
		{
			padding-top: 0 !important;
			border-top: 0 !important;
		}

		.quote-list li:last-child
		{
			padding-bottom: 0 !important;
			border-bottom: 0 !important;
		}

			.quote-list li img
			{
				float: left;
			}

			.quote-list li p
			{
				margin: 0 0 0 90px;
				font-size: 1.2em;
				font-style: italic;
			}
			
			.quote-list li span
			{
				display: block;
				margin-left: 90px;
				font-size: 0.9em;
				font-weight: 400;
			}

		#content .quote-list li
		{
			border-bottom: solid 1px #e2e6e8;
		}

		#footer .quote-list li
		{
			border-top: solid 1px #e0e4e6;
			border-bottom: solid 1px #b5bec3;
		}
	
	.check-list
	{
	}

		.check-list li
		{
			padding: 0.7em 0 0.7em 45px;
			font-size: 1.2em;
			background: url('images/icon-checkmark.png') 0px 1.05em no-repeat;
		}
		
		.check-list li:first-child
		{
			padding-top: 0 !important;
			border-top: 0 !important;
			background-position: 0 0.3em;
		}

		.check-list li:last-child
		{
			padding-bottom: 0 !important;
			border-bottom: 0 !important;
		}

		#content .check-list li
		{
			border-bottom: solid 1px #e2e6e8;
		}

		#footer .check-list li
		{
			border-top: solid 1px #e0e4e6;
			border-bottom: solid 1px #b5bec3;
		}
		
	.feature-image
	{
		display: block;
		margin: 0 0 2em 0;
		outline: 0;
	}
	
		.feature-image img
		{
			display: block;
			width: 100%;
		}

	.bordered-feature-image
	{
		display: block;
		background: #fff url('images/bg04.png');
		padding: 10px;
		box-shadow: 3px 3px 3px 1px rgba(0,0,0,0.15);
		margin: 0 0 1.5em 0;
		outline: 0;
	}
	
		.bordered-feature-image img
		{
			display: block;
			width: 100%;
		}
	
	.button-big
	{
		display: inline-block;
		background: #ed391b;
		color: #fff;
		text-decoration: none;
		font-size: 1.75em;
		font-weight: 300;
		padding: 15px 45px 15px 45px;
		outline: 0;
		border-radius: 10px;
		box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.75), inset 0px 2px 0px 0px rgba(255,192,192,0.5), inset 0px 0px 0px 2px rgba(255,96,96,0.85), 3px 3px 3px 1px rgba(0,0,0,0.15);
		background-image: -moz-linear-gradient(top, #ed391b, #ce1a00);
		background-image: -webkit-linear-gradient(top, #ed391b, #ce1a00);
		background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ed391b), to(#ce1a00));
		background-image: -ms-linear-gradient(top, #ed391b, #ce1a00);
		background-image: -o-linear-gradient(top, #ed391b, #ce1a00);
		background-image: linear-gradient(top, #ed391b, #ce1a00);
		text-shadow: -1px -1px 1px rgba(0,0,0,0.5);
	}

	.button-big:hover
	{
		background: #fd492b;
		box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.75), inset 0px 2px 0px 0px rgba(255,192,192,0.5), inset 0px 0px 0px 2px rgba(255,96,96,0.85), 3px 3px 3px 1px rgba(0,0,0,0.15);
		background-image: -moz-linear-gradient(top, #fd492b, #de2a10);
		background-image: -webkit-linear-gradient(top, #fd492b, #de2a10);
		background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fd492b), to(#de2a10));
		background-image: -ms-linear-gradient(top, #fd492b, #de2a10);
		background-image: -o-linear-gradient(top, #fd492b, #de2a10);
		background-image: linear-gradient(top, #fd492b, #de2a10);
	}

	.button-big:active
	{
		background: #ce1a00;
		box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,0.75), inset 0px 2px 0px 0px rgba(255,192,192,0.5), inset 0px 0px 0px 2px rgba(255,96,96,0.85), 3px 3px 3px 1px rgba(0,0,0,0.15);
		background-image: -moz-linear-gradient(top, #ce1a00, #ed391b);
		background-image: -webkit-linear-gradient(top, #ce1a00, #ed391b);
		background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ce1a00), to(#ed391b));
		background-image: -ms-linear-gradient(top, #ce1a00, #ed391b);
		background-image: -o-linear-gradient(top, #ce1a00, #ed391b);
		background-image: linear-gradient(top, #ce1a00, #ed391b);
	}
	img.redondo {
border: 2px solid grey;
margin: 0;
padding: 0;
border-radius: 800px;
overflow: hidden;
}
.listado {     font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;    margin: 15px;     width: 500px; text-align: left;    border-collapse: collapse; }

.listado th {     font-size: 13px;   font-weight: normal;     padding: 8px;     background: #2E2E2E;

    border-top: 4px solid #2E2E2E;    border-bottom: 1px solid #fff; color: #FFFFFF; }

.listado td {    padding: 8px;     background: #FFFFFF;     border-bottom: 1px solid #fff;
    color: #669;    border-top: 1px solid transparent; }

.listado tr:hover td { background: #F5F5F5; color: #339; }


.player {     font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 14px;       border-collapse: collapse; }

.player th {     font-size: 13px;   font-weight: normal;     padding: 8px;     background: #FFFFFF;

    border-top: 4px solid #FFFFFF;    border-bottom: 1px solid #000; color: #000000; }

.player td {    padding: 8px;     background: #FFFFFF;     border-bottom: 1px solid #fff;
    color: #669;    border-top: 1px solid transparent; }

.player tr:hover td { background: #F5F5F5; color: #339; }

.responsive-table-wrapper {
    overflow-x: auto; /* Permite desplazamiento horizontal si la tabla es demasiado ancha */
    -webkit-overflow-scrolling: touch; /* Mejora el desplazamiento en iOS */
    margin-bottom: 20px; /* Espacio debajo de la tabla si es necesario */
}

/* Opcional: Asegúrate de que las celdas de la tabla no sean demasiado pequeñas */
#tablaCromos th, #tablaCromos td {
    white-space: nowrap; /* Evita que el texto se rompa en varias líneas dentro de la celda si no es necesario */
    /* Para números y apodos, esto puede ser útil. Si hay texto largo, podrías querer un ancho mínimo */
    min-width: 50px; /* Ajusta según sea necesario, evita que las columnas sean diminutas */
}

/* Considera una media query para adaptar la tabla en pantallas pequeñas */
@media (max-width: 768px) { /* Puedes ajustar este breakpoint */
    #tablaCromos th, #tablaCromo td {
        padding: 6px 4px; /* Reduce el padding en móviles */
        font-size: 0.9em; /* Reduce el tamaño de la fuente */
    }
    #tablaCromos img.redondo {
        width: 40px !important; /* Haz que las imágenes de perfil sean más pequeñas en móvil */
        height: 40px !important;
    }
    .cromo-mini {
        width: 30px; /* Ajusta el tamaño de la miniatura del cromo */
        margin: 2px;
    }
    .cromo-mini:hover {
        transform: scale(1.5); /* Menos zoom en móvil */
    }
}
/* Reglas generales para todas las imágenes */
img {
    max-width: 100%; /* Las imágenes no se saldrán de su contenedor */
    height: auto;    /* Mantienen su proporción de aspecto */
    display: block;  /* Previene pequeños espacios debajo de la imagen si están en línea */
}

/* Para tus imágenes de jugador/equipo redondo */
#tablaCromos img.redondo {
    /* Mantén tus border-radius, pero el tamaño ahora lo manejará max-width y height:auto */
    border-radius: 50%;
    /* Si necesitas un tamaño base, usa un ancho máximo */
    width: 34px; /* O el tamaño que desees como base */
    height: 34px; /* Para mantener la forma redonda, aunque height:auto ya lo haría */
    object-fit: cover; /* Para asegurar que la imagen cubre el espacio sin distorsionarse */
}

/* Para las imágenes ok.jpg y no.jpg */
/* Es posible que no necesites reglas específicas si ya tienen display:block y max-width:100% */
#tablaCromos td img { /* Selector más específico si es necesario */
    max-width: 100%;
    height: auto;
    display: inline-block; /* Para que se comporten como texto en la celda */
}

/* Tus mini cromos ya lo tienen, lo cual es bueno */
.cromo-mini {
    width: 35px;
    height: auto; /* Ya lo tienes, ¡bien! */
}
.zoom-mini {
    width: 100%; /* Ya lo tienes, ¡bien! */
    height: auto;
}