/*  code générique (couleurs, polices, survol...) et la mise en page pour ordinateur */

body
{
   min-width: 320px;
   margin: auto; /* Pour centrer notre page */
   margin-top: 2px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
   margin-bottom: 20px;    /* Idem pour le bas du navigateur */
   background-color: rgb(213,204,240);
   font-family: "Microsoft sans serif";
   font-size: medium;
   color: black;   
}
  
   /*  code pour les Modals */
.myBtn
 {font-size: 120%;
 margin-right: 20px;
 font-weight: bold;
 border:2px solid #888;
 padding: 2px;
  }
 
 /* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: relative; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 10px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 10px;
  border: 1px solid #888;
  width: 50%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
 
 
  
#langue
{text-align: center;}
	
#selected
{ background-color: rgb(174,158,226);} 
 
 
#bloc_page
{
  margin: auto;
 }

#bloc_page img
 {max-width: 100%;
 border: 2px solid black;
   border-radius:10px;
 }

  
.gras
{
   font-weight: bold;
   }
   
a /* Tous les liens dans le corps */
{
   color: black;
   text-decoration: none;
}

   a:hover /* Quand on pointe sur un lien dans le corps */
{
  background-color: rgb(174,158,226);
  color: black;
}
/* Quelques effets sur les listes */
.square
{   
  list-style-type: square;
}
  
/* L'en-tête */

header
{
   width: 98%;
   margin: auto;
   background-color: rgb(231,226,246);
   color: black;
   border: 2px solid black;
   border-radius:10px;
   display: flex;
   justify-content: space-around;
   padding: 5px;
   margin-bottom: 5px;
      }

	  .el_header:nth-child(1)
	  {order: 1;}
	  .el_header:nth-child(2)
	  {order: 2;}
	  .el_header:nth-child(3)
	  {order: 3;}
	  
	  /* boite titre avec le titre et les boites logo et banner */
   #titre
{
	
	display: flex;
	flex-direction: column;
    align-items: center;
	margin: auto;
	justify-content: center;
	text-align: center;
	padding: 5px;
	}
	
	h1
	{   
  text-align: center;
  text-decoration: underline;
  font-size: x-large;
  font-weight: bold;
    }
		  /* boite logo et les boites logo et banner */
	
	.el_titre:nth-child(1)
	  {order: 1;}
	  
	  .el_titre:nth-child(2)
	  {order: 2;}
	
	#taille_pol
	{font-size: 150%;
				}
	
		h3
	{   
  text-align: center;
  font-size: 100%;
  margin: 0px;
    }
	
		h4
	{   
  text-align: center;
  font-size: 120%;
  margin: 0px;
    }
	
 #logo_banner
{
	display: flex;
	flex-direction: row;
    align-items: center;
	margin: 0px;
		}
	
	#logo_banner img
	{
	border: none;
  
	}
	
#logo_pch
{
    border-color: rgb(197,190,151);
	display: flex;
}
	
#banner
{
  	display: flex;
	  }
	  
.el_logo-ban:nth-child(1)
	  {order: 1;}
.el_logo_ban:nth-child(2)
	  {order: 2;}

	
#photo1
{
      display: flex;
      }	


#photo3
{
     display: flex;
       	}
	

/*SECTION*/

section
{
   width: 98%;
   margin: auto;
   background-color: rgb(231,226,246);
   color: black;
   border: 2px solid black;
   border-radius:10px;
   display: flex;
   flex-direction: row;
   justify-content: center;
   flex-wrap: wrap;
    padding: 5px;
   margin-bottom: 5px;
       }

	
#Box1
 {
	width: 100%;
	border: 2px solid black;
	 border-radius:10px;
	 background-color: rgb(213,204,240);
	 margin: auto;
	 margin-bottom: 5px;
	 padding: 5px;
	 display: flex;
	 flex-direction: column;
	 	 	 }

#Box1 strong /* les elements strong de la boite 1*/
{   
  font-weight: normal;
    }
	  
	  
