/**
 * Menu Grid 1.0.0 (https://codings.dev)
 * Copyright 2022 Codings
 */
 :root .menu-toggle.scheme-1 {
	--color-1: var(--white-color);
	--color-2: var(--white-color)
}

:root .menu-toggle.scheme-2 {
	--color-1: var(--black-color);
	--color-2: var(--white-color)
}

:root .menu-toggle.scheme-3 {
	--color-1: var(--black-color);
	--color-2: var(--black-color)
}

:root .menu-toggle.scheme-4 {
	--color-1: var(--white-color);
	--color-2: var(--black-color)
}

.menu-toggle {
	position: relative;
	z-index: 70;
	top: 0;
	right: -1rem;
	overflow: hidden;
	transform: scale(1);
	display: block;
	width: 68px;
	height: 68px;
	cursor: pointer;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-transition: all .3s ease-out 0s;
	-o-transition: all .3s ease-out 0s;
	-moz-transition: all .3s ease-out 0s;
	transition: all .3s ease-out 0s
}

.menu-toggle.is-hidden {
	opacity: 0;
	pointer-events: none
}

.menu-toggle:hover {
	opacity: 1
}

.menu-toggle .menu-toggle-path {
	position: absolute;
	top: 0;
	left: 0;
	height: 68px;
	width: 68px;
	mask: url(#menu-toggle-mask);
	-webkit-mask: url(#menu-toggle-mask);
	-webkit-mask-box-image: url(../../svg/menu-toggle-mask.svg)
}

.menu-toggle .path-animation {
	position: absolute;
	top: 0;
	left: 0;
	width: 68px;
	height: 68px
}

.menu-toggle .menu-toggle-icon {
	position: absolute;
	height: 68px;
	width: 68px;
	display: flex;
	align-items: center;
	justify-content: center
}

.menu-toggle .menu-toggle-container {
	position: relative;
	height: 28px;
	width: 36px
}

.menu-toggle .menu-toggle-line-top,
.menu-toggle .menu-toggle-line-bottom,
.menu-toggle .menu-toggle-line-middle {
	position: absolute;
	display: block;
	height: 4px;
	width: 36px;
	border-radius: 0;
	background-color: #ffffff;
	-webkit-transition: all .3s ease-out 0s;
	-o-transition: all .3s ease-out 0s;
	-moz-transition: all .3s ease-out 0s;
	transition: all .3s ease-out 0s
}

.menu-toggle .menu-toggle-line-top {
	top: 0;
	transform-origin: 34px 2px
}

.menu-toggle .menu-toggle-line-bottom {
	bottom: 0;
	transform-origin: 34px 2px
}

.menu-toggle .menu-toggle-line-middle {
	top: 12px
}

.menu-toggle:not(.is-open) .menu-toggle-line-top {
	width: 22px
}

.menu-toggle:not(.is-open) .menu-toggle-line-bottom {
	width: 28px
}

.menu-toggle:not(.is-open):hover .menu-toggle-line-top {
	width: 28px
}

.menu-toggle:not(.is-open):hover .menu-toggle-line-bottom {
	width: 22px
}

.menu-toggle.is-open .menu-toggle-line-top {
	background-color: var(--color-2);
	-webkit-animation: menu-toggle-top-out .6s linear normal;
	animation: menu-toggle-top-out .6s linear normal;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards
}

.menu-toggle.is-open .menu-toggle-line-bottom {
	background-color: var(--color-2);
	-webkit-animation: menu-toggle-bottom-out .6s linear normal;
	animation: menu-toggle-bottom-out .6s linear normal;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards
}

.menu-toggle.is-open .menu-toggle-line-middle {
	background-color: var(--color-2);
	-webkit-animation: menu-toggle-fill-out .6s linear normal;
	animation: menu-toggle-fill-out .6s linear normal;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards
}

.menu-toggle.is-closed .menu-toggle-line-top {
	-webkit-animation: menu-toggle-top-in .6s linear normal;
	animation: menu-toggle-top-in .6s linear normal;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards
}

.menu-toggle.is-closed .menu-toggle-line-bottom {
	-webkit-animation: menu-toggle-bottom-in .6s linear normal;
	animation: menu-toggle-bottom-in .6s linear normal;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards
}

.menu-toggle.is-closed .menu-toggle-line-middle {
	-webkit-animation: menu-toggle-fill-in .6s linear normal;
	animation: menu-toggle-fill-in .6s linear normal;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards
}

.menu-toggle.is-open:hover .menu-toggle-line-top,
.menu-toggle.is-open:hover .menu-toggle-line-bottom,
.menu-toggle.is-open:hover .menu-toggle-line-middle {
	background-color: var(--color)
}

.menu-toggle .menu-toggle-circle {
	position: absolute;
	top: 0;
	left: 0;
	width: 68px;
	height: 68px
}

.menu-toggle .path-mask {
	stroke: var(--color-1)
}

.menu-toggle.is-open .path-mask {
	stroke: var(--color-2)
}

.menu-toggle.is-open:hover .path-mask {
	stroke: var(--color)
}

.menu-toggle .menu-toggle-path-circle {
	stroke-dasharray: 240;
	stroke-dashoffset: 240;
	stroke-linejoin: round;
	stroke: var(--color-1)
}

.menu-toggle.is-open .menu-toggle-path-circle {
	stroke: var(--color-2);
	-webkit-animation: menu-toggle-dash-in .6s linear normal;
	animation: menu-toggle-dash-in .6s linear normal;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards
}

.menu-toggle.is-open:hover .menu-toggle-path-circle {
	stroke: var(--color)
}

.menu-toggle.is-closed .menu-toggle-path-circle {
	-webkit-animation: menu-toggle-dash-out .6s linear normal;
	animation: menu-toggle-dash-out .6s linear normal;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards
}

.menu-toggle .menu-toggle-svg-circle {
	width: 68px;
	height: 68px
}

.menu-toggle.is-open .path-animation {
	-webkit-animation: menu-toggle-rotate-in .6s linear normal;
	animation: menu-toggle-rotate-in .6s linear normal;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards
}

.menu-toggle.is-closed .path-animation {
	-webkit-animation: menu-toggle-rotate-out .6s linear normal;
	animation: menu-toggle-rotate-out .6s linear normal;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards
}

.menu-toggle .path-rotation {
	height: 34px;
	width: 34px;
	margin: 34px 34px 0 0;
	transform: rotate(0deg);
	transform-origin: 100% 0
}

.menu-toggle .path-rotation:before {
	content: "";
	display: block;
	width: 30px;
	height: 34px;
	margin: 0 4px 0 0;
	background-color: #ffffff
}

.menu-toggle.is-open .path-rotation:before {
	background-color: var(--color-2)
}

.menu-toggle.is-open:hover .path-rotation:before {
	background-color: var(--color)
}

@media (max-width:991px) {
	.menu-toggle {
		position: absolute;
		right: 0
	}

	.menu-toggle .menu-toggle-circle,
	.menu-toggle .menu-toggle-path {
		display: none
	}
}

@keyframes menu-toggle-dash-in {
	0% {
		stroke-dashoffset: 240
	}

	40% {
		stroke-dashoffset: 240
	}

	100% {
		stroke-dashoffset: 0
	}
}

@-webkit-keyframes menu-toggle-dash-in {
	0% {
		stroke-dashoffset: 240
	}

	40% {
		stroke-dashoffset: 240
	}

	100% {
		stroke-dashoffset: 0
	}
}

@keyframes menu-toggle-dash-out {
	0% {
		stroke-dashoffset: 0
	}

	40% {
		stroke-dashoffset: 240
	}

	100% {
		stroke-dashoffset: 240
	}
}

@-webkit-keyframes menu-toggle-dash-out {
	0% {
		stroke-dashoffset: 0
	}

	40% {
		stroke-dashoffset: 240
	}

	100% {
		stroke-dashoffset: 240
	}
}

@keyframes menu-toggle-top-in {
	0% {
		left: -5px;
		bottom: 0;
		transform: rotate(-45deg)
	}

	20% {
		left: -5px;
		bottom: 0;
		transform: rotate(-60deg)
	}

	80% {
		left: 0;
		bottom: 0;
		transform: rotate(15deg)
	}

	100% {
		left: 0;
		bottom: 1px;
		transform: rotate(0deg)
	}
}

@-webkit-keyframes menu-toggle-top-in {
	0% {
		left: -5px;
		bottom: 0;
		transform: rotate(-45deg)
	}

	20% {
		left: -5px;
		bottom: 0;
		transform: rotate(-60deg)
	}

	80% {
		left: 0;
		bottom: 0;
		transform: rotate(15deg)
	}

	100% {
		left: 0;
		bottom: 1px;
		transform: rotate(0deg)
	}
}

@keyframes menu-toggle-top-out {
	0% {
		left: 0;
		top: 0;
		transform: rotate(0deg)
	}

	20% {
		left: 0;
		top: 0;
		transform: rotate(15deg)
	}

	80% {
		left: -5px;
		top: 0;
		transform: rotate(-60deg)
	}

	100% {
		left: -5px;
		top: 1px;
		transform: rotate(-45deg)
	}
}

@-webkit-keyframes menu-toggle-top-out {
	0% {
		left: 0;
		top: 0;
		transform: rotate(0deg)
	}

	20% {
		left: 0;
		top: 0;
		transform: rotate(15deg)
	}

	80% {
		left: -5px;
		top: 0;
		transform: rotate(-60deg)
	}

	100% {
		left: -5px;
		top: 1px;
		transform: rotate(-45deg)
	}
}

@keyframes menu-toggle-bottom-in {
	0% {
		left: -5px;
		transform: rotate(45deg)
	}

	20% {
		left: -5px;
		bottom: 0;
		transform: rotate(60deg)
	}

	80% {
		left: 0;
		bottom: 0;
		transform: rotate(-15deg)
	}

	100% {
		left: 0;
		transform: rotate(0deg)
	}
}

@-webkit-keyframes menu-toggle-bottom-in {
	0% {
		left: -5px;
		transform: rotate(45deg)
	}

	20% {
		left: -5px;
		bottom: 0;
		transform: rotate(60deg)
	}

	80% {
		left: 0;
		bottom: 0;
		transform: rotate(-15deg)
	}

	100% {
		left: 0;
		transform: rotate(0deg)
	}
}

@keyframes menu-toggle-bottom-out {
	0% {
		left: 0;
		transform: rotate(0deg)
	}

	20% {
		left: 0;
		transform: rotate(-15deg)
	}

	80% {
		left: -5px;
		transform: rotate(60deg)
	}

	100% {
		left: -5px;
		transform: rotate(45deg)
	}
}

@-webkit-keyframes menu-toggle-bottom-out {
	0% {
		left: 0;
		transform: rotate(0deg)
	}

	20% {
		left: 0;
		transform: rotate(-15deg)
	}

	80% {
		left: -5px;
		transform: rotate(60deg)
	}

	100% {
		left: -5px;
		transform: rotate(45deg)
	}
}

@keyframes menu-toggle-rotate-in {
	0% {
		transform: rotate(360deg)
	}

	40% {
		transform: rotate(180deg)
	}

	100% {
		transform: rotate(0deg)
	}
}

@-webkit-keyframes menu-toggle-rotate-in {
	0% {
		transform: rotate(360deg)
	}

	40% {
		transform: rotate(180deg)
	}

	100% {
		transform: rotate(0deg)
	}
}

@keyframes menu-toggle-rotate-out {
	0% {
		transform: rotate(0deg)
	}

	40% {
		transform: rotate(180deg)
	}

	100% {
		transform: rotate(360deg)
	}
}

@-webkit-keyframes menu-toggle-rotate-out {
	0% {
		transform: rotate(0deg)
	}

	40% {
		transform: rotate(180deg)
	}

	100% {
		transform: rotate(360deg)
	}
}

@keyframes menu-toggle-fill-in {
	0% {
		width: 0;
		left: 36px
	}

	40% {
		width: 0;
		left: 40px
	}

	80% {
		width: 36px;
		left: -6px
	}

	100% {
		width: 36px;
		left: 0
	}
}

@-webkit-keyframes menu-toggle-fill-in {
	0% {
		width: 0;
		left: 36px
	}

	40% {
		width: 0;
		left: 40px
	}

	80% {
		width: 36px;
		left: -6px
	}

	100% {
		width: 36px;
		left: 0
	}
}

@keyframes menu-toggle-fill-out {
	0% {
		width: 36px;
		left: 0
	}

	20% {
		width: 42px;
		left: -6px
	}

	40% {
		width: 0;
		left: 40px
	}

	100% {
		width: 0;
		left: 36px
	}
}

@-webkit-keyframes menu-toggle-fill-out {
	0% {
		width: 36px;
		left: 0
	}

	20% {
		width: 42px;
		left: -6px
	}

	40% {
		width: 0;
		left: 40px
	}

	100% {
		width: 0;
		left: 36px
	}
}

:root .menu-grid.scheme-1 {
	--color-1: var(--black-color);
	--color-2: var(--white-color)
}

:root .menu-grid.scheme-2 {
	--color-1: var(--white-color);
	--color-2: var(--black-color)
}

.menu-grid {
	overflow: hidden;
	position: fixed;
	z-index: 60;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	display: block;
	text-align: center;
	visibility: hidden
}

.menu-grid-backdrop {
	position: fixed;
	overflow-y: scroll
}

.menu-grid-backdrop:before {
	content: '';
	position: absolute;
	z-index: 11;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--black-color);
	opacity: .5
}

.menu-grid-open {
	pointer-events: auto
}

.menu-grid-open .menu-grid {
	visibility: initial
}

.menu-grid .menu-grid-item {
	width: 100%;
	position: relative;
	overflow: hidden
}

.menu-grid .menu-grid-item-inner {
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 100%;
	padding: 35px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	transform: translate3d(100%, 0, 0)
}

.menu-grid .item-1 .menu-grid-item-inner {
	background-color: var(--color-1)
}

.menu-grid .item-2 .menu-grid-item-inner {
	background-color: var(--color-1)
}

.menu-grid .item-3 .menu-grid-item-inner {
	background-color: var(--color-1)
}

.menu-grid .item-3 .menu-grid-item-inner:before {
	content: '';
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-2);
	opacity: .025
}

