@media (min-width: 1000px) {
    .col-xl {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%
    }

    .col-xl-auto {
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: none
    }

    .col-xl-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%
    }

    .col-xl-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%
    }

    .col-xl-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%
    }

    .col-xl-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%
    }

    .col-xl-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%
    }

    .col-xl-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%
    }

    .col-xl-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%
    }

    .col-xl-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%
    }

    .col-xl-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%
    }

    .col-xl-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%
    }

    .col-xl-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%
    }

    .col-xl-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%
    }

    .order-xl-first {
        -ms-flex-order: -1;
        order: -1
    }

    .order-xl-last {
        -ms-flex-order: 13;
        order: 13
    }

    .order-xl-0 {
        -ms-flex-order: 0;
        order: 0
    }

    .order-xl-1 {
        -ms-flex-order: 1;
        order: 1
    }

    .order-xl-2 {
        -ms-flex-order: 2;
        order: 2
    }

    .order-xl-3 {
        -ms-flex-order: 3;
        order: 3
    }

    .order-xl-4 {
        -ms-flex-order: 4;
        order: 4
    }

    .order-xl-5 {
        -ms-flex-order: 5;
        order: 5
    }

    .order-xl-6 {
        -ms-flex-order: 6;
        order: 6
    }

    .order-xl-7 {
        -ms-flex-order: 7;
        order: 7
    }

    .order-xl-8 {
        -ms-flex-order: 8;
        order: 8
    }

    .order-xl-9 {
        -ms-flex-order: 9;
        order: 9
    }

    .order-xl-10 {
        -ms-flex-order: 10;
        order: 10
    }

    .order-xl-11 {
        -ms-flex-order: 11;
        order: 11
    }

    .order-xl-12 {
        -ms-flex-order: 12;
        order: 12
    }

    .offset-xl-0 {
        margin-left: 0
    }

    .offset-xl-1 {
        margin-left: 8.333333%
    }

    .offset-xl-2 {
        margin-left: 16.666667%
    }

    .offset-xl-3 {
        margin-left: 25%
    }

    .offset-xl-4 {
        margin-left: 33.333333%
    }

    .offset-xl-5 {
        margin-left: 41.666667%
    }

    .offset-xl-6 {
        margin-left: 50%
    }

    .offset-xl-7 {
        margin-left: 58.333333%
    }

    .offset-xl-8 {
        margin-left: 66.666667%
    }

    .offset-xl-9 {
        margin-left: 75%
    }

    .offset-xl-10 {
        margin-left: 83.333333%
    }

    .offset-xl-11 {
        margin-left: 91.666667%
    }
}

@media (min-width:2560px) {
    body {
        background-color: #006fff
    }

    #footer::after {
        right: 25.8%
    }

    #footer .navigation {
        background-size: 100% !important;
        background-position: center center !important
    }
}

@media (max-width:1920px) {
    body {
        background-color: #0070fe
    }

    #footer::after {
        right: 18.8%
    }
}

@media (max-width:1680px) {
    body {
        background-color: #006DFF
    }

    #footer::after {
        right: 13.8%
    }
}

@media (max-width:1600px) {
    body {
        background-color: #006CFF
    }

    #footer::after {
        right: 11%
    }
}

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

@media (max-width:1366px) {
    #footer::after {
        right: 5%
    }
}

