.clignotant{
	animation : clignotant 1s infinite;
}

@keyframes clignotant {
	0%{
		opacity : 1;
	}

	50%{
		opacity : 0;
	}

	100%{
		opacity : 1;
	}
}

:root{
	--inview-shiftX : 5vw;
	--inview-shiftY : 5vh;
}

.inview.from-right,
.inview.from-left,
.inview.from-bottom,
.inview.from-top
{
	opacity : 0;
    transition: transform 1.5s, opacity 1s;
}

.inview.from-right{
	transform: translateX(calc(1 * var(--inview-shiftX)));
}

.inview.from-left{
	transform: translateX(calc(-1 * var(--inview-shiftX)));
}

.inview.from-bottom{
	transform: translateY(var(--inview-shiftY));
  	padding-top : 0;
}

.inview.from-top{
  	transform: translateY(calc(-1 * var(--inview-shiftY)));
	padding-top : 0;
}

.inview.from-right.inview-frozen,
.inview.from-left.inview-frozen,
.inview.from-bottom.inview-frozen,
.inview.from-top.inview-frozen
{
  	transform: translateY(0);
	opacity : 1;
}

.card-container{
	animation: piano .75s forwards;
}

:root{
	--anim-delay: .25s
}

.card-container:nth-child(1){
	animation-delay: calc(1 * var(--anim-delay));
}

.card-container:nth-child(2){
	animation-delay: calc(2 * var(--anim-delay));
}

.card-container:nth-child(3){
	animation-delay: calc(3 * var(--anim-delay));
}

.card-container:nth-child(4){
	animation-delay: calc(4 * var(--anim-delay));
}



@keyframes piano {
	0%{
		opacity: 0;
	}

	100%{
		opacity: 1;
	}
}