/* style-navigation.css - Ver. 0.1.5 */


/* Navigation - Reset default desktop adjustments */

/* Mobile menu toggles */
.menu-button-container {
	display: flex;
}

/* Mobile menu closed */
.primary-navigation>.primary-menu-container {
	height: 100vh;
	z-index: 499;
	overflow-x: hidden;
	overflow-y: auto;
	transform: translateY(0) translateX(0);
}

.has-logo.has-title-and-tagline .primary-navigation>.primary-menu-container {
	position: fixed;
	transform: translateY(0) translateX(0);
}

.admin-bar .has-logo.has-title-and-tagline .primary-navigation>.primary-menu-container {
	top: var(--global--admin-bar--height);
}

.admin-bar .primary-navigation>.primary-menu-container {
	height: calc(100vh - var(--global--admin-bar--height));
}

.primary-navigation>.primary-menu-container,
.primary-navigation>.primary-menu-container:focus {
	border: unset !important;
}

/* Mobile menu open */
.primary-navigation-open .primary-navigation {
	width: 100%;
	z-index: 2;
}

.primary-navigation-open .has-logo.has-title-and-tagline .primary-navigation>.primary-menu-container {
	transform: translateX(0) translateY(0);
}

/* Navigation desktop - revert adjustments made for desktop  */

.primary-navigation {
	position: fixed;
}

@media (min-width: 482px) {
	.primary-navigation {
		/* (un)Hide Mobile menu on desktop */
		position: fixed;
		margin-left: revert;
	}

	.primary-navigation>.primary-menu-container {
		/* (un)Hide mobile menu toggle */
		visibility: hidden;
		opacity: 0;
		position: fixed;
		padding: var(--global--spacing-vertical);
		background-color: var(--global--color-background);
		transform: translateY(0);

		/* Better align with the site title when the menu wraps. rad 360 navigation.scss */
		margin-right: revert;
		margin-left: revert;
	}


	/* (un)Hide sub-sub-menus */
	.primary-navigation>.primary-menu-container ul>li .sub-menu-toggle[aria-expanded=false]~ul {
		display: block;
	}

	.admin-bar .primary-navigation {
		/* (keep) Don't adjust position when logged-in */
		top: 0;
	}

	.admin-bar .primary-navigation>.primary-menu-container {
		top: var(--global--admin-bar--height);
	}
}

/* Menu list wrapper */
.primary-navigation>div>.menu-wrapper {
	/* revert: padding-bottom: var(--global--spacing-horizontal); */
	/* (don't keep) push menu up on mobile */
	padding-bottom: 0;
}

@media (min-width: 482px) {
	.primary-navigation>div>.menu-wrapper {
		padding-bottom: 0;
	}
}

.primary-navigation>div>.menu-wrapper ul {
	padding-left: 0;
}

/* revert for desktop */
@media (min-width: 482px) {
	.primary-navigation>div>.menu-wrapper li {
		margin: 0;
		/* width: 100%; */
	}

	.primary-navigation>div>.menu-wrapper li:last-child {
		margin-right: inherit;
	}
}

/* (keep) Sub-menu buttons */
.primary-navigation>div>.menu-wrapper .sub-menu-toggle {
	display: none;
}

/* Sub-menus Flyout */
.primary-navigation>div>.menu-wrapper>li>.sub-menu {
	left: unset;
	margin: 0;
	min-width: unset;
	position: relative;
	top: unset;
	padding-top: unset;
	transition: all 0.5s ease;
	z-index: 88888;
}

.primary-navigation>div>.menu-wrapper>li>.sub-menu:before,
.primary-navigation>div>.menu-wrapper>li>.sub-menu:after {
	display: none;
}

.primary-navigation>div>.menu-wrapper>li>.sub-menu li {
	background: var(--global--color-background);
}


/* don't know what the following repositions do,
 (keep them for now) */

.primary-navigation>div>.menu-wrapper>li>.sub-menu.submenu-reposition-left {
	/* rtl:ignore */
	left: 0;
	/* rtl:ignore */
	right: auto;
}

.primary-navigation>div>.menu-wrapper>li>.sub-menu.submenu-reposition-left:before,
.primary-navigation>div>.menu-wrapper>li>.sub-menu.submenu-reposition-left:after {
	/* rtl:ignore */
	left: var(--global--spacing-horizontal);
	/* rtl:ignore */
	right: auto;
}

.primary-navigation>div>.menu-wrapper>li>.sub-menu.submenu-reposition-right {
	/* rtl:ignore */
	right: 0;
	/* rtl:ignore */
	left: auto;
}

.primary-navigation>div>.menu-wrapper>li>.sub-menu.submenu-reposition-right:before,
.primary-navigation>div>.menu-wrapper>li>.sub-menu.submenu-reposition-right:after {
	/* rtl:ignore */
	left: auto;
	/* rtl:ignore */
	right: var(--global--spacing-horizontal);
}





/* revert desktop version */
@media (min-width: 482px) {

	/* Top-level Menu Item */
	.primary-navigation .primary-menu-container>ul>.menu-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

}

/* -------------------------------------------------------------*/
/* --------- END Desktop navigation reverts --------------------*/
/* -------------------------------------------------------------*/





