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

#topnav{
display:none;
}

#top_wrapper{
grid-area:top;
float:left;
width:100%;
height:auto;
transition:height 160ms ease-in;
}

#top{
float:left;
width:100%;
height:var(--top-height);
background:var(--top-bgr-300);
border-bottom:2px solid var(--bgr-primary-300);
transition:height 160ms ease-in;
}

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

#top{
display:grid;
grid-template-columns:.15rem var(--top-icon-column-width) var(--top-logo-column-width) auto 3.5rem .5rem;
grid-template-rows:5rem auto;
grid-template-areas:
". icon logo tools nav_toggle ."
"search search search search search search"
"nav nav nav nav nav nav";
transition:100ms ease-out;
}

#top.true{
grid-template-columns:.15rem var(--top-sticky-icon-column-width) var(--top-sticky-logo-column-width) auto 3.5rem .5rem;
}

#top #nav{
grid-area:nav;
}

#top #icon{
grid-area:icon;
display:flex;
justify-content:flex-start;
align-items:center;
height:var(--top-height);
transition:height 150ms ease-in;
}

#top #icon img{
float:left;
width:var(--top-icon-width);
height:var(--top-icon-height);
margin-top:0;
margin-right:.25rem;
transition:height 150ms ease-in;
}

#top #logo{
grid-area:logo;
display:flex;
justify-content:flex-start;
align-items:center;
height:var(--top-height);
transition:height 150ms ease-in;
}

#top #logo picture img{
float:left;
width:var(--top-logo-width);
height:var(--top-logo-height);
transition:height 150ms ease-in;
}

#top #search{
grid-area:search;
float:left;
width:100%;
height:2.5rem;
background:var(--top-bgr-300);
position:sticky;
z-index:10;
top:0;
left:0;
transition:top 150ms ease-in;
}

/*
#top #search.hide{
max-height:0;
transition:max-height 350ms ease-out;
overflow:hidden;
animation:fade-out 850ms ease-out forwards;
outline:#00ff00 1px solid;
}

#top #search.show{
max-height:10rem;
overflow:hidden;
transition:max-height 550ms ease-in;
animation:fade-in 850ms ease-in forwards;
outline:#942192 1px solid;
}

 */

#top #tools{
grid-area:tools;
display:flex;
justify-content:flex-end;
align-items:center;
height:var(--top-height);
transition:height 150ms ease-in;
}

#nav_toggle{
grid-area:nav_toggle;
}


/* Sticky only */
#top.true{
height:var(--top-sticky-height);
}

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

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

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

#top.true #logo picture img{
width:var(--top-sticky-logo-width);
height:var(--top-sticky-logo-height);
}

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

#top.true #search{
position:absolute;
top:-1rem;
}

#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{
float:left;
width:100%;
height:var(--top-height);
background:var(--top-bgr-300);
border-bottom:2px solid var(--bgr-primary-300);
transition:height 160ms ease-in;
}

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

#top{
display:grid;
grid-template-columns:.25rem var(--top-icon-column-width) var(--top-logo-column-width) auto 3.5rem .5rem;
grid-template-rows:auto;
grid-template-areas:
". icon logo tools nav_toggle ."
"search search search search search search"
"nav nav nav nav nav nav";
transition:100ms ease-out;
}

#top.true{
grid-template-columns:.25rem var(--top-sticky-icon-column-width) var(--top-sticky-logo-column-width) auto 3.5rem .5rem;
}

#top #nav{
grid-area:nav;
}

#top #icon{
grid-area:icon;
display:flex;
justify-content:flex-start;
align-items:center;
height:var(--top-height);
transition:height 150ms ease-in;
}

#top #icon img{
float:left;
width:var(--top-icon-width);
height:var(--top-icon-height);
margin-top:.15rem;
margin-right:.5rem;
transition:height 150ms ease-in;
}

#top #logo{
grid-area:logo;
display:flex;
justify-content:flex-start;
align-items:center;
height:var(--top-height);
transition:height 150ms ease-in;
}

#top #logo picture img{
float:left;
height:var(--top-logo-height);
width:var(--top-logo-width);
margin-top:.5rem;
transition:height 150ms ease-in;
}

#top #search{
grid-area:search;
float:left;
width:100%;
background:var(--top-bgr-300);
position:sticky;
z-index:10;
top:0;
left:0;
transition:top 150ms ease-in;
}


#top #tools{
grid-area:tools;
display:flex;
justify-content:flex-end;
align-items:center;
height:var(--top-height);
transition:height 150ms ease-in;
}

#nav_toggle{
grid-area:nav_toggle;
margin:0;
padding:.25rem 0 0 0;
height:var(--top-height);
transition:height 150ms ease-in;
}

/* Sticky only */
#top.true{
height:var(--top-sticky-height);
}

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

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

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

#top.true #logo picture img{
width:var(--top-sticky-logo-width);
height:var(--top-sticky-logo-height);
}

#top.true #search{
position:absolute;
top: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;
float:left;
width:100%;
height:var(--top-height);
transition:height 60ms ease-in;
}

#top{
float:left;
width:100%;
height:var(--top-height);
background:var(--top-bgr-300);
transition:height 60ms ease-in;
}

#top.true{
float:left;
width:100%;
height:var(--top-sticky-height);
position:fixed;
top:0;
left:0;
z-index:1001;
background:var(--top-bgr-300);
-webkit-backdrop-filter:blur(5px) saturate(180%);
backdrop-filter:blur(5px) saturate(180%);
}

#top{
display:grid;
grid-template-columns:.5rem var(--top-icon-column-width) var(--top-logo-column-width) auto 23.5rem .5rem;
grid-template-rows:min-content auto;
grid-gap:0;
grid-template-areas:
"lang lang lang lang lang lang"
". icon logo search tools ."
;
transition:100ms ease-out;
}

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

#top #lang{
grid-area:lang;
position:relative;
height:1.25rem;
transition:height 150ms ease-out;
}

#top #icon{
grid-area:icon;
position:relative;
height:var(--top-height);
transition:height 150ms ease-out;
}

#top #icon img{
float:left;
width:var(--top-icon-width);
height:var(--top-icon-height);
margin-top:.5rem;
margin-right:.5rem;
transition:height 150ms ease-out;
}

#top #logo{
grid-area:logo;
display:flex;
justify-content:flex-start;
align-items:center;
height:var(--top-height);
transition:height 150ms ease-out;
}

#top #logo picture img{
float:left;
width:var(--top-logo-width);
height:var(--top-logo-height);
margin-top:.5rem;
}

#top #search{
grid-area:search;
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:var(--top-height);
transition:height 150ms ease-out;
}

#top #tools{
grid-area:tools;
display:flex;
justify-content:flex-end;
align-items:center;
height:var(--top-height);
transition:height 150ms ease-out;
}

#nav_toggle{
grid-area:nav_toggle;
display:none;
}

/* Sticky only */
#top.true{
height:var(--top-sticky-height);
}

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

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

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

#top.true #logo picture img{
width:var(--top-sticky-logo-width);
height:var(--top-sticky-logo-height);
}

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

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

}