* {
 transition: .3s ease;   
}

/*--- Banner anim ---*/

.banner h1 {
    animation: banner-fade 2s ease-in-out forwards;
}

.banner h2,
.banner h4 {
    animation: banner-fade 2.5s ease-in-out forwards;
}

@keyframes banner-fade {
    from {
        opacity: 0;
        transform: translateY(60px);
    }
    
    70% {
        opacity: 0;
        transform: translateY(60px);
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}


/*--- image bg circle ---*/

.img-left .circle-image:before {
    animation: circle-left-anim 1200s linear infinite both;
}

.img-right .circle-image:before {
    animation: circle-right-anim 1200s linear infinite both;
}

@keyframes circle-left-anim {
    from {
        transform: rotate(-140deg);
    }
    
    to {
        transform: rotate(1400deg);
    }
}


@keyframes circle-right-anim {
    from {
        transform: rotate(-140deg);
    }
    
    to {
        transform: rotate(-1400deg);
    }
}


/*---- icon animation ----*/


.animation_container {
    position: relative;
    /*margin: auto;*/
    width: 64px !important; 
    height: 64px !important;
    margin-bottom: 20px;
    overflow: hidden;
}

.animation_container .canvas,
.animation_container .icon.hide {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

/*--- icon anim end---*/


/*-- scroll animation --*/

.animatable {
  visibility: hidden;
  -webkit-animation-play-state: paused;   
  animation-play-state: paused; 
}

/* show objects being animated */
.animated {
  visibility: visible;
  animation-fill-mode: both;
  animation-duration: .7s;
  animation-play-state: running;
}

.animated.moveUp {
	animation-name: moveUp;
}

.animated.slideRight {
	animation-name: slideRight;
}

.animated.slideLeft {
	animation-name: slideLeft;
}

@keyframes moveUp {
	0% {
		opacity: 0;
		transform: translateY(80px);
        -webkit-transform: translateY(80px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
        -webkit-transform: translateY(0);
	}
}

@keyframes slideRight {
	0% {
		opacity: 0;
		transform: translateX(80px);
        -webkit-transform: translateX(80px);
	}

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

@keyframes slideLeft {
	0% {
		opacity: 0;
		transform: translateX(-80px);
        -webkit-transform: translateX(-80px);
	}

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

/*-- scroll animation end --*/