@charset "UTF-8";

:root {
--header-height: 100%;
--header-offset: var(--base-offset);
--header-background: var(--base-color-background);
--header-color: var(--base-color-text);
--header-color-accent: var(--base-color-accent);
}
@media (max-width: 999px) {
:root {
--header-height: 60px;
}
}
.responsive-header {
background: #eee;
}
@media (min-width: 1000px) {
.responsive-header {
min-width: 375px;
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
position: static;
-ms-flex-positive: 0;
flex-grow: 0;
-ms-flex-item-align: stretch;
align-self: stretch;
height: 100%;
min-height: 100vh;
border-left: 20px solid var(--base-color-light);
padding: 0;
}
}
@media (max-width: 999px) {
.responsive-header {
padding: 0;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
background: var(--base-color-light);
}
}
.responsive-header .site-layout-container {
width: 100%;
-ms-flex-align: start;
align-items: flex-start;
}
.responsive-header .site-layout-container > .site-layout-container__inner {
width: 100%;
max-width: 100%;
}
@media (min-width: 1000px) {
.responsive-header .site-layout-container > .site-layout-container__inner {
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: start;
align-items: flex-start;
padding: var(--base-offset) calc(1.5 * var(--base-offset));
}
}
@media (max-width: 999px) {
.responsive-header .site-layout-container > .site-layout-container__inner {
padding: 0 var(--base-offset);
height: 100%;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
.responsive-header .responsive-header__logo {
font-family: var(--base-headings-font-family);
font-size: var(--base-font-size-medium);
}
.responsive-header .responsive-header__logo figure {
height: auto;
}
@media (min-width: 1000px) {
.responsive-header .responsive-header__logo figure {
margin-bottom: var(--base-offset-vertical);
width: 240px;
max-width: 100%;
}
}
@media (max-width: 599px) {
.responsive-header .responsive-header__logo figure {
width: 200px;
font-size: var(--base-font-size);
}
}
.responsive-header .responsive-header__menu {
text-align: left;
}
@media (min-width: 1000px) {
.responsive-header .responsive-header__menu {
max-width: 350px;
}
}
@media (max-width: 999px) {
.responsive-header .responsive-header__menu {
padding-top: calc(3 * var(--base-offset-vertical));
background: var(--base-color-light) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
}
}
.responsive-header .responsive-header__menu ul.menu {
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: start;
align-items: flex-start;
gap: 0;
}
.responsive-header .responsive-header__menu ul.menu li {
margin: 0;
display: block;
}
.responsive-header .responsive-header__menu ul.menu li a {
margin: 0;
padding: 0;
font-family: var(--base-headings-font-family);
font-size: var(--base-font-size-medium);
line-height: var(--base-headings-line-height);
color: var(--header-color-accent);
}
.responsive-header .responsive-header__menu ul.menu li a:hover {
color: var(--header-color);
}
.responsive-header .responsive-header__menu ul.menu li.current-menu-item > a {
color: var(--header-color) !important;
}
body.is-header-active-modalmenu .responsive-header .responsive-header__menu {
width: 300px;
}
.responsive-header .responsive-header__menu-secondary {
margin-top: var(--base-offset);
}
@media (max-width: 599px) {
.responsive-header .responsive-header__menu-secondary {
max-width: 200px;
}
}
.responsive-header .responsive-header__menu-secondary a {
color: var(--base-color-text-light) !important;
}
.responsive-header .responsive-header__menu-secondary a:hover {
color: var(--header-color) !important;
}
.responsive-header .responsive-header__menu-trigger a[href="#menu"] span {
width: 28px;
height: 2px;
}
body.is-header-active-modalmenu .responsive-header .responsive-header__menu-trigger a[href="#menu"] span:first-child {
-ms-transform: translateY(10px) rotateZ(-45deg);
-webkit-transform: translateY(10px) rotateZ(-45deg);
transform: translateY(10px) rotateZ(-45deg);
}
body.is-header-active-modalmenu .responsive-header .responsive-header__menu-trigger a[href="#menu"] span:last-child {
-ms-transform: translateY(-8px) rotateZ(45deg);
-webkit-transform: translateY(-8px) rotateZ(45deg);
transform: translateY(-8px) rotateZ(45deg);
}
@-webkit-keyframes headerMenuSlideIn {
0% {
right: -300px;
}
100% {
right: 0;
}
}
@keyframes headerMenuSlideIn {
0% {
right: -300px;
}
100% {
right: 0;
}
}