@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;600;700&display=swap');
/*font-family: 'Mulish', sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=Karla:wght@200;300;400;500;600;700&display=swap');
/*font-family: 'Karla', sans-serif;*/
@import url('https://fonts.googleapis.com/css2?family=Rammetto+One&display=swap');
/* font-family: 'Rammetto One', sans-serif; */
*
{
 margin: 0;
 padding: 0;
font-family: 'Karla', sans-serif;}




.contenuxcontact{
width: 100%;
height: auto;
margin-top: 50px;
/*background-color:#b01149;*/}

.illustationcontact{
width: 99%;
height:300px;
background-color:#AAA7A7;
background-image: url("../images/imagecontact.jpg");
background-size: cover;
border: solid 1px #fff;
margin: 0px auto	
}

.divtextcontact{
width: 80%;
height:200px;
position: relative;
top: 100px;
margin: 0px auto	
}

.divtextcontact p{
letter-spacing: 10px;
text-align: center;
color: #fff;
font-weight: bold;
text-shadow: 1px 1px #333;
}

.divtextcontact h1{
text-align: center;
font-family: 'Rammetto One', sans-serif;
font-size: 70px;
color: #fff;
text-shadow: 3px 3px #333;
}

.centeruxcontact{
width: 90%;
height: auto;
margin: 0px auto
/*background-color:#b01149;*/}

.infopux{
width: 40%;
height: auto;
margin: 0px auto;
text-align:center;
margin-top: 50px;
}

.infopux p{
font-weight: bold;
font-size: 14px;
}
.infopux h1{
font-family: 'Rammetto One', sans-serif; 
font-size: 35px;
}

.infopuxx{
width: 80%;
height: 600px;
margin: 0px auto;
margin-top: 50px;

display: flex;
}

.infopuxx1{
width: 240px;
height: 600px;

}

.divo{
width: 240px;
height: 200px;
background-color: #fff;
text-align: center;
}

.rond1{
width: 70px;
height: 70px;
margin: 0px auto;
border-radius: 50%;
background-color:#1CF876;
}

.rond1 i{
color: #fff;
font-size: 28px;
position: relative;
top: 20px;
}

.rond2{
width: 70px;
height: 70px;
margin: 0px auto;
border-radius: 50%;
background-color: #09D8F1;
}

.rond2 i{
color: #fff;
font-size: 28px;
position: relative;
top: 20px;
}

.divo h2{
font-family: 'Rammetto One', sans-serif;
font-size: 17px;
}

.infopuxx2{
width: 600px;
height:600px;
border-radius: 50%;

border:dashed 12px #FF22FF;
}

.maps{
width: 600px;
height:600px;
border-radius: 50%;
background-color: #FF88FF;

}

.infopuxx3{
width: 240px;
height: 600px;

}

.divo2{
width: 240px;
height: 200px;
background-color: #fff;
text-align: center;
}

.rond3{
width: 70px;
height: 70px;
margin: 0px auto;
border-radius: 50%;
background-color:#FA3C50;
}

.rond4{
width: 70px;
height: 70px;
margin: 0px auto;
border-radius: 50%;
background-color: #F8F77C;
}

.rond3 i{
color: #fff;
font-size: 28px;
position: relative;
top: 20px;
}

.rond4 i{
color: #fff;
font-size: 28px;
position: relative;
top: 20px;
}

.divo2 h2{
font-family: 'Rammetto One', sans-serif;
font-size: 17px;
}

.infopuxxs{
width: 80%;
height: 600px;
margin: 0px auto;
margin-top: 50px;


}

.titreposez{
width: 100%;
height: 80px;
margin: 0px auto;
}

.titreposez h1{
font-family: 'Rammetto One', sans-serif;
text-align: center;
}

.contenuform{
width: 100%;
height: 800px;
margin: 0px auto;

	
}

.divform1{
width: 100%;
height: 70px;

}

.unp1{
width: 30%;
height: 30px;
font-size: 18px;
padding: 8px;
border-radius: 3px;
border: 1px solid #7E7C7C;
outline: none;
}

