/*
-=-------------------------------=-
 *             C S S             *
 *  ~-~-~-~-~-~-~-~-~-~-~-~-~-~  *
 *       P U S H • M E N U       *
 *  ~-~-~-~-~-~-~-~-~-~-~-~-~-~  *
 *     Design by Anna Greco      *
 *     www.houseofgreco.com      *
 *        Copyright 2026         *
-=-------------------------------=-
*/


html, body {
	height: 100%;
}

.scroller {
	overflow-y: scroll;
}

.scroller,
.scroller-inner {
	position: relative;
}

#mp-menu {
	font-size: 120%;
}

.menu-trigger {
	position: relative;
}

.menu-trigger:before {
	position: absolute;
	top: 2px;
	left: 0;
	width: 40px;
	height: 6px;
	background: #fff;
	box-shadow: 0 6px #34495e, 0 12px #fff, 0 18px #34495e, 0 24px #fff;
}

.mp-pusher {
	position: relative;
	left: 0;
	perspective: 1000px;
}

#mp-menu {
	display: block;
}

.mp-menu {
	position: absolute; /* we can't use fixed here :( */
	top: 0;
	left: 0;
	z-index: 1;
	width: 300px;
	height: 100%;
	-webkit-transform: translate3d(-100%, 0, 0);
	-moz-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
}

.mp-level {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #21262C url('../images/bones/backgrounds/mineral-basalt-smooth-warm-1300.jpg');
	border: 1px solid #4C3D3D;
			background-color: #E3D7B9;
			background-image: url('../images/bones/backgrounds/limestone-wall-1300.jpg');

	-webkit-transform: translate3d(-100%, 0, 0);
	-moz-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
}

/* overlays for pusher and for level that gets covered */
.mp-pusher::after,
.mp-level::after,
.mp-level::before {
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	content: '';
	opacity: 0;
}

.mp-pusher::after,
.mp-level::after {
	background: rgba(0,0,0,0.3);
	-webkit-transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s;
	-moz-transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s;
	transition: opacity 0.3s, width 0.1s 0.3s, height 0.1s 0.3s;
}

.mp-level::after {
	z-index: -1;
}

