/*css web design and coded by durexz-studio*/

@import url('https://fonts.googleapis.com/css?family=Kanit:300,400,500');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

@font-face{
	font-family:'supermarket';src:url('supermarket.eot');src:url('supermarket.ttf') format('truetype');
}
a:link{
	text-decoration:none;
	outline:0 !important;
}
a:visited{
	text-decoration:none;
	outline:0 !important;
}
a:hover{
	text-decoration:none;
	outline:0 !important;
}
a:active{
	text-decoration:none;
	outline:0 !important;
}
/* index.html */
body,html{
	font-family:Kanit;
	margin-top: 0px;
	cursor: url('../../point.cur'),auto;
}
a,area {cursor: url('../../link.cur'),auto; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track-piece { background-color: #FFFFFF; webkit-border-radius: 5px; }
::-webkit-scrollbar-thumb:horizontal, ::-webkit-scrollbar-thumb:vertical { width: 0px; background-color: #1a2230 ;}
::-webkit-scrollbar-thumb:horizontal:hover, ::-webkit-scrollbar-thumb:vertical:hover {
background-color: #1a2230;}
.bg1{
	background-image: url(../../images/bg.jpg);
	background-color:transparent;
	/*background-attachment: scroll;*/
	background-repeat: no-repeat;
	background-position: center top;
	margin:0 auto ;
}
.bg2{
	background-image: url(../../images/bg1.jpg);
	background-color:transparent;
	/*background-attachment: scroll;*/
	background-repeat: no-repeat;
	background-position: center top;
	margin:0 auto ;
}
.footer {
	width:100%;
	padding-top:20px;
	padding-bottom:20px;
	background-color:#1a2230;
	font-family:Kanit;
	text-align:center;
	color:#FFF;
	font-weight:bold;
	font-size:14px;
}
.footer span{
	color:#d09eff;
}
.event{
	width: 100%;
	height: 290px;
}
.event .img{
	margin:0;
	width:340px;
	padding-top: 11px;
	padding-left: 10px;
}
.head-event{
	/*font-family:Kanit;*/
	font-weight:bold;
	font-size:16px;
	color:#1a2230;
	padding:5px;
}
.detail-event{
	/*font-family:Kanit;*/
	font-weight:bold;
	font-size:14px;
	color:#333;
	padding:5px;
}
.header_nav{
    background:linear-gradient(180deg,#162133,#0f172a);
    border-bottom:2px solid #8b5cf6;
    box-shadow:0 5px 20px rgba(0,0,0,.5);
}

.menu_nav{
    width:100%;
    height:76px;
    position:fixed;
    top:0;
    left:0;
    z-index:999;
}

.menu_nav > .container > .row > nav > ul{
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
    justify-content:center;
    align-items:center;
}

.menu_nav ul li{
    position:relative;
}

.menu_nav ul li a{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    width:150px;
    height:75px;

    color:#fff;
    text-decoration:none;

    font-size:16px;
    font-weight:600;

    transition:.3s;
    position:relative;
}

.menu_nav ul li a span{
    font-size:10px;
    color:#bbb;
    margin-top:5px;
    letter-spacing:1px;
}

.menu_nav ul li a:hover{
    background:rgba(139,92,246,.15);
    color:#c084fc;
}

.menu_nav ul li a:after{
    content:'';
    position:absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:0;
    height:3px;
    background:#8b5cf6;
    transition:.3s;
}

.menu_nav ul li a:hover:after{
    width:100%;
}

/* Dropdown */

.sub-menu{
    position:absolute;
    top:100%;
    left:0;
    min-width:220px;

    background:#1a2336;
    border:1px solid rgba(139,92,246,.3);
    border-radius:8px;

    opacity:0;
    visibility:hidden;
    transform:translateY(10px);

    transition:.3s;
    z-index:999;
}

.main-menu:hover .sub-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.sub-menu li{
    width:100%;
}

.sub-menu li a{
    width:100%;
    height:auto;
    padding:14px 20px;
    display:block;
    text-align:left;
}

.sub-menu li a:hover{
    background:#8b5cf6;
    color:#fff;
}

/*===============================*/
/* Images Event */
.hvr-grow-rotate {
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-grow-rotate:hover, .hvr-grow-rotate:focus, .hvr-grow-rotate:active {
  -webkit-transform: scale(1.1) rotate(4deg);
  transform: scale(1.1) rotate(-4deg);
}
@keyframes hvr-hang {
  0% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
  50% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }
  100% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }
}
figure {
	width: 330px;
	height: 190px;
	margin: 0;
	padding: 0;
	background: transparent;
	overflow: hidden;
}
.img-shine figure {
	position: relative;
}
.img-shine p {
	display:block;
    margin: 0 0 -2px 5px;
}
.img-shine figure::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
.img-shine figure:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}

.img-rotate{
	overflow:hidden
}
.img-rotate img{
	-webkit-transition-property:-ms-transform,transform,-webkit-transform;
	-webkit-transition-duration:.3s;
	-webkit-transition-timing-function:ease;
	transition-property:-ms-transform,transform,-webkit-transform;
	transition-duration:.3s;
	transition-timing-function:ease;
}
.img-rotate:hover img{
	-ms-transform:rotate(10deg) scale(1.5,1.5);
	-webkit-transform:rotate(10deg) scale(1.5,1.5);
	transform:rotate(10deg) scale(1.5,1.5);
}

.img-zoom{
	margin:0;
	padding:0;
	-webkit-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out;

}

.img-zoom:hover{
	-webkit-transform:scale(0.1.1);
	-ms-transform:scale(0.1.1);
	transform:scale(1.1);
}
.panal{
	width: 100%;
	background-color: #F4F4F4;
	border-radius: 5px;
	padding: 10px 10px;
}
/*====================================*/
/* GLOBAL */
/*====================================*/

body{
	margin:0;
	padding:10px;
	background:#0b0b0b;
	font-family:tahoma,sans-serif;
}

/*====================================*/
/* TABLE */
/*====================================*/

.rank-table{
	width:100%;
	border-collapse:separate;
	border-spacing:0 10px;
	table-layout:fixed;
}

.rank-table thead th{
	font-size:12px;
	font-weight:700;
	color:#ffd36d;
	text-transform:uppercase;
	letter-spacing:.5px;
	padding:0 5px 8px;
	text-shadow:0 0 8px rgba(255,211,109,.35);
}

.name-num{
	width:15%;
	text-align:center;
}

.name-name{
	width:55%;
	text-align:left;
}

.name-point{
	width:30%;
	text-align:center;
}

/*====================================*/
/* ROW */
/*====================================*/

.rank-table tbody tr{
	transition:.25s;
}

.rank-table tbody tr:hover{
	transform:translateY(-2px);
}

/*====================================*/
/* BOX */
/*====================================*/

.rank-box{
	background:
	linear-gradient(
		180deg,
		rgba(32,32,32,.98),
		rgba(15,15,15,.98)
	);

	border:1px solid rgba(255,255,255,.05);

	border-radius:14px;

	padding:11px 10px;

	font-size:13px;
	font-weight:600;

	box-shadow:
		0 0 12px rgba(0,0,0,.35),
		inset 0 1px 0 rgba(255,255,255,.03);

	transition:.25s;
}

.rank-table tbody tr:hover .rank-box{
	border-color:rgba(255,211,109,.15);

	box-shadow:
		0 0 16px rgba(255,211,109,.12),
		0 0 25px rgba(0,0,0,.45);
}

/*====================================*/
/* NUMBER */
/*====================================*/

.rank-num{
	text-align:center;
	color:#ffd36d;
}

/*====================================*/
/* PLAYER */
/*====================================*/

.rank-name{
	color:#ffffff;
	padding-left:14px;

	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}

/*====================================*/
/* SCORE */
/*====================================*/

.rank-point{
	text-align:center;
	color:#00d9ff;
}

/*====================================*/
/* TOP 3 */
/*====================================*/

.rank-table tbody tr:nth-child(1) .rank-num .rank-box{
	background:linear-gradient(135deg,#ffe27a,#ffad1f);
	color:#000;
	border:none;
	font-weight:bold;
}

.rank-table tbody tr:nth-child(2) .rank-num .rank-box{
	background:linear-gradient(135deg,#f0f0f0,#9f9f9f);
	color:#000;
	border:none;
	font-weight:bold;
}

.rank-table tbody tr:nth-child(3) .rank-num .rank-box{
	background:linear-gradient(135deg,#c97d39,#6b3716);
	color:#fff;
	border:none;
	font-weight:bold;
}

/*====================================*/
/* RESPONSIVE */
/*====================================*/

@media(max-width:600px){

	.rank-box{
		font-size:12px;
		padding:10px 6px;
	}

	.name-name{
		width:50%;
	}

	.name-point{
		width:35%;
	}
}
/* Status-Server */
.status-server{
	margin:0 auto;
	text-align: center;
	font-size: 20px;

}
.status-server .online{
	color:green;
}
.status-server .offline{
	color:red;
}
.status-player{
	color:#FFF;
	margin:0 auto;
	text-align: center;
	font-size: 20px;

}
.status-account{
	color:#FFF;
	margin:0 auto;
	text-align: center;
	font-size: 20px;

}
/*===============================*/
/* Color */
.red{
	color:#1a2230;
}
.green{
	color:#1a2230;
}
.white{
	color:#1a2230;
}
.blue{
	color:#1a2230;
}
.pink{
	color:#1a2230;
}
.bg-pink{
	background-color:#ffffff;
}
.bg-green{
	background-color: #ffffff;
}
.bg-red{
	background-color: #ffffff;
}
.bg-blue{
	background-color: #ffffff;
}
/*===============================*/
/* Head_menu_Home */
.title-header {
	text-align:center;
	color:#1a2230;
}
.title-header hr {
	background : #1a2230;
	width : 100%;
	height : 2px;
}
.title-header h2 {
	font-size:25px;
}
.title-header h3 {
	font-size:20px;
}
/*===============================*/
/*css web design and coded by durexz-studio*/

.rank-title{
	font-size:18px;
	font-weight:700;
	text-align:center;
	margin-bottom:15px;
	letter-spacing:1px;
}

.rank-title.pvp{
	color:#00d9ff;
	text-shadow:0 0 12px rgba(0,217,255,.35);
}

.rank-title.mvp{
	color:#ffd36d;
	text-shadow:0 0 12px rgba(255,211,109,.35);
}

/*====================================*/
/* MENU */
/*====================================*/

.rank-menu{
	display:flex;
	gap:10px;

	margin-bottom:15px;
}

.menu-btn{
	flex:1;

	padding:12px 0;

	text-align:center;

	text-decoration:none;

	font-size:18px;
	font-weight:700;

	border-radius:14px;

	color:#d8d8d8;

	background:
	linear-gradient(
		180deg,
		rgba(35,35,35,.98),
		rgba(15,15,15,.98)
	);

	border:1px solid rgba(255,255,255,.05);

	box-shadow:
		0 0 12px rgba(0,0,0,.35),
		inset 0 1px 0 rgba(255,255,255,.03);

	transition:.25s;
}

/* HOVER */

.menu-btn:hover{
	transform:translateY(-2px);

	color:#fff;

	box-shadow:
		0 0 16px rgba(255,255,255,.08);
}

/* ACTIVE PVP */

.active-pvp{
	color:#00d9ff;

	border-color:rgba(0,217,255,.30);

	text-shadow:
		0 0 10px rgba(0,217,255,.40);

	box-shadow:
		0 0 18px rgba(0,217,255,.15);
}

/* ACTIVE MVP */

.active-mvp{
	color:#ffd36d;

	border-color:rgba(255,211,109,.30);

	text-shadow:
		0 0 10px rgba(255,211,109,.40);

	box-shadow:
		0 0 18px rgba(255,211,109,.15);
}

.header_nav ul{
    display:flex !important;
}

.header_nav li{
    list-style:none !important;
}