article {
    display: inline-block;
    -moz-perspective: 1500px;
    -webkit-perspective: 1500px;
    perspective: 1500px;
    margin: 0;
    height: 11em;
    padding: 1% 1%;
}

.box, .present {
    width: 100%;
    height: 100%;
}

.box {
	position: relative;
	text-align: center;
	cursor: pointer;
	background: #4FA600;
	-moz-transform: rotateY(-5deg);
	-webkit-transform: rotateY(-5deg);
	transform: rotateY(-5deg);
	-moz-transform-origin: 0 50%;
	-ms-transform-origin: 0 50%;
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
	-moz-perspective-origin: 0;
	-webkit-perspective-origin: 0;
	perspective-origin: 0;
	-moz-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-moz-perspective: 850px;
	-webkit-perspective: 850px;
	perspective: 850px;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	-moz-box-shadow: 8px 0px 8px 0 rgba(0,0,0,0.5);
	-webkit-box-shadow: 8px 0px 8px 0 rgba(0,0,0,0.5);
	box-shadow: 8px 0px 8px 0 rgba(0,0,0,0.5);
}

.box h2 {
    position: absolute;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 75%;
    left: 50%;
    margin: 0;
    font-size: 1.8em;
    line-height: 1.1;
    padding: 10px;
    color: white;
    -moz-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    background: #006600;
    border-radius: 50%;
    width: 50px;
    height: 50px;
}

.box h2::before {
    position: absolute;
    content: "";
    width: 60px;
    height: 60px;
    top: -70px;
    left: 50%;
    margin-left: -30px;
    background: url(img/ico-01.svg);
}

.bauble {
    left: 0;
    right: 0;
    height: 2.75em;
    position: relative;
    color: white;
    margin: 0 auto 0 auto;
    font-size: 4em;
    line-height: 24px;
    font-weight: bold;
    text-align: center;
    top: 0;
    bottom: 0;
    height: 100%;
}

.bauble a {
    position: absolute;
    bottom: 0;
    top: 0;
    right: 0;
    left: 0;
    display: table;
    width: 100%;
    height: 100%;
}

.bauble a span {
    font-size: 20px;
    font-weight: 300;
    color: #fff;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    padding: 8px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    display: table-cell;
    vertical-align: middle;
}

.present {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(102,102,102,0.3);
    z-index: -1;
}

article.open .box {
  -moz-transform: rotateY(-91deg);
  -webkit-transform: rotateY(-91deg);
  transform: rotateY(-91deg);
  -moz-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -moz-perspective-origin: 0;
  -webkit-perspective-origin: 0;
  perspective-origin: 0;
  /*background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMCIgeTE9IjAuMCIgeDI9IjAuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmZjRkNGQiLz48c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmMWExYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');*/
  background-size: 100%;
  /*background-image: -webkit-gradient(linear, 100% 0%, 0% 100%, color-stop(50%, #ff4d4d), color-stop(50%, #ff1a1a));
  background-image: -moz-linear-gradient(right top, #ff4d4d 50%, #ff1a1a 50%);
  background-image: -webkit-linear-gradient(right top, #ff4d4d 50%, #ff1a1a 50%);
  background-image: linear-gradient(to left bottom, #ff4d4d 50%, #ff1a1a 50%);*/
  background: #4FA600; /* previous #1ab6ea */
  -moz-transition: ease-in 0.5s;
  -o-transition: ease-in 0.5s;
  -webkit-transition: ease-in 0.5s;
  transition: ease-in 0.5s;
}

article.open .box h2 {
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

article.open .bauble {
  -webkit-animation-name: shake;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: shake;
  -moz-animation-duration: 1s;
  -moz-animation-timing-function: linear;
  -moz-transform-origin: center top;
  -ms-transform-origin: center top;
  -webkit-transform-origin: center top;
  transform-origin: center top;
}