.menu-grid .item-4 .menu-grid-item-inner {
	background-color: var(--color-1)
}

.menu-grid .item-5 .menu-grid-item-inner {
	background-color: var(--color-1)
}

.menu-grid .item-5 .menu-grid-item-inner:before {
	content: '';
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-2);
	opacity: .025
}

.menu-grid .menu-grid-main-item {
	overflow: hidden;
	position: relative;
	display: block;
	background: linear-gradient(to right, var(--color), var(--color) 50%, var(--color-2) 50%);
	background-clip: text;
	-webkit-background-clip: text;
	background-size: 200% 100%;
	background-position: 100%;
	transition: background-position .4s ease;
	text-decoration: none;
	color: var(--color-2);
	-webkit-text-fill-color: transparent;
	opacity: 0
}

.menu-grid .menu-grid-main-item:hover {
	background-position: 0 100%
}

.menu-grid .menu-grid-minor-item {
	overflow: hidden;
	position: relative;
	display: block;
	margin: 5px 0;
	text-decoration: none;
	color: var(--gray-color);
	-webkit-transition: all .4s ease-out 0s;
	-o-transition: all .4s ease-out 0s;
	-moz-transition: all .4s ease-out 0s;
	transition: all .4s ease-out 0s
}

.menu-grid .menu-grid-minor-item:hover {
	color: var(--color-2)
}