@media (max-width: 1024px) {
    .navbar-custom {
        width: 100%;
        position: absolute;
        top: 0;
        margin: 0;
        left: 0;
        background: #FFF;
        border-radius: 0
    }

    .navbar-custom .navbar-toggler {
        top: 30px;
        left: 20px;
        outline: 0;
        color: #065ec9;
        text-transform: uppercase
    }

    .navbar-custom .navbar-toggler:hover,
    .navbar-custom .navbar-toggler:focus,
    .navbar-custom .navbar-toggler:active {
        background: transparent;
        color: #013A88
    }

    .navbar-custom .navbar-toggler i {
        margin-right: 6px
    }

    .navbar-custom .navbar-collapse {
        position: absolute;
        z-index: 1001;
        width: 100%;
        left: 0;
        top: 60px;
        padding: 20px;
        background: url(../images/logo.png) no-repeat, url(../images/menu-toggle.png) no-repeat, #fff;
        background-position: calc(100% - 180px) top, right calc(100% - 30px);
        height: 80vh;
        overflow: auto;
        overflow-x: hidden
    }

    .navbar-custom .navbar-nav {
        display: block;
        width: 100%;
        padding: 0 !important;
        margin-left: 0 !important
    }

    .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: #fea444;
        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: #fd8f17
    }

    .navbar-custom .navbar-nav li {
        margin-left: 10px !important;
        padding: 0
    }

    .navbar-custom .navbar-nav li a {
        text-align: left;
        margin-left: 0;
        padding: 5px 0;
        font-size: 14px;
        font-weight: 700
    }

    .navbar-custom .navbar-nav .nav-item .nav-link i {
        min-width: 40px;
        text-align: center;
        color: #fd8f17
    }

    .navbar-custom .navbar-nav .nav-item .nav-link::after {
        margin-top: 0
    }

    .navbar-custom .navbar-nav .nav-item.show .nav-link:hover:after,
    .navbar-custom .navbar-nav .nav-item.show .nav-link:focus:after {
        width: 80px
    }

    .navbar-custom .dropdown .dropdown-menu {
        width: 400px;
        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 form {
        padding: 10px 0 !important
    }

    .navbar-custom .dropdown .dropdown-menu label {
        color: #fff
    }

    .header {
        padding-top: 60px
    }

    .header .logo {
        margin-top: 1px;
        background-position: right calc(100% + 75px)
    }

    .wrapper-center {
        width: 655px;
        margin-right: 0
    }

    .wrapper-center:after {
        content: "";
        display: table;
        clear: both
    }

    .wrapper-right {
        width: 100%
    }

    .wrapper-xs-main {
        display: flex;
        flex-flow: row wrap
    }

    .wrapper-xs-left {
        float: right;
        order: 3;
        width: 215px
    }

    .wrapper-xs-center {
        order: 2;
        float: left;
        width: 435px;
        margin-right: 5px
    }

    .wrapper-xs-right {
        order: 1;
        float: left;
        width: 280px
    }

    .wrapper-xs-right:before {
        content: "";
        display: table;
        clear: both
    }

    .home .news .filter li button {
        width: 218px
    }

    .home .news .content .items,
    .home .news .content .not-found {
        width: 410px
    }

    .home .news .content .items .item .description {
        width: 330px
    }

    .home .slider-container li.anim-slide .content {
        background-position: top left !important
    }

    .home .hall-of-fame {
        margin-top: 10px;
        width: 280px;
        float: left
    }

    .home .quick-link {
        width: 655px;
        float: right
    }

    .home .quick-link .item {
        float: left;
        position: relative;
        margin: 0 3px;
        width: 214px;
        height: 250px
    }

    .home .quick-link .item:first-child {
        margin-left: 0
    }

    .home .quick-link .item:last-child {
        margin-right: 0
    }

    .home .quick-link .item .cover {
        float: initial;
        margin: 20px auto 0;
        width: 110px;
        height: 110px;
        border: 1px solid #fff;
        border-radius: 50%
    }

    .home .quick-link .item:nth-child(1) .cover img {
        width: 89px;
        margin-top: -32px;
        margin-left: 10px
    }

    .home .quick-link .item:nth-child(2) .cover img {
        width: 120px;
        margin-top: -27px;
        margin-left: -5px
    }

    .home .quick-link .item:nth-child(3) .cover img {
        width: 108px;
        margin-top: -21px;
        margin-left: 2px
    }

    .home .quick-link .item .content {
        float: initial;
        text-align: center;
        width: 100%
    }

    .home .quick-link .item .title h2,
    .home .quick-link .item .desc {
        text-align: center
    }

    .home .ranking .filter li a {
        min-width: 55.5px
    }

    .home .ranking .content .view {
        width: 120px
    }

    .home .ranking .content .positions {
        width: 270px
    }

    .home .woe-info {
        width: 100%
    }

    .home .server-info {
        width: 100%
    }

    .server-info .fb_iframe_widget {
        width: 100%
    }

    .server-info .fb_iframe_widget iframe {
        width: 100%;
        border-radius: 4px;
        height: 350px !important
    }

    #footer::after {
        right: 0;
        width: 340px;
        background: url(../images/bg-footer-render.png) no-repeat;
        background-position: left bottom
    }
}

