@import "validation.css";
@import "ui.css";
@import "notice.css";

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }

* { -webkit-box-sizing: border-box; box-sizing: border-box; }

html, body { position: relative; overflow-x: hidden; }

body {
    width: 100%;
    /* Sustituimos los dos fondos viejos por el nuevo bg.jpg */
    /* Añadimos un degradado oscuro (0.7) para que tu logo y boxes resalten como nunca */
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
                url(../images/fon-top.jpg) center top no-repeat;
    
    background-color: #080b0e; 
    background-attachment: fixed; /* El fondo no se mueve, efecto premium */
    background-size: cover; /* La imagen se estira para cubrir toda la pantalla en 4K */
    
    font-family: Candara, Calibri, Segoe, Segoe UI, Optima, Arial, sans-serif; 
    font-size: 15px; 
    color: #ffffff; 
    min-height: 100vh;
    margin: 0;
}

a { -webkit-transition: all 0.3s ease; transition: all 0.3s ease; text-decoration: none; color: #a02323; }

a:hover { text-decoration: none; }

p { margin-bottom: 20px; }

h1, h2, h3 { color: #b70000; margin-bottom: 20px; line-height: 1.2; }

h1 { font-size: 20px; }

h2 { font-size: 18px; }

h3 { font-size: 16px; }

table { width: 100%; margin-bottom: 15px; }
table td { border-collapse: collapse; padding: 5px 15px; border: 1px solid #4c0c0c; }

img { max-width: 100%; }

caption { margin-bottom: 15px; }

select {
 background: #b7aab4; 
 border: 1px solid #4c0c0c; 
 min-width: 150px; 
 color: #fff; 
 margin-bottom: 
 15px; padding: 12px 40px 12px 20px; 
 position: relative; 
 -webkit-appearance: none; 
 background-image: url(../images/arrow-v.png); 
 background-position: right 10px center; 
 background-repeat: no-repeat; 
 -moz-appearance: none; 
 text-indent: 0.01px; 
 text-overflow: ''; 
 -ms-appearance: none; 
 appearance: none !important; 
 cursor: pointer; 
}

input, textarea {
    background-color: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 72, 0, 0.3) !important;
    color: #fff !important;
    padding: 8px 12px !important; 
    border-radius: 4px !important; 
    transition: all 0.3s ease;
    box-sizing: border-box !important; 
    width: 100% !important;
    max-width: 100% !important; 
}

input:focus, textarea:focus {
    outline: none !important;
    border: 1px solid #ff4800 !important;
    box-shadow: 0 0 12px rgba(255, 72, 0, 0.5) !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
}

button, .button {
 -webkit-transition: all 0.3s ease; 
 transition: all 0.3s ease; 
 cursor: pointer; 
 background: url(../images/button.png) top center no-repeat; 
 height: 58px; 
 width: 167px; 
 border: none; 
 color: #fff; 
 text-shadow: 0px 3px 0px rgba(0, 0, 0, 0.5); 
 font-size: 18px; 
 position: relative; 
 z-index: 1; 
 text-align: center; 
 text-transform: uppercase; 
 font-family: Candara,Calibri,Segoe,Segoe UI,Optima,Arial,sans-serif; 
 -webkit-box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.6); 
 box-shadow: 0px 5px 25px 0px rgb(255 0 24 / 50%);
 -webkit-transition: 0.3s; 
 transition: 0.3s; 
}

button:hover, .button:hover {
 -webkit-filter: brightness(140%);
  filter: brightness(140%);
 text-decoration: none !important; 
}

.button { 
	display: inline-block; 
	text-decoration: none; 
	line-height: 58px;
}

.button-small { 
background: url(../images/button-small.png) top center no-repeat; 
width: 87px; 
height: 30px; 
line-height: 30px; 
font-size: 13px; 
text-transform: none; 
}
.button-small:hover {
 -webkit-filter: brightness(140%);
  filter: brightness(140%); 
}

.button-medium { 
background: url(../images/button.png) top center no-repeat; 
background-size: 117px 40px; 
width: 117px; 
height: 40px; 
line-height: 40px; 
font-size: 14px; 
text-transform: none; 
}
.button-medium:hover { 
 -webkit-filter: brightness(140%);
  filter: brightness(140%); 
}

:focus { outline: none; color: #fff; }

::-webkit-input-placeholder { color: #fff; }

::-moz-placeholder { color: #fff; }

:-moz-placeholder { color: #fff; }

:-ms-input-placeholder { color: #fff; }

.wrapper_web { width: 100%; max-width: 1200px; margin: 0 auto; position: relative; }

.flex { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }

.flex-c { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; }

.flex-s { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; }

.flex-s-c { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; }

.flex-c-c { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; }

.bright:hover { -webkit-filter: brightness(120%); filter: brightness(120%); }

.topPanel {
  position: fixed;
  top: 0; 
  left: 0; 
  right: 0; 
  width: 100%; 
  height: 80px; 
  /* Reemplazamos el #000 sólido por un tono oscuro con transparencia */
  background: rgba(8, 11, 14, 0.75); 
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* Línea divisoria muy sutil */
  z-index: 20; 
  transition: all 0.3s ease;
}

.topPanel-wrapper { width: 100%; max-width: 1200px; margin: 0 auto; position: relative; }

.menu { position: relative; }
.menu li { padding: 0px 0px; display: inline-block; position: relative; }
.menu li a { 
	display: -webkit-box; 
	display: -ms-flexbox; 
	display: flex;
	 -webkit-box-align: center;
	 -ms-flex-align: center;
	  align-items: center; 
	  height: 79px; 
	  padding: 0px 35px; 
	  font-size: 18px; 
	  color: #fff; 
	  text-transform: uppercase; 
	  position: relative;
	  transition: color 0.3s ease;
	}

.menu li a:hover { 
  color: #ff4800; 
  background: transparent; 
  border-bottom: none; 
  text-shadow: 0px 0px 10px rgba(255, 72, 0, 0.5);
}

/* Creamos la línea decorativa oculta */
.menu li a::after {
  content: '';
  position: absolute;
  bottom: 20px; /* Ajusta la altura de la línea dentro del menú */
  left: 50%;
  width: 0;
  height: 2px;
  background: #ff4800;
  transition: all 0.3s ease;
  transform: translateX(-50%);
  box-shadow: 0px 0px 8px rgba(255, 72, 0, 0.8);
}

/* Hacemos que la línea crezca al pasar el cursor o estar activo */
.menu li a:hover::after {
  width: 60%; 
}
.menu li .menu-a { position: relative; cursor: pointer; }
.menu li .menu-a.show { color: #ffffff; background: rgba(100, 9, 7, 0.7); border-bottom: 1px solid #fff; }
.menu .dropDown-menu { 
  display: none; 
  position: absolute; 
  left: 0; 
  width: 100%; 
  top: 100%; 
  /* Efecto Glassmorphism */
  background: rgba(8, 11, 14, 0.9); 
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 2px solid #ff4800; /* Remate visual inferior */
  padding: 20px 0px; 
  border-radius: 0 0 8px 8px; /* Esquinas inferiores ligeramente redondeadas */
}

header { height: 700px; position: relative; }

.logo {
 position: absolute; 
 bottom: 248px;
 left: -83px; 
 width: 100%; 
 z-index: 3; 
}

.logo a:hover { -webkit-filter: brightness(140%); filter: brightness(140%); }

.container_web { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; z-index: 8; }
.container_web aside {
 width: 300px; 
 background-color: #000; 
}

.content {
 width: calc(100% - 600px); 
 background: url(../images/bg_content.png) repeat-y;
 -webkit-box-shadow: inset 0px 0px 17px 0px rgba(0, 0, 0, 0.75); 
 box-shadow: inset 0px 0px 17px 0px rgba(0, 0, 0, 0.4); 
 position: relative;
  z-index: 3; 
  padding: 35px; 
  line-height: 1.4; 
}

.content .h1 {
	display: block; 
	font-weight: bold; 
	text-align: center; 
	background: url(../images/border.png) center bottom no-repeat; 
	padding-bottom: 30px; 
	margin-bottom: 45px; 
	color: #000; 
	font-size: 18px;
}

.content a { text-decoration: none; }
.content a:hover { text-decoration: none; }
.content:after {
 content: ""; 
 width: 628px; 
 height: 126px; 
 background: url(../images/fon_new_bottom.png) center bottom no-repeat; 
 position: absolute; 
 left: 50%; 
 margin-left: -313px;
 bottom: -50px;
}

.swiper-container { margin-left: -35px; margin-top: -35px; margin-bottom: 35px; position: relative; width: calc(100% + 70px); height: 380px; -webkit-box-shadow: 0px 7px 10px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 7px 10px 0px rgba(0, 0, 0, 0.3); }

.swiper-slide { height: 380px; background-position: center; background-repeat: no-repeat; background-size: cover; }

.swiper-button-next, .swiper-button-prev { width: 55px; height: 55px; }

.swiper-button-next { background: url(../images/slide-next.jpg) no-repeat; right: 0px; }
.swiper-button-next:after { display: none; }

.swiper-button-prev { background: url(../images/slide-prev.jpg) no-repeat; left: 0px; }
.swiper-button-prev:after { display: none; }

.swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
 bottom: 0px; height: 60px; background: rgba(0, 0, 0, 0.4);
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; -webkit-box-align: center;
  -ms-flex-align: center; 
  align-items: center;
   -webkit-box-pack: center; 
   -ms-flex-pack: center; 
   justify-content: center; 
}

.slide-more { position: absolute; right: 35px; bottom: 90px; }

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { background: #938b85; opacity: 1; }

.swiper-pagination-bullet-active { background: #ff0000 !important; -webkit-box-shadow: 0px 0px 10px 0px #ff0000; box-shadow: 0px 0px 10px 0px #ff0000; }

.download-button {
    width: 300px !important; 
    height: 120px !important; /* Mantenemos el tamaño para que se vea importante */
    position: relative; 
    
    /* Usamos flexbox para centrar el texto perfectamente sin trucos */
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    padding: 0 !important; /* Borramos el relleno viejo de 75px */
    
    /* Efecto cristal con un suave degradado naranja para que llame la atención */
    background: linear-gradient(135deg, rgba(255, 72, 0, 0.15), rgba(8, 11, 14, 0.7)) !important; 
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 72, 0, 0.5) !important; 
    
    /* ¡AQUÍ ESTÁ LA MAGIA! Puntas curveadas iguales a la caja de abajo */
    border-radius: 8px !important; 
    
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(255, 72, 0, 0.1) !important;
    margin-bottom: 0px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

/* Efecto al pasar el mouse (brilla y se levanta) */
.download-button:hover {
    background: linear-gradient(135deg, rgba(255, 72, 0, 0.3), rgba(8, 11, 14, 0.85)) !important; 
    border: 1px solid #ff4800 !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4), 0 0 25px rgba(255, 72, 0, 0.5) !important;
    transform: translateY(-3px) !important;
}

/* Estilo para las letras "Download" */
.download-button span {
    position: relative;
    z-index: 20;
    font-size: 24px !important; /* Texto más grande e imponente */
    font-weight: bold !important; 
    color: #ffffff !important; /* Letras blancas en lugar del amarillo viejo */
    text-shadow: 0px 0px 12px rgba(255, 72, 0, 0.9) !important; /* Resplandor neón */
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
}

/* 1. ESTO HACE TRANSPARENTE EL FONDO NEGRO DE LA BARRA LATERAL */
.container_web aside {
    background-color: transparent !important; 
}

/* 2. REEMPLAZA TU .serverBlock ANTERIOR POR ESTE (Ajusté el ancho y la transparencia) */
.serverBlock {
    width: 300px !important; 
    height: 120px !important; /* <-- CAMBIA EL AUTO POR PÍXELES */
    position: relative;
    padding: 15px !important; 
    background: rgba(8, 11, 14, 0.2) !important; /* Lo hice más transparente para que se note el fondo de la web */
    backdrop-filter: blur(12px) !important; /* Aumenté un poco el desenfoque */
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4) !important;
    margin-bottom: 0px !important;
    box-sizing: border-box !important; 
}
.server-progress {
    background: rgba(0, 0, 0, 0.6) !important;
    height: 12px !important; 
    width: 100% !important;
    margin-bottom: 12px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.server-progress span {
    display: block;
    background: linear-gradient(90deg, #ff4800, #ff8c00) !important;
    height: 100% !important;
    border-radius: 6px !important;
    box-shadow: 0 0 10px rgba(255, 72, 0, 0.8) !important;
    position: relative;
    overflow: hidden;
}

.server-progress span::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    background: linear-gradient(90deg, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.4) 50%, rgba(255,255,255, 0) 100%);
    animation: shimmer 2s infinite;
    transform: skewX(-20deg);
}

@keyframes shimmer {
    0% { transform: translateX(-100%) skewX(-20deg); }
    100% { transform: translateX(200%) skewX(-20deg); }
}

.serverBlock > div { width: 250px; content: ""; z-index: 1;
 }

.server-title { font-weight: bold; font-size: 18px; margin-bottom: 12px; }

.server-progress { background: rgba(30, 30, 30, 0.4); height: 9px; width: 100%; margin-bottom: 12px; padding: 3px; }
.server-progress span { display: block; background: #b3d148; height: 3px; }

.server-online { font-size: 14px; }
.server-online span { color: #d6f75f; }

.socBlock {
 background: rgba(27, 6, 6, 1);
  height: 140px;
  padding: 8px 0px; 
}
.socBlock a { width: 50%; color: #fff; font-size: 14px; padding-left: 17px; }
.socBlock a:hover { padding-left: 5px; color: #f63737; font-weight: bold; }
.socBlock .icon { margin-right: 10px; }

.icon {
 display: -webkit-box; 
 display: -ms-flexbox; 
 display: flex; 
 -webkit-box-align: center; 
 -ms-flex-align: center; 
 align-items: center; 
 -webkit-box-pack: center; 
 -ms-flex-pack: center; 
 justify-content: center; 
 background: url(../images/soc-bg.png) no-repeat; 
 width: 50px; 
 height: 50px;
 -webkit-filter: drop-shadow(0px 7px 10px rgba(0, 0, 0, 0.7)); 
 filter: drop-shadow(0px 3px 4px rgba(196, 36, 41, 0.5)); 
 color: #fff; 
 font-size: 18px; 
}

.block {
 position: relative; 
 min-height: 250px; 
 background: url(../images/block-bg-top.jpg) center top no-repeat, url(../images/block-bg-bottom.jpg) center bottom no-repeat, rgba(3, 3, 3, 1); 
 padding: 50px 0px 55px 0px; 
 margin-bottom: 20px;
}

.block:before { 
	content: ""; 
	background: url(../images/title-img.png) no-repeat; 
	position: absolute; 
	width: 318px;
	height: 72px; 
	left: -9px; 
	top: -19px; 
	z-index: 9;
}

.blockLogin {
 position: relative; 
 min-height: 250px; 
 background: url(../images/block-bg-top.jpg) center top no-repeat, url(../images/block-bg-bottom.jpg) center bottom no-repeat, rgba(3, 3, 3, 1); 
 padding: 10px 0px 55px 0px; 
 margin-bottom: 20px;
}

.img_img{
	text-align:center;
}

.blockTitle { position: relative; text-align: center; margin-bottom: 40px; }
.blockTitle p { color: #ff4800; font-weight: bold; font-size: 18px; margin-bottom: 8px; }
.blockTitle span { font-size: 13px; color: #a02323; }

.tableBlock-thead { background: rgba(237, 31, 36, 0.1); margin: 0px 25px 20px 25px; }
.tableBlock-thead .tableBlock-td { color: #ff3939; font-weight: bold; }

.tableBlock-tr { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.tableBlock-td { position: relative; padding: 12px 10px; font-size: 14px; color: #fff; }
.tableBlock-td a { color: #fff; }

.table-top .tableBlock-td:nth-child(1) {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
.table-top .tableBlock-td:nth-child(1) img { margin-left: 4px; }
.table-top .tableBlock-td:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.td-15 { width: 15%; }
.td-20 { width: 20%; }
.td-25 { width: 25%; }
.td-30 { width: 30%; }
.td-40 { width: 40%; }
.td-50 { width: 50%; }
.td-65 { width: 65%; }

.plvl { position: absolute; top: 5px; margin-left: 3px; color: #ff0000; font-size: 12px; }

.tableBlock-body .tableBlock-tr {
    /* Agrega esta línea a la clase base */
    transition: all 0.3s ease;
}
.tableBlock-body .tableBlock-tr:hover {
    background: rgba(50, 13, 13, 0.8); /* Rojo oscuro un poco transparente */
    color: #ff3939; 
    transform: translateX(8px); /* La fila se desliza un poco a la derecha */
    border-left: 3px solid #ff4800; /* Añade un acento visual en el borde izquierdo */
}
.text-td:hover .tableBlock-td{ color: #ff3939; font-weight: bold; }
.tableBlock-body .tableBlock-tr:hover a { color: #ff3939; }

.table-event .tableBlock-td { padding: 12px 3px; }
.table-event .tableBlock-td:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-event .tableBlock-td:last-child { text-align: right; }

.opened { color: #ff3939; }

.blockMore {
 height: 127px; 
 position: relative; 
 padding: 45px 0px 0px 45px; 
 font-weight: bold; 
 text-shadow: 0px 1px 2px #000; 
 -webkit-transition: 0.3s; 
 transition: 0.3s; 
 transition: 0.3s; 
 border-bottom: solid 1px #250607;
}
.blockMore p { margin-bottom: 10px; }
.blockMore:hover { padding: 45px 0px 0px 60px; }
.blockMore:after { content: ""; position: absolute; bottom: 0; }
.blockMore_1 { background: url(../images/block-bg_1.jpg) no-repeat; }
.blockMore_1:hover:after { right: -70px; }
.blockMore_1:after {
 background: url(../images/hero_1.png) no-repeat; 
 width: 141px; 
 height: 155px; 
 right: -50px;
  -webkit-transition: 0.3s; 
  transition: 0.3s; 
}
.blockMore_2 { background: url(../images/block-bg_2.jpg) no-repeat; }
.blockMore_2:hover:after { right: -110px; }
.blockMore_2:after {
 background: url(../images/hero_2.png) no-repeat; 
 width: 225px;
  height: 143px; 
  right: -90px; 
  -webkit-transition: 0.3s; 
  transition: 0.3s; 
}
.blockMore_3 { background: url(../images/block-bg_3.jpg) no-repeat; }
.blockMore_3:hover:after { right: -110px; }
.blockMore_3:after { 
 background: url(../images/hero_3.png) no-repeat;
 width: 211px; 
 height: 138px; 
 right: -90px; 
 -webkit-transition: 0.3s; 
 transition: 0.3s; 
}

.news { margin-bottom: 50px; background: url(../images/border.png) center bottom no-repeat; padding-bottom: 30px; }
.news a { text-decoration: none; }
.news-title { margin-bottom: 20px; }

.news-title a {
 color: #b70000; 
 font-weight: bold; 
 text-decoration: none; 
 font-size: 16px;
}

.news-title a:hover {text-decoration: underline; }
.news-img { margin-bottom: 20px; }

.news-content { 
line-height: 1.4;
margin-bottom: 30px; 
color: #0e0101; 
font-weight: bold;
}
.news-content a:hover{
	text-decoration: underline;
}

.news-date { 
	display: -webkit-box; 
	display: -ms-flexbox; 
	display: flex; 
	-webkit-box-align: center; 
	-ms-flex-align: center; 
	align-items: center; 
	font-size: 14px; 
	color: #0e0101;
	font-weight: bold;
}
.news-date span { margin-right: 5px; }

/*download*/

.downloadBlock {
  text-align: center;
  padding: 35px;
  margin: 0px 35px;
}

.downloadBlock p {
  margin-bottom: 30px;
}

.download-block-1 {
  margin-bottom: 40px;
}

.download-block-1:last-child {
  margin-bottom: 0px;
}

.client-text {
  height: 90px;
  flex-wrap: wrap;
  align-content: center;
  background: rgba(183, 170, 180, 0.2);
  border: 1px solid #b7aab4;
}
.client-text span {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 9px;
  color: #a02323;
}

.button-download{
 margin-top: 15px;
}

/*end download*/

/*widget Discussions*/

.discussions-content-top{
  position: relative;
  z-index: 1;
  padding: 0px 25px;
}

.admin-icon{
float: left;
border-radius: 50%;
width: 45px;
height: 45px;
background-size: 45px;
box-shadow: 0em 8px 15px rgba(0, 0, 0, 0.3);
margin-right: 26px;
}

.discussions-content {
  position: relative;
  transition: 0.3s;
  padding: 10px 0px 10px 0px;
}
.discussions-content:hover {
  background-color: #320d0d;
  box-shadow: 0px 8px 10px -3px rgba(0, 0, 0, 0.45);
  margin: 0px -25px 0px -25px;
  padding: 10px 30px 10px 20px;
}
.discussions-content:hover .discussions-text {
  color: #fff;
}
.discussions-content:hover .discussions-text-bt a {
  color: #fff;
}
.discussions-icon{
  box-shadow: 0em 8px 15px rgba(0, 0, 0, 0.3);
  border-radius: 50%;
}
.discussions-icon img {
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: block;
}

.discussions-message{
  position: absolute;
  right: 0px;
  top: 8px;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  background-color: #b83301;
  color: #fff;
  font-size: 12px;
}

.discussions-info {
  width: calc(100% - 45px);
  padding-left: 10px;
}

.discussions-text{
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  width: 170px;
  display: block;
  margin-bottom: 5px;
}

.discussions-text-bt{
  font-size: 15px;
  color: #958383;
  font-weight: bold;
}
.discussions-text-bt a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 98px;
  position: relative;
  bottom: -3px;
}

.discussions-content:hover .discussions-text-bt{
  color: #bca0b9;
}

.discussions-content{
  padding-bottom: 10px;
  padding-top: 10px;
}

.discussions-content:hover .discussions-message{
  background-color: #b83301;
  color: #fff;
  font-weight: bold;
  margin-right: 25px;
}

.discussions-content:hover .discussions-text {
  color: #fff;
}

.discussions-content:hover .discussions-text-bt a {
  text-decoration:none;
  color: #fff;
}

.more-top {
	margin-top: 25px;
	text-align:center;
}

/*widget Discussions end*/


/*smog*/


.smog {
    position: absolute;
    top: 650px;
    left: 170px;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.smog .num1 {
    -webkit-animation: spreadSmog 7s infinite linear;
    animation: spreadSmog 7s infinite linear;
}
.smog .num2 {
  -webkit-animation: spreadSmog 15s infinite linear;
  animation: spreadSmog 15s infinite linear;
}
.smog .num3 {
  -webkit-animation: spreadSmog 40s infinite linear;
  animation: spreadSmog 40s infinite linear;
}
.smog .num1 {
    bottom: 0;
    left: -677px;
    width: 2354px;
    height: 1300px;
    opacity: 0;
}
.smog i {
    position: absolute;
    display: block;
    background: url(../images/sp_smog.png) no-repeat;
    transform-origin: 50% 100%;
}
.smog .num2 {
    bottom: 0;
    left: -677px;
    width: 2354px;
    height: 1300px;
    opacity: 0;
}
.smog .num3 {
    bottom: 0;
    left: -677px;
    width: 2354px;
    height: 1300px;
    opacity: 0;
}
@keyframes spreadSmog {
  0% {
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    opacity: 0;
}
45% {
    transform: scale(0.75);
    -webkit-transform: scale(0.75);
    opacity: 1;
}
90% {
    transform: scale(1);
    -webkit-transform: scale(1);
    opacity: 0;
}
100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    opacity: 0;
}
}

/*end smog*/

/*fast link*/

.fast-links {
   -webkit-transition: 0.3s;
   transition: 0.3s;
  line-height: 1.2;
}

.fast-links li {
  padding-top: 12px;
  padding-bottom: 12px;
  margin: 0px 25px;
  transition: 0.3s;
}

.fast-links li:hover {
  	margin: 0px; 
	background: #320d0d;
	color: #ff3939; 
	transition: 0.3s;
	padding: 12px 30px 12px 20px;
	cursor: pointer;
	margin: 0;
	transition: 0.3s;
	font-weight: bold;
}

.fast-links li:hover a {
  color: #ff3939;
  background: url(../images/marker_hover.png) left no-repeat;
  padding-left: 15px;
}
.fast-links li a {
  margin-bottom: 4px;
  color: #fff;
  font-size: 14px;
  background: url(../images/marker.png) left no-repeat;
  padding-left: 15px;
}

/* end fast link*/

.pagination{
	position: relative;
	z-index: 10; 
}
.pagination .number {
 display: -webkit-box; 
 display: -ms-flexbox; 
 display: flex; 
 -webkit-box-align: center; 
 -ms-flex-align: center; 
 align-items: center; 
 -webkit-box-pack: center; 
 -ms-flex-pack: center; 
 justify-content: center; 
 height: 35px; 
 width: 35px; 
 font-size: 14px;
 font-weight: bold; 
 color: #683660; 
 border: 1px solid rgba(255, 255, 255, 0); 
 margin: 2px; 
 text-decoration: none;
}

.pagination .number:hover { color: #fff; background-color: rgba(0, 0, 0); }
.pagination .number.active { 
	color: #fff; 
	background-color: rgb(0 0 0);
}
.pagination .pag-arrow { width: 35px; height: 35px; display: -webkit-box; display: -ms-flexbox; display: flex; opacity: 0.7; }
.pagination .pag-arrow:hover { opacity: 1;}
.pagination .pag-arrow.prev { background: url(../images/nav-back.png) no-repeat; margin-right: 20px; }
.pagination .pag-arrow.next { background: url(../images/nav-next.png) no-repeat; margin-left: 20px; }

.footer {min-height: 350px; }

.toTop {
 background: url(../images/top-button.png) no-repeat; 
 width: 1200px; 
 height: 104px; 
 margin: 0 auto; 
 cursor: pointer; 
 -webkit-transition: 0.3s; 
 transition: 0.3s; 
 margin-bottom: 40px;
 margin-top: 50px; 
 opacity: 0.6;
}
.toTop:hover { opacity: 1;}

/*footer*/

footer { padding: 40px 0px; }


.footer-block-t{
  padding-top: 33px;
  justify-content: center;
  align-items: center;
  text-align:center;
}

.footer-block-coperite{
  float: left;
  color: #752f2f;
  padding-top: 45px;
}

.footer-block-coperite a{
  color: #fff;
}

.footer-block-coperite a:hover{
  text-decoration: underline;
}

.footer-block-r {
  float: right;
}

.footer-logo{
  text-align:center;
  margin-top: 20px;
  transition: all 0.3s ease;
}

.footer-logo:hover{
  -webkit-filter: brightness(120%); 
  filter: brightness(120%);
  transition: all 0.3s ease;
}

.copyright{
  color: #ff3939;
}

.templstock{
  margin-top: 30px;
}

.templstock:hover{
  -webkit-filter: brightness(120%); 
  filter: brightness(120%);
}
/*end footer*/

.f-menu { margin-bottom: 20px; }
.f-menu li { padding: 10px 25px; }
.f-menu li.active a { color: #ff3939; }
.f-menu li a {
 text-transform: uppercase; 
 color: #fff; 
 font-size: 16px; 
}
.f-menu li a:hover { color: #ff3939; }

.modal_div {
  max-width: 480px; 
  width: 100%;
  min-height: 300px;
  background: url(../images/fon-modal-top.jpg) center top no-repeat, url(../images/fon-modal-bottom.jpg) center bottom no-repeat, rgba(3, 3, 3, 1);
  position: fixed; 
  top: 5%; 
  left: 50%; 
  margin-left: -240px; 
  margin-top: -50px; 
  display: none; 
  opacity: 0; 
  z-index: 999; 
  padding: 40px 0px 40px 0px; 
  -webkit-box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.2); 
  box-shadow: 0px 10px 40px 0px rgba(0, 0, 0, 0.2); 
 }

.modal_div:before {
  content: "";
  position: absolute;
  height: 72px;
  width: 503px;
  top: -20px;
  left: -10px;
  background: url(../images/fon-modal-top-top.png) center top no-repeat;
}

.modal_div h1 { 
  font-size: 20px; 
  margin-bottom: 30px; 
  font-weight: normal; 
  letter-spacing: 2px; 
  padding-bottom: 30px; 
  color: #ff4800; 
  text-align: center; 
  font-weight: bold;
}

.modal_div .modal_close {
 position: absolute; top: 25px; 
 right: 25px; 
 cursor: pointer; 
 display: block; 
}

.modal_div .modal_close span { display: block; position: relative; background: #ff4800; width: 15px; height: 2px; }
.modal_div .modal_close span:first-child { -webkit-transform: rotate(45deg); transform: rotate(45deg); bottom: -2px; }
.modal_div .modal_close span:last-child { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

.modal-v { width: 300px; height: 100%; overflow-y: auto; margin: 0 auto; }

#overlay {
 z-index: 998; 
 position: fixed; 
  background-color: hsla(40, 75%, 2%, 0.9); 
 opacity: 0.9; 
 width: 100%; 
 height: 100%; 
 top: 0; 
 left: 0; 
 cursor: pointer; 
 display: none; 
}

.formGroup { margin-bottom: 20px; }
.formGroup p { text-align: center; color: #ff4800; margin-bottom: 10px; }
.formGroup input { width: 100%; }

.formGroup-button { 
  padding-top: 20px;
  text-align: center;
}

.button-bottom{
 margin-bottom: 20px;
}

.sparks { position: absolute; width: 1200px; left: 50%; bottom: 10px; z-index: 1; }
.sparks > div { position: absolute; }
.sparks .spark_1 { background: url(../images/spark_1.png) no-repeat; width: 764px; height: 313px; right: 0; bottom: -320px; -webkit-transform: scale(0.6); transform: scale(0.6); -webkit-animation: spark-1 4s linear infinite; animation: spark-1 4s linear infinite; -webkit-animation-delay: 1s; animation-delay: 1s; }
.sparks .spark_2 { background: url(../images/spark_2.png) no-repeat; width: 179px; height: 335px; right: 230px; bottom: -320px; -webkit-transform: scale(0.6); transform: scale(0.6); -webkit-animation: spark-1 4s linear infinite; animation: spark-1 4s linear infinite; -webkit-animation-delay: 2s; animation-delay: 2s; }
.sparks .spark_3 { background: url(../images/spark_3.png) no-repeat; width: 128px; height: 165px; right: 280px; bottom: -140px; -webkit-transform: scale(0.6); transform: scale(0.6); -webkit-animation: spark-3 4s linear infinite; animation: spark-3 4s linear infinite; -webkit-animation-delay: 2s; animation-delay: 2s; }
.sparks .spark-big { background: url(../images/spark_4.png) no-repeat; width: 794px; height: 176px; right: 0; bottom: -180px; -webkit-transform: scale(0.6); transform: scale(0.6); -webkit-animation: spark-5 4s linear infinite; animation: spark-5 4s linear infinite; }
.sparks .spark_5 { -webkit-animation-delay: 2s; animation-delay: 2s; right: 40px; }

.sparks_1 { margin-left: -1200px; }
.sparks_1 .spark_1 { background: url(../images/spark_1.png) no-repeat; -webkit-animation-delay: 2s; animation-delay: 2s; }
.sparks_1 .spark_2 { background: url(../images/spark_2.png) no-repeat; -webkit-animation-delay: 3s; animation-delay: 3s; }
.sparks_1 .spark_3 { background: url(../images/spark_3.png) no-repeat; -webkit-animation-delay: 3s; animation-delay: 3s; }
.sparks_1 .spark-big { background: url(../images/spark_4.png) no-repeat; }
.sparks_1 .spark_5 { -webkit-animation-delay: 3s; animation-delay: 3s; }

.sparks_2 { margin-left: -400px; }

@-webkit-keyframes spark-1 { 0% { bottom: -320px; -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 0; }
  25% { bottom: -240px; -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 1; }
  50% { bottom: -160px; -webkit-transform: scale(0.8); transform: scale(0.8); opacity: 1; }
  75% { bottom: -80px; -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.5; }
  100% { bottom: 0px; -webkit-transform: scale(1); transform: scale(1); opacity: 0; } }

@keyframes spark-1 { 0% { bottom: -320px; -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 0; }
  25% { bottom: -240px; -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 1; }
  50% { bottom: -160px; -webkit-transform: scale(0.8); transform: scale(0.8); opacity: 1; }
  75% { bottom: -80px; -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.5; }
  100% { bottom: 0px; -webkit-transform: scale(1); transform: scale(1); opacity: 0; } }
@-webkit-keyframes spark-3 { 0% { bottom: -140px; -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 0; }
  25% { bottom: -80px; -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 1; }
  50% { bottom: -20px; -webkit-transform: scale(0.8); transform: scale(0.8); opacity: 1; }
  75% { bottom: 40px; -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.5; }
  100% { bottom: 100px; -webkit-transform: scale(1); transform: scale(1); opacity: 0; } }
@keyframes spark-3 { 0% { bottom: -140px; -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 0; }
  25% { bottom: -80px; -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 1; }
  50% { bottom: -20px; -webkit-transform: scale(0.8); transform: scale(0.8); opacity: 1; }
  75% { bottom: 40px; -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.5; }
  100% { bottom: 100px; -webkit-transform: scale(1); transform: scale(1); opacity: 0; } }
@-webkit-keyframes spark-5 { 0% { bottom: -180px; -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 0; }
  25% { bottom: -120px; -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 1; }
  50% { bottom: -60px; -webkit-transform: scale(0.8); transform: scale(0.8); opacity: 1; }
  75% { bottom: 0px; -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.5; }
  100% { bottom: 60px; -webkit-transform: scale(1); transform: scale(1); opacity: 0; } }
@keyframes spark-5 { 0% { bottom: -180px; -webkit-transform: scale(0.6); transform: scale(0.6); opacity: 0; }
  25% { bottom: -120px; -webkit-transform: scale(0.7); transform: scale(0.7); opacity: 1; }
  50% { bottom: -60px; -webkit-transform: scale(0.8); transform: scale(0.8); opacity: 1; }
  75% { bottom: 0px; -webkit-transform: scale(0.9); transform: scale(0.9); opacity: 0.5; }
  100% { bottom: 60px; -webkit-transform: scale(1); transform: scale(1); opacity: 0; } }
.btn { display: none; -webkit-transition: 0.3s; transition: 0.3s; left: 20px; }
.btn span { width: 30px; height: 4px; display: block; margin: 6px 0px; background: #fff; -webkit-transition: 0.3s; transition: 0.3s; position: relative; }

/*# sourceMappingURL=style.css.map */


.f16 .flag{display:inline-block;height:16px;width:16px;vertical-align:text-top;line-height:16px;background:url(../images/flags.png) no-repeat;}
.f16 ._African_Union{background-position:0 -16px;}
.f16 ._Arab_League{background-position:0 -32px;}
.f16 ._ASEAN{background-position:0 -48px;}
.f16 ._CARICOM{background-position:0 -64px;}
.f16 ._CIS{background-position:0 -80px;}
.f16 ._Commonwealth{background-position:0 -96px;}
.f16 ._England{background-position:0 -112px;}
.f16 ._European_Union, .f16 .eu{background-position:0 -128px;}
.f16 ._Islamic_Conference{background-position:0 -144px;}
.f16 ._Kosovo{background-position:0 -160px;}
.f16 ._NATO{background-position:0 -176px;}
.f16 ._Northern_Cyprus{background-position:0 -192px;}
.f16 ._Northern_Ireland{background-position:0 -208px;}
.f16 ._Olimpic_Movement{background-position:0 -224px;}
.f16 ._OPEC{background-position:0 -240px;}
.f16 ._Red_Cross{background-position:0 -256px;}
.f16 ._Scotland{background-position:0 -272px;}
.f16 ._Somaliland{background-position:0 -288px;}
.f16 ._Tibet{background-position:0 -304px;}
.f16 ._United_Nations{background-position:0 -320px;}
.f16 ._Wales{background-position:0 -336px;}
.f16 .ad{background-position:0 -352px;}
.f16 .ae{background-position:0 -368px;}
.f16 .af{background-position:0 -384px;}
.f16 .ag{background-position:0 -400px;}
.f16 .ai{background-position:0 -416px;}
.f16 .al{background-position:0 -432px;}
.f16 .am{background-position:0 -448px;}
.f16 .ao{background-position:0 -464px;}
.f16 .aq{background-position:0 -480px;}
.f16 .ar{background-position:0 -496px;}
.f16 .as{background-position:0 -512px;}
.f16 .at{background-position:0 -528px;}
.f16 .au{background-position:0 -544px;}
.f16 .aw{background-position:0 -560px;}
.f16 .ax{background-position:0 -576px;}
.f16 .az{background-position:0 -592px;}
.f16 .ba{background-position:0 -608px;}
.f16 .bb{background-position:0 -624px;}
.f16 .bd{background-position:0 -640px;}
.f16 .be{background-position:0 -656px;}
.f16 .bf{background-position:0 -672px;}
.f16 .bg{background-position:0 -688px;}
.f16 .bh{background-position:0 -704px;}
.f16 .bi{background-position:0 -720px;}
.f16 .bj{background-position:0 -736px;}
.f16 .bm{background-position:0 -752px;}
.f16 .bn{background-position:0 -768px;}
.f16 .bo{background-position:0 -784px;}
.f16 .br{background-position:0 -800px;}
.f16 .bs{background-position:0 -816px;}
.f16 .bt{background-position:0 -832px;}
.f16 .bw{background-position:0 -848px;}
.f16 .by{background-position:0 -864px;}
.f16 .bz{background-position:0 -880px;}
.f16 .ca{background-position:0 -896px;}
.f16 .cg{background-position:0 -912px;}
.f16 .cf{background-position:0 -928px;}
.f16 .cd{background-position:0 -944px;}
.f16 .ch{background-position:0 -960px;}
.f16 .ci{background-position:0 -976px;}
.f16 .ck{background-position:0 -992px;}
.f16 .cl{background-position:0 -1008px;}
.f16 .cm{background-position:0 -1024px;}
.f16 .cn{background-position:0 -1040px;}
.f16 .co{background-position:0 -1056px;}
.f16 .cr{background-position:0 -1072px;}
.f16 .cu{background-position:0 -1088px;}
.f16 .cv{background-position:0 -1104px;}
.f16 .cy{background-position:0 -1120px;}
.f16 .cz{background-position:0 -1136px;}
.f16 .de{background-position:0 -1152px;}
.f16 .dj{background-position:0 -1168px;}
.f16 .dk{background-position:0 -1184px;}
.f16 .dm{background-position:0 -1200px;}
.f16 .do{background-position:0 -1216px;}
.f16 .dz{background-position:0 -1232px;}
.f16 .ec{background-position:0 -1248px;}
.f16 .ee{background-position:0 -1264px;}
.f16 .eg{background-position:0 -1280px;}
.f16 .eh{background-position:0 -1296px;}
.f16 .er{background-position:0 -1312px;}
.f16 .es{background-position:0 -1328px;}
.f16 .et{background-position:0 -1344px;}
.f16 .fi{background-position:0 -1360px;}
.f16 .fj{background-position:0 -1376px;}
.f16 .fm{background-position:0 -1392px;}
.f16 .fo{background-position:0 -1408px;}
.f16 .fr{background-position:0 -1424px;}  
.f16 .bl, .f16 .cp, .f16 .mf, .f16 .yt{background-position:0 -1424px;}
.f16 .ga{background-position:0 -1440px;}
.f16 .gb{background-position:0 -1456px;}  
.f16 .sh{background-position:0 -1456px;}
.f16 .gd{background-position:0 -1472px;}
.f16 .ge{background-position:0 -1488px;}
.f16 .gg{background-position:0 -1504px;}
.f16 .gh{background-position:0 -1520px;}
.f16 .gi{background-position:0 -1536px;}
.f16 .gl{background-position:0 -1552px;}
.f16 .gm{background-position:0 -1568px;}
.f16 .gn{background-position:0 -1584px;}
.f16 .gp{background-position:0 -1600px;}
.f16 .gq{background-position:0 -1616px;}
.f16 .gr{background-position:0 -1632px;}
.f16 .gt{background-position:0 -1648px;}
.f16 .gu{background-position:0 -1664px;}
.f16 .gw{background-position:0 -1680px;}
.f16 .gy{background-position:0 -1696px;}
.f16 .hk{background-position:0 -1712px;}
.f16 .hn{background-position:0 -1728px;}
.f16 .hr{background-position:0 -1744px;}
.f16 .ht{background-position:0 -1760px;}
.f16 .hu{background-position:0 -1776px;}
.f16 .id{background-position:0 -1792px;}
.f16 .mc{background-position:0 -1792px;}
.f16 .ie{background-position:0 -1808px;}
.f16 .il{background-position:0 -1824px;}
.f16 .im{background-position:0 -1840px;}
.f16 .in{background-position:0 -1856px;}
.f16 .iq{background-position:0 -1872px;}
.f16 .ir{background-position:0 -1888px;}
.f16 .is{background-position:0 -1904px;}
.f16 .it{background-position:0 -1920px;}
.f16 .je{background-position:0 -1936px;}
.f16 .jm{background-position:0 -1952px;}
.f16 .jo{background-position:0 -1968px;}
.f16 .jp{background-position:0 -1984px;}
.f16 .ke{background-position:0 -2000px;}
.f16 .kg{background-position:0 -2016px;}
.f16 .kh{background-position:0 -2032px;}
.f16 .ki{background-position:0 -2048px;}
.f16 .km{background-position:0 -2064px;}
.f16 .kn{background-position:0 -2080px;}
.f16 .kp{background-position:0 -2096px;}
.f16 .kr{background-position:0 -2112px;}
.f16 .kw{background-position:0 -2128px;}
.f16 .ky{background-position:0 -2144px;}
.f16 .kz{background-position:0 -2160px;}
.f16 .la{background-position:0 -2176px;}
.f16 .lb{background-position:0 -2192px;}
.f16 .lc{background-position:0 -2208px;}
.f16 .li{background-position:0 -2224px;}
.f16 .lk{background-position:0 -2240px;}
.f16 .lr{background-position:0 -2256px;}
.f16 .ls{background-position:0 -2272px;}
.f16 .lt{background-position:0 -2288px;}
.f16 .lu{background-position:0 -2304px;}
.f16 .lv{background-position:0 -2320px;}
.f16 .ly{background-position:0 -2336px;}
.f16 .ma{background-position:0 -2352px;}
.f16 .md{background-position:0 -2368px;}
.f16 .me{background-position:0 -2384px;}
.f16 .mg{background-position:0 -2400px;}
.f16 .mh{background-position:0 -2416px;}
.f16 .mk{background-position:0 -2432px;}
.f16 .ml{background-position:0 -2448px;}
.f16 .mm{background-position:0 -2464px;}
.f16 .mn{background-position:0 -2480px;}
.f16 .mo{background-position:0 -2496px;}
.f16 .mq{background-position:0 -2512px;}
.f16 .mr{background-position:0 -2528px;}
.f16 .ms{background-position:0 -2544px;}
.f16 .mt{background-position:0 -2560px;}
.f16 .mu{background-position:0 -2576px;}
.f16 .mv{background-position:0 -2592px;}
.f16 .mw{background-position:0 -2608px;}
.f16 .mx{background-position:0 -2624px;}
.f16 .my{background-position:0 -2640px;}
.f16 .mz{background-position:0 -2656px;}
.f16 .na{background-position:0 -2672px;}
.f16 .nc{background-position:0 -2688px;}
.f16 .ne{background-position:0 -2704px;}
.f16 .ng{background-position:0 -2720px;}
.f16 .ni{background-position:0 -2736px;}
.f16 .nl{background-position:0 -2752px;}  
.f16 .bq{background-position:0 -2752px;}
.f16 .no{background-position:0 -2768px;}  
.f16 .bv, .f16 .nq, .f16 .sj{background-position:0 -2768px;}
.f16 .np{background-position:0 -2784px;}
.f16 .nr{background-position:0 -2800px;}
.f16 .nz{background-position:0 -2816px;}
.f16 .om{background-position:0 -2832px;}
.f16 .pa{background-position:0 -2848px;}
.f16 .pe{background-position:0 -2864px;}
.f16 .pf{background-position:0 -2880px;}
.f16 .pg{background-position:0 -2896px;}
.f16 .ph{background-position:0 -2912px;}
.f16 .pk{background-position:0 -2928px;}
.f16 .pl{background-position:0 -2944px;}
.f16 .pr{background-position:0 -2960px;}
.f16 .ps{background-position:0 -2976px;}
.f16 .pt{background-position:0 -2992px;}
.f16 .pw{background-position:0 -3008px;}
.f16 .py{background-position:0 -3024px;}
.f16 .qa{background-position:0 -3040px;}
.f16 .re{background-position:0 -3056px;}
.f16 .ro{background-position:0 -3072px;}
.f16 .rs{background-position:0 -3088px;}
.f16 .ru{background-position:0 -3104px;}
.f16 .rw{background-position:0 -3120px;}
.f16 .sa{background-position:0 -3136px;}
.f16 .sb{background-position:0 -3152px;}
.f16 .sc{background-position:0 -3168px;}
.f16 .sd{background-position:0 -3184px;}
.f16 .se{background-position:0 -3200px;}
.f16 .sg{background-position:0 -3216px;}
.f16 .si{background-position:0 -3232px;}
.f16 .sk{background-position:0 -3248px;}
.f16 .sl{background-position:0 -3264px;}
.f16 .sm{background-position:0 -3280px;}
.f16 .sn{background-position:0 -3296px;}
.f16 .so{background-position:0 -3312px;}
.f16 .sr{background-position:0 -3328px;}
.f16 .st{background-position:0 -3344px;}
.f16 .sv{background-position:0 -3360px;}
.f16 .sy{background-position:0 -3376px;}
.f16 .sz{background-position:0 -3392px;}
.f16 .tc{background-position:0 -3408px;}
.f16 .td{background-position:0 -3424px;}
.f16 .tg{background-position:0 -3440px;}
.f16 .th{background-position:0 -3456px;}
.f16 .tj{background-position:0 -3472px;}
.f16 .tl{background-position:0 -3488px;}
.f16 .tm{background-position:0 -3504px;}
.f16 .tn{background-position:0 -3520px;}
.f16 .to{background-position:0 -3536px;}
.f16 .tr{background-position:0 -3552px;}
.f16 .tt{background-position:0 -3568px;}
.f16 .tv{background-position:0 -3584px;}
.f16 .tw{background-position:0 -3600px;}
.f16 .tz{background-position:0 -3616px;}
.f16 .ua{background-position:0 -3632px;}
.f16 .ug{background-position:0 -3648px;}
.f16 .us{background-position:0 -3664px;}
.f16 .uy{background-position:0 -3680px;}
.f16 .uz{background-position:0 -3696px;}
.f16 .va{background-position:0 -3712px;}
.f16 .vc{background-position:0 -3728px;}
.f16 .ve{background-position:0 -3744px;}
.f16 .vg{background-position:0 -3760px;}
.f16 .vi{background-position:0 -3776px;}
.f16 .vn{background-position:0 -3792px;}
.f16 .vu{background-position:0 -3808px;}
.f16 .ws{background-position:0 -3824px;}
.f16 .ye{background-position:0 -3840px;}
.f16 .za{background-position:0 -3856px;}
.f16 .zm{background-position:0 -3872px;}
.f16 .zw{background-position:0 -3888px;}
.f16 .sx{background-position:0 -3904px;}
.f16 .cw{background-position:0 -3920px;}
.f16 .ss{background-position:0 -3936px;}
.f16 .nu{background-position:0 -3952px;}

#pagination{
	position: relative;
	z-index: 10; 
}

#pagination ul li{
display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	list-style-type:none;
}

#pagination a {
 display: -webkit-box; 
 display: -ms-flexbox; 
 display: flex; 
 -webkit-box-align: center; 
 -ms-flex-align: center; 
 align-items: center; 
 -webkit-box-pack: center; 
 -ms-flex-pack: center; 
 justify-content: center; 
 height: 35px; 
 width: 35px; 
 font-size: 14px;
 font-weight: bold; 
 color: #683660; 
 border: 1px solid rgba(255, 255, 255, 0); 
 margin: 2px; 
 text-decoration: none;
}

#pagination a.on {
color: #fff; 
background-color: rgb(0 0 0);
}

#pagination a:hover {
color: #fff; background-color: rgba(0, 0, 0);
}
#pagination #prev{
	text-indent: -9999px;
  line-height: 0; 
}
#pagination #prev:after{
content: url(../images/nav-back.png);
text-indent: 0;
display: block;
line-height: initial; 
width: 35px; 
height: 35px; 
}
#pagination #next{
	text-indent: -9999px;
  line-height: 0; 
}
#pagination #next:after{
content: url(../images/nav-next.png);
text-indent: 0;
display: block;
line-height: initial;
width: 35px; 
height: 35px; 
}

#loading {
background-image:url(../images/l_bg.png);
border-radius:0 0 4px 4px;
color:#fff;
display:none;
position:fixed;
top:0;
left:48%;
z-index:1000;
padding:6px
}

#tooltip {
position:absolute;
z-index:3000;
border:1px solid #111;
background-color:#221f28;
padding:5px;
opacity:.9;
font:normal 10px Tahoma,Helvetica,sans-serif;
text-align:center;
color:#fff
}

#tooltip h3,#tooltip div {
margin:0
}

#lean_overlay {
position:fixed;
top:0;
left:0;
}

#buy_windows,#add_to_card_windows,#select_server,#auction_bet {
width:404px;
padding-bottom:2px;
display:none;
background:#FFF;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
box-shadow:0 0 4px rgba(0,0,0,0.7);
-webkit-box-shadow:0 0 4px rgba(0,0,0,0.7);
-moz-box-shadow:0 0 4px rgba(0,0,0,0.7);
z-index:9999
}

#item_filter_overlay {
position:absolute;
height:400px;
width:300px;
z-index:9999
}

#item_filter {
width:300px;
height:700px;
padding-bottom:2px;
background:#473838;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
box-shadow:0 0 4px rgba(0,0,0,0.7);
-webkit-box-shadow:0 0 4px rgba(0,0,0,0.7);
-moz-box-shadow:0 0 4px rgba(0,0,0,0.7)
}

.item_filter_content {
height:600px;
width:285px;
margin:15px;
overflow:auto
}

.modal-header {
background:url(../images/hd-bg.png);
padding:18px 18px 14px;
border-bottom:1px solid #CCC;
border-top-left-radius:5px;
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
border-top-right-radius:5px;
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px
}

.modal-header h2 {
color:#444;
font-size:2em;
font-weight:700;
margin-bottom:3px;
text-shadow:1px 1px 0 rgba(255,255,255,0.5)
}

.modal-header2 {
background:url(../images/hd-bg.png);
padding:18px 18px 14px;
border-bottom:1px solid #CCC;
border-top-left-radius:5px;
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
border-top-right-radius:5px;
-moz-border-radius-topright:5px;
-webkit-border-top-right-radius:5px;
cursor:move
}

.modal-header2 h2 {
color:#444;
font-size:2em;
font-weight:700;
margin-bottom:3px;
text-shadow:1px 1px 0 rgba(255,255,255,0.5)
}

.close {
position:absolute;
top:12px;
right:12px;
display:block;
width:14px;
height:14px;
background:url(../images/close.png);
z-index:2
}

.title1 h1 {
	display: block; 
	font-weight: bold; 
	text-align: center; 
	background: url(../images/border.png) center bottom no-repeat; 
	padding-bottom: 30px; 
	margin-bottom: 45px; 
	color: #000; 
	font-size: 18px;
}

.box-style1 .title{
	display: none;
}
.entry{
	color: #0e0101;
}
#registration_form table td, form table td{
	border: 0px !important;
	padding: 5px 5px !important;
	color: #0e0101;
}


.wh_items{
	width: 261px;
	margin:2px auto;
	padding-top:6px;
	padding-left:3px;
	height:485px;
}

.square{
	cursor:pointer; 
	position:absolute;
	opacity: 0.8;
}

.square:hover{
	padding: 1px;
	opacity: 1;
}

.square img{
	width:100%;
	height:100%;
}
.tabrow {
text-align:center;
list-style:none;
margin:0 0 10px;
padding:0;
line-height:24px;
height:26px;
overflow:hidden;
font-size:12px;
font-family:verdana;
position:relative
}

.tabrow li { min-width: 65px;
    background: #b97e5f !important;
border: none !important; }

.tabrow a {
color:#fff;
text-decoration:none
}

.tabrow li.selected {
color:#fff;
z-index:2;
-moz-box-shadow:inset 0 1px 0 0 #f0a899;
-webkit-box-shadow:inset 0 1px 0 0 #f0a899;
box-shadow:inset 0 1px 0 0 #f0a899;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0.05,#915044),color-stop(1,#552a22));
background:-moz-linear-gradient(center top,#915044 5%,#552a22 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#915044',endColorstr='#552a22');
background-color:#915044;
-webkit-border-top-left-radius:3px;
-moz-border-radius-topleft:3px;
border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-moz-border-radius-topright:3px;
border-top-right-radius:3px;
-webkit-border-bottom-right-radius:3px;
-moz-border-radius-bottomright:3px;
border-bottom-right-radius:3px;
-webkit-border-bottom-left-radius:3px;
-moz-border-radius-bottomleft:3px;
border-bottom-left-radius:3px;
font-family:Arial;
font-size:11px;
color:#fff;
text-shadow:1px 1px 0 #000;
border:1px solid #613333
}

.tabrow:before {
position:absolute;
content:" ";
width:80%;
bottom:0;
left:0;
right:0;
margin:0 auto;
border-bottom:1px solid #363636;
z-index:1
}

.tabrow li:before,.tabrow li:after {
border:1px solid #613333;
position:absolute;
bottom:-1px;
width:5px;
height:5px;
content:" "
}

.tabrow li:before {
left:-6px;
border-bottom-right-radius:6px;
border-width:0 1px 1px 0;
box-shadow:2px 2px 0 #232323
}

.tabrow li:after {
right:-6px;
border-bottom-left-radius:6px;
border-width:0 0 1px 1px;
box-shadow:-2px 2px 0 #232323
}

.tabrow li.selected:before {
box-shadow:2px 2px 0 #5c2f26
}

.tabrow li.selected:after {
box-shadow:-2px 2px 0 #5c2f26
}

.rankings {
display:none
}

.custom_button {
    height: 35px;
    width: inherit;
	background-color:#941e16;
	border-radius:4px;
	
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:15px;
	padding:6px 15px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ba3730;
}

.main-tr {
font-weight:700;
background-color:#941e16;
}
.ranking-table {
text-align:center;
width:100%;
border-collapse:collapse;
line-height:26px;
}

.ranking-table th {
border-bottom:1px solid rgba(255,255,255,0.04)
}

.ranking-table th.end {
border-right:0
}

.ranking-table td {
background:rgba(39,35,35,0.5);
border-bottom:1px solid rgba(255,255,255,0.02);
vertical-align: middle !important;
}

.ranking-table td.end {
border-right:0
}

.ranking-table tbody tr:hover {
background:rgba(39, 37, 37, 0.29);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)"
}

.form-login{
	margin: 10px;
}
.form-login input{
	
  border: none;
  
  padding: 10px 0px;
  position: relative;
  text-align: center;
  font-size: 14px;
  min-width: 50px;
}
.form-login input {
  background: none;
  border-bottom: 1px solid #480000;
  position: relative;
  background-position: left center;
  background-repeat: no-repeat;
	
	 
}
.form-login .nick {
  background-image: url(../images/user-icon.png);
}
.form-login .pass {
  background-image: url(../images/pass-icon.png);
}
.form-login .f-mail {
  background-image: url(../images/mail-icon.png);
}

.form-login .forgot {
  color: #ffffff;
  font-size: 13px;
}
.form-login .registration {
  color: #ffafc0;
  font-size: 13px;
  font-weight: 700;
  margin-left: 4px;
}
.form-login .registration:hover {
  text-decoration: underline;
}


.lk-title {
  padding: 0px 30px 30px 30px;
}
.lk-title button {
  float: right;
  margin-left: 17px;
  margin-top: 3px;
}
.lk-title .coins {
  float: right;
  color: #ff9b39;
  font-weight: bold;
  font-size: 14px;
  margin-top: 3px;
  display: inline-block;
  margin-bottom: 10px;
}
.lk-title .username {
  font-size: 15px;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
}
.lk-coins {
  padding: 5px 30px 15px 30px;
}
.lk-coins a {
  float: right;
  margin-left: 17px;
  margin-top: 3px;
}
.lk-coins img {
  float: right;
  margin-left: 17px;
  margin-top: 3px;
}
.lk-coins .coins {
  float: right;
  color: #ff9b39;
  font-weight: bold;
  font-size: 14px;
  margin-top: 3px;
  display: inline-block;
  margin-bottom: 10px;
}
.lk-coins .username {
  font-size: 15px;
  font-weight: bold;
  color: #fff;
}
.lk-form li {
  position: relative;
	list-style-type: none;
}
.lk-form li a {
  display: block;
  padding: 10px 25px 10px 60px;
  text-decoration: none;
  font-size: 14px;
  border-top: 1px solid rgba(170, 115, 132, 0.2);
	text-decoration: none;
	color: #fec16a;
}
.lk-form li a:hover {
  color: #fec16a;
}
.lk-form li b {
  font-weight: normal;
  color: #00cd52;
}
.lk-form li span {
  float: right;
}
.lk-form li:hover {
  background: rgba(170, 115, 132, 0.2);
  box-shadow: 0px 11px 31px -9px rgba(0, 0, 0, 0.1);
}

#ucp_info {
width:100%;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
background:rgba(0,0,0,0.6);
border:1px solid rgba(173,160,160,0.15);
-webkit-box-shadow:0 8px 6px -6px rgba(0,0,0,0.38);
-moz-box-shadow:0 8px 6px -6px rgba(0,0,0,0.38);
box-shadow:0 8px 6px -6px rgba(0,0,0,0.38);
border-bottom:1px solid rgba(255,255,255,0.07)
}

#ucp_info .half {
float:left;
width:47%;
padding:5px;
position:relative
}

#ucp_info .full {
width:100%
}

#ucp_info .half table {
margin-left:auto;
margin-right:auto
}

#ucp_info td {
padding:2px
}

#ucp_info .half:first-child {
border-right:1px solid #dfdddd
}

#character-info {
width:100%;
height:auto;
margin:0 auto;
padding:0
}

#character-info ul {
list-style-type:none;
display:inline;
margin:0;
padding:0
}

#character-info ul li {
float:left;
padding:0;
margin:0
}