#Box1 h2 /* le titre de la boite 1*/
{   
  text-align: center;
  text-decoration: underline;
  font-size: x-large;
  font-weight: bold;
    }

#Box1 ul /* Toutes les listes à puces de la boite 1 */
{
   padding-left: 50px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
   margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
   font-size:x-large;
}

.Box_coustVilla
{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	margin-bottom: 5px;
	
}

.Box_coust
{
	display: flex;
	width: 100%;
	margin: auto;
	flex-direction: column;
	justify-content: flex-start;
	margin-right: 10px;	
	}

.clear
{
color: rgb(213,204,240);	
}

	
 
#Box2
 {
	width: 100%;
	margin: auto;
	margin-bottom: 5px;
	border: 2px solid black;
	border-radius:10px;
	background-color: rgb(213,204,240);
	display: flex;
	justify-content: center;
	text-align: center;	
	}
     
  #Box2 h2
{
    font-size: x-large;
	padding-top:0px;
}
	
	
	
	
#Box2-1
 {
	width: 100%;
	margin: auto;
	margin-bottom: 5px;
	border: 2px solid black;
	border-radius:10px;
	background-color: rgb(213,204,240);
	display: flex;
	justify-content: center;
	text-align: center;	
	}	

	
	#photo4 /* Photo BB Coustellet */
{
   width: 70%;
   margin: auto;
   margin-bottom: 5px;
   display: flex;
   align-items: center;
   
}
	
#Box4/* Formatage Boite Liste BB */
 {
	 display: flex;
	 flex-direction: column;
	 margin: auto;
	 margin-bottom: 5px;
	 width: 100%;	 
	 padding-top: 0px;
	 padding-bottom: 10px;
	 border: 2px solid black;
	 border-radius:10px;
	 background-color: rgb(213,204,240);
	 justify-content: center;
	 }

#Box4 strong /* les elements strong de la boite 4*/
{   
  font-weight: normal;
    }

#Box4 h2 /* le titre de la boite 4*/
{   
  text-align: center;
  text-decoration: underline;
  font-size: x-large;
  }

#Box4 ul /* Toutes les listes à puces de la boite 4 */
{
  padding-left: 50px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
   margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
   font-size:x-large;
   font-weight: normal;
}
	

	#photo6 /* Flash BB discount */
{
   width: 70%;
   margin: auto;
   margin-bottom: 5px;
   display: flex;
   justify-content: center;
   
}	
	
#photo6 img/* Flash BB discount */
{
    border: none;
   
}	

	#photo7 /* Flash Villa discount */
{
   width: 70%;
   margin: auto;
   margin-bottom: 5px;
   display: flex;
   justify-content: center;
   
   
}	
			
	
	#flashAsterix
	{
width: 150%;   
   display: flex;
   justify-content: center;
     
}	
	
.Box_villa
{
	display: flex;
	width: 100%;
	margin: auto;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	
}

	
.Specoffgras
{
	font-weight: bold;
animation: blinker 1s linear infinite;
}
	
	
.SpecOff
{color: red;
animation: blinker 1s linear infinite;
}
/* The element to apply the animation to */
@keyframes blinker {  
  50% { opacity: 0; }
}
	
#Box3
 {
	display: flex;
	width: 100%;
	margin: auto;
	margin-bottom: 5px;
	border: 2px solid black;
	border-radius:10px;
	background-color: rgb(213,204,240);
	text-align: center;
	justify-content: center;
			 }
     
  #Box3 h2
{
    font-size: x-large;
	padding-top:0px;
}
	
#Box3-1
 {
	display: flex;
	width: 100%;
	margin: auto;
	margin-bottom: 5px;
	border: 2px solid black;
	border-radius:10px;
	background-color: rgb(213,204,240);
	text-align: center;
	justify-content: center;
	padding: 9px;
			 }

 #Box3-1 strong
 { font-weight: normal;}  
	
#Box2-1 strong
 { font-weight: normal;}  
	
	#photo5 /* Photo Villa */
{
   width: 70%;
   margin: auto;
   margin-bottom: 5px;
   display: flex;
   
   
}
	
