/* Boostrap */
@media (min-width: 1000px) and (max-width:1280px) {
  .col-lg {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }
  .row-cols-lg-1 > * {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .row-cols-lg-2 > * {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .row-cols-lg-3 > * {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .row-cols-lg-4 > * {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .row-cols-lg-5 > * {
    flex: 0 0 20%;
    max-width: 20%;
  }
  .row-cols-lg-6 > * {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }
  .col-lg-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-lg-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-lg-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-lg-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-lg-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-lg-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
  .offset-lg-1 {
    margin-left: 8.333333%;
  }
  .offset-lg-2 {
    margin-left: 16.666667%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-4 {
    margin-left: 33.333333%;
  }
  .offset-lg-5 {
    margin-left: 41.666667%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-7 {
    margin-left: 58.333333%;
  }
  .offset-lg-8 {
    margin-left: 66.666667%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .offset-lg-10 {
    margin-left: 83.333333%;
  }
  .offset-lg-11 {
    margin-left: 91.666667%;
  }
}

/* Home Pages */
@media (min-width:2560px) {
	.server-info::before {
		margin-top:0;
		background-size:cover;
		background-position:center bottom;
	}
	
	#footer .render {
		right:25.8%;
	}
	
	#footer .navigation { 
		background-size:cover cover;
		background-position:center -250px;
	}
}

@media (max-width:1920px) {
	#footer .render {
		right:18.8%;
	}
}

@media (max-width:1680px) {
	#footer .render {
		right:13.8%;
	}
}

@media (max-width:1600px) {
	#footer .render {
		right:11%;
	}
}

@media (max-width:1440px) {
	#footer .render {
		right:7%;
	}
}

@media (max-width:1366px) {
	.server-info::before {
		margin-top:0;
		background-size:100%;
		background-position:center top;
	}
	
	#footer .render {
		right:5%;
	}
}

@media (min-width:1280px) {
	.header .logo {
		display:none;
	}
	
	.welcome {
		margin-top:20px;
	}
}

@media (min-width:1024px) {
	.d-lg-none {
		display:initial !important;
	}
}

@media (max-width:1280px) {
	body {
		overflow-x: hidden;
	}
	
	.welcome .render {
		margin-right:-18%;
	}
	
	.welcome .welcome-box .content .text {
		width:80%;
	}
	
	.control-panel {
		width:75%;
	}
}