/*** Menu System ***/
/*
		on page..							/work			/work/sephora
		when work nav is..		open			closed	open
		z-index is..
		site-header	X-button	11		 		11			
		work-nav							10		  	10		
		site-content					auto		 	9 				
*/

.single-portfolio .site-content {
	position: relative;
	z-index: 9;
}



/*** MENU ICON  - OPEN/CLOSE ***/

.fancybox-toolbar,
.menu-button-container,
.work-button-container {
	display: flex;
	justify-content: space-between;
	position: absolute;
	right: 0;
	top: 0;
	left: 0;
	padding-top: calc(0.5 * var(--global--spacing-vertical));
	padding-bottom: calc(0.25 * var(--global--spacing-vertical));
	margin: var(--global--spacing-vertical);
	/* margin-top: var(--global--spacing-vertical); */
	/* margin-right: var(--global--spacing-vertical); */
	padding: 0;
	flex-direction: row-reverse;
	/* menu-buttons always to the right */
	pointer-events: auto;

	--height-title: 0.44em;
	--height-icon: 2.4rem;
}

@media (max-width: 481px) {

	.fancybox-toolbar,
	.menu-button-container,
	.work-button-container {
		flex-direction: row;
	}

	.menu-button-container #primary-mobile-menu {
		margin-left: unset;
	}
}

.menu-button-container {
	pointer-events: none;
}

button#primary-mobile-menu {
	pointer-events: auto;
}

button#primary-mobile-menu * {
	pointer-events: none;
}

@media (min-width: 482px) {
	body.home #primary-mobile-menu {
		/* desktop only: hide primary close-button on opening start page */
		display: none;
		/* color: transparent;
		background: transparent; */
		visibility: hidden;
	}

	body.home #primary-mobile-menu:hover {
		/* hide primary close-button on opening start page */
		color: transparent;
		background: transparent;
	}
}

body.primary-navigation-open #primary-mobile-menu {
	/* desktop only: hide primary close-button when closed (actually opened) */
	visibility: hidden;
}

@media (max-width: 481px) {
	body.primary-navigation-open #primary-mobile-menu {
		/* desktop only: hide primary close-button when closed (actually opened) */
		visibility: visible;
	}
}

.primary-navigation-open .menu-button-container {
	background-color: unset;
	/* background was obstructing page content */
}

.work-menu-closed button#primary-mobile-menu {
	/* hide primary button when work-button is visible */
	visibility: hidden;
}

.work-navigation-container:not(.closed) #work-menu {
	/* hide work-button when work-menu is open */
	visibility: hidden;
}

.fancybox-button,
.menu-button-container #primary-mobile-menu,
.work-button-container #work-menu {
	font-size: inherit;
	padding: 0.25em;
	width: calc(var(--global--line-height-page-title) * 1em);
	height: calc(var(--global--line-height-page-title) * 1em);
	position: relative;
	border: none;
	color: var(--button--color-background);
	background: transparent;
	/* var(--global--color-background); /* var(--button--color-text-hover); */
	transition: color 0.0s ease-out, background 0.65s ease-in-out;
}

.fancybox-toolbar .fancybox-button--close {
	font-size: var(--global--font-size-page-subtitle);
}

/* hover effect (avoid toch devices) */
@media(pointer: fine) {

	.fancybox-button:hover,
	.menu-button-container #primary-mobile-menu:hover,
	.menu-button-container #primary-mobile-menu:hover

	/* .dropdown-icon .svg-icon */
	,
	.work-button-container #work-menu:hover,
	.work-button-container #work-menu:focus {
		color: var(--global--color-background);
		background: var(--global--color-primary);
		/* fill: white; */
		cursor: var(--cursor-light);
	}
}

@media(pointer: coarse) {

	.fancybox-button:focus,
	.menu-button-container #primary-mobile-menu:focus,
	.menu-button-container #primary-mobile-menu:focus

	/* .dropdown-icon .svg-icon */
	,
	.work-button-container #work-menu:focus {
		background: var(--button--color-background);
		color: var(--button--color-text-hover);
		cursor: var(--cursor-light);
	}
}

.fancybox-button svg path,
.menu-button-container #primary-mobile-menu svg path,
.work-button-container #work-menu svg path {
	stroke-width: 1px;
}


/*  desktop only */
@media (min-width: 482px) {

	/* remove hover/focus effect when menu open */
	.menu-button-container #primary-mobile-menu[aria-expanded="true"],
	.work-button-container #work-menu[aria-expanded="true"] {
		color: var(--global--color-background);
		background-color: var(--global--color-background);
	}

	/* ? */
	.menu-button-container #primary-mobile-menu .dropdown-icon,
	.work-button-container #work-menu .dropdown-icon {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* The size of the menu icon */
.fancybox-button svg,
.menu-button-container #primary-mobile-menu .dropdown-icon .svg-icon,
.work-button-container #work-menu .dropdown-icon .svg-icon {
	top: unset;
	width: 0.8em;
	height: 0.8em;
	margin-left: 0;
	display: block;
}

@media (min-width: 482px) {
	.menu-button-container #primary-mobile-menu[aria-expanded*=false] .dropdown-icon.close {
		display: flex !important;
	}

	.menu-button-container #primary-mobile-menu[aria-expanded*=false] .dropdown-icon.open {
		display: none !important;
	}

	.menu-button-container #primary-mobile-menu[aria-expanded*=true] .dropdown-icon.close {
		display: none;
	}

	.menu-button-container #primary-mobile-menu[aria-expanded*=true] .dropdown-icon.open {
		display: none;
	}
}




