/* --------------------------------------------------------------- */
/*
/*  BURGER
/*
/* --------------------------------------------------------------- */

.action-responsive {
	display : none;
}

#menu-burger {
	padding       : 10px;
	border-radius : 30px;
	border        : 1px solid rgba(255, 255, 255, 0.24);
	display       : flex;
	align-items   : center;
	cursor        : pointer;
}

#menu-burger .content {
	display     : flex;
	align-items : center;
}

#menu-burger i {
	font-size : 20px;
}

#menu-burger span.burger {
	width              : 20px;
	height             : 8px;
	display            : flex;
	z-index            : 120;
	position           : relative;
	-webkit-transition : .3s;
	-moz-transition    : .3s;
	-o-transition      : .3s;
	transition         : .3s;
	margin-right       : 12px;
}


#menu-burger span.burger::before, #menu-burger span.burger::after {
	width              : 100%;
	height             : 2px;
	background-color   : #FFFFFF;
	content            : "";
	position           : absolute;
	left               : 0;
	-webkit-transition : .3s;
	-moz-transition    : .3s;
	-o-transition      : .3s;
	transition         : .3s;
}

#menu-burger span.burger::before {
	top : 0;
}

#menu-burger span.burger::after {
	bottom : 0;
}

#menu-burger.open span.burger::before {
	transform : rotateZ(-45deg);
	top       : 3px;
}

#menu-burger.open span.burger::after {
	transform : rotateZ(45deg);
	bottom    : 3px;
}

#menu-burger span.burger:hover::after {
	background-color : #FFFFFF;
}

#menu-burger span.burger:hover::before {
	background-color : #FFFFFF;
}


@media screen and (max-width : 1199px) {

	body.modal-open #page:after {
		width            : 100%;
		height           : 100%;
		background-color : rgba(0, 0, 0, 0.54);
		position         : absolute;
		top              : 0;
		left             : 0;
		content          : "";
		z-index          : 20;
	}

	#menu {
		display : none;
	}

	#menu > .container {
		padding : 0;
	}

	#menu.active {
		width              : 50%;
		display            : block;
		left               : 0;
		opacity            : 1;
		animation-duration : 0.3s;
		animation-name     : animate_menu_resp;
		box-shadow         : 0 0 10px rgba(0, 0, 0, 0.8);
	}

	@keyframes animate_menu_resp {
		from {
			opacity : 0;
			left    : 20px;
		}

		to {
			opacity : 1;
			left    : 0;
		}
	}

	@keyframes animate_menu_categorie {
		from {
			opacity : 0;
			height  : 0;
		}

		to {
			opacity : 1;
			height  : 100%;
		}
	}

	#menu {
		top              : 85px;
		left             : 0;
		width            : 100%;
		background-color : #FFFFFF;
		border-bottom    : 1px solid #D3D3D3;
		position         : fixed;
		height           : calc(100vh - 85px);
		padding-top      : 90px;
	}

	#menu ul.first {
		height         : calc(100vh - 175px);
		flex-direction : column;
		padding        : 30px 0px;
		overflow-y     : auto;
	}

	#menu ul.first.no-scroll {
		overflow : hidden;
	}


	#menu ul li.level_one {
		margin   : 0px;
		padding  : 0;
		width    : 100%;
		height   : auto;
		display  : block;
		position : static;
	}

	#menu ul li.level_one a {
		position : relative;
		top      : 0;
	}

	#menu ul li.level_one:hover a:after {
		display : none;
	}

	#menu ul li.level_one .sous_menu {
		padding            : 0 0 20px 0;
		opacity            : 1;
		animation-duration : 0.3s;

		position           : absolute;
		top                : 0;
		width              : 100%;
		left               : -100%;
		height             : calc(100vh - 175px);
		overflow           : hidden;
		border             : none;
		display            : none;
	}

	#menu ul li.level_one.open .sous_menu {
		left       : 0;
		height     : 100%;
		overflow-y : auto;
		display    : block;
	}


	#menu ul li.level_one .sous_menu .header_submenu {
		position   : sticky;
		top        : 0;
		background : #161616;
		z-index    : 10;
	}

	#menu ul li.level_one .sous_menu .retour {
		padding     : 10px 15px;
		width       : auto;
		background  : #161616;
		color       : #FFFFFF;
		font-weight : bold;
		cursor      : pointer;
	}

	#menu ul li.level_one .sous_menu .retour i {
		color : #A5C92E;
	}

	#menu ul li.level_one .sous_menu .titre_menu_responsive {
		padding        : 10px 15px;
		text-align     : left;
		width          : auto;
		background     : #FFFFFF;
		color          : #161616;
		border-bottom  : 2px solid #A5C92E;

		text-transform : uppercase;
		font-weight    : bold;
	}

	#menu ul li.level_one .sous_menu ul {
		padding : 10px 15px 0 15px;
	}

	#menu ul li.level_one .sous_menu .titre_sous_menu {
		padding-bottom : 10px;
	}

	.action-responsive {
		width              : 50%;
		height             : 90px;
		display            : flex;
		align-items        : center;
		position           : fixed;
		left               : 0;
		top                : 85px;
		z-index            : 10;

		background-color   : #161616;
		opacity            : 1;
		animation-name     : animate_menu_resp;
		animation-duration : 0.3s;
	}

	.action-responsive a {
		color           : #FFFFFF;
		line-height     : 1rem;
		text-decoration : none;
	}

	.action-responsive i {
		color         : #A5C92E;
		margin-bottom : 0.5rem;
	}

	#menu ul li.level_one .sous_menu a {
		padding : 10px 0px;
	}
}

@media screen and (max-width : 767px) {
	#menu.active {
		width : 100%;
	}

	.action-responsive {
		width : 100%;
	}
}