@media (max-width:800px) {
    body {
        background-position: center 60px;
        background-size: cover cover
    }

    .header {
        position: relative;
        background-size: 100% !important
    }

    .header .logo img {
        margin-left: 0
    }

    .navbar-custom .navbar-collapse {
        background: url(../images/logo.png) no-repeat, url(../images/menu-toggle.png) no-repeat, #fff;
        background-size: 250px, 300px;
        background-position: calc(100% - 30px) top, right calc(100% - 30px);
        height: 80vh;
        overflow: auto;
        overflow-x: hidden
    }

    .top-bar .left {
        position: absolute;
        bottom: 20px
    }

    .top-bar .right {
        width: 680px;
        position: absolute
    }

    .wrapper-left,
    .wrapper-right {
        width: 100%
    }

    .wrapper-center {
        width: 100%;
        margin: 10px 0 0
    }

    .wrapper-xs-main {
        display: flex;
        flex-flow: row wrap
    }

    .wrapper-xs-left {
        float: right;
        order: 3;
        width: 342px;
        margin-left: 5px;
        margin-right: 0
    }

    .wrapper-xs-center {
        order: 1;
        float: left;
        width: 100%
    }

    .wrapper-xs-right {
        order: 2;
        float: left;
        width: 353px
    }

    .home .control-panel .left {
        width: 480px
    }

    .home .control-panel .right {
        width: 140px
    }

    .home .control-panel .right .btn {
        line-height: 80px
    }

    .home .control-panel .form-group {
        margin-bottom: 5px
    }

    .home .control-panel .form-group .form-control {
        padding: 20px
    }

    .home .control-panel .form-group:last-child {
        margin-bottom: 0
    }

    .home .control-panel .footer {
        margin-top: 30px
    }

    .home .menu-left .items {
        display: none
    }

    .home .menu-left .head .toggle {
        display: initial
    }

    .home .menu-left .hidden {
        display: none
    }

    .home .menu-left .open {
        display: initial
    }

    .home .hall-of-fame {
        float: left;
        width: 300px;
        height: 345px
    }

    .home .hall-of-fame .head h2,
    .home .hall-of-fame .head p {
        text-align: center
    }

    .home .hall-of-fame .content .left,
    .home .hall-of-fame .content .right {
        float: initial;
        width: 100%
    }

    .home .hall-of-fame .read-more {
        margin-top: 30px
    }

    .home .hall-of-fame .content {
        height: 200px
    }

    .home .quick-link {
        float: right;
        width: 395px
    }

    .home .quick-link .item {
        float: left;
        display: inline-block;
        width: 100%;
        height: auto;
        margin: 2px 0
    }

    .home .quick-link .item .cover {
        float: left;
        width: 80px;
        height: 80px;
        margin: 20px 5px 10px
    }

    .home .quick-link .item:nth-child(1) .cover img {
        width: 69px;
        margin-top: -30px;
        margin-left: 6px
    }

    .home .quick-link .item:nth-child(2) .cover img {
        width: 90px;
        margin-top: -24px;
        margin-left: -5px
    }

    .home .quick-link .item:nth-child(3) .cover img {
        width: 79px;
        margin-top: -16px;
        margin-left: 1px
    }

    .home .quick-link .item .content {
        float: right;
        width: 280px;
        padding: 25px 6px 15px;
        text-align: left
    }

    .home .quick-link .item .title h2,
    .home .quick-link .item .desc {
        text-align: left
    }

    .home .news .filter li button {
        width: 233px
    }

    .home .news .content .items {
        width: 460px
    }

    .home .news .content .items .item .description {
        width: 380px
    }

    .home .ranking {
        margin-top: 0
    }

    .home .ranking .content .positions {
        width: 520px
    }

    .home .woe-info,
    .home .server-info {
        margin-top: 10px
    }

    .woe-info .head .title,
    .woe-info .items .item .content {
        width: 250px
    }

    #footer::after {
        display: none
    }

    #footer .navigation .logo img {
        width: 180px
    }

    #footer .navigation .links {
        width: 480px;
        margin-right: 0;
        margin-left: 10px
    }

    #footer .navigation .links .items {
        width: 156px;
        margin-right: 0 !important;
        margin-left: 5px
    }

    #footer .navigation .links .items:nth-child(2) {
        margin-left: 0
    }
}

