@charset "utf-8";
/* CSS Document */

.textEffectContentRight {
    position: relative;
    right: -200px;

    opacity: 0;

    transition: 1s;
}
.textEffectContentLeft {
    position: relative;
    left: -200px;

    opacity: 0;

    transition: 1s;
}
.textEffectContentTop {
    position: relative;
    top: -100px;

    opacity: 0;

    transition: 1s;
}
.textEffectContentBottom {
    position: relative;
    bottom: -100px;

    opacity: 0;

    transition: 1s;
}
    .textEffectContentRight.active {
        right: 0;

        opacity: 1;

        transition: 1s;
    }
	.textEffectContentLeft.active {
        left: 0;

        opacity: 1;

        transition: 1s;
    }
	.textEffectContentTop.active {
        top: 0;

        opacity: 1;

        transition: 1s;
    }
	.textEffectContentBottom.active {
        bottom: 0;

        opacity: 1;

        transition: 1s;
    }

/* */
.animation-01 {
	position: relative;
	bottom: -40px;

	opacity: 0;
}
	.animation-01.active {
		bottom: 0;

		opacity: 1;

		transition: all 0.5s;
	}

/* */
@-webkit-keyframes feather-fall {
    0% {
        top: -10%;
    }
    100% {
        top: 100%;
    }
}

@-webkit-keyframes feather-shake {
    0%,
    100% {
    	transform: translateX(0);
    }
    50% {
    	transform: translateX(80px);
    }
}

@keyframes feathers-fall {
	0% {
		top: -10%;
	}
	100% {
		top: 100%;
	}
}

@keyframes feathers-shake {
	0%,
	100% {
		transform: translateX(0);
	}
	50% {
		transform: translateX(100px);
	}
}

.feather {
	position: absolute;
	top: -200px;

	z-index: 0;

    user-select: none;

	animation-name: feathers-fall, feathers-shake;
	animation-timing-function: linear, ease-in-out;
	animation-iteration-count: 1, infinite;
	animation-play-state: running, running;
}
	.feather:nth-of-type(1) {
		right: 42%;
        animation-delay: 1.0s;
		animation-duration: 2.8s, 2s;
	}
	.feather:nth-of-type(2) {
		right: 25%;
		animation-delay: 1.6s;
		animation-duration: 2.5s, 1.5s;
	}
    .feather:nth-of-type(3) {
		right: 12%;
		animation-delay: 2.0s;
		animation-duration: 1.9s, 1.2s;
	}

    .feather:nth-of-type(1) img {
        width: 70%;

        transform: rotate(-8deg);
    }
    .feather:nth-of-type(2) img {
        width: 60%;

        transform: rotate(45deg);
    }
    .feather:nth-of-type(3) img {
        width: 40%;

        transform: rotate(-25deg);
    }