#LogoAnimCntr {
    width: 110px;
    height: 88px;
}

/* ============================================= */
/* 1. Krilo                                      */
/* ============================================= */
#bird-wing {
    transform-box: view-box;
    animation: wing-shake 10s ease-in-out infinite;
}

@keyframes wing-shake {
    0% {
        transform: rotate(0deg);
    }
    2% {
        transform: rotate(-18deg);
    }
    4% {
        transform: rotate(0deg);
    }
    5% {
        transform: rotate(-18deg);
    }
    6% {
        transform: rotate(0deg);
    }
    7% {
        transform: rotate(-18deg);
    }
    8% {
        transform: rotate(0deg);
    }
    9% {
        transform: rotate(-18deg);
    }
    10% {
        transform: rotate(0deg);
    }
    11% {
        transform: rotate(-18deg);
    }
    14% {
        transform: rotate(0deg);
    }
    /* mirovanje do kraja ciklusa */
    100% {
        transform: rotate(0deg);
    }
}

/* ============================================= */
/* 2. Saginjanje                                 */
/* ============================================= */
#bird-lookdown {
    transform-box: view-box;
    transform-origin: 1150px 1450px;
    animation: lookdown 15s ease-in-out infinite;
}

@keyframes lookdown {
    0% {
        transform: rotate(0deg);
    } /* uspravno */
    2% {
        transform: rotate(30deg);
    } /* brzo se sagne */
    15.3% {
        transform: rotate(30deg);
    } /* drži sagnuto */
    17.3% {
        transform: rotate(0deg);
    } /* brzo se vrati uspravno */
    100% {
        transform: rotate(0deg);
    } /* pauza do sledećeg ciklusa */
}

@media screen and (max-width: 1023px) {
    #LogoAnimCntr {
        width: 100px;
        height: 80px;
    }
}

@media screen and (max-width: 500px) {
    #LogoAnimCntr {
        width: 70px;
        height: 56px;
    }
}