/*Animations*/
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 hsla(0,0%,100%,.4)
    }

    70% {
        box-shadow: 0 0 0 45px hsla(0,0%,100%,0)
    }

    to {
        box-shadow: 0 0 0 0 hsla(0,0%,100%,0)
    }
}

@keyframes section-animation {
    0% {
        width: 0
    }

    15% {
        width: 100%
    }

    85% {
        opacity: 1
    }

    90% {
        width: 100%;
        opacity: 0
    }

    to {
        width: 0;
        opacity: 0
    }
}

@keyframes about-sm {
    to {
        transform: translateY(60px)
    }

    to {
        transform: translateY(50px)
    }
}

@keyframes hero-thumb-animation {
    0% {
        transform: translateY(-20px)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes tpleftright {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(-20px)
    }
}

@keyframes tprotate {
    0% {
        transform: rotateY(0deg)
    }

    to {
        transform: rotateY(1turn)
    }
}

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

    to {
        transform: translateY(20px)
    }
}

@keyframes lineDash {
    0% {
        stroke-dashoffset: 0
    }

    to {
        stroke-dashoffset: 1000
    }
}

@keyframes lineDash-2 {
    0% {
        stroke-dashoffset: 0
    }

    to {
        stroke-dashoffset: -1000
    }
}

@keyframes scroll {
    0% {
        transform: translateY(0)
    }

    to {
        transform: translateY(8px)
    }
}

@keyframes RL_smooth {
    0% {
        transform: translateX(0)
    }

    50% {
        transform: translateX(5px)
    }

    to {
        transform: translateX(0)
    }
}

@keyframes slide_up_down {
    0% {
        transform: translateY(0)
    }

    to {
        transform: translateY(-20px)
    }
}

@keyframes tptranslateX2 {
    0% {
        transform: translateX(-30px)
    }

    to {
        transform: translateX(20px)
    }
}

@keyframes rotate-center {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(1turn)
    }
}

@keyframes scale_up_down {
    0% {
        transform: scale(.9)
    }

    to {
        transform: scale(1)
    }
}

@keyframes dash {
    to {
        stroke-dashoffset: 0px;
        stroke-dasharray: 3000
    }
}

@keyframes tpupdown {
    0% {
        transform: translateY(0)
    }

    to {
        transform: translateY(-20px)
    }
}

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

    to {
        transform: rotate(-6deg)
    }
}

@keyframes borderanimate2 {
    0% {
        transform: translate(-50%,-50%) scale(.8)
    }

    60% {
        opacity: 1
    }

    to {
        transform: translate(-50%,-50%) scale(2.5);
        opacity: 0
    }
}

