body
{
    background: url("background_papier_modif_5.jpg") fixed no-repeat;
    background-color: black;
    background-size: cover	
}

@font-face
{
    font-family: 'gwachafont'; /* Nom que tu donnes à la police*/
    /*src: url('font/Tribal_Play.ttf');*/
    src: url('font/Quantum.otf'); /*dossier et nom de la police*/  */
}

img.title
{
    display: block;
    width: 1000px;
    height: 254px;
    margin-left: auto;
    margin-right: auto
}	

img.album
{
    display: block;
    width: 800px;
    height: 400px;
    border: 2px solid white;
    margin-left: auto;
    margin-right: auto
}

main
{
    width: 800px;
    margin-left: auto;
    margin-right: auto; 
}

table.class1
{
    width: 600px;
    height: 80px;
    padding-top : 20px;
    padding-bottom : 30px;
    border-spacing: 20px;
    margin-left: auto;
    margin-right: auto;
}

table.persos
{
    width: 800px;
    padding-top : 10px;
    padding-bottom : 30px;
    border-spacing: 0 0px ;
    margin-left: auto;
    margin-right: auto;
}


img.class1
{
    display: block;
    width: 800px;
    height: 533px;
    border: 2px solid white;
    margin-left: auto;
    margin-right: auto
}

img.flanh
{
    display: block;
    width: 400px;
    height: 267px;
    border: 2px solid white;
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px
}

img.class3
{
    display: block;
    width: 267px;
    height: 400px;
    border: 2px solid white;
    margin-left: auto;
    margin-right: auto;
}

p.texte
{ 
    color: #C6CBD2; 
    font-family: 'gwachafont'; 
    font-size: 20px; 
    line-height: 32px;
    margin-top: 10px;
    margin-bottom: 10px; 
    margin-left: 0px;
    margin-right: 0px;
    text-align: justify; 
}

p.textegw
{ 
    color: #E7D8D5; 
    font-family: 'gwachafont'; 
    font-size: 20px; 
    font-weight : normal;
    line-height: 32px;
    margin-top: 10px;
    margin-bottom: 10px; 
    margin-left: 0px;
    margin-right: 0px;
    text-align: justify; 
}

p.persos
{ 
    color: #C6CBD2; 
    font-family: 'gwachafont'; 
    font-size: 20px; 
    font-weight : normal;
    line-height: 32px;
    margin-top: 0px;
    margin-bottom: 10px; 
    margin-left: 0px;
    margin-right: 0px;
    text-align: left; 
}

p.flanh
{ 
    color: #C6CBD2; 
    font-family: 'gwachafont'; 
    font-size: 20px; 
    font-weight : normal;
    line-height: 32px;
    margin-top: 10px;
    margin-bottom: 10px; 
    margin-left: 10px;
    margin-right: 10px;
    text-align: left; 
}

p.flanhgw
{ 
    color: #E7D8D5; 
    font-family: 'gwachafont'; 
    font-size: 20px; 
    font-weight : normal;
    line-height: 32px;
    margin-top: 10px;
    margin-bottom: 10px; 
    margin-left: 10px;
    margin-right: 10px;
    text-align: left; 
}


p.concert
{ 
    color: #C6CBD2; 
    font-family: 'gwachafont'; 
    font-size: 22px;
    text-decoration:underline;
    line-height: 32px;
    margin: 20px 0px 20px 0px;
    text-align: justify; 
}

p.lieu
{ 
    color: #C6CBD2; 
    font-family: 'gwachafont'; 
    font-size: 20px; 
    line-height: 32px;
    margin: 20px 0px 20px 0px;
    text-align: center; 
}

p.djenata 
{ 
    color: #E7D8D5; 
    font-family: 'gwachafont';
    font-weight: normal; 
    font-size: 30px; 
    line-height: 32px;
    margin-left: 40px;
    margin-right: 40px;
    margin-top: 0px;
    margin-bottom: 30px;
    text-align: justify;  
}

p.titre 
{ 
    color: #E7D8D5; 
    font-family: 'gwachafont';
    font-weight: normal; 
    font-size: 30px; 
    line-height: 32px;
    margin-left: 40px;
    margin-right: 40px;
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: justify;  
}

a
{ 
    color: #C6CBD2; 
    text-align: justify;
    text-decoration: none;
    letter-spacing: 1px;  
}

a.concert
{ 
    line-height: 32px;
    margin: 40px 40px 40px 40px;
}

table.class2
{
    border-spacing: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}

hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, #333, #ccc, #333);
    margin-left: 30px;
    margin-right: 30px;
}

/* Buttons */

.button {
  display: inline-flex;
  height: 40px;
  width: 150px;
  border: 2px solid #BFC0C0;
  margin: 20px 20px 20px 20px;
  color: #C6CBD2;
  text-transform: uppercase;
  text-decoration: none;
  font-size: .8em;
  letter-spacing: 1.5px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}


#button-3 {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

#button-3 a {
  position: relative;
  transition: all .45s ease-Out;
}

#circle {
  width: 0%;
  height: 0%;
  opacity: 0;
  line-height: 40px;
  border-radius: 50%;
  background: #BFC0C0;
  position: absolute;
  transition: all .5s ease-Out;
  top: 20px;
  left: 70px;
}

#button-3:hover #circle {
  width: 200%;
  height: 500%;
  opacity: 1;
  top: -70px;
  left: -70px;
}

#button-3:hover {
  color: #2D3142;
}


/* On montre le premier texte */
.text-base{
   opacity:1;
}

/* On fait disparaitre le premier texte au passage de la souris. */
.button:hover span.text-base{
   opacity:0;
}

/* On cache le second texte */
.text-hover1{
   display:none;
}

/* On fait apparaitre le second texte au passage de la souris. */
.button:hover span.text-hover1{
   display:inherit;
   position:absolute;
   left : 41px;
}

/* On cache le second texte */
.text-hover2{
   display:none;
}

/* On fait apparaitre le second texte au passage de la souris. */
.button:hover span.text-hover2{
   display:inherit;
   position:absolute;
   left : 39px;
}

/* On cache le second texte */
.text-hover3{
   display:none;
}

/* On fait apparaitre le second texte au passage de la souris. */
.button:hover span.text-hover3{
   display:inherit;
   position:absolute;
   left : 41px;
}

/* On cache le second texte */
.text-hover4{
   display:none;
}

/* On fait apparaitre le second texte au passage de la souris. */
.button:hover span.text-hover4{
   display:inherit;
   position:absolute;
   left : 34px;
}

/* On cache le second texte */
.text-hover5{
   display:none;
}

/* On fait apparaitre le second texte au passage de la souris. */
.button:hover span.text-hover5{
   display:inherit;
   position:absolute;
   left : 39px;
}

iframe
{
    width : 800px ;
    height : 500px ;
    margin-left: auto;
    margin-right: auto;
}

table.footer
{
    margin-left: auto;
    margin-right: auto;
}

td.footer
{ 
    padding-right : 30px;
    padding-left : 30px;
}

img.footer 
{   
    width: 100px;
    height: 100px;
}