html {
  scroll-behavior: smooth;
}
.xAxisMove {
    animation: xAxisMove 5s linear infinite;
}
.yAxisMove {
    animation: yAxisMove 9s linear infinite;
}
.supreoX-shape-spin {
    animation: spin 7s alternate infinite;
}
.rotationMove {
        animation: rotationMove 8s alternate infinite;
}

.supreoX-tilt {
    animation: tilt 1s alternate infinite;
}

.spinMove {
    animation: spinMove 8s alternate infinite;
}
.supreox-logo img{
    animation: supreoXLogo 3s alternate infinite;
}

.supreoX-timeline-arrow img {
    display: block;
    width: 35px;
    height: 15px;
    transform: rotate(0);
    margin: -10px;
    animation: timelineAnimate 2s infinite; 
}

.supreoX-timeline-arrow img:nth-child(2) {
    animation-delay: -0.2s;
}

.supreoX-timeline-arrow img:nth-child(3) {
    animation-delay: -0.4s;
}

.supreox-rotatingSpin {

	webkit-animation: rotating 6s linear infinite;
    -moz-animation: rotating 6s linear infinite;
    -ms-animation: rotating 6s linear infinite;
    -o-animation: rotating 6s linear infinite; 
	animation: rotating 6s linear infinite;
}




/*----------------------------------
 * Keyframes Animation
 * ---------------------------------*/

@keyframes rotating {
	0% {
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-ms-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes timelineAnimate {
    0% {
        opacity: 0;
        transform: rotate(0) translate(10px, 2px);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: rotate(0deg) translate(38px, 1px);
    }
}

    
@keyframes xAxisMove {
    0% {
        transform: translateX(-25px)
    }

    50% {
        transform: translateX(0)
    }

    100% {
        transform: translateX(-25px)
    }
}


@keyframes yAxisMove {
    0% {
        transform: translateY(-30px)
    }

    50% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(-30px)
    }
}


@keyframes triAngleMove {
    0% {
        transform: translate(-25px,25px)
    }

    33% {
        transform: translate(-25px,-25px)
    }

    66% {
        transform: translate(25px,-25px)
    }

    100% {
        transform: translate(-25px,25px)
    }
}


@keyframes rotationMove {
    0% {
        transform: translate(-25px,0) rotate(0deg)
    }

    50% {
        transform: translate(25px,25px) rotate(360deg)
    }

    100% {
        transform: translate(0,-25px) rotate(0deg)
    }
}


@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    50% {
        transform: rotate(360deg)
    }

    100% {
        transform: rotate(0deg)
    }
}



@keyframes tilt {
    0% {
        transform: rotate(0deg)
    }

    60% {
        transform: rotate(0deg)
    }

    80% {
        transform: rotate(-10deg)
    }

    100% {
        transform: rotate(0deg)
    }
}



@keyframes clockSpin {
    0% {
        transform: translate(-50%,-50%) rotate(360deg)
    }

    100% {
        transform: translate(-50%,-50%) rotate(0deg)
    }
}

@keyframes antiClockSpin {
    0% {
        transform: translate(-50%,-50%) rotate(0deg)
    }

    100% {
        transform: translate(-50%,-50%) rotate(360deg)
    }
}

@keyframes spinMove {
    0% {
        transform: rotate(0deg)
    }

    50% {
        transform: rotate(360deg)
    }

    100% {
        transform: rotate(0deg)
    }
}

@keyframes supreoXWidth {

from {width: 0; height: 1px;}

to {width: 140px; height: 1px;} 

}

@keyframes supreoXHeight {
    
from {width: 1px; height: 0px;}

to {width: 1px; height: 140px;} 

}


@keyframes lineMoving {
    0 {
    width: 0;
    }
    100% {
    width: 140px;
    }
} 

    
@keyframes lineHightMoving {
    0 {
    height: 0;
    }
    100% {
    height: : 140px;
    }
} 


@keyframes bannerAnime {
    0% {
        opacity: 0
    }

    50% {
        opacity: 0
    }

    90% {
        opacity: 0
    }

    95% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}




@keyframes SupBtnhover {
    from {
        box-shadow: inset 0 0 0 0.01px #ED1C24;
    }
    to {
        box-shadow: inset 20em 0 0 0.01px #ED1C24;
        color: #fff;
    }
}

@keyframes SupBtnleave {
    from {
        box-shadow: inset 20em 0 0 0.01px #ED1C24;
        color: #fff;
    }
    to {
        box-shadow: inset 0 0 0 0.01px #ED1C24;
    }
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}



@keyframes supreoX-ripple{
	0% { transform: scale(1); }
	20% { transform: scale(1.1); }
	40% { transform: scale(1.2); }
	50% { transform: scale(1.3); }
	70% { transform: scale(1.2); }
	90% { transform: scale(1.1); }
	100% { transform: scale(1); }
}


@keyframes supreoXLogo{ 
	0% { transform: scale(1); }
	50% { transform: scale(1.3);  }
	100% { transform: scale(1);  }
}