.reveal {
    position: relative;
    opacity: 0;
}

.reveal.active {
    opacity: 1;
}

/* intro animation */
.slide-right {
    animation: slide-right 2s ease 0s 1 normal forwards;
}

@keyframes slide-right {
    0% {
        opacity: 0;
        transform: translateX(-250px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* counter animation */

.active.fade-in {
    animation: fade-in 2s ease 0s 1 normal forwards;
}

@keyframes fade-in {
    0% {
        opacity: 0;
        transform: scale(0.6);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* info card animation */
.active.scale_1 {
    animation: scale-1 1s ease 0s 1 normal forwards;
}

.active.scale_2 {
    animation: scale-1 2s ease 0s 1 normal forwards;
}

.active.scale_3 {
    animation: scale-1 3s ease 0s 1 normal forwards;
}

@keyframes scale-1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

/* banner animation */
.active.swing{
    animation: swing 2s ease 0s 1 normal forwards;
}

@keyframes swing {
	0% {
		opacity: 0;
		transform: rotateY(100deg);
		transform-origin: left;
	}

	100% {
		opacity: 1;
		transform: rotateY(0);
		transform-origin: left;
	}
}

/* service section */
.active.fade_1{
    animation: fade 2s ease 0s 1 normal forwards;
}
.active.fade_2{
    animation: fade 3s ease 0s 1 normal forwards;
}
.active.fade_3{
    animation: fade 4s ease 0s 1 normal forwards;
}

@keyframes fade {
	0% {
		opacity: 0;
		transform: scale(0.6);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

/* hire section */
.active.scale_up_center{
    animation: scale-up-center 2s ease 0s 1 normal forwards;
}
@keyframes scale-up-center {
	0% {
		transform: scale(0.5);
	}

	100% {
		transform: scale(1);
	}
}