html {
    zoom: 1.10;
}

html, body {
	margin: 0;
	padding: 0;
}

body {
    background-color: #000;
    background-image: url('../images/muonline-bg-principal.jpg');
    background-position: center top;
    background-repeat: repeat-y;

    /* 50px MÁS ANCHA */
    background-size: calc(69%) auto !important;

    color: #ffffff;
    font-size: 0.9em;
    font-family: Verdana, Arial, Geneva, sans-serif;
}


/*APARECE DESLIZANDOSE*/
/* Estado inicial sin animación */
#content-right,
#content-left {
    opacity: 0;
}

/* Clases que activan animación */
.animate-right {
    animation: slide-bounce 0.8s ease-out forwards;
}

.animate-left {
    animation: slide-bounce-left 0.8s ease-out forwards;
}

/* Animación derecha */
@keyframes slide-bounce {
    0% {
        transform: translateX(300%);
        opacity: 0;
    }
    60% {
        transform: translateX(-15px);
        opacity: 1;
    }
    80% {
        transform: translateX(7px);
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Animación izquierda */
@keyframes slide-bounce-left {
    0% {
        transform: translateX(-300%);
        opacity: 0;
    }
    60% {
        transform: translateX(15px);
        opacity: 1;
    }
    80% {
        transform: translateX(-7px);
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}





.iframe-container {
  width: 605px;
  height: 680px;
  overflow: auto; /* permite scroll visible */
  position: relative;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #888 #f1f1f1;
}

/* Scroll elegante para Webkit (Chrome, Edge, Safari) */
.iframe-container::-webkit-scrollbar {
  width: 8px;
}

.iframe-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.iframe-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

.iframe-container::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.iframe-container iframe {
  width: 100%;
  height: 1300px;
  border: none;
}
@media (max-width: 768px) {
	body {
		background-size: cover;
		background-repeat: repeat-y;
		background-position: top center;
	}
}

/* 🖥️ PC */
@media (min-width: 769px) {
	body {
		background-size: auto;
		background-repeat: repeat-y;
	}
}

img { border: 0px; }
a img { border: 0px; }

:focus { outline: 0; }

/*  Global Nav */
/* ============================================ */


.herald-post {
    width: 90%;
    max-width: 800px;
    margin: 40px auto;
    font-family: 'Cinzel', serif;
    color: #cfcfcf;
}

.herald-header {
    height: 69px;
    background: url('../muonline/images/muonline-contenedor-arriba.png') no-repeat center top;
    background-size: 100% 97px;
}

.herald-content {
    background: url('../muonline/images/muonline-contenedor-centro.gif') repeat-y center top;
    padding: 30px 25px;
}

.section-title {
    color: #d6b46a;
    text-align: center;
    font-size: 28px;
    letter-spacing: 2px;
    margin-bottom: 40px;
}

.class-section {
    margin-bottom: 60px;
}

.class-title {
    color: #d6b46a;
    text-align: center;
    font-size: 18px;
    margin: 35px 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

.class-body {
    display: flex;
    gap: 25px;
    align-items: flex-start;
    margin-bottom: 25px;
}

.class-img {
    width: 187px;
    height: 219px;
    border: 4px solid #d6b46a;
    padding: 4px;
    background: rgba(0,0,0,0.6);
    box-shadow: 0 0 15px rgba(214,180,106,0.5);
    transition: transform 0.3s, box-shadow 0.3s;
}

.class-img:hover {
    transform: scale(1.05);
    box-shadow: 0 0 25px rgba(214,180,106,0.7);
}

.stats-container {
    width: 100%;
}

.stats-table, .growth-table {
    width: 100%;
    font-size: 13px;
    border-collapse: collapse;
    margin-bottom: 15px;
}

.stats-table thead tr, .growth-table thead tr {
    color: #d6b46a;
    background: rgba(214,180,106,0.08);
}

.skills-container {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.skill-card {
    flex: 1 1 30%;
    padding: 12px 14px;
    background: rgba(0,0,0,0.45);
    border-left: 3px solid #d6b46a;
    transition: transform 0.3s, background 0.3s;
}

.skill-card b {
    color: #d6b46a;
}

.skill-card:hover {
    transform: translateY(-5px);
    background: rgba(0,0,0,0.6);
}

.herald-footer {
    height: 30px;
    background: url('../muonline/images/muonline-contenedor-abajo.gif') no-repeat bottom center;
}



.slider-thumbs img {
    width: 115px;
    height: 89px;
    margin: 0 4px;
    cursor: pointer;
    opacity: 0.5;          /* por defecto opaco */
    transition: opacity 0.1s; /* transici���n suave */
}

.slider-thumbs img:hover {
    opacity: 1;             /* se ilumina al pasar el mouse */
}

.slider-thumbs img.active {
    opacity: 1;             /* se ilumina la vi���eta activa */
}

      /* Slider y viñetas */
        .slider-container { position: relative; text-align: center; margin-bottom: 20px; }
        .slider-main { width: 600px; height: 300px; }
        .slider-thumbs { text-align: center; margin-top: 10px; }
        .slider-thumbs img { width: 115px; height: 89px; margin: 0 4px; cursor: pointer; opacity: 0.5; transition: opacity 0.3s; }
        .slider-thumbs img:hover, .slider-thumbs img.active { opacity: 1; }
        
          /* Ajustes específicos para menús y enlaces */
a, a:visited, a:hover, a:active,
#gnav-container a,
#nav li a,
.subnav .selection a,
.rightbar-box1 a,
.navbar a,
button, input, select, textarea {
    font-size: 11.5px !important; /* Cambiar también aquí */
}

a, button {
    transition: all 0.0s ease;
}

a:hover, button:hover {
    transform: translateY(-2px);
    text-shadow: 0 0 6px #FC4B08, 0 0 12px #FC4B08;
    color: #f5d87c;
}




#main-slider {
    width: 660px; 
    height: 292px; 
    object-fit: contain; /* antes era cover */
    display: block; 
    margin: 0 auto;
}


/* Ajuste de vi���etas del slider */
#slider-thumbs img {
    width: 117px;
    height: 90px;
    margin: 0 4px;
    cursor: pointer;
    position: relative;
    top: -9px; /* ajusta este valor para subir o bajar */
}

#slider-thumbs a.active img {
    border: 2px solid #FFD700;
}

#gnav-container {
	background: #000000;
	color: #999999;
	font-size: 17px;
	height: 24px;
	margin: 0px;
	padding: 0px;
	text-align: center;
	width: 100%;
	}

	.gnav {
		background: #000000  no-repeat;
		margin: 0px auto;
		padding: -1px 0px 4px 45px;
		text-align: left;
		width: 600px;
		float: left;
		}

	.gnav a, gnav a:link, gnav a:visited {
		color: #999999;
		text-decoration: none;
		}

	.gnav a:hover {
		color: #990000;
		text-decoration: underline;
		}

	.gnav a.active {
		color: #990000;
		text-decoration: underline;
		}

	.lang-select {
		width: 140px;
		height: 24px;
		float: right;
		text-align: right;
		margin: 0px 0px 0px 0px;
		background: #212121;
		}


/*  Main Site - BG Fixes */
/* ============================================ */

.bg-fix-gnav {
	background: #000000;
	height: 24px;
	width: 100%;
	position: absolute;
	left: 0px;
	top: 0px;

	}

.bg-fix-hill {
	background: url('../images/muonline-header-bg.jpg') top center no-repeat;
	height: 333px;
	width: 100%;
	position: absolute;
	left: 0px;
	top: 24px;
	}

.bg-fix-header {
	background: url('../images/muonline-header-base-metal.jpg') top center no-repeat;
	height: 68px;
	width: 100%;
	position: absolute;
	left: 0px;
	top: 142px;
	}


/* Header */
/* ============================================ */

#header-container {
	background: url('../images/muonline-header-bg.jpg') top center no-repeat;
	height: 184px;
	margin: 0px auto;
	text-align: center;
	width: 985px;
	position: relative;
	}

	.header-base {
		background: url('../images/muonline-header-base-metal.jpg') top center no-repeat;
		height: 68px;
		margin: 0px auto;
		padding: 0px;
		width: 985px;
		position: absolute;
		left: 0px;
		top: 118px;
		z-index: 0;
		}

	.header-logo {
		width: 407px;
		height: 127px;
		position: absolute;
		left: 55px;
		top: 0px;
		z-index: 1;
		}

	.header-char {
		width: 450px;
		height: 127px;
		position: absolute;
		left: 534px;
		top: -90px;
		z-index: 1;
		}

	.navbar {
		height: 67px;
		margin: 0px auto;
		width: 732px;
		position: absolute;
		left: 125px;
		top: 117px;
		z-index: 2;
		}


