/* CORE CSS */
.flip-wrapp {
  margin: 40px 60px;
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
  display: inline-block;
  vertical-align: top;
}
/* Container box to set the sides relative to */
.cube {
  display: block;
  text-align: center;
  position: relative;
  width: 250px;
  height: 250px;
  -webkit-transition: all .35s ease-in-out;
  -moz-transition: all .35s ease-in-out;
  -o-transition: all .35s ease-in-out;
  transition: all .35s ease-in-out;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.default-state {
  height: 250px;
  width: 250px;
  -webkit-transition: all .35s linear;
  transition: all .35s linear;
  position: relative;
  display: block;
  padding: 10px;
  background-color: #fff;
}
.default-state h4 {
    margin: 20px 0 0 0;
    position: relative;
    display: inline-block;
    background-color: #E31E24;
    color: #fff;
    padding: 12px 30px;
    border-radius: 10px;
    font-size: 16px;
}
.small-shadow-7 {
    display: block;
    width: 122px;
    margin: -30px auto 16px;
}
.small-shadow-8 {
    display: block;
    width: 130px;
    margin: -30px auto 16px;
}
.small-shadow-9 {
    display: block;
    width: 220px;
    margin: -30px auto 16px;
}
.justin-image {
    margin-top: 20px;
    width: 80%;
}
.active-state {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0;
    text-align: center;
    width: 250px;
    display: block;
    height: 100%;
    background-color: #272822;
}
.active-state h4 {
  margin-top: 100px;
  font-size: 18px;
}
.active-state hr {
    width: 90px;
    color: #fff;
    margin: 10px auto;
}
.default-state {
  -webkit-transform: translateZ(130px);
  -moz-transform: translateZ(130px);
  -ms-transform: translateZ(130px);
  -o-transform: translateZ(130px);
  transform: translateZ(130px);
}
.flip-to-top .active-state {
  -webkit-transform: rotateX(87deg) translateZ(130px);
  -moz-transform: rotateX(87deg) translateZ(130px);
  -ms-transform: rotateX(87deg) translateZ(130px);
  -o-transform: rotateX(87deg) translateZ(130px);
  transform: rotateX(87deg) translateZ(130px);
}
.cube.flip-to-top:hover {
  -webkit-transform: rotateX(-87deg);
  -moz-transform: rotateX(-87deg);
  -ms-transform: rotateX(-87deg);
  -o-transform: rotateX(-87deg);
  transform: rotateX(-87deg);
}
.cube {
  text-align: center;
  margin: 0 auto;
}
.default-state,
.active-state {
  font-size: 16px;
  text-transform: uppercase;
  color: #fff;
  -webkit-transition: background 550ms ease;
  -moz-transition: background 550ms ease;
  -o-transition: background 550ms ease;
  transition: background 550ms ease;
}
.cube:hover .default-state {
  background: #fff;
}