/* CSS3 page */

#page {
        width: 100%; background: #f0ffff; 


      }

                            /* CSS3 contenair pour le slideshow Top */

#topblock     {
      margin: 30px auto;
      display: flex;
      flex-direction: row;
      justify-content: center;
      width: 100%; max-width: 2000px; 
                  }


                         /* CSS3 Position du slideshow Top */


/* la fenêtre du slideshow à une largeur de 100% et une largeur maxi (max-width) qui correspond à la largeur naturelle de l'image soit 2000px, car nous ne souhaitons pas que l'image soit agrandie. 
Avec hidden on coupe tout se qui dépasse */

#slider-top {
        margin: 0px auto; width: 100%; max-width: 2000px; overflow: hidden;
	padding: 0px;
	background: #EFFBFF;
        
            }


/* la largeur de figure est un pourcentage, qui est un multiple de la div qui le contient. donc si la bande d'images contient sept images et que notre div n'en montre qu'une, la figure est 8x plus large, c'est à dire 800% la largeur de la div qui sert de container: */

#slider-top figure {

/*position:relative; permet à figure d'être déplacée facilement pendant l'animation */
	position:relative; 
	width: 800%;
	padding: 0px; margin: 0px;
/* font-size: 0;  aspire l'air autour de l'élément figure en retiranr tout espace entre les images et autour pour left: 0; */
        font-size: 0; left: 0;
/* text-align: left; permet de coriger un bug dans Safari5 pour windows*/
        text-align: left;
             /* ... la propriété animation */
	animation: slidy1 86s infinite;
                   }

            
/* nous devons répartir les images d'une manière régulière à l'intérieur de la bande d'images. le calcul est simple, figure fait 100% de large, donc chaque image doit prendre 1/8 de l'espace horisontal soit 12.50% :*/

#slider-top figure img {
           width: 12.50%; height: auto;
/* float: left; permet aussi de coriger un bug dans Safari5 pour windows*/
           float: left;
                   }


/* Partie fonction d'animation, n'oubliez pas de prefixer ( webkit, moz, ms,o ) */
@-webkit-keyframes slidy1 {
	0%	   { left: 0; }
        12.50%     { left: 0; }
	14%        { left: -100% }
        26.50%     { left: -100% }
	28%        { left: -200% }
        40.50%	   { left: -200% }
	42%        { left: -300% }
        54.50%	   { left: -300% }
        56%        { left: -400% }
        68.50%     { left: -400% }
        70%        { left: -500% }
        82.50%     { left: -500% }
        84%        { left: -600% }
        96.50%     { left: -600% }
        100%       { left: -700% }
        
                           }


@-moz-keyframes slidy1 {
	0%	   { left: 0; }
        12.50%     { left: 0; }
	14%        { left: -100% }
        26.50%     { left: -100% }
	28%        { left: -200% }
        40.50%	   { left: -200% }
	42%        { left: -300% }
        54.50%	   { left: -300% }
        56%        { left: -400% }
        68.50%     { left: -400% }
        70%        { left: -500% }
        82.50%     { left: -500% }
        84%        { left: -600% }
        96.50%     { left: -600% }
        100%       { left: -700% }
                       }

@-ms-keyframes slidy1 {
	0%	   { left: 0; }
        12.50%     { left: 0; }
	14%        { left: -100% }
        26.50%     { left: -100% }
	28%        { left: -200% }
        40.50%	   { left: -200% }
	42%        { left: -300% }
        54.50%	   { left: -300% }
        56%        { left: -400% }
        68.50%     { left: -400% }
        70%        { left: -500% }
        82.50%     { left: -500% }
        84%        { left: -600% }
        96.50%     { left: -600% }
        100%       { left: -700% }
                       }


@-o-keyframes slidy1 {
	0%	   { left: 0; }
        12.50%     { left: 0; }
	14%        { left: -100% }
        26.50%     { left: -100% }
	28%        { left: -200% }
        40.50%	   { left: -200% }
	42%        { left: -300% }
        54.50%	   { left: -300% }
        56%        { left: -400% }
        68.50%     { left: -400% }
        70%        { left: -500% }
        82.50%     { left: -500% }
        84%        { left: -600% }
        96.50%     { left: -600% }
        100%       { left: -700% }
                       }

