#mobileIndex,
#indexHeader,
#mobileHeader,
#mobileMenu,
#mobileFooter {
    display: none;
}


/* ----------------- Tablet 720px ----------------- */
@media only screen and ((max-width: 1000px) or (orientation: portrait)) {
    #menu,
    #index {
        display: none;
    }


    #mobileIndex {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        justify-content: space-between;
        align-content: center;
        min-height: 100%;
        /*max-height: 100%;
        height: 100%;
        overflow: hidden;*/
    }


    /* ------- Mobile Header ------- */

    #mobileHeader,
    #indexHeader {
        display: flex;
        padding: 0 2.4rem;
        width: 100%;
        min-height: 7.5rem;
        height: 7.5rem;
        background-color: var(--clr-white);
        box-shadow: 0 1.1rem 3.55rem 0 #99773B26;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        z-index: 60;
    }

    #mobileHeader .homeLink,
    #indexHeader .homeLink {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        align-content: center;
    }
    
    #mobileHeader .homeLink .back {
        margin-right: 2.4rem;
        height: 1.6rem;
        width: 1.6rem;
        background-image: url('/public/images/page/icons/arrow-left-gold.svg?v=1');
    }
    
    #mobileHeader .homeLink .logo,
    #indexHeader .homeLink .logo {
        height: 4.3rem;
        width: 15.7rem;
        background-image: url('/public/images/logo.svg?v=1');
    }

    #mobileHeader .friendLinkCont,
    #indexHeader .friendLinkCont {
        max-width: 22.0rem;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        flex-direction: row;
        gap: 1.7rem;
    }
    
    #mobileHeader .mapLink,
    #indexHeader .mapLink {
        height: 2.1rem;
        min-width: 2.1rem;
        width: 2.1rem;
        background-image: url('/public/images/page/icons/top-map.svg?v=1');
    }

    #mobileHeader .friendLinkCont .text,
    #indexHeader .friendLinkCont .text {
        color: var(--clr-black);
        font-family: 'Roboto', sans-serif;
        font-size: 1.4rem;
        line-height: 1.65rem;
        text-decoration: underline;
        text-align: left;
    }


    /* ------- Mobile Menu ------- */
    #mobileMenu {
        display: block;
        height: 100%;
    }

     #mobileMenu * {
         transition: color 0.5s, background-color 0.5s, border 0.5s;
     }

    #mobileMenu,
    #mobileMenu a,
    #mobileMenu a:visited,
    #mobileMenu a:hover {
        font-family: 'Roboto', sans-serif;
        font-size: 1.7rem;
        line-height: 2.2rem;
        color: var(--clr-black);
        text-align: left;
    }

    #mobileMenu .typeSelection {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        width: 100%;
        font-family: 'Roboto Medium', sans-serif;
        text-align: center;
        border-bottom: solid 0.1rem var(--clr-gold-translucent);
    }
    
    #mobileMenu .typeSelection > .item {
        display: flex;
        padding: 2.2rem 1.2rem 2.0rem 1.2rem;
        width: 50%;
        align-items: center;
        justify-content: center;
        background-color: var(--clr-mobile-white);
    }
    
    #mobileMenu .typeSelection > .item.active {
        background-color: var(--clr-white);
    }
    
    #mobileMenu .typeSelection > .item > .name {
        width: fit-content;
        padding-bottom: 0.4rem;
        color: var(--clr-green);
        font-family: 'Roboto', sans-serif;
        border-bottom: solid 0.12rem transparent;
    }
    
    #mobileMenu .typeSelection > .item.active > .name {
        color: var(--clr-black);
        font-family: 'Roboto Medium', sans-serif;
        border-bottom: solid 0.12rem var(--clr-gold);
    }

    
    #mobileMenu .menuList {
        
    }
    
    #mobileMenu .menuList > .item,
    #mobileMenu .menuList > a > .item {
    }
    
    #mobileMenu .menuList > .item.options {

    }

    #mobileMenu .menuList > .item.active {
        background-color: #E0D1B140;
    }
    
    #mobileMenu .menuList > .item.options.active {

    }
    
    #mobileMenu .menuList > .item > .name,
    #mobileMenu .menuList > a > .item > .name {
        margin: 0 3.0em;
        line-height: 7.8rem;
        border-bottom: solid 0.08rem var(--clr-gold-translucent);
    }

    #mobileMenu .menuList > .item.active > .name,
    #mobileMenu .menuList > a > .item.active > .name {
        color: var(--clr-green);
        font-family: 'Roboto Medium', sans-serif;
        border-bottom: solid 0.08rem transparent;
    }    
    
    #mobileMenu .menuList > .item.options > .name {
        background-size: 1.6rem 1.6rem;
        background-image: url('/public/images/page/icons/arrow-right-gold.svg?v=1');
        background-position: right 1.2rem center;
    }

    #mobileMenu .menuList > .item.options.active > .name {
        background-image: url('/public/images/page/icons/arrow-down-gold.svg?v=1');
        
    }
    
    #mobileMenu .menuList > .item > .subMenu {
        height: 0;
        background-color: #FCFAF7;
        overflow: hidden;
    }

    #mobileMenu .menuList > .item.active > .subMenu {
        height: auto;
        padding: 1rem 0;
        height: auto;
    }
    
    #mobileMenu .menuList > .item > .subMenu > .item {

    }

    #mobileMenu .menuList > .item > .subMenu > .item:last-child {
        
        border-bottom: solid 0.08rem var(--clr-gold-translucent);
    }

    #mobileMenu .menuList > .item > .subMenu > .item.active {

    }
    
    #mobileMenu .menuList > .item > .subMenu .item .name {
        margin: 0 10.2rem;
        padding: 0 0 0 3.0rem;
        line-height: 5.8rem;
        background-image: url('/public/images/page/icons/menu-bullet-active.svg?v=1');
        background-size: 0.6rem 0.6rem;
        background-position: left center;
    }
    
    #mobileMenu .menuList > .item > .subMenu .item.active .name {
        color: var(--clr-green);
        font-family: 'Roboto Medium', sans-serif;
    }



    /* ------- Mobile Footer ------- */
    #mobileFooter,
    #indexFooter {
        display: block;
        padding: 5.2rem 2.2rem 2.2rem 2.2rem;
        height: auto;
        color: var(--clr-gold);
        font-family: 'Roboto Medium', sans-serif;
        font-size: 1.2rem;
        background-color: var(--clr-white);
        text-align: center;
    }
    
    #mobileFooter a,
    #mobileFooter a,
    #indexFooter a,
    #mobileFooter a:visited,
    #indexFooter a:visited,
    #mobileFooter a:hover,
    #indexFooter a:hover {
        color: var(--clr-gold);
        text-decoration: underline;
    }
    
    #mobileFooter .link,
    #indexFooter .link {
        margin-bottom: 1.2rem;
        font-family: 'Roboto', sans-serif;
        font-size: 1.5rem;
        line-height: 2.0rem;
    }
    
    #mobileFooter .light,
    #indexFooter .light {
        margin-top: 1.2rem;
        color: #878787;
        font-size: 1.2rem;
        line-height: 1.6rem;
        font-family: 'Roboto Light', sans-serif;
    }

}