#Box5/* Formatage Boite Liste Villa */
 {
	 margin-bottom: 5px;
	 width: 100%;	 
	 padding-top: 0px;
	 padding-bottom: 15px;
	 border: 2px solid black;
	 border-radius:10px;
	 background-color: rgb(213,204,240);
	 text-align: left;
	 display: flex;
	 flex-direction: column;

	 }

#Box5 strong /* les elements strong de la boite 5*/
{   
  font-weight: normal;
    }

#Box5 h2 /* le titre de la boite 5*/
{   
  text-align: center;
  text-decoration: underline;
  font-size: x-large;
  }

#Box5 ul /* Toutes les listes à puces de la boite 5 */
{
  padding-left: 50px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
   margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
   font-size:x-large;
   font-weight: normal;
}

.Box_avail /* Formatage Boite Availability */
 {
	  display: flex;
	  justify-content: center;
	 align-items: center;
	 width: 50%;
	 margin:auto;
	 margin-bottom: 5px;
	 border-radius:10px;
	 border: 2px solid black;
	 background-color:rgb(174,158,226);
	 padding: 5px;
	 font-size: x-large;
	 font-weight: bold;
	 text-align: center;
	
	 }
.Box_avail a:hover /* Quand on pointe sur un lien du menu */
{
   color: black;
   background-color:rgb(127,191,153);
}
 

#Box8 /* Formatage Boite Comparison */
 {
	 justify-content: center;
	 align-items: center;
	 border-radius:10px;
	 border: 2px solid black;
	 background-color:rgb(127,191,153);
	 padding: 5px;
	 font-size: x-large;
	 font-weight: bold;
	 text-align: center;
	 width: 80%;
	 margin: auto;
	 margin-bottom: 5px;
	display: flex;
 }
#Box8 a:hover /* Quand on pointe sur un lien du menu */
{
   color: black;
   background-color:rgb(127,191,153);
}
 
#Box8 strong /* les elements strong de la boite 5*/
{   
  font-weight: bold;
    }
	
/*
#Box9 /* Formatage Boite Reviews */
 /*{
	 justify-content: center;
	 border-radius:10px;
	 border: 2px solid black;
	 background-color:rgb(127,191,153);
	 font-size: x-large;
	 font-weight: bold;
	 text-align: center;
	 width: 85%;
	 padding: 5px;
	 margin:auto;
	 margin-bottom: 5px;
	 margin-top: 10px;
	 display: flex;
	 
	  }
	  
.Box9 a:hover /* Quand on pointe sur un lien du menu */
/*{
   color: black;
   background-color:rgb(127,191,153);
}

 
.Box9 strong /* les elements strong de la boite 5*/
/*{   
  font-weight: bold;
    }/*
	
 /* Formatage des Boite Website */   
  #BoxWeb
  {
	display: flex;
	width: 100%;
	margin: auto;
	margin-left: 0px;
	margin-bottom: 5px;
	flex-direction: row;
	justify-content: space-around;
	  }


/* Formatage Boite Website BB */  
  
#WebBB
 {
	display: flex;
	justify-content: center;
	text-align: center;
	width: 100%;
	margin-right: 10px;	
	border: 2px solid black;
	background-color:rgb(197,190,151);
	border-radius:10px;
	font-weight: bold;
	font-size: x-large;
	padding: 10px;
	-webkit-animation-name: example1; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
    animation-name: example1;
    animation-duration: 1s;
	 animation-iteration-count: infinite;
	 }
	    
/* The element to apply the animation to */
	 
 @keyframes example1 {
    from {background-color: rgb(197,190,151);}
    to {background-color: rgb(174,158,226);}
}
   
#WebBB a:hover /* Quand on pointe sur un lien du menu */
{
  background-color: rgb(170,157,125);
   color: black;
}

 #WebBB h2
 {font-size: x-large;}
 
 
  /* Formatage Boite Website Villa */
