:root {
--con-width: 1080px;
--con-half: calc(var(--con-width) / 2);
--con-pad: max(2rem, calc((100% - var(--con-width)) / 2));
}   .site-header {
background-color: var(--c-primary);
border-bottom: 1rem solid var(--c-background);
padding: 1rem var(--con-pad);
display: grid;
grid-template-columns: 1fr 1fr;
}
@media (min-width: 700px) {
.site-header {
border-bottom: none;
position: relative;
padding-bottom: 0;
grid-template-columns: 1fr 2fr;
grid-template-rows: 1fr auto auto;
align-items: start;
max-width: 100%;
}
.site-header::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
background-color: var(--c-background);
height: 4rem;
}
}
.menu-toggle {
color: white;
display: flex;
font-size: 16px;
align-self: center;
justify-self: end;
}
.menu-toggle:hover {
color: white;
text-decoration: none;
}
.menu-toggle img {
margin: 0 5px;
vertical-align: -10%;
width: 14px;
}
@media (min-width: 700px) {
.menu-toggle {
display: none;
}
}
.menu-wrap .menu-toggle {
background-color: rgba(0, 0, 0, 0.35);
margin: -1rem -1rem 0;
padding: 1rem;
}
.site-header .wp-block-social-links {
margin: 0;
}
.site-logo {
display: flex;
max-width: 240px;
width: 100%;
position: relative;
z-index: 10;
}
@media (max-width: 699px) {
.menu-wrap {
background: var(--c-background);
overflow-y: auto;
position: fixed;
top: 0;
right: -220px;
bottom: 0;
width: 220px;
transition: 0.3s ease-out;
visibility: hidden;
z-index: 1000;
padding: 1rem;
}
.site-header .wp-block-social-links {
display: none;
}
}
body.menu-open .menu-wrap {
right: 0;
visibility: visible;
}
@media (min-width: 700px) {
.menu-wrap {
grid-column: span 2;
grid-row: span 2;
display: grid;
grid-template-rows: subgrid;
grid-template-columns: subgrid;
margin-top: -2rem;
}
}
#second-menu {
grid-row: 1 / 2;
grid-column: 2/3;
}
#main-menu {
grid-row: 2 / 3;
grid-column: span 2;
position: relative;
z-index: 10;
}
#main-menu > ul {
position: relative;
z-index: 2;
}
#header_cart-icon {
display: inline-block;
position: relative;
z-index: 2;
width: 32px;
}
svg#icon-cart {
fill: white;
width: 100%;
height: auto;
display: block;
}
#header_cart-icon:hover svg#icon-cart {
fill: white;
}
#header_cart-count {
color: black;
font-family: Sans-Serif;
font-size: 13px;
font-weight: 600;
left: 0;
position: absolute;
text-align: center;
top: 10%;
width: 100%;
}   @media (min-width: 700px) {
.site-header nav > ul {
transform: translate(15px, 0);
}
}
ul.menu {
list-style-type: none;
margin: 0 auto;
}
li.menu-item {
display: inline-block;
}
li.menu-item a {
display: block;
color: var(--c-foreground);
font-family: var(--font-primary);
font-weight: bold;
text-transform: lowercase;
font-size: 16px;
letter-spacing: 0.5px;
padding: 15px;
text-decoration: none;
}
nav#main-menu {
text-align: right;
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
}
nav#main-menu ul.menu {
margin: 0;
padding-left: 0;
}
nav#main-menu li.menu-item a {
border-top: 5px solid transparent;
border-bottom: 8px solid transparent;
color: white;
}
nav#main-menu > ul li:hover > a,
nav#main-menu > ul li.current_page_item > a,
nav#main-menu > ul li.current-menu-item > a,
nav#main-menu > ul li.current_page_ancestor > a,
nav#main-menu > ul li.current-page-ancestor > a,
nav#main-menu > ul li.current-menu-parent > a,
nav#main-menu > ul li.active > a {
border-bottom-color: #fff;
}
li.menu-search {
position: relative;
}
.site-header li.menu-search a {
padding-right: 35px;
}
li.menu-search:after {
color: #fff;
content: "\e601";
cursor: pointer;
font-family: "icomoon";
font-size: 16px;
position: absolute;
top: 22px;
right: 14px;
}
nav#second-menu {
text-align: right;
top: 0;
}
nav#second-menu ul li:hover a,
nav#second-menu ul li.current_page_item a,
nav#second-menu ul li.current-menu-item a {
color: var(--c-background);
text-decoration: underline;
}
@media (max-width: 700px) {
nav#second-menu ul li:hover a,
nav#second-menu ul li.current_page_item a,
nav#second-menu ul li.current-menu-item a {
color: var(--c-primary);
}
}
@media screen and (max-width: 699px) {
nav#main-menu ul.menu {
padding: 0;
width: 100%;
}
nav#main-menu ul li a {
font-size: 1.75em;
}
}
@media (max-width: 699px) {
.site-header .wp-block-social-links {
text-align: center;
top: 15px;
right: 154px;
}
ul.menu {
margin: 0;
padding: 8px 0;
}
li.menu-item {
display: block;
}
.site-header .menu-item a {
font-size: 14px !important;
padding: 6px 6px;
}
li.menu-search a {
padding-right: 35px;
}
li.menu-search:after {
top: 7px;
right: 14px;
}
#header_cart-icon {
order: 2;
margin-right: 12px;
margin-top: 12px;
}
}   ul.sub-menu {
background-color: var(--c-background);
display: none;
margin: 0;
padding: 1em;
position: absolute;
text-align: left;
z-index: 100;
}
li.menu-item-has-children:hover ul.sub-menu {
display: block;
}
ul.sub-menu li {
display: block !important;
}
ul.sub-menu li a {
border-top: none !important;
padding: 0.5em !important;
}
@media (max-width: 699px) {
ul.sub-menu {
display: block;
position: static;
padding: 0 1rem;
background-color: rgba(0, 0, 0, 0.35);
margin: 0 -1rem;
}
nav#second-menu {
padding: 0;
text-align: left;
}
nav#second-menu li.menu-item a,
nav#main-menu li.menu-item a {
border: none;
color: white;
}
nav#main-menu,
ul.sub-menu {
border: none;
text-align: right;
flex-direction: column;
align-items: flex-end;
}
}   .search-box {
background-color: #e4ded6;
box-shadow: 0 1px 3px rgba(255, 255, 255, 0.9);
border-top: 1px solid #ece8e1;
border-bottom: 1px solid #cac5bd;
display: none;
padding: 7em 0;
position: absolute;
text-align: right;
-webkit-transition: none;
-moz-transition: none;
transition: none;
width: 100%;
z-index: 5;
}
.search .search-box { display: block;
position: static;
}
.search-box .search-form .screen-reader-text,
.search-box .search-form .search-field,
.search-box .search-form .search-select,
.search-box .search-form .search-submit {
border: 0px solid transparent;
border-left: 1px solid #e4ded6;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
display: block;
float: left;
font-size: 1.8em;
height: 50px;
margin: 0;
padding: 14px;
}
.search-box .search-form .screen-reader-text {
background-color: #6f60ab;
color: white;
text-transform: uppercase;
position: relative;
}
.search-box .search-form .screen-reader-text:after {
background: none;
border-color: transparent transparent transparent #6f60ab;
border-style: solid;
border-width: 38px;
content: " ";
display: inline-block;
*display: inline;
pointer-events: none;
position: absolute;
right: -70px;
top: -25%;
*zoom: 1;
}
.search-box .search-form .search-field {
-webkit-appearance: none;
color: #6453a2;
font-weight: 600;
padding: 15px;
text-indent: 20px;
width: 55%;
}
.search-box .search-form .search-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 15px 55px 15px 15px;
margin: 0;
background-color: white;
background-image: url(//innovativeresources.org/wp-content/themes/innovative-theme/src/styles/images/select-bg.jpg);
background-repeat: no-repeat;
background-position: right center;
background-size: contain;
cursor: pointer;
}
@-moz-document url-prefix() {
.search-box .search-form .search-select {
background-position: 92% center;
}
.search-box .search-form .search-submit {
margin-left: -17px;
}
}
.search-box .search-form .search-submit {
padding: 16px;
cursor: pointer;
color: white;
background: var(--c-primary);
font-family: var(--font-icons);
}
.search-box .search-form .search-submit:hover {
background: var(--c-yellow);
}
.search-item {
float: left;
padding: 0 1em 2em 0;
text-align: center;
width: 20%;
}
.search-item:nth-of-type(5n + 1) {
clear: both;
}
.searchlist li {
list-style-type: none;
margin: 0;
padding: 0 0 0 30px;
}
ul.slides {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
.slide img {
display: inline-block;
}
.top-slideshow .slide:not(:first-child) {
display: none;
}
.flexslider-featured {
overflow: hidden;
}
.flexslider-featured ul.slides {
display: flex;
}
.flexslider-featured ul.slides > li {
flex: 0 0 auto;
width: 200px;
margin-right: 20px;
}