.unp2{
width: 62%;
height: 30px;
font-size: 18px;
padding: 8px;
border-radius: 3px;
border: 1px solid #7E7C7C;
outline: none;
}

.divformtex{
width: 100%;
height: 200px;

}

.unp3{
width: 98%;
height: 150px;
font-size: 18px;
padding: 8px;
border-radius: 3px;
border: 1px solid #7E7C7C;
outline: none;
}

.unp4{
width: 12%;
height: 40px;
font-size: 16px;
border-radius: 2px;
color: #fff;
background-color: #56BE06;
border: 1px solid #7E7C7C;
outline: none;
}


@media only screen and (min-width: 481px) and (max-width: 1024px){
	
 *{
padding: 0;
margin: 0;}
	


	
}


@media only screen and (min-width: 200px) and (max-width: 480px){
	
*{
padding: 0;
margin: 0;}

	
.illustationcontact{
width: 99%;
height:400px;
background-color:#AAA7A7;
background-image: url("../images/imagecontact.jpg");
background-size: cover;
margin: 0px auto	
}
	
.divtextcontact{
width: 100%;
height:200px;
position: relative;
top: 100px;
margin: 0px auto	
}

.divtextcontact p{
letter-spacing: 10px;
text-align: center;
color: #fff;
font-weight: bold;
text-shadow: 1px 1px #333;
}

.divtextcontact h1{
text-align: center;
font-family: 'Rammetto One', sans-serif;
font-size: 40px;
color: #fff;
text-shadow: 3px 3px #333;
}

.centeruxcontact{
width: 90%;
height: auto;
margin: 0px auto
/*background-color:#b01149;*/}

.infopux{
width: 100%;
height: auto;
margin: 0px auto;
text-align:center;

}

.infopux p{
font-weight: bold;
font-size: 14px;
}
.infopux h1{
font-family: 'Rammetto One', sans-serif;
font-size: 18px;
}

.infopuxx{
width: 90%;
height: auto;
margin: 0px auto;

display: block;
}

.infopuxx1{
width: 98%;
height: auto;
margin: 0px auto;
}

.divo{
width: 100%;
height: 180px;
background-color: #f2f;
text-align: center;
margin: 0px auto;
border-radius: 5px;
}


.divo h2{
font-family: 'Rammetto One', sans-serif;
font-size: 16px;
}

.infopuxx2{
width: 250px;
height:250px;
border-radius: 50%;
margin: 0px auto;
border:dashed 8px #FF22FF;
position: relative;
top: 60px;
left: -13px;
}

.maps{
width: 250px;
height:250px;
border-radius: 50%;
background-color: #FF88FF;

}

.infopuxx3{
width: 100%;
height: 600px;

}

.divo2{
width: 100%;
height: 180px;
background-color: #f2f;
text-align: center;
margin: 0px auto;
border-radius: 5px;
}

.divo2 h2{
font-family: 'Rammetto One', sans-serif;
font-size: 17px;
}

.infopuxxs{
width: 90%;
height: auto;
margin: 0px auto;
margin-top: 50px;


}

.titreposez{
width: 100%;
height: 60px;
margin: 0px auto;
}

.titreposez h1{
font-family: 'Rammetto One', sans-serif;
text-align: center;
font-size: 18px;
}

.contenuform{
width: 100%;
height: 800px;
margin: 0px auto;

	
}

.divform1{
width: 100%;
height: 70px;

}

.unp1{
width: 40%;
height: 30px;
font-size: 18px;
padding: 8px;
border-radius: 3px;
border: 1px solid #7E7C7C;
outline: none;
}

.unp2{
width: 100%;
height: 30px;
font-size: 18px;
padding: 8px;
border-radius: 3px;
border: 1px solid #7E7C7C;
outline: none;
}

.divformtex{
width: 100%;
height: 200px;

}

.unp3{
width: 98%;
height: 150px;
font-size: 18px;
padding: 8px;
border-radius: 3px;
border: 1px solid #7E7C7C;
outline: none;
}

.unp4{
width: 60%;
height: 40px;
font-size: 16px;
border-radius: 2px;
color: #fff;
background-color: #56BE06;
border: 1px solid #7E7C7C;
outline: none;
}
}