.preloader-perspective-img {
    animation: f 2s infinite ease-in-out
}

@keyframes f {
    0% {
        transform: rotateY(0deg)
    }
    50% {
        transform: rotateY(180deg)
    }
    to {
        transform: rotateY(1turn)
    }
}

.preloader-breath-img {
    animation-name: g;
    animation-duration: 1.8s;
    animation-delay: .2s;
    animation-timing-function: cubic-bezier(.73, .005, .42, 1.005);
    animation-iteration-count: infinite;
    animation-direction: alternate
}

@keyframes g {
    0% {
        opacity: .2
    }
    to {
        opacity: 1
    }
}


.demo-preloader {
    width: 100%;
    height: 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    background: #f3f3f3;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.demo-preloader--dark {
    background: #1f1c1c
}
.preloader-perspective-img img{
    max-width: 50px;
}