@keyframes slidy1 {
	0%	   { left: 0; }
        12.50%     { left: 0; }
	14%        { left: -100% }
        26.50%     { left: -100% }
	28%        { left: -200% }
        40.50%	   { left: -200% }
	42%        { left: -300% }
        54.50%	   { left: -300% }
        56%        { left: -400% }
        68.50%     { left: -400% }
        70%        { left: -500% }
        82.50%     { left: -500% }
        84%        { left: -600% }
        96.50%     { left: -600% }
        100%       { left: -700% }
                       }

                                /* Fin du slideshow */
                                
                           
                           /* CSS3 debut du offerblock  */



#offerblock     {
      margin: 30px auto;
      display: flex;
      flex-direction: row;
      justify-content: center;
      width: 100%; max-width: 2000px; 
                  }
                  


                         /* CSS3 debut offer */

#offer {
        margin: 10px auto; width: 30%; max-width: 400px; overflow: hidden; display: inline;
	padding: 5px;
	background: #EFFBFF;
       
       }

                      /* CSS3 on souhaite que l'image occupe 100% de offer  */


#offer img {
           width: 100%; height: auto;
/* float: left; permet aussi de coriger un bug dans Safari5 pour windows*/
           float: left;
                   }



             /* CSS3 Position du slideshow spanish */


/* la fenêtre du slideshow à une largeur de 100% et une largeur maxi (max-width) qui correspond à la largeur naturelle de l'image soit 400px, car nous ne souhaitons pas que l'image soit agrandie.
Avec hidden on coupe tout se qui dépasse */

#slider-spanish {
        margin: 0px auto; width: 100%; max-width: 400px; overflow: hidden; 
	padding: 0px;
	background: #EFFBFF;
        
            }

/* la largeur de figure est un pourcentage, qui est un multiple de la div qui le contient. donc si la bande d'images contient 3 images et que notre div n'en montre qu'une, la figure est 3x plus large, c'est à dire 300% la largeur de la div qui sert de container: */

#slider-spanish figure {

/*position:relative; permet à figure d'être déplacée facilement pendant l'animation */
	position:relative; 
	width: 300%;
	padding:0px; margin:0px;
/* font-size: 0;  aspire l'air autour de l'élément figure en retiranr tout espace entre les images et autour pour left: 0; */
        font-size: 0; left: 0;
/* text-align: left; permet de coriger un bug dans Safari5 pour windows*/
        text-align: left;
             /* ... la propriété animation */
	animation: slidy4 15s infinite;
                   }

            
/* nous devons répartir les images d'une manière régulière à l'intérieur de la bande d'images. le calcul est simple, figure fait 100% de large, donc chaque image doit prendre 1/3 de l'espace horisontal soit 25% :*/

#slider-spanish figure img {
           width: 33.33%; height: auto;
/* float: left; permet aussi de coriger un bug dans Safari5 pour windows*/
           float: left;
                   }


/* Partie fonction d'animation, n'oubliez pas de prefixer ( webkit, moz, ms,o ) */
@-webkit-keyframes slidy4 {
	0%	   { left: 0; }
        33.33%     { left: 0; }
	48.33%     { left: -100% }
        81.66%     { left: -100% }
	100%       { left: -200% }
        
                           }

@-moz-keyframes slidy4 {
	0%	   { left: 0; }
        33.33%     { left: 0; }
	48.33%     { left: -100% }
        81.66%     { left: -100% }
	100%       { left: -200% }     
                       }

@-ms-keyframes slidy4 {
	0%	   { left: 0; }
        33.33%     { left: 0; }
	48.33%     { left: -100% }
        81.66%     { left: -100% }
	100%       { left: -200% }
                       }


