/***************************************************************************/
/* Animations                                                              */
/***************************************************************************/

/* .class{
    max-height : 0;
    animation : 2s name;
}

@keyframes name{
    0%{

    }

    100%{

    }
} */

/**********effets from---**********/

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

.inview.from-right,
.inview.from-left,
.inview.from-bottom,
.inview.from-top
{
	opacity : 0;
	position: relative;
    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.inview-frozen{
  	transform: translateY(0);
	opacity : 1;
}