@charset "utf-8";

/* CSS Document */

@font-face {

    font-family: 'navbarfont';

    src: url('../fonts/GothamCondensedMd.otf');

    font-weight: normal;

    font-style: normal;

}

@font-face {

    font-family: 'bodyfont';

    src: url('../fonts/GothamMedium.otf');

    font-weight: normal;

    font-style: normal;

}

@font-face {

    font-family: 'servertimefont';

    src: url('../fonts/GothamBold.otf');

    font-weight: normal;

    font-style: normal;

}

@font-face {

    font-family: 'footerfont';

    src: url('../fonts/GothamBook.otf');

    font-weight: normal;

    font-style: normal;

}

body,html {

    height: 100%;

}

body {

	background: url('../img/main-bg.jpg') top center no-repeat;

	overflow-x:hidden;

	font-family: 'bodyfont';

	background-color: #26004D;

}

a, a img{ transition: .2s;} 

a:hover, a:hover img  { filter: brightness(105%); }

.blog {

    position: relative;

    width: 100%;

    background: #ebebeb;

    overflow: hidden;

}

.blog::before {

    display: block;

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 393px;

    background: #ebebeb url("../images/bg-blog.jpg") no-repeat center;

    background-size: cover;

}

.text-hilight {

	position: relative;

	width: 100%;

	height: auto;

	text-align: center;

	margin: 120px 0 50px 0;

	font-family: 'poppinssemibold';

	color: #ffffff;

    font-size: 46px;

	text-transform: uppercase;

}

.text-hilight-main {

	position: relative;

	width: 100%;

	height: auto;

	text-align: center;

	margin-bottom: 20px;

	font-family: 'poppinssemibold';

	color: #ffffff;

    font-size: 46px;

	text-transform: uppercase;

	z-index: 2;

}

.text-hilight-all {

	position: relative;

	width: 100%;

	height: auto;

	text-align: center;

	margin: 120px 0 20px 0;

	font-family: 'poppinssemibold';

	color: #ffffff;

    font-size: 46px;

	text-transform: uppercase;

}

.hilight-box {

	position: relative;

    z-index: 2;

}

.hilight-box a {

	display: grid;

}

.img-blog {

	float: left;

	width: 100%;

	height: auto;

	overflow: hidden;

	position: relative;

}

.img-blog img {

	transition: 0.5s;

}

.img-blog img:hover {

	-moz-transform: scale(1.1,1.1);

  	-webkit-transform: scale(1.1,1.1);

  	-o-transform: scale(1.1,1.1);

  	-ms-transform: scale(1.1,1.1);

}

.img-blog .tag-blog img {

	-moz-transform: scale(1,1);

  	-webkit-transform: scale(1,1);

  	-o-transform: scale(1,1);

  	-ms-transform: scale(1,1);

}

.content-box {

	float: left;

	width: 100%;

	height: auto;

	background-color: #ffffff;

	padding: 20px;

	color: #1a1a1a;

	max-height: 155px;

}

.content-box-main {

	float: left;

	width: 100%;

	height: auto;

	background-color: #ffffff;

	padding: 20px 20px 4px 20px;

	color: #1a1a1a;

	max-height: 155px;

}

.content-box-latest {

	float: left;

	width: 100%;

	height: auto;

	padding: 0 20px;

	color: #1a1a1a;

	position: relative;

}

.hilight {

	font-family: 'poppinssemibold';

    margin-bottom: 10px;

    font-size: 15px;

    max-height: 44px;

    overflow: hidden;

    height: 44px;

}

.hilight-m {

	font-family: 'poppinssemibold';

	margin-bottom: 10px;

	font-size: 14px;

	float: left;

    width: 100%;

	height: 21px;

    overflow: hidden;

}

.hilight-latest {

	font-weight: 700;

	margin-bottom: 10px;

    font-size: 15px;

    float: left;

    width: 90%;

    height: 41px;

    overflow: hidden;

}

.editor {

	font-size: 12px;

	float: left;

	width: auto;

	margin-right: 10px;

	margin-bottom: 5px;

	color: #888888;

}

.time-update {

	font-size: 12px;

	float: left;

	width: auto;

	color: #888888;

	margin-bottom: 5px;

}

.editor-hilight {

	font-size: 14px;

	float: left;

	width: auto;

	margin-right: 10px;

	margin-bottom: 5px;

	color: #888888;

}

.time-update-hilight {

	font-size: 14px;

	float: left;

	width: auto;

	color: #888888;

	margin-bottom: 5px;

}

.editor-detail {

	font-size: 12px;

	float: left;

	width: auto;

	margin-right: 10px;

	color: #888888;

}

.time-update-detail {

	font-size: 12px;

	float: left;

	width: auto;

	color: #888888;

}

.fa-margin {

	margin-right: 5px;

	color: #0088ff;

}

.read-more {

	float: left;

    width: 100%;

    height: auto;

    text-align: left;

    z-index: 1;

    margin-right: 35px;

    position: relative;

    margin-top: 15px;

}

.read-more a {

	color: #ffffff;

	background: #0088ff;

    padding: 10px 40px;

    display: inline-block;

	text-decoration: none;

	font-family: 'poppinssemibold';

	-webkit-border-radius: 5px;

	-moz-border-radius: 5px;

	border-radius: 5px;

	font-size: 14px;

	width: auto;

}

.read-more-btn {

	float: left;

	width: 100%;

	height: auto;

	text-align: center;

	margin-top: -15px;

}

.read-more-btn a {

	color: #ffffff;

	background: #0088ff;

    padding: 10px 40px;

    display: inline-block;

	text-decoration: none;

	font-family: 'poppinssemibold';

	-webkit-border-radius: 5px;

	-moz-border-radius: 5px;

	border-radius: 5px;

	font-size: 14px;

	width: auto;

}

.read-more-btn-m {

	float: right;

    width: 100%;

    height: auto;

    text-align: right;

    margin-top: -30px;

    z-index: 1;

    margin-right: 35px;

	position: relative;

}

.read-more-btn-m a {

	color: #ffffff;

	background: #0088ff;

    padding: 10px 40px;

    display: inline-block;

	text-decoration: none;

	font-family: 'poppinssemibold';

	-webkit-border-radius: 5px;

	-moz-border-radius: 5px;

	border-radius: 5px;

	font-size: 14px;

	width: auto;

}

.blog-l {

	margin-bottom: 30px;

}

.blog-m {

	margin-bottom: 20px;

}

.blog-latest {

	padding: 15px 0;

	float: left;

	width: 100%;

	height: auto;

	border-bottom: solid 1px #d9d9d9;

}

.news-latest {

	padding: 11px 0;

	float: left;

	width: 100%;

	height: auto;

	border-top: solid 1px #cccccc;

}

.des-detail {

	color: #898989;

	font-size: 14px;

	float: left;

	width: 100%;

	margin-top: 5px;

}

.img-m {

	max-height: 215px;

}

.img-latest {

	max-height: 140px;

}

.loadmore-btn {

	background: #3f5aa4;

	color: #ffffff;

	font-family: 'poppinssemibold';

	float: left;

	width: 100%;

	padding: 10px;

	border: none;

	-webkit-border-radius: 5px;

	-moz-border-radius: 5px;

	border-radius: 5px;

	cursor: pointer;

}

footer {

	width: 100%;

	height: auto;

	padding: 40px 0px;

}

footer.ch {

	float: left;

	width: 100%;

	height: auto;

	background: #111111;

	border-top: solid 5px #959595;

	padding: 40px 0px;

	margin-top: 0px;

	position: relative;

}

.logo-footer {

	margin-bottom: 15px;

}

.copy-right {

	font-size: 12px;

	color: #8c8c8c;

}

.content-blog {

	padding: 20px 40px 40px 40px;

	background: #ffffff;

	float: left;

    width: 100%;

    height: auto;

}

.head-news {

	font-family: 'poppinssemibold';

    font-size: 24px;

}

.content-blog h1 {

	font-family: 'poppinssemibold';

    font-size: 22px;

}

.content-blog h2 {

    font-family: 'poppinssemibold';

    font-size: 20px;

}

.content-blog h3 {

    font-family: 'poppinssemibold';

    font-size: 18px;

}

.content-blog h4 {

    font-family: 'poppinssemibold';

    font-size: 16px;

}

.content-blog p {

	color: #808080;

	text-indent: 50px;

}

.content-blog img {

	width: 100%;

	max-width: 800px;

	text-align: center;

	height: auto;

	margin: 20px auto;

	display: block;

}



.navlink {

	margin-bottom: 40px;

	border-bottom: solid 1px #ebebeb;

}

.hilight-detail h1 {

	font-family: 'poppinssemibold';

    font-size: 24px;

    margin-bottom: 40px;

	text-align: center;

}

.img-detail {

	max-width: 800px;

    margin: 40px auto;

}

.content-detail {

	padding: 40px 0 20px 0;

	color: #808080;

}

.content-detail p {

	text-indent: 50px;

	margin-bottom: 40px;

}

.content-detail h2 {

	color: #0054a6;

	text-align: center;

	font-family: 'poppinssemibold';

	font-size: 20px;

	font-style: italic;

	margin-bottom: 20px;

}

.content-detail h4 {

	color: #464646;

	text-align: center;

	font-family: 'poppinssemibold';

	font-size: 12px;

	margin-bottom: 40px;

	margin-top: -20px;

}

.divider-buttom {

	width: 100%;

	text-align: center;

	margin-bottom: 20px;

}

.divider-news {

    margin-top: -35px;

    float: left;

    width: 100%;

    text-align: center;

}	

