/**
 *
 * 
 *  Nom du projet: Carte 3d à effet d'ouverture (format moyen)
    Description du projet: css et jquery 3d à effet ouverture flip
    Nom du fichier: fold.css
    Auteur: Gab full
    Auteur URI: 
    Version: 1.1
 *
 */
/*============================================
=              Index des sections          =
============================================*/
/** 
 *  1. CARTE STRUCURE (style commun)
 *  
 *  2. CARTE COUVERTURE
 *  
 *  3. CARTE INTERIEURE et ses variantes
 *  
 *  4. EFFETS STYLE D'OUVERTURE ET CLASSES 
 * 
 */
/** --------------------------------------- */
/*===================================
=            1. CARTE STRUCTURE & STYLE        =
===================================*/
.flp-wrap {
  box-sizing: border-box;
  background-repeat: no-repeat;
  position: relative;
  height: 480px;
  /*gérer la hauteur de la carte ici*/
  max-width: 510px;
  /*gérer la largeur de la carte ici*/
  top: 0;
  -webkit-perspective: 600px;
          perspective: 600px;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  /* box-shadow: 0px 2px 2px rgba(0,0,0,0.3);*/
  margin: 30px auto;
  /*pour obtenir une carte centrée*/
}

/*---------- style commun couverture et intérieur ----------*/
.flp-cover,
.flp-cover-clone,
.flp-inside,
.flp-inside-clone {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  transition: all .5s;
  overflow: hidden;
}

.flp-wrap div h3 {
  width: 200%;
  position: absolute;
  text-align: center;
  left: 0;
  top: 245px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 40px;
  padding: 0 10%;
}

.flp-wrap div p {
  width: 200%;
  position: absolute;
  text-align: center;
  left: 0;
  top: 200px;
}

.flp-wrap div p {
  padding: 0 10%;
  line-height: 18px;
  font-size: 17px;
  top: 240px;
}

/*---------- styles commun ----------*/
.flp-cover-clone,
.flp-inside-clone {
  left: auto;
  right: 0;
}

/*---------- style commun pour l'icône et l'image ----------*/
.flp-icon {
  position: absolute;
  top: 80px;
  text-align: center;
  left: 0;
  width: 200%;
  color: #18bc9c;
  /*couleur de l'icône sur la couverture de la carte*/
}
.flp-icon img {
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}
.flp-icon i {
  margin: 8px;
}

.flp-inside .flp-icon,
.flp-inside-clone .flp-icon {
  color: #fff;
  /*couleur pour l'icône de carte à l'intérieur*/
}
.flp-inside .flp-icon img,
.flp-inside-clone .flp-icon img {
  -webkit-filter: grayscale(0%);
          filter: grayscale(0%);
}

.flp-icon img.img-circle {
  height: 140px;
  width: 140px;
  border-radius: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border: 4px solid #eee;
  box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
}

/*=====================================
=            2. CARTE COUVERTURE          =
=====================================*/
/*carte style de la couverture*/
.flp-cover,
.flp-cover-clone {
  color: black;
  background-color: #fff;
  /*carte couleur de la couverture*/
  z-index: 10;
}

.flp-wrap .flp-cover h3,
.flp-wrap .flp-cover-clone h3 {
  color: black;
}

/*======================================
=            3. CARTE INTERIEURE      =
======================================*/
/*syle intérieur de la carte*/
.flp-inside,
.flp-inside-clone {
  background-color: #D7B700;
  /*carte couleur d'intérieur*/
  z-index: 9;
  color: #fff;
}

/*intérieur de la carte h3 style du lien*/
.flp-wrap a {
  color: #D6255C;
  text-decoration: none;
}

.flp-wrap .flp-inside h3,
.flp-wrap .flp-inside-clone h3 {
  color: #18bc9c;
}

.flp-wrap > .flp-inside-clone,
.flp-wrap > .flp-cover-clone {
  background-position: right -30px;
}

/*=======================================================
=           4. EFFETS STYLE D'OUVERTURE ET CLASSES          =
=======================================================*/
/* Effet pour ouverture côté droit*/
.frm-right > .flp-cover-clone,
.frm-right > .flp-inside {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: 0;
      -ms-transform-origin: 0;
          transform-origin: 0;
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
}

.frm-right.hover > .flp-cover-clone {
  -webkit-transform: rotateY(-45deg);
          transform: rotateY(-45deg);
  background-color: #f2f2f2;
}

.frm-right > .flp-inside {
  -webkit-transform-origin: right;
      -ms-transform-origin: right;
          transform-origin: right;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

.frm-right.active > .flp-cover-clone,
.frm-right.hover.active > .flp-cover-clone {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.frm-right.active > .flp-inside {
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
}

/*Effet pour ouverture côté gauche*/
.frm-left > .flp-cover,
.frm-left > .flp-inside-clone {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: 100%;
      -ms-transform-origin: 100%;
          transform-origin: 100%;
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
}

.frm-left.hover > .flp-cover {
  -webkit-transform: rotateY(45deg);
          transform: rotateY(45deg);
  background-color: #f2f2f2;
}

.frm-left > .flp-inside-clone {
  -webkit-transform-origin: 0%;
      -ms-transform-origin: 0%;
          transform-origin: 0%;
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.frm-left.active > .flp-cover,
.frm-left.hover.active > .flp-cover {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

.frm-left.active > .flp-inside-clone {
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
}

.active .flp-inside,
.active .flp-inside-clone {
  z-index: 11;
}

/*pour le droit à gauche et la moitié droite*/
.flp-wrap div.flp-cover-clone h3,
.flp-wrap div.flp-inside-clone h3,
.flp-wrap div.flp-cover-clone p,
.flp-wrap div.flp-inside-clone p,
.flp-cover-clone .flp-icon,
.flp-inside-clone .flp-icon {
  left: auto;
  right: 0;
}

.flp-wrap div.flp-inside h3,
.flp-wrap div.flp-inside-clone h3 {
  top: 245px;
}

/*=====  Fin de la feuille de style fold.css  ======*/