html,
  body {

    width: 100%;
    height: 100%; 
    font-family: Copperplate, sans-serif;
    background-color: #FFFFFF;
    
}

.logo {
  margin-top: -5%;
  padding-top: 0;
  float: left;
  width: 20%;
  height: auto;
}

/*menu*/

nav { 
  margin-top: 0px;
  padding-top: 0px;
  text-align: center;
}

nav ul li 
{  
    display: inline-block;
}

nav ul a 
{
  font-variant: small-caps;
  text-decoration: none;
  color: #C4414E;
  margin: 50px;
  font-size: 140%;

}

nav ul a:hover 
{
  color: #B059E3;
  }

#a_propos {
  color: #B059E3;
}

/*petites vignettes avec dates*/

#annee {
  margin-top: 0%;
  margin-bottom: 2%;
  color: #B059E3;
  text-align: center;
  font-variant: small-caps;
  font-size: 150%; 
}

.annee {
  width : 30%;
  height: auto;
}

#global {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
}

#cadre1 {  
  width: 30%;
  margin-top: 15%;
}

#cadre2 {  
  width: 30%; 
  margin-top: 15%;
}

#cadre3 {  
  width: 30%; 
  margin-top: 15%;
}

#cadre4 {  
  width: 30%; 
  margin-top: 15%;
}








/*block photos*/

#photos {

  padding-top: 10%;   
  height: auto;
  margin-left: 10%;
  position: relative;
}

.vignettes {
  width: 30%;  
  position: absolute;
  
}

.vignettes img {
  
  width:80%;
  margin-bottom: 10%;

}



#img33 {
    margin-left: 0%;
    margin-top: -25%;
    width: 100%;   
}

#img34 {
    margin-left: 110%;
    margin-top: -25%;
    width: 100%;   
}

#img35 {
    margin-left: 220%;
    margin-top: -25%;
    width: 80%;   
}

#img36 {
    margin-left: -20%;
    margin-top: 50%;
    width: 100%;   
}

#img37 {
    margin-left: 90%;
    margin-top: 55%;
    width: 100%;   
}

#img38 {
    margin-left: 205%;
    margin-top: 105%;
    width: 100%;   
}


#img39 {
    margin-left: -18%;
    margin-top: 125%;
    width: 100%;   
}

#img40 {
    margin-left: 95%;
    margin-top: 130%;
    width: 90%;   
}

#img41 {
   margin-left:-20%;
    margin-top: 200%;
    height: 100%;  
}

#img42 {
   margin-left:70%;
    margin-top:195%;
    height: 100%;   
}

#img43 {
   margin-left:195%;
   margin-top: 185%;
   width: 100%;   
}

#img44 {
   margin-left:155%;
   margin-top: 255%;
   height:90%; 
 }

 #img45 {
   margin-left:245%;
   margin-top: 255%;
   height:90%; 
 }

 #img46 {
   margin-left:10%;
    margin-top: 330%;
    width: 100%;  
}

#img47 {
  margin-left: 115%;
  margin-top: 380%;
  width: 100%;
}

#img48 {
  margin-left: 224%;
  margin-top: 380%;
  width:100%;
}

 #img49 {
   margin-left:-20%;
    margin-top: 400%;
    width: 100%;  
}

 #img50 {
   margin-left:90%;
    margin-top: 450%;
    height: 100%;  
}

 #img51 {
   margin-left:-20%;
    margin-top: 480%;
    width: 100%;  
}

 #img52 {
   margin-left:-15%;
    margin-top: 550%;
    height: 100%;  
}

 #img53 {
   margin-left:190%;
    margin-top: 450%;
    width: 100%;  
}

 #img54 {
   margin-left:180%;
    margin-top: 520%;
    width: 100%;  
}

 #img55 {
   margin-left:75%;
    margin-top: 575%;
    height: 95%;  
}

 #img56 {
   margin-left:160%;
    margin-top: 590%;
    width: 100%;  
}

 #img57 {
   margin-left:185%;
    margin-top: 660%;
    width: 100%;  
}

 #img58 {
   margin-left:-25%;
    margin-top: 680%;
    height: 90%;  
}

 #img59 {
   margin-left:68%;
    margin-top: 700%;
    width: 100%;  
}

 #img60 {
   margin-left:173%;
    margin-top:730%;
    width: 100%;  
}

 #img61 {
   margin-left:-30%;
    margin-top:810%;
    width: 100%;  
}

 #img62 {
   margin-left:190%;
    margin-top:805%;
    width: 100%;  
}
 #img63 {
   margin-left:85%;
    margin-top: 770%;
    height: 90%;  
}
 #img64 {
   margin-left:-25%;
    margin-top: 880%;
    width: 70%;  
}
 #img65 {
   margin-left:185%;
    margin-top: 880%;
    height: 90%;  
}

 #img66 {
   margin-left:65%;
    margin-top:900%;
    width: 100%;  
}

 #img67 {
   margin-left:-30%;
    margin-top:990%;
    width: 100%;  
}

 #img68 {
   margin-left:75%;
    margin-top:970%;
    width: 100%;  
}

 #img69 {
   margin-left:190%;
    margin-top:1005%;
    width: 100%;  
}