.content-share {

	width: 100%;

	height: 50px;

	color: #ffffff;

	background: #0088ff;

    padding: 10px 40px;

    display: inline-block;

	text-decoration: none;

	font-family: 'poppinssemibold';

	-webkit-border-radius: 5px;

	-moz-border-radius: 5px;

	border-radius: 5px;

	font-size: 14px;

	border: none;

	cursor: pointer;

}

.view-all-btn {

	width: 100%;

	height: 50px;

	color: #ffffff;

	background: #3f5aa4;

    padding: 10px 40px;

    display: inline-block;

	text-decoration: none;

	font-family: 'poppinssemibold';

	border: none;

	cursor: pointer;

	z-index: 1;

	position: relative;

	bottom: 0;

}

.bg-main {

	width: 100%;

	background: url("../images/bg-large.jpg") no-repeat top center;

  	-webkit-background-size: cover;

  	-moz-background-size: cover;

  	-o-background-size: cover;

 	background-size: cover;

	position: relative;

	overflow: hidden;

}

.bg-sec2 {

	width: 100%;

	background: url("../images/bg-section2.jpg") no-repeat top center;

	-webkit-background-size: cover;

  	-moz-background-size: cover;

  	-o-background-size: cover;

 	background-size: cover;

	position: relative;

}

.bg-sec3 {

	width: 100%;

	background: url("../images/bg-section3.jpg") no-repeat top center;

	-webkit-background-size: cover;

  	-moz-background-size: cover;

  	-o-background-size: cover;

 	background-size: cover;

	position: relative;

}

.bg-footer {

	width: 100%;

	background: url("../images/bg-footer.jpg") no-repeat top center;

	-webkit-background-size: cover;

  	-moz-background-size: cover;

  	-o-background-size: cover;

 	background-size: cover;

	max-height:425px;

	position: relative;

}

.bg-novice {

	width: 100%;

	height: 100%;

	max-height: 1080px;

	background: url("../images/bg-novice.jpg") no-repeat top left;

  	-webkit-background-size: cover;

  	-moz-background-size: cover;

  	-o-background-size: cover;

 	background-size: cover;

	position: relative;

	overflow: hidden;

	-webkit-animation: zoom 2s;

  	-moz-animation:    zoom 2s;

  	-o-animation:      zoom 2s;

  	animation:         zoom 2s;

}

.bg-sword {

	width: 100%;

	height: 100%;

	max-height: 1080px;

	background: url("../images/bg-sword.jpg") no-repeat top left;

  	-webkit-background-size: cover;

  	-moz-background-size: cover;

  	-o-background-size: cover;

 	background-size: cover;

	position: relative;

	overflow: hidden;

	-webkit-animation: zoom 2s;

  	-moz-animation:    zoom 2s;

  	-o-animation:      zoom 2s;

  	animation:         zoom 2s;

}

.bg-magician {

	width: 100%;

	height: 100%;

	max-height: 1080px;

	background: url("../images/bg-magician.jpg") no-repeat top left;

  	-webkit-background-size: cover;

  	-moz-background-size: cover;

  	-o-background-size: cover;

 	background-size: cover;

	position: relative;

	overflow: hidden;

	-webkit-animation: zoom 2s;

  	-moz-animation:    zoom 2s;

  	-o-animation:      zoom 2s;

  	animation:         zoom 2s;

}

.bg-acolyte {

	width: 100%;

	height: 100%;

	max-height: 1080px;

	background: url("../images/bg-acolyte.jpg") no-repeat top left;

  	-webkit-background-size: cover;

  	-moz-background-size: cover;

  	-o-background-size: cover;

 	background-size: cover;

	position: relative;

	overflow: hidden;

	-webkit-animation: zoom 2s;

  	-moz-animation:    zoom 2s;

  	-o-animation:      zoom 2s;

  	animation:         zoom 2s;

}

.bg-merchant {

	width: 100%;

	height: 100%;

	max-height: 1080px;

	background: url("../images/bg-merchant.jpg") no-repeat top left;

  	-webkit-background-size: cover;

  	-moz-background-size: cover;

  	-o-background-size: cover;

 	background-size: cover;

	position: relative;

	overflow: hidden;

	-webkit-animation: zoom 2s;

  	-moz-animation:    zoom 2s;

  	-o-animation:      zoom 2s;

  	animation:         zoom 2s;

}

.bg-archer {

	width: 100%;

	height: 100%;

	max-height: 1080px;

	background: url("../images/bg-archer.jpg") no-repeat top left;

  	-webkit-background-size: cover;

  	-moz-background-size: cover;

  	-o-background-size: cover;

 	background-size: cover;

	position: relative;

	overflow: hidden;

	-webkit-animation: zoom 2s;

  	-moz-animation:    zoom 2s;

  	-o-animation:      zoom 2s;

  	animation:         zoom 2s;

}

.bg-thief {

	width: 100%;

	height: 100%;

	max-height: 1080px;

	background: url("../images/bg-thief.jpg") no-repeat top left;

  	-webkit-background-size: cover;

  	-moz-background-size: cover;

  	-o-background-size: cover;

 	background-size: cover;

	position: relative;

	overflow: hidden;

	-webkit-animation: zoom 2s;

  	-moz-animation:    zoom 2s;

  	-o-animation:      zoom 2s;

  	animation:         zoom 2s;

}

.bg-fea1 {

	width: 100%;

	background: url("../images/bg-feature-sec1.jpg") no-repeat top center;

  	-webkit-background-size: cover;

  	-moz-background-size: cover;

  	-o-background-size: cover;

 	background-size: cover;

	position: relative;

}

.bg-fea2 {

	width: 100%;

	background: url("../images/bg-feature-sec2.jpg") no-repeat top center;

  	-webkit-background-size: cover;

  	-moz-background-size: cover;

  	-o-background-size: cover;

 	background-size: cover;

	position: relative;

	padding: 100px 0;

}

.bg-fea3 {

	width: 100%;

	background: url("../images/bg-feature-sec3.jpg") no-repeat top center;

  	-webkit-background-size: cover;

  	-moz-background-size: cover;

  	-o-background-size: cover;

 	background-size: cover;

	position: relative;

	padding: 100px 0;

}

.bg-fea4 {

	width: 100%;

	background: url("../images/bg-feature-sec4.jpg") no-repeat top center;

  	-webkit-background-size: cover;

  	-moz-background-size: cover;

  	-o-background-size: cover;

 	background-size: cover;

	position: relative;

	padding: 100px 0;

}

.bg-fea5 {

	width: 100%;

	background: url("../images/bg-feature-sec5.jpg") no-repeat top center;

  	-webkit-background-size: cover;

  	-moz-background-size: cover;

  	-o-background-size: cover;

 	background-size: cover;

	position: relative;

	padding: 100px 0;

}

.bg-fea6 {

	width: 100%;

	background: url("../images/bg-feature-sec6.jpg") no-repeat top center;

  	-webkit-background-size: cover;

  	-moz-background-size: cover;

  	-o-background-size: cover;

 	background-size: cover;

	position: relative;

	padding: 100px 0;

}

.bg-fea7 {

	width: 100%;

	background: url("../images/bg-feature-sec7.jpg") no-repeat top center;

  	-webkit-background-size: cover;

  	-moz-background-size: cover;

  	-o-background-size: cover;

 	background-size: cover;

	position: relative;

	padding: 100px 0;

}

.bg-fea8 {

	width: 100%;

	background: url("../images/bg-feature-sec8.jpg") no-repeat top center;

  	-webkit-background-size: cover;

  	-moz-background-size: cover;

  	-o-background-size: cover;

 	background-size: cover;

	position: relative;

	padding: 100px 0;

}

.bg-fea9 {

	width: 100%;

	background: url("../images/bg-feature-sec9.jpg") no-repeat top center;

  	-webkit-background-size: cover;

  	-moz-background-size: cover;

  	-o-background-size: cover;

 	background-size: cover;

	position: relative;

	padding: 100px 0;

}

.footer-hilight {

	margin-top: 35px;

	color: #f6c945;

	font-size: 23px;

	font-family: 'poppinssemibold';	

}

.footer-sub {

	color: #ffffff;

}

.social-footer {

	max-width: 50px;

	padding: 0 3px;

}

.social-top {

	padding: 0;

	max-height: 40px;

}

.play-btn {

	position: relative;

	z-index: 10;

	top: 0px;

}

.content {

  	position: absolute;

  	padding: 50px 0 0 0;

  	height: 280px;

	bottom: 0;

	z-index: 2;

	width: 100%;

	background: rgb(0,80,168);

	background: linear-gradient(0deg, rgba(0,80,168,1) 0%, rgba(0,0,0,0) 100%);

}

.gradient-white {

  	position: absolute;

  	height: 280px;

	bottom: 0;

	z-index: 2;

	width: 100%;

	background: rgb(255,255,255);

	background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(0,255,255,0) 100%);

	z-index: 1;

}

.gradient-blue {

  	position: absolute;

  	height: 280px;

	bottom: 0;

	z-index: 2;

	width: 100%;

	background: rgb(0,80,168);

	background: linear-gradient(0deg, rgba(0,80,168,1) 0%, rgba(0,0,0,0) 100%);

	z-index: 1;

}

.gradient-blue-ch {

  	position: absolute;

  	height: 300px;

	bottom: 0;

	z-index: 2;

	width: 100%;

	background: rgb(0,80,168);

	background: linear-gradient(0deg, rgba(0,80,168,1) 0%, rgba(0,0,0,0) 100%);

	z-index: 1;

}

.mouse {

  	position: absolute;

  	left: 50%;

  	bottom: 20px;

  	width: 28px;

  	height: 90px;

  	transform: translateX(-50%);

}

.mouse:before, .mouse:after {

  	content: '';

  	position: absolute;

  	left: 50%;

}

