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

    /*MENU*/
    .menu-black-bg {
        display: none;
        position: fixed;
        background: rgba(0, 0, 0, 0.8);
        width: 100%;
        height: 100%;
        z-index: 2;
    }

    header.top-bar .menu-left-mobile {
        float: left;
        line-height: 58px;
    }

    header.top-bar .container {
        padding: 0;
    }

    header.top-bar .menu-left {
        float: none;
        position: fixed;
        background: var(--main-bg);
        width: 100%;
        top: 0;
        display: none;
        z-index: 500;
        box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
        pointer-events: auto;
        height: 100%;
        overflow-y: scroll;
    }


    header.top-bar .menu-left-mobile {
        float: right;
        padding: 0 10px;
        background-color: var(--main-color);
        border-bottom: 2px solid #FFF;
    }

    header.top-bar .menu-left-mobile a {
        background-color: unset;
        color: #FFF;
        transition: all 0.3s;
        border: none;
        font-size: 19px;
        cursor: pointer;
        display: inline-block;
        text-align: center;
        border-radius: 0;

    }



    header.top-bar ul.menu {
        display: block;
        float: none;
    }

    header.top-bar .menu-left ul li {
        float: none;
        width: 100%;
        text-align: center;
        padding: 0;
        height: auto;
        border-bottom: 1px solid #0000001a;
    }

    header.top-bar .menu-left a {
        width: 100%;
        height: 60px;
        display: block;
        cursor: pointer;
    }

    header.top-bar ul li.active::after {
        display: none
    }

    header.top-bar ul.menu li a:hover {
        color: #FFF;
    }

    header.top-bar .menu-right ul li a.button {
        line-height: 35px;
        min-width: 17px;
        font-size: 16px;
    }

    header.top-bar .menu-right ul li a.button.message span {

        top: 4px;
        right: 5px;
    }

    header.top-bar ul.menu li .submenu {
        position: unset;
        width: 100%;
        left: 0;
        box-sizing: border-box;
        grid-template-columns: repeat(3, 1fr);
        border-bottom: none;
        border-top: none;

    }

    header.top-bar ul.menu li .submenu.active {
        display: block;
        padding: 0;
    }

    header.top-bar ul.menu li .submenu .submenu_col {
        margin-bottom: 10px;
        box-sizing: border-box;
        border: none;
        text-align: left;
    }

    header.top-bar ul.menu li .submenu .submenu_col:last-child {
        margin-bottom: 0px;
    }

    header.top-bar ul.menu li .submenu .submenu_col span {
        padding: 6px;
        display: inline-block;
        font-weight: bold;
        width: 100%;
        box-sizing: border-box;
        text-align: left;
        background: var(--main-color2);
    }

    header.top-bar ul.menu li .submenu .submenu_col img.featuring {
        /* width:0 */
    }

    header.top-bar ul.menu li .submenu .submenu_col ul {
        list-style: none;
    }

    header.top-bar ul.menu li .submenu .submenu_col ul li {
        display: list-item;
        line-height: 1;
        height: auto;
        margin-left: 0px;
        padding: 5px 0;
    }

    header.top-bar ul.menu li .submenu .submenu_col ul li a,
    header.top-bar ul.menu li .submenu .submenu_col a {

        height: auto;
        text-align: left;
        padding: 3px;

    }

    header.top-bar ul.menu li .submenu .submenu_col a.button {
        width: auto;
        display: inline-block;
        padding:5px;
    }

    header.top-bar .menu-right {
        padding-right: 10px;
    }

    /*FOOTER*/
    footer ul li {
        padding-right: 10px;
    }

    footer ul li a {
        font-size: 14px;
    }

    /* NEWS */
    .home-news {
        grid-template-columns: 1fr;
    }

    section.newsList h2 {

        font-size: 20px;

    }

    /*CSS SPECIAL*/
    .container {
        width: 100%;
        overflow: hidden;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .container.page {
        overflow: unset;

    }

    .promo-block {
        height: 260px;
    }

    .promo-block,
    .promo-block.one {
        height: 260px;
    }

    /* BLOCK */
    .block.s100 {
        width: 100%;
    }

    .block.s90 {
        width: 80%;
    }

    .block.s80 {
        width: 80%;
    }

    .block.s75 {
        width: 60%;
    }

    .block.s60 {
        width: 60%;
    }

    .block.s50 {
        width: 50%;
    }

    .block.s47 {
        width: 47.5%;
    }

    .block.s33 {
        width: 33.33336%;
    }

    .block.s45 {
        width: 45%;
    }

    .block.s40 {
        width: 40%;
    }

    .block.s25 {
        width: 40%;
    }

    .block.s20 {
        width: 20%;
    }

    .block.s10 {
        width: 20%;
    }

    .customized-home {
        width: 95%
    }

    /*BUTTON & BADGES*/
    a.button-bage {
        border-radius: 20px;
        font-size: 13px;
        padding: 4px 8px;

    }

    /* POPUP */
    #popup {
        width: 90%;
        left: 5%;

    }

    /*CHARACTER SELECT*/
    div.charlist .charbox {
        width: calc(calc(100% / 7) - 8px);
        height: 80px;

    }

    div.charlist .charbox span {
        font-size: 20px;
        line-height: 136px;
        opacity: 1
    }

    div.charlist .charboxquick {
        width: 72px;
        height: 40px;
    }

    div.charlist .charboxquick span {
        font-size: 17px;
        line-height: 40px;
    }

    div.charlist2 .charbox {
        width: 100%;
    }

    div.toggleSearch {
        height: 20px;
        font-size: 15px;

    }

    /*COMBO*/
    li.combo-item .combo .comboTxt {
        font-size: 13px;
        float: left;
    }

    li.combo-item .combo .comboImg,
    li.combo-item .combo .comboBadges,
    li.combo-item .combo .comboButton {
        float: left;
        width: 100%;
    }

    /*INPUT*/
    img.input {
        height: 30px;
    }

    span.input {
        font-size: 10px;
        min-width: 35px;
        height: 18px;
        line-height: 18px;
    }

    /* TABLET */
    .tablet {
        display: inline-block;
    }

    .no-tablet {
        display: none;
    }

    /* PAGE */
    .container.page {
        left: 0;
    }

    /* Customization */
    .customization-list {
        grid-template-columns: 1fr 1fr;
    }

    .customization-item {
        width: 100%;
    }

    .customization-item .custom .box {
        box-sizing: border-box;
        width: 100%;
        background: #000000ad;
        z-index: 8;
    }

    .customization.intro .text {
        width: 90%;
        left: 5%;


        box-sizing: border-box;
    }

    .customization.intro .picture {
        width: 100%;
        height: 450px
    }

    .customization.intro .picture img {
        height: 100%;
        object-fit: cover;
        width: 100%;
    }

    .customization-detail-picture img {
        width: 100%;
        height: 100%;
        aspect-ratio: 100%;
    }


    /* NEWS */
    section.news div.content .image2 {
        width: 100% !important;
        height: auto !important;
    }

    /* ADMIN */
    .menu_admin section a {
        margin-left: 2px;
    }

    /* FORUM */
    .topic_reply .content p iframe {
        width: 100%;
        height: 100%;
        aspect-ratio: 16/9;
    }

    .move_plate {
        height: auto;
    }
}

