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;
  }

#agenda {
  color: #B059E3;
}

/*image page d'accueil*/

.carton_1 {
margin-top: 2%; 
width: 50%;
height: auto;

display: block;
margin-left: 30%;
margin-right: auto; 
}

/*photos artistes*/

#photos {

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

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

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

}

/*images par images*/

#vignette1 {
    margin-left: 10%;
    margin-top: 0%;
    width: 35%; 
}

#vignette2 {
    margin-left: 50%;
    margin-top: 0%;
    width: 30%;

}

#vignette3 {
    margin-left: 10%;
    margin-top: 25%;
    width: 35%; 
}

#vignette4 {
    margin-left: 50%;
    margin-top: 47%;
    width: 35%; 
}

#vignette5 {
    margin-left: 10%;
    margin-top: 50%;
    width: 35%; 
}

#vignette6 {
    margin-left: 50%;
    margin-top: 72%;
    width: 35%; 
}

#vignette7 {
    margin-left: 10%;
    margin-top: 75%;
    width: 35%; 
}

#vignette8 {
    margin-left: 50%;
    margin-top: 98%;
    width: 30%; 
}

#vignette9 {
    margin-left: 10%;
    margin-top: 100%;
    width: 35%; 
}

#vignette10 {
    margin-left: 50%;
    margin-top: 146%;
    width: 30%; 
}

#vignette11 {
    margin-left: 10%;
    margin-top: 125%;
    width: 35%; 
}

#vignette12 {
    margin-left: 50%;
    margin-top: 193%;
    width: 35%;
}


#vignette13 {
    margin-left: 10%;
    margin-top: 150%;
    width: 30%; 
}

#vignette14 {
    margin-left: 10%;
    margin-top: 197%;
    width: 35%; 
}
#vignette15 {
    margin-left: 10%;
    margin-top: 248%;
    width: 35%; 
}


#vignette16 {
    margin-left: 50%;
    margin-top: 218%;
    width: 30%; 
}

#vignette17 {
    margin-left: 10%;
    margin-top: 222%;
    width: 35%; 
}

#vignette18 {
    margin-left: 50%;
    margin-top: 265%;
    width: 35%; 
}

#vignette19 {
    margin-left: 10%;
    margin-top: 274%;
    width: 35%; 
}

#vignette20 {
    margin-left: 50%;
    margin-top: 290%;
    width: 35%; 
}



/*colonnes pour programme*/

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



#cadre1 {  
  width: 50%;
  margin-top: 265%;
  margin-left: 15%;
  margin-right: 0;
}

/*gif*/

.gif_voulus {
margin-top: 10%; 
width:35%;
height: auto;
display: block;
margin-left: 66%;
margin-right: auto;  
margin-bottom: 2%;
}



#cadre2 {  
  text-align: justify;
  width: 50%; 
  margin-top: 280%;
  }

/*programme*/



#liste li {  

font-family: old standard TT;
list-style : none ;
line-height: 2em;
margin-bottom: 1em;
margin-top: 25%;
}

.programme {
  margin-left: 35%;
  text-decoration: none;
  color: black;
  font-weight: bold;
  font-variant: small-caps;
  color: #B059E3;
}