@media (max-width:1024px) {
	.header .navbar-wrapper .container {
		left:0;
		right:0;
		margin:0;
		padding:0;
		width:100%;
		max-width:100%;
	}
	
	.header .navbar-wrapper {
		background:rgba(0,0,0,1);
	}
	
	.navbar-custom {
		z-index:1003;
		width:100%;
		margin:0;
		left:0;
		right:0;
	}
	
	.navbar-custom .navbar-logo {
		display:none;
	}
	
	.navbar-custom .navbar-toggler {
		position:absolute;
		top:30px;
		left:20px;
		outline:0;
		color:#fff !important;
		font-family:'Univers';
		text-transform:uppercase;
	}
	
	.navbar-custom .navbar-toggler:hover,
	.navbar-custom .navbar-toggler:active,
	.navbar-custom .navbar-toggler:focus {
		background:transparent !important;
	}
	
	.navbar-custom .navbar-toggler i {
		margin-right:5px;
	}
	
	.navbar-custom .navbar-collapse {
		position:absolute;
		z-index:1001;
		width:100%;
		max-width:100% !important;
		margin:0;
		left:0;
		right:0;
		top:98px;
		padding:20px 20px 60px 20px;
		background:rgba(0,0,0,1);
		background-repeat: no-repeat;
		height:535px;
		overflow:auto;
		overflow-x:hidden;
	}
	
	.navbar-custom .navbar-collapse .navbar-nav  {
		float:initial !important;
		clear:both;
		margin-top:0;
		padding:0 20px;
		padding-left:0;
	}
	
	.navbar-custom .navbar-collapse::-webkit-scrollbar-track {
		border-radius: 4px;
		background-color: #DCDCDC;
		margin-bottom:10px !important;
	}

	.navbar-custom .navbar-collapse::-webkit-scrollbar {
		width: 8px;
		background-color: transparent;
	}

	.navbar-custom .navbar-collapse::-webkit-scrollbar-thumb {
		border-radius: 0;
		background-color: #B7CA24;
		border-radius:4px;
	}
	
	.navbar-custom .navbar-collapse::-webkit-scrollbar-thumb:horizontal:hover,
	.navbar-custom .navbar-collapse::-webkit-scrollbar-thumb:vertical:hover,
	.navbar-custom .navbar-collapse::-webkit-scrollbar-thumb:horizontal:active,
	.navbar-custom .navbar-collapse::-webkit-scrollbar-thumb:vertical:active {
		background-color: #d4ee0d;
	}
	
	.navbar-custom .navbar-collapse .navbar-nav .nav-item {
		margin-left:10px;
		width:100%;
	}
	
	.navbar-custom .navbar-collapse .navbar-nav .nav-item .nav-link {
		text-align:left;
		margin-left:0;
	}
	
	.navbar-custom .navbar-collapse .navbar-nav .nav-item .nav-link::after {
		margin-left:0;
		text-align:left;
	}
	
	.navbar-custom .navbar-collapse .navbar-nav .nav-item.show .nav-link:hover:after,
	.navbar-custom .navbar-collapse .navbar-nav .nav-item.show .nav-link:focus:after {
		width:80px;
	}
	
	.navbar-custom .dropdown .dropdown-menu {
		width:100%;
		padding:0;
		background:transparent;
		border:0;
		border-radius:0;
		padding-bottom:10px;
	}
	
	.navbar-custom .dropdown .dropdown-menu:before,
	.navbar-custom .dropdown .dropdown-menu:after {
		display:none;
	}
	
	.navbar-custom .dropdown .dropdown-menu .dropdown-item {
		color:#fff;
	}
	
	.navbar-custom .dropdown .dropdown-menu .dropdown-item:hover {
		color:#B7CA25;
	}
	
	.navbar-custom .dropdown .dropdown-menu form {
		background:#FFFFFF;
		padding:10px 10px !important;
		border-radius:4px;
	}
	
	.navbar-custom .dropdown .dropdown-menu .links {
		background:#fff;
	}
	
	.navbar-custom .dropdown .dropdown-menu form::after {
		display: block;
		content: "";
		clear: both;
	}
	
	.header .logo {
		line-height:350px;
		text-align:center;
	}
	
	.server-information .placard {
		width:87%;
		overflow: hidden;
	}
	
	.server-information .placard .marquee {
		width:100%;
	}
	
	.header .server-status .search-wrapper .server-timer {
		width:80px;
	}
	
	.header .server-status .search-wrapper .server-timer .value {
		display:none;
	}
	
	.header .server-status .search-wrapper .search-database {
		width:270px;
		margin-left:0;
	}
	
	.header .server-status .search-wrapper .search-database input {
		width:120px;
	}
	
	.welcome .render {
		display:none;
	}
	
	.welcome .welcome-box .content {
		min-height:240px;
	}
	
	.welcome .welcome-box .content,
	.welcome .welcome-box .content .text {
		float:initial;
		width:100%;
	}
	
	.control-panel {
		width:90%;
	}
	
	.news .owl-news .owl-carousel .item {
		width:98%;
	}
	
	.rules .render {
		width:28%;
		margin-top:20px;
	}
	
	.rules .render .right {
		display:none;
	}
	
	.rules .text {
		width:69%;
	}
	
	#footer .navigation  {
		background-position:center -80px;
	}
	
	#footer .navigation .logo {
		display:none;
	}
	
	#footer .navigation .links {
		margin-left:0;
	}
}

