#preloader_element {
    position: fixed;
    content: '';
    display: block;
    top: 50%;
    left: 50%;
    margin: 0 auto;
    opacity: 1;
    transform: translate(-50%, -50%);
    visibility: visible;
    transition: all ease-in-out 0.5s;
    z-index: 9999999999;
}

#preloader_element img {
    overflow:hidden;
    display:block;
    position:relative;
}

#preloader_element .preloader_logo:before {
    content:'';
    position:absolute;
    left:-50%;
    right:0;
    top:0;
    border-bottom: 6px solid #f4f4f4;
    margin-bottom:-6px;
    bottom:0;
    display:block;
    z-index: 1;
    transition:all ease-out 2s;
    background: -webkit-linear-gradient(90deg, rgba(244,244,244,.0),#f4f4f4);                       
    background: linear-gradient(90deg, rgba(244,244,244,.0),#f4f4f4);                                        
}

.preloader_logo {
    position:relative;
    padding-bottom:20px;
    border-bottom: 6px solid #fdc703;
}

#preloader_element.active .preloader_logo:before {
    left:200%;
    transition:all ease-out 2s;
}

#preloader_element span {
    display:block;
    text-align:center;
    margin-top:20px;
    color:#777;
    font-size:14px;
    text-transform:uppercase;
}

@media (max-width:500px) {
    #preloader_element {
        width: 70%;
    }
}