/* the background gradient */

#cj-wrapper {



    /* <------ first color ------>            <-- second color --> */

    background: #444; /* fallback */

    background: -moz-radial-gradient(center, ellipse cover, #444 0%, #000 100%);

    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #444), color-stop(100%, #000));

    background: -webkit-radial-gradient(center, ellipse cover, #444 0%, #000 100%);

    background: -o-radial-gradient(center, ellipse cover, #444 0%, #000 100%);

    background: -ms-radial-gradient(center, ellipse cover, #444 0%, #000 100%);

    background: radial-gradient(ellipse at center, #444 0%, #000 100%);



}



/* these numbers should be equal the width below divided by 2 */

#cj-container {



    margin: -12px 0 0 -12px;



}



/* the size of the preloader */

.cj-preloader {



    width: 24px;

    height: 24px;



    /* width divided by 8 */

    margin: 3px 0 0 3px;



}



/* preloader color */

.cj-preloader span {



    background-color: #FFF;



}



/* ********************************************************* */

/* UNDER THE HOOD: no need to edit unless you really want to */

/* ********************************************************* */



/* main background wrapper */

#cj-wrapper {



    width: 100%;

    height: 100%;



    position: fixed;

    top: 0;

    left: 0;

    z-index: 999;



    /* css3 transitions, first number represents duration, second represents delay */

    -webkit-transition: opacity 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.5s;

    -moz-transition: opacity 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.5s;

    -o-transition: opacity 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.5s;

    -ms-transition: opacity 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.5s;

    transition: opacity 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.5s;



}



/* gets applied when the window has loaded and starts the transition */

.cj-fade-out {



    opacity: 0;



}



/* main preloader container, center it on the screen */

#cj-container {



    position: absolute;

    left: 50%;

    top: 50%;



}



/* main preloader div */

.cj-preloader {



    display: inline-block;

    position: relative;



    -webkit-transition: opacity 0.4s cubic-bezier(0.230, 1.000, 0.320, 1.000);

    -moz-transition: opacity 0.4s cubic-bezier(0.230, 1.000, 0.320, 1.000);

    -o-transition: opacity 0.4s cubic-bezier(0.230, 1.000, 0.320, 1.000);

    -ms-transition: opacity 0.4s cubic-bezier(0.230, 1.000, 0.320, 1.000);

    transition: opacity 0.4s cubic-bezier(0.230, 1.000, 0.320, 1.000);



}



/* seperate class so we can add/remove it */

.cj-spin {



    -webkit-animation: rotator 1s linear infinite;

    -moz-animation: rotator 1s linear infinite;

    -o-animation: rotator 1s linear infinite;

    -ms-animation: rotator 1s linear infinite;

    animation: rotator 1s linear infinite;



}



/* the circles */

.cj-preloader div {



    position: absolute;



    width: 100%;

    height: 100%;



}



/* the first set of circles */

.cj-preloader div:first-child {



    -webkit-transform: rotate(45deg);

    -moz-transform: rotate(45deg);

    -o-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    transform: rotate(45deg);



}



/* individual circles */

.cj-preloader span {



    width: 25%;

    height: 25%;

    position: absolute;



    -moz-border-radius: 50%;

    -webkit-border-radius: 50%;

    border-radius: 50%;



}



/* position the second circle */

.cj-preloader div span:nth-child(1) {



    top: 0;

    left: 75%;



}



/* position the third circle */

.cj-preloader div span:nth-child(2) {



    top: 75%;

    left: 75%;

}



/* position the fourth circle */

.cj-preloader div span:nth-child(3) {



    top: 75%;

    left: 0;



}



/* below are the css3 keyframe animations that spin the preloader */

@-webkit-keyframes rotator {



    100% {

        -webkit-transform: rotate(360deg);

    }



}



@-moz-keyframes rotator {



    100% {

        -moz-transform: rotate(360deg);

    }



}



@-o-keyframes rotator {



    100% {

        -o-transform: rotate(360deg);

    }



}



@-ms-keyframes rotator {



    100% {

        -ms-transform: rotate(360deg);

    }



}



@keyframes rotator {



    100% {

        transform: rotate(360deg);

    }



}