@media (max-width:720px) {
    body {
        background-size: 150%
    }

    .header {
        height: 460px
    }

    .header .logo {
        height: 318px;
        background-size: 380px
    }

    .header .logo img {
        margin-top: 80px
    }

    #footer .container,
    .top-bar .container,
    .header .container,
    .home {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: auto;
        right: auto;
        max-width: none
    }

    .home .row {
        width: 100%;
        margin: 0
    }

    .wrapper-xs-left {
        width: 322px
    }

    .wrapper-xs-right {
        width: 322px
    }

    .top-bar .content .right {
        width: 650px
    }

    .main-content .home,
    .main-content .sub-content {
        border-radius: 0;
        width: 100%
    }

    .home .control-panel .left {
        width: 420px
    }

    .home .news .filter li button {
        width: 216.5px
    }

    .home .news .content .items {
        width: 400px
    }

    .home .news .content .items .item .description {
        width: 320px
    }

    .home .quick-link {
        float: right;
        width: 345px
    }

    .home .quick-link .item .content {
        width: 250px;
        padding-top: 15px
    }

    .home .ranking .content .positions {
        width: 480px
    }

    .woe-info .head .title,
    .woe-info .items .item .content {
        width: 220px
    }

    #footer .navigation .links {
        width: 460px
    }

    #footer .navigation .links .items {
        width: 150px
    }
}

@media (max-width:640px) {
    .header .logo {
        height: 318px;
        background-size: 380px
    }

    .top-bar .content .right {
        width: 575px;
        position: absolute
    }

    .wrapper-xs-left {
        width: 284px
    }

    .wrapper-xs-right {
        width: 284px
    }

    .home .control-panel .left {
        width: 380px
    }

    .home .news .filter li button {
        width: 191px
    }

    .home .news .content .items {
        width: 320px
    }

    .home .news .content .items .item .description {
        width: 250px
    }

    .home .hall-of-fame {
        float: left;
        width: 250px;
        height: 345px
    }

    .home .quick-link {
        float: right;
        width: 315px
    }

    .home .quick-link .item .content {
        width: 220px
    }

    .home .ranking .content .positions {
        width: 400px
    }

    .woe-info .head .title,
    .woe-info .items .item .content {
        width: 175px
    }

    #footer .navigation .logo {
        display: none
    }

    #footer .navigation .links {
        width: 580px
    }

    #footer .navigation .links .items {
        width: 170px
    }
}

@media (max-width: 540px) {
    .header {
        height: 450px
    }

    .header .logo {
        height: 308px;
        background-size: 380px
    }

    .header .logo img {
        margin-top: 80px
    }

    .top-bar .content .right {
        width: 475px
    }

    .home .control-panel .left {
        width: 260px
    }

    .home .control-panel .right {
        margin-top: 18px
    }

    .home .news .filter li button {
        min-width: 60px;
        width: 157.2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .home .news .content {
        background: #F7F7F7
    }

    .home .news .content .items {
        width: 100%
    }

    .home .news .content .items .item .description {
        width: 355px
    }

    .home .hall-of-fame {
        float: initial;
        width: 100%;
        height: 250px
    }

    .home .hall-of-fame .content {
        height: auto
    }

    .home .hall-of-fame .content .left {
        float: left;
        width: 80px;
        padding: 10px;
        text-align: center
    }

    .home .hall-of-fame .content .right {
        float: right;
        margin-top: 15px;
        width: 360px
    }

    .home .hall-of-fame .read-more {
        margin-top: 10px
    }

    .home .quick-link {
        float: initial;
        width: 100%
    }

    .home .hall-of-fame .head h2,
    .home .hall-of-fame .head p {
        text-align: left
    }

    .home .quick-link .item .content {
        width: 365px;
        padding-top: 30px
    }

    .home .ranking .content .positions {
        width: 300px
    }

    .wrapper-xs-left,
    .wrapper-xs-right {
        width: 100%;
        margin-left: 0;
        margin-right: 0
    }

    .woe-info {
        width: 100%
    }

    .woe-info .head .title,
    .woe-info .items .item .content {
        width: 360px
    }

    .server-info {
        width: 100%;
        position: relative;
        text-align: center
    }

    #footer .navigation .links {
        width: 495px;
        margin-left: 0
    }

    #footer .navigation .links .items {
        width: 160px
    }
}

