#prestation3D{
	display:none;
	position:absolute;
	top:100%;
	right:0;
	left:0;
	transition:top 2s, right 2s, left 2s;
	height:100%;
	height: calc(var(--vh, 1vh) * 100);
	width:100%;
	min-height:800px;
}

#troisdModel{
	width:100%;
	display:flex;
	justify-content:center;
	margin:100px 0 50px 0;
}

#troisdModel > div{
	width:80%!important;
	height: calc(var(--vh, 1vh) * 50)!important;
}

#modelisation, #animation, #integration{
    margin: 50px 0 0 0;
    display: flex;
	flex-direction:column;
    width: 100%;
    justify-content: center;
	align-items:center;
	color:white;
}

/* #animation video, #integration video{
	
	max-height:50%;
	
} */

#animation, #integration{
	display:none;
	height:75%;
	margin-top: 100px;
}

.troisDContent p{
	font-family:arial;
	text-align: center;
	font-size:1.2em;
}

.troisDContent h2{
	font-size:3em;
	margin:0;
	text-align: center;
}

.troisDContent:not(#modelisation) div:first-child{
	margin: 0 0 50px 0;
    width: 100%;
    max-height: 700px;
    background: rgba(0,0,0,.3);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 1;
}

.troisDContent div:last-child{
	width:60%;
}

.troisDContent > div:last-child{
	width:60%;
	background-color: rgba(0,0,0,.8);
    padding: 20px;
}

@media screen and (max-height:1090px) and (min-width:1001px){
	#prestation3D #zone_vignettes_2D{
		height:100px;
	}
	
	#prestation3D #choix2D img{
		width:70px;
	}	
	
	#prestation3D #choix2D img:hover, #prestation3D .choix2DClicked{
		width:80px!important;
	}
	
	.troisDContent h2 {
		font-size: 2em;
	}
	
	#troisdModel{
		margin: 10px 0 0 0;
	}
	
	#modelisation > div:last-child{
		position:absolute;
		top:700px;
	}
}

@media screen and (max-height:960px) and (min-width:1001px){
	#modelisation > div:last-child{
		top:600px;
	}	
}

@media screen and (max-height:860px) and (min-width:1001px){
	#modelisation > div:last-child{
		top:500px;
	}	
}

@media screen and (max-width:1000px){
	.troisDContent p{
		font-size:.8em;
	}
	
	.troisDContent h2{
		font-size:1.5em;
	}
	
	#modelisation{
		width:90%;
		margin:10px 0 0 0;
	}
	
	#animation, #integration{
		margin-top:50px;
	}
	
	#prestation3D #triangle_plein{
		top:calc(50% + 130px);
		right:10px;
	}
		
	#prestation3D{
		transition:bottom 0s, right 2s, left 2s;
	}
	
/* 	#animation video, #integration video{
		width: 500px;
	} */
}

@media screen and (max-width:620px){
	.troisDContent p{
		font-size:.6em;
	}
	
	.troisDContent h2{
		font-size:1em;
	}
	
	#prestation3D #triangle_plein{
		right:3px;
	}
	
	#prestation3D{
		min-height:500px;
	}
}

@media screen and (max-height:700px) and (max-width:620px){
	#modelisation > div:last-child{
		position:absolute;
		top:450px;
	}	
}

@media screen and (max-height:620px) and (max-width:620px){
	#modelisation > div:last-child{
		top:400px;
		padding:10px;
	}	
	
	#modelisation p {
		font-size: .5em;
	}
	
	#modelisation h2 {
		font-size: .8em;
	}	
}

@media screen and (max-height:550px) and (max-width:620px){
	#modelisation > div:last-child{
		top:370px;
	}	
}