/*
  main.css
  --> ce fichier contiendra la mise en page de votre affiche
*/


@font-face {
	font-family: "ChunkFivePrint";
	src:url(Chunkfive-webfont.woff) format("woff");
}


#affiche {
  /* vous pouvez éditer le bloc #affiche mais uniquement pour lui ajouter du padding ou changer sa mise en forme (changer sa couleur de fond, sa famille de caractères, etc.) de manière à ne pas casser la gestion du bloc dans la page */
  padding: 2vh;
}

/*
  début du code CSS pour la mise en forme des éléments de l’affiche
*/

h1 {
  font-size:4vh;
  margin-top: 0;
}

* {
  box-sizing: border-box; /* 1 */
}

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

  background-color:black;
  color: black;

  font-family: 'ChunkFivePrint', monospace;
}

#affiche {
  overflow: hidden;
  position: relative;
  width: 64vh;
  height: 90vh;
  /* le ratio est celui d’une feuille A4 (format ISO) environ */
  background: #444444;
  box-shadow: 0 4px 8px 0px rgba(0,0,0,.22);
}



h1,h2,h3,h4 {
  font-family: inherit;
  font-weight: normal;
}
@media screen and (max-width: 768px) {
  #affiche {
  }
}

.carte {
  float:left;
  position: relative;
  width:calc(49% - 2vh);
  height:calc(25% - 2vh);
  margin: 1vh;

}

.carte > .front{

  background: url(image/visuel1.jpg);
  background-size: 200%;
  /*background-repeat: no-repeat;*/
}

.carte#A1 > .front{
    background-position:0% 0%;
}
.carte#A2 > .front{
    BACKGROUND-POSITION: -100% 0%;
}

.carte#B1 > .front{
    background-position:0% 31%;
}

.carte#B2 > .front{
    background-position:99% 30%;
}

.carte#C1 > .front{
    background-position:0% 65%;
}

.carte#C2 > .front{
    background-position:99% 70%;
}

.carte#D1 > .front{
    background-position:0% 100%;
}
.carte#D2 > .front{
    background-position:99% 100%;
}

.carte#A1 > .back{
    background: url(image/ARTIZ.gif);
    background-size: 100%;
    background-position:50% 50%;
}
.carte#A2 > .back{
    background: url(image/NEW.gif);
    background-size: 122%;
    background-position:50% 50%;
}

.carte#B1 > .back{
    background: url(image/MUT.gif);
    background-size: 100%;

}

.carte#B2 > .back{
    background: url(image/PAVA.gif);
    background-size: 100%;
}

.carte#C1 > .back{
    background: url(image/DEM.gif);
    background-size: 100%;
}

.carte#C2 > .back{
    background: url(image/CHLOE.gif);
    background-size: 100%;
}

.carte#D1 > .back{
    background: url(image/LAM.gif);
    background-size: 110%;
}
.carte#D2 > .back{
    background: url(image/ELLE.gif);
    background-size: 100%;
}
  .flip3D{

  }
  .flip3D > .front{
    position:absolute;
    -webkit-transform: perspective( 600px ) rotateY( 0deg );
    transform: perspective( 600px ) rotateY( 0deg );
    width:100%;
    height:100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: -webkit-transform .5s linear 0s;
    transition: transform .5s linear 0s;
  }
  .flip3D > .back{
    position:absolute;
    -webkit-transform: perspective( 600px ) rotateY( 180deg );
    transform: perspective( 600px ) rotateY( 180deg );
    background:green;
    width:100%;
    height:100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: -webkit-transform .5s linear 0s;
    transition: transform .5s linear 0s;
  }
  .flip3D:hover > .front{
    -webkit-transform: perspective( 600px ) rotateY( -180deg );
    transform: perspective( 600px ) rotateY( -180deg );
  }
  .flip3D:hover > .back{
    -webkit-transform: perspective( 600px ) rotateY( 0deg );
    transform: perspective( 600px ) rotateY( 0deg );
  }

.flip3D:hover {
    z-index: 666
}

  .typo{
      transition: opacity 0.5s;
      font-family: "ChunkFivePrint";
      font-size:4em;
      word-wrap:break-word;
      position: absolute;
      /* pointer-events: none; */
      cursor: default;
      color: #EFD807;
      z-index: 2;
  }


#SAUVAGE{
    transform: translate3D(-6vh, 67vh, 0vh) rotate(-10deg);

}
#BRUTAL{
    transform: translate3D(22vh, 47vh, 0) rotate(11deg)
}
#ORGANIQUE{
transform: translate3D(2vh, 57vh, 0vh) rotate(-3deg);


}


#ORGANIQUE:hover{
    color: #FFFFFF;


}