header#header {
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
}
header#header .header-container {
display: grid;
grid-template-columns: auto 80px;
width: 100%;
height: 40px;
align-items: center;
}
header#header #logo {
display: flex;
align-items: center;
padding: 0;
clear: both;
overflow: hidden;
height: 100%;
}
header#header .header-icons {
display: flex;
align-items: center;
justify-content: right;
}
header#header #logo a {
display: flex;
height: 100%;
align-items: center;
}
header#header #logo #site-title {
margin:5px;
font-weight: bold;
font-family: 'Open Sans', sans-serif;
display: block;
font-size: 1.5em;
color: #E50914;
}
header#header #logo a img {
margin: 0;
padding: 5px;
display: block;
width: auto;
max-width: calc(100% - 5px);
max-width: -webkit-calc(100% - 5px);
max-width: -moz-calc(100% - 5px);
max-height: 100%;
flex-basis: 0;
}
header#header #logo a img#wpvs-desktop-logo {
display: none;
}
header#header .header-icons {
z-index: 9999;
position: relative;
text-align: right;
}
header#header .header-icons label {
display: inline-block;
vertical-align: middle;
padding: 0 5px;
}
header#header .header-icons label .dashicons {
font-size: 34px;
}
@media only screen and (min-width: 768px) {
header#header {
left: 0;
width: 100%;
margin: 0 auto;
}
header#header:hover {
opacity: 1;
}
header#header #logo #site-title {
font-size: 30px;
}
header#header .header-container {
height:50px;
}
header#header #logo a img#wpvs-desktop-logo {
display: block;
}
header#header #logo a img#wpvs-mobile-logo {
display: none;
}
}
@media only screen and (min-width: 960px) {
header#header.show-desktop-menu .header-container {
grid-template-columns: 250px auto 50px;
}
}