@font-face {
font-family: "Petit Format Script";
src: url("../fonts/PetitFormalScript-Regular.ttf");
}

body{
	font-family:Calibri;
	margin:0;
}

h2, h3 {
	font-family: "Petit Format Script"; 
}

h3{
	margin-top:3.2rem;
	display:inline-block;
}

a{
	color:white;
	text-decoration: none;
}

#conteneur a:hover{
	opacity:0.5;
	transition:0.5s; 
}

main{
	background-image: linear-gradient(to right top, #bbc4d3, #bbcddd, #bad7e4, #bbe1ea, #bdeaec);
}

#conteneur{
	width:55%;
	background-color:white;
	margin: 0 auto;
	padding:1rem 4rem;
	padding-bottom:3rem;
	/* Pour centrer les images */
}

#conteneurindex{
	width:55%;
	background-color:white;
	margin: 0 auto;
	padding:1rem 4rem;
	padding-bottom:3rem;
	/* Pour centrer les images */
}

.blue{
	color:#66a0c1;
}

#menuclicker{
	color:white;
	text-transform:uppercase;
	font-weight:bold;
	padding:0.5rem 1rem;
	border-bottom:2px solid white;
	display:none;
}

#conteneur p{
	/* Pour aligner le texte à gauche */
	text-align:left;
	margin:1rem 1rem;
}

#conteneur ul{
	/* Pour aligner la liste à gauche */
	text-align:left;
}

#conteneur strong{
	display:block;
	padding-bottom:7px;
}

.image{
	height:20rem;
	border-radius:10%;
}

.center{
	text-align:center;
}

.round{
	height:20rem;
	border-radius:100%;
}

header{
	height:20rem;
	text-align:center;
	padding:4rem 0rem;
	background-image: url(../img/bg_spring.jpg);
	background-size: 100%;
	background-position-y: -19rem;
}

header img{
	height:100%;
	background-color:rgba(255,255,255,0.85);
	box-shadow: 0px 0px 40px 40px rgba(255,255,255,0.85);
	border-radius:100%;
	
}

footer img{
	height:10rem;
	background-color:rgba(255,255,255,0.85);
	box-shadow: 0px 0px 40px 40px rgba(255,255,255,0.85);
	border-radius:100%;
	padding:1rem 0;
}

nav{
	margin-bottom:0;
	width:100%;
	background-color:#62ad76;
	top:0;
	position:sticky;
	z-index:1;
}

nav ul{
	text-align:center;
	margin:0;
}

nav ul li:first-child{
	border-left:2px solid white;
	padding-left:3.5rem;
}

nav ul li{
	display:inline-block;
	text-align:center;
	font-weight:bold;
	text-transform:uppercase;
	color:white;
	padding:1rem 2rem;
	margin:0rem 1rem; 
	border-right:2px solid white;
	padding-right:3.5rem;
}

footer {
	clear:both;
	width:100%;
	background-color:#62ad76;
}

footer div{
	display:inline-block;
	text-align:left;
	color:white;
	margin-top:2rem;
	margin-bottom:0.5rem;
	margin-left:2rem;
	padding-left:5rem;
	border-left:1px solid white;
}

table{
	margin:0 auto;
	border-collapse:collapse;
	margin-top:2.5rem;
}

td{
	border:2px solid grey;
	padding:0.5rem 1rem;
}

form{
	margin:0 auto;
	text-align:center;
	clear:both;
}

input, textarea{
	margin-bottom:1rem;
}

#computermode {
	text-align:center;
	margin-top:3rem;
	/*position: absolute;
	top: 92.5%;
	left: 50%;*/
  /* bring your own prefixes */
	/*transform: translate(-50%, -50%);*/
}

#mobilemode{
	display:none;
}

#mobilemode img{
	height:11rem;
	border-radius: 100%;
	border:5px solid orange;
}

#np{
	position:absolute;
	transform:translate(-48.5%, 4%);
}

#rp{
	position:absolute;
	transform:translate(55%, 52%);
}

#ab{
	position:absolute;
	transform:translate(-150%, 52%);
}

#bt{
	position:absolute;
	transform:translate(-150%, 220%);
}

#me{
	position:absolute;
	transform:translate(55%, 220%);
}

#ct{
	position:absolute;
	transform:translate(-48.5%, 265%);
}

#computermode img{
	height:11rem;
	border-radius: 100%;
	border:5px solid orange;
}

.marginy{
	margin:2rem 0;
}

.float{
	width:65%;
	float:left;
}

#floatbt{
	margin-top:5rem;
	float:left;
}

.right{
	text-align:right;
}

.left{
	text-align:left;
}

.return{
	background-color:#62ad76;
	padding:1rem 1rem;
	border-radius:50%;
}

.separator{
	height:20rem;
	margin:3rem 0;
	clear:both;
}

