.curved-vertical, .curved-top, .curved-bottom {
    z-index: 100;
    min-height: 280px;
    position: relative;
}

.curved-bottom {
    margin-bottom: 10rem !important;
}

.curved-top {
    margin-top: 10rem !important;
}

.curved-vertical {
    margin-top: 10rem !important;
    margin-bottom: 10rem !important;
}

.curved-vertical:before, .curved-vertical:after, .curved-top:before, .curved-bottom:after {
    content: "";
    position: absolute;
    left: -8%;
    right: -8%;
    height: 280px;
    border-radius: 50%;
    z-index: -1;/* make sure overlays don't show on banners*/
}

.curved-vertical:before, .curved-top:before {
    top: -70px;
}

.curved-vertical:after, .curved-bottom:after {
    bottom: -70px;
}

.curved-vertical.blue:after, .curved-bottom.blue:after {
    background: linear-gradient(180deg, transparent 0%, transparent 50%, var(--blue-color) 50%, var(--blue-color) 100%);
}

.curved-vertical.blue:before, .curved-top.blue:before {
    background: linear-gradient(180deg, var(--blue-color) 0%, var(--blue-color) 50%, transparent 50%, transparent 100%);
}

.curved-vertical.navy:after, .curved-bottom.navy:after {
    background: linear-gradient(180deg, transparent 0%, transparent 50%, var(--navy-color) 50%, var(--navy-color) 100%);
}

.curved-vertical.navy:before, .curved-top.navy:before {
    background: linear-gradient(180deg, var(--navy-color) 0%, var(--navy-color) 50%, transparent 50%, transparent 100%);
}

.curved-vertical.deep-blue:after, .curved-bottom.deep-blue:after {
    background: linear-gradient(180deg, transparent 0%, transparent 50%, var(--deep-blue-color) 50%, var(--deep-blue-color) 100%);
}

.curved-vertical.deep-blue:before, .curved-top.deep-blue:before {
    background: linear-gradient(180deg, var(--deep-blue-color) 0%, var(--deep-blue-color) 50%, transparent 50%, transparent 100%);
}

@media only screen and (min-width: 640px) {
    .curved-bottom {
        margin-bottom: 10rem !important;
    }

    .curved-top {
        margin-top: 10rem !important;
    }

    .curved-vertical {
        margin-top: 10rem !important;
        margin-bottom: 10rem !important;
    }
}

@media only screen and (max-width: 639px) {
    .curved-bottom .wide {
        padding-bottom: 1rem !important;
    }
    
    .curved-vertical, .curved-top, .curved-bottom {
        padding: 0 !important;
        min-height: 200px;
    }
.curved-vertical:before, .curved-vertical:after, .curved-top:before, .curved-bottom:after {
    height: 200px;
    }
}