/**
 * Required Variables
 */
 .menu-button-container {
	justify-content: space-between;
	margin: 0;
	left: 0;
	position: absolute;
	top: 0;
}

.lock-scrolling .menu-button-container > .button {
	position: fixed;
	top: 0;
	left: 0;
}

/* Prevent the footer from overlapping the navigation when open */
.lock-scrolling .site-footer {
	display: none;
}

.menu-button-container #primary-open-menu {
	margin-top: calc(0.25 * var(--global--spacing-unit));
	margin-left: calc(0.25 * var(--global--spacing-unit));
	background-color: transparent;

	padding-top: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
}

.admin-bar.lock-scrolling .menu-button-container > .button,
.admin-bar:not(.primary-navigation-open) .menu-button-container {
	top: var(--wpadmin-bar--height);
}

.has-marketing-bar.lock-scrolling .menu-button-container > .button,
.has-marketing-bar:not(.primary-navigation-open) .menu-button-container {
	top: var(--wpcom-marketing-bar--height);
}

.admin-bar.has-marketing-bar.lock-scrolling .menu-button-container > .button,
.admin-bar.has-marketing-bar:not(.primary-navigation-open) .menu-button-container {
	top: calc(var(--wpadmin-bar--height) + var(--wpcom-marketing-bar--height));
}

#site-navigation + .menu-button-container {
	left: 0;
}

.menu-button-container .button,
.primary-navigation .button,
.woo-navigation .button,
.menu-button-container #primary-open-menu.button:hover .svg-icon,
.menu-button-container #primary-open-menu.button:focus .svg-icon {
	font-size: var(--primary-nav--font-size);
	background-color: transparent;
	color: var(--primary-nav--color-link);
	z-index: 500;
}

/* The menu toggle has a different color on the home page */
.page-template-landing-page .menu-button-container #primary-open-menu.button .svg-icon,
.page-template-landing-page .menu-button-container #primary-open-menu.button:hover .svg-icon,
.page-template-landing-page .menu-button-container #primary-open-menu.focus:hover .svg-icon {
	color: #FFF;
}

/* The menu toggle has a different color on the About Us */
.page-about .menu-button-container #primary-open-menu.button .svg-icon,
.page-about .menu-button-container #primary-open-menu.button:hover .svg-icon,
.page-about .menu-button-container #primary-open-menu.focus:hover .svg-icon {
	color: #FFF;
}

.menu-button-container .button.close,
.primary-navigation .button.close,
.woo-navigation .button.close {
	display: none;
	position: absolute;
	left: 0;
	z-index: 501;
}

.site-header .menu-button-container {
	z-index: 999;
}

.has-marketing-bar .menu-button-container .button.close, .has-marketing-bar
.primary-navigation .button.close, .has-marketing-bar
.woo-navigation .button.close {
	top: calc(-1 * var(--wpcom-marketing-bar--height));
}

.admin-bar .menu-button-container .button.close, .admin-bar
.primary-navigation .button.close, .admin-bar
.woo-navigation .button.close {
	top: calc(-1 * var(--wpadmin-bar--height));
}

.admin-bar.has-marketing-bar .menu-button-container .button.close, .admin-bar.has-marketing-bar
.primary-navigation .button.close, .admin-bar.has-marketing-bar
.woo-navigation .button.close {
	top: calc(-1 * (var(--wpadmin-bar--height) + var(--wpcom-marketing-bar--height)));
}

.menu-button-container .button#woo-open-menu,
.primary-navigation .button#woo-open-menu,
.woo-navigation .button#woo-open-menu {
	padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
	margin-top: calc(0.25 * var(--global--spacing-unit));
	margin-left: calc(0.25 * var(--global--spacing-unit));
}

.menu-button-container .button#woo-open-menu .svg-icon,
.primary-navigation .button#woo-open-menu .svg-icon,
.woo-navigation .button#woo-open-menu .svg-icon {
	margin-left: 0;
	margin-right: calc(0.25 * var(--global--spacing-unit));
	vertical-align: middle;
}