#WebVilla
 {
	display: flex;
	justify-content: center;
	text-align: center;
	width: 100%;
	margin: auto;
	border: 2px solid black;
	 background-color:rgb(197,190,151);
	font-weight: bold;
	font-size: x-large;
	padding: 10px;	
	border-radius:10px;
	 -webkit-animation-name: example1; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
    animation-name: example1;
    animation-duration: 1s;
	 animation-iteration-count: infinite;
	   }	

/* The element to apply the animation to */	   
  @keyframes example2 {
    from {background-color:  rgb(193,225,206);}
    to {background-color: rgb(174,158,226);}
}
 
#WebVilla a:hover /* Quand on pointe sur un lien du menu */
{
 background-color: rgb(127,191,153);
   color: black;
}
	
#WebVilla h2
 {font-size: x-large;}
 
	
blockquote .italique
{
font-style: italic;
}

	
	
blockquote strong
{
font-weight: normal;
}


footer
{
   text-align: center;
   width: 99%;
   margin: auto;
   color: black;
   background-color: rgb(231,226,246);
   border: 2px solid black;
   border-radius:10px;
   display: flex;
   justify-content: center;
   
   }	
	#lien_email
  {
  background-color: rgb(213,204,240);}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX	*/
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */	
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */	
/* IPad Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) 
  {

 /*  code pour les Modals */
 .myBtn
 {font-size: 80%;
  }
 
 /* The Modal (background) */
.modal {
   padding-top: 60px; /* Location of the box */
 }

/* Modal Content */
.modal-content {
   font-size: 80%;
}

/* L'en-tête */

header
{
   width: 98%;
   margin: auto;
   background-color: rgb(231,226,246);
   color: black;
   border: 2px solid black;
   border-radius:10px;
   display: flex;
   justify-content: space-around;
   padding: 5px;
   margin-bottom: 5px;
      }

	  
#header img
 {max-width: 70%;
 max-height: 70%;
 border: 2px solid black;
   border-radius:10px;
   margin-top: 10px;
 }

	  
	  .el_header:nth-child(1)
	  {order: 1;}
	  .el_header:nth-child(2)
	  {order: 2;}
	  .el_header:nth-child(3)
	  {order: 3;}
	  
	  /* boite titre avec le titre et les boites logo et banner */
   #titre
{
	
	display: flex;
	flex-direction: column;
    align-items: center;
	margin: auto;
	justify-content: center;
	text-align: center;
	padding: 10px;
	}

	
	h1
	{
		margin: 0px;
		font-size: 150%;
				}
		  /* boite logo et les boites logo et banner */
	
	.el_titre:nth-child(1)
	  {order: 1;}
	  
	  .el_titre:nth-child(2)
	  {order: 2;}
	
	
 #logo_banner
{
	display: flex;
	flex-direction: row;
    align-items: center;
	margin: 0px;
		}
	
	#logo_banner img
	{
	border: none;
     display: flex;
      
	}
	
#logo_pch
{
    border-color: rgb(197,190,151);
	display: flex;
}
	
#banner
{
  	display: flex;
	  }
	  
.el_logo-ban:nth-child(1)
	  {order: 1;}
.el_logo_ban:nth-child(2)
	  {order: 2;}

	
#photo1
{
      display: flex;
	  height: 70%;
	  min-width: auto;
	  margin-top: 10px;
      }	


#photo3
{
  display: flex;
	  height: 70%;
	  min-width: auto;     
 margin-top: 10px;	  }
	
#TA_cdsratingsonlynarrow28
{
  display: flex;
	  height: 50%;
	  width: 50%;
	        	}
				
#logo_pch
{
    display: flex;
	  height: 40%;
	  width: 180%;
	  position: relative;
	  left: -70px;
	        	}

section
{width: 98%;}

	h1
	{
		font-size: 100%;
	}
	
	#Box1
{width: 98%;}
		
	#Box1 h2 /* le titre de la boite 1*/
{   
  font-size: 100%;
      }

