/* Preloader: START */
.preloader {
    background: #F9F9F9;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;
}
.preloader p {
    position: absolute;
    top: 48%;
    left: 50%;
    text-align: center;
    font-size: 20px;
    color: #333333;
}
.preloader:before, .preloader:after {
    content: "B";
    width: 24px;
    height: 24px;
    position: absolute;
    top: 40%;
    left: 40%;
    background-color: #9fa2a6;
    animation: squaremove 1s ease-in-out infinite;
    -webkit-animation: squaremove 1s ease-in-out infinite;
    font-size: 16px;
    color: #ffffff;
    text-align: center;
    font-weight: bold;
}
.preloader:after {
    content: "M";
    bottom: 0px;
    background-color: #F98A1F;
    animation-delay: 0.3s;
}
@keyframes squaremove {
    0%, 100%{
        -webkit-transform: translate(0,0) rotate(0);
        -ms-transform: translate(0,0) rotate(0);
        -o-transform: translate(0,0) rotate(0);
        transform: translate(0,0) rotate(0);
    }
    25%{
        -webkit-transform: translate(40px,40px) rotate(45deg);
        -ms-transform: translate(40px,40px) rotate(45deg);
        -o-transform: translate(40px,40px) rotate(45deg);
        transform: translate(40px,40px) rotate(45deg);
    }
    50%{
        -webkit-transform: translate(0px,80px) rotate(0deg);
        -ms-transform: translate(0px,80px) rotate(0deg);
        -o-transform: translate(0px,80px) rotate(0deg);
        transform: translate(0px,80px) rotate(0deg);
    }
    75%{
        -webkit-transform: translate(-40px,40px) rotate(45deg);
        -ms-transform: translate(-40px,40px) rotate(45deg);
        -o-transform: translate(-40px,40px) rotate(45deg);
        transform: translate(-40px,40px) rotate(45deg);
    }
}
@media all and (max-width: 900px) {
    .preloader p {
        left: 27%;
    }
    .preloader:before, .preloader:after {
        left: 13%;
    }
}
/* Preloader: END */