.mouse:before {

  	top: 8px;

  	width: 4px;

  	height: 10px;

  	transform: translateX(-50%);

  	background: #fff;

  	border-radius: 2px;

  	animation: scrolling 2s infinite ease-in-out;

}

.mouse:after {

  	top: 0;

  	left: 0;

  	width: 28px;

  	height: 48px;

  	border-radius: 16px;

  	border: 2px solid #fff;

}

@keyframes scrolling {

  0% {

    opacity: 0;

    top: 8px;

  }

  10% {

    opacity: 0;

    top: 8px;

  }

  20% {

    opacity: 1;

    top: 8px;

  }

  50% {

    opacity: 1;

    top: 14px;

  }

  60% {

    opacity: 0;

    top: 14px;

  }

  100% {

    opacity: 0;

    top: 14px;

  }

}

.mouse .arrow {

  position: absolute;

  left: 50%;

  transform: translateX(-50%) rotate(45deg);

  border: solid #fff;

  border-width: 0 2px 2px 0;

  width: 8px;

  height: 8px;

}

.mouse .arrow:nth-child(1) {

  top: 56px;

  animation: arrowone 2s infinite;

}

.mouse .arrow:nth-child(2) {

  top: 68px;

  animation: arrowtwo 2s infinite;

}

.mouse .arrow:nth-child(3) {

  top: 80px;

  animation: arrowthree 2s infinite;

}

@keyframes arrowone {

  0% {

    opacity: 0;

  }

  50% {

    opacity: 0;

  }

  65% {

    opacity: 1;

  }

  80% {

    opacity: 0;

  }

  100% {

    opacity: 0;

  }

}

@keyframes arrowtwo {

  0% {

    opacity: 0;

  }

  60% {

    opacity: 0;

  }

  75% {

    opacity: 1;

  }

  90% {

    opacity: 0;

  }

  100% {

    opacity: 0;

  }

}

@keyframes arrowthree {

  0% {

    opacity: 0;

  }

  70% {

    opacity: 0;

  }

  85% {

    opacity: 1;

  }

  100% {

    opacity: 0;

  }

}

.navbar {

	font-family: 'navbarfont';

	font-size: 16pt;

	padding: 0;

}

.navbar-expand-lg .navbar-nav .nav-link {

    padding-right: 1.5rem;

    padding-left: 1.5rem;

}

.navbar-nav a {

	color: #fff;

}

.navbar-nav a:hover {

	color: #f89308;

}

.navbar-nav a.disabled:hover {

	background: transparent;

}

.navbar-nav {

    height: auto;

	line-height: 45px;

}

.logo-nav {

	max-height: 50px;

}

.navbar-nav .active {

	background: #0088ff;

	color: #ffffff;

}

.navbar-toggler {

    font-size: 1.25rem;

    line-height: 1;

    border-radius: 0;

    margin-right: 0;

    padding: 15px 20px;

	border: 0;

}

button:focus {

    outline: none !important;

}

.navbar-toggler-icon {

	padding-top: 3px;

}

.social-top-btn {

	float: right;

    width: 100%;

    text-align: right;

}

.videoParent {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 0;

  overflow: hidden;

  margin-bottom: -1px;

}

.videoParent video {

  	position: absolute;

  	top: 0;

  	left: 0;

  	width: 100%;

  	height: 100%;

  	object-fit: cover;

	z-index: 0;

}

.videoParent.hiddenTransform {

  opacity: 0;

}

#dot-matrix {

    background: url("../images/dot-img.png");

    height: 100%;

    width: 100%;

    position: absolute;

    top: 0;

    z-index: 1;

	pointer-events: none;

}

.logo {

	position: absolute;

    z-index: 2;

	top: 60px;

	width: 100%;

	height: 293px;

	text-align: center;

}

.sec2-chl {

	position: absolute;

	bottom: 0;

	left: 0;

	z-index: 0;

}

.sec2-chr {

	position: absolute;

	bottom: 0;

	right: 0;

	z-index: 0;

}

.grayscale {

  	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */

  	filter: grayscale(100%);

}

.lity-content {

	border: solid 1px #ffffff;

}



.tab-news {

	font-family: 'navbarfont';

	font-size: 27pt;

	color: #fff;

}



.tab-news-header {

	width: 620px;

	padding: 7px 0px;

	margin-top: 5px;

	margin-left: 0px;

	border-bottom: 3px solid #ffb600;

	height: 53px;

}



.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {

	background-color: transparent;

	border: 0;

	color: #fdbf1e;

	opacity: 1;

}

.nav-tabs .nav-link {

	background-color: transparent;

	color: #fff;

	font-family: 'bodyfont';

	text-transform: uppercase;

	font-size: 10px;

	border: 0;

	padding: 0 1rem;

}



.nav-tabs .nav-item {

	border-right: 1px solid white;

	height: 10px;

}



.nav-tabs .nav-item:last-child {

	border: 0;

}



.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {

	border: 0;

	color: #fdbf1e;

}



.nav-tabs .nav-link:hover {

	border: 0;

	color: #fdbf1e;	

}



.nav-tabs .nav-link:focus-visible {

	border: 0 ;

}



.nav-tabs {

    border-bottom: 0;

    margin: 0 auto;

    text-align: center;

    display: inline-flex;

}

.col-right {

	background-color: #f4f4f4;

}

.back-btn {

	text-align: center;

    color: #ffffff;

    width: 90%;

    height: 100%;

    float: left;

    border: none;

}

.next-btn {

	text-align: center;

    color: #ffffff;

    width: 90%;

    height: 100%;

    float: right;

    border: none;

}

.head-lastupdate {

	float: left;

	width: 100%;

	text-align: center;

	font-family: 'poppinssemibold';

	text-transform: uppercase;

	font-size: 18px;

	color: #ffffff;

	padding: 15px 15px 25px 15px;

	background: rgb(63,88,168);

	background: -moz-linear-gradient(146deg, rgba(63,88,168,1) 0%, rgba(89,122,201,1) 100%);

	background: -webkit-linear-gradient(146deg, rgba(63,88,168,1) 0%, rgba(89,122,201,1) 100%);

	background: linear-gradient(146deg, rgba(63,88,168,1) 0%, rgba(89,122,201,1) 100%);

	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3f58a8",endColorstr="#597ac9",GradientType=1);

}

.latest-box {

	float: left;

	width: 100%;

	height: auto;

	padding: 0 15px;

}

.news-right {

	background-color: #f4f4f4;

	z-index: 1;

	position: relative;

	background: url("../images/bg-news.jpg") top center no-repeat;

}

.arrow-right {

	position: absolute;

    right: 20px;

    top: 50%;

    margin-top: -10px;

	color: #b9bcce;

}

.arrow-news {

	position: absolute;

    right: 10px;

    top: 50%;

    margin-top: -10px;

	color: #f6c945;

}

.ch {

	position: absolute;

	right: 0;

	bottom: 0;

	z-index: 0;

}

.ch-class {

	margin-top: 110px;

    width: auto;

    height: 152px;

    background: url("../images/bg-head-ch.png") top center no-repeat;

	padding-top: 1px;

	position: relative;

	z-index: 1;

}

.icon-class {

	width: 90px;

	height: 90px;

	overflow: hidden;

	background: url("../images/class-icon.png") no-repeat;

	margin: -30px auto 0 auto;

}

.icon-novice {

	background-position: 0px 0;

}

.icon-sword {

	background-position: -90px 0;

}

.icon-magician {

	background-position: -180px 0;

}

.icon-acolyte {

	background-position: -270px 0;

}

.icon-merchant {

	background-position: -360px 0;

}

.icon-archer {

	background-position: -450px 0;

}

.icon-thief {

	background-position: -540px 0;

}

.class-name {

	float: left;

    font-family: 'poppinssemibold';

    color: #ffffff;

    width: 100%;

    text-align: center;

	font-size: 54px;

}

.sub-class {

	float: left;

	margin-top: 310px;

}

.ch-show {

	position: relative;

	left: 110px;

	top: -220px;

	width: 100%;

	pointer-events: none;

	z-index: 1;

}

.ch-show img {

	width: 100%;

	height: 100%;

	max-width: 1080px;

	max-height: 1057px;

}

.ch-contentbox {

	position: absolute;

	width: 100%;

	height: auto;

	text-align: center;

	color: #ffffff;

	z-index: 2;

	margin-top: 60px;

	right: 0;

}

.head-ch {

	font-family: 'poppinssemibold';

    text-transform: uppercase;

    font-size: 18px;

}

.ch-icon {

	top: -3px;

    position: relative;

}

.ch-icon img {

	width: 35px;

	height: 35px;

}

.sub-head {

	width: 100%;

	height: auto;

	margin: 20px 0;

	font-size: 17px;

	padding: 0 20px;

}

.bg-play-novice {

	background: url("../images/video-novice.png") top center no-repeat;

}

.bg-play-bless {

	background: url("../images/video-bless.png") top center no-repeat;

}

.bg-play-curse {

	background: url("../images/video-curse.png") top center no-repeat;

}

.bg-play-focus {

	background: url("../images/video-focus.png") top center no-repeat;

}

.bg-play-swift {

	background: url("../images/video-swift.png") top center no-repeat;

}

.bg-play-blaze {

	background: url("../images/video-blaze.png") top center no-repeat;

}

.bg-play-freeze {

	background: url("../images/video-freeze.png") top center no-repeat;

}

.bg-play-breaker {

	background: url("../images/video-breaker.png") top center no-repeat;

}

.bg-play-trader {

	background: url("../images/video-trader.png") top center no-repeat;

}

.bg-play-duel {

	background: url("../images/video-duel.png") top center no-repeat;

}

.bg-play-tank {

	background: url("../images/video-tank.png") top center no-repeat;

}

.bg-play-shadow {

	background: url("../images/video-shadow.png") top center no-repeat;

}