#Box1 ul /* Toutes les listes à puces de la boite 1 */
{
   font-size:100%;
}
	
  #Box2 h2
{
    font-size: 100%;
}
	
 #Box4 h2 /* le titre de la boite 4*/
{   
  font-size: 100%;
  }

#Box4 ul /* Toutes les listes à puces de la boite 4 */
{
  padding-left: 30px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 30 pixels */
   font-size:100%;
}

     
  #Box3 h2
{
    font-size: 100%;
}
 
  #Box3-1  /* makes the box bigger */
{
    width: 94%;
}
 
 #Box3-1  /* makes the box bigger */
{
    padding: 10px;
}

#Box5 /* le titre de la boite 5*/
{   
  padding-top: 30px;
  padding-bottom: 30px;
  }
	

#Box5 h2 /* le titre de la boite 5*/
{   
  font-size: 100%;
  }

#Box5 ul /* Toutes les listes à puces de la boite 5 */
{
  padding-left: 30px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 30 pixels */
     font-size:100%;
}


#Box8 /* Formatage Boite Comparison */
 {
	 font-size: 100%;
	 padding: 10px;
	   
 }

#Box2-1 h4
 {
	font-size: 100%;
	 }
	
#Box3-1 h4
 {
	font-size: 100%;
	 }	
	
	
  /* Formatage Boite Website Villa */
#WebVilla
 {
	width: 98%;
		}


#WebVilla h2
 {
	font-size: 80%;
		}


/*#Box9 /* Formatage Boite Reviews */
/* {
	 font-size: 100%;
		  }
	*/  
	  
/* Formatage Boite Website BB */  
   #WebBB
 {
	width: 98%;
	 }
   
   
#WebBB h2
 {
	font-size: 80%;
	 }
	
  /* Formatage Boite Website Villa */
#WebVilla h2
 {
	font-size: 80%;
		}
	.Box_avail
 {
	font-size: 90%;
	 }	