@media (max-width:800px) {
	#fog:before {
		background-position:center bottom;
	}
	
	.server-information .placard {
		width:80%;
	}
	
	.header .server-status .status-wrapper .item {
		line-height:40px;
		margin-left:5px;
		margin-right:5px;
	}
	
	.header .server-status .status-wrapper .item:first-child {
		margin-right:30px;
	}
	
	.header .server-status .status-wrapper .item .value {
		display:none;	
	}
	
	.header .server-status .search-wrapper .server-timer {
		width:100%;
	}
	
	.header .server-status .search-wrapper .server-timer .value {
		display:initial;
	}
	
	.header .server-status .search-wrapper .search-database {
		position:absolute;
		margin-top:-80px;
		margin-right:0;
		right:0;
	}
	
	.navbar-custom .navbar-collapse .navbar-nav .nav-item {
		margin-left:10px;
		width:100%;
	}
	
	.welcome .welcome-box {
		padding-bottom:10px;
	}
	
	.welcome .welcome-box .content .text {
		overflow:auto;
		overflow-x:hidden;
		height:200px;
	}
	
	.welcome .welcome-box .content .text::-webkit-scrollbar-track {
		border-radius: 4px;
		background-color: #DCDCDC;
		margin-bottom:10px !important;
	}

	.welcome .welcome-box .content .text::-webkit-scrollbar {
		width: 8px;
		background-color: transparent;
	}

	.welcome .welcome-box .content .text::-webkit-scrollbar-thumb {
		border-radius: 0;
		background-color: #2556CF;
		border-radius:4px;
	}
	
	.welcome .welcome-box .content .text::-webkit-scrollbar-thumb:horizontal:hover,
	.welcome .welcome-box .content .text::-webkit-scrollbar-thumb:vertical:hover,
	.welcome .welcome-box .content .text::-webkit-scrollbar-thumb:horizontal:active,
	.welcome .welcome-box .content .text::-webkit-scrollbar-thumb:vertical:active {
		background-color: #000F32;
	}
	
	.control-panel {
		width:100%;
	}
	
	.control-panel .infos .items .item {
		margin-left:3.5px;
		margin-right:3.5px;
	}
	
	.control-panel .infos .items .item:nth-child(1),
	.control-panel .infos .items .item:nth-child(5) {
		margin-left:0;
	}
	
	.control-panel .infos .items .item:nth-child(4),
	.control-panel .infos .items .item:nth-child(8) {
		margin-right:0;
	}
	
	.news .render {
		display:none;
	}
	
	.server-info .content {
		margin-top:-20px;
	}
	
	.server-info .content .render {
		width:100%;
		height:280px;
		background-position:center bottom;
		background-size:350px;
	}
	
	.server-info .video {
		width:100%;
	}
	
	.server-info .left {
		left:0;
	}

	.server-info .right {
		right:0;
	}
	
	.ranking-tab {
		position:relative;
	}
	
	.ranking-tab .items {
		display:none;
	}
	
	.ranking-tab .menu {
		width:100%;
		display:initial;
	}
	
	.ranking-tab .menu .item {
		position:relative;
		display:block;
		margin:0 0 0 auto !important;
		outline:0;
		color:#fff;
		width:250px;
		background: #B7CA24;
		border-color:#B7CA24;
		text-shadow: rgb(142, 184, 36) 1px 0px 0px, rgb(142, 184, 36) 0.540302px 0.841471px 0px, rgb(142, 184, 36) -0.416147px 0.909297px 0px, rgb(142, 184, 36) -0.989992px 0.14112px 0px, rgb(142, 184, 36) -0.653644px -0.756802px 0px, rgb(142, 184, 36) 0.283662px -0.958924px 0px, rgb(142, 184, 36) 0.96017px -0.279415px 0px;
		
	}
	
	.ranking-tab .items {
		position:absolute;
		z-index:1001;
		right:0;
		width:280px;
		background:#FFFFFF;
		padding:10px;
		border-bottom-left-radius:4px;
		border-bottom-right-radius:4px;
	}
	
	.ranking-tab .items .item {
		float:initial;
		display:block;
		width:100%;
		margin:5px 0;
		border-radius:4px !important;
	}
	
	.ranking-tab .menu .item .desc,
	.ranking-tab .items .item .desc {
		width:70%;
	}
	
	.ranking {
		height:680px;
	}
	
	.ranking .owl-ranking .item .head {
		text-align:left;
	}
	
	.ranking .owl-ranking .contents .base {
		float:initial;
		width:100%;
		min-height:auto;
		height:auto;
		margin:10px 0;
	}
	
	.ranking .owl-ranking .contents .base .image {
		width:15%;
		height:120px;
		margin-bottom:0;
	}
	
	.ranking .owl-ranking .contents .base .guild-image {
		margin-top:0;
	}
	
	.ranking .owl-ranking .contents .base .content {
		margin-left:1%;
		width:42%;
		height:120px;
		margin-bottom:0;
	}
	
	.ranking .owl-ranking .contents .base .footer {
		float:left;
		margin-top:30px;
		margin-bottom:0;
		margin-left:1%;
		width:41%;
	}
	
	.ranking .owl-ranking .contents .footer .level::after {
		content: none;
		display: initial;
		clear: initial;
	}
	
	.ranking .owl-ranking .contents .base::after {
		content: "";
		display: table;
		clear: both;
	}
	
	.rules .render {
		display:none;
	}
	
	.rules .text {
		float:initial;
		width:100%;
	}
	
	#footer .render {
		background:url('../images/bg-footer-render-small.png') no-repeat;
		background-position:right bottom;
		width:225px;
		height:350px;
	}
	
	[data-notify="container"] {
		width:65% !important;
		max-width:initial !important;
	}
}