/*  All buttons.. remove outline on focus */
.site .button:focus,
button:focus,
input[type=submit]:focus,
input[type=reset]:focus,
.wp-block-search .wp-block-search__button:focus,
.wp-block-button .wp-block-button__link:focus,
.wp-block-file a.wp-block-file__button:focus {
	outline-offset: -6px;
	outline: 0px dotted currentColor;
	/* remove dotted box */
}




/* PRIMARY MENU position  */

#wpadminbar {
	position: fixed;
}

.primary-navigation .primary-menu-container {
	padding: var(--global--spacing-vertical) 0;
	max-height: 100vh;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.admin-bar .primary-navigation .primary-menu-container {
	top: var(--global--admin-bar--height);
}

.primary-navigation-open .primary-navigation>.primary-menu-container {
	position: fixed;
}

/*** MENU ITEMS ***/

/* NO LINK MENU ITEMS */
.no-link a {
	pointer-events: none;
}

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

/* Hide on mobile */
@media (max-width: 481px) {
	body:not(.home) .primary-navigation>div>.menu-wrapper li.no-link {
		display: none;
	}

	/* Except on transitions from startpage full menu */
	body:not(.home).show-full-menu .primary-navigation>div>.menu-wrapper li.no-link {
		display: flex;
	}

}




.primary-navigation .menu-item {
	text-align: center;
}

.primary-navigation {
	font-size: var(--global--font-size-page-title);
	inset: 0 0 auto 0;
}

.admin-bar .primary-navigation {
	top: var(--global--admin-bar--height);
}

.primary-navigation a {
	font-size: inherit;
}

.primary-navigation>div>.menu-wrapper,
.primary-navigation>div>.menu-wrapper li {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.primary-navigation .menu-item:not(.menu-item-has-image) a,
.primary-navigation .sub-menu .menu-item:not(.menu-item-has-image)>a {
	/* always, both closed and open */
	display: inline-block;
	padding-left: var(--primary-nav--padding);
	padding-right: var(--primary-nav--padding);
	padding-top: var(--primary-nav--padding-top);
	padding-bottom: var(--primary-nav--padding-bottom);
	line-height: var(--primary-nav--line-height);
	text-transform: uppercase;
	text-decoration: none !important;
}

.primary-navigation .menu-item.menu-item-has-image a,
.primary-navigation .sub-menu .menu-item.menu-item-has-image>a {
	padding: 0;
}

.primary-navigation .menu-item a:hover {
	/* links which are NOT linked (just a href=#) should NOT change color on hover */
	color: var(--global--color-primary);
	background: var(--global--color-background);
}


@media (min-width: 482px) {

	/* when sub menu is open desktop */
	body.home.primary-navigation-open .primary-menu-container>#primary-menu-list>.menu-item>a.focused,
	body.home.primary-navigation-open .primary-menu-container>#primary-menu-list>.menu-item>a.focused:link {
		color: var(--global--color-background);
		background: var(--global--color-primary);
	}
}


.primary-navigation .menu-item a:not(.focused):link,
.primary-navigation .menu-item a:visited,
.primary-navigation .menu-item.current-menu-item a,
.primary-navigation .menu-item.current-menu-item a:link,
.primary-navigation .menu-item.current-menu-item a:visited,
body:not(.primary-navigation-open) .primary-menu-container>#primary-menu-list>.menu-item>a:link:focus {
	transition:
		color var(--menu-items--unhover-color),
		background var(--menu-items--unhover-background),
		padding var(--menu-items--squeeze),
		line-height var(--menu-items--squeeze);
	color: var(--global--color-primary);
	background: var(--global--color-background);
	background: transparent;
}

/*[aria-expanded="true"] + div .menu-item a:link:hover,
[aria-expanded="true"] + div .menu-item a:link:focus, 
[aria-expanded="true"] + div .menu-item-has-children:hover > a { */
.primary-navigation .menu-item a:link:hover,
.primary-navigation .menu-item a:link:focus,
.primary-navigation .menu-item.menu-item-has-children:hover>a,
.primary-navigation .menu-item.menu-item-has-children:focus>a,
.primary-navigation .menu-item.current-menu-item a:hover,
.primary-navigation .menu-item.current-menu-item a:focus,
.primary-navigation .menu-item.current-menu-item.menu-item-has-children:hover>a,
.primary-navigation .menu-item.current-menu-item.menu-item-has-children:focus>a,
.primary-navigation-open .primary-menu-container>#primary-menu-list>.menu-item>a:hover {
	transition:
		color var(--menu-items--hover-color),
		background var(--menu-items--hover-background),
		padding var(--menu-items--spread);
	color: var(--global--color-background);
	background: var(--global--color-primary);
	cursor: var(--cursor-light);
	text-decoration: none !important;
}

.current-menu-item>a:first-child,
.current_page_item>a:first-child,
.current-menu-item>a:first-child:hover,
.current_page_item>a:first-child:hover {
	text-decoration: none;
}

