#masthead{
height: 80px;
border-bottom: solid 1px #ddd;
background: rgba(255,255,255,1);
transition: all 500ms;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
color: black;
}
#masthead.transparent{
background: rgba(255,255,255,0);
color: white;
}
.masthead_menu_link{
display: flex;
margin-top: 30px;
margin-left: 30px;
}
.masthead_menu_link:hover{
cursor: pointer;
}
.masthead_menu_link:hover{
text-decoration: none;
}
.masthead_menu_bars{
width: 10px;
height: 20px;
border-left: 2px solid #000;
border-right: 2px solid #000;
margin-right: 20px;
}
#masthead.transparent .masthead_menu_bars{
border-color: white;
}
.masthead_menu_text{
font-weight: bold;
text-transform: uppercase;
color: black;
font-size: 14px;
}
#masthead.transparent .masthead_menu_text{
color: white;
} #masthead .search-link{
margin-top: 30px;
margin-right: 30px;
justify-content: flex-end;
}
#masthead .search-link .fa{
font-size: 20px;
}
.masthead_search_text{
font-weight: bold;
text-transform: uppercase;
color: black;
}
#masthead.transparent .masthead_search_text{
color: white;
}
body.solid-menu-mode .entry-header{
margin-top: 100px;
} .site-logo-section{
padding: 0px 10px;
}
.site-logo-section .custom-logo-link{
max-width: 350px;
display: block;
margin: auto;
}
#masthead .flex_it{
display: flex;
flex-grow: 1;
flex-basis: 0;
height: 80px;
}
#masthead nav{
position: fixed;
top: 0;
background: #fff;
border-right: solid 1px #ddd;
left: -375px;
width: 375px;
bottom: 0;
z-index: 99;
transition: all 500ms;
}
#masthead nav .navInner{
padding: 40px 0px;
}
#site-navigation .custom-logo{
margin: auto 0px 0px 80px;
display: block;
margin-top: 25px;
max-width: calc( 375px - 100px );
}
#masthead .menu-main-menu-container{
margin: 40px 0px 0px 0px;
max-height: calc(100vh - 120px);
overflow-y: scroll;
}
#masthead .menu-main-menu-container #primary-menu{
}
#primary-menu,
#primary-menu ul{
padding: 0;
padding-bottom: 50px;
list-style: none;
margin: 0;
margin-top: 30px;
}
#primary-menu ul{
margin-top: 0;
}
#primary-menu > li > a{
border-top: 1px solid #ddd;
padding: 30px 45px;
font-size: 20px;
line-height: 26px;
text-transform: capitalize;
display: block;
color: black;
}
#primary-menu > li:last-child > a{
border-bottom: 1px solid #ddd;
}
#primary-menu .sub-menu{
padding: 30px 0px;
}
#primary-menu .sub-menu > li > a{
font-weight: 400;
font-size: 14px;
line-height: 25px;
margin-top: 0;
margin-bottom: 0;
padding-left: 45px;
font-weight: bold;
color: black;
text-transform: uppercase;
}
.close {
position: absolute;
left: 32px;
top: 68px;
width: 32px;
height: 32px;
opacity: 0.3;
}
.close:hover {
opacity: 1;
}
.close:before, .close:after {
position: absolute;
left: 15px;
content: ' ';
height: 33px;
width: 2px;
background-color: #333;
}
.close:before {
transform: rotate(45deg);
}
.close:after {
transform: rotate(-45deg);
}
#primary-navigation-overlay{
background: rgba(0,0,0,.5);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
transition: all .5s;
opacity: 0;
visibility: hidden;
}
#primary-navigation-overlay.is-visible{
opacity: 1;
visibility: visible;
}