@font-face {
  font-family: "OptimusPrincepsSemiBold";
  src: url("./fonts/OptimusPrincepsSemiBold.eot"); /* IE9 Compat Modes */
  src: url("./fonts/OptimusPrincepsSemiBold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("./fonts/OptimusPrincepsSemiBold.otf") format("opentype"), /* Open Type Font */
    url("./fonts/OptimusPrincepsSemiBold.svg") format("svg"), /* Legacy iOS */
    url("./fonts/OptimusPrincepsSemiBold.ttf") format("truetype"), /* Safari, Android, iOS */
    url("./fonts/OptimusPrincepsSemiBold.woff") format("woff"), /* Modern Browsers */
    url("./fonts/OptimusPrincepsSemiBold.woff2") format("woff2"); /* Modern Browsers */
}

body{
	background-color: #2a1c26;
	margin: 0;
}

.wrapper{
    margin: auto;
    background-image: url("imgs/bg.png");
    background-repeat: no-repeat;
	min-height: 1800px;
	max-height: 1800px;
	width: 1400px;	
}

.social_elements {
    position: fixed;
    top: 180px;
    right: 10px;
}
.social_elements a {
    display: block;
    width: 45px;
    height: 41px;
    padding: 0;
    margin: 1px 0 10px;
    opacity: .3;
    filter: alpha(opacity=30);
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}
.social_elements a:hover {
    opacity: .7;
    filter: alpha(opacity=70);
}
.l_es{background:url("imgs/sprite_lang_element.png") no-repeat 0 -10px}
.l_ro{background:url("imgs/sprite_lang_element.png") no-repeat 0 -108px}
.l_en{background:url("imgs/sprite_lang_element.png") no-repeat 0 -60px;}
.l_pt{background:url("imgs/sprite_lang_element.png") no-repeat 0 -156px;}

.w-130{
	width:130px;
}
.w-100{
	width:100px;
}
.w-90{
	width:90px;
}

nav{
	padding-top: 20px;
	margin-left: 325px;
}

nav ul{
    list-style-type: none;
	font-size: 13px;
	font-family: "Times New Roman", Times, serif;
}

nav li{
	float: left;
	color: #debdc7;
	cursor: pointer;
	text-align:center;
}

nav li:hover{
	opacity: 0.5;
}

nav button{
	font-family: "OptimusPrincepsSemiBold";
	font-size: 12px;
	float: left;
	color: #ffdffa;
	margin-left: 310px;
	margin-top: 43px;
	border: none;
	background: none;
	outline: none;
	cursor: pointer;
}

nav button:hover{
	opacity: 0.8;
}

nav button:active{
	outline: none;
}

.pb-1{
	padding-bottom: 5px;
}

.pb-2{
	padding-bottom: 10px;
}

.ml-2{
	margin-left: 10px;
}

.ml-1{
	margin-left: 5px;
}

.mt-1{
	margin-top: 5px;
}


.logo{
	float:left;
	margin-top: 140px;
	margin-left: -85px;
	display:block;
	width: 421px;
	height: 184px;
	background-image: url("imgs/logo.png");
}

.logo:active{
	background-image: url("imgs/logo-hover.png");
}

.clearfix {
    clear:both;
}



/* LEFT BAR */


.left-bar{
	margin-top: 95px;
	margin-left: 260px;
	height: 500px;
	float:left;
}

.download-img{
	margin-left: 9px;
}

.download-img:active{
	opacity: 0.5;
}

.channels{
	margin-top: 94px;
	margin-left: -35px;
}

.channels ul{
    list-style-type: none;
}

.channels li:hover{
	opacity: 0.5;
}

.ranking{
	margin-top: 70px;
	margin-left: 9px;
}

.ranking-top{
    background-image: url("imgs/ranking-top-bg.png");
	width: 182px;
	height: 32px;
}

.ranking img:hover{
	opacity: 0.5;
	cursor: pointer;
}

.ranking img{
	margin-top: 6px;
}

.ranking ul{
    list-style-type: none;
	display :table;
	width: 100%;
	padding: 0;
	padding-left: 5px;
}

.ranking li{
	display:table-cell;
}

.ranking li:last-child{
	float: right;
	margin-right: 10px;
}

.ranking li:first-child{
	float: left;
	margin-right: 15px;
}


.ranking h6{
	font-family: "OptimusPrincepsSemiBold";
	font-size: 13px;
	color: #cec0cd;
}

.ranking table{
	width: 181px;
	margin-top: 7px;
	color: #dad9da;
	font-size: 12px;
	font-family: "OptimusPrincepsSemiBold";
}

.ranking tr:nth-child(odd) {
    background-image: url("imgs/ranking-bg.png");
}

.ranking th{
	padding-top: 2px;
	padding-bottom: 2px;
}


.pink-rank{
	color: #efc9f4;
	font-size: 14px;
}

.player-statics{
	width:100%;
	height:150px;
	margin-top:80px;
	display:block;
	padding-left:27px;
}
.channel-bar{
	display:inline-block;
	width: 15px;
	height:96%;
	margin-left:12px;
	background-position:center;
}

/* CENTER CONTAINER */

.main-container{
	width: 480px;
	height: 500px;
	margin-top: 60px;
	float:left;

}

.slider{
	margin-left: 20px;
	margin-top: 6px;
}

.slider ul{
	margin-top: -58px;
	list-style-type: none;
	margin-left: 141px;
}

.slider li{
	display: inline;
	margin-right: 9px;
}

.slider li:hover{
	opacity: 0.8;
	cursor: pointer;
}

.slider-frame{
	margin-top: -195px;
	margin-left: -25px;
}

.news{
	font-family: "Times New Roman", Times, serif;
	margin-top: 100px;
}

.article{
	padding-left: 10px;
}

.article h2{
	background-image: url("imgs/news-title-bg.png");
    background-repeat: no-repeat;
	font-size: 14px;
	padding-left: 30px;
	padding-top: 18px;
	text-align:left;
	padding-bottom: 20px;
}

.article p{
	padding-left: 15px;
	padding-right: 20px;
	font-size: 13px;
}

.article ul{
	padding-left: 20px;
	padding-top: 15px;
	font-size: 11px;
	list-style-type: none;
	background-image: url("imgs/news-footer-bg.png");
    background-repeat: no-repeat;	
	display: table;
	width: 440px;
	height: 100px;
}

.article li{
	display: table-cell;
}

.separator{
	padding-right: 20px;
}

.red{
	color: #d73035;
}

/* RIGHT BAR */

.right-bar{
	width: 190px;
	margin-top: 120px;
	margin-left: 10px;
	float:left;
}

.vote4us{
	padding-top: 40px;
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
}

.vote4us a{
	text-decoration: none;
	color: #efc9f4;
	font-size: 15px;
	font-family: "OptimusPrincepsSemiBold";
    text-shadow: 2px 2px #000000;
}

.vote4us a:hover{
	opacity:0.7;
}

.server-stats{
	padding-top: 10px;
	margin-top: 70px;
	width:160px;
	padding-left: 10px;
}

.server-stats table{
	text-align: left;
	width: 100%;
	font-size: 10px;
	font-family: "OptimusPrincepsSemiBold";
	color: #efc9f4;
}

.stats-number{
	text-align: right;
}

.small-text{
	font-size: 8px;
}

.social-media{
	margin-top: 100px;
}

.social-media img:hover{
	opacity: 0.7;
}


/* MODAL LOGIN */

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    margin: auto;
    padding: 0;
    width: 495px;
	height: 360px;
	color: white;
	background-image: url("imgs/login-bg.png");
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}