.menu-grid p.menu-grid-minor-item {
	margin-bottom: 1.5rem
}

.menu-grid .menu-grid-minor-item-inner {
	display: block;
	transform: translate3d(0, 100%, 0)
}

.menu-grid .menu-grid-minor-item .icon {
	font-size: 1rem;
	margin-right: 10px
}

.menu-grid .menu-grid-icons {
	margin-top: 1.5rem
}

.menu-grid .menu-grid-icons .menu-grid-minor-item {
	margin: 0 5px;
	display: inline-block;
	line-height: 1
}

.menu-grid .menu-grid-item-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center
}

.menu-grid .menu-grid-item-image .image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	-webkit-transition: all .4s ease-out 0s;
	-o-transition: all .4s ease-out 0s;
	-moz-transition: all .4s ease-out 0s;
	transition: all .4s ease-out 0s
}

.menu-grid .menu-grid-item-image.active .image {
	opacity: .5
}

.menu-grid .menu-grid-item-image.active:hover .image {
	opacity: .25;
	transform: scale3d(1.1, 1.1, 1)
}

.menu-grid .menu-grid-item-image .image {
	filter: grayscale(1)
}

.menu-grid .menu-grid-item-image:hover .image {
	opacity: .5;
	filter: none;
	transform: scale3d(1.1, 1.1, 1)
}

