@font-face {
	font-family: FaceYourFears;
	src: url('../fonts/FaceYourFears.ttf');
}

html {
	min-width: 1300px;
	height: 100%;
}

body {
	background: #161616 url('../img/background.jpg') no-repeat top center;
	color: #ffffff;
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	margin: 0;
	height: 100%;
}

a {
	color: #ffffff;
	text-decoration: none;
	-moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}

a:hover {
	color: #ffda8a;
}

img {
	border: 0px;
	transition: all .3s ease;
}
	img:hover {
		-webkit-filter: brightness(120%);
		filter: brightness(120%);
	}

input[type=text], input[type=password], input[type=number] {
	background: #fafafa;
	border: 1px solid #e3e3e3;
	color: #666;
}
input[type=text]:focus, input[type=password]:focus, input[type=number]:focus {
	border: 1px solid #ccc;
}

#header {
	width: 0%;
	min-width: 900px;
	margin: 0px auto;
	overflow: hidden;
	color: #fff;
	padding: 40px 0px;
}

#container {
	width: 1300px;
	height: auto;
	margin: 0px auto;
	padding: 10px 0px;
}

#content {
	width: 100%;
	overflow: auto;
	min-height: 500px;
	padding-top: 20px;
	padding-bottom: 20px;
}

.module-contents {
	background: rgba(0, 0, 0, 0.1);
	padding: 15px 15px 30px 15px;
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 5px;
    -khtml-border-radius: 10px;
	border: 2px solid #ffffff;
	overflow: auto;
	min-height: 800px;
}

.footer {
	font-family: 'Segoe UI', 'Lucida Sans Unicode', 'Lucida Grande', 'Tahoma', 'Arial', 'sans-serif';
	width: 100%;
	font-size: 14px;
	color: #ffffff;
	padding: 20px 0px;
	background: #000000 url('../img/fon-bg-bottom.jpg') no-repeat bottom center;
	overflow: auto;
	border-top: 40px solid #ffffff;
}
	.footer > .footer-container {
		width: 1300px;
		margin: 0px auto;
	}
	.footer-time {
		font-size: 45px;
		color: #ffecb2;
		font-weight: bold;
		position: relative;
		top: -10px;
	}

#navbar {
	background: #000000 url('../img/fon-menu.jpg') center no-repeat;
	width: 100%;
	backdrop-filter: blur(1px);
	border-bottom: 2px solid #000000;
	overflow: auto;
	-moz-box-shadow: 0 0 15px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0 0 15px rgba(0,0,0,0.1);
	box-shadow: 0 0 15px rgba(0,0,0,0.1);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-khtml-border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.9);

}

#navbar ul{
	text-align: center;
	margin: 0px;
	-webkit-padding-start: 0px;
}

#navbar ul li {
	list-style-type: none;
	display: inline-block;
	font-size: 16px;
}

#navbar ul li a {
	display: inline-block;
	color: #ffffff !important;
	text-decoration: none;
	padding: 20px 30px;
	transition: all .3s ease;
	text-transform: uppercase;	
	
}

#navbar ul li a:active, #navbar ul li a:focus, #navbar ul li a:hover {
	color: #1b5e9d !important;
	text-decoration: none;
}

