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

#topnav{
display:none;
}

#top_wrapper{
grid-area:top;
float:left;
width:100%;
height:var(--top-height);
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);
backdrop-filter:blur(5px);
}

#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 ."
"nav nav nav nav nav nav";
}

#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 #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 #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);
backdrop-filter:blur(5px);
}

#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 ."
"nav nav nav nav nav nav";
}

#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 #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 #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 160ms ease-in;
}

#top{
float:left;
width:100%;
height:var(--top-height);
background:var(--top-bgr-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);
backdrop-filter:blur(5px);
}

#top{
display:grid;
grid-template-columns:.5rem var(--top-icon-column-width) var(--top-logo-column-width) auto .5rem;
grid-template-rows:auto;
grid-gap:0;
grid-template-areas:". icon logo tools .";
}

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

#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 #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 #tools{
height:var(--top-sticky-height);
}

}