html { -webkit-text-size-adjust: 100%;
    height: 100%;       
 }

body {
  font-family: Times, serif;
  line-height: 1.2em;
  letter-spacing: 0.5px;
  min-height: 100%;  
  font-size: 1.2em;
  width: 100%;
}

.content{
  background-color: #f2f2f2;
  width: 70%;
  border: 7px black solid;
  text-align: center;
  margin: 0 auto;
}

a{
  color: black
}

a:hover{
  color: blue;
}

img{
  width: 70%;
}

#langue{
  font-size: 1.5em;
  font-weight: bold;
  width: 90%;
  margin: 0.5em auto;
}

h1{
  display: inline-block;
  font-size: 1.5em;
  font-weight: bold;
  text-decoration: underline;
  margin-bottom: 1em;
}

h2{
  font-weight: bold;
  font-size: 2.5em;
  margin: 0em auto -0.2em auto;
}

#date{
  font-size: 1.5em;
  font-weight: bold;
  margin: 1em auto;
  text-align: center;
}

#manifesto{
  font-style: italic; 
  text-align: center;
}

p{
  text-align: left;
  width: 90%;
  margin: 1em auto;
}

#exposant{
  font-weight: bold;
}

.gallery{
  margin-bottom: 2.5em;
}

.gallery img{
  cursor: pointer;
}

#legende{
  margin-top: 2em;
  font-family: 'courier new';
  font-size: 0.6em;
  letter-spacing: 0;
  line-height: 1.5em;
  text-align: left;
}

#prev, #next{
  cursor: pointer;
}

.english{
  margin-top: 4em;
}

.english img{
  width: 70%;
  margin-bottom: 2em;
}

.footer img{
  width: 50%;
}


/*I P H O N E*/

@media only screen and (max-width: 550px) and (min-width: 0px) {

  .content{
    width: 90%;
    border: 5px black solid;
  }

  img{
  width: 90%;
  }

  body{
    font-size: 100%;
  }

  .english img{
  width: 90%;
  }

  .footer img{
  width: 70%;
}
}

/*I P A D*/

@media only screen and (max-width: 1200px) and (min-width: 550px) {

  .content{
    width: 80%;
    border: 6px black solid;
  }

  body{
    font-size: 100%;
  }

}