.popUpSide {
    position: fixed;
    right: -100%;
    top: 20%;
    width: 20em;
    max-width: 90%;
    background: var(--basicGradient1);
    padding: 1em;
    color: #f5f5f5;
    text-align: center;
    z-index: 100;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    transition: 1s
}

.popUpSide a, .popUpSide a:hover {
    border: 2px solid var(--basicBlack)
}

.bodyEditor .popUpSide {
    position: relative
}

.popUpSide .bgPopUp {
    background-size: cover;
    height: 12em
}

.popUpSide .title {
    font-size: 1.8em
}

.popUpSide p {
    margin-bottom: 2em
}

.popUpSide .linkContainer {
    display: flex;
    flex-direction: column;
    gap: .5em;
    align-items: center;
}

.popUpSide a {
    background-color: var(--basicBlack);
    color: #f5f5f5;
    display: flex;
    width: fit-content;
}

.popUpSide a:hover {
    background-color: #f5f5f5;
    color: var(--basicBlack)
}

.popUpSide .closeIt {
    position: absolute;
    top: 3%;
    right: 3%;
    transform: rotate(45deg);
    cursor: pointer
}

.popUpSide .closeIt path {
    fill: whitesmoke
}

.slideOut {
    right: -100% !important
}

@media screen and (max-width: 750px) {
    .popUpSide .flexRowStart {
        display: block
    }

    .popUpSide {
        width: 20em;
        padding: 2.5em 1.5em 2.5em 2.5em
    }

    .popUpSide .flexRowStart .w45 {
        width: 100%
    }

    .popUpSide .closeIt {
        top: 3%;
        left: 3%
    }

    .slideOut {
        right: -150% !important
    }
}