@media (max-width: 533px) {
    .top-bar .content .right {
        width: 465px
    }

    .community-bar {
        width: 280px
    }

    .community-bar .search-database input {
        width: 138px
    }

    .home .news .filter li button {
        min-width: 60px;
        width: 155px
    }

    .home .news .content .items .item .description {
        width: 350px
    }
}

@media (max-width: 480px) {
    .navbar-custom .navbar-collapse {
        background: #fff;
        height: 80vh;
        overflow: auto;
        overflow-x: hidden
    }

    .navbar-custom .dropdown .dropdown-menu {
        width: 100%
    }

    .header .logo {
        background: none;
        text-align: center
    }

    .header .logo img {
        margin-top: 120px
    }

    .top-bar .left {
        position: absolute;
        bottom: auto;
        right: 20px;
        margin-top: 45px
    }

    .top-bar .content .right {
        width: 410px;
        float: initial
    }

    .top-bar .community-links {
        position: absolute;
        margin-top: 50px
    }

    .community-bar,
    .community-bar .search-database {
        width: 100%
    }

    .community-bar .search-database input {
        width: 268px
    }

    .home .control-panel .left {
        width: 210px
    }

    .home .news .filter li button {
        min-width: 60px;
        width: 137.2px
    }

    .home .news .content {
        height: 330px
    }

    .home .news .content .items .item .description {
        width: 300px
    }

    .home .hall-of-fame .content .right {
        float: right;
        margin-top: 15px;
        width: 300px
    }

    .home .quick-link .item .content {
        width: 300px;
        padding-top: 30px
    }

    .home .ranking .filter li a {
        min-width: 1px;
        width: 50px
    }

    .home .ranking .content .view {
        float: initial;
        margin: 0 auto
    }

    .home .ranking .positions {
        width: 100% !important;
        float: initial;
        margin-top: 20px
    }

    .woe-info .head .title,
    .woe-info .items .item .content {
        width: 300px
    }

    #footer .navigation .links {
        width: 435px
    }

    #footer .navigation .links .items {
        width: 140px
    }
}

@media (max-width: 414px) {
    body {
        background-size: 180%
    }

    .top-bar .left {
        position: absolute;
        bottom: 20px;
        left: 20px
    }

    .top-bar .content .right {
        width: 350px;
        float: initial
    }

    .top-bar .community-links {
        position: absolute;
        margin-top: 50px
    }

    .community-bar .search-database input {
        width: 208px
    }

    .header .logo img {
        margin-top: 90px
    }

    .home .control-panel .left {
        width: 190px
    }

    .home .control-panel .right {
        width: 100px
    }

    .home .news .filter li button {
        min-width: 60px;
        width: 115.2px
    }

    .home .news .content .items .item .description {
        width: 230px
    }

    .home .quick-link .item .content {
        width: 240px;
        padding-top: 30px
    }

    .home .hall-of-fame .content .right {
        width: 240px
    }

    .home .ranking .filter li {
        margin: 0
    }

    .home .ranking .filter li a {
        width: 45px;
        margin: 0
    }

    .woe-info .head .title,
    .woe-info .items .item .content {
        width: 240px
    }

    #footer .navigation .links {
        width: 367px
    }

    #footer .navigation .links .items {
        width: 110px
    }

    #footer .navigation .links .items:nth-child(3) {
        width: 135px
    }
}

@media (max-width: 375px) {
    body {
        background-size: 190%
    }

    .top-bar .content .right {
        width: 310px
    }

    .community-bar .search-database input {
        width: 168px
    }

    .home .control-panel .left {
        width: 150px
    }

    .home .news .filter li button {
        min-width: 60px;
        width: 102.2px
    }

    .home .news .content .items .item .description {
        width: 195px
    }

    .home .hall-of-fame .content .right {
        width: 200px
    }

    .home .quick-link .item .content {
        width: 210px;
        padding-top: 30px
    }

    .home .ranking .filter li a {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 41px;
        margin: 0
    }

    .woe-info .head .title,
    .woe-info .items .item .content {
        width: 210px
    }

    #footer .navigation .links {
        width: 330px
    }

    #footer .navigation .links .items {
        width: 96px
    }

    #footer .navigation .links .items:nth-child(3) {
        width: 125px
    }
}