.menu-toggle {
	border: none;
	width: 3rem;
	height: 3rem;
	border: 4px solid transparent;
	background-color: transparent;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 0.5rem;
	cursor: pointer;
	transition: 0.125s ease;
	outline: none !important;
	&.clicked {
		outline: 0;
		background-color: #363853;
		span {
			background-color: #fff;
			transform: rotate(45deg);
			&:before {
				background-color: #fff;
				transform: rotate(90deg) translate(-1rem);
			}

			&:after {
				background-color: #fff;
				transform: rotate(90deg) translate(1rem);
				opacity: 0;
			}
		}
	}

	span {
		display: block;
		width: 1.8rem;
		height: 4px;
		border-radius: 99em;
		background-color: #363853;
		transition: 0.5s ease;
		position: relative;
		&:before,
		&:after {
			content: "";
			display: block;
			position: absolute;
			height: 100%;
			width: 100%;
			background-color: #363853;
			border-radius: 99em;
			transition: 0.5s ease;
		}

		&:before {
			top: 1rem;
		}

		&:after {
			bottom: 1rem;
		}
	}
}

/*
========================================================= menu 
*/
.custom-menu-dropdown{
    position: relative;

}
.custom-menu-dropdown-liste{
    z-index: 99;
    position: absolute;
    background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.125);
	box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 8px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    right: 0;
    padding: 2rem;
    border-radius: 0 0 1rem 1rem;

	display: flex;
	flex-direction: column;
}
.custom-nav-link{
	width: 10rem;
	font-size: 1.2rem;
	margin-bottom: 1rem;
	color: #363853;
}
.custom-nav-link i {
	margin-right: 10px;
}

.menu-hide-back{
	position: absolute;
	top : 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: transparent;
}