#character-info tbody tr {
background:none;
border:none
}

#character-info tbody tr td {
width:50%;
margin:0 auto;
padding:5px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
background:rgba(0,0,0,0.6);
border:1px solid rgba(134,122,122,0.15);
-webkit-box-shadow:0 8px 6px -6px rgba(0,0,0,0.38);
-moz-box-shadow:0 8px 6px -6px rgba(0,0,0,0.38);
box-shadow:0 8px 6px -6px rgba(0,0,0,0.38)
}

#character-info tbody tr td a {
font-size:14px;
font-weight:700;
font-family:Georgia,?Sans-serif;
color:#b8ab7e
}

#character-info div {
padding-left:10px
}

#small_menu ul {
margin:0;
padding:0
}

#small_menu li {
list-style:none
}

ul#vote-options {
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
margin:0;
padding:0
}

ul#vote-options {
list-style:none
}

ul#vote-options h5 {
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
margin:0;
padding:0
}

#vote-options {
color:#555;
font-size:auto;
line-height:auto;
list-style-type:none;
margin:0
}

#vote-options li {
border-radius:5px;
line-height:45px;
height:45px;
border:1px solid rgba(0,0,0,0.15);
margin-top:10px;
padding:10px;
background:rgba(0,0,0,0.6)
}