/* prevent current items show as clicked *

.site.site.site .current-menu-item > a:focus, 
.site.site.site .current_page_item > a:focus {
	color: var(--global--color-primary);
	background: var(--global--color-background);
}



/** START PAGE SPECIAL BEHAVIOUR **/

/* on mobile*/
@media (max-width: 481px) {

	/*  CLOSED  */
	body.home:not(.primary-navigation-open) .primary-navigation>.primary-menu-container {
		opacity: 1;
		visibility: visible;
		background: transparent;
		pointer-events: none;
	}

	body.home:not(.primary-navigation-open) .primary-menu-container:after {
		content: none;
	}

	body.home:not(.primary-navigation-open) .primary-navigation>.primary-menu-container>#primary-menu-list>.menu-item:not(.current-menu-ancestor):not(.current-menu-item) {
		transition: opacity var(--menu-items--fadein);
		opacity: 1;
	}

	body.home:not(.primary-navigation-open) .primary-menu-container>#primary-menu-list>.menu-item>a {
		transition: padding var(--menu-items--spread),
			line-height var(--menu-items--spread),
			color var(--menu-items--unhover-color),
			background var(--menu-items--unhover-background);
		display: inline-block;
		padding-left: var(--primary-nav--padding);
		padding-right: var(--primary-nav--padding);
		padding-top: var(--primary-nav--padding-top);
		padding-bottom: var(--primary-nav--padding-bottom);
		line-height: var(--primary-nav--line-height);
		text-transform: uppercase;
		text-decoration: none !important;
		pointer-events: auto;
	}

	body.home:not(.primary-navigation-open) .primary-menu-container>#primary-menu-list>.menu-item>a:any-link:hover,
	body.home:not(.primary-navigation-open) .primary-menu-container>#primary-menu-list>.menu-item>a:any-link:focus,
	/* when sub menu is open */
	body.home:not(.primary-navigation-open) .primary-menu-container>#primary-menu-list>.menu-item>a.focused {
		color: var(--global--color-background);
		background: var(--global--color-primary);
	}

	/* Replace menu "Patrik Nyman" with CONTACT */
	body.home:not(.primary-navigation-open) .primary-navigation>.primary-menu-container>#primary-menu-list>.menu-item.only-mobile {
		display: none !important;
	}

	body.home:not(.primary-navigation-open) .primary-navigation>.primary-menu-container>#primary-menu-list>.menu-item.only-desktop {
		display: flex !important;
	}

	body.home:not(.primary-navigation-open) .primary-navigation>.primary-menu-container>#primary-menu-list>.menu-item.only-desktop a {
		pointer-events: none;
	}

	body.home:not(.primary-navigation-open) .primary-navigation>.primary-menu-container>#primary-menu-list>.menu-item .sub-menu a {
		pointer-events: auto;
	}



	/*  OPEN  */
	body.home.primary-navigation-open .primary-menu-container>#primary-menu-list>.menu-item.no-link {
		transition: opacity var(--menu-items--fadeout),
			color var(--menu-items--unhover-color),
			background var(--menu-items--unhover-background);
		opacity: 0;
	}

	body.home.primary-navigation-open .primary-menu-container>#primary-menu-list>.menu-item.no-link a {
		transition: padding var(--menu-items--squeeze),
			padding-top var(--menu-items--squeeze),
			padding-bottom var(--menu-items--squeeze),
			padding-left var(--menu-items--squeeze),
			padding-right var(--menu-items--squeeze),
			line-height var(--menu-items--squeeze),
			color var(--menu-items--unhover-color),
			background var(--menu-items--unhover-background);
		padding: 0;
		line-height: 0em;
	}

	body.home.primary-navigation-open .primary-navigation>div>.menu-wrapper>li.sub-menu__border>.sub-menu>li {
		max-height: 0em;
		border-color: transparent;
		border: 0;
	}

}


/*  END START PAGE SPECIAL BEHAVIOUR */





/* on desktop */
body.go-to-start-page {
	transition: opacity 1s;
	opacity: 0;
}


/** SUB MENUS **/

/* submenus on startpage only */
@media (max-width: 481px) {

	body:not(.show-full-menu):not(.home) .primary-navigation>div>.menu-wrapper>li.sub-menu__border>.sub-menu>li,
	body.home.primary-navigation-open .primary-navigation>div>.menu-wrapper>li.sub-menu__border>.sub-menu>li {
		/* display: none !important; */
		max-height: 0;
	}
}

/* instantly show work image when transition from other page */
body:not(.home).show-work-image .primary-navigation>div>.menu-wrapper>li.sub-menu__border>.sub-menu>.menu-item {
	transition: all 0s;
}

body:not(.home):not(.show-work-image) .primary-navigation>div>.menu-wrapper>li.sub-menu__border>.sub-menu>.menu-item a {}

.primary-navigation .sub-menu {
	border: unset;
}

.primary-navigation .sub-menu .menu-item>a {
	font-size: 0.6em;
	display: inline-block;
	line-height: var(--primary-nav--line-height);
}

/* old news
.primary-navigation .sub-menu .menu-item > a:hover { /* prevent sub items hover effect */
/* color: var(--global--color-primary);
	background: var(--global--color-background);
} */
.primary-navigation>div>.menu-wrapper>li>.sub-menu>li {
	display: flex;
	border: 0;
	overflow: hidden;
	align-items: flex-end;
	justify-content: center;
	flex-direction: row;
}