.bg-play-toxin {

	background: url("../images/video-toxin.png") top center no-repeat;

}

.ch-video {

	height: 232px;

	padding-top: 66px;

}

.ch-video a {

	display: block;

}

.select-ch {

	background: url("../images/bg-select.png") top center no-repeat;

	width: 100%;

	height: auto;

	position: absolute;

	bottom: 0px;

	z-index: 2;

	padding-bottom: 15px;

}

.head-weapon {

	margin-top: -30px;

	margin-bottom: 10px;

}

/* Hide the images by default */

.mySlides {

  	display: none;

}

/* Add a pointer when hovering over the thumbnail images */

.cursor {

  	cursor: pointer;

}

/* Add a transparency effect for thumnbail images */

button.class {

	background: none;

	border: none;

  	filter: grayscale(100%);

	transition: transform .2s;

	transform: scale(0.95);

    margin: 0;

    padding: 0;

	max-width: 100px;

}



button.active,

.class:hover {

 	opacity: 1;

	transform: scale(1.2);

	filter: grayscale(0%);

}

button.active,

.class:link {

 	opacity: 1;

	transform: scale(1);

	filter: grayscale(0%);

}

.ch-m {

	text-align: center;

    position: absolute;

    top: 40px;

    width: 100%;

}

.class-btn-box {

	margin-top: -10px;

}

.mySlides {

	width: 100%;

}

.ch-small {

	margin-bottom: 5px;

}

@-webkit-keyframes zoom {

  0%   { transform: scale(110%); }

  100% { transform: scale(100%); }

}

@-moz-keyframes zoom {

  0%   { transform: scale(110%); }

  100% { transform: scale(100%); }

}

@-o-keyframes zoom {

  0%   { transform: scale(110%); }

  100% { transform: scale(100%); }

}

@keyframes zoom {

  0%   { transform: scale(110%); }

  100% { transform: scale(100%); }

}

.text-sec-title {

    width: 60px;

    flex: 0 0 auto;

	position: absolute;

	left: 0;

}

.text-sec-box {

    z-index: 10;

    position: relative;

    display: inline-block;

    margin-left: 50%;

    transform: translateX(-50%);

}

.text-sec {

    padding-top: 100%;

    transform: rotate(-90deg) translate(-100%, -50%);

    transform-origin: left top;

    white-space: nowrap;

    color: rgb(28, 29, 42);

    font-size: 0.625rem;

    letter-spacing: 0.25em;

	font-family: 'poppinssemibold';

}

.text-sec::after {

    content: "";

    display: inline-block;

    vertical-align: middle;

    width: 1.4em;

    height: 1px;

    margin-left: 0.5em;

    background-color: currentcolor;

}

.logo-fea {

	margin-bottom: 30px;

	text-align: center;

}

.text-hilight-fea {

	position: relative;

	width: 100%;

	height: auto;

	text-align: center;

	font-family: 'poppinssemibold';

	color: #ffffff;

	text-transform: uppercase;

}

.text-fea-img {

	float: left;

	width: 100%;

	height: auto;

	text-align: center;

	font-family: 'poppinssemibold';

	color: #ffffff;

	text-transform: uppercase;

	font-size: 16px;

	padding-top: 10px;

}

.text-box-img {

	float: left;

	width: 100%;

	height: auto;

	background-color: rgba(0, 0, 0, 0.7);

	background: rgba(0, 0, 0, 0.7);

	color: rgba(0, 0, 0, 0.7);

}

.text-hilight-fea2 {

	position: relative;

	width: 100%;

	height: auto;

	font-size: 50px;

	font-family: 'poppinssemibold';

	color: #ffffff;

	text-transform: uppercase;

	font-style: italic;

	line-height: 1;

}

.text-sub {

	color: #ffffff;

	font-size: 16px;

	padding: 0;

}

.text-sub-img {

	color: #ffffff;

	font-size: 14px;

    padding: 0 15px;

}

.mouse-fea {

	position: absolute;

	bottom: -140px;

	width: 100%;

}

.img-fea {

	float: left;

	width: 100%;

}

.fea-box-img {

	z-index: 2;

}

.float {

  	animation: float 2s ease-in-out infinite;

  	transform-origin: 50% 50%;

}

@keyframes float {

  	0% { transform: translateY(0) }

  	50% { transform: translateY(-6px) }

  	100% { transform: translateY(0) }

}

.ch-animate {

	position: absolute;

	top: 0;

}

.fea-img {

	margin-top: 40px;

	width: 100%;

	text-align: center;

	z-index: 2;

	padding: 0 15px;

}

.text-black {

	color: #000000;

}

/* Style the tab */

.tab {

}



/* Style the buttons that are used to open the tab content */

.tab button {

  	background-color: #929292;

	border: solid 5px #d8d8d8;

	color: #e6e4e3;

	padding: 10px 0;

	font-family: 'poppinssemibold';

	text-transform: uppercase;

	font-size: 15px;

	-webkit-border-radius: 50px;

	-moz-border-radius: 50px;

	border-radius: 50px;

	opacity: 0.9;

	width: 170px;

	-webkit-border-radius: 50px;

	-moz-border-radius: 50px;

	border-radius: 50px;

  	transition: 0.3s;

	height: 57px;

	cursor: pointer;

}



/* Change background color of buttons on hover */

.tab button:hover {

  	background-color: #4565a3;

    border: solid 5px #5e8fc2;

    color: #fff;

	opacity: 1;

}



/* Create an active/current tablink class */

.tab button.active {

  	background-color: #4565a3;

    border: solid 5px #5e8fc2;

    color: #fff;

	opacity: 1;

}

.select-novice {

  	background-color: #4565a3 !important;

    border: solid 5px #5e8fc2 !important;

    color: #fff;

	opacity: 1;

}



/* Style the tab content */

.tabcontent {

  display: none;

  padding: 6px 12px;

  border-top: none;

}

.tabcontent {

  animation: fadeEffect 1s; /* Fading effect takes 1 second */

}



/* Go from zero to full opacity */

@keyframes fadeEffect {

  from {opacity: 0;}

  to {opacity: 1;}

}

.container-classes {

	max-width: 1140px;

    width: 100%;

    height: auto;

    margin: 0 auto;

    position: relative;

}

.tag-blog {

	position: absolute;

	top: 0;

	right: 10px;

	z-index: 2;

	width: 98px;

	height: 113px;

}

.wrap-m {

	position: relative;

   	height: 100%;

}

.hvr-ripple-out:before {

    border: #3f5aa4 solid 6px;

    border-radius: 5px;

}

.carousel-indicators li {

	background-color: #b9bcce;

}

.carousel-indicators .active {

	background-color: #3f5aa4;

}

.carousel-indicators {

    position: relative;

    z-index: 15;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-pack: center;

    justify-content: center;

    list-style: none;

    width: 100%;

    padding: 12px 0;

    margin: 0;

	bottom: 0;

	background: url("../images/bg-indicator.png") bottom center repeat-x;

}

.carousel-control-next, .carousel-control-prev {

	opacity: 0.9;

	margin-top: -10%;

}

.arrow-left-hilight {

	left: 0;

	position: absolute;

}

.arrow-right-hilight {

	right: 0;

	position: absolute;

}

.badge {

	padding: 5px 10px;

    margin-right: 5px;

    margin-top: -1px;

    float: left;

	font-family: "tahoma";

}

.carousel-indicators li {

	width: 10px;

	height: 10px;

	border-radius: 15px;

}

.carousel-indicators .active {

	width: 30px;

}



/*Extra small devices (portrait phones, less than 576px)*/

@media (max-width: 320px) { 

	.bg-main {

	background: url("../images/bg-phone.jpg") no-repeat top center;

  	-webkit-background-size: cover;

  	-moz-background-size: cover;

  	-o-background-size: cover;

 	background-size: cover;

}

	.bg-fea1 {

	background: url("../images/bg-feature-sec1-m.jpg") no-repeat top center;

  	-webkit-background-size: cover;

  	-moz-background-size: cover;

  	-o-background-size: cover;

 	background-size: cover;

}

	button.class {

    	max-width: 35px;

	}

	.class-name {

		font-size: 36px;

	}

	.head-weapon {

		text-align: center;

		padding: 0 10%;

	}

	.logo-fea {

		padding: 0 30px;

		margin-bottom: 10px;

	}

	.mouse-fea {

		display: none;

	}

	.text-hilight-fea2 {

		font-size: 36px;

		text-align: center;

	}

	.ch-animate {

    	position: relative;

    	top: -40px;

    	width: 100%;

    	text-align: center;

	}

	.text-sub {

		text-align: center;

	}

	.bg-fea2 {

		padding: 0 0 50px 0;

	}

	.bg-fea3, .bg-fea5, .bg-fea7, .bg-fea9 {

		padding: 0;

	}

	.bg-fea4, .bg-fea6, .bg-fea8 {

		padding: 50px 0;

	}

	.gradient-blue {

		height: 60px;

	}

	.gradient-white {

		height: 90px;

	}

	.fea-img {

		margin-top: 10px;

	}

	.tab button {

		width: 125px;

		height: 47px;

		padding: 4px 0;

		margin-top: 50px;

	}

	.ch-contentbox {

		left: 0;

		margin-top: 0;

		bottom: 230px;

		height: 300px;

	}

	.ch-divider {

		display: none;

	}

	.sub-head {

		background-color: rgba(0, 0, 0, 0.5);

		background: rgba(0, 0, 0, 0.5);

		font-size: 13px;

		margin: 10px 0 0 0;

		padding: 10px;

	}

	.ch-show {

		display: none;

	}

	.ch-m {

		text-align: center;

		position: absolute;

		top: 10px;

	}

	.icon-class {

		display: none;

	}

	.ch-class {

		margin-top: 70px;

		height: auto;

		background: none;

	}

	.container-classes {

		height: 100%;

		width: 100%;

		float: left;

	}

	.tabcontent {

		padding: 0;

	}

	.head-ch {

		font-size: 14px;

	}

	.news-latest {

		padding: 10px;

	}

	.head-news {

    	font-size: 16px;

	}

	.hilight-latest {

		font-size: 14px;

		height: 36px;

	}

	.text-hilight-main {

    	font-size: 18px;

	}

	.head-lastupdate {

		font-size: 16px;

		padding: 10px;

	}

	.read-more-btn-m {

		margin-right: 10px;

	}

	.text-hilight-all {

		font-size: 21px;

	}

	.nav-tabs .nav-link {

		width: 150px;

		padding: 10px 0;

	}

	.read-more-btn {

		display: none;

	}

	.read-more-btn-m a {

		padding: 10px 20px;

	}

	.carousel-indicators {

		margin-bottom: 15px;

	}

	.tag-blog {

		display: none;

	}

	.navbar-nav {

		text-align: center;

		border-top: solid 2px #ebebeb; 

	}

	.ch-video {

	    background: none;

    	position: fixed;

    	top: -40px;

    	display: inline-block;

    	margin-left: -40px;

	}

}

