html { height: 100%; }
body { position : relative; height: 100%; margin: 0px; padding: 0px; text-align: center; font-family: Kalam;} 

div.Site1 { height: 40px; font-size: 25px;  text-align: center; font-weight: bold; margin:0px; padding: 0px; color: yellow; background-color: black;   }
h1.Site2  { height: auto; font-size: 40px;  text-align: center; font-weight: bold; margin:0px; padding: 10px; color: white; background-color: black;  }


div#BG { position: relative; height : 600px; width: 100%; overflow: hidden;  margin: 0px; padding: 0px;}
/*img.superbg {position: absolute;  margin: 0px; padding: 0px;}*/
img.superbg { width:100%; height: 100%; object-fit: cover; }

div#Reste {  position: relative; margin: 40px 5px 40px 5px; text-align: center; background-image: url('../SiteImages/trajectoires.png');  background-repeat:  repeat; background-position: center;  }
div.Pays { display: inline-block; border-radius: 10px; border: 2px solid black; margin: 10px; padding: 0px; width: 230px; height: 230px; overflow: hidden; }
div.Pays a { display:block; width:100%; height:100%; text-decoration: none; }
div.Pays h2.TitrePays {font-family: Kalam; font-weight: bold; font-size: 18px;  margin: 0px; padding : 5px; height: 25px; background-color: black; color: white;  }
div.Pays img {display:block; margin: 0px; padding: 0px; margin-left: auto; margin-right: auto;}

div.PaysPhotos { position: relative; display: inline-block; border-radius: 10px; border: 2px solid black; margin: 10px; padding: 0px; width: 230px; height: 230px; overflow: hidden; }
div.PaysPhotos a { display:block; width:100%; height:100%; text-decoration: none; }
div.PaysPhotos h2.TitrePaysH {position: absolute; top: 0px; left: 0px; width: 100%; font-family: Kalam; font-weight: bold; font-size: 18px;  margin: 0px; padding : 5px; height: 25px; background-color: black; color: white;  }
div.PaysPhotos h2.TitrePaysH2L {position: absolute; top: 0px; left: 0px; width: 100%; font-family: Kalam; font-weight: bold; font-size: 16px;  line-height: 17px;  margin: 0px; padding : 2px; height: 35px; background-color: black; color: white;  }
div.PaysPhotos h2.TitrePaysH1L {position: absolute; top: 0px; left: 0px; width: 100%; font-family: Kalam; font-weight: bold; font-size: 18px;   margin: 0px; padding : 2px; height: 35px; background-color: black; color: white;  }
div.PaysPhotos h2.TitrePaysB {position: absolute; bottom: 0px; right: 0px; width: 100%;font-family: Kalam; font-weight: bold; font-size: 18px;  margin: 0px; padding : 5px; height: 25px; background-color: black; color: white;  }
div.PaysPhotos img {display:block; margin: 0px; padding: 0px; margin-left: auto; margin-right: auto; border: 1px solid red;}



