.cc-figure--ruby {
	background-color: #17819c;
}

.cc-figure--ruby  > a > img {
	opacity: 0.7;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(1.15);
	transform: scale(1.15);
}

.cc-figure--ruby:hover  > a > img {
	opacity: 0.5;
	-webkit-transform: scale(1);
	transform: scale(1);
}

.cc-figure--ruby .slot-1 {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
}

.cc-figure--ruby  .slot-2 {
	margin: 1em 0 0;
	padding: 3em;
	border: 1px solid #fff;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,20px,0) scale(1.1);
	transform: translate3d(0,20px,0) scale(1.1);
} 

.cc-figure--ruby:hover  .slot-1 {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.cc-figure--ruby:hover  .slot-2 {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0) scale(1);
	transform: translate3d(0,0,0) scale(1);
}


.cc-figure--ruby .figcaption {
	display: flex;
    align-items: center;
    justify-content: center;
}
.cc-figure--ruby .figcaption > div {
	width: 100%;
}