@media (min-width: 321px) and (max-width: 575.98px) { 

	.bg-main {

	background: url("../images/bg-phone.jpg") no-repeat top center;

  	-webkit-background-size: cover;

  	-moz-background-size: cover;

  	-o-background-size: cover;

 	background-size: cover;

}

	.bg-fea1 {

	background: url("../images/bg-feature-sec1-m.jpg") no-repeat top center;

  	-webkit-background-size: cover;

  	-moz-background-size: cover;

  	-o-background-size: cover;

 	background-size: cover;

}

	.navbar-nav {

		text-align: center;

		border-top: solid 2px #ebebeb; 

	}

	.navbar-brand {

		font-size: 18px;

		margin-left: 20px;

	}

	.social-top-btn {

    	text-align: center;

   		padding: 10px 0 20px 0;

	}

	.text-hilight{

		font-size: 26px;

	}

	.text-hilight-main{

		font-size: 22px;

	}

	.footer-hilight {

		font-size: 24px;

	}

	.footer-sub {

		font-size: 12px;

	}

	.sec2-chl {

		display: none;

	}

	.sec2-chr {

		display: none;

	}

	.hilight-detail h1 {

		font-size: initial;

	}

	.content-blog {

		padding: 20px 20px 40px 20px;

	}

	.text-hilight-all {

		font-size: 21px;

	}

	.nav-tabs .nav-link {

		width: 150px;

		padding: 10px 0;

	}

	.hilight-m {

		height: 45px;

    	overflow: hidden;

	}

	.content-blog h1 {

	font-family: 'poppinssemibold';

    font-size: 18px;

}

	.content-blog h2 {

    font-family: 'poppinssemibold';

    font-size: 16px;

}

	.content-blog h3 {

    font-family: 'poppinssemibold';

    font-size: 14px;

}

	.content-blog h4 {

    font-family: 'poppinssemibold';

    font-size: 14px;

}

	.head-news {

    font-family: 'poppinssemibold';

    font-size: 16px;

    line-height: 21px;

}

	.highlight-btn {

		margin-bottom: 20px;

	}

	.hilight-latest {

		font-size: 14px;

		margin-bottom: 10px;

	}

	.content-box-latest {

		padding: 0 10px;

	}

	.head-lastupdate {

		font-size: 16px;

		padding: 10px;

	}

	.ch-class {

		margin-top: 100px;

		height: 100px;

	}

	.class-name {

		font-size: 36px;

	}

	button.class {

		max-width: 40px;

	}

	.head-weapon {

		text-align: center;

		padding: 0 20%;

	}

	.logo-fea {

		padding: 0 30px;

		margin-bottom: 10px;

	}

	.mouse-fea {

		display: none;

	}

	.text-hilight-fea2 {

		font-size: 36px;

		text-align: center;

	}

	.ch-animate {

    	position: relative;

    	top: -40px;

    	width: 100%;

    	text-align: center;

	}

	.text-sub {

		text-align: center;

	}

	.bg-fea2 {

		padding: 0 0 50px 0;

	}

	.bg-fea3, .bg-fea5, .bg-fea7, .bg-fea9 {

		padding: 0;

	}

	.bg-fea4, .bg-fea6, .bg-fea8 {

		padding: 50px 0;

	}

	.gradient-blue {

		height: 60px;

	}

	.gradient-white {

		height: 90px;

	}

	.fea-img {

		margin-top: 10px;

	}

	.tab button {

		width: 140px;

		height: 50px;

		padding: 4px 0;

	}

	.ch-contentbox {

		left: 0;

		margin-top: 0;

		bottom: 230px;

		height: 300px;

	}

	.ch-divider {

		display: none;

	}

	.sub-head {

		background-color: rgba(0, 0, 0, 0.5);

		background: rgba(0, 0, 0, 0.5);

		font-size: 13px;

		margin: 10px 0 0 0;

		padding: 10px;

	}

	.ch-m {

		text-align: center;

		position: absolute;

		top: 10px;

	}

	.ch-show {

		display: none;

	}

	.icon-class {

		display: none;

	}

	.ch-class {

		margin-top: 70px;

		height: auto;

		background: none;

	}

	.container-classes {

		height: 100%;

    	width: 100%;

    	float: left;

	}

	.tabcontent {

		padding: 0;

	}

	.head-ch {

		font-size: 14px;

	}

	.news-latest {

		padding: 10px;

	}

	.read-more-btn {

		display: none;

	}

	.read-more-btn-m a {

		padding: 10px 20px;

	}

	.carousel-indicators {

		margin-bottom: 15px;

	}

	.ch-video {

	    background: none;

    	position: fixed;

    	top: -40px;

    	display: inline-block;

    	margin-left: -40px;

	}

}



/*Small devices (landscape phones, 576px and up)*/

@media (min-width: 576px) and (max-width: 767.98px) {

	.navbar-nav {

		text-align: center;

		border-top: solid 2px #ebebeb; 

	}

	.navbar-brand {

		font-size: 18px;

		margin-left: 20px;

	}

	.social-top-btn {

    	text-align: center;

    	padding: 10px 0 20px 0;

	}

	.text-hilight{

		font-size: 36px;

	}

	.text-hilight-main{

		font-size: 36px;

	}

	.sec2-chl {

		display: none;

	}

	.sec2-chr {

		display: none;

	}

	.content-detail h2 {

		font-size: 16px;

	}

	.head-news {

    	font-size: 17px;

	}

	.hilight-latest {

		font-size: 14px;

		height: 23px;

		margin-bottom: 0;

	}

	.ch-class {

		margin-top: 100px;

		height: 110px;

	}

	.class-name {

		font-size: 40px;

	}

	button.class {

		max-width: 70px;

	}

	.head-weapon {

		text-align: center;

	}

	.mouse-fea {

		display: none;

	}

	.text-hilight-fea2 {

		font-size: 36px;

		text-align: center;

	}

	.ch-animate {

    	position: relative;

    	top: -40px;

    	width: 100%;

    	text-align: center;

	}

	.text-sub {

		text-align: center;

	}

	.bg-fea2 {

		padding: 100px 0 50px 0;

	}

	.bg-fea3, .bg-fea5, .bg-fea7, .bg-fea9 {

		padding: 0;

	}

	.bg-fea4, .bg-fea6, .bg-fea8 {

		padding: 50px 0;

	}

	.gradient-blue {

		height: 60px;

	}

	.gradient-white {

		height: 90px;

	}

	.fea-img {

		margin-top: 10px;

	}

	.tab button {

		width: 140px;

		height: 50px;

		padding: 4px 0;

	}

	.ch-contentbox {

		left: 0;

		margin-top: 0;

		bottom: 180px;

		height: 300px;

	}

	.ch-divider {

		display: none;

	}

	.sub-head {

		background-color: rgba(0, 0, 0, 0.5);

		background: rgba(0, 0, 0, 0.5);

		font-size: 13px;

		margin: 10px 0 0 0;

		padding: 10px;

	}

	.ch-m {

		text-align: center;

		position: absolute;

		top: 125px;

	}

	.icon-class {

		display: none;

	}

	.ch-class {

		margin-top: 70px;

		height: auto;

		background: none;

	}

	.ch-show {

		display: none;

	}

	.container-classes {

		height: 100%;

    	width: 100%;

    	float: left;

	}

	.tabcontent {

		padding: 0;

	}

	.head-ch {

		font-size: 14px;

	}

	.content-box {

		margin-bottom: 20px;

	}

	.news-latest {

		padding: 10px;

	}

	.carousel-indicators {

		margin-bottom: 15px;

	}

	.ch-video {

	    background: none;

    	position: fixed;

    	top: -40px;

    	display: inline-block;

    	margin-left: -40px;

	}

}



/*Medium devices (tablets, 768px and up)*/

