* {
 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;
}

#canvas_investment01 {
    width: 50px !important;
    height: 50px !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*--- 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 --*/


/*-- Marketplace animation --*/

.marketplace-logo-content {
    width: 150%;
    background: #fbfbfb;
    overflow: hidden;
    padding: 80px 20px;
    display: flex;
    flex-wrap: wrap;
}

.marketplace-logos {
    width: 100vw;
    margin: 10px 0;
    display: flex;
    align-items: center;
}

@media(min-width: 1200px) {
    .marketplace-logos:nth-child(odd).animated {
        animation: logoScrollingLeft_1200 5s linear infinite;
    }
    
    .marketplace-logos:nth-child(even).animated {
        animation: logoScrollingRight_1200 5s linear infinite;
    }
}

@media(max-width: 1200px) {
    .marketplace-logos:nth-child(odd).animated {
        animation: logoScrollingLeft_1100 5s linear infinite;
    }
    
    .marketplace-logos:nth-child(even).animated {
        animation: logoScrollingRight_1100 5s linear infinite;
    }
}

.marketplace-logos .logo-item {
    width: auto;
    height: 70px;
    margin: 0 16px;
    display: inline-flex;
    align-items: center;
}

.logo-item img {
    /*max-width: 100%;*/
    max-height: 60px;
    object-fit: contain;
}


@keyframes logoScrollingLeft_1200 {
  0% { 
    transform: translateX(15px); 
  }
  100% { 
    transform: translatex(-45vw);
  }
}

@keyframes logoScrollingRight_1200 {
  0% { 
    transform: translatex(-35vw);
  }
  100% { 
    transform: translatex(15px);
  }
}

@keyframes logoScrollingLeft_1100 {
  0% { 
    transform: translateX(15px); 
  }
  100% { 
    transform: translatex(-65vw);
  }
}

@keyframes logoScrollingRight_1100 {
  0% { 
    transform: translatex(-54vw);
  }
  100% { 
    transform: translatex(15px);
  }
}

/*-- Marketplace animation end --*/



/*-- Complete Advice - circle chart --*/

.circle-chart__circle {
    animation: circle-chart-fill 2s reverse; 
    transform: rotate(-90deg); 
    transform-origin: center;
    /*animation-delay: 1s;*/
    display: block;
    
}


@keyframes circle-chart-fill {

    to { 
        stroke-dasharray: 0 282.6; 
    }
}



/*-- Complete Advice - circle chart End--*/