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

#header #logo{
grid-area:logo;
}

#topnav{
display:none;
}

}

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

#header-wrapper{
grid-area:header;
float:left;
width:100%;
height:4rem;
}

#header,
#header.hide,
#header.show{
float:left;
width:100%;
height:4rem;
background:var(--base-background-color);
border-bottom:var(--base-border-color) 1px solid;
z-index:200;
}

#header,
#header.hide,
#header.show{
display:grid;
grid-template-columns:.5rem 5rem auto .5rem;
grid-template-rows:3.25rem auto;
grid-template-areas:
"logo logo tools ."
"nav nav nav nav";
}

#header.hide{
position:fixed;
top:-4.5rem;
left:0;
opacity:.25;
transition:top 500ms ease-out, opacity 250ms ease-in;
}

#header.show{
position:fixed;
top:0;
left:0;
opacity:1;
transition:top 250ms ease-in, opacity 250ms ease-out;
}

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

#header #logo{
grid-area:logo;
position:relative;
top:2px;
left:0;
}

#header #logo picture img{
float:left;
height:3.75rem;
width:auto;
}

#header #tools{
grid-area:tools;
display:flex;
justify-content:flex-end;
align-items:center;
height:4rem;
}

}




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

#topnav{
grid-area:topnav;
display:grid;
grid-template-columns:.5rem auto auto .5rem;
grid-template-rows:auto;
grid-template-areas:
". lang nav_2 .";
background:var(--asset-background-color);
}


#header-wrapper{
grid-area:header;
width:100%;
height:10rem;
display:flex;
justify-content:center;
background:var(--base-background-color);
border-bottom:var(--base-border-color) 1px solid;
}

#header{
display:grid;
grid-template-columns:.5rem 13.5rem minmax(auto, 73rem) 13.5rem .5rem;
grid-template-rows:auto 4rem;
grid-gap:0;
grid-template-areas:
". . search . ."
". logo nav_1 tools .";
}

#header-wrapper.fixed{
position:fixed;
grid-area:header;
width:100%;
height:auto;
display:flex;
justify-content:center;
z-index:10000;
background:var(--base-background-color);
}

#header.fixed{
display:grid;
grid-template-columns:.5rem 13.5rem minmax(auto, 73rem) 13.5rem .5rem;
grid-template-rows:4rem auto;
grid-gap:0;
grid-template-areas:
". logo nav_1 tools ."
". . search . ."
}

#header .nav_1{
grid-area:nav_1;
}

.nav_2{
grid-area:nav_2;
}

#header #logo{
grid-area:logo;
}

#header #logo picture img{
float:left;
width:13.5rem;
}

#header #search-flex{
grid-area:search;
display:flex;
justify-content:center;
}

#header.fixed #search-flex{
height:0;
overflow:hidden;
}

#header.fixed #search-flex.open{
height:3rem;
overflow:visible;
}

#header.fixed #search-flex.close{
height:0rem;
overflow:hidden;
}

#header #tools{
grid-area:tools;
margin:0;
display:flex;
align-items:center;
justify-content:flex-end;
height:4rem;
}

}




#icon{
position:relative;
top:.5rem;
left:.5rem;
width:3.5rem;
}

.front{
position:absolute;
top:0;
left:0;
width:100%;
z-index:4;
}

.layer_1{
position:absolute;
top:0;
left:0;
width:100%;
z-index:3;
animation: rotation_clockwise 14s infinite linear;
}

.layer_2{
position:absolute;
top:0;
left:0;
width:100%;
z-index:2;
animation: rotation_counterclockwise 16s infinite linear;
}

.layer_3{
position:absolute;
top:0;
left:0;
width:100%;
z-index:1;
animation: rotation_clockwise 12s infinite linear;
display:none;
}

@keyframes rotation_clockwise {

0%{
transform: rotate(0deg);
opacity:1;
}

50%{
transform: rotate(-180deg);
opacity:.95;
}

100%{
transform: rotate(359deg);
opacity:1;
}
}

@keyframes rotation_counterclockwise {

0%{
transform: rotate(0deg);
opacity:1;
}

50%{
transform: rotate(180deg);
opacity:.75;
}

100%{
transform: rotate(-359deg);
opacity:1;
}
}