@media (min-width: 768px) and (max-width: 991.98px) {

	.navbar-nav {

		text-align: center;

		border-top: solid 2px #ebebeb; 

	}

	.navbar-brand {

		font-size: 18px;

		margin-left: 20px;

	}

	.social-top-btn {

    	text-align: center;

    	padding: 10px 0 20px 0;

}

	.sec2-chl {

		display: none;

	}

	.sec2-chr {

		display: none;

	}

	.head-news {

    	font-size: 17px;

	}

	.hilight-latest {

		font-size: 14px;

		height: 23px;

		margin-bottom: 10px;

	}

	button.class {

		max-width: 80px;

	}

	.head-weapon {

		text-align: center;

	}

	.ch-class {

		margin-top: 100px;

		height: 115px;

	}

	.class-name {

		font-size: 44px;

	}

	.mouse-fea {

		display: none;

	}

	.text-hilight-fea2 {

		font-size: 36px;

		text-align: center;

	}

	.ch-animate {

    	position: relative;

    	top: -40px;

    	width: 100%;

    	text-align: center;

	}

	.text-sub {

		text-align: center;

	}

	.bg-fea2 {

		padding: 100px 0 50px 0;

	}

	.bg-fea3, .bg-fea5, .bg-fea7, .bg-fea9 {

		padding: 0;

	}

	.bg-fea4, .bg-fea6, .bg-fea8 {

		padding: 50px 0;

	}

	.gradient-blue {

		height: 60px;

	}

	.gradient-white {

		height: 90px;

	}

	.fea-img {

		margin-top: 10px;

	}

	.tab button {

		width: 180px;

		height: 47px;

		padding: 4px 0;

	}

	.ch-contentbox {

		left: 0;

		margin-top: 0;

		bottom: 300px;

		height: 300px;

	}

	.ch-divider {

		display: none;

	}

	.sub-head {

		background-color: rgba(0, 0, 0, 0.5);

		background: rgba(0, 0, 0, 0.5);

		font-size: 13px;

		margin: 10px 0 0 0;

		padding: 10px;

	}

	.ch-m {

		text-align: center;

		position: absolute;

		top: 30px;

	}

	.ch-show {

		display: none;

	}

	.icon-class {

		display: none;

	}

	.ch-class {

		margin-top: 70px;

		height: auto;

		background: none;

	}

	.container-classes {

		height: 100%;

    	width: 100%;

    	float: left;

	}

	.tabcontent {

		padding: 0;

	}

	.content-box {

		margin-bottom: 8px;

	}

	.carousel-indicators {

		margin-bottom: 15px;

	}

	.ch-video {

	    background: none;

    	position: fixed;

    	top: -40px;

    	display: inline-block;

    	margin-left: -40px;

	}

}



/*Large devices (desktops, 992px and up)*/

@media (min-width: 992px) and (max-width: 1199.98px) {

	.sec2-chl {

		display: none;

	}

	.sec2-chr {

		display: none;

	}

	.head-news {

    	font-size: 17px;

	}

	.hilight-latest {

		font-size: 14px;

		height: 41px;

	}

	.head-weapon {

		text-align: center;

	}

	.tab button {

		width: 180px;

		height: 47px;

		padding: 4px 0;

	}

	.ch-contentbox {

		left: 0;

		margin-top: 0;

		bottom: 330px;

		height: 300px;

	}

	.ch-divider {

		display: none;

	}

	.sub-head {

		background-color: rgba(0, 0, 0, 0.5);

		background: rgba(0, 0, 0, 0.5);

		font-size: 13px;

		margin: 10px 0 0 0;

		padding: 10px;

	}

	.ch-show {

		display: none;

	}

	.icon-class {

		display: none;

	}

	.ch-class {

		margin-top: 70px;

		height: auto;

		background: none;

	}

	.container-classes {

		height: 100%;

    	width: 100%;

    	float: left;

	}

	.tabcontent {

		padding: 0;

	}

	.content-box {

		margin-bottom: 8px;

	}

	.ch-video {

	    background: none;

    	position: fixed;

    	top: -40px;

    	display: inline-block;

    	margin-left: -40px;

	}

}



.navbar-bg {

	margin: 0;

	padding: 15px 0;

	background-color: rgb(10 38 84 / 90%);

	background: rgba(10, 38, 84, 0.90);

	border-bottom: solid 3px #fff;	

	height: 110px;

}

.main-container {

	margin: 0 auto;

}



.menu-divider {

	background: url(../img/menu-divider.png) no-repeat;

	height: 57px;

	width: 2px;

	padding: 0 15px;

	opacity: 0.2;

}



.server-status {

	background: url(../img/server-status.png) no-repeat;

	width: 361px;

	height: 73px;

}



.server-time {

	font-family: 'servertimefont';

	color: #fff;

	padding: 30px 21px;

	font-size: 15pt;

	width: 180px;

}



.server-statistics {

	width: 70px;

	margin-left: 108px;

	text-align: center;

}



.server-statistics table {

	font-family: 'servertimefont';

	font-size: 10pt;	

	text-align: center;

}



.server-statistics table tr {

	height: 26px;

}



.header-space {

	padding: 80px 0;

}



.navbar-collapse {

	z-index: 2;

}



.loginpanel {

	background: url(../img/login-panel.png) no-repeat;

	width: 534px;

	height: 385px;

	margin-top: 80px;

	padding: 117px 177px;

	z-index: 1;

}



input.textClass {

	background-color: rgb(23 24 31);

	border-color: rgb(47 47 51);

	color: rgb(68, 68, 68);

	width: 210px;

	border-radius: 5px;	

}



.login_row_main {

	width: 290px;

}



.login_row {

	margin-left: 78px;

}



div.login_row td {

	height: 40px;

}



.loginBtn {

	background: url(../img/loginbtn.png) no-repeat;

	width: 287px;

	height: 52px;

	border: 0;

}



.loginBtn:hover {

	opacity: 0.9;

}



.main-logo {

	background: url(../img/main-logo.png) no-repeat;

	width: 475px;

	height: 275px;

	animation: heartbeat 3s infinite; 

}





@keyframes heartbeat {

  0% {

    transform: scale( 1);    

  }

  20% {

    transform: scale( 0.9 ) ;

  } 

  40% {

    transform: scale( 0.8 ) ;

  }



}



.accountAction {

	width: 290px;

	margin: 10px 0;

	text-align: center;

}



.accountAction a{

	font-family: 'bodyfont';

	color: #ccae35;

	font-size: 8pt;	

}



.accountAction a:hover {

	color: #fff;

}



.logged {

	color: white;

	background: rgb(3 16 27);

	padding: 20px 20px;

	width: 289px;

	border-radius: 5px;	

}



.news-slider-container {

	background: url(../img/slider-news.png) no-repeat;

	height: 592px;

	padding-top: 35px;

	padding-left: 36px;

	width: 100%;

	max-width: 1060px;

	color: #fff;

}



#myCarousel {

	width: 100%;

	max-width: 986px;

}



.tab-content {

	max-width: 620px;

	background: rgba(2, 24, 56,0.8);

	margin-top: 15px;

	overflow-y: hidden;

	max-height: 333px;

}





.news-content td {

	font-family: 'bodyfont';

	font-size: 9pt;

	color: #fff;

	text-align: left;

	height: 27px;

	border: 0;

}



.news-content tr:nth-child(odd) {

	background-color: rgb(0 0 0 / 30%);

}



.news-content td a {

	color: #fff;

}



.news-content td a:hover {

	color: #f78103;

}



.news-content td.news-ind {

	width: 50px;

	padding-left: 25px;

}



.news-content td.news-cat {

	text-transform: uppercase;

	font-family: 'bodyfont';

	font-size: 9pt;

}



.news-content td.news-cat.news {

	color: #42bad5;

}



.news-content td.news-cat.event {

	color: #fdbf1e;

}



.news-content td.news-cat.update {

	color: #37d68d;

}



.news-content td.author {

	font-family: 'Arial';

	font-size: 9pt;

	color: #b9e1f0;

}



.rank-container {

	width: 1350px;

	padding-left: 147px;

}



.guild-rankings {

	background: url(../img/guild-rankings.png) no-repeat;

	width: 500px;

	height: 284px;

	padding: 0 15px;

	margin-top: 7px;

}



.guildrank-table {

	padding-top: 80px;

	color: white

}



.guildrank-table th {

	font-size: 9px;

	font-family: Arial;

	padding-left: 15px;

	color: #fff;

}



.guildrank-table td {

	padding: 2px 20px;

	font-size: 9pt;

	font-weight: bold;

	height: 31px;

	font-family: 'bodyfont';

}



.guildrank-table table {

	border-spacing: 15px;

}



.player-ranking {

	background: url(../img/ranking-bg.png) no-repeat;

	width: 693px;

	height: 724px;

	padding: 75px 30px;

}



.top3-rank {

	background: url(../img/top3-bg.jpg) no-repeat;

	width: 402px;

	height: 97px;
	padding: 0px 15px;

	overflow: hidden;

	margin: 0;

}



.top3-rank td {

	font-size: 7pt;

	color: #fff;

	font-family: 'bodyfont';

}



.top3-rank tr {

	line-height: 12px;

}



.player-chars {

	width: 253px;

	height: 85px;

	padding: 5px;

}



.player-avatar {

	background: url(../img/player-ladder.png) no-repeat;

	width: 76px;

	height: 85px;

}



.player-chars .nav-tabs .nav-item {

	border: 0;

}



.player-chars .nav-tabs .nav-link {

	background: url(../img/player-ladder.png) no-repeat;

	width: 76px;

	height: 85px;

}



.pvp3 {

	width: 140px;

	height: 140px;

	margin: -38px 0px 0px -51px;

}



.player-chars .nav-tabs .nav-link {

  	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */

  	filter: grayscale(100%);

}



.player-chars .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {

	background-color: transparent;

	border: 0;

	color: #fdbf1e;

	opacity: 1;

	 -webkit-filter: grayscale(0%) !important; /* Safari 6.0 - 9.0 */

  	filter: grayscale(0%) !important;

}





.player-chars .nav-tabs .nav-link:hover {

  	-webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */

  	filter: grayscale(0%);

}



.top3-rank .tab-content {

	margin: 0;

	background: transparent;

	max-height: 90px;

}



.top10-rankings {

	margin: 10px -28px;

}



.item-title {

	font-family: 'navbarfont';

	font-size: 19pt;

	padding: 0 28px;

}