@keyframes bounceInUp {
    0% {
        opacity: 0;
        transform: translateY(2000px)
    }

    60% {
        opacity: 1;
        transform: translateY(-30px)
    }

    80% {
        transform: translateY(10px)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes about-circle {
    0% {
        transform: translateX(100px)
    }

    to {
        transform: translateX(0)
    }
}

@keyframes services-triangle {
    0% {
        transform: rotate(0deg) translateX(-50px)
    }

    to {
        transform: rotate(1turn) translateY(100px)
    }
}

@keyframes hero-3-dot-2 {
    0% {
        transform: translateY(-50px)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes tfLeftToRight {
    49% {
        transform: translateX(30%)
    }

    50% {
        opacity: 0;
        transform: translateX(-30%)
    }

    51% {
        opacity: 1
    }
}

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

    to {
        transform: rotate(1turn)
    }
}

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

    to {
        transform: rotate(1turn)
    }
}

@keyframes circle-animations {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

@keyframes moving {
    0% {
        transform: translatey(0)
    }

    20% {
        transform: translateX(-50px)
    }

    50% {
        transform: translatey(-40px)
    }

    to {
        transform: translatey(0)
    }
}

@keyframes leftright {
    0% {
        transform: translatex(0)
    }

    50% {
        transform: translateX(100%)
    }

    to {
        transform: translateX(0)
    }
}

@keyframes movinglight {
    0% {
        transform: translatey(0)
    }

    20% {
        transform: translateX(-70px)
    }

    50% {
        transform: translatey(-70px)
    }

    to {
        transform: translatey(0)
    }
}

@keyframes movinglight2 {
    0% {
        transform: translatey(0)
    }

    20% {
        transform: translateX(70px)
    }

    50% {
        transform: translatey(70px)
    }

    to {
        transform: translatey(0)
    }
}

@keyframes movingtop {
    0% {
        transform: translatey(0)
    }

    20% {
        transform: translatey(70px)
    }

    50% {
        transform: translatey(-70px)
    }

    to {
        transform: translatey(0)
    }
}

@keyframes circle-animation {
    0% {
        right: 0
    }

    50% {
        right: 100%
    }

    to {
        right: 0
    }
}

@keyframes section_stroke {
    0% {
        stroke-dashoffset: 560
    }

    50% {
        stroke-dashoffset: 560
    }

    to {
        stroke-dashoffset: 0
    }
}

@keyframes headerSlideDown {
    0% {
        margin-top: -150px
    }

    to {
        margin-top: 0
    }
}

@keyframes movingleftright1 {
    0% {
        transform: translateX(0) translateY(0)
    }

    40% {
        transform: translateX(50px) translateY(-50px)
    }

    75% {
        transform: translateX(200px)
    }

    to {
        transform: translateY(0) translateX(0)
    }
}

@keyframes circle-animation-2 {
    0% {
        left: 0
    }

    50% {
        left: 100%
    }

    to {
        left: 0
    }
}

@keyframes scroll1 {
    0% {
        top: 0
    }

    50% {
        top: 95%
    }

    to {
        top: 0
    }
}

@keyframes movingX {
    0% {
        transform: translateY(0) rotateX(0deg)
    }

    50% {
        transform: translateY(calc(100vh - 100%))
    }

    51% {
        transform: translateY(calc(100vh - 100%)) rotateX(180deg)
    }

    to {
        transform: translateY(0) rotateX(180deg)
    }
}

@keyframes tracking-in-contract-bck {
    0% {
        letter-spacing: 20px;
        transform: translateZ(150px);
        opacity: 0
    }

    40% {
        opacity: .6
    }

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

@keyframes tracking-in-contract-bck-2 {
    0% {
        letter-spacing: 20px;
        transform: translateZ(150px) translateY(150px);
        opacity: 0
    }

    40% {
        opacity: .6
    }

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

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

    to {
        transform: rotate(1turn)
    }
}

@keyframes zoom {
    0% {
        transform: scale(.7)
    }

    50% {
        transform: scale(1)
    }

    to {
        transform: scale(.7)
    }
}

@keyframes sliderShape {
    0%,to {
        border-radius: 42% 58% 70% 30%/45% 45% 55% 55%;
        transform: translateZ(0) rotate(.01deg)
    }

    34% {
        border-radius: 36% 64% 41% 59%/54% 41% 59% 46%;
        transform: translate3d(1px,5px,2px) rotate(.01deg)
    }

    50% {
        transform: translateZ(0) rotate(.01deg)
    }

    67% {
        border-radius: 100% 60% 60% 100%/100% 100% 60% 60%;
        transform: translate3d(-1px,-3px,-2px) rotate(.01deg)
    }
}

@keyframes zoom2 {
    0% {
        transform: scale(.9)
    }

    50% {
        transform: scale(1)
    }

    to {
        transform: scale(.9)
    }
}

@keyframes wobble-vertical {
    10% {
        transform: translateY(-10px)
    }

    50% {
        transform: skew(15deg)
    }

    80% {
        transform: rotate(10deg)
    }

    to {
        transform: translate(0)
    }
}

@keyframes section-highlight {
    0% {
        width: 0
    }

    to {
        width: 100%
    }
}

@keyframes widthcalc {
    0% {
        width: 20%
    }

    50% {
        width: 50%
    }

    75% {
        width: 90%
    }

    90% {
        opacity: 75%
    }

    90% {
        opacity: 100%
    }
}

@keyframes bounceRight {
    0%,20%,50%,80%,to {
        transform: translateY(0)
    }

    40% {
        transform: translateY(-35px)
    }

    60% {
        transform: translateY(-20px)
    }
}

@keyframes icon-bounce {
    0%,20%,50%,80%,to {
        transform: translateY(0)
    }

    40% {
        transform: translateY(-10px)
    }

    60% {
        transform: translateY(-5px)
    }
}

@keyframes light-one {
    0% {
        opacity: 1
    }

    25% {
        opacity: .4
    }

    50% {
        opacity: .6
    }

    75% {
        opacity: .8
    }

    to {
        opacity: 1
    }
}