.mp-pusher.mp-pushed::after,
.mp-level.mp-level-overlay::after {
	width: 100%;
	height: 100%;
	opacity: 1;
	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.mp-level.mp-level-overlay {
	cursor: pointer;
	border-right: 1px solid #7B7769;
}

.mp-level.mp-level-overlay.mp-level::before {
	width: 100%;
	height: 100%;
	background: transparent;
	opacity: 1;
}

.mp-pusher,
.mp-level {
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}

/* overlap */
.mp-overlap .mp-level.mp-level-open {
	box-shadow: 1px 0 2px rgba(0,0,0,0.2);
	-webkit-transform: translate3d(-40px, 0, 0);
	-moz-transform: translate3d(-40px, 0, 0);
	transform: translate3d(-40px, 0, 0);
}

/* First level */
.mp-menu > .mp-level,
.mp-menu > .mp-level.mp-level-open,
.mp-menu.mp-overlap > .mp-level,
.mp-menu.mp-overlap > .mp-level.mp-level-open {
	box-shadow: none;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

/* cover */
.mp-cover .mp-level.mp-level-open {
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.mp-cover .mp-level.mp-level-open > ul > li > .mp-level:not(.mp-level-open) {
	-webkit-transform: translate3d(-100%, 0, 0);
	-moz-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
}

.mp-menu ul {
	overflow: auto;
	padding: 0;
	margin: 0;
}

.mp-menu ul li {
	overflow: auto;
}

.mp-menu h2 {
	background: linear-gradient(135deg, #1E1E1E 25%, transparent 25%) -48px 0, linear-gradient(225deg, #1E1E1E 25%, transparent 25%) -48px 0, linear-gradient(315deg, #1E1E1E 25%, transparent 25%), linear-gradient(45deg, #1E1E1E 25%, transparent 25%);
	background-color: #262626;
	background-size: 1.22em 1.124em;

    background: linear-gradient(135deg, #C1C5AE 25%, transparent 25%) -48px 0, linear-gradient(225deg, #C1C5AE 25%, transparent 25%) -48px 0, linear-gradient(315deg, #C1C5AE 25%, transparent 25%), linear-gradient(45deg, #C1C5AE 25%, transparent 25%);
    background-size: 1.22em 1.124em;
    background-color: #C5CAB2;

	cursor: auto;
	margin: 0;
			color: rgba(20, 15, 10, 0.55);
			font-family: 'Josefin Sans';
			font-size: 19px;
			font-smoothing: antialiased;
				-moz-font-smoothing: antialiased;
					-ms-font-smoothing: antialiased;
						-o-font-smoothing: antialiased;
							-webkit-font-smoothing: antialiased;
			font-weight: 300;
			letter-spacing: 1px;
			line-height: 1.25;
			padding: 19px 10px 14px 20px;
		    text-shadow: 0px 0px 1px rgba(80, 60, 20, 0.15), 0px 0px 5px rgba(80, 60, 20, 0.15);
		    text-transform: uppercase;
}

.home .mp-menu h2 {
	font-size: 19px;
}

.mp-menu h2:hover {
	cursor: pointer;
}

.mp-menu h2.cursor-default:hover {
	cursor: default;
	text-shadow: 0px 0px 1px rgba(80, 60, 20, 0.15), 0px 0px 5px rgba(80, 60, 20, 0.15);
}

.mp-menu h2 a {
	float: unset;
    padding: 0;
			color: rgba(20, 15, 10, 0.55);
			font-family: 'Josefin Sans';
			font-size: 19px;
			font-smoothing: antialiased;
				-moz-font-smoothing: antialiased;
					-ms-font-smoothing: antialiased;
						-o-font-smoothing: antialiased;
							-webkit-font-smoothing: antialiased;
			font-weight: 300;
			letter-spacing: 1px;
			line-height: 1.25;
		    text-shadow: 0px 0px 1px rgba(80, 60, 20, 0.15), 0px 0px 5px rgba(80, 60, 20, 0.15);
		    text-transform: uppercase;
}

.mp-menu h2 a:hover {
	text-decoration: none;
}

.mp-menu h2 a:hover {
	background: transparent !important;
	box-shadow: none !important;
	color: #8E8144 !important;
}

.mp-menu.mp-overlap h2::before {
	position: absolute;
	top: 0;
	right: 0;
	margin-right: 8px;
	line-height: 1.8;
	opacity: 0;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.1s 0.3s;
	-moz-transition: opacity 0.3s, -moz-transform 0.1s 0.3s;
	transition: opacity 0.3s, transform 0.1s 0.3s;
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	transform: translateX(-100%);
}

.mp-menu.mp-cover h2 {
	text-transform: uppercase;
	letter-spacing: 1px;
}

.mp-overlap .mp-level.mp-level-overlay > h2::before {
	opacity: 1;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	transform: translateX(0);
}

.mp-menu ul li > a {
	display: block;
	outline: none;
	box-shadow: inset 0 -1px rgba(110, 80, 30, 0.2);
	-webkit-transition: background 0.3s, box-shadow 0.3s;
	-moz-transition: background 0.3s, box-shadow 0.3s;
	transition: background 0.3s, box-shadow 0.3s;

	color: #8E8144;
    height: auto;
    overflow: auto;
	text-decoration: none;
    text-transform: initial;
    width: 100%;
			color: rgba(20, 15, 10, 0.55);
			font-family: 'Josefin Sans';
			font-size: 19px;
			font-smoothing: antialiased;
				-moz-font-smoothing: antialiased;
					-ms-font-smoothing: antialiased;
						-o-font-smoothing: antialiased;
							-webkit-font-smoothing: antialiased;
			font-weight: 300;
			letter-spacing: 1px;
			line-height: 1.25;
			padding: 16px 10px 11px 30px;
		    text-shadow: 0px 0px 1px rgba(80, 60, 20, 0.15), 0px 0px 5px rgba(80, 60, 20, 0.15);
		    text-transform: uppercase;
}
    
.mp-menu ul li::before {
	position: absolute;
	left: 10px;
	z-index: -1;
	color: rgba(0,0,0,0.2);
	line-height: 3.5;
}

.mp-level > ul > li:first-child > a {
	box-shadow: inset 0 -1px rgba(110, 80, 30, 0.2), inset 0 1px rgba(110, 80, 30, 0.2);
}

.mp-menu ul li a:hover,
.mp-level > ul > li:first-child > a:hover {
	color: rgba(50, 40, 20, 0.65);
	text-shadow: 0px 0px 2px rgba(80, 75, 55, 0.5), 0px 2px 4px rgba(240, 240, 200, 0.6), 0px 0px 0px rgba(175, 150, 65, 0.75), 0px 0px 0px rgba(185, 165, 80, 0.9), 0px 0px 3px rgba(0, 200, 180, 0.25), 0px 0px 15px rgba(0, 200, 160, 0.35), 0px 0px 40px rgba(0, 200, 160, 0.5);
}

.mp-menu .mp-level.mp-level-overlay > ul > li > a,
.mp-level.mp-level-overlay > ul > li:first-child > a {
	box-shadow: inset 0 -1px rgba(0,0,0,0);
}

.mp-level > ul > li:first-child > a:hover,
.mp-level.mp-level-overlay > ul > li:first-child > a,
.mp-menu h2:hover {
	color: rgba(50, 40, 20, 0.65);
	text-shadow: 0px 0px 2px rgba(80, 75, 55, 0.5), 0px 2px 4px rgba(240, 240, 200, 0.6), 0px 0px 0px rgba(175, 150, 65, 0.75), 0px 0px 0px rgba(185, 165, 80, 0.9), 0px 0px 3px rgba(0, 200, 180, 0.25), 0px 0px 15px rgba(0, 200, 160, 0.35), 0px 0px 40px rgba(0, 200, 160, 0.5);
	box-shadow: none;
} /* seems like Chrome 34.0.1847.131 needs the second shadow otherwise the transition breaks */

.mp-menu ul li > a.active,
.mp-level > ul > li:first-child > a.active {
	background: #53554E;
    color: #DACB8C;
}

.mp-menu ul li > a.active:hover,
.mp-level > ul > li:first-child > a.active:hover {
	background: #70726B;
    cursor: pointer;
	text-shadow: none;
}

.mp-back {
	background: rgba(0,0,0,0.1);
	outline: none;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	display: block;
	padding: 1em;
	position: relative;
	box-shadow: inset 0 1px rgba(0,0,0,0.1);
	-webkit-transition: background 0.3s;
	-moz-transition: background 0.3s;
	transition: background 0.3s;
}

.mp-back::after {
	position: absolute;
	content: "\e037";
	right: 10px;
	color: rgba(0,0,0,0.3);
}

.mp-menu .mp-level.mp-level-overlay > .mp-back,
.mp-menu .mp-level.mp-level-overlay > .mp-back::after {
	background: transparent;
	box-shadow: none;
	color: transparent;
}

/* Fallback example for browsers that don't support 3D transforms (and no JS fallback) */
/* We'll show the first level only */
.no-csstransforms3d .mp-pusher,
.no-js .mp-pusher {
	padding-left: 300px;
}

.no-csstransforms3d .mp-menu .mp-level,
.no-js .mp-menu .mp-level {
	display: none;
}

.no-csstransforms3d .mp-menu > .mp-level,
.no-js .mp-menu > .mp-level {
	display: block;
}