.menu-button-container .button .dropdown-icon,
.primary-navigation .button .dropdown-icon,
.woo-navigation .button .dropdown-icon {
	display: flex;
	align-items: center;
	font-size: 0px;
	background-image: url('../images/icon-hamburger-green.svg');
	background-repeat: no-repeat;
	background-position: center;

}

@media screen and (min-width: 1024px) {
	.menu-button-container .button .dropdown-icon,
	.primary-navigation .button .dropdown-icon,
	.woo-navigation .button .dropdown-icon {
		width: 40px;
	}
}

.page-template-landing-page .button .dropdown-icon,
.page-template-absolute-header .button .dropdown-icon {
	background-image: url('../images/icon-hamburger-white.svg');
}

.menu-button-container .button .dropdown-icon .svg-icon,
.primary-navigation .button .dropdown-icon .svg-icon,
.woo-navigation .button .dropdown-icon .svg-icon {
	/*margin-left: calc(0.25 * var(--global--spacing-unit));
	color: var(--global--color-primary);*/
	opacity: 0;
}

.menu-button-container .button .dropdown-icon.close,
.primary-navigation .button .dropdown-icon.close,
.woo-navigation .button .dropdown-icon.close {
	background-image: url('../images/icon-hamburger-green-close.svg');
}

.menu-button-container .button .dropdown-icon.open .svg-icon,
.primary-navigation .button .dropdown-icon.open .svg-icon,
.woo-navigation .button .dropdown-icon.open .svg-icon {
	position: relative;
	top: -1px;
}

.menu-button-container .button .hide-visually,
.primary-navigation .button .hide-visually,
.woo-navigation .button .hide-visually {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	padding: 0 !important;
	border: 0 !important;
	height: 1px !important;
	width: 1px !important;
	overflow: hidden;
}

.primary-navigation-open .menu-button-container #primary-close-menu, .primary-navigation-open
.primary-navigation #primary-close-menu, .primary-navigation-open
.woo-navigation #primary-close-menu {
	display: flex;
	margin-top: 0;
	margin-left: calc(0.25 * var(--global--spacing-unit));
	background-color: transparent;
	top: 0px;
}

.primary-navigation .button:hover .dropdown-icon .svg-icon{
	color: var(--primary-nav--color-link);
}

.woo-navigation-open .menu-button-container #woo-close-menu, .woo-navigation-open
.primary-navigation #woo-close-menu, .woo-navigation-open
.woo-navigation #woo-close-menu {
	display: flex;
	padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(var(--button--padding-horizontal) - (0.25 * var(--global--spacing-unit)));
	margin-top: calc(0.25 * var(--global--spacing-unit));
	margin-right: calc(0.25 * var(--global--spacing-unit));
}

.woo-navigation-open .menu-button-container #primary-open-menu,
.woo-navigation-open .menu-button-container #woo-open-menu,
.primary-navigation-open .menu-button-container #primary-open-menu,
.primary-navigation-open .menu-button-container #woo-open-menu {
	display: none;
}

.woo-navigation-open .primary-navigation #primary-open-menu,
.primary-navigation-open .primary-navigation #primary-open-menu {
	display: none;
}

.primary-navigation,
.woo-navigation {
	/*position: absolute;*/
	top: 0;
	left: 0;
	color: var(--primary-nav--color-text);
	font-size: var(--primary-nav--font-size);
	margin-top: 0;
	margin-bottom: 0;
}

.primary-navigation,
.woo-navigation {
	width: 100%;
}

.primary-navigation > div,
.woo-navigation > div {
	visibility: hidden;
	opacity: 0;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: calc(4* var(--global--spacing-unit)) var(--global--spacing-unit) var(--global--spacing-horizontal);
	background-color: var(--global--color-tertiary);
	overflow-x: hidden;
	overflow-y: scroll;
	transition: all .15s ease-in-out;
	/*transform: translateY(var(--global--spacing-vertical));*/
}

.primary-navigation > div,
.woo-navigation > div {
	z-index: 499;
}

.primary-navigation-open .primary-navigation > .primary-menu-container, .primary-navigation-open
.woo-navigation > .primary-menu-container {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
}

.has-marketing-bar .primary-navigation,
.has-marketing-bar .primary-navigation > div, .has-marketing-bar
.woo-navigation,
.has-marketing-bar
.woo-navigation > div {
	top: var(--wpcom-marketing-bar--height);
}