div.Gris { position: relative; background-color: #666666; margin: 0px; padding:0px;  }
div.Gris h2 { color: yellow; display: block; text-align: center; margin: 20px 0px 10px 0px; padding-left: 20px; font-size: 22px;} 
div.Gris p.Text { font-family: Kalam; font-weight: normal; font-size: 22px; margin: 0px; padding: 20px; color: white;  text-align: left; text-indent: 100px;}
div.Gris p.TextSansRetrait { font-family: Kalam; font-weight: normal; font-size: 22px; margin: 0px; padding: 20px; color: white;  text-align: left; }

div.lien   { text-align: left; margin-left : 50px;}
div.lien a  { color : orange; font-size: 20px;}
div.lien p  { color :white; margin: 0px 10px 10px 0px; font-size: 20px;}


div.Gris2 { position: relative; background-color: #333333; margin: 0px; padding:0px;  }
div.Gris2 h2 { color: yellow; display: block; text-align: center; margin: 20px 0px 10px 0px; padding-left: 20px; font-size: 22px;} 
div.Gris2 p.Text { font-family: Kalam; font-weight: normal; font-size: 22px; margin: 0px; padding: 20px; color: white;  text-align: left; text-indent: 100px;}
div.Gris2 p.TextSansRetrait { font-family: Kalam; font-weight: normal; font-size: 22px; margin: 0px; padding: 20px; color: white;  text-align: left; }



div#ContDestination { position:absolute; top: 70px; left:0px; height : 30%; width: 100%; overflow:hidden;  margin: 0px; padding: 0px; }
div.DestinationAcores {  background-image: url('../SiteImages/dest-acores.png'); background-repeat: no-repeat; background-position: center; height:250px; }
div.DestinationPortugal {  background-image: url('../SiteImages/dest-portugal.png'); background-repeat: no-repeat; background-position: center; height:250px; }
div.DestinationIslande{  background-image: url('../SiteImages/dest-islande.png'); background-repeat: no-repeat; background-position: center; height:250px; }
div.DestinationNorvege{  background-image: url('../SiteImages/dest-norvege.png'); background-repeat: no-repeat; background-position: center; height:250px; }
div.DestinationEspagne{  background-image: url('../SiteImages/dest-espagne.png'); background-repeat: no-repeat; background-position: center; height:250px; }
div.DestinationFrance {  background-image: url('../SiteImages/dest-france.png'); background-repeat: no-repeat; background-position: center; height:250px; }


div#Menu { background-color: orange; height:30px;}
a.Bouton { font-size:20px; display: inline-block; height: 30px; width: 180px; border-radius: 15px; background-color: grey; color: white; text-decoration: none; margin-top: 15px; vertical-align: middle;}
a.Bouton:hover { } 



div.Contact { position: relative; background-color: #000000; height: auto; font-size: 18px; font-weight: bold; margin: 0px; color: white; padding: 20px;}
div.Contact a { text-decoration: none; color: red; }
div.Contact a:hover { color: white; }

h2.VoyageEtape { text-align: center; }

/*
figure.BlocPhotoH { display: inline-block; vertical-align: middle; padding: 0px; margin: 7px 7px 17px 7px; max-width: 98%; }
figure.BlocPhotoH img { display: block; margin : 0px; border-radius: 10px; max-width: 100%;  }div.BlocPhoto p.PhotoComment {  margin: 0px; padding: 0px; text-align: left; font-style: italic; color: white; max-width: auto;}
figure.BlocPhotoH figcaption.PhotoComment {  margin: 0px; padding: 0px; text-align: left; font-style: italic; color: white; max-width: 700px;}
figure.BlocPhotoH p.PhotoCarac      {  margin: -7px 0px 0px 0px; padding: 0px; text-align: left; color: white; max-width: 700px; }
figure.BlocPhotoH p.PhotoCaracSeul  {  margin: 2px 0px 0px 0px; padding: 0px; text-align: left; color: white; max-width: 700px; }

figure.BlocPhotoV { display: inline-block; vertical-align: middle; padding: 0px; margin: 7px 7px 17px 7px; max-width: 100%; }
figure.BlocPhotoV img { display: inline-block; margin : 0px; border-radius: 10px; max-width: 100%;  }div.BlocPhoto p.PhotoComment {  margin: 0px; padding: 0px; text-align: left; font-style: italic; color: white; max-width: auto;}
figure.BlocPhotoV figcaption.PhotoComment { margin: 0px; padding: 0px; text-align: left; font-style: italic; color: white; max-width: 460px;}
figure.BlocPhotoV p.PhotoCarac       { margin: -7px 0px 0px 0px; padding: 0px; text-align: left; color: white;  max-width: 460; }
figure.BlocPhotoV p.PhotoCaracSeul   { margin: 2px 0px 0px 0px; padding: 0px; text-align: left; color: white;  max-width: 460; }
*/

figure.BlocPhotoH { display: inline-block; vertical-align: middle; padding: 0px; margin: 7px 7px 17px 7px; max-width: 98%; }
figure.BlocPhotoH img { display: block; margin : 0px; border-radius: 10px; max-width: 100%;  }
figure.BlocPhotoH figcaption.PhotoComment {  margin: 0px; padding: 0px; text-align: left; font-style: italic; color: white; max-width: 700px;}

figure.BlocPhotoH50 { display: inline-block; vertical-align: middle; padding: 0px; margin: 7px 7px 17px 7px; max-width: 98%; }
figure.BlocPhotoH50 img {  display: block; margin : 0px; border-radius: 10px; max-width: 100%;  }
figure.BlocPhotoH50 figcaption.PhotoComment { margin: 0px; padding: 0px; text-align: left; font-style: italic; color: white; max-width: 750px;}


figure.BlocPhotoV { display: inline-block; vertical-align: middle; padding: 0px; margin: 7px 7px 17px 7px; max-width: 100%; }
figure.BlocPhotoV img { display: inline-block; margin : 0px; border-radius: 10px; max-width: 100%;  }
figure.BlocPhotoV figcaption.PhotoComment { margin: 0px; padding: 0px; text-align: left; font-style: italic; color: white; max-width: 460px;}

figure.BlocPhotoV50 { display: inline-block; vertical-align: middle; padding: 0px; margin: 7px 7px 17px 7px; max-width: 100%; }
figure.BlocPhotoV50 img { display: inline-block; margin : 0px; border-radius: 10px; max-width: 100%;  }
figure.BlocPhotoV50 figcaption.PhotoComment { margin: 0px; padding: 0px; text-align: left; font-style: italic; color: white; max-width: 460px;}

figure.BlocPhotoPano { display: inline-block; vertical-align: middle; padding: 0px; margin: 7px 7px 17px 7px; max-width: 90%; }
figure.BlocPhotoPano img { display: block; margin : 0px; border-radius: 10px; max-width: 100%;   }
figure.BlocPhotoPano figcaption.PhotoComment {  margin: 0px; padding: 0px; text-align: left; font-style: italic; color: white; max-width: 100%;}





 
 
/*-----------------------------------------------------------------------------------------------------*/
/*											on vise les écrans pc                                      */
/*                      Ecran d'au moins 1024px et fenetre jusqu'a une largeur de 3000                 */
/*-----------------------------------------------------------------------------------------------------*/
@media only screen and (min-device-width: 800px) and (max-device-width: 3000px) AND (max-width:479px)
{


}





/*-----------------------------------------------------------------------------------------------------*/
/*											on vise les écrans pc                                      */
/*                      Ecran d'au moins 1024px et fenetre jusqu'a une largeur de 1300                 */
/*-----------------------------------------------------------------------------------------------------*/
@media only screen and (min-device-width:800px) and (max-device-width: 3000px) and (min-width : 479px) and (max-width:800px)
{


}



/*-----------------------------------------------------------------------------------------------------*/
/*											on vise les écrans pc                                      */
/*                      Ecran d'au moins 1024px et fenetre jusqu'a une largeur de 1300                 */
/*-----------------------------------------------------------------------------------------------------*/
@media only screen and (min-device-width:801px) and (max-width:1024px)
{
		h1.Site2  { font-size: 30px; }
}




/*-----------------------------------------------------------------------------------------------------*/
/*											on vise les écrans pc                                      */
/*                      Ecran d'au moins 1024px et fenetre jusqu'a une largeur de 1300                 */
/*-----------------------------------------------------------------------------------------------------*/

@media only screen and (min-device-width: 500px) and (max-width: 800px)
{
	h1.Site2  { font-size: 30px; }
	
}







/*-----------------------------------------------------------------------------------------------------*/
/*											on vise les tablettes                                      */
/*                                     ecran maximun de 1024 et orientation portrait                   */
/*-----------------------------------------------------------------------------------------------------*/
@media all and  (max-device-width:1024px) and (orientation : portrait)
{
   h1.Site2  { font-size: 30px; }
}

/*-----------------------------------------------------------------------------------------------------*/
/*											on vise les tablettes                                      */
/*                                     ecran maximun de 1024 et orientation paysage                    */
/*-----------------------------------------------------------------------------------------------------*/
 @media all and  (max-device-width:1024px) and (orientation : landscape)
{



}









/*-----------------------------------------------------------------------------------------------------*/
/*											on vise les téléphones                                     */
/*                                     ecran maximun de 800 et orientation portrait                    */
/*-----------------------------------------------------------------------------------------------------*/
@media all and  (max-device-width:500px) and (orientation : portrait)
{
	   h1.Site2  { font-size: 29px; }
	
}




/*-----------------------------------------------------------------------------------------------------*/
/*											on vise les téléphones                                     */
/*                                     ecran maximun de 800 et orientation paysage                     */
/*-----------------------------------------------------------------------------------------------------*/
@media all and  (max-device-width:500px) and (orientation : landscape)
{
	
   h1.Site2  { font-size: 30px; }
	
}