body {
	background: #b2c2d8;
	font-size: 3vw;
}

.vertical_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
	max-height: 80vh;
    margin-top: 7vw;
}


video {
	max-width: 90%;
	max-height: 80vh;
}


	
#bas {
	padding-bottom: 8vw;
}

#bas.opaque {	
    background: #e0a48e;
}

.legende, .num_cat {
	margin: 0 5vw
}
.legende {
	font-size: 3vw;
	position: relative;
    overflow: hidden;
}
.num_cat {
	padding-top: 2vw;
}

.nav {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 3;
	display: flex;
	width: 100vw;
    padding: 0 1.6vw;
	background: #b2c2d8
	}
	
.prev , .next {
  -ms-flex: 0 1 50%;
	flex: 0 1 50%;
	width: 50%;
	padding: 2vw 0;
	}

.next{
	text-align: right;
}


@media (min-width: 560px) {
	
	


	#bas.opaque {	
		background: #e0a48e;
	}

	
				
}

@media (orientation: landscape) {
	video {
		max-height: calc(100vh - 90px);
		}
}

@media (orientation: landscape) and (max-height: 590px) {
	#close_button {
		position: absolute;
		top: 2vh;
		right: 4vh;
		font-size: 3vh;
	}
}

@media (min-width: 560px) and (orientation: landscape) {
	
	.legende {
		font-size: 12px;
	}
	
	.copy {
		font-size: 12px;
	}
	
	
	#container {
	padding-right:1.25rem;
	}
	
	.vertical_wrapper {
		min-height: inherit;
		height: unset;
		margin-top: unset;
	}
	
	#bas {
	padding-bottom: 48px;
	width: 350px;	
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 0;
	}
	
	.video1 #bas {
	width: 350px;
	}
	
	.nav {
		background: none;
	}
		
	.video1 .vertical_wrapper {
		margin-left : 350px;
	}
	
	.legende {
		margin:unset;
		margin-left: 2vw;
	}
	#container {
		position: relative;
		height: 70vh;
		max-height:560px		
	}
	
	.video1 .vertical_wrapper {
		align-items: flex-end;
		padding-bottom: 48px;
		padding-top: 42px;		/*idem #bas */	
	}
}