/* 
    Created on : 27.01.2022, 6:08:17
    Author     : Yakut
*/

[data-top-animate]{
    transition: .3s;
    opacity: 0;}

.active-img{transform: translate3d(0px, -35%, 0px) scale3d(0.5, 0.5, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);}
.active-text{transform: translate3d(0px, 20px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);}
[data-img], [data-text]{transition: .5s;}

[data-curtain-image]{
    transition: .8s;
    transform: rotateX(0deg);
    opacity: 1;}
[data-curtain-text]{
    transition: .8s;
    transform: rotateX(-180deg);
    opacity: 0;}
.active[data-curtain-image]{
    transform: rotateX(180deg);
    opacity: 0}
.active[data-curtain-text]{
    transform: rotateX(0deg);
    opacity: 1;}

/*inright*/
.inright{animation: inright 1.2s ease-in-out;}
@keyframes inright{
    0%{transform: translate(100px); opacity: 0;}
    100%{transform: translate(0px); opacity: 1;}
}
/*inleft*/
.inleft{animation: inleft 1.2s ease-in-out;}
@keyframes inleft{
    0%{transform: translate(-100px); opacity: 0;}
    100%{transform: translate(0px); opacity: 1;}
}
/*intop*/
.intop{animation: intop 1.2s ease-in-out;}
@keyframes intop{
    0%{transform: translate(0, -70px); opacity: 0;}
    100%{transform: translate(0, 0px); opacity: 1;}
}
/*inbottom*/
.inbottom{animation: inbottom 1.2s ease-in-out;}
@keyframes inbottom{
    0%{transform: translate(0, 70px); opacity: 0;}
    100%{transform: translate(0, 0px); opacity: 1;}
}
/*inner*/
.inner{animation: inner 1.2s ease-in-out;}
@keyframes inner{
    0%{transform: scale(.3); opacity: 0;}
    80%{transform: scale(1.2); opacity: .7;}
    100%{transform: scale(1); opacity: 1;}
}