.modal-body {
	padding-top: 110px;
	padding-left: 125px;
}

.modal-body form input[type=text], input[type=password]{
	background: transparent;
	border: none;
	width: 237px;
	height: 39px;
	padding: 5px;
	background-image: url("imgs/login-input-bg.png");
	outline: none;
	margin-bottom: 20px;
	color: #efc9f4;
	font-family: "OptimusPrincepsSemiBold";
	text-align: center; 
}

.modal-body form input[type=submit]{
	background: transparent;
	border: none;
	width: 126px;
	height: 30px;
	padding: 5px;
	background-image: url("imgs/login-button.png");
	outline: none;
	margin-bottom: 20px;
	color: #efc9f4;
	font-family: "OptimusPrincepsSemiBold";
	text-align: center; 
	margin-left: 56px;
	cursor: pointer;
}

.modal-body form input[type=submit]:hover{
	opacity: 0.8;
}
.form_input::placeholder { color: #efc9f4; }
.form_input{
	background: transparent;
	border: none;
	width: 237px;
	height: 39px;
	padding: 5px;
	margin-top:15px;
	background-image: url("imgs/login-input-bg.png");
	outline: none;
	margin-bottom: 20px;
	color: #efc9f4;
	text-align: center; 
}
.button{
	background: transparent;
	border: none;
	width: 126px;
	height: 30px;
	padding: 5px;
	background-image: url("imgs/login-button.png");
	outline: none;
	margin-bottom: 20px;
	color: #efc9f4;
	font-family: "OptimusPrincepsSemiBold";
	text-align: center; 
	cursor: pointer;
}
/* PANEL USUARIO */

.title{
	padding:2px;
	background-color:rgba(0,0,0,.3);
	border-radius:10px;
	margin-bottom:20px;
	text-align:center;
}
.title h3{
	font-size:12px;
	color:#4e0000;
	padding:0;
}

.user-area{
	background-color:rgba(0,0,0,.3);
	padding:10px;
	border-radius:10px;
	display:flex;
	justify-content:space-between;
}
.options{
	list-style-type:none;
	margin:0;
	padding:0;
}
.options li{
	padding:5px;
}
.options .yellow{
	color:yellow;
}
.options .yellow i{
	background:linear-gradient(-180deg, yellow, yellow, orange, #4e0000)!important;
}
.options li i{
	padding:5px;
	width:15px;
	height:7.5px;
	background:linear-gradient(-180deg, #947983,#947983, #777, #4e0000);
	border-radius:5px;
	border:1px solid rgba(0,0,0,.3);
	color:#fff;
	text-align:center;
}
.options li a{
	text-decoration:none;
	color:#4e0000;
	padding:5px;
	font-size:10px;
}
.info{
	background-color:rgba(0,0,0,.3);
	padding:10px;
	border-radius:10px;
	display:flex;
	align-items:center;
}
.info ul{
	display:block;
	list-style-type:none;
	margin:0;
	padding:0;
}
.info li{
	color:#4e0000;
	padding:5px;
	font-size:10px;
}

.characters-area{
	margin-top:20px;
}
.characters-area .player{
	background-color:rgba(0,0,0,.3);
	border-radius:10px;
	display:flex;
	align-items:center;
	margin-left:50px;
	position:relative;
	height:115px;
	margin-bottom:20px;
}
.characters-area .player img{
	position:absolute;
	top:0;
	left:-50px;
}
.characters-area .player ul{
	margin-left:75px;
	padding:0;
	list-style-type:none;
}
.characters-area .player ul li{
	padding:5px;
	font-size:10px;
	color:#4e0000;
}
.p-20{
	padding:20px;
}
.g-recaptcha{
	margin-left:20px;
	transform: scale(0.80);
	transform-origin: 0 0;     
	width: 126px;
	height: 30px;  
	margin-bottom: 20px;          
}
a{color: #da52ec;}
.downloads_text{
	color: #da52ec;	
}

.pagination {
display: block;
}
.pagination > li {
display: block;
}
.pagination > li > a,
.pagination > li > span {
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
margin-left: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
z-index: 2;
color: #23527c;
background-color: #eee;
border-color: #ddd;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
z-index: 3;
color: #fff;
cursor: default;
background-color: #337ab7;
border-color: #337ab7;
}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
color: #777;
cursor: not-allowed;
background-color: #fff;
border-color: #ddd;
}
.pagination-lg > li > a,
.pagination-lg > li > span {
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
}
.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.pagination-sm > li > a,
.pagination-sm > li > span {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
}
.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}