/* hover underline */
.primary-navigation li.underline>a,
p.underline a {
	position: relative;
	text-decoration: none;
}

.primary-navigation li.underline>a:hover,
.primary-navigation li.underline>a:focus,
.primary-navigation li.underline>a:any-link:hover,
.primary-navigation li.underline>a:any-link:focus,
p.underline a:hover,
p.underline a:focus {
	color: var(--global--color-primary);
	background: var(--global--color-background);
	cursor: var(--cursor-dark);
}

.primary-navigation li.underline>a:hover:after,
.primary-navigation li.underline>a:focus:after,
.primary-navigation li.underline>a:any-link:hover:after,
.primary-navigation li.underline>a:any-link:focus:after,
p.underline a:hover:after,
p.underline a:focus:after {
	content: "";
	border-bottom: 1px solid currentColor;
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
}

.primary-navigation li.underline>a:hover:after,
.primary-navigation li.underline>a:focus:after,
.primary-navigation li.underline>a:any-link:hover:after,
.primary-navigation li.underline>a:any-link:focus:after {
	width: calc(100% - 18px);
	left: 9px;
	bottom: 2px;
}

/* first sub menu item (not .menu-item-has-image) has a greater top margin */
.primary-navigation>div>.menu-wrapper>li>.sub-menu>li {
	margin-top: 5px;
}

.primary-navigation>div>.menu-wrapper>li>.sub-menu>li.menu-item-has-image {
	margin-top: 0;
	max-width: var(--responsive--aligndefault-width)
}

/* SUB MENU ANIMATIONS - fold out sequentially */
/* OPENING */
.primary-navigation>div>.menu-wrapper>li>.sub-menu>li {
	max-height: 1.6em;
	transition: max-height 0.5s, margin-top 0.5s;
}

.primary-navigation>div>.menu-wrapper>li>.sub-menu>li:first-child {
	/* transition: max-height linear 0.5s; */
}

.primary-navigation>div>.menu-wrapper>li>.sub-menu>li:nth-child(2) {
	transition: max-height 0.5s 0.15s, margin-top 0.5s 0.15s;
}

/* CLOSING */
.primary-navigation>.primary-menu-container ul>li .sub-menu-toggle[aria-expanded=false]~ul>li {
	max-height: 0;
	margin-top: 0;
	/* transition-timing-function: cubic-bezier(0.4, 0); */
	transition: max-height 0.5s, margin-top 0.5s;
}

.primary-navigation>div>.menu-wrapper>li>.sub-menu-toggle[aria-expanded=false]~ul>li:first-child {
	transition: max-height 0.5s 0.15s, margin-top 0.5s 0.15s;
}

.primary-navigation>div>.menu-wrapper>li>.sub-menu-toggle[aria-expanded=false]~ul>li:nth-child(2) {
	/* transition: max-height 0.5s 0s; */
}



/** Sub Menu images ** 
 * Add a border to submenu-items with image. Use only one image or else border will show.
 * Requires to manually add class "sub-menu__border" to parent menu item */
.primary-navigation .menu-item-image {
	max-width: 100%;
	max-height: 8em;
	height: auto;
	padding: 2px;
	background: var(--global--color-primary);
}

.primary-navigation .sub-menu .menu-item.menu-item-has-image>a::after {
	content: '';
	position: absolute;
	inset: 0;
	border: 2px black solid;
	margin: 1px;
	/* border-style: dashed; */
}

.primary-navigation>.primary-menu-container ul>li.sub-menu__border {
	overflow: hidden;
}

.primary-navigation>.primary-menu-container ul>li.sub-menu__border .sub-menu-toggle[aria-expanded=false]~ul>li {
	margin-bottom: -6px;
	opacity: 0;
	transition: max-height 0.7s 0.5s, opacity 0.7s 0.5s, margin-bottom 0.1s 1.1s;
}

.primary-navigation>div>.menu-wrapper>li.sub-menu__border>.sub-menu>li {
	max-height: 15em;
	/* inrymmer menybild */
	transition: all 0.9s 0.5s, margin-bottom 0.1s 0.5s;
	/* delay 0.5s allows cursor passing over */
	transition-timing-function: ease-out;
}

/* Remove rougue video tag */
.primary-navigation .menu-item video:not(.menu-item-image) {
	display: none;
}


/* PRIMARY MENU CLOSING/OPENING ANIMATION *
 
 * How: Opens when body has class .primary-navigation-open, otherwise closes
 * When: Class is set and then removoved on load on all level 1 sub pages (ie. ABOUT and WORK)
 * Closing steps:
 * 1. Fade out other projects (:not(is-ancestor))
 * 2. Squach other projects, keeping current menu item to one line, exaktly the same line as page header
 * 3. Raise up squashed line menu-items (centered flex-item) by adding a pusher :after flex-grow:1
 * 4. Fade out primary menu to show sub page
 */