.pvp-ladder th {

	font-size: 9px;

	font-family: Arial;	

	color: #fff;

}



.pvp-ladder {

	width: 100%;

	overflow-x: hidden;

}



.pvp-ladder table {

	width: 462px;

}



.pvp-ladder td {

	color: #fff;

	font-size: 9pt;

	font-weight: bold;

	font-family: 'bodyfont';

}



.pvp-ladder tr:nth-child(even) {

	background-color: rgb(0 0 0 / 60%);

}



.pvp-ladder tr {

	line-height: 14px;

}



.castleholders-rankings {

	margin-top: -410px;

}



.castle-container {

	width: 1190px;

}



.castle-holders {

	background: url(../img/castleholders.png) no-repeat;

	width: 600px;

	height: 390px;

}



.tab-castles {

	width: 415px;

	padding: 7px 0px;

	margin-top: 5px;

	margin-left: 140px;

	height: 50px;	

}



.tab-castles .nav-tabs .nav-item {

	border-right: 1px solid white;

	height: 10px;

}



.tab-castles .nav-tabs .nav-item:last-child{

	border: 0;

}



.tab-castles .nav-tabs .nav-link {

	background-color: transparent;

	color: #fff;

	font-family: 'bodyfont';

	text-transform: capitalize;

	font-size: 10px;

	border: 0;

	padding: 0 0.5rem;

}



.castle-holders .tab-content {

	max-width: 400px;

	margin: 0 auto;

	margin-top: 25px;

	overflow-y: hidden;

	max-height: 333px;	

	background: none;

}



.guild-flags {

	margin: 0;

	overflow: hidden;

}



.flag {

	background: url(../img/flag.png) no-repeat;

	width: 121px;

	height: 135px;

	padding-top: 52px;

	padding-left: 47px;

	margin-bottom: 20px;

}



.flag-offset {

	margin-left: 66px;

}



.topbs-alche {

	background: url(../img/topbs-alche.png) no-repeat;

	width: 466px;

	height: 211px;

	margin-top: 195px;

	margin-left: -33px;

	padding: 20px 25px;

	z-index: 1;

}



.item-title2 {

	font-family: 'navbarfont';

	font-size: 19pt;

}



.blacksmith-ladder {

	max-width: 175px;

	width: 100%;

	height: 140px;

	overflow: hidden;

	color: #fff;

	margin-bottom: 50px;

}



.blacksmith-ladder th {

	font-size: 9px;

	font-family: Arial;

	color: #fff;

}



.blacksmith-ladder tr {

	border-bottom: 1px solid #13a7e0;

	line-height: 11px;

}



.blacksmith-ladder tr:first-child {

	border: 0;

	line-height: 18px;

}



.blacksmith-ladder tr:last-child {

	border: 0;

}



.blacksmith-ladder td {

	color: #fff;

	font-size: 9pt;

	font-weight: bold;

	font-family: 'bodyfont';

}



.top-container {

	width: 175px;

	margin: 0 23px;

}



.features {

	background: url(../img/features-bg.png) no-repeat;

	background-position: top center;

	width: 100%;

	margin-top: -180px;

	min-height: 910px;

}



.feature-container {

	width: 1060px;

}



.server-featured {

	width: 710px;

	margin-left: 340px;

	padding-top: 200px;

}



.server-featured .tab-content {

	width: 710px;

	max-width: 710px;

	max-height: 400px;

	background: none;

}



.server-featured .tab-content img{

	border: 1px solid #128ed9;

}



.feature-buttons {

	height: 40px;

}



.feature-buttons .nav-tabs .nav-item {

	border: 0;

}



#fbtn1 {

	background: url(../img/f-btn1.jpg) no-repeat;

	width:236px;

	height: 35px;

}



#fbtn1:hover {

	background: url(../img/f-btn1-hover.jpg) no-repeat;

}



a#fbtn1.nav-link.active {

	background: url(../img/f-btn1-hover.jpg) no-repeat;

}



#fbtn2 {

	background: url(../img/f-btn2.jpg) no-repeat;

	width:236px;

	height: 35px;

}



#fbtn2:hover {

	background: url(../img/f-btn2-hover.jpg) no-repeat;

}



a#fbtn2.nav-link.active {

	background: url(../img/f-btn2-hover.jpg) no-repeat;

}





#fbtn3 {

	background: url(../img/f-btn3.jpg) no-repeat;

	width:236px;

	height: 35px;

}



#fbtn3:hover {

	background: url(../img/f-btn3-hover.jpg) no-repeat;

}



a#fbtn3.nav-link.active {

	background: url(../img/f-btn3-hover.jpg) no-repeat;

}



.fb-buttons {

	width: 710px;

	height: 100px;

	margin-left: -40px;

	margin-top: 20px;

}



.fb-follow, .fb-community{

	width: 345px;

	height: 86px;

}



.fb-follow {

	margin-right: 20px;

}



.fb-follow-btn {

	background: url(../img/fb-follow.png) no-repeat;

	height: 100%;

	display: block;

}



.fb-follow-btn:hover {

	background: url(../img/fb-followHover.png) no-repeat;

}



.fb-community-btn {

	background: url(../img/fb-community.png) no-repeat;

	height: 100%;

	display: block;

}



.fb-community-btn:hover {

	background: url(../img/fb-communityHover.png) no-repeat;

}



.about-server {

	background: url(../img/about-bg.png) no-repeat;

	background-position: top center;

	margin-top: -150px;

	min-height: 605px;

}



.about-container {

	width: 1060px;

}



.about-desc {

	margin-top: 80px;

	font-size: 14px;

	line-height: 1.5;

}



.about-title {

	font-family: 'navbarfont';

	font-size: 50pt;

}



.about-desc p {

	font-size: 14px;

	color: #fff;

}



.about-desc p.collapse:not(.show) {

    height: 42px !important;

    overflow: hidden;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;  

}



.about-desc p.collapsing {

    min-height: 42px !important;

}



.about-desc a.collapsed:after  {

	font-size: 8pt;

	text-decoration: underline;

	color: #ffc107 !important;

}



.about-desc a:not(.collapsed):after {

	font-size: 8pt;

	text-decoration: underline;

	color: #ffc107 !important;

}



.statistics-title {

	font-family: 'navbarfont';

	font-size: 34pt;

	color: #fff;

	margin-top: 40px;

}



.icon-chars {

	width: 79px;

	height: 69px;

}



.num-data {

	font-family: 'bodyfont';

	font-size: 27pt;

	color: #fff;

	margin-left: 25px;

	font-weight: bolder;

}



.text-data {

	font-family: 'bodyfont';

	font-size: 12pt;

	color: #fff;	

	margin-left: 25px;

}



.new-characters {

	margin-right: 40px;

}



.data-stats {

	margin: 0;

}



.footer {

	background: url(../img/footer-bg.jpg) no-repeat;

	background-color: #120137;

	min-height: 304px;

	background-size: cover;

}



.footer-container {

	width: 900px;

	margin-top: 30px;

}



.footer-info ul li {

	display: inline;

	text-decoration: none;

	padding: 0 10px;

	border-right: 1px solid #8d8d8d;

	color: #fff;

}



.footer-info ul li:last-child {

	border: 0;

}



.footer-info ul {

	margin: 0;

	padding: 0;

	padding-bottom: 40px;

}



.footer-info ul li a {

	color: #8d8d8d;

	text-decoration: none;

	font-family: 'navbarfont';

	font-size: 14pt;

	text-align: center;

}



.footer-info ul li a:hover {

	color: #fdbf1e!important;

}



.footer-copyrights {

	font-family: 'footerfont';

	font-size: 8pt;

}



.footer-info ul.social-buttons li {

	border: 0;

}



.soc-fb {

	background: url(../img/fb-button.png) no-repeat;

	width: 31px;

	height: 31px;

	display: inline-block;

}



.soc-dis {

	background: url(../img/discord-button.png) no-repeat;

	width: 31px;

	height: 31px;

	display: inline-block;

}



.soc-yt {

	background: url(../img/youtube-button.png) no-repeat;

	width: 31px;

	height: 31px;

	display: inline-block;

}



.soc-ig {

	background: url(../img/ig-button.png) no-repeat;

	width: 31px;

	height: 31px;

	display: inline-block;

}





.soc-fb:hover {

	background: url(../img/fb-button-hover.png) no-repeat;

}



.soc-dis:hover {

	background: url(../img/discord-button-hover.png) no-repeat;

}



.soc-yt:hover {

	background: url(../img/youtube-button-hover.png) no-repeat;

}



.soc-ig:hover {

	background: url(../img/ig-button-hover.png) no-repeat;

}



#submenu {

	color: #fff;

	background: none;

	font-size: 10pt;

}



#submenu a{ 

	color: #42bad5;

}



#submenu a:hover {

	text-decoration: none;

	color: #fdbf1e;

}





.admin-menu {

	color: #fff;

	background: none;

	font-size: 10pt;

}



.admin-menu a{

	color: #78aef9;

}

.admin-menu a:hover {

	text-decoration: none;

	color: #fdbf1e;

}



.admin-menu a:after {

	content: ' / ';

	color: white;

	text-decoration: none;

}



.toggler a {

	color: #f7e564;

}



.pages .page-num {

	color: #01d3f5;

}



.pages .current-page {

	color: #cc9808 !important;

	font-weight: bold;

}



.pages .page-prev, .pages .page-next {

	color: #b9f501;

}



.horizontal-table {

  display: block;

  width: 100%;

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;

  -ms-overflow-style: -ms-autohiding-scrollbar;

  }

  .horizontal-table > .table-bordered {

    border: 0; }

 

.vertical-table {

  display: block;

  width: 100%;

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;

  -ms-overflow-style: -ms-autohiding-scrollbar; }

  .horizontal-table > .table-bordered {

    border: 0; }   