/* ----------------- Mobile 360px ----------------- */
@media only screen and (max-width: 500px) {

    /* ------- Mobile Header ------- */

    #mobileHeader,
    #indexHeader {
        padding: 0 2.4rem;
        min-height: 7.5rem;
        height: 7.5rem;
    }
    
    #mobileHeader .homeLink .back {
        margin-right: 2.4rem;
        height: 1.6rem;
        width: 1.6rem;
    }
    
    #mobileHeader .homeLink .logo,
    #indexHeader .homeLink .logo {
        height: 4.3rem;
        width: 15.7rem;
    }
    
    #mobileHeader .friendLinkCont,
    #indexHeader .friendLinkCont {
        max-width: 12.0rem;
        gap: 1.2rem;
    }
    
    #mobileHeader .mapLink,
    #indexHeader .mapLink {
        height: 2.1rem;
        min-width: 2.1rem;
        width: 2.1rem;
    }

    #mobileHeader .friendLinkCont .text,
    #indexHeader .friendLinkCont .text {
        font-size: 1.4rem;
        line-height: 1.65rem;
    }


    /* ------- Mobile Menu ------- */

    #mobileMenu,
    #mobileMenu a,
    #mobileMenu a:visited,
    #mobileMenu a:hover {
        font-size: 1.6rem;
        line-height: 2.0rem;
    }
    
    #mobileMenu .typeSelection > .item {
        padding: 2.2rem 1.2rem 2.0rem 1.2rem;
    }
    
    #mobileMenu .typeSelection > .item > .name {
        padding-bottom: 0.4rem;
    }
    
    #mobileMenu .menuList > .item > .name,
    #mobileMenu .menuList > a > .item > .name {
        margin: 0 2.4rem;
        line-height: 6.8rem;
    }
    
    #mobileMenu .menuList > .item.options > .name {
        background-size: 1.2rem 1.2rem;
        background-position: right 1.2rem center;
    }

    #mobileMenu .menuList > .item.active > .subMenu {
        padding: 1rem 0;
    }
    
    #mobileMenu .menuList > .item > .subMenu .item .name {
        margin: 0 2.4rem;
        padding: 0 0 0 2.0rem;
        line-height: 4.8rem;
        background-size: 0.6rem 0.6rem;
    }


    /* ------- Mobile Footer ------- */
    #mobileFooter,
    #indexFooter {
        padding: 5.2rem 2.2rem 2.2rem 2.2rem;
        font-size: 1.2rem;
    }
    
    #mobileFooter .link,
    #indexFooter .link {
        margin-bottom: 1.2rem;
        font-size: 1.5rem;
        line-height: 2.0rem;
    }
    
    #mobileFooter .light,
    #indexFooter .light {
        margin-top: 1.2rem;
        font-size: 1.2rem;
        line-height: 1.6rem;
    }
}