/* ============================================================ */
/* MOBILE FIXES — For screens 768px and below                    */
/* ============================================================ */

@media screen and (max-width: 768px) {
    
    /* ============================================================ */
    /* 1. REMOVE BACKGROUNDS                                       */
    /* ============================================================ */
    td[background] {
        background-image: none !important;
        background-color: transparent !important;
        background: none !important;
    }
    
    td[style*="background"] {
        background-image: none !important;
        background-color: transparent !important;
        background: none !important;
    }
    
    /* ============================================================ */
    /* 2. FIX SCROLL ARROWS                                         */
    /* ============================================================ */
    .Links table {
        width: 100% !important;
        max-width: 100% !important;
        display: block;
        overflow: hidden !important;
    }
    
    .Links td {
        display: inline-block !important;
        width: auto !important;
        text-align: left !important;
        padding: 2px 4px !important;
        background: transparent !important;
        background-image: none !important;
        vertical-align: middle !important;
    }
    
    .Links table,
    .Links {
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }
    
    /* ============================================================ */
    /* 3. FIX WTC LINKS ALIGNMENT                                   */
    /* ============================================================ */
    td[background="Backgrounds/ReflectTop.png"],
    td[background="Backgrounds/ReflectBottom.png"],
    td[background="Backgrounds/FractureGreen.png"] {
        display: inline-block !important;
        width: auto !important;
        text-align: center !important;
        vertical-align: middle !important;
        background: none !important;
    }
    
    .Links tr {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
    }
    
    /* ============================================================ */
    /* 4. MAKE WTC LINKS THE SAME COLOR                            */
    /* ============================================================ */
    .LinksSept {
        color: #2B4F4B !important;
        font-weight: 700 !important;
        font-size: 12px !important;
    }
    
    /* ============================================================ */
    /* 5. MAKE COSMOLOGY HORIZONTAL ON MOBILE                      */
    /* ============================================================ */
    .LinksCosmos {
        display: inline-block !important;
        writing-mode: horizontal-tb !important;
        letter-spacing: 2px;
        font-size: 11px !important;
        padding: 8px 12px !important;
    }
    
    .LinksCosmos span {
        display: inline-block !important;
        text-decoration: underline;
    }
    
    /* ============================================================ */
    /* 6. FIX HEADER PHOTO SCALING                                 */
    /* ============================================================ */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    h1.type1 {
        font-size: 30px !important;
        text-align: center !important;
        white-space: normal !important;
    }
    
    h2.type2 {
        font-size: 18px !important;
        text-align: center !important;
    }
}