.primary-menu-container,
.primary-menu-container:after {
	/* OPENING */
	--menu-items--fadeout: 1s 0s;
	/* 1. when closing, directly, fade out */
	--menu-items--squeeze: 1s 1s;
	/* 2. 3. then, squasch all items to one row */
	--menu--fadeout: 2s 2s;
	/* 4. lastly, fade out menu to show subpage */
	/* CLOSING */
	--menu--fadein: 1s 0s;
	/* 4. when opening, first instantly, fade in menu (hides sub page) */
	--menu-items--spread: 1s 1s;
	/* 3. 2. then, spread items to each row */
	--menu-items--fadein: 1s 2s;
	/* 1. lastly, fade in */
}

/* Step 1. CLOSING - Fade out other projects (:not(is-ancestor)) */
body:not(.primary-navigation-open) .primary-menu-container>#primary-menu-list>.menu-item:not(.current-menu-ancestor):not(.current-menu-item),
body:not(.home):not(.primary-navigation-open) .primary-menu-container>#primary-menu-list>.menu-item>.sub-menu {
	transition:
		opacity var(--menu-items--fadeout),
		color var(--menu-items--unhover-color),
		background var(--menu-items--unhover-background);
	opacity: 0;
}

body:not(.primary-navigation-open) .primary-menu-container>#primary-menu-list>.menu-item.current-menu-ancestor,
body:not(.primary-navigation-open) .primary-menu-container>#primary-menu-list>.menu-item.current-menu-item,
body:not(.primary-navigation-open) .primary-menu-container>#primary-menu-list>.menu-item>a {
	pointer-events: none;
}

/* OPENING */
body.primary-navigation-open .primary-menu-container>#primary-menu-list>.menu-item:not(.current-menu-ancestor),
body.primary-navigation-open .primary-menu-container>#primary-menu-list>.menu-item:not(.current-menu-item) {
	transition: opacity var(--menu-items--fadein);
}

/* Step 2. CLOSING - Squach other projects, keeping current menu item to one line, exaktly the same line as page header */
body:not(.primary-navigation-open) .primary-menu-container>#primary-menu-list>.menu-item>a {
	transition:
		padding var(--menu-items--squeeze),
		padding-top var(--menu-items--squeeze),
		padding-bottom var(--menu-items--squeeze),
		padding-left var(--menu-items--squeeze),
		padding-right var(--menu-items--squeeze),
		line-height var(--menu-items--squeeze),
		color var(--menu-items--unhover-color),
		background var(--menu-items--unhover-background);
	padding: 0;
	line-height: 0em;
	color: var(--primary-nav--color-link);
	background: transparent;
}

body:not(.primary-navigation-open) .primary-menu-container>#primary-menu-list>.menu-item.current-menu-ancestor>a,
body:not(.primary-navigation-open) .primary-menu-container>#primary-menu-list>.menu-item.current-menu-item>a {
	line-height: calc(1em * var(--global--line-height-page-title));
	/* when squashing, keep current menu item visible */
}

/* OPENING */
body.primary-navigation-open .primary-menu-container>#primary-menu-list>.menu-item>a {
	transition:
		padding var(--menu-items--spread),
		line-height var(--menu-items--spread),
		color var(--menu-items--unhover-color),
		background var(--menu-items--unhover-background);
}

/* Step 3. CLOSING - Raise up squashed line menu-items (centered flex-item) by adding a pusher :after flex-grow:1 */
body:not(.primary-navigation-open) .primary-menu-container:after {
	content: '';
	flex-grow: 1;
	transition: flex-grow var(--menu-items--squeeze);
}

/* OPENING */
body.primary-navigation-open .primary-menu-container:after {
	content: '';
	flex-grow: 0;
	transition: flex-grow var(--menu-items--spread);
}

/* Step 4. CLOSING - Fade out primary menu to show sub page */
body:not(.primary-navigation-open) .primary-navigation>.primary-menu-container {
	transition: opacity var(--menu--fadeout),
		z-index 0s 2s,
		visibility 0s 3s;
	opacity: 0;
	z-index: 12;
}

/* OPENING */
body.primary-navigation-open .primary-navigation>.primary-menu-container {
	transition: opacity var(--menu--fadein),
		z-index 0s 1s,
		visibility 0s 0s;
	opacity: 1;
}




/* START PAGE INTRO ANIMATION */
/* TODO: #4 remove start class after click, check why its not working */

body.primary-navigation-open.home.hide-menu .primary-menu-container,
body.primary-navigation-open.home.hide-menu .primary-menu-container:after,
body:not(.primary-navigation-open).home.hide-menu .primary-menu-container,
body:not(.primary-navigation-open).home.hide-menu .primary-menu-container:after {
	opacity: 0 !important;
}

body.primary-navigation-open.home.intro .primary-menu-container,
body.primary-navigation-open.home.intro .primary-menu-container:after,
body:not(.primary-navigation-open).home.intro .primary-menu-container,
body:not(.primary-navigation-open).home.intro .primary-menu-container:after {
	opacity: 1 !important;
	--menu--fadein: 3s 0s;
	/* when opening, first instantly, fade in menu (hides sub page) */
	--menu--fadeout: 3s 0s;
	/* when opening, first instantly, fade in menu (hides sub page) */
	--menu-items--spread: 0s 0s;
	/* then, spread items to each row */
	--menu-items--fadein: 3s 0s;
	/* lastly, fade in */
}


/** 2ND LEVEL PAGES
 *  MENU BUTTTON - GO TO START PAGE BEHAVIOUR
 */
