/*@keyframes mobileTreeHide {*/
/*    from {left:-100%;}*/
/*    to {left:0;}*/
/*}*/

/*.mobileWrapper.show {*/
/*    animation-name: mobileTreeHide;*/
/*    animation-duration:0.4s;*/
/*    animation-fill-mode: forwards;*/
/*    -moz-animation-fill-mode: forwards;*/
/*    -o-animation-fill-mode: forwards;*/
/*    -webkit-animation-fill-mode: forwards;*/

/*    animation-direction: normal;*/
/*    -moz-animation-direction: normal;*/
/*    -o-animation-direction: normal;*/
/*    -webkit-animation-direction: normal;*/
/*}*/

/*.mobileWrapper:not(.show) {*/
/*    animation-name: mobileTreeHide;*/
/*    animation-duration:0.4s;*/
/*    animation-fill-mode: forwards;*/
/*    -moz-animation-fill-mode: forwards;*/
/*    -o-animation-fill-mode: forwards;*/
/*    -webkit-animation-fill-mode: forwards;*/
/*    animation-direction: reverse;*/
/*    -moz-animation-direction: reverse;*/
/*    -o-animation-direction: reverse;*/
/*    -webkit-animation-direction: reverse;*/
/*}*/

/*#mobileMenu.show {*/
/*    animation-name: mobileTreeHide;*/
/*    animation-duration:0.3s;*/
/*    animation-fill-mode: forwards;*/
/*    -moz-animation-fill-mode: forwards;*/
/*    -o-animation-fill-mode: forwards;*/
/*    -webkit-animation-fill-mode: forwards;*/

/*    animation-direction: normal;*/
/*    -moz-animation-direction: normal;*/
/*    -o-animation-direction: normal;*/
/*    -webkit-animation-direction: normal;*/

/*}*/

/*#mobileMenu:not(.show) {*/
/*    animation-name: mobileTreeHide;*/
/*    animation-duration:0.3s;*/
/*    animation-fill-mode: forwards;*/
/*    -moz-animation-fill-mode: forwards;*/
/*    -o-animation-fill-mode: forwards;*/
/*    -webkit-animation-fill-mode: forwards;*/

/*    animation-direction: reverse;*/
/*    -moz-animation-direction: reverse;*/
/*    -o-animation-direction: reverse;*/
/*    -webkit-animation-direction: reverse;*/
/*}*/


#mobileMenu.show {
    transition-duration: .3s;
    left: 0;
}

#mobileMenu  {
    transition-duration: .3s;
    left: calc(-1 * 100% + 1px);
    top:0;
    width: 100%;
    height:100vh;
    z-index:2000;
}

@media screen and (min-width: 992px) {

    /* The animation code */
    @keyframes example {
        from {max-width: 100%;}
        to {max-width: 75%;}
    }

    @keyframes ivl {
        from {opacity: 0; }
        to {opacity: 1;}
    }

    /* The element to apply the animation to */
    .product-item.multi-variant:hover .img-box {
        animation-name: example;
        animation-duration: 0.4s;
        animation-fill-mode: forwards;
    }

    .product-item.multi-variant:hover .item-variant-list {
        animation-name: ivl;
        animation-duration: 0.4s;
        animation-fill-mode: forwards;
    }

}

/* The animation code */
@keyframes modal-show {
    from {visibility: hidden; opacity:0; top:-35px; pointer-events: none;}
    to {visibility:inherit; opacity:1; top:0; pointer-events: auto;}
}


#modal.show {
    animation-name: modal-show;
    animation-duration: 0.35s;
    animation-fill-mode: forwards;
}

#modal.hide {
    animation-name: modal-show;
    animation-duration: 0.35s;
    animation-fill-mode: backwards;
}

#modal {
    visibility: hidden;
    opacity(0);
    background: none;
}