 <style type="text/css">
        	@font-face
        		{
    				font-family: 'sofia_pro_light_condensedRg';
    				src: url('fonts/SofiaProLiCond-webfont.eot');
    				src: url('fonts/SofiaProLiCond-webfont.eot?#iefix') format('embedded-opentype'),
         			url('fonts/SofiaProLiCond-webfont.woff') format('woff'),
         			url('fonts/SofiaProLiCond-webfont.ttf') format('truetype'),
         			url('fonts/SofiaProLiCond-webfont.svg#sofia_pro_light_condensedRg') format('svg');
    				font-weight: normal;
    				font-style: normal;
    			}
        	body    
                {   /*vh = hauteur fenêtre La hauteur min va occuper toute la fenêtre*/ 
                    min-height: 100vh;
                    /*min-width: 100vw;*/
                    /*width: 100vw;*/
                    /*body devient conteneur*/
                    display: flex;
                    /*body devient flex container horizontal. Ces enfants sont : section left et section milieu
                    Ils vont se positionner l'un à côté de l'autre*/
                    /*background-image: url("PCSF_Noel_2014-comp2.jpg");*/
                }
            section.left
            	 {	
            		    width: 10%;
                    /*on s"assure que left se positionne avant les autres enfants cad avant section milieu*/
                    order: -1;
                    /*section left devient conteneur vertical*/
                    display :flex;
                   	flex-direction :column;
                    /*couleur de fond bleu avec caractères blancs*/
                    background-color: rgb(0,185,223);
                    /*background-color: rgb(119,136,153);*/
                   	/*background-color: rgba(0,0,0,.7);*/
              	    /*color: rgb(0,0,255);*/
                	  /*Aligne horizontalement les enfants cfr icône home*/
              	    align-items:center;
                	/*aligne verticalement les enfants si ce ne sont pas des header/footer*/
                	   justify-content:center;
                }
                header.home
                { /*truc : on fait de ce header un conteneur qui va contenir div qui pourra être centré*/
                  display: flex;
                  flex-direction :column;
                  align-items:center;
                  justify-content:center;
                  /*on définit la hauteur des entêtes*/
                  height: 4em;
                  color : rgb(0,0,139);
                  /*color : #33c3f0;/*rgb(255,255,255);*/
                }
                /*nav ul
                {	
            	    /*nav est conteneur vertical*//*
                  display :flex;*//*
                  flex-direction :column;*//*
                  /*on insère les vides entre les éléments*/
                  /*justify-content: space-between;*/
                    /*ne comprend pas l'effet*/
                    /*align-items: stretch;*/
                    /*on lui donne toute l'amplitude : écart max entre les éléments*/
                 /* flex:1;
                }*/
                nav 
                {
                  display: flex;
                  flex-direction :column;
                  /*permet l'alignement vertical de div.foot sans avoir à utiliser margin:auto dans ce dernier;*/
                  align-items:center;
                  justify-content:space-between; 
                  flex:1;
                }
                 #navigation
                { 
                  /*nav est conteneur vertical*/
                  display :flex;
                  flex-direction :column;
                  /*on insère les vides entre les éléments*/
                  justify-content: space-between;
                    /*ne comprend pas l'effet*/
                    /*align-items: stretch;*/
                    /*on lui donne toute l'amplitude : écart max entre les éléments*/
                  flex:1;
                  
                }
                 #navigation li /*on doit réinitialiser les li car définis de façon trop générique*/
                    {
                      list-style: none;
                      display:inline;
                      background: 0;
                      border-color: inherit;
                      border-style: none;
                      border-width: medium;
                      -moz-border-radius: 0;
                      -webkit-border-radius:0;
                      border-radius: 0;
                      line-height: normal;
                      padding:0px;
                      width: auto;
                      font-size: 20px;
                    }
                 @media all and (min-width:1024px) and (max-width: 1600px)
                      {
                        #navigation li
                              { 
                                font-size: 15px ;font-weight:bold;font-family: 'sofia_pro_light_condensedRg';
                              }
                      }    
                @media all and (max-width: 1023px)
                      {
                        #navigation li
                              { 
                                font-size: 7px ;
                              }
                      }     
                ul.sous , li span/*on cache le sous menu*/
                {
                  display:none;
                }
                
                #navigation li :hover /*en rouge quand survol d'un titre*/
                {
                  color:red;
                }
                
                #navigation li:hover ul, #navigation li:hover span /*attention pas de classe ni de a */
                  {
                    display:block;/*Réapparaître sous-menu*/
                    
                    display: flex;
                    flex-direction :column;
                    justify-content: space-between;/*si non les titres se suivent en file !*/

                    
                  }
                
                footer
                { /*truc : pour que le footer s'aligne verticalement, on crée le footer conteneur et margin auto dans div.foot*/;
                  display: flex;
                  flex-direction :column;
                  /*permet l'alignement vertical de div.foot sans avoir à utiliser margin:auto dans ce dernier;*/
                  align-items:center;
                  justify-content:center; 
                  height: 4em;
                }
                  div.foot
                  {
                    /*margin:auto;*/
                  }
          section.milieu
              {
                  display: flex;
                  flex-direction :column;
                  
                  width: 90%;
                  /*background-color: rgb(0,185,223);*/
                  color:white;
              }
                header.milieu
                { 
                  margin-bottom: auto;
                  height: 4em;
                  background-color: rgb(0,185,223);
                  /*background-color: rgba(0,0,0,.7);*/
                  color:white;
                  /*devient conteneur*/
                  display:flex;
                  font-family: 'sofia_pro_light_condensedRg';
                }
                  div.team
                  {   
                  /*aligne verticalement mais pas horizontalement*/
                  margin:auto;
                  }
                  div.user
                  { /*on pousse le user à droite*/
                  margin-left: auto;
                  /*on le place en dernier*/
                  order : 1;
                  /*aligne l'élément verticalement*/
                  margin:auto;
                  color : #33c3f0;
                  }
                header.name
          	    {	
            		  display: flex;
               		/*flex-direction :column;*/
               		
               		height: 4em;
               		
               		font-family: 'sofia_pro_light_condensedRg';
               		background-color: rgb(119,136,153);
               		/*miracle : header est conteneur et donc enfant "tool" va se centrer vert et horizont.*/
               		align-items:center;
               		justify-content:space-around;
               		font-size: 25px;
                  font:bold;
               	}
                  
               	  div.tool
               	  {
                    color: rgb(16, 52, 166);
                    /* orange = color: rgb(255,100,0);*/
                    font-size: 30px;
           		     margin:auto;
               		/*flex:1 1 auto;*/
               		/*font-size: 20px;*/
               	  }
            	section.content
            	{	/*donne toute l'ampleur mais trop et pousse- pourquoi - vers le haut ???*/
                  /*background-image: url("PCSF_Noel_2014-comp2.jpg");*/
                  background-image: url("chorale_etienne_42-min.JPG");
                  background-repeat: no-repeat;
                  /*background-position: center center;*/
                  background-position: right;
                  webkit-background-size: 100%;
                  moz-background-size: 100%;
                  o-background-size:100%;
                  /*background-size: cover;*/
                  background-size: cover;
                  background-attachment: fixed;
               		flex:1 1 auto;
               		font-family: 'sofia_pro_light_condensedRg';
               		/*background-color: rgb(119,136,153);*/
                  /*background-image: url("PCSF_Noel_2014-comp2.jpg");*/
               		display: flex;
                  flex-direction :row;
                  /*flex-direction :column;*/
                  flex-wrap:wrap;
                  /*permet l'alignement vertical de div.foot sans avoir à utiliser margin:auto dans ce dernier;*/
                  /*align-items:center;*/
                  justify-content:space-between;
                  align-items: flex-start;
            	}

                section.photo
              { /*donne toute l'ampleur mais trop et pousse- pourquoi - vers le haut ???*/
                  /*background-image: url("PCSF_Noel_2014-comp2.jpg");*/
                /*  background-image: url("chorale_etienne_42.JPG");*/
               /*   background-repeat: no-repeat;*/
                  /*background-position: center center;*/
               /*   background-position: right;
                  webkit-background-size: 100%;
                  moz-background-size: 100%;
                  o-background-size:100%;*/
                  /*background-size: cover;*/
               /*   background-size: cover;*/
                /*  background-attachment: fixed;*/
                /*  flex:1 1 auto;
                  font-family: 'sofia_pro_light_condensedRg';*/
                  background-color: black;
                  /*background-image: url("PCSF_Noel_2014-comp2.jpg");*/
                 /* display: flex;
                  flex-direction :row;
                  /*flex-direction :column;*/
              /*    flex-wrap:wrap;
                  /*permet l'alignement vertical de div.foot sans avoir à utiliser margin:auto dans ce dernier;*/
                  /*align-items:center;*/
                /*  justify-content:space-between;
                  align-items: flex-start;*/
              }
              section.texte
              { /*donne toute l'ampleur mais trop et pousse- pourquoi - vers le haut ???*/
                  background-image: url("PCSF_Noel_2014-comp2.jpg");
                  /* Safari */
                    -webkit-filter: blur(5px);
                    /* Firefox */
                    -moz-filter: blur(5px);
                    /* Opera */
                    -o-filter: blur(5px);
                        /* Internet Explorer */
                    -ms-filter: blur(5px);
                    /* Filtre de floutage CSS3 standard */
                    filter: blur(5px);
                  background-repeat: no-repeat;
                  background-position: center center;
                  webkit-background-size: cover;
                  moz-background-size:cover;
                  o-background-size:cover;
                  background-size: cover;
                  background-attachment: fixed;
                  flex:1 1 auto;
                  font-family: 'sofia_pro_light_condensedRg';
                  /*background-color: rgb(119,136,153);*/
                  /*background-image: url("PCSF_Noel_2014-comp2.jpg");*/
                  display: flex;
                  flex-direction :row;
                  /*flex-direction :column;*/
                  flex-wrap:wrap;
                  /*permet l'alignement vertical de div.foot sans avoir à utiliser margin:auto dans ce dernier;*/
                  /*align-items:center;*/
                  justify-content:space-between;
                  align-items: flex-start;
              }
              div.multi
              {
                -webkit-column-count :1;
                -webkit-column-gap : 30px;
                -webkit-column-rule : 1px solid #ddd;
                -moz-column-count :1;
                -moz-column-gap : 30px;
                -moz-column-rule : 1px solid #ddd;
                column-count :1;
                column-gap : 30px;
                column-rule : 1px solid #ddd;
                font-size: 32px;

              }

              div > p
              {
                margin :25px;
              }
            	div.info
              {
                  border-width:2px;
                  border-style:solid;
                  border-color:rgba(0,0,0,.7);
                  /*padding : 20px;*/
                  height:8em;
                  /*flex; 0 1 auto;*/
                  width : 30%;
                  margin-top: 8em;
                  display: flex;
                  flex-direction :column;
                  /*permet l'alignement vertical de div.foot sans avoir à utiliser margin:auto dans ce dernier;*/
                  align-items:center;
                  justify-content:center;
                  /*background:#ffffff;*/
                  /*border:1px;
                  -moz-border-radius:3px;
                  -webkit-border-radius:3px;
                  -khtml-border-radius:3px;
                  border-radius: 3px;
                  font:italic 30px Georgia,"Times New Roman",Times,serif;
                  outline:none;
                  padding: 5px;
                  width:500px;*/
                  /*text-align:center;*/
              }
              
              
              div.infodetail
              {
                margin:auto;
                font-size: 20px ;
                font-weight:bold;
                font-family: 'sofia_pro_light_condensedRg';
                /*background:#ffffff;
                border:none;
                -moz-border-radius:3px;
                -webkit-border-radius:3px;
                -khtml-border-radius:3px;
                border-radius: 3px;
                 font-size: 15px;
                color : #33c3f0;*/
              }
              @media all and (min-width:1024px) and (max-width: 1600px)
                      {
                        div.infodetail
                              { 
                                font-size: 15px ;
                              }
                      }
              @media all and (max-width: 1023px)
                      {
                        div.infodetail
                              { 
                                font-size: 10px ;
                              }
                      }

                .menudate
                {
                  display: flex;
                }
                .cf 
                  {
                  display: flex;
                  flex-direction :column;
                  /*permet l'alignement vertical de div.foot sans avoir à utiliser margin:auto dans ce dernier;*/
                  align-items:center;
                  justify-content:center;
                  }
                div.descriptif
                  {/*
                    display: table;
                    /*flex-wrap : wrap;*/
                  }
                ul.descriptif 
                  {
                    /*flex :initial;*/
                    display:table;
                    background: rgba(255,255,255,.3);
                    border-color: rgba(255,255,255,.6);
                    border-style: solid;
                    border-width: 2px;
                    -moz-border-radius: 5px;
                    -webkit-border-radius:5px;
                    border-radius: 5px;
                    line-height: 30px;
                    list-style: none;
                    padding:15px;
                    width: 400px;
                  }
                  ul.descriptif > *:nth-of-type(3n+1)
                  {
                    margin-left: 0;
                  }
                  li
                    {
                      display:table-cell;
                      background: rgba(255,255,255,.3);
                      border-color: rgba(255,255,255,.6);
                      border-style: solid;
                      border-width: 2px;
                      -moz-border-radius: 5px;
                      -webkit-border-radius:5px;
                      border-radius: 5px;
                      line-height: 30px;
                      list-style: none;
                      padding:15px;
                      width: 500px;
                    }
                  li label
                    {
                      width: 150px;
                      font:bold 16px Arial,sans-serif;
                    }
                  li input
                    {
                background:#ffffff;
                border:none;
                -moz-border-radius:3px;
                -webkit-border-radius:3px;
                -khtml-border-radius:3px;
                border-radius: 3px;
                font:italic 14px Georgia,"Times New Roman",Times,serif;
                outline:none;
                padding: 5px;
                width:300px;
                text-align: center;
                float: right;
                  }
                  li select
                    {
                background:#ffffff;
                border:none;
                -moz-border-radius:3px;
                -webkit-border-radius:3px;
                -khtml-border-radius:3px;
                border-radius: 3px;
                font:italic 14px Georgia,"Times New Roman",Times,serif;
                outline:none;
                padding: 5px;
                width:300px;
                text-align: center;
                float: right;
                  }   
                   label.name
                { 
                  font-family: 'sofia_pro_light_condensedRg';
                  background-color: rgb(119,136,153);
                  font-size: 30px;
                }
               
                    @media all and (min-width:1024px) and (max-width: 1600px)
                      {
                        label
                              { 
                                font-size: 15px ;font-weight:bold;font-family: 'sofia_pro_light_condensedRg';
                              }
                      }
                     @media all and(max-width: 1023px)
                      {
                        label
                              { 
                                font-size: 7px ;font-weight:bold;font-family: 'sofia_pro_light_condensedRg';
                              }
                      }
                  legend.name
                { 
                  font-family: 'sofia_pro_light_condensedRg';
                  background-color: rgb(119,136,153);
                  font-size: 30px;
                }
                td.down
                { 
                  font-family: 'sofia_pro_light_condensedRg';
                   color: rgb(255,25,0);
                  font-size: 5px;
                }
                /*background: #fc8d32;
                border-radius: 10px;
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
                padding: 20px;*/
                /*width: 1200px;*/
                /*max-width: 2200px;*/
                /*margin: 50px;*/
              
            	input.date
              {
                background:#ffffff;
                border:none;
                -moz-border-radius:3px;
                -webkit-border-radius:3px;
                -khtml-border-radius:3px;
                border-radius: 3px;
                 font-size: 15px;
                color : #33c3f0;
                /*font:italic 14px Georgia,"Times New Roman",Times,serif;
                outline:none;
                padding: 5px;
                width:5px;
                text-align:center;*/
              }
            	/*td 
              {
              font-weight: 500;
              font-size: medium;
              }*/
              select.date
              {
                background:#ffffff;
                border:none;
                -moz-border-radius:3px;
                -webkit-border-radius:3px;
                -khtml-border-radius:3px;
                border-radius: 3px;
                font-size: 15px;
               /* font:italic 14px Georgia,"Times New Roman",Times,serif;
                outline:none;
                padding: 5px;
                width:70px;*/
              }
              
              td.right {text-align : right;}
              .center {text-align : center;}
              .small {font-size: 5px;}
              .mid{font-size: 10px;}
              .large {font-size: 15px;}
              td.red{color: rgb(255,100,0);} 
              
              .titre{ font-size: 20px ;font-weight:bold;color:rgb(223, 242, 255);font-family: 'sofia_pro_light_condensedRg';}
           /*   .titre{ font-size: 20px ;font-weight:bold;color:white;font-family: 'sofia_pro_light_condensedRg';}*/
              @media all and (min-width:1024px) and (max-width: 1600px)
                {
                  a.titre
                  {
                    font-size: 0.8em ;font-weight:bold;color:#ffffff;font-family: 'sofia_pro_light_condensedRg';
                  }
                }
              @media all and (max-width: 1023px)
                {
                  a.titre
                  {
                    font-size: 7px ;font-weight:bold;color:#ffffff;font-family: 'sofia_pro_light_condensedRg';
                  }
                } 
             ul.sous li a.titre { font-size: 0.7em ;font-weight:bold;color:white;font-family: 'sofia_pro_light_condensedRg';}
               a.titreblue{ font-size: 20px ;font-weight:bold; color : #33c3f0;font-family: 'sofia_pro_light_condensedRg';}
              .titretab{text-align:center; font:bold 15px Arial,sans-serif;}
              .footred{text-align:left; font:bold 20px Arial,sans-serif;color:red;}
              .titresecond{text-align:center; font:bold 12px Arial,sans-serif;}
              .bouton {display:inline;margin:50px;padding:10px;}
              .devise{border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;margin: 50px;}

            .va 
                {
                display: flex;
                flex-direction: column;
                justify-content: center;
                text-align: center;
                font-weight: bold;
                } 
             video
               {
                width: 200px;
                border: 10px;
                border-color:rgb(0,185,223);
                border-style:ridge;
                padding: 4px;
                margin-bottom: 20px;
                background-color: silver;
                font-size: 0.8em;
                position: relative;
                top: 15px;
                }

        audio   {
                width: 200px;
                border: 10px;
                border-color:rgb(0,185,223);
                border-style:ridge;
                padding: 4px;
                margin-bottom: 20px;
                height: 120px;
                background-color: silver;
                font-size: 0.8em;
                position: relative;
                top: 15px;
            }
        .pub
            {
                display: flex;
                flex-direction: row;
                flex-wrap:wrap;
                justify-content:flex-start;
            }
          .pub > figure
            {
                display: table;
                flex:1 1 auto;
                width:auto;
                /*height: auto;*/
                max-width: : 500px;
                max-height: 200px;
                margin:10px;
                object-fit:cover;
                /*width: 200px;
                border: 10px;
                border-color:rgb(0,185,223);
                border-style:ridge;
                padding: 4px;
                margin: 20px;
                background-color: silver;
                font-size: 0.8em;
                position: relative;
                top: 15px;*/
            }
          .photo_d1
            {
              width: 1728px;/*576*/
              height: 1296px;/*432*/
            /* margin: 50px auto;*/
             box-shadow: 0px 15px 10px #777;
              background-color: #EDEDED;
              background-size: contain;
              animation-name: fondu;
              animation-duration: 350s;
              animation-iteration-count: infinite;
              animation-delay: 3s;
              /*animation: fondu 200s ease-in-out infinite both;*/
            }
          .photo_conteneur
            {
              max-width: 1728px;
             margin: 50px auto;
            }
          .photo_d2
            {
              width: 100%;
             /*height: 100%;*/
             background-image: url("photos_23_6_22/chorale_etienne_01-min.JPG");
              padding-top: 75%;
              background-repeat: no-repeat;
              /*box-shadow: 0px 0px 10px #777;*/
              /*background-color: black;*/
              background-size: contain;
              animation-name: fondu;
              animation-duration: 240s;
              animation-timing-function:linear; 
              animation-delay: 0s;
              animation-iteration-count: infinite;
              animation-direction:normal;
             

              -moz-animation-name: fondu;
              -moz-animation-duration: 240s;
              -moz-animation-timing-function:linear;
              -moz-animation-iteration-count: infinite;
              -moz-animation-direction:normal;
              -moz-animation-delay: 0s;

              -webkit-animation-name: fondu;
              -webkit-animation-duration: 240s;
              -webkit-animation-timing-function:linear;
              -webkit-animation-iteration-count: infinite;
              -webkit-animation-direction:normal;
              -webkit-animation-delay: 0s;
             /*  -moz-border-radius:3px;
                -webkit-border-radius:3px;
                -khtml-border-radius:3px;*/
              /*animation: fondu 200s ease-in-out infinite both;*/
            }
          .photo_d1:hover, .photo_d2:hover
            {
              animation-play-state: paused;
            }
          @keyframes fondu
            {
           
              
              0%{background-image: url("photos_23_6_22/chorale_etienne_01-min.JPG");}
1,5%{background-image: url("photos_23_6_22/chorale_etienne_02-min.JPG");}
2%{background-image: url("photos_23_6_22/chorale_etienne_03-min.JPG");}
3%{background-image: url("photos_23_6_22/chorale_etienne_04-min.JPG");}
4%{background-image: url("photos_23_6_22/chorale_etienne_05-min.JPG");}
5%{background-image: url("photos_23_6_22/chorale_etienne_06-min.JPG");}
6%{background-image: url("photos_23_6_22/chorale_etienne_07-min.JPG");}
7%{background-image: url("photos_23_6_22/chorale_etienne_08-min.JPG");}
8%{background-image: url("photos_23_6_22/chorale_etienne_09-min.JPG");}
9%{background-image: url("photos_23_6_22/chorale_etienne_10-min.JPG");}
10%{background-image: url("photos_23_6_22/chorale_etienne_11-min.JPG");}
11%{background-image: url("photos_23_6_22/chorale_etienne_12-min.JPG");}
12%{background-image: url("photos_23_6_22/chorale_etienne_13-min.JPG");}
13%{background-image: url("photos_23_6_22/chorale_etienne_14-min.JPG");}
14%{background-image: url("photos_23_6_22/chorale_etienne_15-min.JPG");}
15%{background-image: url("photos_23_6_22/chorale_etienne_16-min.JPG");}
16%{background-image: url("photos_23_6_22/chorale_etienne_17-min.JPG");}
17%{background-image: url("photos_23_6_22/chorale_etienne_18-min.JPG");}
18%{background-image: url("photos_23_6_22/chorale_etienne_19-min.JPG");}
19%{background-image: url("photos_23_6_22/chorale_etienne_20-min.JPG");}
20%{background-image: url("photos_23_6_22/chorale_etienne_21-min.JPG");}
21%{background-image: url("photos_23_6_22/chorale_etienne_22-min.JPG");}
22%{background-image: url("photos_23_6_22/chorale_etienne_23-min.JPG");}
23%{background-image: url("photos_23_6_22/chorale_etienne_24-min.JPG");}
24%{background-image: url("photos_23_6_22/chorale_etienne_25-min.JPG");}
25%{background-image: url("photos_23_6_22/chorale_etienne_26-min.JPG");}
26%{background-image: url("photos_23_6_22/chorale_etienne_27-min.JPG");}
27%{background-image: url("photos_23_6_22/chorale_etienne_28-min.JPG");}
28%{background-image: url("photos_23_6_22/chorale_etienne_29-min.JPG");}
29%{background-image: url("photos_23_6_22/chorale_etienne_30-min.JPG");}
30%{background-image: url("photos_23_6_22/chorale_etienne_31-min.JPG");}
31%{background-image: url("photos_23_6_22/chorale_etienne_32-min.JPG");}
32%{background-image: url("photos_23_6_22/chorale_etienne_33-min.JPG");}
33%{background-image: url("photos_23_6_22/chorale_etienne_34-min.JPG");}
34%{background-image: url("photos_23_6_22/chorale_etienne_35-min.JPG");}
35%{background-image: url("photos_23_6_22/chorale_etienne_36-min.JPG");}
36%{background-image: url("photos_23_6_22/chorale_etienne_37-min.JPG");}
37%{background-image: url("photos_23_6_22/chorale_etienne_38-min.JPG");}
38%{background-image: url("photos_23_6_22/chorale_etienne_39-min.JPG");}
39%{background-image: url("photos_23_6_22/chorale_etienne_40-min.JPG");}
40%{background-image: url("photos_23_6_22/chorale_etienne_41-min.JPG");}
41%{background-image: url("photos_23_6_22/chorale_etienne_42-min.JPG");}
42%{background-image: url("photos_23_6_22/chorale_etienne_43-min.JPG");}
43%{background-image: url("photos_23_6_22/chorale_etienne_44-min.JPG");}
44%{background-image: url("photos_23_6_22/chorale_etienne_45-min.JPG");}
45%{background-image: url("photos_23_6_22/chorale_etienne_46-min.JPG");}
46%{background-image: url("photos_23_6_22/chorale_etienne_47-min.JPG");}
47%{background-image: url("photos_23_6_22/chorale_etienne_48-min.JPG");}
48%{background-image: url("photos_23_6_22/chorale_etienne_49-min.JPG");}
49%{background-image: url("photos_23_6_22/chorale_etienne_50-min.JPG");}
50%{background-image: url("photos_23_6_22/chorale_etienne_51-min.JPG");}
51%{background-image: url("photos_23_6_22/chorale_etienne_52-min.JPG");}
52%{background-image: url("photos_23_6_22/chorale_etienne_53-min.JPG");}
53%{background-image: url("photos_23_6_22/chorale_etienne_54-min.JPG");}
54%{background-image: url("photos_23_6_22/chorale_etienne_55-min.JPG");}
55%{background-image: url("photos_23_6_22/chorale_etienne_56-min.JPG");}
56%{background-image: url("photos_23_6_22/chorale_etienne_57-min.JPG");}
57%{background-image: url("photos_23_6_22/chorale_etienne_58-min.JPG");}
58%{background-image: url("photos_23_6_22/chorale_etienne_59-min.JPG");}
59%{background-image: url("photos_23_6_22/chorale_etienne_60-min.JPG");}
60%{background-image: url("photos_23_6_22/chorale_etienne_61-min.JPG");}
61%{background-image: url("photos_23_6_22/chorale_etienne_62-min.JPG");}
62%{background-image: url("photos_23_6_22/chorale_etienne_63-min.JPG");}
63%{background-image: url("photos_23_6_22/chorale_etienne_64-min.JPG");}
64%{background-image: url("photos_23_6_22/chorale_etienne_65-min.JPG");}
65%{background-image: url("photos_23_6_22/chorale_etienne_66-min.JPG");}
66%{background-image: url("photos_23_6_22/chorale_etienne_67-min.JPG");}
67%{background-image: url("photos_23_6_22/chorale_etienne_68-min.JPG");}
68%{background-image: url("photos_23_6_22/chorale_etienne_69-min.JPG");}
69%{background-image: url("photos_23_6_22/chorale_etienne_70-min.JPG");}
70%{background-image: url("photos_23_6_22/chorale_etienne_71-min.JPG");}
71%{background-image: url("photos_23_6_22/chorale_etienne_72-min.JPG");}
72%{background-image: url("photos_23_6_22/chorale_etienne_73-min.JPG");}
73%{background-image: url("photos_23_6_22/chorale_etienne_74-min.JPG");}
74%{background-image: url("photos_23_6_22/chorale_etienne_75-min.JPG");}
75%{background-image: url("photos_23_6_22/chorale_etienne_76-min.JPG");}
80%{background-image: url("photos_23_6_22/chorale_etienne_77-min.JPG");}
85%{background-image: url("photos_23_6_22/chorale_etienne_78-min.JPG");}
90%{background-image: url("photos_23_6_22/chorale_etienne_79-min.JPG");}
100%{background-image: url("photos_23_6_22/chorale_etienne_01-min.JPG");}

            }

            figure > div
            {
                width: 200px;
                border: 10px;
                border-color:rgb(0,185,223);
                border-style:ridge;
                padding: 4px;
                margin-bottom: 20px;
                background-color: silver;
                font-size: 0.8em;
                position: relative;
                top: 15px;
            }
           /* figcaption 
            {
                display: table-caption;
                caption-side: bottom;
            }       */          
              /* article 
               {
                width: 900px;
                border: 10px;
                border-color:rgb(0,185,223);
                border-style:ridge;
                padding: 4px;
                margin: 20px;
                background-color: silver;
                font-size: 0.8em;
                position: relative;
                top : 50px;
                }  */
</style>