.horizontal-table td {

	padding: 5px 10px;

	background: rgb(0 0 0 / 50%);

	color: #fff;

}

	

.horizontal-table th, .horizontal-table td {

	font-size: 9pt;

	border: 1px solid #38a6e8;

}



.horizontal-table th {

	padding: 5px 10px;

	background-color: #2c2d3a;

}



.vertical-table td {

	padding: 5px 10px;

	background: rgb(0 0 0 / 50%);

}

	

.vertical-table th, .vertical-table td {

	font-size: 9pt;

	border: 1px solid #38a6e8;

}



.vertical-table th {

	padding: 5px 10px;

	background-color: #2c2d3a;

}



.generic-form {

	border: 1px solid #42bad5;

	background: none;

}



.generic-form-table td p {

	color: #fff;

}

.generic-form-table th label {
	color: #fff;
}

.generic-form-table td div {
	color: #fff;
}

.search-form label, .search-form2 label {

	color: #fff;

}

.vertical-table th,td {
	color: #fff;
}


.sortable {

	color: #38a6e8;

	text-decoration: underline;

}



.sortable:hover {

	color: #fff;

}



#pagemenu {

	color: #fff;

}



#pagemenu a{

	color: #dfbd00;

}



#load{

    width:100%;

    height:100%;

    position:fixed;

    z-index:9999;

    background: #fff;

}



.preloader {

	width: 50%;

	max-width: 320px;

	height: 100%;

	max-height: 200px;

	margin: 40vh auto;

	text-align: center;

	font-size: 10pt;

	animation: heartbeat 1s infinite; 

}

.global-container {

	max-width: 1120px;

	font-family: 'footerfont';

	border-radius: 5px;

	margin: 40px auto;

	background: rgb(0 0 0 / 60%);

	margin-bottom: 50px;

	color: #fff;

	font-size: 9pt;

	padding: 35px;

}



.global-container h2,h3 {

	font-size: 35pt;

	text-decoration-color: #42bad5;

	width: unset;

	/* text-align: center; */

	margin: 20px 0px;

	border-bottom: 2px solid #42bad5;

	padding: 5px 0;

	font-family: 'navbarfont';

}



.global-container a {

	color: #42bad5;

}



.global-container:empty {

	display: none;

}

	

/*Extra large devices (large desktops, 1200px and up)*/

@media (min-width: 1200px) and (max-width: 1440px) { 

	.sec2-chl {

		display: none;

	}

	.sec2-chr {

		display: none;

	}

}





@media only screen and (max-width: 1350px){

	.rank-container {

		width: 1060px;

		padding-left: 0px; 

	}

	.player-ranking {

		background: url(../img/ranking-bg2.png) no-repeat;

		width: 467px;

		height: 475px;

		margin-top: 15px;

		padding: 65px 30px;

	}

	

	.guildrank-table {

		width: 490px;

	}

	

	.pvp-ladder table{

		width: 99.9%;

	}

	

	.castleholders-rankings {

		margin-top: -175px;

	}

	

}





@media only screen and (min-width: 1200px){

	.main-container {

		width: 1120px;

	}



}



@media only screen and (max-width: 1200px){

	.castle-container {

		width: 1060px;

	}

	.castle-holders {

		background: url(../img/castleholders2.png) no-repeat;

		width: 500px;

	}

	

	.tab-castles {

		margin-left: 65px;

	}

	

	.topbs-alche {

		margin-left: 0;

	}

}



@media only screen and (max-width: 1112px){

	.server-status {

		display: none !important;

	}

	.menu-divider {

		display: none !important;

	}

	.main-logo {

		background-size: 100%;

		width: 40%;

		height: 375px;

	}

	

}



@media only screen and (max-width: 1074px){

	.news-slider-container {

		background-position-x: -16px;

		padding-top: 35px;

		padding-left: 15px;

	}

	

	.feature-container {

		width: 100%;

	}

	

	.server-featured, .fb-buttons {

		margin-left:  auto;

		margin-right: auto;

	}

	

	.about-container {

		width: 100%;

		margin: 0 auto;

		padding: 0 10px;

	}

	

	.new-characters {

		margin-right: 10px;

	}

	

}



@media only screen and (max-width: 991px){

	.navbar-nav {

		margin-top: 33px;

		background: rgb(9 47 97 / 70%);

		background-color: rgba(9,47,97, 0.7);

	}

	

	.main-logo {

		display: none;

	}

	

	.rank-container {

		width: 100%;

	}

	

	.guild-rankings {

		width: 468px;

		margin: 0 auto;

		margin-bottom: 50px;

	}

	

	.player-ranking {

		margin: 0 auto;

		margin-bottom: 50px;

	}

	

	.castle-container {

		width: 100%;

	}

	

	.about-server {

		background-size: cover;

	}

	

}



@media only screen and (max-width: 952px){

	.castleholders-rankings {

		margin-top: 0px;

	}

		

	.castle-holders {

		margin: 0 auto;

		margin-bottom: 50px;

		width: 470px;

	}

	

	.topbs-alche {

		margin: 0 auto;

	}

	

	.footer-container {

		width: 100%;

	}

}



@media only screen and (max-width: 768px){

	.loginpanel {

		margin-top: 0px;

	}

	

	.tab-content {

		margin-top: 40px;

	}

	

	.server-featured {

		width: 100%;

	}

	.server-featured .tab-content {

		width: 100%;

		margin: 0 auto;

	}

	

	.feature-buttons .nav-tabs .nav-item {

		height: auto;

	}

	

	#fbtn1, #fbtn2, #fbtn3 {

		min-height: 30px;

		max-height: 35px;

		height: 35px;

		background-position-x: center;

	}

	

	a#fbtn1.nav-link.active, a#fbtn2.nav-link.active, a#fbtn3.nav-link.active, #fbtn1:hover, #fbtn2:hover, #fbtn3:hover   {

		background-position-x: center;

	}

	

	.fb-buttons {

		width: 100%;

	}

	

	.fb-follow , .fb-community {

		margin: 10px auto;

	}

	

	.footer-container {

		width: 100%;

	}

	

	.footer {

		background-size: cover;

	}

	

	.footer-info ul li {

		display: initial;

		border: 0;

	}

}



@media only screen and (max-width: 694px){

	#fbtn1, #fbtn2, #fbtn3 {

		width: 33vw;	

	}

	

}





@media only screen and (max-width: 425px){

	.loginpanel {

		width: 100%;

		height: 385px;

		margin-top: 0px;

		padding: 117px 98px;

		background-position-x: -79px;

	}

	

	.tab-news-header {

		width: 100%;

	}

	

	.nav-tabs .nav-item {

		border: 0;

	}

	

	.nav-tabs .nav-link {

		width: 75px;

	}

	

	.news-slider-container {

		padding-left: 0;

	}

	

	.main-logo {

		height: 275px;

	}

	

	.guild-rankings {

		background-position-x: -20px;

	}

	

	.player-ranking {

		background-position-x: -25px;

		padding: 75px 0px;

	}

	

	.guildrank-table {

		width: 100%;

	}

	

	.tab-castles {

		margin-left: 15px;

		margin-top: 30px;

	}		

	

	.topbs-alche {

		background-position: center center;

		width: 100%;

		padding: 20px 5px;

	}

	

	.monthly-statistics {

		width: 60%;

		margin: 0 auto

	}

	

	.topbs-alche {

		background: url(../img/topbs-alche-sm.png) no-repeat;

		height: 419px;

		width: 100%;

		background-position: center;

	}

	

	.top-container {

		width: 100%;

	}

	

	.blacksmith-ladder {

		width: 100%;

		max-width: 100%;

		margin-bottom: 30px;

	}

	

	.blacksmith-ladder table {

		width: 100%;

	}



}



@media (min-width: 321px) and (max-width: 575.98px){

	.nav-tabs .nav-link {

		padding: 0;

		width: 75px;

	}

	

	.tab-news-header {

		width: 100%;

	}

	

	.header-space {

		padding: 80px 0 0 0;

	}

		

	.tab-castles {

		margin-top: 30px;

	}

	

	.footer-info ul li {

		display: grid;

		border: 0;

		margin: 20px;

	}

	

	.footer-info ul.social-buttons li {

		display: initial;

	}

	

}



@media only screen and (max-width: 375px){

	.topbs-alche {

		background: url(../img/topbs-alche-sm.png) no-repeat;

		height: 419px;

		width: 100%;

		background-position: center;

	}

	

	.top-container {

		width: 100%;

	}

	

	.blacksmith-ladder {

		width: 100%;

		max-width: 100%;

		margin-bottom: 30px;

	}

	

	.blacksmith-ladder table {

		width: 100%;

	}

	

	.monthly-statistics {

		width: 65%;

		margin: 0 auto

	}

}



@media only screen and (max-width: 320px){

	.loginpanel {

		width: 100%;

		height: 385px;

		margin-top: 0px;

		padding: 117px 7px;

		background-position-x: -170px;	

	}

	

	.nav-tabs .nav-link {

		width: 75px;

	}

	

	.header-space {

		padding: 80px 0 0 0;

	}

	

	.guildrank-table td {

		font-size: 10px;

	}



	.player-ranking {

		background-position-x: -25px;

		padding: 75px 0px;

	}	

	

	.top3-rank {

		width: 100%;

	}

	

	.tab-castles {

		width: 100%;

	}

	

	.flag-offset {

		margin-left: 0px;

	}

	

	.monthly-statistics {

		width: 72%;

		margin: 0 auto

	}

	

	.footer-info ul li {

		display: grid;

		border: 0;

		margin: 20px;

	}

	

	.footer-info ul.social-buttons li {

		display: initial;

		margin: 0;

	}

}