/* Start Flip Style */
#theArt {
  padding: .5em;
  overflow: hidden;
  background: whitesmoke;
  width: 440px;
  margin: auto;
}

.artGroup {
  display: block;
}

.artwork {
  display: block;
  width: 100%;
  height: 100%;
}

.artGroup img {
  width: 100%;
  height: 100%;
 /* position: absolute;
  display: block;
  border: 1px solid #333; */
}

.artGroup .detail {
  display: block;
  background-color: #f4f9fb;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index:11;
  top: 0;
  left: 0;
  padding:15px 10px 5px 25px;
  border-bottom: 10px solid #71c0e7;
}

.artGroup .detail h3 {
  text-align: center;
}

.artGroup .detail p {
  font: 200 13px/1.2 'roboto', sans-serif;
  text-align: left;
  padding: 0 0.25em;
}

article {
  clear: both;
  font: 300 15px/1.2 'roboto', sans-serif;
  margin: 2em auto;
  max-width: 600px;
}

/* Older Browsers */

.artGroup.slide { overflow: hidden; }

.artGroup.slide .detail { bottom: -364px; }

/* Newer Browsers */

.artGroup.flip {
  -webkit-perspective: 800px;
  perspective: 800px;
}

.artGroup.flip .artwork {
  -webkit-transition: -webkit-transform 1s ease;
  transition: transform 1s ease;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.artGroup h6.ttt { -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg); }

.artGroup.flip .detail,
.artGroup.flip .theFlip {
  -webkit-transform: rotateY(-180deg);
  transform: rotateY(-180deg);
}

.artGroup.flip img, .artGroup.flip h6.ttt,
.artGroup.flip .detail, .bg-gray-light {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* Finish Flip Style */