.mobileOnly {
    display: none;
}
@media screen and (max-width: 1023px) {
   .desktopOnly {
        display: none;
    }
    .mobileOnly {
        display: block;
    }
    
    header.open-menu {
        padding-bottom: 0;
    }

    header menu {
        display: none;
    }

    header.open-menu [das] {
        display: none;
    }

    header.open-menu nav ul.announcements {
        display: none;
    }

    header.open-menu menu {
        display: block;
        position: fixed;
        top: 50px;
        right: 0;
        width: 100vw;
        height: calc(100vh - 50px);
        z-index: 2;
        background: rgb(180 0 0);
    }

        header.open-menu menu > ul {
            flex-direction: column;
            gap: 0;
            width: 100vw;
            height: calc(100vh - 90px);
            margin: 0;
            background: rgba(0, 0, 0, 0.2);
            position: relative;
            overflow: auto;
            direction: ltr;
            text-align: right;
            max-width: none;
        }

    header menu ul li a {
        white-space: wrap;
    }

    header.open-menu menu > ul > li a {
        font-size: 12px;
    }

    header.open-menu menu > ul > li:hover > sub {
        position: fixed;
        top: 50px;
        right: 33vw;
        width: 67vw;
        height: calc(100vh - 100px);
        overflow-y: auto;
        flex-direction: column;
        box-shadow: none;
        padding: 0;
        z-index: 99999;
    }

    header.open-menu menu > ul > li {
        padding: 0;
        border-bottom: 1px solid #ad382d;
    }

    header.open-menu nav {
        background: rgb(200 0 0);
        padding: 0 10px;
        width: 100vw;
        max-width: none;
    }

    header nav ul.setting {
        flex-grow: unset;
    }

    header nav {
        padding: 0 10px;
        width: 100vw;
        max-width: none;
    }

    #menu_toggle_icon {
        display: block;
    }

    header nav ul {
        gap: 10px;
    }

        header nav ul li.logo {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            margin: 0;
        }
            header nav ul li.logo img {
                width: 55px;
                height: 55px;
            }

        header nav ul.announcements {
            position: absolute;
            top: 100%;
            right: 0;
            width: 100vw;
            background: rgb(100 0 0);
            padding: 5px 10px;
            max-width: 100%;
        }

    ul.social-icons {
        display: none;
    }

    .open-menu ul.social-icons {
        display: flex;
        position: fixed;
        right: 0;
        bottom: 0;
        width: 100vw;
        gap: 10px;
        justify-content: flex-end;
        padding: 10px;
    }

        .open-menu ul.social-icons li.icon_btn.ico a {
            width: 30px;
        }

        .open-menu ul.social-icons li.icon_btn.ico:hover a {
            padding: 2px;
            filter: none;
        }

    li.icon_btn.user {
        display: none;
    }

    .open-menu li.icon_btn.user {
        display: flex;
        position: fixed;
        left: 5px;
        bottom: 0;
    }

    header nav ul.setting li.icon_btn.user a {
        font-size: 8px;
    }


    header menu > ul > li > sub ul {
        display: block;
        max-height: none;
        padding: 0 15px;
    }

        header menu > ul > li > sub ul li {
            width: 100%;
        }

    footer section {
        flex-direction: column;
        gap: 15px;
    }

    main > aside {
        display: none;
    }


    /* 
.article-image {
  margin: 0 -10px !important;
}
   */

    article .article-body .article-content iframe {
        max-width: 100%;
    }


    article .article-body {
        display: flex;
        flex-direction: column-reverse;
    }

        article .article-body .readMore {
            max-width: 100%;
            margin: 15px 0;
        }

    .leagueMenu .leagueTitle {
        min-width: 100%;
    }
}



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

    main,
    .main,
    .leagueMenu,
    main > section,
    main > aside,
    .card, .cards .card {
        margin: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 0;
    }
    header nav ul li.logo img {
        width: auto;
        height: 50px;
    }
    /* .cards .card a {
            display: flex;
            gap: 5px;
            justify-content: flex-start;
        }

            .cards .card a:hover {
                box-shadow: var(--shadow);
            }

            .cards .card a img {
                width: 140px;
                height: 85px;
            }*/
}

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