textarea{
	background-color:#edf4ff;
}

input:not(:last-child){
	border-radius:10%;
	height:1.5rem;
	background-color:#edf4ff;
}

input[type="button"]{
	background-color:#62ad76;
	padding:1rem 1rem;
	border-radius:50%;
	color:white;
	border:none;
	font-family: "Petit Format Script"; 
	font-size:1rem;
	font-weight:bold;
}

input[type="button"]:hover{
	color: rgba(255,255,255, 0.5);
	cursor:pointer;
	transition:0.5s;
}

#tableprix{
	border:2px solid grey;
}

#tableprix a{
	color:black;
}

#tableprix td{
	border:none;
}

#tableprix td:first-child{
	font-weight:bold;
}

#tableprix td:last-child{
	text-align:center;
}

#tableprix tr:first-child{
	border-bottom:2px solid grey;
	background-color:#62ad76;
	color:white;
	font-weight:bold;
	font-size:1rem;
}

#tableprix tr:not(:first-child) td{
	border-right:2px solid grey;
}

#tableprix tr:not(:first-child):hover{
	background-color:#eaefe6;
}

.idcard{
	width:90%;
	margin:3rem auto;
}

#idphoto{
	float:left;
	height:14rem;
	border-radius:10%;
}

.idcard h3{
	margin-top:0;
	margin-left:2rem;
	margin-bottom:0.5rem;
}

.idcard article{
	float:left;
	width:75%;
	font-size:1rem;
}

.idcard article p{
	padding-left:1rem;
}

#hiddentext{
	background-image:url(../img/fdv.png);
	background-repeat:no-repeat;
	background-size:35rem;
	padding:17rem 8rem;
	background-position:center;
	color:brown;
	font-size:3rem;
	padding-top:15rem;
	text-shadow:
   -3px -3px 10px white,  
    3px -3px 10px white,
    -3px 1px 10px white,
     3px 3px 10px white;
}

#contact{
	clear:both;
	margin-bottom:1.5rem;
}

.contactlabel{ 
	color:white;
	font-weight:bold;
	font-size:1.5rem;
	border:2px solid green;
	background-color: #62ad76;
	display:block;
	padding:0.5rem;
	width:20rem;
	border-radius:5px;
	margin:0 auto;
	margin-bottom:0.35rem;
}	

#infos h3{
	margin-top:1.5rem;
	margin-bottom:0.45rem;
}

#flexbox{
	display:flex;
	flex-direction:row;
	flex-wrap: wrap;
	justify-content:center;
	height:100%;
}

#flexbox img{
	width: 15rem;
	margin:1rem;
	align-self:center;
}

/* RESPONSIVE DESIGN */

@media screen and (max-width:800px){
	#mobilemode{
		display:block;
		text-align: center;
	}

	#computermode{
		display:none;
	}

	#hiddentext{
		display:none;
	}

	.idcard img{
		display:block;
		text-align: center;
		margin:0 auto;
		padding-bottom:2rem;
	}

	#idphoto{
		float:none;
	}

	nav ul li{
		display:block;
	}

	nav ul li:first-child{
		border-left:none;
	}

	.round{
		height:10rem;
	}

	#conteneur article{
		padding:none;
		width:auto;
	}

	footer div{
		margin-left:0rem;
		padding-left:2rem;
	}

	.contactlabel{
		width:75%;
		font-size:1.2rem;
	}

	.separator{
		height:12rem;
	}

	#menuclicker{
		display:block;
	}

	nav ul{
		display:none;
		padding-left:0px;
		border-left:2px solid white;
	}

	nav ul li{
		padding-left:0px;
	}
}

@media screen and (max-width:1010px){
	header{
		background-position-y: 0rem;
		height:15rem;
		padding:2rem 0rem;
	}

	#conteneur{
		width:100%;
		padding:1rem 0rem;
	}

	#conteneur article{
		width:90%;
		margin:0 auto;
	}

	#conteneurindex{
		width:100%;
		padding:1rem 0rem;
	}

	nav ul li:first-child {
		padding-left:1.5rem;
	}

	nav ul li{
		padding-left:0rem;
		padding-right:0rem;
		padding:0.5rem 1.5rem;
		margin:0rem;
	}

	#contact{
		padding:0 2rem;
	}

}

@media screen and (min-width: 1011px) and (max-width:1599px) {
	
	#conteneur{
		width:75%;
	}
	
	#conteneurindex{
		width:75%;
	}

	#hiddentext{
		font-size:2rem;
		display:block;
	}	

	nav ul li:first-child {
		padding-left:1.5rem;
	}

	nav ul li{
		padding-left:0rem;
		padding-right:0rem;
		padding:0.5rem 1.5rem;
		margin:0rem;
	}

	#idphoto{
		height:10rem;
	}
}

@media screen and (max-width:407px){
	header{
		height:10rem;
	}
}