@import url('https://fonts.googleapis.com/css2?family=GFS+Didot&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda&display=swap');

*{
  box-sizing:border-box;
}

html {
    scroll-behavior: smooth;
}

/* Basic style */



body {
	 
	
  
	background-color: #FFFFFF;
	
	
	align-items: center;
	justify-content: center;
	
	flex-direction: column;
	display: grid;
	
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	
	margin-left: auto;
	margin-right: auto;
	
	
}	
	
	/*header*/




/*MAIN*/
header{
	
	padding-top: 40px;
	
	
}

	main{
			
background-color: #FFFFFF;
		
		text-align: center;
	width: 1200px;
		margin-left:auto;
		margin-right: auto;
		margin-top:50px;
		
		padding-bottom: 200px;
		
		
	}	



.close{

	
	cursor: pointer;
	border: none;
	background-color: #FFFFFF;
	font-size: 1.5em;
	color:#59656f;
		display: inline-block;
	margin-right: auto;
	margin-left: 49%;
	margin-bottom: 10px;
	border-radius:3px;
	margin-top: 0px;
	
}

.fronton{
	margin:0;
	padding-top: 0px;
}
.image-fronton{
	
	width:100%;
	margin-left: auto;
	margin-right: auto;

}

.px-transparent{
	
	width:30px;
}


.grid-titre{
	
	
	 display: grid;
  grid-template-rows: auto auto auto;
  grid-template-columns: auto ;
	margin-left: auto;
	margin-right: auto;
	
	
}




.titre{
	
	grid-row-start: 1;
	grid-row-end: 1;
	text-align: center;
	font-weight: lighter;
 color: #59656f;
	font-size: 1.2em;
	line-height: 55px;
}




 .soustitre{
	
		
	grid-row-start: 2;
	grid-row-end: 2;
	text-align: center;
	font-weight: 200;
 color: #59656f;
	font-size: 1em;
 
	
	
}

.legende{
	grid-row-start: 3;
	grid-row-end: 3;
	text-align: center;
	font-weight: 200;
 color: white;
	font-size: 1em;
	
}
	
.grid-fleche{
	
	text-align: center;
	 display: grid;
  grid-template-rows: auto ;
  grid-template-columns: auto auto;
	margin-left:auto;
	margin-right: auto;
	width: 30%;
}


.left{
	
	grid-column-start: 1;
	grid-column-end: 2;
	
	text-align: right;
	
}

.right{
	
	grid-column-start: 2;	
	grid-column-end: 3;
	text-align: left;
	
}

button {
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  outline:0;
}

svg {
  padding: 5px;
}

.arrow {
  cursor: pointer;
  
  
}


.left:hover polyline,
.left:focus polyline {
  stroke-width: 4;
}

.left:active polyline {
  stroke-width: 8;
  transition: all 100ms ease-in-out;
}

.right:hover polyline,
.right:focus polyline {
  stroke-width: 4;
}

.right:active polyline {
  stroke-width: 8;
  transition: all 100ms ease-in-out;
}

polyline {
  transition: all 250ms ease-in-out;
}
/*fin MAIN*/




/**Media Queries**/




@media screen and (max-width : 600px ){
	
	
	
	header{
	
	padding-top: 0px;
	
	
}
	
	main{
		
		width: 500px;
display: grid;
		margin-top:0px;
		
		background-color: #FFFFFF;
		padding: 50px 70px 500px 70px;
	}	
	
	
	.close{
		
		padding-top: 20px;
		margin-bottom: 20px;
		margin-left: 400px;
		
	}
	
	
	.grid-titre{
		margin-bottom: 0px;
		
		
	}
	
	
	.image-fronton{
		
		width:100%;
		margin-left: auto;
		margin-right: auto;
	}
	
.titre{
	text-align: center;
 
  font-weight: 200;
  font-size: 1.8em;  
  color: white;
  
  
}	

 .soustitre{
	
	text-align: center;
 
 font-weight: 200;
  font-size: 1.5em;  
	 line-height: 35px;
	 
  color: white;
  
	
}
	
	.legende{
		
		 font-size: 0.8em;  
		margin-bottom: 0px;
	}
	

.grid-fleche{
	
	padding-top: 0px;
	width: 450px;
	margin-bottom: 20px;
}

.left{
	
	grid-column-start: 1;
	grid-column-end: 1;
	text-align: right;
	padding-right: 20px;
}

.right{
	text-align: left;
	grid-column-start: 3;	
	grid-column-end: 3;
	padding-left: 20px;
}

	

	

 .content-footer {

        justify-content: center;

     padding: 20px 20px 20px 20px;

    }

    .bloc {

        flex-basis: auto;

        margin: 0px 70px;

    }
	
	
@media screen and (orientation: landscape) {
	
	
	main{
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	
header{
		
		width: 100%;
	}
}


@media screen and (max-width: 1000px) {



    .content-footer {

        max-width: 100%;

        flex-wrap: wrap;
		

    }

    .bloc {

        flex-basis: auto;

        margin: 20px 20px;

    }

body {
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
	}



}




@media screen and (max-width: 600px) {

   
    .bloc {

        flex-basis: 70%;

        /* margin: 10px; */

    }

    .footer-contact h3,

    .footer-services h3,

    .footer-schedule h3,

    .footer-medias h3 {

        padding-bottom: 5px;

    }



}
	
	
		
		
	}

/*Desktop View*/

@media screen and (min-width: 1024px) {
	
	body {
		
		
		max-width: 1400px;
		margin-left: auto;
		margin-right: auto;
	}
	

}