body.fadeout-menu-items .menu-item,
body.fadeout-menu-items.primary-navigation-open .primary-menu-container>#primary-menu-list>.menu-item {
	opacity: 0;
	transition: opacity 0.5s;
}







/*
WORK MENU STYLING
*/

.work-navigation-container {
	z-index: 10;
	position: absolute;
	inset: 0;
	margin: 0 !important;
	min-height: 100vh;
	max-width: unset !important;
}

.admin-bar .work-navigation-container {
	top: var(--global--admin-bar--height);
}

.work-navigation-container button {
	font-size: inherit;
}

.work-navigation-container:not(.closed)~.site-content {
	height: 100vh;
	overflow: hidden;
}

.work-navigation-header {
	position: fixed;
	padding: var(--global--spacing-vertical);
	width: 100%;
}

/* WORK menu items */

.work-navigation-container .work-navigation,
.work-navigation-container button#work-menu {
	font-size: var(--global--font-size-page-subtitle);
	letter-spacing: var(--global--letter-spacing-page-subtitle);
}

.work-navigation-container .work-navigation {
	padding-bottom: var(--global--spacing-vertical);
}

.work-navigation-container.closed .work-navigation {
	padding: var(--global--spacing-vertical) 0 var(--global--spacing-vertical);
}

@media (max-width: 481px) {
	.work-navigation-container.closed .work-navigation {
		background: var(--global--color-background);
	}
}

.work-navigation-container:not(.closed) .work-navigation {
	padding: calc(var(--global--font-size-page-subtitle) + 2 * var(--global--spacing-vertical)) 0 var(--global--spacing-vertical);
}

.work-navigation-wrapper {
	padding-left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	list-style: none;
	/* background: var(--global--color-background); */
}

.work-navigation-container.closed .work-navigation-wrapper {
	pointer-events: none;
}

.work-navigation-wrapper>li {
	line-height: 0;
	/* menu item link container need no height */
}

.work-navigation-wrapper>li>a {
	display: inline-block;
	text-transform: uppercase;
	text-decoration: none;
	line-height: var(--primary-nav--line-height);
	padding: var(--primary-nav--padding-top) var(--primary-nav--padding) var(--primary-nav--padding-bottom);
}

.work-navigation-wrapper>li>a,
.work-navigation-wrapper>li>a:link,
.work-navigation-wrapper>li>a:visited {
	color: var(--global--color-primary);
	background: var(--primary-nav--color-link-hover, var(--global--color-background));
	/* text-decoration-line: none !important; */
}

.work-navigation-wrapper>li>a:focus,
.work-navigation-wrapper>li>a:link:focus,
.work-navigation-wrapper>li>a:visited:focus {
	color: var(--global--color-background);
	background: var(--global--color-primary);
	/* text-decoration-line: none !important; */
}

@media (min-width: 482px) {

	.work-navigation-wrapper>li>a:hover,
	.work-navigation-wrapper>li>a:link:hover,
	.work-navigation-wrapper>li>a:visited:hover {
		color: var(--global--color-background);
		background: var(--global--color-primary);
		cursor: var(--cursor-light);
		text-decoration-line: none !important;
	}
}

.wp-block-latest-posts>li>a:link:hover,
.wp-block-latest-posts>li>a:link:focus {
	color: var(--global--color-background);
	background: var(--global--color-primary);
	cursor: var(--cursor-light);
	text-decoration-line: none !important;
}


.work-navigation-container.closed .work-navigation-wrapper>li>a:link:hover,
.work-navigation-container.closed .work-navigation-wrapper>li>a:link:focus,
.work-navigation-container.closed .wp-block-latest-posts>li>a:link:hover,
.work-navigation-container.closed .wp-block-latest-posts>li>a:link:focus {
	color: var(--primary-nav--color-link, var(--global--color-primary));
	background: var(--primary-nav--color-link-hover, var(--global--color-background));
	cursor: var(--cursor-dark);
}




/* WORK MENU - TRANSITIONS */

.work-navigation-container {
	/* steps when closing */
	--menu-header--fadeout: 1s 0s;
	/* instantly, fade out header.. */
	--menu-items--fadeout: 1s 0s;
	/* .. and menu items (exept current menu item) */
	--menu-items--squeeze: 1s 1s;
	/* then, squasch all items to one row */
	--page-content--fadein: 1s 2s;
	/* lastly, fade in page content */

	/* steps when opening */
	--page-content--fadeout: 1s 0s;
	/* instantly, fade out page content */
	--menu-items--spread: 1s 1s;
	/* then, while hidden, spread menu items */
	--menu-items--fadein: 1s 2s;
	/* lastly, fade in menu items.. */
	--menu-header--fadein: 1s 2s;
	/* ..and header */
}

/* then animation/timings above are activated on sub pages to WORK
 * (i.e. on body.single pages where work menu is present) */

/* 1. Fade out and up 'WORK' (PAGE TITLE), so that chosen MENU ITEM can take it's place */
/* 2. Fade out NOT CURRENT MENU ITEMS,
	then squeeze NOT CURRENT MENU ITEMS, 
	this will move CHOSEN MENU ITEM to become PAGE HEADER */
/* 3. Fade out work menu to show project page (and real title) */