#vote-options li img {
width:75px;
height:45px
}

#vote-options li button {
border:1px solid #999;
line-height:28px;
margin:6px 0;
padding:0 5px
}

#vote-options li h5 {
color:#FFF;
font-weight:bolder;
font-size:24px;
border-left:1px solid #453129;
padding-left:10px;
margin-left:10px
}
ul#paypal-options{
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
	margin:0;
	padding:0;
}
ul#paypal-options { list-style:none; }
ul#paypal-options h4{
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
	margin:0;
	padding:0;
}
ul#paypal-options h3{
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
	margin:0;
	padding:0;
}

#paypal-options {
	color:#555;
	font-size:auto;
	line-height:auto;
	list-style-type:none;
	margin:0;
}

#paypal-options li {
	border-radius:5px;
	height: 55px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	margin-top:10px;
	padding:10px;
	background: rgba(255, 255, 255, 0.6);
}

#paypal-options li h4 {
	color:#444;
	font-weight:bolder;
	font-size:22px;
	padding-left:10px;
	margin-left:10px;
}
#paypal-options li h3 {
	color:#444;
	font-size:18px;
	padding-left:10px;
	margin-left:10px;
}
#helm {
position:absolute;
left:73px;
top:58px;
width:56px;
height:66px
}

#wings {
position:absolute;
left:272px;
top:59px;
width:127px;
height:110px
}