@-o-keyframes slidy4 {
	0%	   { left: 0; }
        33.33%     { left: 0; }
	48.33%     { left: -100% }
        81.66%     { left: -100% }
	100%       { left: -200% }
                       }

@keyframes slidy4 {
	0%	   { left: 0; }
        33.33%     { left: 0; }
	48.33%     { left: -100% }
        81.66%     { left: -100% }
	100%       { left: -200% }
                       }


                                /* Fin du slideshow spanish */
                                

                    /* CSS3 Position du slideshow english */


/* la fenêtre du slideshow à une largeur de 100% et une largeur maxi (max-width) qui correspond à la largeur naturelle de l'image soit 400px, car nous ne souhaitons pas que l'image 
soit agrandie. Avec hidden on coupe tout se qui dépasse */

#slider-english {
        margin: 0px auto; width: 100%; max-width: 400px; overflow: hidden; 
	padding: 0px;
	background: #EFFBFF;
        
            }

/* la largeur de figure est un pourcentage, qui est un multiple de la div qui le contient. donc si la bande d'images contient 3 images et que notre div n'en montre qu'une, la figure est 3x plus large, c'est à dire 300% la largeur de la div qui sert de container: */

#slider-english figure {

/*position:relative; permet à figure d'être déplacée facilement pendant l'animation */
	position:relative; 
	width: 300%;
	padding:0px; margin:0px;
/* font-size: 0;  aspire l'air autour de l'élément figure en retiranr tout espace entre les images et autour pour left: 0; */
        font-size: 0; left: 0;
/* text-align: left; permet de coriger un bug dans Safari5 pour windows*/
        text-align: left;
             /* ... la propriété animation */
	animation: slidy4 15s infinite;
                   }

            
/* nous devons répartir les images d'une manière régulière à l'intérieur de la bande d'images. le calcul est simple, figure fait 100% de large, donc chaque image doit prendre 1/3 de l'espace horisontal soit 25% :*/

#slider-english figure img {
           width: 33.33%; height: auto;
/* float: left; permet aussi de coriger un bug dans Safari5 pour windows*/
           float: left;
                   }


/* Partie fonction d'animation, n'oubliez pas de prefixer ( webkit, moz, ms,o ) */
@-webkit-keyframes slidy4 {
	0%	   { left: 0; }
        33.33%     { left: 0; }
	48.33%     { left: -100% }
        81.66%     { left: -100% }
	100%       { left: -200% }
        
                           }

@-moz-keyframes slidy4 {
	0%	   { left: 0; }
        33.33%     { left: 0; }
	48.33%     { left: -100% }
        81.66%     { left: -100% }
	100%       { left: -200% }     
                       }

@-ms-keyframes slidy4 {
	0%	   { left: 0; }
        33.33%     { left: 0; }
	48.33%     { left: -100% }
        81.66%     { left: -100% }
	100%       { left: -200% }
                       }


@-o-keyframes slidy4 {
	0%	   { left: 0; }
        33.33%     { left: 0; }
	48.33%     { left: -100% }
        81.66%     { left: -100% }
	100%       { left: -200% }
                       }

@keyframes slidy4 {
	0%	   { left: 0; }
        33.33%     { left: 0; }
	48.33%     { left: -100% }
        81.66%     { left: -100% }
	100%       { left: -200% }
                       }


                                /* Fin du slideshow english */
                                

                       /* CSS3 Position du slideshow french */


/* la fenêtre du slideshow à une largeur de 100% et une largeur maxi (max-width) qui correspond à la largeur naturelle de l'imande soit 400px, car nous ne souhaitons pas que l'image soit agrandie. Avec hidden on coupe tout se qui dépasse */

#slider-french {
        margin: 0px auto; width: 100%; max-width: 400px; overflow: hidden; 
	padding: 0px;
	background: #EFFBFF;
        
            }


/* la largeur de figure est un pourcentage, qui est un multiple de la div qui le contient. donc si la bande d'images contient 3 images et que notre div n'en montre qu'une, la figure est 3x plus large, c'est à dire 300% la largeur de la div qui sert de container: */

#slider-french figure {

