/* Mobile View > Mobile Only */
@media screen and (max-width: 45rem){

    #top_wrapper{
        grid-area:top;
        float:left;
        width:100%;
        height:var(--top-height);
    }

    #top_header{
        float:left;
        width:100%;
        border-bottom:var(--brd-gray-400) 1px solid;
        height:var(--top-height);
        transition:height 150ms ease-out;
    }

    #top_header.true{
        height:var(--top-sticky-height);
        position:fixed;
        top:0;
        left:0;
        float:left;
        width:100%;
        z-index:999;
        background:var(--bgr-top-300);
        -webkit-backdrop-filter:var(--backdrop-filter-default);
        backdrop-filter:var(--backdrop-filter-default);
    }

    #top{
        display:grid;
        grid-template-columns:var(--top-icon-column-width) auto auto 4rem;
        grid-template-rows:minmax(var(--top-height),var(--top-sticky-height)) auto auto;
        grid-gap:0;
        grid-template-areas:
        "icon logo tools nav_toggle"
        "search search search search"
        "nav nav nav nav";
    }

    #top.true{
        grid-template-rows:var(--top-sticky-height) auto auto;
    }

    #top{
        float:left;
        width:100%;
        height:var(--top-height);
        transition:height 150ms ease-out;
    }

    #top.true{
        height:var(--top-sticky-height);
    }

    #logo{
        display:none;
    }

    #nav{
        display:none;
    }

    #icon{
        margin:.5rem 0 0 .25rem;
        width:var(--top-icon-width);
        height:var(--top-icon-height);
    }

    #tools{
        height:var(--top-height);
    }

    #nav_toggle{
        height:var(--top-height);
    }


    #top.true #icon{
        margin:.35rem 0 0 .25rem;
        width:var(--top-sticky-icon-width);
        height:var(--top-sticky-icon-height);
    }

    #top.true #tools{
        height:var(--top-sticky-height);
    }

    #top.true #nav_toggle{
        height:var(--top-sticky-height);
    }

}

/* Mobile View > Tablet only */
@media screen and (min-width: 45rem) and (max-width: 79.5rem){

    #top_wrapper{
        grid-area:top;
        float:left;
        width:100%;
        height:var(--top-height);
    }

    #top_header{
        float:left;
        width:100%;
        border-bottom:var(--brd-gray-400) 1px solid;
        height:var(--top-height);
        transition:height 150ms ease-out;
    }

    #top_header.true{
        height:var(--top-sticky-height);
        position:fixed;
        top:0;
        left:0;
        float:left;
        width:100%;
        z-index:999;
        background:var(--bgr-top-300);
        -webkit-backdrop-filter:var(--backdrop-filter-default);
        backdrop-filter:var(--backdrop-filter-default);
    }

    #top{
        float:left;
        width:100%;
        height:var(--top-height);
        transition:height 150ms ease-out;
    }

    #top.true{
        height:var(--top-sticky-height);
    }

    #top{
        display:grid;
        grid-template-columns:var(--top-icon-column-width) var(--top-logo-column-width) auto 4rem;
        grid-template-rows:minmax(var(--top-height),var(--top-sticky-height)) auto auto;
        grid-gap:0;
        grid-template-areas:
        "icon logo tools nav_toggle"
        "search search search search"
        "nav nav nav nav";
    }

    #top.true{
        grid-template-columns:var(--top-sticky-icon-column-width) var(--top-sticky-logo-column-width) auto 4rem;
        grid-template-rows:var(--top-sticky-height) auto auto;
    }

    #nav{
        display:none;
    }

    #icon{
        margin:1rem 0 0 .25rem;
        width:var(--top-icon-width);
        height:var(--top-icon-height);
    }

    #logo{
        position:relative;
        margin-top:1rem;
        height:var(--top-logo-height);
    }

    #top #logo picture{
        position:relative;
        top:-.15rem;
        left:0;
    }

    #tools{
        height:var(--top-height);
    }

    #nav_toggle{
        height:var(--top-height);
    }

    #top.true #icon{
        margin:.25rem 0 0 .25rem;
        width:var(--top-sticky-icon-width);
        height:var(--top-sticky-icon-height);
    }

    #top.true #logo{
        position:relative;
        margin:.25rem 0 0 0;
        width:var(--top-sticky-logo-width);
        height:var(--top-sticky-logo-height);
    }

    #top.true #logo picture{
        position:relative;
        top:-.35rem;
        left:0;
    }

    #top.true #tools{
        height:var(--top-sticky-height);
    }

    #top.true #nav_toggle{
        height:var(--top-sticky-height);
    }

}


