/*
88b 88 dP"Yb 888888 888888
88Yb88 dP Yb 88 88__
88 Y88 Yb dP 88 88""
88 Y8 YbodP 88 888888
*/
/*
DO NOTE EDIT THIS FILE for page-specific styles.
For page-specific elements, either:
1. Add the styles to the page template's own CSS. Enqueue the CSS file within that page tmplate's file.
OR
2. If the page uses the Default Template, add the styles to 04-page-default-templates.css
*/
header.header-main ul {
list-style-type : none;
font-size : 2rem;
font-weight : 800;
text-transform : lowercase;
}
header.header-main {
--border-color: var(--grey);
--border-color-responsive: transparent;
}
@media screen and (max-width: 768px) {
header.header-main ul {
font-size: 18px
}
}
header.header-main a:hover {
text-decoration: none;
}
header.header-main .menu-header-container {
display : flex;
justify-content : end;
height : fit-content;
margin-top : calc(52 * var(--vwr));
}
@media screen and (max-width: 768px) {
header.header-main .menu-header-container {
flex-direction: column;
margin: var(--responsive-margin);
margin-top: 0;
}
}
/*
88 888888 Yb dP 888888 88 .d
88 88__ Yb dP 88__ 88 .d88
88 .o 88"" YbdP 88"" 88 .o 88
88ood8 888888 YP 888888 88ood8 88
*/
header.header-main .menu-header-container > li {
margin-left : calc(47 * var(--vwr));
}
@media screen and (max-width: 768px) {
header.header-main .menu-header-container > li {
margin-left: 0;
border-bottom: 1px solid var(--border-color-responsive);
border-left: 1px solid var(--border-color-responsive);
border-right: 1px solid var(--border-color-responsive);
}
}
header.header-main .menu-header-container > li:first-child {
margin-left: 0;
}
@media screen and (max-width: 768px) {
header.header-main .menu-header-container > li:first-child {
border-top: 1px solid var(--border-color-responsive);
}
}
header.header-main .menu-header-container > li.menu-item-has-children {
position : relative;
padding-right : calc(10px + 9px);
}
@media screen and (max-width: 768px) {
header.header-main .menu-header-container > li.menu-item-has-children {
padding-right : 0;
}
}
header.header-main .menu-header-container > li.menu-item-has-children:after {
content : "";
display : block;
position : absolute;
right : calc(-10 * var(--vwr));
top : calc(50% - calc(10 * var(--vwr)));
width : 0;
height : 0;
border-left : calc(10 * var(--vwr)) solid transparent;
border-right : calc(10 * var(--vwr)) solid transparent;
border-bottom : calc(10 * var(--vwr)) solid var(--dark-purple);
transform : rotate(180deg);
transition : transform 0.25s ease-in-out;
}
@media screen and (max-width: 768px) {
header.header-main .menu-header-container > li.menu-item-has-children:after {
display: none;
}
}
header.header-main .menu-header-container > li.menu-item-has-children:hover:after {
border-bottom-color: var(--purple);
transform : rotate(0deg);
}
header.header-main .menu-header-container > li.menu-item-has-children.current-page-ancestor:after {
border-bottom-color: var(--purple);
}
header.header-main .menu-header-container > li > a {
color : var(--dark-purple);
transition : color 0.25s ease-in-out;
}
header.header-main .menu-header-container > li.current-menu-item > a,
header.header-main .menu-header-container > li.current-menu-ancestor > a {
padding-bottom: calc(5 * var(--vwr));
color: var(--purple);
border-bottom: calc(7 * var(--vwr)) solid var(--purple);
transition: border-bottom-color 0.25s ease-in-out;
}
@media screen and (max-width: 768px) {
header.header-main .menu-header-container > li > a {
display: block;
padding: calc(var(--responsive-margin) * 0.5) 0;
/* margin-left: var(--responsive-margin);*/
}
header.header-main .menu-header-container > li.current-menu-item > a,
header.header-main .menu-header-container > li.current-menu-ancestor > a {
color: var(--purple);
padding-bottom: 0;
border-bottom: 0;
}
}
header.header-main .menu-header-container > li:hover > a {
color: var(--purple);
}
header.header-main .menu-header-container > li.current-menu-item > a:hover,
header.header-main .menu-header-container > li.current-menu-ancestor > a:hover {
border-bottom-color: var(--purple);
}
header.header-main .menu-header-container > li.menu-item-has-children:hover > a {
border-bottom-color: transparent;
padding-bottom: calc(30 * var(--vwr));
}
@media screen and (min-width: 769px) {
header.header-main .menu-header-container > li:last-child {
padding: calc(10 * var(--vwr)) calc(15 * var(--vwr));
border: 3px solid var(--dark-purple);
border-radius: calc(var(--border-radius-normal) * var(--vwr));
margin-top: calc(-13 * var(--vwr));
transition: border-color 0.25s ease-in-out;
}
header.header-main .menu-header-container > li:last-child:hover {
border-color: var(--purple);
}
header.header-main .menu-header-container > li.current-menu-item:last-child,
header.header-main .menu-header-container > li.current-menu-ancestor:last-child {
border-color: var(--purple);
}
}
header.header-main #menu-header-from-left-menu.menu-header-container {
display: none;
}
@media screen and (max-width: 768px) {
header.header-main #menu-header-from-left-menu.menu-header-container {
display: block;
}
}
/*
88 888888 Yb dP 888888 88 oP"Yb.
88 88__ Yb dP 88__ 88 "' dP'
88 .o 88"" YbdP 88"" 88 .o dP'
88ood8 888888 YP 888888 88ood8 .d8888
*/
header.header-main .menu-header-container > li > ul.sub-menu {
position : absolute;
top: calc(50 * var(--vwr));
left: calc(-20 * var(--vwr));
display : none;
min-width : 100%;
padding: calc(20 * var(--vwr));
border-radius: calc(var(--border-radius-normal) * var(--vwr));
font-size : 0.9rem;
font-weight : bold;
text-transform : uppercase;
background-color: var(--white);
box-shadow: var(--box-shadow);
z-index: 99999;
}
@media screen and (max-width: 768px) {
header.header-main .menu-header-container > li > ul.sub-menu {
position: relative;
margin-left: calc(var(--responsive-margin) * 2);
display: flex;
flex-direction: column;
padding-top: 0;
width: calc(100 - var(--responsive-margin) * 2);
min-width: 0;
font-size : 24px;
font-weight: 800;
text-transform: lowercase;
box-shadow: none;
}
}
header.header-main .menu-header-container > li:hover > ul.sub-menu {
display : flex;
flex-direction : column;
}
header.header-main .menu-header-container > li > ul.sub-menu > li {
padding : calc(8 * var(--vwr)) calc(15 * var(--vwr));
border-radius : calc(var(--border-radius-normal) * var(--vwr));
margin-top : calc(8 * var(--vwr));
white-space : nowrap;
color : var(--white);
background-color : var(--dark-purple);
transition : background-color 0.25s ease-in-out;
}
@media screen and (max-width: 768px) {
header.header-main .menu-header-container > li > ul.sub-menu > li {
padding: 0;
border-radius: 0;
border-bottom: 1px solid var(--border-color-responsive);
border-left: 1px solid var(--border-color-responsive);
margin-top: 0;
color: var(--dark-purple);
background-color: transparent;
}
}
header.header-main .menu-header-container > li > ul.sub-menu > li:first-child {
margin-top: 0;
}
@media screen and (max-width: 768px) {
header.header-main .menu-header-container > li > ul.sub-menu > li:first-child {
border-top: 1px solid var(--border-color-responsive);
}
header.header-main .menu-header-container > li > ul.sub-menu > li:last-child {
border-bottom: 0;
}
}
header.header-main .menu-header-container > li > ul.sub-menu > li:hover {
background-color: var(--purple);
}
@media screen and (max-width: 768px) {
header.header-main .menu-header-container > li > ul.sub-menu > li:hover {
color: var(--purple);
background-color: transparent;
}
}
header.header-main .menu-header-container > li > ul.sub-menu > li > a {
display: inline-block;
width: 100%;
}
@media screen and (max-width: 768px) {
header.header-main .menu-header-container > li > ul.sub-menu > li > a {
display: block;
padding: calc(var(--responsive-margin) * 0.5) 0;
/* margin-left: var(--responsive-margin);*/
}
header.header-main .menu-header-container > li > ul.sub-menu > li.current-menu-item > a {
color: var(--purple);
}
}