@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}


#intro-hero {
    position: fixed;
    inset: 0;
    height: 100vh;
    z-index: 10;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.intro-kick {
    position: fixed;
    bottom: 24px;
    left: 24px;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    will-change: transform, opacity;
}

.kick-btn-hero {
    background: black;
    padding: 4px 0px;
    border-radius: 4px;
    filter: drop-shadow(0 0 15px rgba(0, 128, 0, 0.925));
    transition: all .2s;
}

.kick-btn-hero:hover,
.wsp-btn-hero:hover,
.yt-btn-hero:hover,
.ig-btn-hero:hover {
    transform: scale(1.2);
}

.yt-btn-hero {
    color: #FF0000;
    filter: drop-shadow(0 0 15px #FF0000);
    transition: all .2s;
    font-size: 32px;
}

.ig-btn-hero {
    background: -webkit-linear-gradient(180deg, #405de6, #833ab4, #e1306c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 15px #0d9484);
    transition: all .2s;
    font-size: 32px;
}

.wsp-btn-hero {
    color: #0d9484;
    filter: drop-shadow(0 0 15px #0d9484);
    transition: all .2s;
    font-size: 32px;
}

/* VIDEO FULLSCREEN */
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* CONTENIDO POR ENCIMA */
.intro-logo,
.scroll-indicator {
    position: relative;
    z-index: 2;
}

a header {
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(80px);
}

.intro-spacer {
    height: 100vh;
    /* le da scroll real para animar */
}

.intro-logo {
    will-change: transform, opacity;
    filter: drop-shadow(0 0 15px #000);
    animation: scalelogo 5s infinite;
}

.intro-title {
    will-change: transform, opacity;
    font-family: "Cinzel", serif;
    font-size: 48px;
    color: #ffa600;
    margin-top: 10px;
}

.scroll-indicator {
    position: absolute;
    color: white;
    bottom: 30px;
    text-align: center;
    cursor: pointer;
    animation: bounce 1.5s infinite;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(10px);
    }
}

@keyframes scalelogo {

    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 10px #000);
    }

    50% {
        transform: scale(1.2);
        filter: drop-shadow(0 0 20px orange);
    }
}


body {
    background: url(../img/bgh.jpg) no-repeat;
    background-size: contain;
    background-color: #080A0B !important;
}


nav {
    background: linear-gradient(180deg, black 10%, transparent);
}

.logo-header {
    filter: drop-shadow(0px 0px 10px rgb(0, 0, 0));
}

.navbar-nav .nav-item .nav-link {
    font-family: "Open Sans", sans-serif;
    color: #FFF;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    transition: .2s color ease-out;
    text-decoration: none;
    margin-inline: 16px;
}

.navbar-nav .nav-item .nav-link:hover {
    color: rgb(255, 166, 0);
}

.nav-lang {
    font-size: 1rem;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-family: "Open Sans", sans-serif;
    margin-inline: 8px;
}

.form-select {
    background: none !important;
    border: 0px !important;
    border-right: 1px solid white !important;
    border-radius: 0 !important;
    color: white !important;
    margin: 0 !important;
    padding: 0 12px 0 0 !important;
    width: initial !important;
}

.form-select:focus,
.form-select:focus-visible {
    box-shadow: none !important;
}

.form-select option {
    background: black;
}


.header-title {
    font-family: "Cinzel", serif;
    text-transform: uppercase;
    color: rgb(255, 166, 0);
    font-size: 48px;
    filter: drop-shadow(0px 0px 10px orange);
}

.header-desc {
    font-family: "Bebas Neue", sans-serif;
    color: #f7f7f7bd;
    text-align: center;
    font-size: 20px;
}

.discord-btn {
    background: rgba(255, 255, 255, 0.185);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(7.4px);
    -webkit-backdrop-filter: blur(7.4px);
    border: 2px solid rgb(255, 166, 0);
    font-size: 16px;
    text-decoration: none;
    font-weight: bold;
    color: #ffffffdc;
    font-family: "Open Sans", sans-serif;
    transition: all .3s ease-out;
    padding: 8px 12px;
    border-radius: 6px;
    filter: drop-shadow(0px 0px 3px black);
}

.discord-btn:hover {
    color: white;
    transform: scale(1.1);
}

.download-btn {
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    color: white;
    text-transform: uppercase;
    font-family: "Cinzel", serif;
    background: linear-gradient(180deg, rgba(255, 166, 0, 0.356), #63e700);
    transition: all .3s ease-out;
}

.download-btn:hover {
    transform: scale(1.1);
    margin: 2px;
    border-radius: 0;
}

.btn-login,
.btn-register {
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    margin-right: 2px;
    transition: all .2s ease;
}

.btn-login {
    color: rgb(206, 203, 203);
    border: 1px solid rgb(206, 203, 203);
}

.btn-login:hover {
    color: white;
    border: 1px solid white;
}

.btn-register {
    color: white;
    background: linear-gradient(331deg, rgba(255, 166, 0, 0.356), #63e700);
}

.btn-register:hover {
    transform: scale(1.1);
    font-weight: bold;
}

.header-card {
    background: rgba(8, 10, 11, 0.33);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: white !important;
    margin-block: 12px;
    padding: 16px 72px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    transition: all .2s ease-out;
}

.header-card:hover {
    transform: scale(1.1);
}

.dot-color {
    width: 6px;
    height: 6px;
    background-color: rgb(255, 166, 0);
    border-radius: 100%;
}


.fa-angles-down {
    animation-name: float;
    animation-duration: 1s;
    /* Duration of one cycle */
    animation-iteration-count: infinite;
    /* Makes it loop forever */
    animation-timing-function: ease-in-out;
    /* Smooths the start and end */
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0px);
    }
}

.news-title {
    background: -webkit-linear-gradient(331deg, rgba(255, 166, 0, 0.692), #63e700);
    -webkit-background-clip: text;
    font-size: 48px !important;
    -webkit-text-fill-color: transparent;
    font-weight: bold;
    letter-spacing: 2px;
}

.btn-viewnews {
    border: 1px solid rgb(255, 166, 0);
    color: #ffa600;
    border-radius: 6px;
    padding: 6px 18px;
    text-decoration: none;
    transition: all .2s;
}

.btn-viewnews i {
    transition: all .2s;
}

.btn-viewnews:hover i {
    transform: translateX(4px);
}

.content-img {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #ffa6005b;
}

.content-img img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    transition: transform 0.5s ease;
}

.text-img {
    border-radius: 0px 0px 8px 8px;
    border-top: none;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    bottom: 0%;
    color: white;
    font-family: 'Open Sans', sans serif;
    padding: 10px 20px;
    font-size: 24px;
    width: 100%;
}

.btn-morenews {
    color: #ffa600 !important;
    text-decoration: none;
    font-size: 14px;
    font-family: 'Open Sans', sans serif;
    text-transform: uppercase;
    font-weight: bold;
}

.nw-hover {
    text-decoration: none;
    color: white;
}

.nw-hover:hover .content-img img {
    transform: scale(1.1);
}

.nw-hover .fa-angle-right {
    transition: all .2s ease;
}

.nw-hover:hover .fa-angle-right {
    transform: translateX(4px);
}

.minicard-news {
    border: 1px solid #ffa6005b;
    border-radius: 6px;
}

.minicard-news img {
    width: 100%;
    border-radius: 6px 6px 0px 0px;
}

/* NAVBAR BASE */
.navbar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    opacity: 0;
    pointer-events: none;
    transform: translateY(-20px);

    transition:
        opacity 0.4s ease,
        transform 0.4s ease,
        padding 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;

    padding: 24px 0;
    z-index: 20;
}

.navbar.nav--visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* LOGO */
.navbar img {
    transition: width 0.35s ease;
}

/* ESTADO SCROLL */
.navbar.nav--scrolled {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(8, 10, 11, 0.85);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, .4);
    padding: 10px 0;
}


