/* -----------------------------------------------------------------------------
	Hamburger toggle icon
----------------------------------------------------------------------------- */

.icon-hamburger {
	background-color: transparent;
	display: block;
	position: relative;
	overflow: hidden;
	margin: 0;
	padding: 0;
	width: 60px;
	height: 60px;
	font-size: 0;
	text-indent: -9999px;
	box-shadow: none;
	border: none;
	cursor: pointer;
	transition: background 0.3s ease;
}

.icon-hamburger:focus {
	outline: none;
}

.icon-hamburger span {
	display: block;
	position: absolute;
	top: 28px;
	left: 18px;
	right: 18px;
	transition: transform 0.3s ease,
				left 0.3s ease,
				right 0.3s ease;
}

.icon-hamburger span::before,
.icon-hamburger span::after {
	position: absolute;
	display: block;
	left: 0;
	width: 100%;
	content: "";
}

.icon-hamburger span,
.icon-hamburger span::before,
.icon-hamburger span::after {
	height: 2px;
	background: var(--color-dark-grey);
}

.icon-hamburger span::before {
	top: -7px;
}

.icon-hamburger span::after {
	bottom: -7px;
}

/* -----------------------------------------------------------------------------
	Hamburger simple rotation
----------------------------------------------------------------------------- */

.icon-hamburger-rot.is-active span {
	transform: rotate(180deg);
}

/* -----------------------------------------------------------------------------
	Hamburger to left arrow icon
----------------------------------------------------------------------------- */

.icon-hamburger-htla span::before {
	transform-origin: top right;
	transition: transform 0.3s ease,
				width 0.3s ease,
				top 0.3s ease;
}

.icon-hamburger-htla span::after {
	transform-origin: bottom right;
	transition: transform 0.3s ease,
				width 0.3s ease,
				bottom 0.3s ease;
}

.icon-hamburger-htla.is-active {
	background-color: transparent;
	color: #
}

.icon-hamburger-htla.is-active span {
	right: 28px;
	left: 20px;
	transform: rotate(180deg);
}

.icon-hamburger-htla.is-active span::before,
.icon-hamburger-htla.is-active span::after {
	width: 65%;
}

.icon-hamburger-htla.is-active span::before {
	top: 0;
	transform: translateX(7px) translateY(1px) rotate(45deg);
}

.icon-hamburger-htla.is-active span::after {
	bottom: 0;
	transform: translateX(7px) translateY(-1px) rotate(-45deg);
}

.icon-hamburger-htla.is-active span,
.icon-hamburger-htla.is-active span::before,
.icon-hamburger-htla.is-active span::after {
	height: 2px;
}

/* -----------------------------------------------------------------------------
	Hamburger to right arrow icon
----------------------------------------------------------------------------- */

.icon-hamburger-htra span::before {
	transform-origin: top left;
	transition: transform 0.3s ease,
				width 0.3s ease,
				top 0.3s ease;
}

.icon-hamburger-htra span::after {
	transform-origin: bottom left;
	transition: transform 0.3s ease,
				width 0.3s ease,
				bottom 0.3s ease;
}

.icon-hamburger-htra.is-active {
	background-color: transparent;
	color: #
}

.icon-hamburger-htra.is-active span {
	right: 28px;
	left: 20px;
	transform: rotate(180deg);
}

.icon-hamburger-htra.is-active span::before,
.icon-hamburger-htra.is-active span::after {
	width: 65%;
}

.icon-hamburger-htra.is-active span::before {
	top: 0;
	transform: translateX(-2px) translateY(1px) rotate(-45deg);
}

.icon-hamburger-htra.is-active span::after {
	bottom: 0;
	transform: translateX(-2px) translateY(-1px) rotate(45deg);
}

.icon-hamburger-htra.is-active span,
.icon-hamburger-htra.is-active span::before,
.icon-hamburger-htra.is-active span::after {
	height: 2px;
}

/* -----------------------------------------------------------------------------
	Hamburger to X
----------------------------------------------------------------------------- */

.icon-hamburger-htx {
	background-color: #ff3264;
}

.icon-hamburger-htx span {
	transition: background 0s 0.3s;
}

.icon-hamburger-htx span::before,
.icon-hamburger-htx span::after {
	transition-duration: 0.3s, 0.3s;
	transition-delay: 0.3s, 0s;
}

.icon-hamburger-htx span::before {
	transition-property: top, transform;
}

.icon-hamburger-htx span::after {
	transition-property: bottom, transform;
}

.icon-hamburger-htx.is-active {
	background-color: #cb0032;
}

.icon-hamburger-htx.is-active span {
	background: none;
}

.icon-hamburger-htx.is-active span::before {
	top: 0;
	transform: rotate(45deg);
}

.icon-hamburger-htx.is-active span::after {
	bottom: 0;
	transform: rotate(-45deg);
}

.icon-hamburger-htx.is-active span::before,
.icon-hamburger-htx.is-active span::after {
	transition-delay: 0s, 0.3s;
}