ul.main-slide {
	width: 100vw;
	height: 100vh;
	position: relative;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Hide scrollbar in FF */
	display: none;
	flex-direction: column;
	align-items: flex-start;
	text-align: right;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
  user-select: none;
  margin-top: 110px;
}

.mobile ul.main-slide {
	padding: 5rem 0;
	height: auto;
}

ul.main-slide li {
	flex: none;
	margin-right: 4rem;
  padding: 0 2rem 0 0;
  width:90%!important;
}

ul.main-slide li a.item-link {
	white-space: nowrap;
	position: none;
	cursor: pointer;
	font-size: 7vw;
	padding: 0.5rem;
	/* display: block; */
	color: var(--color-menu);
}

ul.main-slide li a.item-link .menu-title {
  display: block;
  transition: transform 0.2s;
  font-family: 'Cormorant Upright', serif!important;
  color: #670016!important;
}

ul.main-slide li a.item-link:hover .menu-title {
	font-style: italic;
	transform: translate3d(2rem,0,0);
  color: var(--color-menu-hover);
  
}

ul.main-slide li a.item-link::before {
	content: '';
	top: 55%;
	width: 3.5rem;
	height: 1px;
	background: currentColor;
	position: absolute;
	right: calc(100% + 2rem);
	opacity: 0;
	pointer-events: none;
}

ul.main-slide li a.item-link:hover::before {
	opacity: 1;
}

/* Pseudo-element for making sure that hover area is active */
/* ul.main-slide li a.item-link:hover::after {
	content: '';
	position: absolute;
	top: 0;
	left: -5.5rem;
	right: 0;
	height: 100%;
} */
.main-slide .menu-img{
  display: none!important;
}
ul.main-slide li:hover a > .menu-img {
  display: block!important;
  height: 100vh;
  position: fixed !important;
  left: 0!important;
  top:0px!important;
  width: 45%!important;
}

@media screen and (min-width: 53em) {
	ul.main-slide li {
		margin-right: 25vw !important;
	}
	ul.main-slide li a.item-link {
		padding: 1vh 0;
		font-size: 9.5vh;
	}
}