#preloader {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 999999;
    -webkit-animation-name: color-transition;
    animation-name: color-transition;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}


/*This is the animation used to change colors; In this instance, I made sure to have the same color at 0% as I did at 100% */

@-webkit-keyframes color-transition {
    0% {
        background-color: #32B7D6;
    }
    33% {
        background-color: #96C256;
    }
    66% {
        background-color: #EB812D;
    }
    100% {
        background-color: #EEB81A;
    }
}

@keyframes color-transition {
    0% {
        background-color: #32B7D6;
    }
    33% {
        background-color: #96C256;
    }
    66% {
        background-color: #EB812D;
    }
    100% {
        background-color: #EEB81A;
    }
}
#preloader .preloader__logo {
    bottom: 47%;
    display: block;
    left: 0;
    margin: 0 auto 0px;
    max-width: 120px;
    position: absolute;
    right: 0;
    text-align: center;
}
#preloader .preloader__progress {
    display: block;
    left: 0;
    margin: 0 auto 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 35%;
}
#preloader .preloader__progress svg {
    height: 220px;
    width: 220px;
}
#preloader .preloader__logo,
#preloader .preloader__progress{
	transition: all 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0s;
	-webkit-transition: all 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0s;
	-o-transition: all 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0s;
}
#preloader .preloader__progress svg path {
    transition: all 0.2s ease-in-out 0s;
    -webkit-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
}