/*position:relative; permet à figure d'être déplacée facilement pendant l'animation */
	position:relative; 
	width: 300%;
	padding:0px; margin:0px;
/* font-size: 0;  aspire l'air autour de l'élément figure en retiranr tout espace entre les images et autour pour left: 0; */
        font-size: 0; left: 0;
/* text-align: left; permet de coriger un bug dans Safari5 pour windows*/
        text-align: left;
             /* ... la propriété animation */
	animation: slidy4 15s infinite;
                   }

            
/* nous devons répartir les images d'une manière régulière à l'intérieur de la bande d'images. le calcul est simple, figure fait 100% de large, donc chaque image doit prendre 1/3 de l'espace horisontal soit 25% :*/

#slider-french figure img {
           width: 33.33%; height: auto;
/* float: left; permet aussi de coriger un bug dans Safari5 pour windows*/
           float: left;
                   }


/* Partie fonction d'animation, n'oubliez pas de prefixer ( webkit, moz, ms,o ) */
@-webkit-keyframes slidy4 {
	0%	   { left: 0; }
        33.33%     { left: 0; }
	48.33%     { left: -100% }
        81.66%     { left: -100% }
	100%       { left: -200% }
        
                           }

@-moz-keyframes slidy4 {
	0%	   { left: 0; }
        33.33%     { left: 0; }
	48.33%     { left: -100% }
        81.66%     { left: -100% }
	100%       { left: -200% }     
                       }

@-ms-keyframes slidy4 {
	0%	   { left: 0; }
        33.33%     { left: 0; }
	48.33%     { left: -100% }
        81.66%     { left: -100% }
	100%       { left: -200% }
                       }


@-o-keyframes slidy4 {
	0%	   { left: 0; }
        33.33%     { left: 0; }
	48.33%     { left: -100% }
        81.66%     { left: -100% }
	100%       { left: -200% }
                       }

@keyframes slidy4 {
	0%	   { left: 0; }
        33.33%     { left: 0; }
	48.33%     { left: -100% }
        81.66%     { left: -100% }
	100%       { left: -200% }
                       }

                            /* Fin du slideshow french */
                                

                
                         /* CSS3 fin offer  */

               /* Fin du offerblock */

     
                          /* CSS3 open text area */
                          
#textblock {
border:5px solid #fbfbfb; background-color:#fbfbfb; 
margin: 30px auto; width: 98%;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;

           }  
           
           
#text {
margin: 16px auto; width: 78%; text-align:top-center;
font-family:verdana,arial,sans-serif; font-weight:bold; font-size:1.0em; color:#333333;
      }


#l1 {
margin: 16px auto; width: 90%; text-align: ;top-center;
font-family:verdana,arial,sans-serif; font-weight:bold; font-size:1.1em; 
color: #046380;
      }

#h2 {
margin: 16px auto; width: 78%; text-align:top-center;
font-family:verdana,arial,sans-serif; font-weight:bold; font-size: 1.4em; 
color:#003366;
      }

#h1 {
margin: 16px auto; width: 78%; text-align:top-center;
font-family:verdana,arial,sans-serif; font-weight:bold; font-size:1.1em; color:#003366;
      }

#h3 {
margin: 16px auto; width: 78%; text-align:top-center;
font-family:verdana,arial,sans-serif; font-weight:bold; font-size:1.0em; color:#003366;
      }

#h4 {
margin: 16px auto; width: 90%; text-align:top-center;
font-family:verdana,arial,sans-serif; font-weight:bold; font-size:0.8em; 
color: #046380;
      } 
      
                               /* CSS3 end text area */   
                               
                                   
                          /* CSS3 open address area */

#address {
border:5px solid #fbfbfb; background-color: #dcdcdc; 
margin: 30px auto; width: 98%;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;

           }  
           
#addresstext {
margin: 16px auto; width: 78%; text-align:top-center;
font-family:verdana,arial,sans-serif; font-weight:bold; font-size:1.0em; color:#333333 ;
      }  
                             
                          
                           /* CSS3 end address area */