/* LOGO CHICO */
.navbar.nav--scrolled .img-resize-scroll {
    width: 96px !important;
}

body.has-sticky-nav {
    padding-top: 80px;
}

/* MEDIA QUERY PARA MÓVILES */
@media (max-width: 768px) {
    body.has-sticky-nav {
        padding-top: 64px;
        /* navbar más chica en móviles */
    }

    .navbar.nav--scrolled {
        padding: 8px 0;
    }

    .navbar-nav .nav-link {
        font-size: 14px;
        margin-inline: 8px;
    }

    .form-select.nav-lang {
        font-size: 0.9rem;
    }
}

.navbar-toggler-icon {
    filter: invert(1) !important;
    border: white !important;
}

.ranking-section {
    height: 50vh;
    background: url('../img/bgrank.jpeg') no-repeat;
    background-size: cover;
    box-shadow: inset 0 0 20px 10px black;
}

.footer-t {
    font-family: 'Cinzel', sans-serif;
    background: -webkit-linear-gradient(331deg, rgba(255, 166, 0, 0.692), #63e700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

footer ul li::marker {
    color: rgba(255, 166, 0, 0.692) !important;
}

footer ul li a {
    text-decoration: none;
    color: rgb(206, 203, 203);
    transition: all .2s;
}

footer ul li a:hover {
    color: rgba(255, 166, 0, 0.692);
    margin-left: 4px;
}

footer .btn-instagram,
footer .btn-discord,
footer .btn-tiktok,
footer .btn-kick {
    padding: 8px;
    color: rgb(206, 203, 203);
    text-decoration: none;
    border-radius: 4px;
    border: 4px solid #080A0B;
    transition: all .2s;
}

footer .btn-instagram:hover {
    background: rgba(255, 0, 170, 0.384);
    border: 4px solid rgba(255, 0, 170, 0.384);
}

footer .btn-discord:hover {
    background: #7289da91;
    border: 4px solid #7289da91;
}

footer .btn-tiktok:hover {
    background: #ff005163;
    border: 4px solid #ff005163;
}

footer .btn-kick:hover {
    background: linear-gradient(90deg, #00e701, black);
    border: 4px solid #00e701;
    color: #000;
}

.about-title {
    font-family: 'Cinzel', sans-serif;
    color: white;
}

.separator-ft {
    display: flex;
    align-items: center;
    padding: 1px;
}

.separator-ft .separator-body {
    background: linear-gradient(90deg, transparent, #ab8103, transparent);
    margin: 0 auto;
    width: 100%;
    padding: 1px 10%;
    filter: drop-shadow(2px 4px 6px #ab8103);
}

.card-about {
    position: relative;
    width: 260px;
    padding-top: 70px;
    background: linear-gradient(180deg, #1a0f08, #0b0603);
    border: 1px solid rgba(255, 170, 80, 0.35);
    border-radius: 14px;
    box-shadow:
        0 0 25px rgba(255, 120, 40, 0.15),
        inset 0 0 30px rgba(255, 180, 90, 0.05);
    text-align: center;
    font-family: 'Cinzel', serif;
    overflow: visible;
    transition: all .3s ease;
}

/* IMAGEN QUE SOBRESALE */
.card-img {
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    filter: drop-shadow(0 15px 25px rgba(255, 80, 0, 0.6));
    transition: all .3s ease;
}

.card-img img {
    width: 160px;
    pointer-events: none;
    transition: all .3s ease;
}

/* CONTENIDO */
.card-content {
    padding: 20px 15px 22px;
}

.card-content h4 {
    font-size: 15px;
    color: #ffcf8b;
    letter-spacing: 1px;
    margin: 0;
    text-shadow: 0 0 10px rgba(255, 180, 90, 0.6);
}

.card-content span {
    display: block;
    margin-top: 6px;
    font-size: 18px;
    color: #ff7a1a;
    font-weight: bold;
    text-shadow:
        0 0 12px rgba(255, 120, 40, 0.9),
        0 0 25px rgba(255, 80, 20, 0.6);
    transition: all .3s ease;
}

.card-about::before {
    content: "\2726"; /* ✦ */
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    color: #ff9c3a;
    font-size: 22px;
    text-shadow: 0 0 12px rgba(255, 140, 60, 0.8);
}


.card-about:hover img {
    transform: translateY(-5%);
}

.card-about:hover {
    transform: scale(1.3);
}

.lang-select {
    position: relative;
    width: 120px;
    font-family: 'Cinzel', serif;
    cursor: pointer;
}

.lang-select .selected {
    background: linear-gradient(180deg, #2b1a0e, #140b05);
    border: 1px solid #c9a35c;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #f5d78c;
}

.lang-select img {
    width: 22px;
    height: 14px;
    border-radius: 2px;
}

.lang-select .options {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #140b05;
    border: 1px solid #c9a35c;
    display: none;
    z-index: 99;
    color: white;
    padding-left: initial;
}

.lang-select .options li {
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lang-select .options li:hover {
    background: rgba(201,163,92,0.15);
}


.streambox {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    font-family: 'Cinzel', serif;
}

/* BOTÓN */
.streambox-toggle {
    background: linear-gradient(180deg, #2b1a0e, #120905);
    border: 1px solid #c9a35c;
    color: #f5d78c;
    padding: 10px 14px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(201,163,92,.25);
}

.streambox-toggle i {
    color: #ff3b3b;
    animation: pulseLive 1.5s infinite;
}

@keyframes pulseLive {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* PANEL */
.streambox-panel {
    position: absolute;
    bottom: 60px;
    right: 0;
    width: 260px;
    background: #0b0e10;
    border: 1px solid #c9a35c;
    box-shadow: 0 0 40px rgba(0,0,0,.7);
    border-radius: 8px;
    padding: 12px;
    display: none;
}

.streambox-panel h4 {
    color: #f5d78c;
    font-size: 14px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(201,163,92,.3);
    padding-bottom: 6px;
}

/* ITEMS */
.stream-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    text-decoration: none;
    border-radius: 6px;
    margin-bottom: 6px;
    transition: background .2s ease;
}

.stream-item strong {
    color: #fff;
    font-size: 14px;
}

.stream-item span {
    font-size: 12px;
    color: #bdbdbd;
}

.stream-item:hover {
    background: rgba(201,163,92,.12);
}

/* ICONOS */
.stream-item i,
.stream-item img {
    width: 22px;
    height: 22px;
}

/* COLORES PLATAFORMAS */
.stream-item.kick i,
.stream-item.kick span { color: #2dff1f; }

.stream-item.twitch i { color: #9146ff; }
.stream-item.youtube i { color: #ff0000; }

.has-sticky-nav main {
    margin-top: 90px;
}

/* Styles Modules WEBEngine */
/* NEWS MODULE */
.panel-news {
	margin-bottom: 30px;
	color: #333;
	border: 0px;
	background-color: #231313;
    padding: 10px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	-moz-box-shadow: 0 0 0px #e3e3e3;
	-webkit-box-shadow: 0 0 0px #e3e3e3;
	box-shadow: 0 0 0px #e3e3e3;
}

.panel-news .panel-heading {
	padding-top: 10px;
	padding-bottom: 10px;
}
.panel-news .panel-title {
	color: #000000;
	font-size: 24px;
}
.panel-news .panel-body {
	padding: 10px;
	color: #f9f9f9;
}
.panel-news .panel-footer {
	border-top: 1px solid #e7e7e7;
	font-style: italic;
	font-size: 14px;
	height: 40px;
	color: #777;
}

/* MY ACCOUNT MODULE */
.myaccount-table {
	width: 100%;
	background: #f1f1f1;
	border: 1px solid #e3e3e3;
}
.myaccount-table tr td:first-child {
	color: #f9f9f9;
}
.myaccount-table tr td {
	border-bottom: 1px solid #e3e3e3;
	padding: 15px !important;
}
.myaccount-table tr:last-child td {
	border: 0px;
}

/* GENERAL TABLE UI */
.general-table-ui {
	width: 100%;
	table-layout: fixed;
	background: #f1f1f1;
	border: 1px solid #e3e3e3;
	padding: 10px;
	margin: 10px 0px;
}
.general-table-ui tr td {
	padding: 5px;
	vertical-align: middle !important;
}
.general-table-ui tr:first-child td {
	color: #ff0000;
}
.general-table-ui tr:nth-child(2n+2) td {
	background: #fafafa;
}
.general-table-ui tr td {
	text-align: center;
}
.general-table-ui img {
	width: 50px;
	height: auto;
	-moz-box-shadow: 0 0 5px #666;
	-webkit-box-shadow: 0 0 5px #666;
	box-shadow: 0 0 5px #666;
	-moz-border-radius: 0px;
	border-radius: 0px;
}

/* TERMS OF SERVICE PAGE */
.tos_list li {
	color: #aa0000;
	font-size: 18px;
	margin-bottom: 40px;
}
.tos_list li p {
	color: #444;
	text-align: justify;
	text-justify: inter-word;
	text-transform: none;
	padding-right: 35px;
	font-size: 14px;
	font-weight: normal;
}

/* PAYPAL */
.paypal-gateway-container {
	width: 100%;
}

.paypal-gateway-content {
	background: #fef2da;
	border: 3px solid #f79433;
	padding: 15px;
	overflow: auto;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	font-weight: bold;
}

.paypal-gateway-logo {
	width: 100%;
	height: 100px;
	background: #fff9ec url('../img/paypal-logo-200-68.png') no-repeat center;
	background-size: contain;
	margin-bottom: 15px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.paypal-gateway-conversion-rate {
	margin: 0px auto;
	text-align: center;
	color: #000;
	font-size: 18px;
	padding: 10px 0px;
}

.paypal-gateway-form {
	width: 100%;
	margin: 20px auto;
	text-align: center;
}

.paypal-gateway-form div {
	display: inline-block;
	padding: 0px 10px;
	color: #000;
	font-size: 24px;
}

.paypal-gateway-form input[type=text] {
	width: 60px;
	font-size: 24px;
	border: 3px solid #f79433;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	color: #f79433;
}

.paypal-gateway-continue {
	margin: 0px auto;
	text-align: center;
}

.paypal-gateway-continue input[type=submit] {
	background: url('../img/paypal-submit.jpg') no-repeat;
	width: 200px;
	height: 40px;
	border: 0px;
}


.module-requirements {
	font-size: 12px;
	margin-top: 20px;
}


.panel-usercp {
	background: url('../img/usercp_bg.jpg') no-repeat top center;
	background-size: cover;
}

.panel-usercp ul {
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}

.panel-usercp ul li {
    text-align: start;
}

.panel-usercp ul li a {
	color: #444 !important;
	font-weight: bold;
}
.panel-usercp ul li a:active, .panel-usercp ul li a:hover {
	color: #ff0000 !important;
}

.panel-usercp ul li img {
	position: relative;
	top: -2px;
	padding-right: 10px;
}

/* GENERAL PANEL STYLING */
.panel-general {
	margin-bottom: 30px;
	background: #f1f1f1;
	border: 1px solid #e3e3e3;
	-moz-border-radius: 0px;
	border-radius: 0px;
	color: #333;
}

.panel-body .panel-title {
	color: #666;
	font-family: 'PT Sans', sans-serif;
	font-size: 14px;
	border-bottom: 1px solid #e3e3e3;
	margin-bottom: 20px !important;
}

/* ADD STATS MODULE */
.panel-addstats {
	margin-bottom: 30px;
	background: #f1f1f1;
	border: 1px solid #e3e3e3;
	-moz-border-radius: 0px;
	border-radius: 0px;
	color: #333;
}
.panel-addstats .character-avatar img {
	width: 100px;
	height: auto;
	-moz-box-shadow: 0 0 5px #666;
	-webkit-box-shadow: 0 0 5px #666;
	box-shadow: 0 0 5px #666;
	-moz-border-radius: 0px;
	border-radius: 0px;
}
.panel-addstats .character-name {
	color: #666;
	font-family: 'PT Sans', sans-serif;
	font-size: 18px;
	border-bottom: 1px solid #e3e3e3;
	padding: 20px 0px;
	margin-bottom: 20px !important;
}

/* DOWNLOADS */
.downloads-card {
    color: #f9f9f9;
    padding: 10px;
    margin-bottom: 5px;
}

.downloads-card .card {
    border-radius: 0;
    color: #f9f9f9;
    box-shadow: 0px 0px 10px 5px black;
    background-color: #113c43;
}

	.download-description {
		font-size: 11px;
		position: relative;
		top: -7px;
		color: #777;
	}

.online-status-indicator {
	margin-left: 5px;
}

/* WEBENGINE CMS */
.webengine-powered { color: #777 !important; }
.webengine-powered:active, .webengine-powered:hover { color: #ff3214 !important; }

/* LANGUAGE PICKER */
.webengine-language-switcher {
	display: inline-block;
	list-style: none;
	padding: 0px !important;
	margin: 0px !important;
	width: 46px;
	height: 19px;
	overflow: hidden;
	transition: all .3s ease;
}
.webengine-language-switcher:hover {
	width: 400px;
}
	.webengine-language-switcher li {
		display: inline-block;
		list-style-type: none;
		background: #333333;
		padding: 0px 5px 2px 5px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		-khtml-border-radius: 3px;
		transition: all .3s ease;
	}
	.webengine-language-switcher li:hover {
		-webkit-filter: brightness(120%);
		filter: brightness(120%);
	}
	.webengine-language-switcher li a {
		color: #999999;
	}
	.webengine-language-switcher li a:hover {
		color: #ffffff !important;
	}
/* MY ACCOUNT CHARACTER LIST */
.myaccount-character-block {
	background: #333;
	border: 1px solid #666;
	padding: 5px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	display: inline-block;
	margin: 0px auto;
	-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
	.myaccount-character-block img {
		width: 100px;
		height: auto;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		-moz-box-shadow: 0 0 5px #000;
		-webkit-box-shadow: 0 0 5px #000;
		box-shadow: 0 0 5px #000;
		-moz-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}
		.myaccount-character-block img:hover {
			-webkit-filter: brightness(120%);
			filter: brightness(120%);
		}
.myaccount-character-block-location {
	font-size: 12px;
	color: #000;
	margin-bottom: 20px;
	margin-top: 2px;
	line-height: 1.2;
}
.myaccount-character-block-level {
	position: relative;
	top: -77px;
	display: inline-block;
	background: rgba(0,0,0,0.5);
	padding: 0px 5px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	color: #fff;
	font-size: 10px;
}
.myaccount-character-name a {
	color: #000;
	font-size: 16px;
}

/* Notice Module */
#accordionNews .accordion-item {
    margin: 10px 0px;
    --bs-accordion-bg: #231313;
    --bs-accordion-color: #f9f9f9;
    --bs-accordion-border-radius: 0;
    border: 1px solid #231313;
}

#accordionNews .news-readmore {
    color: #f9f9f9;
}

#accordionNews .news-readmore:hover {
    color: #f9f9f9bd!important;
}

#accordionNews .accordion-button {
    color: #f9f9f9;
    box-shadow: black 0px 0px 10px 1px;
    --bs-accordion-btn-bg: #231313;
    --bs-accordion-active-bg: #231313;
}

#accordionNews .notice-date {
    position: absolute;
    right: 50px;
}

#accordionNews .accordion-button:focus {
    border-color: none;
    box-shadow: black 0px 0px 10px 2px;
}

#accordionNews .accordion-button:focus-visible {
    outline: 0;
}

.modules-section .card-module .card-module-body .col-2, 
    .modules-section .card-module .card-module-body .col-lg-2,
    .modules-section .card-module .card-module-body .col-md-4,
    .modules-section .card-module .card-module-body .col-sm-4 
    {
        padding: 0;
    }

/* MQ */

@media screen and (max-width: 768px) {
    .modules-section .card-module {
        max-height: 100%;
        height: initial;
    }
    main {
        background-size: cover;
    }
    .modules-section .card-left, .modules-section .card-right {
        max-height: 100%;
    }
    .footer-socials {
        justify-content: ceter;
    }
    body {
        background: url(../img/muonlinebg.jpg) top no-repeat;
        background-size: initial;
    }
}

.footer-socials {
    justify-content: end;
}
/* RANKINGS MODULE */
.rankings-table {
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
	padding: 1rem 1rem;
    background: #fff;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
}

.rankings-class-image-sidebar {
	width: 25px;
	height: auto;
	-moz-box-shadow: 0 0 5px #666;
	-webkit-box-shadow: 0 0 5px #666;
	box-shadow: 0 0 5px #666;
	-moz-border-radius: 0px;
	border-radius: 0px;
}

.rankings-class-image {
	width: 40px;
	height: auto;
	-moz-box-shadow: 0 0 5px #666;
	-webkit-box-shadow: 0 0 5px #666;
	box-shadow: 0 0 5px #666;
	-moz-border-radius: 0px;
	border-radius: 0px;
}
.rankings-table tr td {
	border-bottom: 1px solid #e3e3e3;
	padding: 10px;
	font-size: 18px;
	vertical-align: middle !important;
	text-align: center;
}
.rankings-table-place {
	color: var(--ColorTemplate);
	font-weight: bold;
	/*font-size: 24px;*/
	text-align: center;
}

.default-char-offline {
    border: 3px solid #D0D0D0;
    vertical-align: middle;
}

.default-char-online {
    border: 3px solid #a5d72c;
    vertical-align: middle;
}

.page-item.active .page-link {
    z-index: 3;
    color: var(--bs-light) !important;
    background-color: var(--ColorTemplate);
    border-color: var(--ColorTemplate);
}

.rankings-table tr:first-child td {
	color: var(--bs-light);
	border-bottom: 3px solid var(--ColorTemplate);
	background: var(--ColorTemplate);
}
.rankings-update-time {
	text-align: right;
	font-size: 11px;
	color: #ccc;
	padding: 10px 0px;
}
.rankings_menu {
	width: 100%;
	overflow: auto;
	text-align: center;
	margin-bottom: 10px;
}
.rankings_menu span {
	width: 100%;
	display: inline-block;
	padding: 10px 0px;
	color: #ccc;
	font-size: 24px;
}
.rankings_menu a {
	display: inline-block;
	width: 160px;
	border: 1px solid var(--ColorTemplate);
	border-left: 7px solid var(--ColorTemplate);
	text-align: center;
	padding: 2px 0px;
	margin: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	color: var(--ColorTemplate);
	background: linear-gradient(to left, transparent 50%, var(--ColorTemplate) 50%);
	background-size: 200%;
	background-position: right;
	transition: background-position 0.5s;
}
.rankings_menu a.active {
	color: #f1f1f1;
	border: 1px solid var(--ColorTemplate);
	border-left: 7px solid var(--ColorTemplate);
	background: var(--ColorTemplate);
}

.rankings_menu a:hover {
	color: var(--bs-light) !important;
    text-decoration: none !important;
	background-position: left;
}

.rankings_guild_logo tr td {
	border: 0px !important;
	padding: 0px !important;
	margin: 0px !important;
}
.rankings-gens-img {
	width: auto !important;
	height: 30px !important;
	border: 0 !important;
	-moz-box-shadow: 0 0 0px #000 !important;
	-webkit-box-shadow: 0 0 0px #000 !important;
	box-shadow: 0 0 0px #000 !important;
	-moz-border-radius: 0px !important;
	border-radius: 0px !important;
}


#RankingGeneral_wrapper table {
    --bs-table-border-color: transparent;
    --bs-table-color-type: #f9f9f9;
    --bs-table-bg: none;
}

#RankingGeneral_wrapper table thead tr {
    filter: drop-shadow(black 2px 4px 6px);
}

#RankingGeneral_wrapper table tbody tr:hover {
    background-color: rgb(46 44 44);
}

#RankingGeneral_wrapper table .text-muted {
    color: #f9f9f9bd!important;
}

#RankingGeneral_wrapper table a {
    color: #f9f9f9!important;
    text-decoration: none;
}

#RankingGeneral_wrapper table a:hover {
    color: #f9f9f9bd!important;
}

/**************TESTTT**********************/
/* RANKINGS FILTER BY CLASS */

.rankings-class-filter {
	display: inline-block;
	list-style-type: none;
	margin: 20px auto;
	padding: 10px 20px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-khtml-border-radius: 10px;
}

	.rankings-class-filter li {
		display: inline-block;
		-moz-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
		margin-bottom: 10px;
	}

.rankings-class-filter-selection {
	display: inline-block;
	text-align: center;
	color: #000000;
	font-size: 11px;
	cursor: pointer;
}

	.rankings-class-filter-selection:hover {
		color: #000000 !important;
	}

	.rankings-class-filter-selection:hover img {
		-webkit-filter: brightness(120%);
		filter: brightness(120%);
	}

.rankings-class-filter-selection img {
	width: 80px;
	height: auto;
	-moz-border-radius: 5%;
	-webkit-border-radius: 5%;
	border-radius: 5%;
	-khtml-border-radius: 5%;
	margin-bottom: 5px;
	-moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.45);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.45);
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.45);
}