@media (max-width:720px) {
	.container {
		margin:0;
		width:100%;
		max-width:100%;
	}
	
	#fog,
	.header {
		height:610px;
	}
	
	.header .server-status .status-wrapper {
		width:35%;
	}
	
	.header .server-status .status-wrapper .item {
		margin-right:2.2px;
		margin-left:2.2px;
	}
	
	.header .server-status .peaker-wrapper {
		width:30%;
	}
	
	.header .server-status .search-wrapper {
		width:35%;
	}
	
	.server-information .container {
		padding:0;
	}
	
	.server-information .info-wrapper::after {
		left:120px;
	}
	
	.control-panel {
		width:100%;
		height:auto;
		margin-bottom: 20px;
	}
	
	.itemshop .owl-itemshop {
		width:55%;
	}
	
	.itemshop .render {
		width:45%;
		background-size:80%;
		background-position:right bottom;
	}
	
	.woe-schedule .owl-woe-schedule .owl-carousel .item .base .content {
		width:80%;
	}
	
	#footer .navigation  {
		background-position:center center;
	}
}

@media (max-width:640px) {
	#fog,
	.header {
		height:560px;
	}
	
	.header .logo {
		line-height:250px;
		text-align:center;
	}
	
	.header .logo img {
		width:250px;
	}
	
	.server-info .content .render {
		background:url('../images/render/info-small.png') no-repeat;
		background-position:center bottom;
		background-size:180px;
		height:286px;
	}

	.woe-schedule .owl-castles {
		width:100%;
		margin-left:auto;
		margin-right:auto;
	}
	
	.woe-schedule .owl-castles .item {
		margin-left:10px;
		margin-right:10px;
	}
	
	.woe-schedule .owl-castles .item .content {
		margin-left: auto;
		margin-right: auto;
	}
	
	.woe-countdown {
		width:100%;
	}
	
	.woe-countdown .base {
		width:100%;
	}
	
	.woe-countdown .base .next {
		width:28%;
	}
	
	.woe-countdown .base .timer {
		width:72%;
	}
	
	#footer .render {
		display:none;
	}
	
	#footer .navigation,
	#footer .navigation .links {
		width:100%;
	}
	
	#footer .navigation .links .items {
		width:33.3333333333%;
		margin-left:0 !important;
		margin-right:0 !important;
	}
}

@media (max-width: 540px) {
	#fog,
	.header {
		height:540px;
	}
	
	#fog:before {
		background-size:initial !important;
		background-position:center center !important;
	}
	
	.server-information .placard {
		width:75%;
	}
	
	.header .server-status .container {
		padding:0;
	}
	
	.header .server-status .status-wrapper {
		width:32%;
		margin-top:5px;
	}
	
	.header .server-status .status-wrapper .item {
		max-width:100px;
		text-align:center;
	}

	.header .server-status .status-wrapper .item:first-child {
		margin-right:5px;
	}
	
	.header .server-status .status-wrapper .item:first-child {
		margin-left:5px;
	}
	
	.header .server-status .peaker-wrapper {
		width:36%;
	}
	
	.header .server-status .search-wrapper {
		width:32%;
	}
	
	.news .filter {
		margin-top:-50px;
	}
	
	.itemshop .render {
		background-size:90%;
	}
	
	.server-info .content .render {
		height:302px;
	}
	
	.server-info .left,
	.server-info .right {
		width:150px;
	}
	
	.ranking .owl-ranking .contents .base .image {
		width:25%;
	}
	
	.ranking .owl-ranking .contents .base .content {
		width:32%;
	}
	
	.ranking .owl-ranking .contents .base .guild-image {
		margin-top:-20px;
		height:140px;
	}
	
	.woe-schedule {
		height:550px;
	}
	
	.woe-countdown {
		width:80%;
		margin:-120px auto 0 auto;
	}
	
	.woe-countdown .base .next {
		float:initial;
		width:100%;
		text-align:center;
	}
	
	.woe-countdown .base .timer {
		float:initial;
		width:100%;
		margin-top:20px;
	}
	
	.woe-schedule .owl-woe-schedule .owl-carousel .item .base .content {
		width:75%;
	}
	
	#footer .navigation  {
		background-size:120%;
		background-position:center center;
	}
	
	[data-notify="container"] {
		width:92% !important;
		max-width:initial !important;
	}
}

