.menu-button{
	cursor: pointer;
}

#jumbo-menu{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	min-height: 100vh;
	background-color: $white;
	transform: translateX(-100%);
	transition: transform 0.6s ease;
	z-index: 1000;
	overflow: auto;


	&.open{
		transform: translateX(0%);
	}


	.titre{
		@extend %chapeau;
		margin-bottom: 20px;
		border-top: 2px solid $black;
		padding-top: 10px;
	}


	.header{
		@extend %header;

		.close{
			display: flex;
			align-items: center;
			font-size: 1.1rem;
			color: #000;
			cursor: pointer;

			&__hamburger{
				margin-right: 10px;
			}

			&__text{
				font-size: 1.3rem;
				line-height: 1rem;
			}
		}
	}

	.choose-lang{
		display: flex;
		justify-content: space-between;
		height: 30px;
		border-top: 2px solid $black;
		padding-top: 10px;
		margin-bottom: 30px;
		font-size: 1.2rem;

		.langues{
			a.langue{
				@extend .black;
				@extend .din-bold;

				&:after{
					content:" |";
				}

				&:last-child:after{
					content:"";
				}

				&.selected{
					span{
						text-decoration: underline;
					}
				}
			}
		}
	}

	.content{
		display: flex;
	}

	.left-column{
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: space-between;
		margin-right: 25px;
		min-width: 280px;
	}
}

@media screen and (max-width: 768px){
	#jumbo-menu{

		.header{
			height: $header-mobile-height;

			.logo img{
				height: 25px;
			}
		}

		.content{
			flex-direction: column;
		}

		.collections{
			order: 1;
		}

		.right{
			order: 2;
			margin-right: 0;
		}
	}
}