@import url('cssPromenljive.css');


/* Visina svih stubica */

.LogoStubic {
    height: 15px;
    transition: transform 1s;
    transition-timing-function: ease;
}


/* Sirina pojedinacnih stubica */

#LogoEFSUStubic1 {
    width: 15px;
}

#LogoEFSUStubic2, #LogoEFSUStubic3 {
    width: 45px;
}

#LogoEFSUStubic4, #LogoEFSUStubic5{
    width: 30px;
}

/* Poravnanje stubica u levoj i desnom delu loga */

#LogoEFSU{
    display: flex;
    cursor: pointer;
    /*    width: 100px;*/
}

#LogoEFSULevaStrana, #LogoEFSUDesnaStrana {
    display: flex;
    flex-direction: column;
    width: 45px;
}

#LogoEFSULevaStrana {
    align-items: flex-end;
}

#LogoEFSUDesnaStrana {
    align-items: flex-start;
}

#LogoEFSULevaStrana > .LogoStubic:not(:first-child), #LogoEFSUDesnaStrana > .LogoStubic {
    margin-top: 15px;
}


/* Boje pojedinacnih stubica */

#LogoEFSUStubic1, #LogoEFSUStubic3, #LogoEFSUStubic5 {
    background-color: var(--glavnaBoja1);
}

#LogoEFSUStubic2, #LogoEFSUStubic4 {
    background-color: var(--glavnaBoja2);
}




/* Nacin menjana velicine stubica prilikom animacije */

#LogoEFSUStubic1, #LogoEFSUStubic3, #LogoEFSUStubic5 {
    transition: transform 1s;
    transform-origin: right top;
}

#LogoEFSUStubic2, #LogoEFSUStubic4 {
    transition: transform 1s;
    transform-origin: left top;
}


@media screen and  (max-width: 1000px) {

    /* Sirina pojedinacnih stubica */

    #LogoEFSULevaStrana, #LogoEFSUDesnaStrana {
        width: 30px;
    }

    .LogoStubic {
        height: 10px;
    }

    #LogoEFSUStubic1 {
        width: 10px;
    }

    #LogoEFSUStubic2,#LogoEFSUStubic3 {
        width: 30px;
    }

    #LogoEFSUStubic4, #LogoEFSUStubic5{
        width: 20px;
    }

    #LogoEFSULevaStrana > .LogoStubic:not(:first-child), #LogoEFSUDesnaStrana > .LogoStubic {
        margin-top: 10px;
    }

}