.modal-open {
    overflow: hidden;
}

.modal-open .site-wrap {
    overflow-y: scroll;
}

/*TODO to fix issue with extra cart side column - which I have no idea is causing it - will need to be looked into*/
#__next + div {
    display: none;
}

@media screen and (min-width: 768px) {
    .ReactModal__Overlay {
        background-color: transparent;
        transition: all 300ms ease-in-out;
    }

    .ReactModal__Overlay--after-open {
        background-color: #000000b3 !important;
    }

    .ReactModal__Overlay--before-close {
        background-color: transparent;
    }

    .ReactModal__Content {
        opacity: 0;
        transform: translateY(100px);
        transition: all 300ms ease-in-out;
    }

    .ReactModal__Content--after-open {
        opacity: 1;
        transform: translateY(0px);
    }

    .ReactModal__Content--before-close {
        opacity: 0;
        transform: translateY(100px);
    }
}