#preloader{
    width:100%;
    height:100%;
    position:absolute;
    background: #fefefe;
}

#preloader > div{
    width: 200px;
    margin: auto !important;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    height: 300px;
    position: absolute;
}
#preloader img{
    width: 100px;
    /*animation: leaves 1s ease-in-out infinite alternate;
    -webkit-animation: leaves 1s ease-in-out infinite alternate;*/
    /* clear: both; */
    display: block;
    margin: auto !important;
}
#preloader span{
    text-align:center;
    margin-bottom:20px;
    padding-left:10px;
}
@keyframes  leaves {
    0% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
    100% {
        transform: scale(1.2);
        -webkit-transform: scale(1.2);
    }
}
@keyframes blink {
    /**
     * At the start of the animation the dot
     * has an opacity of .2
     */
    0% {
        opacity: .2;
    }
    /**
     * At 20% the dot is fully visible and
     * then fades out slowly
     */
    20% {
        opacity: 1;
    }
    /**
     * Until it reaches an opacity of .2 and
     * the animation can start again
     */
    100% {
        opacity: .2;
    }
}

#preloader i {
    /**
     * Use the blink animation, which is defined above
     */
    animation-name: blink;
    /**
     * The animation should take 1.4 seconds
     */
    animation-duration: 1.4s;
    /**
     * It will repeat itself forever
     */
    animation-iteration-count: infinite;
    /**
     * This makes sure that the starting style (opacity: .2)
     * of the animation is applied before the animation starts.
     * Otherwise we would see a short flash or would have
     * to set the default styling of the dots to the same
     * as the animation. Same applies for the ending styles.
     */
    animation-fill-mode: both;
}

#preloader i:nth-child(2) {
    /**
     * Starts the animation of the third dot
     * with a delay of .2s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .2s;
}

#preloader i:nth-child(3) {
    /**
     * Starts the animation of the third dot
     * with a delay of .4s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .4s;
}
#preloader-image-cont{
    width: 100px;
    top: 30px;
    bottom: 0;
    right: 0;
    left: 0;
    position: absolute;
    margin: auto !important;
}
.fadingEffect {
    position:absolute;
    top:0px; bottom:0; right:0;
    width:100%;
    background:#ffffffbf;
    -moz-animation: showHide 14s linear alternate infinite; /* Firefox */
    -webkit-animation: showHide 14s linear alternate infinite; /* Safari and Chrome */
    -ms-animation: showHide 14s linear alternate infinite; /* IE10 */
    -o-animation: showHide 14s linear alternate infinite; /* Opera */
    animation: showHide 14s linear alternate infinite;
}
@-webkit-keyframes showHide { /* Chrome, Safari */
    0% {width:100%}
    50% {width:0%}
    100% {width:100%;}
}
@-moz-keyframes showHide { /* FF */
    0% {width:100%}
    50% {width:0%}
    100% {width:100%;}
}
@-ms-keyframes showHide { /* IE10 */
    0% {width:100%}
    50% {width:0%}
    100% {width:100%;}
}
@-o-keyframes showHide { /* Opera */
    0% {width:100%}
    50% {width:0%}
    100% {width:100%;}
}
@keyframes showHide {
    0% {width:100%}
    50% {width:0%}
    100% {width:100%;}
}