@media only screen and (max-width:1260px){
	.container{
        width:770px
    }
    header nav .left,header nav .right{
        width:50%
    }
    header nav .right a.register{
        margin-left:20px
    }
    header nav a{
        white-space:nowrap
    }
    .left a,.right a{
        font-size:15px
    }
    .left a{
        margin-right:10px
    }
    header .logo,header .server-about,header .startgame,header .realms{
        width:50%
    }
    header {
        background: url('../images/bg-header-index.jpg') no-repeat top 10% center;
    }
    main .news .item .content .txt{
        padding:8px
    }
    main .news .item .content .txt .infos a.see-more{
        float:none;
        margin:0 auto;
        display:block;
        text-align:center
    }
    footer .buttons{
        background-size:contain
    }
    footer .buttons:after{
        width:100%
    }
    footer .buttons a img{
        height:55px;
        margin-top:0
    }
    footer .buttons a{
        font-size:17px
    }
    main .news .item{
        width:50%
    }
    main .news .item .content .pic{
        width:100%
    }
    main .news .item .content .pic img{
        width:100%
    }
	main .news .item .content .txt {
		padding: 16px;
	}
	main .news .item .content .txt .infos {
		margin-top: 15px;
	}
	main .news .item .content .txt h4 {
		min-height: 96px;
	}
    main .news .item .content .txt .infos a.see-more{
        float:right
    }
    .server-about .about-text p{
        font-size:20px;
    }
    header .about-text {
        min-height: 124px;
    }
	main .news .item .content .txt h3{
		font-size: 22px;
	}
    .raceclass-icons img {
        width: 22px;
    }
    header .realms.r3 {
        width: 380px;
        margin-top: 87px;
    }
}
@media only screen and (max-width:780px){
    .container h2{
		padding-top:0px;
	}
    h2 {
        margin-bottom: 10px;
        line-height: 1;
        font-weight: 900;
        font-size: 30px;
        text-transform: uppercase;
        color: transparent;
        background: linear-gradient(to bottom, #fff, #b6daff);
        -webkit-background-clip: text;
        margin-right: 20px;
        display: inline-block;
    }
    main .head a.see-more {
        background-repeat: no-repeat;
        background-position: 10px 50%;
        font-size: 12px !important;
        padding: 10px;
    }
	.container{
        width:360px
    }
    header nav .left,header nav .right{
        width:100%;
        line-height:40px
    }
    header nav .right a.lang{
        display:inline-block
    }
    header .logo,header .server-about,header .startgame,header .realms{
        width:100%
    }
    main .news .item{
        width:100%
    }
    footer .buttons{
        height:400px;
        background-size:cover
    }
    footer .buttons a{
        padding:20px 10px;
        width:50%;
        height:134px
    }
    footer .buttons:after{
        height:400px;
        background-size:cover
    }
    footer .copy .side{
        width:100%;
        margin-bottom:20px
    }
    main:not(.page_content){
        margin-bottom:260px
    }
    main.inner .txt-content .big-table td{
        padding:3px;
        font-size:10px
    }
    .fs-content .super_message+table tr,.fs-content .super_message+table td{
        display:block;
        max-width:100%
    }
    .fs-content .super_message+table td{
        padding:10px
    }
    main .txt-big{
        font-size:24px
    }
    .head h1{
        font-size:30px
    }
    main.inner .txt-content td a{
        font-size:inherit
    }
    .login_wrappers{
        max-width:94%
    }
    .profile_details{
        width:100%
    }
    header>.container{
        position:relative
    }
    header nav{
        position:absolute;
        z-index:20;
        overflow:hidden;
        width:50px;
        height:50px;
        left:0;
        top:35px;
        padding:10px;
        background:rgba(0,0,0,0.7)
    }
    header nav:hover{
        padding:15px;
        width:220px;
        height:auto;
        overflow:visible
    }
    header nav:before{
        display:block;
        content:"";
        width:30px;
        height:30px;
        background:linear-gradient(to bottom, #82bbfb 20%, transparent 21%, transparent 40%, #82bbfb 41%, #82bbfb 60%, transparent 61%, transparent 80%, #82bbfb 81%);
        transition:height .3s;
        margin-bottom:10px
    }
    header nav:hover:before{
        opacity:0;
        height:0
    }
    header .logo{
        margin-top:100px;
        background-size:contain
    }
    header nav .right{
        text-align:left;
        line-height:normal;
        height:60px
    }
    header nav .left{
        text-align:left;
        line-height:normal;
        height:125px
    }
    header nav .right a{
        margin-left:0 !important;
        margin-top:10px;
        display:block;
    }
    header nav .left a{
        display:block;
        margin-bottom:10px;
    }
    header {
        background: url('../images/bg-header-index.jpg') no-repeat 61% 0;
        background-size: 1700px auto;
    }
    header.inner {
        background: url('../images/bg-header-inner.jpg') no-repeat 61% 0;
        background-size: 1700px auto;
    }
    main .news .item .content .txt h3 {
        font-size: 18px;
    }
    .nav-md .navbar-brand,.nav-sm .navbar-brand,.nav-md .navbar-nav>li>a,.nav-sm .navbar-nav>li>a{
        line-height:normal
    }
    .nav-md .nav>li>a,.nav-sm .nav>li>a{
        padding:5px 10px
    }
    .nav-md ul.nav,.nav-sm ul.nav{
        margin-bottom:10px;
        padding-top:10px
    }
    .nav-md .row_main.tile_count,.nav-sm .row_main.tile_count{
        display:flex;
        flex-wrap:wrap;
        justify-content:space-between
    }
    .nav-md .tile_count .tile_stats_count,.nav-sm .tile_count .tile_stats_count{
        width:49%;
        float:none
    }
    .nav-md .tile_count .tile_stats_count,.nav-sm .tile_count .tile_stats_count{
        padding:10px;
        border:none;
        background:rgba(255,255,255,0.05);
        margin-bottom:2%
    }
    .nav-md .tile_count .tile_stats_count .count,.nav-sm .tile_count .tile_stats_count .count{
        line-height:26px
    }
    .nav-md .tile_count .tile_stats_count:before,.nav-sm .tile_count .tile_stats_count:before{
        display:none
    }
    .nav-md .x_panel,.nav-sm .x_panel{
        padding:20px 0 0 0
    }
    .nav-md .right_col,.nav-sm .right_col{
        min-height:100vh !important
    }
    .nav-md .x_title h2,.nav-sm .x_title h2{
        width:100%
    }
    .nav-md .navbar-nav .open .dropdown-menu,.nav-sm .navbar-nav .open .dropdown-menu{
        background:#000;
        border:1px solid rgba(255,255,255,0.2);
        top:30px;
        width:170px
    }
    .nav-md .dropdown-menu>li>a:focus,.nav-sm .dropdown-menu>li>a:focus,.nav-md .dropdown-menu>li>a:hover,.nav-sm .dropdown-menu>li>a:hover{
        background:#000;
        color:#fff
    }
    .nav-md .table.table-hover td:first-child,.nav-sm .table.table-hover td:first-child{
        background:rgba(255,255,255,0.05)
    }
    .nav-md #sidebar-menu,.nav-sm #sidebar-menu{
        overflow-y:scroll;
        width:100%;
        height:calc(100vh - 60px)
    }
    .nav-md .well.profile_view .text-center,.nav-sm .well.profile_view .text-center{
        width:100%
    }
    .nav-md .x_title h2,.nav-sm .x_title h2{
        white-space:nowrap
    }
    .nav-md .nav_menu,.nav-sm .nav_menu{
        background-size:cover
    }
    .nav-md .top_nav .navbar-right,.nav-sm .top_nav .navbar-right{
        width:calc(100% - 70px);
        display:flex;
        flex-wrap:wrap;
        justify-content:flex-end
    }
    .nav-md .top_nav .navbar-right li,.nav-sm .top_nav .navbar-right li{
        float:none
    }
    .nav-md .top_nav .navbar-right li:nth-child(1),.nav-sm .top_nav .navbar-right li:nth-child(1){
        order:2
    }
    .nav-md .top_nav .navbar-right li:nth-child(2),.nav-sm .top_nav .navbar-right li:nth-child(2){
        order:1
    }
    .nav-md .top_nav .navbar-right li:nth-child(3),.nav-sm .top_nav .navbar-right li:nth-child(3){
        order:4
    }
    .nav-md .top_nav .navbar-right li:nth-child(4),.nav-sm .top_nav .navbar-right li:nth-child(4){
        order:3
    }
    .nav-md .top_nav .navbar-right li:nth-child(5),.nav-sm .top_nav .navbar-right li:nth-child(5){
        order:5
    }
    .nav-sm ul.nav.child_menu{
        left:0;
        top:100%;
        width:100%
    }
    .nav-sm ul.nav.child_menu li{
        padding:0
    }
    footer{
        padding-top:100px;
        background:none;
        height: 200px;
    }
    main .news .item .content .txt .infos a.see-more{
        float:right
    }
    main .news .item .content .txt h4{
        min-height:0
    }
    header nav .right a.lang{
        position:fixed;
        right:10px;
        top:50px
    }
    header nav .right a.lang:first-child{
        top:10px
    }
    footer{
        z-index:11
    }
    main.inner .news .item{
        width:100%
    }
    .modal-dialog.modal-notify.modal-info{
        width:300px !important
    }
    .modal.fade.in{
        top:20%
    }
    .server-about{
        margin-top:-20px
    }
    .server-about .about-text p{
        font-size:21.4px
    }
    .corner-image a img{
        width:120px
    }
    nav .dropdown>a{
        pointer-events:none
    }		
    .modal-content-fs.text-center{
        top:270px
    }
	main .news .item .content .txt h4{
		font-size: 17px;
	}
    footer {
        padding-top: 0;
        background: none;
        margin-top: -215px;
    }

    main {
        margin-top: -323px;
    }

    header .social{
        bottom:5px;
        padding: 0 0px;
        right: 8px;
        position: fixed;
    }

    header .social img{
        width:  70%;
    }
  
    input {
        width: 100%;
        font-size: 24px;
        margin: 6px 0;
    }

    select {
        width: 100%;
        font-size: 22px;
        margin: 6px 0;     
    }

    .btn-small {
        font-size: 12px;
        font-weight: 600;
    }

    .raceclass-icons img {
        width: 20px;
    }
    .dropdown-content{
        margin-left: 16px;
    }

	.left a {
		font-size: 18px;
	}
    .dropdown-content a {
        font-size: 14px;
		margin-bottom: 0px !important;
    }

    main.inner img .middle {
        margin: 0px 0px 0px 0px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
    }

    header .realms.r3 {
        background: none;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 25px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    header .realms.r3 .see-more {
        display: inline-block;
        color: #2c6eb5;
        padding: 10px 15px;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 5px;
        text-transform: uppercase;
        font-weight: 800 !important;
        font-size: 12px !important;
    }
}