#dropdownMenu.leftsideopen {
    animation: leftsideopen 0.5s forwards;
}
@keyframes leftsideopen {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0%);
    }
}
#dropdownMenu.leftsideclose {
    animation: leftsideclose 0.5s forwards;
}
@keyframes leftsideclose {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-100%);
    }
}

#dropdownMenu.rightsideopen {
    animation: leftsideopen 0.5s forwards;
}
#dropdownMenu.rightsideclose {
    animation: leftsideopen 0.5s backwards;
}
#dropdownMenu.rightsideopen {
    animation: leftsideopen 0.5s forwards;
}
#dropdownMenu.rightsideclose {
    animation: leftsideopen 0.5s backwards;
}
@keyframes rightsideopen {
    from {
      transform: translateX(+100%);
    }
    to {
      transform: translateX(0);
    }
}

.basket_flex_box.slide-out {
    animation: slideOutAnimation 0.6s forwards;
}
.productbox.slide-out {
    animation: slideOutAnimation 0.6s forwards;
}
@keyframes slideOutAnimation {
    to {
        transform: translateX(+100%);
        opacity: 0;
    }
}

#searchdiv.horizontalcrush {
    animation: horizontalcrush 0.5s forwards;
}
  @keyframes horizontalcrush {
    from {
      width: 100%;
    }
    to {
      width: 0px;
    }
}

.display_popup.displaying {
    animation: displaying 0.5s forwards;
}
@keyframes displaying {
    from {
      opacity: 0;
    }
    to {
      opacity: 100%;
    }
}


.product_container.opening {
    animation: opening-bestsellers 0.5s forwards;
}
@keyframes opening-bestsellers {
    from {
        opacity: 0;
        transform: translateX(+100%);
    }
    to {
        opacity: 100%;
        transform: translateX(0);
    }
    
}