header.site-header {
display: block;
height: var(--headerheight);
background-color: rgba(25,25,25,0.5);
box-shadow: none;
margin-bottom: 0;
padding: 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
body.viewmenu header {
height: 100vh;
background-color: rgba(0, 0, 0, 0.7);
}
@media (min-width: 1200px) {
header {
display: flex;
align-items: center;
padding: 0;
}
}  nav {
display: flex;
align-items: center;
height: var(--headerheight);
}
@media (min-width:1200px) {
nav {
display: flex;
position: relative;
align-items: center;
justify-content: space-between;
}
} nav .logo {
display: block;
margin:0;
padding: 0;
}
@media (min-width: 1200px) {
nav .logo {
}
}
nav .logo a {
font-size: 30px;
font-weight: 700;
color: var(--white);
text-decoration: none;
padding: 0;
}
@media (min-width: 1200px) {
nav .logo > a {
font-size: 30px;
padding: 0;
}
}
nav .logo a span {
font-size: 60%;
font-weight: 400;
} nav ul.main {
display: flex;
position: relative;
left: -80px;
top: -100000px;
}
body.viewmenu nav ul.main {
display: block;
opacity: 1;
transition-delay: .15s;
top: 180px;
margin-top: 10px;
}
@media (min-width:1200px) {
nav ul.main {
top: 0;
left: auto;
right: 0;
display: flex;
position: relative;
}
} nav ul.main li {
display: block;
position: relative;
margin: 0 ;
} nav ul.main li a {
display: block;
font-size: 1.5rem;
font-weight: 200;
line-height: 2.25rem;
text-decoration: none;
color: var(--white);
box-sizing: border-box;
margin: 0;
margin-bottom: 5px;
padding: 0;
}
@media (min-width:1200px) {
nav ul.main li a {
font-size: 18px;
font-weight: 400;
line-height: 18px;
margin: 0;
margin-left: 18px;
padding: 0;
}
} .btn-menu {
top: 50%;
right: 0px;
position: absolute;
transform: translateY(-50%);
width: 48px;
height: 48px;
padding: 0;
display: block;
background: transparent;
pointer-events: auto;
}
@media (min-width: 1200px) {
.btn-menu {
display: none;
}
}
.btn-menu .bar, 
.btn-menu .bar:after, 
.btn-menu .bar:before {
width:30px;
height:3px;
}
.btn-menu .bar {
top:22px;
left:9px;
position:absolute;
background-color: transparent;
}
.btn-menu .bar.animate{
background-color: transparent;
}
.btn-menu .bar:before {
top:5px;
left:0px;
content:"";
background: var(--color);
position:absolute;
-webkit-transform: all .3s ease-in-out;
-ms-transform: all .3s ease-in-out;
transform: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.btn-menu .bar:after {
left:0;
top:14px;
content:"";
background:var(--color);
position:absolute;
-webkit-transform: all .3s ease-in-out;
-ms-transform: all .3s ease-in-out;
transform: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.btn-menu:hover .bar:after {
top:9px;
}
.btn-menu:hover .bar:before {
top:9px;
}
.btn-menu .bar.animate:after {
top:9px;
background:var(--color);
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
}
.btn-menu .bar.animate:before {
top:9px;
background:var(--color);
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
} @media (min-width: 1200px) {
.navbar .navbar-nav {
-ms-flex-direction: row;
flex-direction: row;
align-items: center;
}
} .wpmenucart-contents i {
padding: 0 0.75rem 0 0;
}
@media (min-width: 1200px) {
.wpmenucart-contents {
}
.wpmenucart-contents i {
border-left: 1px solid;
padding: 0 0.5rem 0 0.75rem;
}
.wpmenucart-contents span {
}
.wpmenucart-contents:hover * {
}
}  @media (max-width: 1199px) {
body.viewmenu nav .logo a {
color: var(--color);
}
body.viewmenu .btn-menu .bar:before,
body.viewmenu .btn-menu .bar:after {
background: var(--white);
}
body.viewmenu nav ul.main li a {
color: var(--white);
}
}   header.scrolled {
background-color: rgba(100, 100, 100, 0.9); box-shadow: 0 20px 40px rgba(20, 20, 20, 1);
backdrop-filter: blur(6px);
}