#histoire {
	width: 100%;
	height: 100vh;
	position: absolute;
	left: -100%;
	overflow: hidden;
	z-index: 1;
	display: none;
	min-height: 900px;


	@media (max-width: $tabletBreakpoint) { 
		position: relative;
		height: auto;
	}

	.histoire-holder {

		width: 100%;
	    height: 100%;
	    float: left;
	    background-image: url(../images/histoire_background.JPG);
	    background-repeat: no-repeat;
	    background-size: cover;
	    background-color: rgba(0, 0, 0, 0.4);
	    background-blend-mode: multiply;
	    color: white;
	    z-index: 1;
	    position: absolute;

    	@media (max-width: $tabletBreakpoint) { 
			position: relative;
			min-height: 900px;
		}

		@media (max-width: $mobileBreakpoint) { 
			position: relative;
			min-height: 1163px;
		}

		.histoire-overlay {

			height: 100% !important;

			@media (max-width: $tabletBreakpoint) { 
				height: 100% !important;
			}

			.__logo {
				display: block;
				margin: 0 auto;
				width: 200px;
			}
		}

		.histoire-container {
			width: 750px;
			height: auto;
			border: 2px solid #73abdd;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-family: "neutraface-bold";
			color: #fff;
			padding-bottom: 98px;

			@media (max-width: $tabletBreakpoint) {
				    border: none;
				    transform: translate(-50%, -23%);
				    font-size: 21px;
				    top: 324px;
			}

			h1 {
				text-align: center;
				text-transform: uppercase;
				font-size: 36px;
				letter-spacing: 1.5px;
				line-height: 90px;

				@media (max-width: $tabletBreakpoint) {
				    width: 200px;
				    margin: 0 auto;
				    height: 70px;
				    border-bottom: 2px solid #597b9a;
			    }
			}

			.histoire-text {
				width: 561px;
				height: auto;
				margin: 0 auto;
				font-family: "neutraface-text";

				@media (max-width: $tabletBreakpoint) { 
		            width: 430px;
				    margin: 50px auto;
				    text-align: center;
				    font-size: 18px;
				}

				@media (max-width: $mobileBreakpoint) {  
					width: 250px;
				}
			}
		}

		.logo-histoire {
			position: absolute;
			bottom: 0px;
			width: auto;
			height: auto;
			top: inherit;
			transform: translate(-50%, 50%);
			left: 50%;

			img {
				width: 350px;
			}
		}
	}

	.histoire-next {
		@media (max-width: $tabletBreakpoint) { 
			float: left;
	    	width: 100%;
	    	height: 450px;
	    	background: black;
		}
	}
}