@media (max-width: 533px) {
	#fog,
	.header {
		height:487px;
	}
	
	.header .logo {
		line-height:180px;
	}
	
	.header .server-status .search-wrapper,
	.header .server-status .status-wrapper {
		width:33%;
	}
	
	.header .server-status .status-wrapper .item .icon {
		width:100%;
		text-align:center;
	}
	
	.header .server-status .peaker-wrapper {
		width:34%;
	}
	
	.woe-countdown {
		width:85%;
	}
}

@media (max-width: 480px) {
	#fog,
	.header {
		height:580px;
	}
	
	.server-information .placard {
		width:72%;
	}
	
	.header .logo {
		line-height:240px;
	}
	
	.header .server-status .status-wrapper .item {
		width:40px;
	}
	
	.header .server-status .status-wrapper .item .icon {
		width:100%;
		text-align:center;
	}
	
	.header .server-status .search-wrapper .server-timer {
		float:left;
		width:100%;
	}
	
	.header .server-status .search-wrapper .server-timer .icon {
		margin-left:14px;
		left:0;
	}
	
	.news {
		margin-top:20px;
	}
	
	.news .filter {
		margin-top:-70px;
	}
	
	.itemshop .owl-itemshop {
		float:initial;
		width:100%;
	}
	
	.itemshop .render {
		display:none;
	}
	
	.server-info .content {
		margin-top:-20px;
	}
	
	.server-info .left,
	.server-info .right {
		margin-top:0;
		width:45%;
	}
	
	.server-info .content .render {
		background:none;
	}
	
	.woe-schedule .owl-woe-schedule .owl-carousel .item .base .content {
		width:85%;
	}
	
	.woe-schedule .owl-castles .item {
		margin:0 5px;
		width:auto;
	}
	
	.woe-schedule .owl-castles .content {
		margin:0 auto;
	}
	
	.woe-countdown {
		width:90%;
	}
	
	.rules .text .left,
	.rules .text .right {
		float:initial;
		width:100%;
	}
	
	#footer .navigation  {
		background-size:130%;
	}
}

@media (max-width: 414px) {
	body {
		margin-bottom:550px;
	}
	
	.server-information .placard {
		width:68%;
	}
	
	.header .server-status .status-wrapper {
		float:left;
		width:37%;
	}
	
	.header .server-status .peaker-wrapper {
		float:right;
		width:50%;
	}
	
	.header .server-status .search-wrapper {
		float:left;
		width:13%;
	}
	
	.header .server-status .search-wrapper .server-timer .value {
		display:none;
	}
	
	.header .server-status .search-wrapper .search-database {
		right:0;
		left:0;
		margin:-150px auto 0 auto !important;
	}
	
	.woe-countdown {
		width:97.5%;
	}
	
	.woe-countdown .container {
		padding:0;
	}
	
	#footer {
		margin-top:550px;
		height:550px;
	}
	
	#footer .navigation  {
		background-size:cover;
		height:390px;
	}
	
	#footer .navigation .links .items {
		width:50%;
	}
	
	#footer .navigation .links .items:nth-child(3) {
		float:right;
	}
	
	#footer .navigation .links .items:nth-child(4) {
		clear:both;
		margin-top:20px;
	}
}

@media (max-width: 375px) {
	.server-information .placard {
		width:65%;
	}
	
	.header .server-status .status-wrapper {
		width:36%;
	}
	
	.header .server-status .status-wrapper .item {
		width:35px;
	}
	
	.woe-countdown .base .timer .item {
		margin-left:3.6px;
		margin-right:3.6px;
	}
}