.loader-wrapper {

    position: fixed;

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background-color: #fff;

    

}

.loader-box {

        height: 300px;

        width: 100%;

        display: flex;

        align-items: center;

        justify-content: center;

        

    }

.icon {

            font-size: 5rem;

            transform: scale(1);

            background-color: rgb(255, 255, 255);

            border-radius: 150px;

            height: 150px;

            width: 150px;

            display: flex;

            align-items: center;

            justify-content: center;

            animation: loaderSize 2.5s infinite ease-in-out, loaderColor 7.5s infinite ease-in-out;

            color: #9356DC;

            box-shadow: 0 0 15px #fff;

        }

@keyframes loaderCircle {



}

@keyframes loaderSize {

    0% {

        transform: scale(1) rotate(0);

    }

    16% {

        transform: scale(0) rotate(0);

    }

    50% {

        transform: scale(1) rotate(0);

    }

    80% {

        transform: scale(1) rotate(-360deg);

    }

    100% {

        transform: scale(1) rotate(-360deg);

    }

}

@keyframes loaderColor {

    5% {

        color: #9356DC;

    }

    10% {

        color: #FF79DA;

    }

    39% {

        color: #FF79DA;

    }

    40% {

        color: #99E2D0;

    }

    70% {

        color: #99E2D0;

    }

    80% {

        color: #9356DC;

    }

    100% {

        color: #9356DC;

    }

}

.loader {

	  position: absolute;

	  left: 50%;

	  margin-left: -50px;

	  top: 50%;

	  margin-top: -50px;

	  

  }

  .ctn-preloader {

    align-items: center;

    -webkit-align-items: center;

    display: flex;

    display: -ms-flexbox;

    height: 100%;

    justify-content: center;

    -webkit-justify-content: center;

    position: fixed;

    left: 0;

    top: 0;

    width: 100%;

    z-index: 99999;

    background: #fff;

}