@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Rammetto+One&display=swap');
/* font-family: 'Rammetto One', sans-serif; */

/*font-family: 'Mulish', sans-serif;*/


 *{
padding: 0;
margin: 0;}
	
.bounceTo{
  top: 0px;}


.zonePresentation{
width: 100%;
height:auto;}

.PresentationCenter{
width: 70%;
height:500px;
margin: 0px auto;}


.titrePre{
width: 85%;
height:50px;
margin: 0px auto;}

.titrePre h1{
position: relative;
left: 10px;
color: #FB144E;
font-family: "Rowdies", sans-serif;
}
.presentationSite{
width: 85%;
height:500px;
display: flex;
justify-content: space-between;
margin: 0px auto;}


.intropres{
width: 600px;
height: auto;
}

.intropres p{
text-align: justify;
line-height: 2;
font-size: 17px;
color:#313030;
}

.btnpetit{
width: 150px;
height: 45px;
top: 53%;
left: 0;
border: none;
outline: none;
background-color:rgb(17, 31, 40);
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
transition: all 0.5s ease;
cursor: pointer;
color:white;
text-transform: uppercase;
}


.btnpetit:hover
{
background-color: #FB144E;
animation: move_button 1s;
 animation-fill-mode: forwards;
}


.imgPresentation{
width: 300px;
height: 400px;
background-color: crimson;
position: relative;
bottom: 80px;
border: solid 3px #eee;
}

.untroo{
width: 100%;
height:  100%;
}



@media only screen and (min-width: 481px) and (max-width: 1024px){

.zonePresentation{
width: 100%;
height:auto;
/*background-color:#b01149;*/}

.PresentationCenter{
width: 80%;
height:500px;
margin: 0px auto;}


.titrePre{
width: 100%;
height:50px;}

.titrePre h1{
position: relative;
left: 10px;
color: #FB144E;

}

.intropres p{
text-align: justify;
line-height: 2;
font-size: 17px;
color:#313030;
}

.btnpetit{
width: 150px;
height: 45px;
top: 53%;
left: 0;
border: none;
outline: none;
background-color:rgb(17, 31, 40);
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
transition: all 0.5s ease;
cursor: pointer;
color:white;
text-transform: uppercase;
}


.btnpetit:hover
{
background-color: #FB144E;
animation: move_button 1s;
 animation-fill-mode: forwards;
}



}
@media only screen and (min-width: 200px) and (max-width: 480px){
	
*{
padding: 0;
margin: 0;}
	
.PresentationCenter{
width: 90%;
height:auto;
margin: 0px auto;}


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

.titrePre h1{
position: relative;
left: 10px;
color: #FB144E;
font-family: "Rowdies", sans-serif;
}
.presentationSite{
width: 100%;
height:auto;
display: block;
justify-content: space-between;
margin: 0px auto;}


.intropres{
width: 100%;
height: auto;
}

.intropres p{
text-align: justify;
line-height: 2;
font-size: 16px;
color:#313030;
}

.btnpetit{
width: 150px;
height: 45px;
position: relative;
bottom: 40px;
left: 0;
border: none;
outline: none;
background-color:rgb(17, 31, 40);
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
transition: all 0.5s ease;
cursor: pointer;
color:white;
text-transform: uppercase;
}


.btnpetit:hover
{
background-color: #FB144E;
animation: move_button 1s;
 animation-fill-mode: forwards;
}


.imgPresentation{
width: 80%;
height: 80%;
background-color: crimson;
margin: 0px auto;
border: solid 3px #eee;
}

.untroo{
width: 100%;
height:  100%;
}
	
	


}