#pendant {
position:absolute;
left:233px;
top:80px;
width:29px;
height:29px
}

#sword {
position:absolute;
left:6px;
top:242px;
width:69px;
height:129px
}

#armor {
position:absolute;
left:40px;
top:138px;
width:82px;
height:98px
}

#shield {
position:absolute;
left:330px;
top:242px;
width:69px;
height:129px
}

#gloves {
position:absolute;
left:271px;
top:178px;
width:85px;
height:55px
}

#pants {
position:absolute;
left:89px;
top:297px;
width:58px;
height:74px
}

#ring_left {
position:absolute;
left:102px;
top:252px;
width:29px;
height:29px
}

#ring_right {
position:absolute;
left:272px;
top:252px;
width:29px;
height:29px
}

#boots {
position:absolute;
left:258px;
top:297px;
width:58px;
height:74px
}

.inv {
table-layout:fixed;
background-color:#2121221;
border:1px solid #100f0d;
margin:0;
padding:0
}

.waretitle {
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:1px;
background:#610000;
font-style:oblique;
font-weight:700;
color:#fff
}

.item_table {
width:200px;
border:0;
margin:auto
}

.item_table td {
padding:3px;
border: 0;
}

.each_item {
width:10px;
border:0;
border-collapse:collapse
}

.each_item td {
padding:0;
border: 0;
}

.each_item .item_name {
background:url(../images/ws_item_name.png);
background-size:136px 34px;
height:34px
}

.each_item .item_bg {
background-image:url(../images/ws_item_bg.png);
background-size:136px 140px;
height:140px
}
.each_item .item_footer{
	background: url(../images/ws_item_footer.png);
	background-size:136px 6px;
	height: 6px;
}
.item_image {
text-align:center;
height:140px;
width:136px
}

.items {
text-align:center
}

.items a {
color:#FFF;
font-family:Verdana,Helvetica,sans-serif;
font-size:13px;
text-decoration:none;
padding-bottom:5px
}

.items a:hover {
color:#FE9A2E
}

#item_buy {
margin-left:5px;
margin-right:5px;
width:100%
}

#item_buy_left {
float:left;
padding-right:5px
}

#item_buy_right {
float:left;
background-color:#3e1d1c;
width:492px;
padding:1px;
-webkit-border-radius:2px;
-moz-border-radius:2px;
border-radius:2px
}

#item_buy_right .full {
margin:1px;
padding:1px;
width:488px;
background-color:#76403f;
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
color:#FFF;
text-shadow:#000 0 1px 0;
height:18px;
line-height:18px
}

#item_buy_right .opt_title {
margin:1px;
padding-left:1px;
width:250px;
float:left;
background-color:#76403f;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
color:#FFF;
text-shadow:#000 0 1px 0;
height:20px;
line-height:20px
}

#item_buy_right .opt {
margin:1px;
padding-left:1px;
width:236px;
float:left;
background-color:#76403f;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
color:#FFF;
text-shadow:#000 0 1px 0;
height:20px;
line-height:20px
}

#item_buy_right .opt select {
border:0;
border-radius:0;
width:70%;
font-size:12px;
line-height:1;
background:#5d302f;
color:#fff;
margin-top:1px;
padding:0;
-webkit-appearance:none
}

#item_image_bg {
position:relative;
background:url(../images/item_bg.png) no-repeat;
width:129px;
height:184px
}

