#prestationWeb{
	display:none;
	position:absolute;
	top:-100%;
	right:0;
	transition:top 2s, right 2s, left 2s;
/* 	background-image:url("../../img/Web/Fond.webp");
	background-size:cover; */
	height:100%;
	height: calc(var(--vh, 1vh) * 100);
	width:100%;
	min-height:500px;
}

#prestationWeb .webContent img:nth-child(2){
	animation: animRotate 5s linear infinite;
}

@keyframes animRotate {
	0%{
		transform:scale(1);
	}
	50%{
		transform:scale(1.1);
	}
	100%{
		transform:scale(1)
	}
}

.webContent{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	height:90%;
}

.webContent > img{
	width: 1000px;
    margin-right: 10%;
    position: absolute;
    top: 200px;
}

.webContent p{
	font-family: arial;
    font-weight: bold;
	text-align:justify;
	line-height: 1.7em;
	font-size:1.3em;
}

.webContent h2{
	font-size:3em;
	margin:0;
}

#creationSite > div{
	left:inherit;
	top:900px;
	width:40%;
}

#creationSite > img{
	margin:0;
}

.webContent > div{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;	
	background-color:rgba(60,60,60,.8);
	color:white;
	text-align:justify;
	width:30%;
	padding:30px;
	top: 800px;
    left: 60%;
	position:absolute;
}

#choixWeb{
	display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    left: 10px;
    top: 0;
    height: 100%;
	z-index: 4;
}

#choixWeb img:not(:first-child){
	margin-top:30px;
}

#choixWeb img{
	width:100px;
	transition:width .5s;
	cursor: url(../../img/Icones/clicker.webp), auto;
}

#choixWeb img:hover, #choixWeb .choix2DClicked{
	width:110px!important;
}

#triangle_plein{
	border-top: 200px solid transparent;
	border-bottom: 200px solid transparent;
    border-left: 100px solid rgba(115,115,115,.8);
	color:white;
	position: absolute;
    right: 30px;
	top: calc(50% - 200px);
	cursor: url(../../img/Icones/clicker.webp), auto;
	transition:border-left-color .5s;
}

#triangle_plein:hover{
	border-left-color: rgba(0,231,255,0.8);
}

#zone_vignettes{
	height:100%;
	width:150px;
	position:absolute;
	left:0;
	top:0;
	z-index:3;
	/* min-height:678px; */
}

#triangle_plein p{
	right: 25px;
    top: -28px;
    position: absolute;
	font-family:qualy;
}

.content2, .content3, .content4{
	display:none;
}

@media screen and (max-width:1950px){
/* 	.webContent > img{
		width: 600px;
		margin-right: 10%;
		position: absolute;
		top: 200px;
	} */
	
	.webContent h2{
		font-size:2em;
	}
}

@media screen and (max-height:1210px), screen and (max-width:1675px){
	.webContent > div{
		top:621px;
		left:50%;
	}
	
	.webContent > img{
		top:150px;
		width:750px;
		margin:auto;
		min-width:140px;
	}
	
	#creationSite > div{
		top:700px;
	}
	
	.webContent h2{
		font-size:1.5em;
	}
	
	.webContent p{
		font-size:1em;
	}
	
	#zone_vignettes{
		width:130px;
	}
	
	#choixWeb img {
		width: 80px;
	}

	#choixWeb img:hover, #choixWeb .choix2DClicked {
		width: 90px!important;
	}
}

@media screen and (max-height:940px){
	
}

@media screen and (max-height:810px){
	.webContent > img {
		width: 500px;
	}
	
	.webContent > div {
		top: 515px;
	}
	
	#creationSite > div {
		top: 520px;
	}
}

@media screen and (max-width:1000px){
	#choixWeb img{
		width:50px;
	}
	#prestationWeb .webContent img:nth-child(2){
		top:15vh;
	}
	
	#zone_vignettes{
		width:80px;
	}
	
	#creationSite > div{
		top:inherit;
	}
	.webContent > div{
		position:relative;
		top:inherit;
		right:inherit;
		bottom:inherit;
		left:inherit;
		padding: 20px;
		width: 50%;
	}
	
	.webContent > img{
		width:50%;
	}
	
	#choixWeb img:hover, #choixWeb .choix2DClicked{
		width:60px!important;
	}
	
	#triangle_plein {
		border-top: 100px solid transparent;
		border-bottom: 100px solid transparent;
		border-left: 50px solid rgba(115,115,115,.8);
		right:10px;
		top: calc(50% - 100px);
	}
	
	#triangle_plein p {
		right: 6px;
		top: -20px;
		font-size:.7em;
	}
	
	.webContent p{
		line-height:1.3em;
	}
	
	.webContent{
		flex-direction:column;
	}
	
	.webContent > img:first-child{
		margin: 10px auto;
		position:relative;		
		top:inherit;
		right:inherit;
		bottom:inherit;
		left:inherit;
		
	}
}

/* Garder les boules de sélection centrées verticalement quand la fenêtre atteint la taille de l'image */
/* @media screen and (max-height:678px){	
	#choixWeb{
		justify-content:inherit;
		top:200px;
	}
} */

@media screen and (max-width:1000px) and (max-height:640px) and (min-width:620px){
	.webContent > img:first-child{
		max-width: 300px;
	}
	
	#creationSite > div {
		left: inherit;
		width: 60%;
	}
	
	#prestationWeb .webContent img:nth-child(2) {
		top: 9vh;
		width: 300px;
	}
}

@media screen and (max-width:620px){
	.webContent h2 {
		font-size: 1em;
	}
	
	.webContent p {
		font-size: .6em;
	}	
	
	#choixWeb{
		left: 5px;
	}
	
	#choixWeb img {
		width: 20px;
	}	
	
	#choixWeb img:hover, #choixWeb .choix2DClicked{
		width:30px!important;
	}	
	
	#prestationWeb .webContent img:nth-child(2){
		top:20vh;
	}
	
	#zone_vignettes {
		width: 40px;
	}	

	#triangle_plein p {
		right: 1px;
		top: -11px;
		font-size: .4em;
	}	
	
	#triangle_plein {
		border-top: 50px solid transparent;
		border-bottom: 50px solid transparent;
		border-left: 25px solid rgba(115,115,115,.8);
		top: calc(50% - 50px);
	}

	.webContent > div{
		width: 60%;
		padding: 10px;
	}
}