/* CASTLE SIEGE BANNER */
.castle-siege-banner {
	width: 100%;
	background: #000 url('../img/castle_siege_banner_bg.jpg') no-repeat center center;
	background-size: cover;
	margin: 0px auto -5px auto;
	padding: 15px;
	-moz-box-shadow: 0 0 10px #000;
	-webkit-box-shadow: 0 0 10px #000;
	box-shadow: 0 0 10px #000;
	overflow: auto;
	color: #fff;
	-webkit-border-radius: 5px 5px 0px 0px;
    -moz-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
    -khtml-border-radius: 5px 5px 0px 0px;
}
.cs-timeleft { font-size: 32px; color: #fff; }
.cs-timeleft span { color: #ff0000; }
.castle-siege-banner-guildlogo {
	background: #000000;
	display: inline-block;
	border: 1px solid #555;
	padding: 5px;
	-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -khtml-border-radius: 10px;
	-moz-box-shadow: 0 0 5px #000;
	-webkit-box-shadow: 0 0 5px #000;
	box-shadow: 0 0 5px #000;
}
.castle-siege-banner-title {
	font-size: 12px;
	text-transform: uppercase;
	font-weight: bold;
	color: #d4a6ff;
	text-shadow: 1px 1px 2px #000000; 
}
.castle-siege-banner-castleowner, .castle-siege-banner-castleowner a {
	font-family: FaceYourFears;
	font-size: 35px;
	text-shadow: 1px 1px 4px #000000; 
	color: #fff;
}
.castle-siege-banner-countdown {
	font-family: FaceYourFears;
	font-size: 32px;
	text-shadow: 0px 0px 3px #000000; 
}
	.castle-siege-banner-countdown span { color: #ba70ff; }

.admincp-button { position:absolute; top:10px; right:10px; }

.page-title {
	color: #000000;
	background: rgba(255, 255, 255, 0.8);
	font-family: 'Lato', sans-serif;
	font-size: 32px;
	margin-bottom: 20px;
	font-weight: bold;
	text-align: center;
}

/* NEWS MODULE */
.panel-news {
	background: rgba(0, 0, 0, 0.1);
	margin-bottom: 30px;
	color: #ffffff;
	border: 0px;
	-moz-box-shadow: 0 0 10px #f1f1f1;
	-webkit-box-shadow: 0 0 10px #f1f1f1;
	box-shadow: 0 0 10px #f1f1f1;
}
.panel-news .panel-heading {
	background: rgba(255, 255, 255, 0.8);
	padding-top: 20px;
	padding-bottom: 20px;
	border-bottom: 1px #5d8ec9;
}
.panel-news .panel-title {
	background: rgba(0, 0, 0, 0.0);
	color: #000000;
	font-family: 'Lato', sans-serif;
	font-size: 18px;
	font-weight: bold;
}
.panel-news .panel-footer {
	border-top: 1px #5d8ec9;
	background: rgba(255, 255, 255, 0.8);
	font-style: italic;
	font-size: 11px;
	height: 40px;
	color: #000000;
}

/* --- RANKINGS MODULE (VERSIÓN ÉPICA MEJORADA) --- */
.rankings-table {
    width: 95% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 20px auto !important;
    background: rgba(0, 0, 0, 0.7) !important; 
    border: 2px solid #2a5275 !important;
    border-radius: 5px !important;
    box-shadow: 0 0 15px rgba(0, 162, 255, 0.3) !important;
}

.rankings-class-image {
	width: 30px;
	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 {
    padding: 15px !important;
    font-size: 18px !important;
    color: #ffffff !important;
    font-family: 'FaceYourFears', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    border-bottom: 1px solid rgba(42, 82, 117, 0.5) !important;
    text-shadow: 0 0 8px rgba(0, 162, 255, 0.5) !important;
    text-align: center !important;
    vertical-align: middle !important;
}

.rankings-table-place {
	color: #666;
	font-weight: bold;
	font-size: 24px;
	text-align: center;
}

.rankings-table tr:first-child td {
    background: linear-gradient(to bottom, #1a2a6c, #0d1a38) !important;
    color: #00d4ff !important;
    font-size: 20px !important;
    font-weight: bold !important;
    text-shadow: 0 0 10px #00d4ff !important;
    border-bottom: 3px solid #00d4ff !important;
}

.rankings-table tr td:first-child {
	width: 100px;
}

.rankings-table tr:hover {
    background: rgba(0, 162, 255, 0.2) !important;
}

.rankings-table tr:hover td {
    color: #ffffff !important;
    text-shadow: 0 0 8px #ffffff !important;
}

.rankings-update-time {
	text-align: right;
	font-size: 11px;
	color: #3578b8;
	padding: 10px 0px;
}

.rankings_menu {
	width: 80%;
	overflow: auto;
	text-align: center;
	margin: 0px auto 20px auto;
}
.rankings_menu span {
	width: 100%;
	display: inline-block;
	padding: 10px 0px;
	color: #3578b8;
	font-size: 24px;
}
.rankings_menu a {
	display: inline-block;
    width: 150px;
    height: 48px;
    line-height: 40px;
	border: 2px solid #5d8ec9;
	text-align: center;
	padding: 2px 0px;
	margin: 2px;
	background: rgba(0, 0, 0, 0.1);
	-moz-border-radius: 2px;
	border-radius: 2px;
    color: #5d8ec9;
    text-decoration:none;
	font-weight: bold;
}
.rankings_menu a.active {
	color: #3578b8;
	border-color: #5d8ec9;
}
.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;
}

/* MY ACCOUNT MODULE */
.myaccount-table {
	width: 100%;
	background: #f1f1f1;
	border: 1px solid #e3e3e3;
}
.myaccount-table tr td:first-child { color: #666; font-weight: bold; }
.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; text-align: center;}
.general-table-ui tr:first-child td { color: #5d8ec9; }
.general-table-ui tr:nth-child(2n+2) td { background: #fafafa; }
.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: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -khtml-border-radius: 50%;
}

/* TERMS OF SERVICE PAGE */
.tos_list li { color: #5d8ec9; margin-bottom: 40px; }
.tos_list li p { color: #555; text-align: justify; text-justify: inter-word; text-transform: none; padding-right: 35px; }

/* PAYPAL */
.paypal-gateway-container { width: 100%; border: 2px solid #f79433; }
.paypal-gateway-logo { width: 100%; height: 100px; background: #fff9ec url('../img/paypal-logo-200-68.png') no-repeat center center; margin-bottom: 10px; border-radius: 3px; }
.paypal-gateway-content { background: #fef2da; overflow: auto; }
.paypal-gateway-conversion-rate { margin: 0px auto; text-align: center; color: #000; font-size: 18px; padding: 10px 0px; }
.paypal-gateway-form { width: 100%; margin: 0px auto; text-align: center; padding: 10px 0px; }
.paypal-gateway-form div { display: inline-block; padding: 0px 10px; color: #000; font-size: 18px; }
.paypal-gateway-form input[type=text] { width: 40px; border: 1px solid #f79433; border-radius: 3px; }
.paypal-gateway-continue { margin: 0px auto; text-align: center; padding: 10px 0px; }
.paypal-gateway-continue input[type=submit] { background: url('../img/paypal-submit.jpg') no-repeat; width: 200px; height: 40px; border: 0px; }

/* CASTLE SIEGE CSS */
.csinfo_container {
	background: url('../img/castle_siege.jpg') no-repeat top right;
	background-size: cover;
	width: 100%;
	padding: 20px;
	margin-bottom: 20px;
	border: 1px solid #333;
	box-shadow: 0 0 10px #555;
	border-radius: 10px;
}
.csinfo_content { width: 100%; height: 180px; margin: 10px 0px 0px 10px; display: inline-block; }
.csinfo_glogo { float: left; width: 30%; height: 180px; text-align: center; }
.csinfo_ginfo { float: left; width: 70%; padding: 0px 10px; }
.csinfo_ginfo table { table-layout: fixed; width: 400px; }
.csinfo_ginfo table tr td { padding: 3px 0px; font-size: 20px; color: #fff; }
.csinfo_ginfo table tr td:first-child { color: #9a7e46; }
.csinfo_glist { list-style-type: none; margin: 0px; padding: 0px; }
.csinfo_glist li { float: left; width: 30%; padding: 8px 10px; }
.csinfo_glist li:hover { background: #0d0c0b; }
.module-requirements { font-size: 12px; margin-top: 20px; }

/* SIDEBAR */
.panel-sidebar { background: rgba(0, 0, 0, 0.1); border: 2px solid #ffffff; }
.panel-sidebar > .panel-heading {
	background: url(../img/fon-widget-title.png) top no-repeat;
	color: #000000;
	font-family: 'Lato', sans-serif;
	border: 0px;
	border-bottom: 2px solid #ffffff;
}
.panel-sidebar > .panel-heading > .panel-title { font-weight: bold; }
.panel-usercp { background: rgba(0, 0, 0, 0.1); }
.panel-usercp ul { list-style-type: none; padding: 0px; margin: 0px; }
.panel-usercp ul li { display: table; width: 100%; vertical-align: middle; line-height: 30px; }
.panel-usercp ul li a { color: #ffffff !important; font-weight: bold; }
.panel-usercp ul li a:active, .panel-usercp ul li a:hover { color: #5d8ec9 !important; }
.panel-usercp ul li img { position: relative; top: -2px; padding-right: 10px; }

.sidebar-banner { text-align: center; margin: 20px 0px; border: 0px ; }
.sidebar-banner img {
	border: 2px solid #ffffff;
	border-radius: 5px;
	width: 100%;
	height: auto;
}

/* PANEL SIDEBAR EVENT TIMERS */
.panel-sidebar-events {
	background: #000000 url('../img/panel_events_bg.jpg') no-repeat top center;
	background-size: cover;
	border: 2px solid #ffffff;
}
.panel-sidebar-events > .panel-heading {
	background: #ffffff url('../img/fon-widget-title.png') no-repeat top center;
	color: #000000;
	font-family: 'Lato', sans-serif;
	border: 0px;
	border-bottom: 1px solid #000000;
}
.panel-sidebar-events > .panel-heading > .panel-title { font-weight: bold; }
.panel-sidebar-events > .panel-body { color: #ccc; }
.panel-sidebar-events > .panel-body > .table { margin-bottom: 0px !important; }
.event-schedule-open { color: #00ff00; }
.event-schedule-inprogress { color: #ffff00; }
.panel-sidebar-events .smalltext { font-size: 11px; position: relative; top: -5px; }

/* GENERAL PANEL STYLING */
.panel-general {
	margin-bottom: 30px;
	background: #f1f1f1;
	border: 1px solid #e3e3e3;
	border-radius: 0px;
	color: #333;
}
.panel-body .panel-title {
	color: #666;
	font-family: 'Lato', sans-serif;
	font-size: 14px;
	border-bottom: 1px solid #e3e3e3;
	margin-bottom: 20px !important;
	font-weight: bold;
}

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

.rounded_corners_image { border-radius: 50%; }

/* DOWNLOADS */
.panel-downloads { margin-bottom: 30px; background: #f1f1f1; border: 1px solid #e3e3e3; border-radius: 0px; color: #333; }
.download-description { font-size: 11px; position: relative; top: -7px; color: #777; }
.online-status-indicator { margin-left: 5px; }
.webengine-powered { color: #777 !important; }
.webengine-powered:active, .webengine-powered:hover { color: #ff3214 !important; }

/*fast 1*/
.fast-links-left {
    width: 298px; height: 125px; background: url(../img/fast-links-left.jpg) no-repeat;
    position: relative; display: flex; align-items: center; align-content: center; flex-wrap: wrap;
    padding-left: 30px; border: 0px; border-radius: 5px;
}
.fast-links-left span { display: block; width: 100%; margin-bottom: 4px; font-style: italic; font-size: 30px; font-weight: bold; color: #fff; }
.fast-links-left p { font-size: 13px; font-style: italic; line-height: 1.2; color: #072650; text-shadow: rgba(255, 255, 255, 0.3) 0px 1px; font-weight: 600; }
.fast-links-left:before { content: ""; background: url(../img/hero-links.png) no-repeat; width: 171px; height: 125px; position: absolute; left: 127px; transition: 0.3s; }
.fast-links-left:hover:before { left: 137px; }

/*fast 2*/
.fast-links-center { width: 398px; height: 125px; background: url(../img/fast-links-center.jpg) no-repeat; position: relative; display: flex; align-items: center; align-content: center; flex-wrap: wrap; padding-left: 30px; }
.fast-links-center span { display: block; width: 100%; margin-bottom: 4px; font-style: italic; font-size: 30px; font-weight: bold; color: #fff; }
.fast-links-center p { font-size: 13px; font-style: italic; line-height: 1.2; color: #072650; text-shadow: rgba(255, 255, 255, 0.3) 0px 1px; font-weight: 600; }
.fast-links-center:before { content: ""; background: url(../img/hero-links-center.png) no-repeat; width: 244px; height: 125px; position: absolute; left: 154px; transition: 0.3s; }
.fast-links-center:hover:before { left: 144px; }

/*fast 3*/
.fast-links-right { width: 398px; height: 125px; background: url(../img/fast-links-right.jpg) no-repeat; position: relative; display: flex; align-items: center; align-content: center; flex-wrap: wrap; padding-left: 30px; }
.fast-links-right span { display: block; width: 100%; margin-bottom: 4px; font-style: italic; font-size: 30px; font-weight: bold; color: #fff; }
.fast-links-right p { font-size: 13px; font-style: italic; line-height: 1.2; color: #072650; text-shadow: rgba(255, 255, 255, 0.3) 0px 1px; font-weight: 600; }
.fast-links-right:before { content: ""; background: url(../img/hero-links-right.png) no-repeat; width: 251px; height: 125px; position: absolute; left: 184px; transition: 0.3s; }
.fast-links-right:hover:before { left: 169px; }

/* HEADER INFO */
.header-info-container { width: 1275px; margin: 5px auto; text-align: right; }
.header-info-container .header-info {
	display: inline-block; width: 350px; background: rgba(0, 0, 0, 0.1); backdrop-filter: blur(3px); margin: 0px; padding: 20px; overflow: auto;
	box-shadow: 0 0 15px rgba(0,0,0,0.1); border-radius: 5px; text-shadow: 1px 1px 3px #000000; color: #ffffff; border: 2px solid #ffffff; font-size: 14px;
}
.header-info-container .header-info .header-info-block { padding: 0px; color: #ffffff; }
.header-info-container .header-info .header-info-block #tServerTime, .header-info-container .header-info .header-info-block #tLocalTime { color: #ffffff; }
.header-info-container .header-info .header-info-block #tServerDate, .header-info-container .header-info .header-info-block #tLocalDate { color: #cccccc; }
.header-info-container .header-info .header-info-block .online-count { color: #00ff00; }
	
/* ONLINE BAR */
.webengine-online-bar { width: 100%; background: #000000; border: 1px solid #555555; height: 12px; margin-top: 10px; margin-bottom: 10px; padding: 0px; border-radius: 4px; overflow: hidden; transition: all .3s ease; }
.webengine-online-bar .webengine-online-bar-progress { height: 15px; background: #00ff00 url('../img/online_progress_bar.jpg') no-repeat left center; border-radius: 0px 1px 1px 0px; }
.webengine-online-bar:hover { -webkit-filter: brightness(120%); filter: brightness(120%); }
#progressbar { background: black; border-radius: 5px; padding: 3px; }
#progressbar > div { background: #00ff00 url('../img/online_progress_bar.jpg') no-repeat left center; width: 10%; height: 20px; border-radius: 5px; }

/* SLIDER */
.slider-effect { content: ""; position: absolute; width: 136px; height: 104px; background: url(../img/slider-effect.png) no-repeat; top: 526px; left: 246px; z-index: 1; }
.slider { overflow: hidden; position: relative; box-shadow: inset 0 0 100px; width: 617px; height: 273px; border-radius: 10px; }
.slider .slides { position: relative; transition: 1s; }
.slider .slides .slide { float: left; display: block; position: relative; background-repeat: no-repeat; background-position: center; width: 617px; height: 273px; border: 1px solid #373022; }
.slider .slides .slide:before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; box-shadow: inset 0 0 80px; }
.slider .slides .slide-info { position: relative; padding: 40px 35px 35px 35px; width: 100%; height: 100%; opacity: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: stretch; }
.slider .slides .slide-info h2 { color: #fff; font-size: 24px; margin-bottom: 25px; }
.slider .slides .slide-info .slide-text { background: linear-gradient(to bottom, rgba(36, 32, 27, 0.8) 70%, rgba(0, 0, 0, 0)); color: #fff; line-height: 1.7; padding: 15px 35px; width: 470px; margin-left: -35px; margin-bottom: 15px; position: relative; }
.slider .slides .slide-info .slide-text:before { content: ""; position: absolute; height: 2px; width: 100%; background: #ffc500; top: -2px; left: 0; }
.slider .slides .slide-info .slide-i { width: 100%; }
.slider .slides .slide-info p { margin-bottom: 0px; }
.slider .slides .slide-info .slide-date { font-size: 14px; color: #ffcc00; font-family: Candara, Arial, sans-serif; }
.slider .slides .slide-info .slide-date span { color: #ffcc00; font-size: 18px; }
.slider .slides .active .slide-info { transition: all 2s ease; opacity: 1; }
.slider .arrows { position: absolute; height: 33px; width: 33px; top: 125px; z-index: 10; cursor: pointer; opacity: 0; }
.slider .next { background: url(../img/arrow-right.png) no-repeat; right: 1px; }
.slider .prev { background: url(../img/arrow-left.png) no-repeat; left: 1px; }
.slider .navigation { position: absolute; bottom: 20px; left: 0px; z-index: 4; display: flex; align-items: center; justify-content: center; width: 100%; }
.slider .navigation .dot { width: 2px; height: 2px; cursor: pointer; background-color: #fff; margin: 0px 10px; }
.slider:hover .next, .slider:hover .prev { opacity: 1; transition: all 0.7s ease; }
.slider .navigation .active { border-radius: 50%; width: 7px; height: 7px; margin: 0px 5px; background-color: #ffc103; position: relative; }
.slider .navigation .active:after { content: ""; position: absolute; left: -2px; top: -2px; width: 100%; height: 100%; border-radius: 50%; padding: 1px; border: 1px solid rgba(240, 71, 71, 0.3); box-shadow: 0px 0px 8px 0px rgba(240, 71, 71, 0.6); }

/* RANKINGS FILTER BY CLASS */
.rankings-class-filter { display: inline-block; list-style-type: none; margin: 20px auto; padding: 10px 20px; border-radius: 10px; }
.rankings-class-filter li { display: inline-block; transition: all 0.3s ease; margin-bottom: 10px; }
.rankings-class-filter li:hover { filter: grayscale(0%); }
.rankings-class-filter-selection { display: inline-block; width: 75px; text-align: center; color: #000000; font-size: 11px; cursor: pointer; }
.rankings-class-filter-selection:hover { color: #000000 !important; }
.rankings-class-filter-selection:hover img { filter: brightness(120%); }
.rankings-class-filter-selection img { width: 40px; height: auto; border-radius: 50%; margin-bottom: 5px; transition: all 0.3s ease; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.45); }
.rankings-class-filter-grayscale { filter: grayscale(100%); }