shadow {
  box-shadow:0 6px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

figure.image_spin_button {
    font-family: 'Raleway', Arial, sans-serif;
    position: relative;
    float: left;
    overflow: hidden;
    margin: 10px 1%;
    /*min-width:230px;
  max-width:315px;*/
    width: 100%;
    color: #000000;
    text-align: center;
    -webkit-perspective: 50em;
    perspective: 50em;
}

figure.image_spin_button * {
  -webkit-box-sizing:padding-box;
  box-sizing:padding-box;
  -webkit-transition:all 0.2s ease-out;
  transition:all 0.2s ease-out;
}

figure.image_spin_button img {
  max-width:100%;
  vertical-align:top;
}

figure.image_spin_button figcaption {
  top:50%;
  left:20px;
  right:20px;
  position:absolute;
  opacity:0;
  z-index:1;
}

figure.image_spin_button h2, figure.image_spin_button h4 {
  margin:0;
}

figure.image_spin_button h2 {
  font-weight:600;
}

figure.image_spin_button h4 {
  font-weight:400;
  text-transform:uppercase;
}

figure.image_spin_button i {
  font-size:32px;
}

figure.image_spin_button:after {
  background-color:#ffffff;
  position:absolute;
  content:"";
  display:block;
  top:20px;
  left:20px;
  right:20px;
  bottom:20px;
  -webkit-transition:all 0.4s ease-in-out;
  transition:all 0.4s ease-in-out;
  -webkit-transform:rotateX(-90deg);
  transform:rotateX(-90deg);
  -webkit-transform-origin:50% 50%;
  -ms-transform-origin:50% 50%;
  transform-origin:50% 50%;
  opacity:0;
}

figure.image_spin_button a {
  left:0;
  right:0;
  top:0;
  bottom:0;
  position:absolute;
  z-index:1;
}

figure.image_spin_button:hover figcaption, figure.image_spin_button.hover figcaption {
  -webkit-transform:translateY(-50%);
  transform:translateY(-50%);
  opacity:1;
  -webkit-transition-delay:0.2s;
  transition-delay:0.2s;
}

figure.image_spin_button:hover:after, figure.image_spin_button.hover:after {
  -webkit-transform:rotateX(0);
  transform:rotateX(0);
  opacity:0.9;
}