@media screen and (max-width: 767px) {
    #blankPage .image {
        width: 100%;
    }

    /* MOBILE */
    .mobile {
        display: inline-block;
    }

    .no-mobile {
        display: none !important;
    }

    /*MENU*/
    h2 span.combonumber {
        float: left;
        width: 100%;
    }



    header.top-bar .menu-right {
        padding-right: 5px;
    }

    header.top-bar .menu-right span {
        display: none;
    }

    header.top-bar .brand-logo img {
        height: 81px;
    margin-left: 4px;
    padding: 0;
    }

    header.top-bar .menu-right ul li {
        width: auto;
    }

    section.news {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    section.news div.content .video {
        width: 100%;
        height: 100%;
    }

    section.news span.publish_date {
        width: 100%;
    }


    /* BLOCK */
    .block.s90,
    .block.s80,
    .block.s75,
    .block.s70,
    .block.s60 {
        width: 100%;
    }

    .block.s50,
    .block.s47,
    .block.s45,
    .block.s40,
    .block.s33,
    .block.s30 {
        width: 100%;
        padding: 0;
    }

    .block.s25 {
        width: 100%;
        padding: 0;
    }

    .block.s20,
    .block.s10 {
        width: 100%;
        padding: 0;
    }

    .grid,
    .grid.c3,
    .grid.c4,
    .grid.c5 {
        grid-template-columns: 1fr;
    }

    .container.page {
        overflow: hidden;

    }


    /*CHARACTER SELECT*/
    div.charlist .charbox {
        width: calc(calc(100% / 3));
        height: 106px;

    }

    div.charlist .charbox span {
        font-size: 14px;
        line-height: 16px;
        opacity: 1;
        margin-top: 80px;
    }

    div.charlist2 {
        grid-template-columns: 1fr 1fr;
    }


    div.charlist2 .charbox {
        width: 100%;
    }

    div.charlist .charboxquick {
        width: calc(33% - 15px);
        height: 40px;
    }

    div.charlist .charboxquick span {
        font-size: 17px;
        line-height: 40px;
    }

    /*CHARACTER SPEC */
    .char-spec .avatar {
        float: none;
        padding-right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }

    .char-spec .spec {
        width: 100%;
    }

    .char-spec .spec .theSpec {
        width: 100%;
        display: block;
        box-sizing: border-box;
    }

    .char-spec .spec .theSpec span.inactive,
    .char-spec .spec .theSpec span.active {
        width: calc(8% - 4px);
    }

    /* RANK & TIERLIST */
    .rank-item .rank-image {
        width: 50%;
        float: left
    }

    .rank-item .rank-letter {
        width: 25%;
        float: right;
    }

    /*COMBO*/
    li.combo-item .avatar {
        display: none;
    }

    li.combo-item .combo {
        width: 100%;
        padding-left: 0;
    }

    li.combo-item .combo .title-combo .title {
        width: 30%;
    }

    li.combo-item .combo .title-combo .author {
        width: 70%;
    }

    /* COMBO VIDEO */
    li.combovideo-item .combovideo .content {
        flex-wrap: wrap;
    }

    li.combovideo-item .combovideo .preview {
        width: 100%;
    }



    /*COMBO EDITOR*/
    #imgInput.fixed {
        position: fixed;
        top: 70px;
        left: 0;
        background: #FFF;
        z-index: 8;
        -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
    }
    img.input.pushable{
        height: 40px;
    }

    /*FOOTER*/
    footer ul li a {
        font-size: 17px;
    }

    /*Block d'espacement*/
    .spacer.s50,
    .spacer.s25,
    .spacer.s20,
    .spacer.s10,
    .spacer.s5 {
        display: none;
    }

    /*PAGGING*/
    .pagging {
        width: 100%;
        margin-bottom: 10px;
        text-align: center;
    }

    .pagging .next,
    .pagging .prev {

        display: inline-block;
        float: none;
    }

    .pagging .next,
    .pagging .prev,
    .pagging .paging-number {
        width: 38px;
        font-size: 16px;
    }

    /*PAGE*/
    .container.page {
        left: 0;
        margin-top:10px;
    }

    .container.page img.pict,
    article img.pict {
        background: none;
        padding: 0px;
        border-radius: 0px;
    }




    /* MOVE */
    .move {
        grid-template-columns: 3fr 22fr;
    }

    .move .variant {
        width: 100%;
        clip-path: initial;
        text-align: left;
        padding: 3px 8px 3px 3px;
    }

    .move .variant span.img_input {
        display: inline;
    }

    /* ADMIN */
    .menu_admin {
        display: none;
    }

    /* Private Message */
    ul.dm .item .line {
        flex-wrap: wrap;
    }

    ul.dm .item .button {
        padding: 31px 0;
    }

    ul.dm .item .line .from {
        padding-right: 0px;
        width: 100%;
        margin-right: 0px;

    }

    ul.dm .item .line .date {}

    ul.dm .item .line .subject {
        width: 100%
    }

    /* FORUM */
    .forum_section {
        flex-wrap: wrap;
    }

    .forum_section .title {
        width: calc(100% - 72px);
    }

    .forum_section .topics {
        width: 30%;
        padding: 5px;
    }

    .forum_section .lastmessage {
        width: 70%;
        padding: 5px;
    }

    .topic .title {
        width: 100%;
    }

    .topic .messages {
        width: 50%;
    }

    .topic .lastmessage {
        width: 50%;
    }

    .topic_reply .header .info {

        width: 50%;
    }

    /* ARTICLE */
    .article02 div.img {
        max-width: none;
    }

    /* NEWS */
    section.newsList {
        height: auto;
    }

    section.newsList .taglist {
        text-align: left;
    }

}