/* 1. Fade out and up 'WORK' (PAGE TITLE), so that chosen MENU ITEM can take it's place */
body.single .work-navigation-container .entry-title {
	transition: opacity var(--menu-items--fadein),
		margin-top var(--menu-items--squeeze),
		margin-bottom var(--menu-items--squeeze);
	opacity: 1;
}

body.single .work-navigation-container.closed .entry-title {
	transition: opacity var(--menu-items--fadeout),
		margin-top var(--menu-items--spread),
		margin-bottom var(--menu-items--spread);
	opacity: 0;
	margin-top: calc(-1 * var(--global--line-height-page-title));
	margin-bottom: 0;
}

/* 2. Fade out NOT CURRENT MENU ITEMS,
	then squeeze NOT CURRENT MENU ITEMS,
	this will move CHOSEN MENU ITEM to become PAGE SUB-TITLE */
.work-navigation-container:not(.closed) .work-navigation {
	transition: padding var(--menu-items--spread);
}

.work-navigation-container.closed .work-navigation {
	transition: padding var(--menu-items--squeeze);
}

.fancybox-active .work-navigation-container.closed .work-navigation {
	transition:
		padding var(--menu-items--squeeze),
		background 0s;
	background: var(--global--color-background);
}

/* MENU ITEMS */
/* not current - open */
body:not(.fadeout-menu-items) .work-navigation-container:not(.closed) .menu-item:not(.current-menu-item) {
	transition: opacity var(--menu-items--fadein);
	opacity: 1;
}

.work-navigation-container:not(.closed) .menu-item:not(.current-menu-item)>a:link {
	transition:
		padding var(--menu-items--spread),
		line-height var(--menu-items--spread),
		color var(--menu-items--unhover-color),
		background var(--menu-items--unhover-background);
}

.work-navigation-container:not(.closed) .menu-item:not(.current-menu-item)>a:any-link:hover,
.work-navigation-container:not(.closed) .menu-item:not(.current-menu-item)>a:any-link:focus {
	transition:
		padding var(--menu-items--spread),
		line-height var(--menu-items--spread),
		color var(--menu-items--hover-color),
		background var(--menu-items--hover-background);

}

/* not current - closed */
.work-navigation-container.closed .menu-item:not(.current-menu-item) {
	transition: opacity var(--menu-items--fadeout);
	opacity: 0;
}

.work-navigation-container.closed .menu-item:not(.current-menu-item)>a:any-link {
	transition:
		padding var(--menu-items--squeeze),
		line-height var(--menu-items--squeeze),
		color var(--menu-items--unhover-color),
		background var(--menu-items--unhover-background);
	padding: 0em;
	line-height: 0em;
}

.work-navigation-container.closed .menu-item:not(.current-menu-item)>a:any-link:hover,
.work-navigation-container.closed .menu-item:not(.current-menu-item)>a:any-link:focus {
	transition:
		padding var(--menu-items--squeeze),
		line-height var(--menu-items--squeeze),
		color var(--menu-items--hover-color),
		background var(--menu-items--hover-background);
}

/* current - open */
.work-navigation-container .menu-item.current-menu-item>a:any-link {
	transition:
		padding var(--menu-items--spread),
		line-height var(--menu-items--spread),
		letter-spacing var(--menu-items--spread),
		color var(--menu-items--unhover-color),
		background var(--menu-items--unhover-background);
}

.work-navigation-container .menu-item.current-menu-item>a:any-link:hover,
.work-navigation-container .menu-item.current-menu-item>a:any-link:focus {
	transition:
		padding var(--menu-items--spread),
		line-height var(--menu-items--spread),
		letter-spacing var(--menu-items--spread),
		color var(--menu-items--hover-color),
		background var(--menu-items--hover-background);
}

/* current - closed */
.work-navigation-container.closed .menu-item.current-menu-item>a:any-link {
	transition:
		padding var(--menu-items--squeeze),
		line-height var(--menu-items--squeeze),
		letter-spacing var(--menu-items--squeeze),
		color var(--menu-items--unhover-color),
		background var(--menu-items--unhover-background);
	padding: 0em;
	line-height: calc(1em * var(--global--line-height-page-title));
	/* letter-spacing: 0em; */
}

.work-navigation-container.closed .menu-item.current-menu-item>a:hover,
:any-link .work-navigation-container.closed .menu-item.current-menu-item>a:any-link:focus {
	transition:
		padding var(--menu-items--squeeze),
		line-height var(--menu-items--squeeze),
		letter-spacing var(--menu-items--squeeze),
		color var(--menu-items--hover-color),
		background var(--menu-items--hover-background);
}


/* 3. Fade out work menu to show project page (and real title) */
.work-navigation-container {
	transition: z-index 0s 0s;
	z-index: 10;
}

.work-navigation-container.closed {
	position: fixed;
	transition: z-index 0s 0s;
	/* instantly is very good */
	z-index: 12;
	min-height: 0;
	pointer-events: none;
}

.work-navigation-container .opacity-layer {
	transition: opacity 2s 0s;
	opacity: 1;
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var(--global--color-background);
	z-index: -1;
}

.work-navigation-container.closed .opacity-layer {
	transition: opacity 3s 3s;
	opacity: 0;
}

/*** END Navigation ***/