/* Desktop View */
@media screen and (min-width: 79.5rem){

    #top_wrapper{
        grid-area:top;
        margin:auto !important;
        width:100%;
        height:var(--top-height);
        transition:height 150ms ease-out;
    }

    #top_header{
        float:left;
        width:100%;
        border-bottom:var(--brd-gray-400) 1px solid;
        height:var(--top-height);
        transition:height 150ms ease-out;
    }

    #top_header.true{
        height:var(--top-sticky-height);
        position:fixed;
        top:0;
        left:0;
        float:left;
        width:100%;
        z-index:999;
        background:var(--bgr-top-300);
        border-bottom:var(--brd-gray-400) 1px solid;
        -webkit-backdrop-filter:var(--backdrop-filter-default);
        backdrop-filter:var(--backdrop-filter-default);
    }

    #top,
    #top.true{
        margin:auto !important;
        width:100%;
        min-width:79.5rem;
        max-width:100rem;
    }

    #top{
        height:var(--top-height);
        transition:height 150ms ease-out;
    }

    #top.true{
        height:var(--top-sticky-height);
    }

    #top{
        display:grid;
        grid-template-columns:var(--top-icon-column-width) var(--top-logo-column-width) minmax(16rem,auto) 16rem 0;
        grid-template-rows:6rem 4rem;
        gap:0;
        grid-template-areas:
        "search search search search search"
        "icon logo nav tools nav_toggle";
    }

    #icon{
        margin:0 0 0 .25rem;
        width:var(--top-icon-width);
        height:var(--top-icon-height);
    }

    #logo{
        position:relative;
        width:var(--top-logo-width);
        height:var(--top-logo-height);
    }

    #top #logo picture{
        position:relative;
        top:-.65rem;
        left:0;
    }

    #top #nav{
        height:4rem;
    }

    #top #tools{
        height:4rem;
    }

    #top.true{
        display:grid;
        grid-template-columns:var(--top-sticky-icon-column-width) var(--top-sticky-logo-column-width) minmax(16rem,auto) 20rem 0;
        grid-template-rows:var(--top-sticky-height) minmax(0,auto);
        gap:0;
        grid-template-areas:
        "icon logo nav tools nav_toggle"
        "search search search search search";
    }

    #top.true #icon{
        margin:.25rem 0 0 .25rem;
        width:var(--top-sticky-icon-width);
        height:var(--top-sticky-icon-height);
    }

    #top.true #logo{
        position:relative;
        margin:.25rem 0 0 0;
        width:var(--top-sticky-logo-width);
        height:var(--top-sticky-logo-height);
    }

    #top.true #logo picture{
        position:relative;
        top:-.65rem;
        left:0;
    }

    #top.true #tools{
        height:var(--top-sticky-height);
    }

    /**/
    #top.true #search{
        height:var(--top-sticky-height);
        background:var(--bgr-top-300);
    }


    #top.true #search_icon{
        display:block;
    }

    #nav_toggle{
        display:none;
    }

}

#lang{
    grid-area:lang;
}

#search{
    grid-area:search;
}

#icon{
    grid-area:icon;
    transition:height 150ms ease-out;
}

#icon img,
#icon picture{
    transition:height 150ms ease-out;
}

#logo{
    grid-area:logo;
    transition:height 150ms ease-out;
}

#logo img,
#logo picture{
    transition:height 150ms ease-out;
}

#nav{
    grid-area:nav;
}

#nav_2{
    grid-area:nav_2;
}

#tools{
    grid-area:tools;
    transition:height 150ms ease-out;
}

#nav_toggle{
    grid-area:nav_toggle;
    transition:height 150ms ease-out;
}