/* Header - Main Nav */
/* ============================================ */

	ul#nav {
		position: relative;
		top: 0px;
		left: 0px;
		width: 732px;
		margin: 0px;
		height: 67px;
		list-style-type: none;
		overflow: hidden;
		}

	body#home ul#nav  { background: transparent url('../images/muonline-nav-matrix.gif') no-repeat 0 0; }
	body#herald ul#nav { background: transparent url('../images/muonline-nav-matrix.gif') no-repeat 0 -67px; }
	body#realm ul#nav  { background: transparent url('../images/muonline-nav-matrix.gif') no-repeat 0 -134px; }
	body#forum ul#nav  { background: transparent url('../images/muonline-nav-matrix.gif') no-repeat 0 -201px; }

	ul#nav li a {
		position: absolute;
		top: 0px;
		width: 183px;
		text-indent: -9000px;
		text-decoration: none;
		padding: 67px 0px 0px 0px;
		overflow: hidden;
		height: 0px !important;
		height /**/:67px; /* IE5/Win */
		background: transparent url('../images/muonline-nav-matrix.gif') no-repeat;
		}

	body#home li#hom a 				{ background-position: 0 0; width: 183px; left: 0; }
	body#home li#hom a:hover		{ background-position: 0 0; }
	body#home li#her a 				{ background-position: -183px -268px; left: 183px; }
	body#home li#her a:hover		{ background-position: -183px 0px; }
	body#home li#rlm a 				{ background-position: -366px -268px; left: 366px; }
	body#home li#rlm a:hover		{ background-position: -366px 0; }
	body#home li#for a 				{ background-position: -549px -268px; left: 549px; }
	body#home li#for a:hover		{ background-position: -549px 0; }

	body#herald li#hom a				{ background-position: 0 -268px; width: 183px; left: 0; }
	body#herald li#hom a:hover		{ background-position: 0 -67px; }
	body#herald li#her a				{ background-position: -183px -67px; left: 183px; }
	body#herald li#her a:hover		{ background-position: -183px -67px; }
	body#herald li#rlm a				{ background-position: -366px -268px; left: 366px; }
	body#herald li#rlm a:hover		{ background-position: -366px 0; }
	body#herald li#for a				{ background-position: -549px -268px; left: 549px; }
	body#herald li#for a:hover		{ background-position: -549px 0; }

	body#realm li#hom a 				{ background-position: 0 -268px; width: 183px; left: 0; }
	body#realm li#hom a:hover		{ background-position: 0 -67px; }
	body#realm li#her a 				{ background-position: -183px -268px; left: 183px; }
	body#realm li#her a:hover		{ background-position: -183px -134px; }
	body#realm li#rlm a 				{ background-position: -366px -134px; left: 366px; }
	body#realm li#rlm a:hover		{ background-position: -366px 134px; }
	body#realm li#for a 				{ background-position: -549px -268px; left: 549px; }
	body#realm li#for a:hover		{ background-position: -549px 134px; }

	body#forum li#hom a 				{ background-position: 0 -268px; width: 183px; left: 0; }
	body#forum li#hom a:hover		{ background-position: 0 -67px; }
	body#forum li#her a 				{ background-position: -183px -268px; left: 183px; }
	body#forum li#her a:hover		{ background-position: -183px -134px; }
	body#forum li#rlm a 				{ background-position: -366px -268px; left: 366px; }
	body#forum li#rlm a:hover		{ background-position: -366px 134px; }
	body#forum li#for a 				{ background-position: -549px -201px; left: 549px; }
	body#forum li#for a:hover		{ background-position: -549px 134px; }


