@import url(https://fonts.googleapis.com/css?family=Cambay:400,700&subset=latin,latin-ext);
.flip-container, .front, .back {
  width: 220px;
  height: 220px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.flip-container {
  float: left;
  -moz-perspective: 1000;
  -webkit-perspective: 1000;
  perspective: 1000;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.flip-container:hover, .flip-container.hover {
  z-index: 2;
}

.up-bottom:hover .front, .up-bottom.hover .front {
  -o-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
.up-bottom:hover .back, .up-bottom.hover .back {
  -o-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
.up-bottom .back {
  -o-transform: rotateX(-180deg);
  -moz-transform: rotateX(-180deg);
  -ms-transform: rotateX(-180deg);
  -webkit-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
}

.left-right:hover .front, .left-right.hover .front {
  -o-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.left-right:hover .back, .left-right.hover .back {
  -o-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
.left-right .back {
  -o-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}

.front, .back {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  border: solid 2px #000;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-transition: ease-in-out 0.3s;
  -o-transition: ease-in-out 0.3s;
  -webkit-transition: ease-in-out 0.3s;
  transition: ease-in-out 0.3s;
}

.front {
  z-index: 2;
}
.front::after {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
}

.back {
  padding: 20px;
  text-align: center;
}
.back::after {
  width: 220px;
  height: 220px;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
  background-color: rgba(0, 0, 0, 0.66);
  -moz-transition: ease 0.2s;
  -o-transition: ease 0.2s;
  -webkit-transition: ease 0.2s;
  transition: ease 0.2s;
}
.back.still::after {
  background-color: rgba(0, 0, 0, 0.5);
}

.description, .price {
  z-index: 99;
  color: #fff;
  text-shadow: 1px 1px 3px #000;
}

.description {
  position: relative;
  font-family: 'Libre Franklin', sans-serif;
}

.price {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  margin: 0 auto 98px;
  font-size: 20px;
  font-family: 'Libre Franklin', sans-serif;
}

.product-1 .front {
  background: url("../img/celine.jpg");
}

.product-1 .back {
  background: url("../img/black.png");
}

.product-2 .front {
  background: url("../img/sebastien.jpg");
}

.product-2 .back {
  background: url("../img/black.png");
}

.owl {
  clear: both;
  padding: 7px;
  line-height: 1.4em;
  color: #aaa;
  text-shadow: 1px 2px 2px #111;
}
.owl a {
  text-decoration: none;
  color: #fff;
  -moz-transition: ease 0.1s;
  -o-transition: ease 0.1s;
  -webkit-transition: ease 0.1s;
  transition: ease 0.1s;
}
.owl a:hover {
  color: #b33;
}
.owl p {
  margin-bottom: 6px;
}