/* Colores Market Char */
.RazaSM{
	background-color: rgba(47, 125, 204, 0.1);
	border: 1px solid #2f7dcc;
}
.RazaDK{
	background-color: rgba(204, 47, 47, 0.1);
	border: 1px solid #cc2f2f;
}
.RazaELF{
	background-color: rgba(51, 204, 47, 0.1);
	border: 1px solid #33cc2f;
}
.RazaMG{
	background-color: rgba(113, 47, 204, 0.1);
	border: 1px solid #712fcc;
}
.RazaDL{
	background-color: rgba(204, 158, 47, 0.1);
	border: 1px solid #cc9e2f;
}
.RazaSUM{
	background-color: rgba(191, 47, 204, 0.1);
	border: 1px solid #bf2fcc;
}
.RazaRF{
	background-color: rgba(204, 84, 47, 0.1);
	border: 1px solid #cc542f;
}

.BtnSM{
	background-color: #2f7dcc;
	color: #f1f1f1;
	border: 1px solid #2f7dcc;
}
.BtnSM:hover{
	background-color: rgba(47, 125, 204, 0.1);
	color: #2f7dcc;
	border: 1px solid #2f7dcc;
}

.BtnDK{
	background-color: #cc2f2f;
	color: #f1f1f1;
	border: 1px solid #cc2f2f;
}
.BtnDK:hover{
	background-color: rgba(204, 47, 47, 0.1);
	color: #cc2f2f;
	border: 1px solid #cc2f2f;
}

