/* all keyframes end */

.slide-right {
    animation: slide-right 2s infinite alternate both;
}

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

.slide-top {
	animation: slide-top 2s linear infinite alternate both;
}

  @keyframes slide-top {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(40px);
    }
  }

  .slide-bottom {
        animation: slide-bottom 2s linear infinite alternate both;
}

  @keyframes slide-bottom {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-40px);
    }
  }

.slide-left {
	animation: slide-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate both;
}

@keyframes slide-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100px);
  }
}

/* custom keyframes */

@keyframes chatIcon{
    0%{
        background: red;
    }
    50%{
        background: var(--secondary-background-color);
    }
    100%{
        background: red;
    }
}

@keyframes rotatebook{
    0%{
        transform: rotate3d(0, 1, 0, 0deg);
    }

    50%{
        transform: rotate3d(0, 1, 0, 30deg);
    }

    100%{
        transform: rotate3d(0, 1, 0, 0deg);
    }
}

.scale-up-center {
	    animation: scale-up-center 2s linear infinite alternate both;
}


@keyframes scale-up-center {
  0% {
        transform: scale(0.5);
  }
  100% {
        transform: scale(1);
  }
}

@keyframes vectorshadow{
    0% {
        background: transparent;
        box-shadow: 0px 0px 5px transparent;
    }

    25% {
        background: #71befa57;
        box-shadow: 1px 0px 100px #71befaa3;
    }

    50% {
        background: transparent;
        box-shadow: 0px 0px 5px transparent;
    }

    75% {
        background: #71befa57;
        box-shadow: 1px 0px 100px #71befabf;
    }

    100% {
        background: transparent;
        box-shadow: 0px 0px 5px transparent;
    }
}

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

    100% {
        transform: rotate(360deg);
    }
}

/* custom keyframes end */

/* all keyframes end */