footer
{
   font-size: 80%;  
   }			
		
		
  }
 
 /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
 /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
 /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/* IPhone LANDSCAPE*/ 
 
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (orientation: landscape)
  
  {

  header
{
   width: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
            }
 	
	header
{
   width: 95%;
} 
  
    #titre
{
	width: 100%;
	margin: auto;
	}
	
	h1
	{
		font-size: 150%;
		}
		
	#photo1
{
  margin: auto;
      
   }	


#photo3
{
   margin: auto;
       	}

	section
{
   width: 95%;
}
 
 /*  code pour les Modals */
 .myBtn
 {font-size: 65%;
   }
 
 /* The Modal (background) */
.modal {
	 position: relative; /* Stay in place */
   padding-top: 20px; /* Location of the box */
 }

/* Modal Content */
.modal-content {
   font-size: 80%;
}

#Box1 
{   
  width:98%;
  align-items: center;
  padding-left: 5px;

  }

#photo4
{
    align-items: center;
       	}

	
#Box1 h2 /* le titre de la boite 1*/
{   
  font-size: 100%;
      }

#Box1 ul /* Toutes les listes à puces de la boite 1 */
{
   font-size:80%;
   padding-left: 20px;
}
 
  #Box2 h2
{
    font-size: 90%;
}

#Box2-1 h4
{
    font-size: 90%;
}


#Box4 h2 /* le titre de la boite 4*/
{   
    font-size:90%;
  }

#Box4 ul /* Toutes les listes à puces de la boite 4 */
{
  padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
   font-size:90%;
 }
	
     
  #Box3 h2
{
    font-size: 90%;
	}

#Box3-1
{
	padding-top: 9px;
	padding-bottom: 9px;
	width: 80%;
}

#Box3-1 h4
{
    font-size: 90%;
	}

#Box5 
{   
   width: 90%;
  }

#Box5 h2 /* le titre de la boite 5*/
{   
   font-size: 90%;
  }

#Box5 ul /* Toutes les listes à puces de la boite 5 */
{
  padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
   font-size:90%;
  
}
 
 	.Box_avail
 {
	font-size: 100%;
	 }	

#Box8 /* Formatage Boite Comparison */
 {
	 font-size: 90%;
	 width: 70%;
 }
 
#Box9 /* Formatage Boite Reviews */
 {
	 font-size: 90%;
	 width: 98%;	 
	 }
	  
	/* Formatage des Boite Website */   


/* Formatage Boite Website BB */  
  
  #WebBB
 {
	width: 90%;
		 }
	     
  /* Formatage Boite Website Villa */
#WebVilla
 {
	width: 80%;
	  }	
   
#WebBB h2
 {
	font-size: 70%;
	width: 50%;
		 }
	    
 
  /* Formatage Boite Website Villa */
#WebVilla h2
 {
	font-size: 70%;
	width: 50%;
	  }	

	footer
{
   width: 98%;
   font-size: 90%;  
   }			   
	   
	   
	   
	}
  
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
 /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
 /* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
/* IPhone PORTRAIT*/ 
 
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (orientation: portrait)
  
  {

  header
{
   width: 100%;
   flex-direction: column;
   justify-content: center;
   align-items: center;
            }
  

  /*  code pour les Modals */
 .myBtn
 {width: 100%;
font-size: 65%;
margin-right: 0px;
margin-left: 40px;
    }
 
 /* The Modal (background) */
.modal {
   padding-top: 10px; /* Location of the box */
  }

/* Modal Content */
.modal-content {
  width: 70%;
  font-size: 70%;
}

header
{width: 95%;}
  
    #titre
{
	width: 90%;
	margin: auto;
	}
	
	h1
	{
		font-size: 120%;
		}
		
	#photo1
{
  margin: auto;
  width: 90%;
      
   }	


#photo3
{
   margin: auto;
    width: 90%;
       	}

	
	section
{
   width: 95%;
}

#Box1 
{   
  width:97%;
  align-items: center;
  padding-left: 5px;

  }
#banner img
{
display: none;
}
	
#Box1 h2 /* le titre de la boite 1*/
{   
  font-size: 80%;
      }

#Box1 ul /* Toutes les listes à puces de la boite 1 */
{
   font-size:80%;
   padding-left: 20px;
}
 
.Box_coustVilla
{
	flex-direction: column;
	
}

  #Box2 h2
{
    font-size: 90%;
	}
	

  #Box2-1
{
    font-size: 70%;
	}	


#Box4 h2 /* le titre de la boite 4*/
{   
  font-size: 90%;
  }

#Box4 ul /* Toutes les listes à puces de la boite 4 */
{
  padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
   font-size:90%;
  }

     
  #Box3 h2
{
    font-size: 90%;
	}
   
     #Box3-1
{
    width: 94%;
	}
	
   
  #Box3-1 h4
{
    font-size: 80%;
	}
	

#Box5 h2 /* le titre de la boite 5*/
{   
   font-size: 90%;
  }

#Box5 ul /* Toutes les listes à puces de la boite 5 */
{
  padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
   font-size:90%;
   }
	.Box_avail
 {
	font-size:90%;
	 }	

#Box8 /* Formatage Boite Comparison */
 {
	 font-size: 90%;
	 width: 70%;
	  }

#Box9 /* Formatage Boite Reviews */
 {
	 font-size: 90%;
	 width: 98%;
	  }
	  
	
 /* Formatage des Boite Website */   

#BoxWeb
{
	flex-direction: column;
	align-items: center;
	width:93%;
	margin-bottom: 10px;
	}
 

/* Formatage Boite Website BB */  
  
#WebBB h2
 {
	font-size: 70%;
	width: 100%;
		 }
	    
 
  /* Formatage Boite Website Villa */
#WebVilla h2
 {
	font-size: 70%;
	width: 100%;
	}	  
#photo6 /* Flash BB discount */
{
     display: none;
  }	

blockquote
{font-size: 90%;}

footer
{
   width: 98%;
   font-size: 75%;  
   }			
	  
	}