/* clip-path circle */
.span-img {
	vertical-align: middle;
}
.spanned-img {
	height: 2ex;
}
.clip-path-anim {
	clip-path: circle(0);
	animation: clip-path-circle 2s ease .4s 1 normal both; 
	/*animation-timeline: scroll(y);*/
}
@keyframes clip-path-circle {
	0% { clip-path: circle(0%);}
	100% { clip-path: circle(90%);}
}
/********************/
.flipping-card {
	position: relative;
	perspective: 1000px;
	transform-style: preserve-3d;
	transition: transform .6s;
	min-height: 6em;
}
.flipping-card .inner {
	position: absolute;
	top: 0;
	left: 0;
	backface-visibility: hidden;
	height: 100%;
	width: 100%;
	padding: 1em;
}
.flipping-card .front {
	animation: vibrate 2s ease 0s infinite normal both;
}
.flipping-card .back {
	transform: rotateY(180deg);
}
.flipping-card:hover {
	transform: rotateY(180deg);
}
@keyframes vibrate {
	0% { transform: scale(1); }
	12% { transform: scale(1.02); }
	25% { transform: scale(0.95); }
	37% { transform: scale(1.02); }
	50 { transform: scale(1); }
}

@keyframes rotate-scale-up-hor {
	0% { transform: scale(1) rotateY(0); }
	50% { transform: scale(1.5) rotateY(180deg); }
	100% { transform: scale(1) rotateY(360deg); }
}
.rotate-scale-up-hor:hover {
	animation: rotate-scale-up-hor .75s linear 0.1s 1 normal both;
}

@keyframes rotate-diag {
	0% { transform: rotate3d(1, 1, 0, 0deg); }
	50% { transform: rotate3d(1, 1, 0, 180deg); }
	100% { transform: rotate3d(1, 1, 0, 360deg); }
}
.rotate-diag:hover {
	animation: rotate-diag .65s linear 0.1s 1 normal both;
}

@keyframes scale-up {
	0% { transform: scale(1); }
	50% { transform: scale(1.5); }
	100% { transform: scale(1); }
}
.scale-up:hover {
	animation: scale-up .5s linear 0.1s 1 normal both;
}

.voyages .steph-card:nth-of-type(3n+1) > figure:hover {
	animation: rotate-scale-up-hor .75s ease 0.1s 1 normal both;
}
.voyages .steph-card:nth-of-type(3n+2) > figure:hover {
	animation: rotate-diag .65s ease 0.1s 1 normal both;
}
.voyages .steph-card:nth-of-type(3n+3) > figure:hover {
	animation: scale-up .5s ease 0.1s 1 normal both;
}