/* Body Structure */
/* ============================================ */

#wrapper {
	height: auto !important;
   height: 100%;
	margin: 0px auto;
	min-height: 100%;
   position: relative;
   width: 985px;
	}
#wrapper_blank {
  margin:0 auto;
  position:relative;
  width:985px;
}

#content-container {
    margin: 0px auto;
    padding: 0px 0px 500px 0px;  /* igual al alto del footer */
    text-align: center;
    width: 985px;
}


/* Body Structure - Left Column (sub-nav)*/
/* ============================================ */

#content-left {
	float: left;
	padding: 0px;
	margin: 0px;
	width: 157px;
	}

	.subnav {
		margin: 0px 0px 15px 0px;
		padding: 0px;
		}

	.subnav .cat-title {
		margin: 0px;
		padding: 0px;
		}

	.subnav .nav-selection {
		margin: 0px;
		padding: 0px;
		width: 157px;
		}

		.subnav .nav-selection .header {
			background: url('../images/muonline-nav-header.gif') top center no-repeat;
			height: 17px;
			margin: 0px;
			padding: 0px;
			width: 157px;
			}

		.subnav .nav-selection .listbox {
			background: url('../images/muonline-nav-bg.gif') repeat-y;
			margin: -1px 0px 0px 0px;
			padding: 0px;
			width: 157px;
			}

			.subnav .nav-selection .listbox .selection {
				color: #999999;
				font-size: 10px;
				margin: 0px;
				padding: 5px 0px 5px 0px;
				word-spacing: 1px;
				line-height: 13px;
				}

				.subnav .nav-selection .listbox .selection a, .selection  a:link, .selection  a:visited {
						color: #999999;
						text-decoration: none;
						}

					.subnav .nav-selection .listbox .selection a:hover {
						color: #f5c400;
						text-decoration: none;
						}

		.subnav .nav-selection .footer {
			background: url('../images/muonline-nav-footer.gif') top center no-repeat;
			height: 12px;
			margin: 0px;
			padding: 0px;
			width: 157px;
			}