#item_image_bg img {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto
}

.item_info {
margin-top:2px;
background:url(../images/item_desc.png) no-repeat;
width:129px;
height:36px;
line-height:36px;
z-index:500
}

.item_info .info {
padding-left:5px;
text-align:left;
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
color:#FFF;
text-shadow:#000 0 1px 0
}

.item_info .info .btimes {
color:#ed7876
}

.item_info .info .goldcr {
color:#ffaf04
}

.item_info .info .normalcr {
color:#d9a08a
}

#buy_buttons {
margin-right:10px;
width:99%
}

#buy_buttons button {
margin:2px
}

.buy_button {
background:url(../images/slect_btn.png);
width:155px;
height:42px;
font-family:Arial,Helvetica,sans-serif;
font-size:14px;
color:#FFF;
text-shadow:#000 0 1px 0;
border:0;
float:right
}

.buy_button:hover {
cursor:pointer
}

.payment-method-button {
margin:4px;
background-color:#EFEFEF;
border-radius:4px;
border:1px solid #D0D0D0;
overflow:auto;
float:left
}

.payment-method-button label {
float:left
}

.payment-method-button label span {
text-align:center;
padding:3px 0;
display:block;
width:120px;
height:50px;
line-height:50px;
font-family:Arial,Helvetica,sans-serif;
font-size:20px;
cursor:pointer
}

.payment-method-button label input {
position:absolute;
top:-20px
}

.auction_bet_button {
margin:0 auto;
background:#600;
color:#fff;
border-radius:4px;
border:1px solid #D0D0D0;
text-align:center;
padding:3px 0;
display:block;
width:220px;
height:35px;
cursor:pointer
}

.span_red {
background:#600;
color:#fff
}

#sell_item {
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
background:rgba(121,67,67,0.6);
padding:5px;
-webkit-box-shadow:0 8px 6px -6px rgba(0,0,0,0.38);
-moz-box-shadow:0 8px 6px -6px rgba(0,0,0,0.38);
box-shadow:0 8px 6px -6px rgba(0,0,0,0.38);
border:1px solid rgba(116,65,79,1);
display:none
}

.add_to_card {
font-size:12px;
background:#eaebec;
border:#ccc 1px solid;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
-moz-box-shadow:0 1px 2px #d1d1d1;
-webkit-box-shadow:0 1px 2px #d1d1d1;
box-shadow:0 1px 2px #d1d1d1;
width:100%
}

