.home-menu-container {
    position: absolute;
    top: 0.5vw;
    left: 1vw;
    z-index: 9999;
    display: block;
    width: auto;
    height: 20vw;
}
/* Specific sticky height for Homepage */
body.home .home-menu-container {
  height: 120vh;
}

/* Specific sticky height for Shop (ID=391) */
body.page-id-391 .home-menu-container {
  height: 60vh;
}
.home-menu {
	position: sticky;
	top: 0.5vw;
	left: 1vw;
}
.home-menu-toggle {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	position: relative;
	transition: transform 0.1s ease;
}
.menu-cover {
	width: 12vw;
	max-width: 250px;
	height: auto;
}
.home-menu-toggle:hover {
	transform: rotate(+3deg) scale(1.1);
}
/* Dropdown menu hidden by default */
.menu-dropdown {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	background: none;
	padding: 0px;
	z-index: 10000;
}
.menu-top-div {
	overflow: visible;
	display: block;
	margin: 0;
	padding: 0;
	width: 15vw;
	aspect-ratio: 2 / 1;
	max-height: calc(15vw / 2);
}
.menu-top-img {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	width: 14vw;
	height: auto;
	z-index: 9999;
}
.menu-1-home-div {
	position: relative;
	overflow: visible;
	display: block;
	margin: 0;
	padding: 0;
	width: 15vw;
	aspect-ratio: 5 / 1;
	pointer-events: auto;
}
.menu-1-home-link {
	position: absolute;
	z-index: 10000;
	display: block;
	top: 1.123vw;
	left: 4.9vw;
	margin: 0;
	padding: 0;
	width: 5.7vw;
	aspect-ratio: 5 / 2;
	pointer-events: auto;
}
.menu-1-home-img {
	position: absolute;
	z-index: 9998;
	top: -5vw;
	display: block;
	margin: 0;
	padding: 0;
	width: 13vw;
	height: auto;
	pointer-events: auto;
	transition: transform 0.1s ease;
}
.menu-1-home-link:hover ~ .menu-1-home-img {
	transform: scale(1.05) translateY(5px) translateX(5px) rotate(-2deg);
}
.menu-1-home-link:active ~ .menu-1-home-img {
	transform: scale(0.995);
}
.menu-1-home-link:focus {
	outline: none;
	border: none;
}
.menu-2-about-div {
	position: relative;
	overflow: visible;
	display: block;
	margin: 0;
	padding: 0;
	width: 15vw;
	aspect-ratio: 5 / 1;
	pointer-events: auto;
}
.menu-2-about-link {
	position: absolute;
	z-index: 10001;
	display: block;
	top: 1.123vw;
	left: 4.9vw;
	margin: 0;
	padding: 0;
	width: 5.7vw;
	aspect-ratio: 5 / 2;
	pointer-events: auto;
}
.menu-2-about-img {
	position: absolute;
	z-index: 9997;
	top: -4.7vw;
	display: block;
	margin: 0;
	padding: 0;
	width: 13vw;
	height: auto;
	pointer-events: auto;
	transition: transform 0.1s ease;
}
.menu-2-about-link:hover ~ .menu-2-about-img {
	transform: scale(1.05) translateY(5px) translateX(5px) rotate(-2deg);
}
.menu-2-about-link:active ~ .menu-2-about-img {
	transform: scale(0.995);
}
.menu-2-about-link:focus {
	outline: none;
	border: none;
}
.menu-3-shop-div {
	position: relative;
	overflow: visible;
	display: block;
	margin: 0;
	padding: 0;
	width: 15vw;
	aspect-ratio: 5 / 1;
	pointer-events: auto;
}
.menu-3-shop-link {
	position: absolute;
	z-index: 10002;
	display: block;
	top: 1.123vw;
	left: 4.9vw;
	margin: 0;
	padding: 0;
	width: 5.7vw;
	aspect-ratio: 5 / 2;
	pointer-events: auto;
}
.menu-3-shop-img {
	position: absolute;
	z-index: 9996;
	top: -5vw;
	display: block;
	margin: 0;
	padding: 0;
	width: 13vw;
	height: auto;
	pointer-events: auto;
	transition: transform 0.1s ease;
}
.menu-3-shop-link:hover ~ .menu-3-shop-img {
	transform: scale(1.05) translateY(5px) translateX(5px) rotate(-2deg);
}
.menu-3-shop-link:active ~ .menu-3-shop-img {
	transform: scale(0.995);
}
.menu-3-shop-link:focus {
	outline: none;
	border: none;
}
.home-menu-toggle:focus {
  border: none;
  outline: none;
  box-shadow: none;
}
/* I cannot for the life of me get rid of these annoying WP added empty <p>'s, CSS fix to hide: */
p:empty{
  height: 0;
  width:0;
  margin: 0;
  padding: 0;
  display: none;
}
/* Responsive */
@media (max-width: 600px) {
  .menu-cover { max-width: 120px; }
  .menu-dropdown a img { width: 120px; }
}