/* Animations */
@media screen and (max-width: 767px) {
    .size-enter-active, .size-leave-active,
    .color-enter-active, .color-leave-active,
    .scheme-enter-active, .scheme-leave-active,
    .quantity-enter-active, .quantity-leave-active,
    .form-enter-active, .form-leave-active {
        transition: all 0.8s;
        /*top: -100px;*/
        /*margin-bottom: -80px;*/
    }
}
@media screen and (min-width: 768px) {
    .size-enter-active, .size-leave-active,
    .color-enter-active, .color-leave-active,
    .scheme-enter-active, .scheme-leave-active,
    .quantity-enter-active, .quantity-leave-active,
    .form-enter-active, .form-leave-active {
        transition: all 0.3s;
        /*top: -58px;*/
        /*margin-bottom: -38px;*/
    }
}
.size-enter, .size-leave-to,
.color-enter, .color-leave-to,
.scheme-enter, .scheme-leave-to,
.quantity-enter, .quantity-leave-to,
.form-enter, .form-leave-to {
    /* opacity: 0; */
    /* max-height: 0px; */
    /*transform: translateY(100px);*/
    opacity: 0;
    /* animation: animMargin2 1.5s ease; */
}

.sizeNext-leave-active,
.colorNext-leave-active,
.schemeNext-leave-active,
.quantityNext-leave-active,
.formNext-leave-active {
    transition: all 0.3s;
}
.sizeNext-enter-active
.colorNext-enter-active
.schemeNext-enter-active
.quantityNext-enter-active
.formNext-enter-active {
    transition: all 0.3s;
    transition-delay: 0.5s;
}
.sizeNext-enter,
.colorNext-enter,
.schemeNext-enter,
.quantityNext-enter,
.formNext-enter {
    opacity: 0;
    /* max-height: 0px; */
    transform: translateY(100px);
    /* animation: animMargin3 3.5s ease; */

}
.sizeNext-leave-to,
.colorNext-leave-to,
.schemeNext-leave-to,
.quantityNext-leave-to,
.formNext-leave-to {
    
    /* margin-top: 200px; */
    /* max-height: 0px; */
    /* transform: translateY(-100px); */
    left: -1000px;
    opacity: 0;
    /* animation-name: animMargin;
    animation-duration: 2s; */
    /*animation: animMargin 0.5s ease;*/
}

/* The animation code */
@keyframes animMargin {
    from {top: 0; opacity: 1;}
    to {top: -200px;opacity: 0;}
}
@keyframes animMargin2 {
    from {top: -100px;opacity: 0;}
    to {top: 0;opacity: 1;}
}

@keyframes animMargin3 {
    from {transform: translateY(-200px);opacity: 0;}
    to {transform: translateY(0);opacity: 1;}
}