.admin-bar .primary-navigation,
.admin-bar .primary-navigation > div, .admin-bar
.woo-navigation,
.admin-bar
.woo-navigation > div {
	top: var(--wpadmin-bar--height);
}

.admin-bar.has-marketing-bar .primary-navigation,
.admin-bar.has-marketing-bar .primary-navigation > div, .admin-bar.has-marketing-bar
.woo-navigation,
.admin-bar.has-marketing-bar
.woo-navigation > div {
	top: calc(var(--wpadmin-bar--height) + var(--wpcom-marketing-bar--height));
}

.primary-navigation div > ul ul,
.woo-navigation div > ul ul {
	padding-left: 0;
}

.primary-navigation div > ul li,
.woo-navigation div > ul li {
	display: block;
	position: relative;
	width: 100%;
	z-index: 1;
}

.primary-navigation div > ul li:hover, .primary-navigation div > ul li:focus-within,
.woo-navigation div > ul li:hover,
.woo-navigation div > ul li:focus-within {
	cursor: pointer;
	z-index: 99999;
}

.primary-navigation div > ul > li > .sub-menu,
.woo-navigation div > ul > li > .sub-menu {
	position: relative;
}

.primary-navigation div > ul > li > .sub-menu .sub-menu,
.woo-navigation div > ul > li > .sub-menu .sub-menu {
	width: 100%;
}

.primary-navigation .primary-menu > .menu-item:hover > a,
.woo-navigation .primary-menu > .menu-item:hover > a {
	color: var(--primary-nav--color-link-hover);
}

.primary-navigation .primary-menu-container > ul > .menu-item,
.woo-navigation .primary-menu-container > ul > .menu-item {
	padding: calc(0.5 * var(--primary-nav--padding)) 0;
}

.primary-navigation .menu-item > a,
.woo-navigation .menu-item > a {
	color: var(--primary-nav--color-link);
}

.primary-navigation .menu-item > a:hover,
.woo-navigation .menu-item > a:hover {
	color: var(--primary-nav--color-link-hover);
	border-color: var(--primary-nav--color-border);
	text-decoration: none;
}

.primary-navigation .menu-item > a:focus,
.woo-navigation .menu-item > a:focus {
	color: var(--global--color-secondary);
	text-decoration: none;
}

.primary-navigation .menu-item > a:active,
.woo-navigation .menu-item > a:active {
	color: var(--primary-nav--color-link);
}

.primary-navigation #menu-primary-1 > .menu-item,
.woo-navigation #menu-primary-1 > .menu-item {
	border-bottom: 1px solid var(--global--color-primary);
}

.primary-navigation #menu-primary-1 > .menu-item > a,
.woo-navigation #menu-primary-1 > .menu-item > a {
	font-family: var(--heading--font-family);
}

.primary-navigation a,
.woo-navigation a {
	color: currentColor;
	display: inline;

	font-size: var(--primary-nav--font-size-mobile);
	font-weight: var(--primary-nav--font-weight);

}

.primary-menu-container .menu-wrapper {
	padding-left: 0;
}

.primary-navigation a + svg,
.woo-navigation a + svg {
	fill: currentColor;
}

.primary-navigation a:hover, .primary-navigation a:link, .primary-navigation a:visited,
.woo-navigation a:hover,
.woo-navigation a:link,
.woo-navigation a:visited {
	color: currentColor;
}

.primary-navigation .sub-menu,
.woo-navigation .sub-menu {
	list-style: none;
	margin-left: var(--primary-nav--padding);
}

.primary-navigation .sub-menu .menu-item:first-child,
.woo-navigation .sub-menu .menu-item:first-child {
	padding-top: calc(0.5 * var(--primary-nav--padding));
}

.primary-navigation .sub-menu .menu-item:last-child,
.woo-navigation .sub-menu .menu-item:last-child {
	padding-bottom: calc(0.5 * var(--primary-nav--padding));
}

.primary-navigation .sub-menu .menu-item a,
.woo-navigation .sub-menu .menu-item a {
	display: inline;
	font-size: 18px;
	text-transform: uppercase;
}

