.loading-div{
    width:100vw;
    height:100vh;
    background:rgba(0,0,0,0.7);
    position:fixed;
    top:0;
    left:0;
    z-index:9999;
}
.tetrominos {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-112px, -96px);
}

.tetromino {
    width: 96px;
    height: 112px;
    position: absolute;
    transition: all ease 0.3s;
}

.box1 {
    animation: tetromino1 1.5s ease-out infinite;
    background: url('/img/aqaba_small.jpg') no-repeat top center;
}

.box2 {
    animation: tetromino2 1.5s ease-out infinite;
    background: url('/img/dead_sea_small.jpg') no-repeat top center;
}

.box3 {
    animation: tetromino3 1.5s ease-out infinite;
    background: url('/img/roman_theater_small.jpg') no-repeat top center;
    z-index: 2;
}

.box4 {
    animation: tetromino4 1.5s ease-out infinite;
    background: url('/img/petra_small.jpg') no-repeat top center;
}

@keyframes tetromino1 {
    0%, 40% {
        /* compose logo */
        /* 1 on 3 */
        /* L-shape */
        transform: translate(0, 0);
    }

    50% {
        /* pre-box */
        transform: translate(48px, -27px);
    }

    60%, 100% {
        /* box */
        /* compose logo */
        transform: translate(96px, 0);
    }
}

@keyframes tetromino2 {
    0%, 20% {
        /* compose logo */
        /* 1 on 3 */
        transform: translate(96px, 0px);
    }

    40%, 100% {
        /* L-shape */
        /* box */
        /* compose logo */
        transform: translate(144px, 27px);
    }
}

@keyframes tetromino3 {
    0% {
        /* compose logo */
        transform: translate(144px, 27px);
    }

    20%, 60% {
        /* 1 on 3 */
        /* L-shape */
        /* box */
        transform: translate(96px, 54px);
    }

    90%, 100% {
        /* compose logo */
        transform: translate(48px, 27px);
    }
}

@keyframes tetromino4 {
    0%, 60% {
        /* compose logo */
        /* 1 on 3 */
        /* L-shape */
        /* box */
        transform: translate(48px, 27px);
    }

    90%, 100% {
        /* compose logo */
        transform: translate(0, 0);
    }
}