header{
position: fixed;
float: left;
width: 100%;
height: 80px;
background: black;
}
header .logo{
height: 30px;
max-width: 300px;
margin: 25px 20px;
}
header .logo img{
height: 100%;
}
header #navs{
width: calc(100% - 340px);
}
header #navs .nav{
color: white;
font-size: 17px;
line-height: 20px;
padding: 0px 25px ;
margin: 30px 0;
font-weight: 500;
}
header #navs .nav.selected{
color: var(--brand-color);
}
header #icons{
float: right;
right: 0;
height: 25px;
width: 105px;
margin: 27.5px 10px;
}
header #icons .icon{
height: 100%;
margin: 0px 5px;
}
header #icons .icon img{
height: 100%;
filter: invert();
}
/* MENÙ MOBILE */
header{
z-index: 9999;
}
header #menu{
float: right;
width: 40px;
margin-top: 30px;
margin-right: 15px;
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: 768px){
header .logo{
height: 25px;
max-width: 300px;
margin: 27.5px 0px 30px 20px;
}
header #menu{
display: block;
}
header #navs{
position: fixed;
width: 50%;
top: 80px;
left: -150%;
background: black;
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;
}
header #icons{
float: left;
}
}