.primary-navigation .menu-item-has-children > .svg-icon,
.woo-navigation .menu-item-has-children > .svg-icon {
	display: none;
}

.primary-navigation .hide-visually,
.woo-navigation .hide-visually {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	padding: 0 !important;
	border: 0 !important;
	height: 1px !important;
	width: 1px !important;
	overflow: hidden;
}

/**
 * Extensions
 *
 * Custom Social Icons
 */
.primary-menu-container .social-icons {
	text-align: right;
	padding-top: 10px;
	padding-bottom: 5px;
}


.primary-menu-container .social-icons > a {
	display: inline-block;
	width: 30px;
	height: 30px;
	background-size: auto;
	background-position: center;
	background-repeat: no-repeat;
}

.primary-menu-container .social-icons > a:not(:last-child) {
	margin-right: 20px;
}

.primary-menu-container .social-icons .instagram {
	background-image: url(../images/social-icons/icon-instagram-green.svg);
}

.primary-menu-container .social-icons .twitter {
	background-image: url(../images/social-icons/icon-twitter-green.svg);
}

.primary-menu-container .social-icons .facebook {
	background-image: url(../images/social-icons/icon-facebook-green.svg);
}

.primary-menu-container .social-icons .tiktok {
	background-image: url(../images/social-icons/icon-tiktok-green.svg);
}

.primary-menu-container .social-icons .youtube {
	background-image: url(../images/social-icons/icon-youtube-green.svg);
}

/**
 * Extensions
 *
 * Custom Navigation Search
 */
.menu-header-search .input-wrapper {
	display: inline-block;
	border: 2px solid var(--global--color-primary);
	border-radius: 40px;
	position: relative;
	width: 100%;
	max-width: 400px;
}

.menu-header-search .input-wrapper input[type="text"]{
	border-width: 0px;
	padding: 10px 24px;
	text-transform: uppercase;
	width: 80%;
}

.menu-header-search .input-wrapper input[type="submit"]{
	position: relative;
    padding: 0;
    height: 28px;
    display: inline-block;
    background-color: transparent;
    background-image: url(../images/arrow-search.svg);
    background-repeat: no-repeat;
    background-position: center;
    font-size: 0px;
    width: 17%;
    background-size: contain;
    top: -6px;
}

.menu-header-search .input-wrapper input[type="text"]::placeholder {
	/* Chrome, Firefox, Opera, Safari 10.1+ */
	color: var(--global--color-primary);
	opacity: 1; /* Firefox */
}

.menu-header-search .input-wrapper input[type="text"]:-ms-input-placeholder {
	/* Internet Explorer 10-11 */
	color: var(--global--color-primary);
}

.menu-header-search .input-wrapper input[type="text"]::-ms-input-placeholder {
	/* Microsoft Edge */
	color: var(--global--color-primary);
}

/**
 *
 * Mobile overrides
 *
 */

@media only screen and (max-width: 781px) {
	.menu-button-container #primary-open-menu,
	.primary-navigation-open .menu-button-container #primary-close-menu, .primary-navigation-open .primary-navigation #primary-close-menu, .primary-navigation-open .woo-navigation #primary-close-menu {
		padding: 12px 10px;

	}

	.primary-navigation #menu-primary-1 > .menu-item > a, .woo-navigation #menu-primary-1 > .menu-item > a {
		font-size: 26px;
	}

	.primary-menu-container .social-icons {
		text-align: center;
	}
}


/* Account for the admin bar on resolutions higher than mobile */
@media only screen and (min-width: 782px) {
	.admin-bar .primary-navigation, .admin-bar .primary-navigation > div, .admin-bar .woo-navigation, .admin-bar .woo-navigation > div {
		top: 32px
	}

	/* Increase the side padding of the navigation on desktop */
	.primary-navigation > div,
	.woo-navigation > div {
		padding: 100px 80px;
	}
}


@media only screen and (max-width: 481px) {
	.lock-scrolling .site {
		left: 0;
		max-width: 100%;
		position: fixed;
		right: 0;
	}
}

@media only screen and (min-width: 482px) {
	.lock-scrolling .site {
		left: 0;
		max-width: 100%;
		position: fixed;
		right: 0;
	}
}