.BtnELF{
	background-color: #33cc2f;
	color: #f1f1f1;
	border: 1px solid #33cc2f;
}
.BtnELF:hover{
	background-color: rgba(51, 204, 47, 0.1);
	color: #33cc2f;
	border: 1px solid #33cc2f;
}

.BtnMG{
	background-color: #712fcc;
	color: #f1f1f1;
	border: 1px solid #712fcc;
}
.BtnMG:hover{
	background-color: rgba(113, 47, 204, 0.1);
	color: #712fcc;
	border: 1px solid #712fcc;
}

.BtnDL{
	background-color: #cc9e2f;
	color: #f1f1f1;
	border: 1px solid #cc9e2f;
}
.BtnDL:hover{
	background-color: rgba(204, 158, 47, 0.1);
	color: #cc9e2f;
	border: 1px solid #cc9e2f;
}

.BtnSUM{
	background-color: #bf2fcc;
	color: #f1f1f1;
	border: 1px solid #bf2fcc;
}
.BtnSUM:hover{
	background-color: rgba(191, 47, 204, 0.1);
	color: #bf2fcc;
	border: 1px solid #bf2fcc;
}

.BtnRF{
	background-color: #cc542f;
	color: #f1f1f1;
	border: 1px solid #cc542f;
}
.BtnRF:hover{
	background-color: rgba(204, 84, 47, 0.1);
	color: #cc542f;
	border: 1px solid #cc542f;
}