.add_to_card th {
padding:15px 20px 16px;
border-top:1px solid #fafafa;
border-bottom:1px solid #e0e0e0;
background:#ededed;
background:-webkit-gradient(linear,left top,left bottom,from(#ededed),to(#ebebeb));
background:-moz-linear-gradient(top,#ededed,#ebebeb)
}

.add_to_card th:first-child {
text-align:left;
padding-left:20px
}

.add_to_card tr:first-child th:first-child {
-moz-border-radius-topleft:3px;
-webkit-border-top-left-radius:3px;
border-top-left-radius:3px
}

.add_to_card tr:first-child th:last-child {
-moz-border-radius-topright:3px;
-webkit-border-top-right-radius:3px;
border-top-right-radius:3px
}

.add_to_card tr {
text-align:center;
padding-left:20px
}

.add_to_card td:first-child {
text-align:left;
padding-left:20px;
border-left:0
}

.add_to_card td {
padding:10px;
border-top:1px solid #fff;
border-bottom:1px solid #e0e0e0;
border-left:1px solid #e0e0e0;
background:#fafafa;
background:-webkit-gradient(linear,left top,left bottom,from(#fbfbfb),to(#fafafa));
background:-moz-linear-gradient(top,#fbfbfb,#fafafa)
}

.add_to_card tr.even td {
background:#f6f6f6;
background:-webkit-gradient(linear,left top,left bottom,from(#f8f8f8),to(#f6f6f6));
background:-moz-linear-gradient(top,#f8f8f8,#f6f6f6)
}

.add_to_card tr:last-child td {
border-bottom:0
}

.add_to_card tr:last-child td:first-child {
-moz-border-radius-bottomleft:3px;
-webkit-border-bottom-left-radius:3px;
border-bottom-left-radius:3px
}

.add_to_card tr:last-child td:last-child {
-moz-border-radius-bottomright:3px;
-webkit-border-bottom-right-radius:3px;
border-bottom-right-radius:3px
}

.add_to_card tr:hover td {
background:#f2f2f2;
background:-webkit-gradient(linear,left top,left bottom,from(#f2f2f2),to(#f0f0f0));
background:-moz-linear-gradient(top,#f2f2f2,#f0f0f0)
}

.ticket {
	font-size:12px;
	background:#eaebec;
	border:#ccc 1px solid;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	-moz-box-shadow: 0 1px 2px #d1d1d1;
	-webkit-box-shadow: 0 1px 2px #d1d1d1;
	box-shadow: 0 1px 2px #d1d1d1;
	__width:100%;
}
.ticket th {
	padding:15px 10px 16px 0px;
	border-top:1px solid #fafafa;
	border-bottom:1px solid #e0e0e0;
	background: #ededed;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
	background: -moz-linear-gradient(top,  #ededed,  #ebebeb);
}
.ticket th:first-child {
	text-align: left;
	padding-left:10px;
}
.ticket tr:first-child th:first-child {
	-moz-border-radius-topleft:3px;
	-webkit-border-top-left-radius:3px;
	border-top-left-radius:3px;
}
.ticket tr:first-child th:last-child {
	-moz-border-radius-topright:3px;
	-webkit-border-top-right-radius:3px;
	border-top-right-radius:3px;
}
.ticket tr {
	text-align: center;
	padding-left:20px;
}
.ticket td:first-child {
	text-align: left;
	padding-left:20px;
	border-left: 0;
}
.ticket td {
	padding:10px;
	border-top: 1px solid #ffffff;
	border-bottom:1px solid #e0e0e0;
	border-left: 1px solid #e0e0e0;
	background: #fafafa;
	background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
	background: -moz-linear-gradient(top,  #fbfbfb,  #fafafa);
}
.ticket tr.even td {
	background: #f6f6f6;
	background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
	background: -moz-linear-gradient(top,  #f8f8f8,  #f6f6f6);
}
.ticket tr:last-child td {
	border-bottom:0;
}
.ticket tr:last-child td:first-child {
	-moz-border-radius-bottomleft:3px;
	-webkit-border-bottom-left-radius:3px;
	border-bottom-left-radius:3px;
}
.ticket tr:last-child td:last-child {
	-moz-border-radius-bottomright:3px;
	-webkit-border-bottom-right-radius:3px;
	border-bottom-right-radius:3px;
}
.ticket tr:hover td {
	background: #f2f2f2;
	background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
	background: -moz-linear-gradient(top,  #f2f2f2,  #f0f0f0);	
}

.discount_notice{
  margin: 20px auto;
  left:200px;
  width: 280px;
  height: auto;
  background: white;
  border-radius: 10px;
  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 8px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 8px rgba(0,0,0,0.3);
  position: fixed;
  z-index: 90;
  opacity: 0.9;
}

.discount_notice .content{
	padding:30px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	color: #6a2f3c;
	font-weight: bold;
	position: relative;
	display:block;
}

.ribbon-discount-green {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
}

.ribbon-green {
  font: bold 15px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  background-color: #BFDC7A;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45)); 
  background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:    -moz-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:     -ms-linear-gradient(top, #BFDC7A, #8EBF45); 
  background-image:      -o-linear-gradient(top, #BFDC7A, #8EBF45); 
  color: #6a6340;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
}

.ribbon-green:before, .ribbon-green:after {
  content: "";
  border-top:   3px solid #6e8900;   
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon-green:before {
  left: 0;
}
.ribbon-green:after {
  right: 0;
}

.PriorityZero {
	background-color: rgb(230, 138, 138);
}
.PriorityOne {
    background-color: rgb(204, 64, 64);
}
.PriorityTwo {
    background-color: rgb(255, 0, 0);
}
.PriorityThree {
    background-color: rgb(153, 0, 0);
}


.plans {
	list-style: none;
	margin: 0;
	padding: 10px 20px;
}	
.plan {
	background: white;
	border-radius: 6px;
	height: 60px;
	margin: 10px 0;
	opacity: 1;
	padding: 4px 25px;
	width: 100%;
}	
	
.price {
	border-radius: 100%;
	cursor: default;
	display: block;
	float: left;
	height: 46px;
	line-height: 46px;
	margin: 8px 10px 0 0;
	text-align: center;
	width: 46px;
}			
.price-green {
	background-color: #e1f1d1;
	color: #52b327;
	font-weight: bold;
}
		
.price-red {
	background-color: #f1e1d1;
	color: #b35227;
}
		
		
.details {
	color: #222;
	display: block;
	float: left;
	height: 46px;
	margin: 8px 0;
	padding: 0px 10px;
}
	
.plan-title {
	font-size: 17px;
	font-weight: normal;
	margin: 2px 0 0;
	padding: 0;
	text-transform: uppercase;
}
			
.plan-description {
	color: #666;
	font-size: 14px;
	margin: 0;
	padding: 0;
}
		
		
.select {
	background: #660000; 
	border: none;
	border-radius: 4px;
	color: white;
	display: inline-block;
	float: right;
	font-size: 14px;
	margin: 15px 0;
	padding: 7px 16px;
	text-decoration:none;
	
}	
.select:hover {
	background-color:#990000;
	text-decoration:none;
	cursor: painter;
}

#exception{
	width: 100%;
	height: 0 auto;
	line-height: 25px;
	min-height:25px;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #FFF;
	display: none;
	background-color:red;
	position:fixed;
	z-index: 9999;
}
#ucp_info table, #ucp_info table td{
	border: 0px !important;
}

.i_note, .s_note, .w_note, .e_note {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 40px;
background-repeat: no-repeat;
-moz-border-radius:.5em;
-webkit-border-radius:.5em;
border-radius:.5em; 
text-align: left;
}
.i_note {
color: #00529B;
background-color: #BDE5F8;
background-image: url('../images/info.png');
background-position: left center;
}
.s_note {
color: #4F8A10;
background-color: #E8EFD3;
background-image:url('../images/success.png');
background-position: left center;
}
.w_note {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('../images/warning.png');
background-position: left center;
}
.e_note {
color: #D8000C;
background-color: #F7E0CC;
background-image: url('../images/error.png');
background-position: left center;
}

.item_size_12{
	font-size: 12px;
}

.item_font_family{
	font-family: tahoma;
}

.item_white{
	color:#FFFFFF;
}

.item_light_green{
	color:#00FF00;
}

.item_light_blue{
	color:#80B2FF;
}

.item_light_blue_2{
	color:#3366FF;
}

.item_blue{
	color:#0066FF;
}

.item_pink{
	color:#FF1493;
}

.item_yellow{
	color:#FADE09;
}

.item_yellow_2{
	color:#FFCC00;
}

.item_red{
	color:#FF0000;
}

.item_dark_red{
	color:#800000;
}

.item_dark_red_background{
	background-color:#800000;
}

.item_purple{
	color: #800080;
}

.item_socket{
	color: #B266FF;
}

.item_grey{
	color: #808080;
}

.item_yellow_title{
	color: #FFCC19;
}
.item_luck{
	color:#80B2FF;
}
.item_exe_title{
	color: #008000;
}

.item_socket_title{
	color: #B266FF;
}

.item_socket_exe_title{
	color: #7401DF;
}

.item_ancient_title{
	color: #01DF01;
}

.item_ancient_background{
	background-color: #0000FF;
}

.right { float:right; }
.left{ float:left; }

#inventoryc {
    background-image:url('../images/inventoryc_red.png');
    width:400px;
    height:320px;
	text-align:center;
	display: inline-block;
	position:relative; 
}
#inventoryc > img {
	position: absolute;
    top: 90px; left: 145px;
    border-radius: 50%;
    border: 3px solid #24314e;
}
#inventoryc > div {
    position:absolute;
    background-repeat:no-repeat;
    background-position:center center;
}
#in_weapon { width:90px;height:136px;bottom:0;left:-6px; }
#in_shield { width:60px;height:136px;bottom:0;right:8px; }
#in_helm { width:68px;height:68px;top:2px;left:66px; }
#in_armor { width:72px;height:110px;top:72px;left:40px; }
#in_pants { width:68px;height:68px;bottom:8px;left:82px; }
#in_gloves { width:68px;height:68px;top:116px;right:54px; }
#in_boots { width:68px;height:68px;bottom:8px;right:82px; }
#in_wings { width:138px;height:102px;top:8px;right:-2px; }
#in_zoo { width:42px;height:42px;top:15px;left:10px; }
#in_pendant { width:38px;height:38px;top:20px;right:136px; }
#in_ring1 { width:38px;height:38px;bottom:92px;left:96px; }
#in_ring2 { width:38px;height:38px;bottom:92px;right:96px; }
#in_pentagram { width:64px;height:64px;bottom:8px;right:169px; }
#in_ear1 {  width:32px;height:32px;top:72px;left:0px; } 
#in_ear2 {  width:32px;height:32px;top:72px;left:115px; } 

#timer_div_title {
	position: absolute;
	height: 16px;
	width:210px;
	top: 56px;
	left: 260px;
	font-family: Myriad Pro;
	text-decoration: none;
	font-size: 16px;
	text-align:center;
}
#timer_div_time {
	position: absolute;
	height: 70px;
	width: 224px;
	top: 81px;
	left: 260px;
}

.timmer_inner_block{
	-moz-border-radius:.5em;
	-webkit-border-radius:.5em;
	border-radius:.5em;
	margin: 2px;
	float:left;
	width: 52px;
	height: 67px;
	background: url(../images/timer_div.png);
}

#timer_div_time .timmer_inner_block .title{
	text-align:center;
	color: #6a6965;
	font-size: 9px;
	padding-top: 6px;
	text-shadow: rgba(0, 0, 0, 0.31) 0px 1px 0px;
}

#timer_div_time .timmer_inner_block .count{
	text-align:center;
	font-weight: bold;
	font-size: 20px;
	color: #fff;
	padding-top:10px;
	text-shadow: #000 0px 2px 3px;
}

.countdown-block {
    position: absolute;
	z-index: 9999;
    bottom: 184px;
    right: 310px;
    text-align: center;
    width: 25%;
    left: 0;
    top: 27rem;
}
#events div {
	padding: 5px;
	padding-left: 10px;
	padding-right: 10px;
}

#events div small {
	float:right;
	color: #ff4800;
}

/* --- INTEGRACIÓN HEADER MODERNO --- */
.topPanel.modern-sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
}

.header_web.header_transparent {
    background: transparent !important;
    height: 120px !important; /* Espacio para el menú */
}

/* --- SECCIÓN HERO --- */
.main-hero-kaizen {
    width: 100%;
    margin: -120px 0 40px 0; /* Sube debajo del header */
    height: 650px;
    background: url('../images/hero_bg.jpg') no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}

.floating-logo {
    max-width: 520px;
    filter: drop-shadow(0 0 30px rgba(0,0,0,0.8));
    animation: kzFloat 5s ease-in-out infinite;
}

@keyframes kzFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* --- BOTONES KAIZEN CON BRILLO --- */
.hero-action-buttons { display: flex; gap: 15px; margin-top: 30px; justify-content: center; }

.btn-kz {
    padding: 18px 50px;
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
    display: inline-block;
    transition: 0.3s;
}

.btn-gold {
    background: linear-gradient(180deg, #f1c40f 0%, #9e7e0a 100%);
    color: #000 !important;
    clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
}

.btn-blue {
    background: rgba(0, 100, 255, 0.2);
    color: #fff !important;
    border: 1px solid #00a2ff;
    clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 10% 100%);
}

/* Efecto Brillo (Shine) */
.btn-shine::after {
    content: '';
    position: absolute;
    top: -50%; left: -100%;
    width: 50%; height: 200%;
    background: rgba(255, 255, 255, 0.4);
    transform: rotate(30deg);
    animation: kzShine 4s infinite;
}

@keyframes kzShine {
    0% { left: -100%; }
    20%, 100% { left: 150%; }
}

/* --- GRID DE NOTICIAS CRISTAL --- */
.news-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.crystal-card {
    background: rgba(15, 15, 25, 0.75) !important;
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    transition: 0.4s;
    overflow: hidden;
}

.news-card-modern:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 215, 0, 0.3);
}

.card-thumb { height: 170px; position: relative; overflow: hidden; }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.news-card-modern:hover .card-thumb img { transform: scale(1.1); }

.card-date-tag {
    position: absolute;
    top: 10px; right: 10px;
    background: #f1c40f; color: #000;
    padding: 5px 10px; text-align: center; border-radius: 4px;
    line-height: 1;
}

.card-content { padding: 20px; }
.card-content h3 a { color: #fff; text-decoration: none; font-size: 19px; font-family: 'Cinzel', serif; }
.card-content p { color: #bbb; font-size: 13px; margin: 12px 0; line-height: 1.5; }
.read-more-link { color: #f1c40f; font-weight: bold; font-size: 11px; text-decoration: none; }

.modern-title { color: #fff; font-family: 'Cinzel', serif; margin-bottom: 25px; border-left: 4px solid #f1c40f; padding-left: 15px; }

/* --- GLOBAL CRYSTAL EFFECT FOR SIDEBARS --- */
/* Targetting all sidebar containers to remove old parchment and apply crystal */
.left-sidebar .download-button,
.left-sidebar .serverBlock,
.left-sidebar .socBlock,
.left-sidebar .block {
    background-image: none !important; /* Quita los pergaminos viejos */
    background: rgba(10, 10, 15, 0.6) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 215, 0, 0.15) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    margin-bottom: 20px !important;
    border-radius: 5px;
    padding: 15px;
}

/* Sidebar block titles */
.left-sidebar .blockTitle {
    background-image: none !important;
    background: rgba(255, 215, 0, 0.05) !important;
    border-bottom: 1px solid rgba(255, 215, 0, 0.1);
}

.left-sidebar .blockTitle p {
    color: #ffd700 !important;
    text-shadow: 0 0 10px rgba(255,215,0,0.5);
}

/* Server progress bar color adjustment */
.server-progress .progress-bar {
    background-color: #ffd700 !important; /* Golden bar */
}

/* SOCIAL BLOCK - Distribute links */
.socBlock.flex {
    display: flex;
    justify-content: space-around;
    padding: 10px 0;
}

.socBlock a {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    font-size: 11px;
    text-transform: lowercase;
}

.socBlock a:hover {
    color: #ffd700;
}

/* CRYSTAL CASTLE SIEGE TEXT STYLES */
/* Formatting the list and texts for Crypto Castle */
.block .fast-links li span {
    color: #aaa; /* Gray label */
    font-size: 12px;
}

.block .fast-links li strong {
    font-size: 14px;
    text-shadow: 0 0 5px rgba(255,255,255,0.3);
}

/* =========================================================
   REFINAMIENTO FINAL: HERO IMPACTO TOTAL (SCROLL REQUERIDO)
   ========================================================= */

.hero-impact {
    width: 100%;
    /* Ocupa casi el 100% de la pantalla del usuario al entrar */
    min-height: 95vh; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    /* Espacio superior para el menú */
    padding-top: 80px; 
    /* Margen inferior grande para separar las boxes */
    margin-bottom: 100px; 
    box-sizing: border-box;
}

.hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.logo-hero-big {
    /* Logo masivo para impacto visual */
    max-width: 900px; 
    width: 90%; 
    margin-bottom: 60px; /* Más espacio entre logo y botones */
    
    /* EFECTO DE FUEGO: Capas de sombras naranja, rojo y amarillo */
    filter: drop-shadow(0 0 15px rgba(255, 69, 0, 0.8)) 
            drop-shadow(0 0 30px rgba(255, 140, 0, 0.6)) 
            drop-shadow(0 0 50px rgba(255, 215, 0, 0.3));
    
    /* Animación Doble: Flota y además parpadea como fuego */
    animation: floatAnim 6s ease-in-out infinite, fireAnim 2s linear infinite;
    
    image-rendering: -webkit-optimize-contrast;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.logo-hero-big:hover {
    transform: scale(1.05); /* Un poco más de escala al pasar el mouse */
    filter: drop-shadow(0 0 25px rgba(255, 69, 0, 1)) 
            drop-shadow(0 0 50px rgba(255, 140, 0, 0.8));
}

/* Mantener tu animación de flotación */
@keyframes floatAnim {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* NUEVA: Animación de parpadeo de fuego */
@keyframes fireAnim {
    0%, 100% {
        filter: drop-shadow(0 0 15px rgba(255, 69, 0, 0.8)) 
                drop-shadow(0 0 30px rgba(255, 140, 0, 0.6));
    }
    33% {
        filter: drop-shadow(0 5px 20px rgba(255, 0, 0, 0.9)) 
                drop-shadow(0 0 40px rgba(255, 165, 0, 0.7));
    }
    66% {
        filter: drop-shadow(0 -5px 25px rgba(255, 140, 0, 0.8)) 
                drop-shadow(0 0 35px rgba(255, 215, 0, 0.5));
    }
}
/* --- CONTROLES DE ACCIÓN MASIVOS --- */
.hero-controls { 
    display: flex; 
    gap: 30px; /* Más separación entre botones */
    justify-content: center; 
    width: 100%;
    flex-wrap: wrap; /* Para que en móviles se pongan uno abajo del otro */
}

/* =========================================================
   REFINAMIENTO FINAL: BOTONES KAIZEN NEÓN (RECTANGULARES REDONDEADOS)
   ========================================================= */

/* Estilos Comunes (Forma Unificada) */
.btn-kaizen-gold, .btn-kaizen-purple {
    width: 280px; /* Ancho fijo */
    height: 75px; /* Altura fija */
    display: flex; 
    align-items: center;
    justify-content: center;
    
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
    text-decoration: none !important;
    position: relative;
    overflow: hidden; /* Importante para el brillo 'shine' */
    
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    letter-spacing: 2px;
    
    /* CAMBIO DE FORMA: Rectángulo con esquinas redondeadas suaves */
    clip-path: none !important;
    border-radius: 10px !important;
}

/* --- BOTÓN DORADO (Registro) - Se mantiene elegante --- */
.btn-kaizen-gold {
    background: linear-gradient(180deg, #ffd700, #b8860b) !important;
    color: #000 !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

.btn-kaizen-gold:hover {
    transform: translateY(-5px) scale(1.03);
    filter: brightness(1.2);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5), inset 0 0 10px rgba(255,255,255,0.3);
}

/* --- BOTÓN MORADO OSCURO NEÓN (Downloads) --- */
.btn-kaizen-purple {
    /* Morado más vibrante y real (#3d146e) para un look premium */
    background: linear-gradient(180deg, #3d146e, #210b3d) !important;
    color: #fff !important;
    
    /* Borde más sólido para que el botón "salte" del fondo */
    border: 1px solid rgba(155, 89, 182, 0.5);
    
    /* Brillo interno más potente (Efecto Runa) */
    box-shadow: 0 5px 15px rgba(0,0,0,0.7), inset 0 0 15px rgba(155, 89, 182, 0.4);
    
    /* Propiedades base unificadas */
    width: 280px; 
    height: 75px; 
    display: flex; 
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    letter-spacing: 2px;
    border-radius: 10px !important;
}

/* Efecto Neón / Iluminación al Hover (Morado) */
.btn-kaizen-purple:hover {
    transform: translateY(-5px) scale(1.03);
    color: #fff !important;
    
    /* Cambiamos el borde a un morado más brillante */
    border-color: rgba(142, 68, 173, 0.8);
    
    /* EFECTO NEÓN PULSANTE INTENSO */
    animation: purpleNeonPulse 1.5s infinite;
}

/* Definición de la Animación Neón Pulsante (Púrpura Ancient) */
@keyframes purpleNeonPulse {
    0% {
        box-shadow: 0 0 10px rgba(142, 68, 173, 0.7), 
                    0 0 20px rgba(142, 68, 173, 0.5), 
                    inset 0 0 10px rgba(142, 68, 173, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(142, 68, 173, 1), 
                    0 0 40px rgba(142, 68, 173, 0.8), 
                    inset 0 0 15px rgba(142, 68, 173, 0.5);
    }
    100% {
        box-shadow: 0 0 10px rgba(142, 68, 173, 0.7), 
                    0 0 20px rgba(142, 68, 173, 0.5), 
                    inset 0 0 10px rgba(142, 68, 173, 0.3);
    }
}

/* Brillo animado (Shine) que pasa por el botón - Se mantiene */
.btn-kaizen-gold::after, .btn-kaizen-purple::after {
    content: '';
    position: absolute;
    top: -50%; left: -100%;
    width: 50%; height: 200%;
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(30deg);
    animation: muShine 4s infinite;
}

@keyframes muShine {
    0% { left: -100%; }
    15% { left: 150%; }
    100% { left: 150%; }
}
/* Forzar que las boxes (cuadrícula) aparezcan después del scroll */
.container_web {
    position: relative;
    z-index: 2;
    padding-bottom: 60px;
}

/* =========================================================
   DISEÑO KAIZEN: BANNER + LAST NEWS (CARTITAS)
   ========================================================= */

/* Estructura de dos columnas */
.kaizen-dashboard-row {
    display: grid;
    grid-template-columns: 1fr 400px; /* Banner toma espacio libre, Noticias fijo en 400px */
    gap: 20px;
    margin-bottom: 40px;
    width: 100%;
}

@media (max-width: 1000px) {
    .kaizen-dashboard-row { grid-template-columns: 1fr; }
}

/* --- BANNER DE REGISTRO (IZQUIERDA) --- */
.k-promo-banner {
    background: linear-gradient(135deg, #101422, #080a12);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.promo-title { color: #f1c40f; font-family: 'Cinzel', serif; font-size: 28px; margin: 0 0 10px 0; }
.promo-subtitle { background: #1a2035; color: #fff; padding: 5px 20px; border-radius: 20px; font-size: 12px; margin-bottom: 20px; border: 1px solid rgba(255,255,255,0.1); }
.promo-boxes { display: flex; gap: 15px; width: 100%; justify-content: center; }
.p-box { background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.05); border-radius: 10px; padding: 15px; width: 150px; display: flex; flex-direction: column; gap: 5px; }
.p-box span { color: #aaa; font-size: 11px; }

/* --- PANEL DE NOTICIAS (DERECHA) --- */
.k-news-panel {
    background: #0d0f16; /* Fondo azul oscuro mate */
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 1px solid rgba(255, 255, 255, 0.03);
}

/* Título de Last News */
.k-panel-header {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 1px;
}
.purple-dot { width: 8px; height: 8px; background: #9b59b6; border-radius: 50%; box-shadow: 0 0 10px #9b59b6; }

/* Lista de "Cartitas" */
.k-news-list { display: flex; flex-direction: column; gap: 12px; }

/* Cada cartita individual */
.k-news-item {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 12px;
    text-decoration: none !important;
    transition: 0.3s;
}

.k-news-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 215, 0, 0.2);
    transform: translateX(5px); /* Efecto de moverse a la derecha */
}

/* Imagen cuadradita de la noticia */
.k-news-img {
    width: 55px; height: 40px;
    border-radius: 6px;
    overflow: hidden;
    margin-right: 15px;
    flex-shrink: 0;
}
.k-news-img img { width: 100%; height: 100%; object-fit: cover; }

/* Info de la cartita */
.k-news-info { flex-grow: 1; display: flex; flex-direction: column; gap: 6px; }
.k-news-info h4 { color: #eee; font-size: 13px; margin: 0; font-family: sans-serif; font-weight: normal; }
.k-news-meta { display: flex; gap: 10px; align-items: center; font-size: 10px; font-weight: bold; }
.k-tag { color: #9b59b6; background: rgba(155, 89, 182, 0.1); padding: 2px 6px; border-radius: 4px; border: 1px solid rgba(155, 89, 182, 0.2); }
.k-date { color: #666; }

/* Flecha de la derecha */
.k-news-arrow {
    color: #444; font-size: 18px;
    width: 25px; height: 25px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(0,0,0,0.3);
    transition: 0.3s;
}
.k-news-item:hover .k-news-arrow { color: #fff; background: rgba(255,255,255,0.1); }


/* =========================================================
   1. ELIMINAR EL PERGAMINO REBELDE (MODO NUCLEAR)
   ========================================================= */
/* Atacamos todas las posibles etiquetas que DMN usa para el fondo viejo */
main, main.content, #content, article, .news, .news-article, .post, .content-wrapper {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Ocultar la paginación vieja si sale debajo flotando feo */
.pagination { background: transparent !important; border: none !important; }

/* =========================================================
   2. DISEÑO KAIZEN: BANNER + LAST NEWS (AJUSTADO)
   ========================================================= */
/* Cambiamos Grid por Flexbox para que se adapte mejor al lado del Sidebar */
.kaizen-dashboard-row {
    display: flex;
    flex-wrap: wrap; /* Si la pantalla es pequeña, se pone uno debajo del otro */
    gap: 20px;
    width: 100%;
    margin-bottom: 40px;
    align-items: stretch;
}

/* --- BANNER DE REGISTRO (IZQUIERDA) --- */
.k-promo-banner {
    flex: 1.2; /* Toma un poco más de la mitad del espacio */
    background: linear-gradient(135deg, #101422, #080a12) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 15px !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px !important;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}

.promo-title { color: #f1c40f !important; font-family: 'Cinzel', serif !important; font-size: 26px !important; margin: 0 0 10px 0 !important; text-shadow: 0 0 10px rgba(241, 196, 15, 0.3); }
.promo-subtitle { background: #1a2035 !important; color: #fff !important; padding: 5px 20px !important; border-radius: 20px !important; font-size: 11px !important; margin-bottom: 25px !important; border: 1px solid rgba(255,255,255,0.1) !important; font-weight: bold; letter-spacing: 1px;}
.promo-boxes { display: flex; gap: 15px; width: 100%; justify-content: center; }
.p-box { background: rgba(0,0,0,0.4) !important; border: 1px solid rgba(255,255,255,0.05) !important; border-radius: 10px !important; padding: 15px !important; width: 140px !important; display: flex; flex-direction: column; gap: 5px; }
.p-box span { color: #aaa !important; font-size: 11px !important; }

/* --- PANEL DE NOTICIAS (DERECHA) --- */

/* Título de Last News */
.k-panel-header { color: #fff !important; font-size: 14px !important; font-weight: bold !important; text-transform: uppercase !important; margin-bottom: 20px !important; display: flex !important; align-items: center !important; gap: 10px !important; letter-spacing: 1px; }
.purple-dot { width: 8px; height: 8px; background: #9b59b6; border-radius: 50%; box-shadow: 0 0 10px #9b59b6; }

/* Lista de "Cartitas" */
.k-news-list { display: flex; flex-direction: column; gap: 12px; }

/* Cada cartita individual */
.k-news-item {
    display: flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.04) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    text-decoration: none !important;
    transition: 0.3s !important;
}

.k-news-item:hover { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 215, 0, 0.2) !important; transform: translateX(5px); }

.k-news-img { width: 55px !important; height: 40px !important; border-radius: 6px !important; overflow: hidden !important; margin-right: 15px !important; flex-shrink: 0; }
.k-news-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; }

.k-news-info { flex-grow: 1; display: flex; flex-direction: column; gap: 5px; }
.k-news-info h4 { color: #eee !important; font-size: 13px !important; margin: 0 !important; font-family: sans-serif !important; font-weight: normal !important; }
.k-news-meta { display: flex; gap: 10px; align-items: center; font-size: 10px; font-weight: bold; }
.k-tag { color: #9b59b6 !important; background: rgba(155, 89, 182, 0.1) !important; padding: 2px 6px !important; border-radius: 4px !important; border: 1px solid rgba(155, 89, 182, 0.2) !important; }
.k-date { color: #666 !important; }

.k-news-arrow { color: #444 !important; font-size: 18px !important; width: 25px !important; height: 25px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; background: rgba(0,0,0,0.3) !important; transition: 0.3s !important; }

/* =========================================================
   DISEÑO DE 3 COLUMNAS SUPERIORES (KAIZEN WIDGETS)
   ========================================================= */

/* --- DISEÑO DE 3 COLUMNAS SUPERIORES (WIDGETS COMPACTOS) --- */
.kaizen-3-cols {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    width: 100% !important;
    max-width: 1050px !important; /* Limitamos el ancho para que no se estiren feo */
    margin: 0 auto 40px auto !important; /* Centrado perfecto y espacio abajo */
}

/* Alineación vertical para que las cajas sean simétricas */
.k-widget {
    margin-bottom: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Que el contenido empiece desde arriba */
    height: 100%;
    min-height: 220px; /* Altura mínima para que no queden chaparras */
}

/* Ajustes finos para la tablita del Top Players */
#top_players table { margin-bottom: 0 !important; }
#top_players th, #top_players td { padding: 4px 2px !important; }

/* --- RESPONSIVIDAD (MÓVILES) --- */
@media (max-width: 950px) {
    .kaizen-3-cols {
        grid-template-columns: 1fr; /* En celulares se pondrá una debajo de otra */
    }
}
.k-news-item:hover .k-news-arrow { color: #fff !important; background: rgba(255,255,255,0.1) !important; }

/* Ajustes para la tabla de Top Players en 3 columnas */
#top_players table { 
    width: 100% !important; 
    table-layout: fixed; /* Fuerza a que no se salga del contenedor */
}

#top_players th, #top_players td { 
    text-align: left; 
    padding: 6px 2px; 
    overflow: hidden; 
    text-overflow: ellipsis; /* Pone "..." si el nombre es muy largo */
    white-space: nowrap; 
}

#top_players th { 
    color: #ffd700 !important; 
    border-bottom: 1px solid rgba(255,215,0,0.2) !important; 
    font-size: 11px; 
}

#top_players td { 
    font-size: 11px; 
    border-bottom: 1px solid rgba(255,255,255,0.05) !important; 
    color: #ddd !important;
}

#top_players td a { color: #3498db !important; text-decoration: none; font-weight: bold; }

/* =========================================================
   SIMETRÍA TOTAL MU AMERIKA: LATEST NEWS EN CUADRÍCULA
   ========================================================= */

/* Hacemos que la web sea un Grid de 2 columnas principales */

/* Quitamos el ancho fijo que estaba aplastando el sidebar de Castle Siege */
.kaizen-3-cols { max-width: 100% !important; }

/* --- RE-EMPAQUETANDO LATEST NEWS --- */
.news-modern-section {
    width: 100% !important;
    margin-top: 0 !important;
}

/* Forzamos a que la caja de noticias sea idéntica a las otras (WIDGET COMPACTO) */
.news-modern-section .crystal-box {
    width: 100% !important;
    min-height: 250px !important; /* Altura mínima similar a las otras */
    background: #0d0f16 !important; /* Fondo azul oscuro mate */
    border-radius: 15px !important;
    padding: 25px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.03) !important;
    box-sizing: border-box !important;
}

/* Título de Last News EXACTO a los otros */
.news-modern-section h2 {
    color: #fff !important; 
    font-size: 14px !important; 
    font-weight: bold !important; 
    text-transform: uppercase !important; 
    margin-bottom: 20px !important; 
    display: flex !important; 
    align-items: center !important; 
    gap: 10px !important; 
    letter-spacing: 1px;
    font-family: sans-serif !important;
    border-left: none !important; /* Quitamos la barra lateral amarilla */
    padding-left: 0 !important;
}

/* Pone el puntito morado automáticamente */
.news-modern-section h2::before {
    content: '';
    width: 8px; height: 8px; 
    background: #9b59b6; 
    border-radius: 50%; 
    box-shadow: 0 0 10px #9b59b6;
    display: inline-block;
}

/* Lista de noticias en formato "Cartitas" compactas */
.news-grid {
    display: flex !important;
    flex-direction: column !important; /* Una debajo de la otra */
    gap: 12px;
}

/* Quitamos el margen negativo que aplastaba la imagen */
.news-card .card-img {
    margin: -15px -15px 15px -15px !important;
}

/* Ajustes finales de simetría */
.kaizen-dashboard-row { grid-template-columns: 1fr !important; } /* Quitamos el antiguo diseño de 2 cols */

/* =========================================================
   ELIMINAR ADORNOS DORADOS FLOTANTES (WIDGETS Y CONTENEDOR)
   ========================================================= */

/* 1. Quitamos fondos de imagen residuales en los contenedores principales y las cajas */
.container_web, main, article, #content, .wrapper_web,
.crystal-box, .k-widget, .block, .serverBlock, .news-modern-section {
    background-image: none !important;
}

/* 2. Ocultamos pseudo-elementos (::before y ::after) que puedan estar dibujando esos adornos dorados */
.container_web::before, .container_web::after,
.crystal-box::before, .crystal-box::after,
.k-widget::before, .k-widget::after,
main::before, main::after,
article::before, article::after,
.news-modern-section::before, .news-modern-section::after {
    display: none !important;
    content: none !important;
    background-image: none !important;
}

/* =========================================================
   ESTRUCTURA CENTRAL SIMÉTRICA (KAIZEN LOOK)
   ========================================================= */

/* 1. Contenedor Principal: Centra y limita el ancho de TODA la web */
.container_web {
    max-width: 1250px !important; /* Ancho máximo centralizado */
    width: 95% !important;
    margin: 40px auto !important; /* Espacio arriba/abajo y centrado horizontal */
    display: flex !important;
    flex-direction: column !important; /* Apila widgets sobre noticias */
    gap: 25px; /* Espacio entre los bloques */
}

/* 2. Reseteo de Sidebars: Ya no necesitamos sidebars flotantes */
.left-sidebar, main.content, .news-modern-section {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* 3. Re-diseño de las 3 Columnas Superiores */
.kaizen-3-cols {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    margin-bottom: 0 !important;
}

/* 4. Estilo de Caja Único (Universal Crystal) */
.crystal-box, .k-widget, .serverBlock, .news-modern-section-wrap {
    background: rgba(15, 15, 25, 0.7) !important; /* Fondo oscuro traslúcido */
    backdrop-filter: blur(15px) !important; /* Efecto borroso */
    border: 1px solid rgba(255, 255, 255, 0.06) !important; /* Borde sutil */
    border-radius: 12px !important;
    padding: 25px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
    box-sizing: border-box !important;
}

/* 5. Títulos Simétricos (Kaizen Style) */
.k-panel-header, .news-modern-section-wrap h2 {
    color: #fff !important; 
    font-size: 14px !important; 
    font-weight: bold !important; 
    text-transform: uppercase !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; /* Centrado perfecto */
    gap: 10px !important; 
    letter-spacing: 1px;
    font-family: sans-serif !important;
    margin: 0 0 20px 0 !important;
}

/* Puntito morado automático para TODOS los títulos */
.k-panel-header::before, .news-modern-section-wrap h2::before {
    content: '';
    width: 8px; height: 8px; 
    background: #9b59b6; 
    border-radius: 50%; 
    box-shadow: 0 0 10px #9b59b6;
    display: inline-block;
}

/* 6. Grid de Noticias (Cartitas) */
.news-grid-kaizen {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 15px;
}

/* =========================================================
   ALTURA PERFECTA PARA LAS 3 CAJAS SUPERIORES
   ========================================================= */

/* Fuerza a que las 3 columnas se estiren juntas a la misma altura */
.kaizen-3-cols {
    align-items: stretch !important; 
}

/* Aplica el alto completo a las cajas individuales */
.k-widget, .serverBlock {
    height: 100% !important; 
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

/* Centra el contenido del Server Status en el espacio vacío */
.server-info-inner {
    flex-grow: 1 !important; /* Toma todo el espacio que sobra */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Centra la barra de porcentaje verticalmente */
}

/* Hace lo mismo para el contenido del Castle Siege por si queda corto */
.k-widget > div[style*="padding: 0;"] {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* =========================================================
   CUADRÍCULA PERFECTA 3x2 (SERVER/NEWS/LOGIN - CASTLE/PLAYERS/GUILDS)
   ========================================================= */

/* =========================================================
   SISTEMA VISUAL MU AMERIKA: CUADRÍCULA KAIZEN 3x2 (FINAL)
   ========================================================= */

/* 1. EL CONTENEDOR PRINCIPAL: MAPA INAMOVIBLE */
.container_web {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-areas:
        "server news login"
        "castle players guilds" !important;
    grid-auto-rows: minmax(280px, auto); 
    gap: 25px !important;
    max-width: 1300px !important;
    width: 95% !important;
    margin: 40px auto !important;
    align-items: stretch !important;
}

/* 2. LIBERACIÓN DE CONTENEDORES (Para que las cajas entren al mapa) */
.left-sidebar, main.content, .right-sidebar {
    display: contents !important;
}

/* 3. CLAVADO DE CAJAS EN EL MAPA */
.box-server  { grid-area: server !important; }
.box-news    { grid-area: news !important; }
.box-login   { grid-area: login !important; display: flex !important; }
.box-castle  { grid-area: castle !important; }
.box-players { grid-area: players !important; }
.box-guilds  { grid-area: guilds !important; }

/* 4. LIMPIEZA DE ELEMENTOS VIEJOS */
.right-sidebar > div:not(.box-login), 
.left-sidebar > div:not(.k-widget),
.title1, #box1, .box-style1 { 
    display: none !important; 
}

/* 5. ESTILO "CRYSTAL" UNIVERSAL (Ancho total forzado) */
.crystal-box, .k-widget {
    background: rgba(10, 10, 18, 0.8) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 25px !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.7) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important; /* Evita que la caja se encoja */
    margin: 0 !important;
}

/* 6. TÍTULOS ESTANDARIZADOS */
.k-panel-header {
    color: #fff !important; 
    font-size: 14px !important; 
    font-weight: 800 !important; 
    text-transform: uppercase !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    gap: 12px !important; 
    letter-spacing: 1.5px;
    margin-bottom: 20px !important; 
    border-bottom: 1px solid rgba(255,255,255,0.06); 
    padding-bottom: 15px;
    flex-shrink: 0;
}
.k-panel-header .purple-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* 7. CONTENIDO INTERNO: ALINEACIÓN DESDE EL TOP Y LLENADO DE ANCHO */
.k-widget-content, .server-info-inner {
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start !important; 
    align-items: stretch !important; /* Forzamos a que el contenido ocupe todo el ancho */
    padding-top: 5px;
}

/* 8. INPUTS PROFESIONALES (Centrados y Oscuros) */
.k-input, main.content input[type="text"], main.content input[type="password"], main.content select {
    background: rgba(0, 0, 0, 0.6) !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important; 
    padding: 12px 15px !important; 
    margin-bottom: 12px; 
    border-radius: 6px !important;
    width: 100% !important; 
    box-sizing: border-box !important; 
    outline: none; 
    transition: all 0.3s ease;
    font-size: 13px;
    text-align: center; /* Texto centrado */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
}
.k-input:focus { border-color: rgba(255, 215, 0, 0.4) !important; background: rgba(0, 0, 0, 0.8) !important; }

/* 9. BOTONES AMARILLOS / DORADOS (Unificados para todo el sitio) */
.k-btn-login, .k-btn-panel, .k-btn-logout, main.content button, .button-style {
    background: linear-gradient(180deg, #ffd700, #b8860b) !important; 
    color: #000 !important;
    border: none !important; 
    padding: 12px !important; 
    font-weight: 900 !important; 
    border-radius: 6px !important;
    cursor: pointer !important; 
    text-transform: uppercase; 
    width: 100% !important; 
    transition: all 0.3s ease; 
    letter-spacing: 1px;
    text-align: center;
    text-decoration: none;
    display: block;
    margin-bottom: 10px;
}

.k-btn-login:hover, .k-btn-panel:hover, .k-btn-logout:hover, main.content button:hover { 
    filter: brightness(1.2); 
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
    transform: translateY(-2px);
    color: #000 !important;
}

/* 10. CORRECCIÓN DE TEXTO NEGRO EN REGISTRO Y SUBPÁGINAS */
main.content, main.content td, main.content span, main.content p, main.content label {
    color: #ccc !important; /* Forzamos color legible */
}
main.content a { color: #ffd700 !important; font-weight: bold; }

/* 11. RANKINGS Y TABLAS */
#top_players table, #top_guilds table { width: 100% !important; table-layout: fixed; }
#top_players th, #top_guilds th { color: #ffd700 !important; border-bottom: 1px solid rgba(255,215,0,0.2) !important; padding-bottom: 10px !important; }
#top_players td, #top_guilds td { border-bottom: 1px solid rgba(255,255,255,0.05) !important; padding: 8px 0 !important; color: #ddd !important; }

/* Scrollbar fina */
.box-news .k-widget-content::-webkit-scrollbar { width: 4px; }
.box-news .k-widget-content::-webkit-scrollbar-thumb { background: rgba(255,215,0,0.3); border-radius: 4px; }

/* 12. RESPONSIVIDAD */
@media (max-width: 1100px) {
    .container_web { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 700px) {
    .container_web { grid-template-columns: 1fr !important; }
}

/* =========================================================
   ESTILO DE PAGINACIÓN KAIZEN
   ========================================================= */

.k-pagination-container {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.05);
    text-align: center;
    display: flex;
    justify-content: center;
}

/* Estilo para los números/links de la paginación */
.k-pagination-container a, 
.k-pagination-container b {
    display: inline-block;
    padding: 5px 12px;
    margin: 0 4px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    transition: 0.3s;
}

/* Números normales */
.k-pagination-container a {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Número actual (el que está resaltado) */
.k-pagination-container b {
    background: linear-gradient(180deg, #ffd700, #b8860b);
    color: #000;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

/* Efecto al pasar el mouse */
.k-pagination-container a:hover {
    background: rgba(255, 215, 0, 0.2);
    border-color: #ffd700;
    color: #ffd700;
}

/* --- ESTILO DE LAS NOTICIAS CON ICONO --- */
.news-item-link {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 12px;
    text-decoration: none;
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.news-item-link:hover {
    background: rgba(230, 126, 34, 0.08); /* Fondo naranja muy sutil al pasar el mouse */
    border-color: rgba(230, 126, 34, 0.3);
    transform: translateX(5px); /* Se mueve un poquito a la derecha */
}

/* Contenedor del Icono con Brillo */
.news-icon-container {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    border: 1px solid rgba(230, 126, 34, 0.4);
    box-shadow: 0 0 15px rgba(230, 126, 34, 0.15); /* Brillo naranja sutil */
    overflow: hidden;
    margin-right: 15px;
    flex-shrink: 0;
}

.news-img-fixed {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Esto evita que la imagen grande se estire */
    display: block;
}

.news-title-text {
    color: #fff !important;
    font-size: 13px !important;
    margin: 0 0 4px 0 !important;
    font-weight: 600 !important;
}

.news-meta-text {
    font-size: 10px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 10px;
}

.news-tag {
    color: #e67e22;
    font-weight: bold;
    background: rgba(230, 126, 34, 0.15);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid rgba(230, 126, 34, 0.3);
    text-transform: uppercase;
}

/* Efecto Crystal para la Paginación (Sugerencia) */
.k-pagination-container b {
    background: linear-gradient(135deg, #ffd700, #b8860b) !important;
    color: #000 !important;
    border-radius: 50% !important; /* Ahora son círculos */
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

/* =========================================================
   ICONO FLOTANTE DE DISCORD (ESTILO KAIZEN)
   ========================================================= */

.discord-float {
    position: fixed; /* Lo mantiene flotando en la pantalla */
    bottom: 30px; /* Separación desde abajo */
    right: 30px; /* Separación desde la derecha */
    z-index: 10000; /* Asegura que esté por encima de todo el contenido */
    
    display: flex;
    align-items: center;
    justify-content: center;
    
    width: 65px; /* Tamaño del contenedor */
    height: 65px;
    
    background: rgba(10, 10, 18, 0.8); /* Fondo oscuro cristalino */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borde sutil */
    border-radius: 50%; /* Lo hace circular */
    
    backdrop-filter: blur(5px); /* Efecto blur detrás */
    
    /* Brillo sutil inicial */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1), inset 0 0 10px rgba(0,0,0,0.5);
    
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Animación suave */
    text-decoration: none !important;
}

/* Imagen dentro del flotante */
.discord-icon {
    width: 35px; /* Tamaño del icono */
    height: auto;
    display: block;
    image-rendering: -webkit-optimize-contrast;
}

/* EFECTOS HOVER (PASAR EL MOUSE) */
.discord-float:hover {
    transform: scale(1.1) translateY(-5px); /* Crece y sube un poco */
    
    /* CAMBIO A BRILLO DORADO KAIZEN */
    background: rgba(10, 10, 18, 1);
    border-color: rgba(255, 215, 0, 0.4);
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.3), inset 0 0 10px rgba(0,0,0,0.7);
}

/* Responsividad para móviles (para que no estorbe tanto) */
@media (max-width: 768px) {
    .discord-float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
    }
    .discord-icon {
        width: 25px;
    }
}

/* =========================================================
   REFINAMIENTO: CRYPTO CASTLE SIEGE TEXT
   ========================================================= */

/* Aumentamos el tamaño general del texto en la caja */
.crypto-siege-box .k-widget-content {
    font-size: 16px !important; /* Tamaño más cómodo para leer */
    line-height: 1.8 !important; /* Más espacio entre líneas */
    color: #eee !important;
    text-align: center;
}

/* Si tienes etiquetas de título dentro (como "Prize Pool:" o "Timer:") */
.crypto-siege-box b, 
.crypto-siege-box strong {
    font-size: 17px !important;
    color: #f1c40f !important; /* Color dorado para resaltar los títulos */
    text-transform: uppercase;
}

/* Efecto especial para el valor del premio (LTC) */
.crypto-siege-prize {
    font-size: 22px !important; /* El premio tiene que ser lo más grande */
    font-weight: 900 !important;
    color: #00ffcc !important; /* Un color cyan/cripto brillante */
    text-shadow: 0 0 10px rgba(0, 255, 204, 0.4);
    display: block;
    margin-top: 10px;
}

/* Ajuste para el contador/timer si lo tienes dentro */
#siege-timer {
    font-family: 'Courier New', Courier, monospace; /* Fuente tipo digital */
    font-size: 24px !important;
    color: #e74c3c !important; /* Rojo para la urgencia del tiempo */
    letter-spacing: 2px;
}

/* --- TARJETAS DEL PANEL DE CUENTA (UCP) --- */
.ucp-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.3s ease;
    min-height: 100px;
}

.ucp-card p {
    color: #f1c40f; /* Título en Dorado */
    font-weight: bold;
    font-size: 14px;
    margin: 0 0 5px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ucp-card span {
    color: #777;
    font-size: 11px;
    line-height: 1.3;
}

.ucp-card:hover {
    background: rgba(155, 89, 182, 0.1); /* Fondo morado sutil */
    border-color: rgba(155, 89, 182, 0.4);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.4), 0 0 15px rgba(155, 89, 182, 0.2);
}

.ucp-card:hover p {
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.ucp-card:hover span {
    color: #bbb;
}

/* =========================================================
   ESTILOS PREMIUM PARA EL SIDEBAR ACCOUNT (POR DUKE)
   ========================================================= */

/* Estilo de la Lista Compacta de Opciones */
.k-ucp-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 12px;
    border-radius: 6px;
    background: rgba(0,0,0,0.2); /* Fondo sutil para agrupar */
    border: 1px solid rgba(255,255,255,0.03);
    overflow: hidden;
}

.k-ucp-list li {
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.k-ucp-list li:last-child {
    border-bottom: none;
}

.k-ucp-list a {
    display: block;
    padding: 10px 15px;
    color: #bbb;
    text-decoration: none;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Efecto Hover: Brillo Oro y Púrpura sutil */
.k-ucp-list a:hover {
    color: #ffd700 !important;
    background: rgba(155, 89, 182, 0.1); /* Toque morado suave */
    padding-left: 20px; /* Pequeño movimiento */
    text-shadow: 0 0 8px rgba(255,215,0,0.4);
}

/* Botones Unificados del Panel (Panel, Shop, Exit) */
.k-btn-panel-action {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    color: #fff;
    text-decoration: none !important;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.k-btn-panel-action:hover {
    transform: translateY(-2px);
    filter: brightness(1.2);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* =========================================================
   SISTEMA DE TIENDA VIP KAIZEN
   ========================================================= */

.vip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 25px;
    width: 100%;
}

.vip-package-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.vip-package-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(241, 196, 15, 0.3);
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.6);
}

/* Etiquetas de Precio */
.vip-price-tag {
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 20px;
    padding: 10px 20px;
    border-radius: 8px;
    background: rgba(0,0,0,0.3);
}

.glow-green { 
    color: #2ecc71; 
    text-shadow: 0 0 15px rgba(46, 204, 113, 0.5); 
}

.glow-gold { 
    color: #ffd700; 
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5); 
}

/* Títulos y Moneda */
.vip-title {
    color: #fff;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.vip-currency {
    color: #888;
    font-size: 12px;
    margin-bottom: 25px;
}

/* Botón de Selección */
.vip-select-btn {
    width: 100% !important;
    height: 45px !important;
    font-size: 14px !important;
    border: none;
    cursor: pointer;
}

/* Efecto de destello en la card */
.vip-package-card::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.05), transparent);
    transition: 0.5s;
}

.vip-package-card:hover::before {
    left: 100%;
}

.donate-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    width: 100%;
}

.donate-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 25px;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.donate-card:hover {
    background: rgba(52, 152, 219, 0.05);
    border-color: rgba(52, 152, 219, 0.3);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.4);
}

.donate-pkg-name {
    color: #888;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.donate-reward {
    font-size: 32px;
    font-weight: 900;
    color: #2ecc71; /* Verde esmeralda para los créditos */
    text-shadow: 0 0 15px rgba(46, 204, 113, 0.3);
    margin-bottom: 5px;
}

.donate-reward small {
    display: block;
    font-size: 12px;
    color: #fff;
    opacity: 0.7;
    text-transform: uppercase;
}

.donate-price {
    background: rgba(0,0,0,0.3);
    padding: 5px 15px;
    border-radius: 20px;
    color: #ffd700; /* Dorado para el precio */
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,0.05);
}

.donate-btn {
    width: 100% !important;
    height: 40px !important;
    font-size: 12px !important;
    cursor: pointer;
}

.kaizen-sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px; /* Espacio entre botones */
}

.kaizen-sidebar-menu li a {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.03); /* Fondo casi invisible */
    border-left: 3px solid rgba(155, 89, 182, 0.3); /* Borde morado sutil a la izquierda */
    border-radius: 4px;
    color: #aaa;
    text-decoration: none;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.kaizen-sidebar-menu li a i {
    margin-right: 12px;
    font-size: 14px;
    width: 20px;
    text-align: center;
    color: rgba(155, 89, 182, 0.6); /* Icono color morado */
    transition: all 0.3s ease;
}

/* EFECTO HOVER (Al pasar el mouse) */
.kaizen-sidebar-menu li a:hover {
    background: rgba(155, 89, 182, 0.15); /* Se ilumina el fondo */
    color: #fff;
    border-left: 3px solid #9b59b6; /* El borde morado brilla */
    padding-left: 22px; /* Pequeño desplazamiento a la derecha */
    box-shadow: inset 0 0 10px rgba(155, 89, 182, 0.2);
}

.kaizen-sidebar-menu li a:hover i {
    color: #f1c40f; /* El icono cambia a dorado al hacer hover */
    transform: scale(1.2); /* El icono crece un poco */
    text-shadow: 0 0 10px rgba(241, 196, 15, 0.5);
}

/* ============================================================
   KAIZEN VOTE REWARD - FIX FINAL DE ESTABILIDAD
   ============================================================ */

/* 1. Contenedor de cada bloque de voto */
#vote_links #vote-options {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 25px 0 !important; /* Espacio generoso entre filas */
}

/* 2. La Fila (Contenedor de cristal) */
#vote_links #vote-options li {
    display: flex !important;
    align-items: center !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 20px !important;
    border-radius: 12px !important;
    min-height: 100px !important; /* Altura fija para evitar que se mueva */
    backdrop-filter: blur(10px);
    transition: 0.3s ease;
}

#vote_links #vote-options li:hover {
    border-color: rgba(241, 196, 15, 0.4) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* 3. La Imagen del Top */
#vote_links #vote-options li img {
    width: 80px !important;
    height: auto !important;
    border-radius: 6px;
    flex-shrink: 0; /* Evita que la imagen se achique */
}

/* 4. Título y Contenedor de Texto */
#vote_links #vote-options li h5 {
    color: #fff !important;
    font-family: 'Cinzel', serif !important;
    font-size: 17px !important;
    margin: 0 25px !important; /* Espacio entre imagen y botón */
    flex-grow: 1; /* Esto empuja el botón a la derecha */
    text-align: left !important;
}

/* 5. EL BOTÓN (Fijo para el contador de validación) */
#vote_links .custom_button {
    margin-left: auto !important;
    height: 45px !important;
    width: 160px !important; /* ANCHO FIJO: Crucial para que el contador no mueva nada */
    min-width: 160px !important;
    cursor: pointer !important;
    font-weight: bold !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    border-radius: 6px !important;
    border: 1px solid #f39c12 !important;
    background: linear-gradient(180deg, #f1c40f 0%, #e67e22 100%) !important;
    color: #000 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.4) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: 0.2s ease-in-out !important;
}

/* Estado del botón cuando sale la cuenta regresiva */
#vote_links .custom_button:disabled {
    background: #111 !important;
    color: #f1c40f !important; /* El contador resaltará en dorado */
    border: 1px solid #333 !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

/* Fix para que los botones de votado se vean iguales */
#vote_links .custom_button[data-info="voted"] {
    background: #1a1a1a !important;
    color: #666 !important;
    border-color: #333 !important;
}

/* --- MU AMERIKA: CENTRADO TOTAL Y EFECTO GLOW --- */


/* ============================================================
   MÉTODO INFALIBLE: NÚMEROS ARRIBA, TÍTULO ABAJO
   ============================================================ */

/* Contenedor principal: Un bloque simple y limpio */
.mu-countdown-main {
    display: block !important; 
    width: 100% !important;
    margin-top: 40px !important; /* Espacio desde los botones */
    text-align: center !important; 
    position: relative !important;
    z-index: 10;
    clear: both !important;
}

/* La Grilla de Números (Aparecerá primero) */
.mu-timer-grid {
    display: flex !important;
    flex-direction: row !important; /* Mantiene los números en línea horizontal */
    justify-content: center !important;
    align-items: center !important;
    gap: 40px !important;
    width: 100% !important;
    margin-bottom: 20px !important; /* Espacio entre los números y el título de abajo */
}

/* Cada Caja de Número */
.mu-timer-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Los Números Gigantes y Blancos */
.mu-num-glow {
    font-size: 75px !important; 
    font-weight: 900 !important;
    color: #FFFFFF !important; 
    line-height: 1 !important;
    display: block !important;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.8), 
                 0 0 30px rgba(255, 255, 255, 0.4), 
                 0 0 45px rgba(255, 255, 255, 0.2) !important;
}

/* Las palabras (Days, Hours) */
.mu-label-gold {
    color: #f1c40f !important;
    font-family: 'Cinzel', serif !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    margin-top: 10px !important;
    letter-spacing: 2px !important;
}

/* El Título (Aparecerá abajo) */
.mu-timer-title {
    display: block !important; 
    width: 100% !important;
    color: #f1c40f !important;
    font-family: 'Cinzel', serif !important;
    font-size: 22px !important;
    letter-spacing: 4px !important;
    text-shadow: 0 0 15px rgba(241, 196, 15, 0.7) !important;
    text-transform: uppercase !important;
}

/* Ajuste para móviles */
@media (max-width: 768px) {
    .mu-timer-grid { gap: 15px !important; }
    .mu-num-glow { font-size: 35px !important; }
    .mu-timer-title { font-size: 16px !important; }
}

/* =========================================
   POPUP GRAND OPENING
   ========================================= */
.promo-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none; /* Oculto por defecto */
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Clase para activar la animación de entrada */
.promo-modal-overlay.show {
    opacity: 1;
}

.promo-modal-box {
    background: #1e1e24; /* Color de fondo oscuro */
    border: 2px solid #e67e22;
    border-radius: 10px;
    padding: 30px;
    max-width: 450px;
    text-align: center;
    color: #fff;
    box-shadow: 0 0 20px rgba(230, 126, 34, 0.5);
    position: relative;
    transform: scale(0.8);
    transition: transform 0.3s ease;
}

.promo-modal-overlay.show .promo-modal-box {
    transform: scale(1);
}

.promo-modal-close {
    position: absolute;
    top: 10px; right: 15px;
    color: #aaa;
    font-size: 24px;
    cursor: pointer;
    transition: color 0.3s;
}

.promo-modal-close:hover {
    color: #fff;
}

.promo-title {
    color: #e67e22;
    margin-top: 0;
}

.promo-buttons {
    margin-top: 20px;
}

.promo-btn {
    display: inline-block;
    margin: 10px 5px;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    color: #fff;
    transition: background 0.3s;
}

.btn-register { background: #e67e22; }
.btn-register:hover { background: #d35400; }
.btn-discord { background: #5865F2; }
.btn-discord:hover { background: #4752C4; }

/* ============================================================
   ESTILOS PARA EL POP-UP DE GRAN APERTURA - MU AMERIKA
   ============================================================ */

/* 1. Fondo oscurecido (Overlay) */
.mu-modal-overlay {
    display: none; /* Se controla por JavaScript */
    position: fixed;
    z-index: 99999; /* Prioridad máxima sobre otros elementos */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Fondo negro traslúcido */
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px); /* Efecto de desenfoque al fondo */
}

/* 2. Caja del contenido (Modal) */
.mu-modal-content {
    background: #0b0b0b;
    border: 2px solid #e67e22; /* Color naranja principal */
    box-shadow: 0 0 30px rgba(230, 126, 34, 0.5);
    width: 90%;
    max-width: 500px;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    position: relative;
    animation: muZoomIn 0.3s ease-out;
}

/* Animación de entrada */
@keyframes muZoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* 3. Botón de cerrar (X) */
.mu-close-btn {
    position: absolute;
    right: 15px;
    top: 10px;
    color: #888;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.mu-close-btn:hover {
    color: #fff;
}

/* 4. Título del Pop-up */
.mu-modal-title {
    color: #e67e22;
    margin: 0 0 15px 0;
    font-size: 26px;
    text-transform: uppercase;
    font-weight: bold;
    text-shadow: 2px 2px 4px #000;
}

/* 5. Contenedor del Contador */
.mu-countdown-container {
    background: rgba(230, 126, 34, 0.05);
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    border: 1px dashed rgba(230, 126, 34, 0.3);
}

#countdown-popup {
    font-family: 'Courier New', Courier, monospace;
    font-size: 45px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 10px #e67e22;
    letter-spacing: 2px;
}

.mu-countdown-label {
    color: #aaa;
    font-size: 13px;
    margin-top: 5px;
    text-transform: uppercase;
}

/* 6. Galería de Imágenes Deslizable */
.mu-popup-gallery {
    width: 100%;
    height: 180px;
    overflow: hidden;
    border: 1px solid #333;
    border-radius: 5px;
    position: relative;
    background: #000;
}

.mu-gallery-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
    height: 100%;
}

.mu-gallery-item {
    min-width: 100%;
    position: relative;
}

.mu-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta la imagen sin deformarla */
}

.mu-gallery-caption {
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    color: #e67e22;
    width: 100%;
    padding: 8px;
    font-size: 13px;
    font-weight: bold;
    border-top: 1px solid #e67e22;
}

/* 7. Botón de Acción (Call to Action) */
.mu-btn-register {
    display: inline-block;
    background: #e67e22;
    color: #fff !important;
    padding: 12px 30px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    margin-top: 20px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
}

.mu-btn-register:hover {
    background: #d35400;
    box-shadow: 0 0 15px rgba(230, 126, 34, 0.7);
    transform: translateY(-2px);
}

/* --- ESTILOS PARA VER IMAGEN EN GRANDE (LIGHTBOX) --- */
.mu-lightbox {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 999999; /* Por encima de todo, incluso del primer modal */
    left: 0; top: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.9);
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}

.mu-lightbox img {
    max-width: 90%;
    max-height: 90%;
    border: 3px solid #e67e22;
    box-shadow: 0 0 20px #000;
    animation: muFadeIn 0.3s ease;
}

.mu-zoomable {
    cursor: zoom-in; /* Cambia el puntero para indicar que es clicable */
    transition: transform 0.3s ease;
}

.mu-zoomable:hover {
    filter: brightness(1.2);
}

@keyframes muFadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}