/* CSS3 Create

Styles CSS liés à la démo:
-> Flip-card avec les transformations 3D CSS

*/

#menuTheme{
    width: 55%;
    min-height: 800px;
    height: auto;
    margin: 25px auto;
    padding: 20px;
}

/*****************************************************************/

.flip-box {
  display: inline-block;
  background-color: transparent;
  width: 200px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}


.flip-box-front {
  background-color: #bbb;
  color: black;
}

.flip-box-front p{position: absolute;top: 20px;width: 100%; background-color: rgb(118, 146, 60);color: white;padding:5px 0}

.flip-box-back {
  background-color: rgb(118, 146, 60);
  color: white;
  transform: rotateY(180deg);
}

.flip-box-back a{text-decoration: none;color: white}