/* Body Structure - Middle Column*/
/* ============================================ */

#content-center {
	float: left;
	margin: 0px 0px 0px 5px;
	padding: 0px;
	text-align: center;
	width: 660px;
	}


/* Body Structure - Right Column*/
/* ============================================ */


#content-right {
	float: right;
	padding: 0px;
	margin: 0px 1px 0px 0px;
	width: 157px;
	}

	.rightbar-box1 {
		margin: 0px 0px 15px 0px;
		padding: 0px;
		width: 157px;
		}

	.rightbar-box2 {
		margin: 0px;
		padding: 0px;
		width: 157px;
		}

	.rightbar-box3 {
		margin: 0px;
		padding: 0px;
		width: 157px;
		}


/* Footer*/
/* ============================================ */


#footer-container {
    background: url('../images/muonline-footer-bg.gif') top center no-repeat;
    height: 500px;
    margin: -500px auto 0px;
    position: relative;
    text-align: center;
    width: 835px; /* antes 984px */
}

	.footer {
		color: #666666;
		text-align: center;
		padding: 120px 0px 0px 0px;
		margin: 0px;
		}

.footer .footer-row1 {
    width: 100%;        /* se adapta al contenedor */
    position: relative;
    left: 0px;        /* 20px a la izquierda */
    text-align: center;
    margin: 0 auto;
    padding: 20;
    margin-top: 20px;

}

			.footer .footer-row1 img{
				margin: 0px 10px;
				}

		.footer .footer-row2 {
			width: 810px;
			text-align: left;
			margin: 40px auto 0px auto;
			}

			.footer .footer-row2 .legal-img {
				float: left;
				margin: 5px 5px 0px 10px !important;
				margin: 5px 3px 0px 5px;
				}

			.footer .footer-row2 .legal-type {
				float: left;
				margin: 5px 0px 0px 0px;
				font-size: 12px;
				line-height: 20px;
				}

				.footer .footer-row2 .legal-type a, .legal-type a:link, .legal-type a:visited {
					color: #666666;
					text-decoration: none;
					font-weight: bold;
					}

				.footer .footer-row2 .legal-type a:hover {
					color: #990000;
					text-decoration: underline;
					font-weight: bold;
					}

.legal-img img {
    width: 65%;
    height: auto;
}

.legal-text {
    position: relative;
    left: -60px; /* mueve 20px a la izquierda */
}

/* 404*/
/* ============================================ */

.fourohfour {
	margin: 25px auto;
	}


/* Roadblock */
/* ============================================ */

#roadblock-container {
	font-size: 11px;
	font-weight: bold;
	height: 18px;
	line-height: 18px;
	text-align: center;
	width: 100%;
	background: #640000;
	border-width: 1px 0px;
	border-style: solid;
	border-color: #212121;
	color: #999999;
	margin: 0px !important;
	margin: 1px 0px;
	padding: 2px 0px;
	position: absolute;
	top: 0px;
	left: 0px;
	overflow: auto;
	z-index: 20;
}

	#roadblock-container a, gnav a:link, gnav a:visited {
		color: #ffffff;
		text-decoration: none;
		}

	#roadblock-container a:hover {
		color: #F5C400;
		text-decoration: underline;
		}

	#roadblock-container a.active {
		color: #F5C400;
		text-decoration: underline;
		}