header{
position: fixed;
float: left;
width: 100%;
height: 80px;
background: var(--brand-color);
z-index: 99;
}
header .logo{
height: 40px;
margin: 20px 20px;
}
header .logo img{
height: 100%;
}
header #navs{
position: absolute;
float: left;
left: 50%;
transform: translate(-50%,0);
}
header #navs .nav{
color: white;
font-size: 17px;
line-height: 20px;
padding: 0px 25px ;
margin: 30px 0;
font-weight: normal;
}
header #navs .nav.selected{
font-weight: bold;
}
header #icons{
float: right;
margin: 17px 20px;
}
header #icons .icon{
width: 41px;
height: 41px;
line-height: 41px;
border: 2px solid white;
border-radius: 50%;
text-align: center;
color: white;
font-size: 20px;
}
header #icons .icon:nth-child(1){
margin-left: 10px;
}
/* MENÙ MOBILE */
header #menu{
float: left;
width: 40px;
margin-top: 30px;
margin-left: 25px;
display: none;
}
header #menu .bar{
width: 100%;
height: 4px;
background: white;
transition: .3s;
}
header #menu .bar-2{
margin: 5px 0;
}
header #menu.click .bar-1{
margin-top: 8px;
transform: rotate(45deg);
}
header #menu.click .bar-3{
margin-top: -4px;
transform: rotate(-45deg);
}
header #menu.click .bar-2{
display: none;
}

@media (max-width: 1080px){
header .logo{
position: absolute;
left: 50%;
transform: translate(-50%);
margin: 20px 0;
}
header #menu{
display: block;
}
header #navs{
position: fixed;
width: 50%;
top: 80px;
left: -150%;
transform: translate(0,0);
background: white;
transition: .5s;
}
header #navs.show{
height: calc(100% - 80px);
left: 0;
padding: 5%;
}
header #navs .nav{
width: 90%;
margin: 0;
font-size: 20px;
line-height: 25px;
padding: 5%;
text-align: left;
color: var(--brand-color);
}
header #icons{
float: right;
margin: 20px;
}
header #icons .icon{
width: 36px;
height: 36px;
line-height: 36px;
font-size: 18px;
}
}