﻿.mini-loader {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 30px;
    right: -80px;
    margin: auto;
}

.item {
    width: 20px;
    height: 20px;
    position: absolute;
}

.item-1 {
    background-color: #2D383F;
    top: 0;
    left: 0;
    z-index: 1;
    animation: item-1_move 1.8s cubic-bezier(.6,.01,.4,1) infinite;
}

.item-2 {
    background-color: #7b9baa;
    top: 0;
    right: 0;
    animation: item-2_move 1.8s cubic-bezier(.6,.01,.4,1) infinite;
}

.item-3 {
    background-color: #2D383F;
    bottom: 0;
    right: 0;
    z-index: 1;
    animation: item-3_move 1.8s cubic-bezier(.6,.01,.4,1) infinite;
}

.item-4 {
    background-color: #7b9baa;
    bottom: 0;
    left: 0;
    animation: item-4_move 1.8s cubic-bezier(.6,.01,.4,1) infinite;
}

@keyframes item-1_move {
    0%, 100% {
        transform: translate(0, 0)
    }

    25% {
        transform: translate(0, 20px)
    }

    50% {
        transform: translate(20px, 20px)
    }

    75% {
        transform: translate(20px, 0)
    }
}

@keyframes item-2_move {
    0%, 100% {
        transform: translate(0, 0)
    }

    25% {
        transform: translate(-20px, 0)
    }

    50% {
        transform: translate(-20px, 20px)
    }

    75% {
        transform: translate(0, 20px)
    }
}

@keyframes item-3_move {
    0%, 100% {
        transform: translate(0, 0)
    }

    25% {
        transform: translate(0, -20px)
    }

    50% {
        transform: translate(-20px, -20px)
    }

    75% {
        transform: translate(-20px, 0)
    }
}

@keyframes item-4_move {
    0%, 100% {
        transform: translate(0, 0)
    }

    25% {
        transform: translate(20px, 0)
    }

    50% {
        transform: translate(20px, -20px)
    }

    75% {
        transform: translate(0, -20px)
    }
}



@media (max-width: 500px) {
    .mini-loader {
        position: absolute;
        width: 50px;
        height: 50px;
        top: 30px;
        right: 5px;
        margin: auto;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .mini-loader {
        position: absolute;
        width: 50px;
        height: 50px;
        top: 30px;
        right: 10px;
        margin: auto;
    }
}