.menu-grid .menu-grid-item-image .title {
	position: absolute;
	z-index: 1;
	background: linear-gradient(to right, var(--color-2), var(--color-2) 50%, transparent 50%);
	background-size: 200% 100%;
	background-position: 100%;
	background-clip: text;
	-webkit-background-clip: text;
	transition: background-position .4s ease;
	color: transparent;
	-webkit-text-fill-color: transparent;
	opacity: 0
}

.menu-grid .menu-grid-item-image.active .title,
.menu-grid .menu-grid-item-image:hover .title {
	background-position: 0 100%;
	opacity: 1
}

.menu-grid-label {
	opacity: .75
}

.menu-grid-label.top .label-vertical {
	top: 35px;
	right: initial;
	left: 35px
}

.menu-grid-label.bottom .label-vertical {
	right: 35px;
	bottom: 35px
}

.menu-grid-search {
	position: absolute;
	bottom: 35px;
	left: 35px;
	width: 45%;
	text-align: left
}

@media (min-width:992px) {
	.menu-grid {
		overflow: hidden;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		display: grid;
		grid-template-columns: 20% 30% 50%;
		grid-template-rows: 60% 40%;
		grid-template-areas: "item3 item2 item1""item4 item5 item1"
	}

	.menu-grid .menu-grid-item {
		height: 100%
	}

	.menu-grid .item-1 {
		grid-area: item1
	}

	.menu-grid .item-2 {
		grid-area: item2
	}

	.menu-grid .item-3 {
		grid-area: item3
	}

	.menu-grid .item-4 {
		grid-area: item4
	}

	.menu-grid .item-5 {
		grid-area: item5
	}

	.menu-grid .menu-grid-item-inner {
		align-items: center
	}

	.menu-grid .menu-grid-main,
	.menu-grid .menu-grid-minor {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center
	}

	.menu-grid .menu-grid-main-item {
		overflow: visible;
		padding: 1rem;
		line-height: 1;
		font-family: var(--secondary-font);
		font-size: 5rem;
		font-weight: 800
	}

	.menu-grid .menu-grid-item-image .title {
		font-family: var(--secondary-font);
		font-size: 1.8rem;
		font-weight: 700
	}
}

@media (max-width:991px) {
	.menu-grid .menu-grid-item.item-1 {
		width: 100%;
		height: 100%
	}

	.menu-grid .menu-grid-item.item-2,
	.menu-grid .menu-grid-item.item-3,
	.menu-grid .menu-grid-item.item-4,
	.menu-grid .menu-grid-item.item-5 {
		display: none
	}

	.menu-grid .menu-grid-item-inner {
		padding: 1.5rem
	}

	.menu-grid-label.top .label-vertical {
		top: 1.5rem;
		left: 1.5rem
	}

	.menu-grid-label.bottom .label-vertical {
		right: 1.5rem;
		bottom: 1.5rem
	}

	.menu-grid-search {
		bottom: 1.5rem;
		left: 1.5rem;
		width: 75%;
		text-align: left
	}

	.menu-grid .menu-grid-main-item {
		overflow: visible;
		padding: 1rem;
		line-height: 1;
		font-family: var(--secondary-font);
		font-size: 3rem;
		font-weight: 800
	}
}