@media (min-width: 992px) {
    #ar-img .img-fluid {
        display: block;
        position: absolute;
    }

    #header-wrapper {
        /*height: 100vh;*/
    }


}

@media (max-width: 991px) {
    #ar-img .img-fluid {
        display: none;
    }
}
#ar-img:hover #furniture-chair-shadow {
    opacity: 0.3;
    transform: scaleX(0.7);
}

#ar-img:hover #furniture-chair {
    opacity: 0.7;
    transform: translateY(-100px);
}

#ar-img:hover #furniture-mobile {
    opacity: 0.8;
    transform: translateY(-40px) translateX(-40px);
}


#furniture-chair-shadow {
    opacity: 0.6;
    transition: all 3s;
    animation-name: shadow;
    animation-duration: 3s;
    animation-direction: alternate;
    animation-iteration-count: 2;
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    animation-delay: 2s;

}


@keyframes shadow{
    to {opacity: 0.3; transform: scaleX(0.7)}
    from {opacity: 0.6; transform: scaleX(1) }
}

#furniture-chair{
    transition: all 3s;
    animation-name: chair;
    animation-duration: 3s;
    animation-direction: alternate;
    animation-iteration-count: 2;
    animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
    animation-delay: 2s;
}



@keyframes chair{
    to {opacity: 0.7; transform: scale(1) translateY(-100px)}
    from {opacity: 1; transform: scale(1) translateY(0px)}
}


#furniture-mobile {
    animation-name: mobile;
    animation-duration: 3s;
    animation-direction: alternate;
    animation-iteration-count: 2;
    animation-timing-function: ease-in-out;
    animation-delay: 2s;
    transition: all 3s;
}



@keyframes mobile{
    from {opacity: 1; transform: scale(1) translateX(0px) translateY(0px)}
    to {opacity: 0.8; transform: scale(1) translateX(-40px) translateY(-40px)}
}