/* =================================
   HIDE PORTRAIT INFORMATION
   EVERYWHERE BY DEFAULT
================================= */

.hgp-portrait-information {
    display: none;
}


/* =================================
   MOBILE - GENERAL
================================= */

@media (max-width: 600px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        margin: 0;
        padding: 0;
    }

    /* =========================
       HOMEPAGE HEADER MOBILE
    ========================= */

    .hg-home-header {
        width: 100%;
        max-width: 100%;
        height: auto;
        overflow: hidden;
    }

    .hg-home-header-overlay {
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        padding: 12px 10px 15px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hg-logo {
        width: 90px;
        height: auto;
        margin: 0 0 10px -10px;
        transform: translateX(-120px);
    }

    .hg-main-nav {
        width: 100%;
        transform: translateX(-35px);
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 12px;
        margin: 0;
        padding: 0;
    }

    .hg-main-nav a {
        width: auto;
        margin: 0;
        padding: 4px 2px;
        font-size: 14px;
        line-height: 1.2;
        white-space: nowrap;
        text-align: center;
    }

    .hg-main-nav a[href="/upload-center/"] {
        flex-basis: 100%;
        text-align: center;
        margin: 4px 0;
    }

    .hg-heroic5-button {
        display: block;
        width: 220px;
        max-width: 70%;
        margin: 10px 0 0;
        transform: translateX(5px);
        background: #000000;
        border: 2px solid #b6ff00;
        border-radius: 12px;
        padding: 0;
        box-shadow: 0 0 12px #b6ff00;
    }

    .hg-heroic5-button img {
        display: block;
        width: 100%;
        height: auto;
    }

    /* =========================
       HOMEPAGE MOBILE AREA
    ========================= */

    .hg-homepage {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .hg-top {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 20px;
    }

    .hg-welcome-video,
    .hg-latest-videos {
        width: 100%;
        flex: none;
        min-width: 0;
    }

    .hg-search-videos {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }

    .hg-search-bar {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    /* =========================
       SMALLER MOBILE
    ========================= */

    .hg-homepage .hg-donation-tallies {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
        max-width: 100%;
        padding: 0 6px;
        margin: 20px 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    .hg-homepage .hg-tally-card {
        width: auto;
        min-width: 0;
        padding: 10px 3px;
        box-sizing: border-box;
    }

    .hg-homepage .hg-tally-label {
        font-size: 10px;
        line-height: 1.25;
    }

    .hg-homepage .hg-tally-amount {
        font-size: 18px;
        white-space: nowrap;
    }

    .hg-dart-board img {
        width: 70%;
        max-width: 220px;
        height: auto;
    }

    /* =========================
       SPONSOR LOGO SIZE
    ========================= */

    .hg-sponsor-card img {
        width: 120px;
        max-width: 100%;
        height: auto;
        display: block;
        margin-left: -10px;
    }

}


/* =========================
   FOOTER PLACEHOLDER
========================= */

.hg-homepage .hg-sponsors,
.hg-homepage .hg-sponsor-card {
    border: 1px solid #1f5d8f;
}

.hg-homepage .hg-sponsors .hg-sponsor-card h3 {
    border: 1px solid #1f5d8f;
    padding: 10px;
}


/* =========================
   FOOTER MOBILE ONLY
========================= */

@media (max-width: 600px) and (orientation: portrait) {

    .hgp-footer {
        height: 475px;
        background-position: center;
    }

    .hgp-footer .hgp-footer-col-1,
    .hgp-footer .hgp-footer-col-2,
    .hgp-footer .hgp-footer-col-3,
    .hgp-footer .hgp-footer-col-4 {
        position: absolute;
        right: auto;
        width: auto;
        margin: 0;
        transform: none;
        font-size: 10px;
        line-height: 0.9;
    }

    .hgp-footer .hgp-footer-col-1 {
        top: 20px;
        left: -45px;
    }

    .hgp-footer .hgp-footer-col-2 {
        top: 20px;
        left: 40px;
    }

    .hgp-footer .hgp-footer-col-3 {
        top: 20px;
        left: 120px;
    }

    .hgp-footer .hgp-footer-col-4 {
        top: 20px;
        left: 180px;
    }

    .hgp-footer-col-1 a,
    .hgp-footer-col-1 p,
    .hgp-footer-col-1 h1,
    .hgp-footer-col-1 h2,
    .hgp-footer-col-1 h3,
    .hgp-footer-col-2 a,
    .hgp-footer-col-2 p,
    .hgp-footer-col-2 h1,
    .hgp-footer-col-2 h2,
    .hgp-footer-col-2 h3,
    .hgp-footer-col-3 a,
    .hgp-footer-col-3 p,
    .hgp-footer-col-3 h1,
    .hgp-footer-col-3 h2,
    .hgp-footer-col-3 h3,
    .hgp-footer-col-4 a,
    .hgp-footer-col-4 p,
    .hgp-footer-col-4 h1,
    .hgp-footer-col-4 h2,
    .hgp-footer-col-4 h3 {
        font-size: 10px;
    }

}


/* =================================
   PHONE PORTRAIT
================================= */

@media (max-width: 600px) and (orientation: portrait) {

    .hgp-footer,
    .hgp-footer-inner,
    .hgp-footer-nav {
        height: 475px;
    }

    .hgp-footer .hgp-footer-col-3,
    .hgp-footer .hgp-footer-col-4 {
        display: none;
    }

    .hgp-portrait-information {
        display: block;
        margin-top: 25px;
    }

    .hgp-footer .hgp-footer-col-1 {
        left: -15px;
    }

    .hgp-footer .hgp-footer-col-2 {
        left: 145px;
    }

    .hgp-footer .hgp-footer-col-3 {
        left: 205px;
    }

/* =========================
   PHONE LANDSCAPE ONLY
========================= */

@media (max-width: 600px) and (orientation: landscape) {

    .hgp-footer {
        height: 475px;
    }

    .hgp-footer-inner,
    .hgp-footer-nav {
        height: 475px;
    }

/* =========================
   PHONE LANDSCAPE ONLY
========================= */

@media (max-width: 600px) and (orientation: landscape) {

    .hgp-footer {
        height: 475px;
    }

    .hgp-footer-inner,
    .hgp-footer-nav {
        height: 475px;
    }

    .hgp-footer-normal-heading {
        font-size: 10px;
    }

    .hgp-footer-normal-text {
        font-size: 10px;
    }

}

}

}