.join-us-container {
    height             : 800px;
    background-size    : cover;
    background-repeat  : no-repeat;
    display            : flex;
    border-top         : 2em solid #fff;
    margin-top         : -4em;
    background-position: 50%;
}

.join-us-container>.content {
    align-self      : center;
    padding         : 8em;
    height          : 35em;
    background-color: green;
    display         : flex;
    width           : 35em;
    flex-direction  : column;
    justify-content : center;
    border-radius   : 50%;
    margin-left     : 14%;
}

.join-us-container>.content>* {
    color: white;
}

div.join-us-container .join-contain {
    width : 250px;
    margin: 0 auto;
}

div.join-us-container .content h2 {
    font-weight: 500;
    line-height: 130%;
    margin-top : 0;
}

div.join-us-container .content h2 span {
    font-size  : 145%;
    margin-top : 5px;
    position   : relative;
    display    : block;
    font-family: "Roboto Slab", sans-serif;
}

div.join-us-container .content p {
    line-height: 1.6;
}

div.join-us-container .content a {
    position        : relative;
    display         : inline-block;
    width           : fit-content;
    color           : green;
    background-color: #fff;
    padding         : 0.75em 0.75em 0.75em 1.25em;
    padding-right   : 4em;
    text-decoration : none;
    text-transform  : uppercase;
    font-size       : 80%;
    font-weight     : bold;
    border-radius   : 0 1.2em;
}

div.join-us-container .content a:after {
    content            : "";
    background         : #40AE49;
    background-image   : url(/wp-content/themes/college-fresh/static/white-chevron.svg);
    background-repeat  : no-repeat;
    background-position: center center;
    background-size    : 10px;
    border-radius      : 0 1.2em 0 1.2em;
    right              : 0;
    top                : 0;
    bottom             : 0;
    width              : 35px;
    position           : absolute;
    animation          : animate-link-arrow-out .2s ease-out;
    animation-fill-mode: forwards;
}

div.join-us-container .content a:hover:after {
    color              : red;
    transition         : background-position .3s;
    animation          : animate-link-arrow-in .2s ease-out;
    animation-fill-mode: forwards;
}

div.join-us-container .join-image {
    display: none;
}

@media screen and (max-width: 650px) {
    .join-us-container {
        background-image: none !important;
        display         : block;
        height          : auto;
    }

    .join-us-container>.content {
        margin-left  : 0;
        width        : 100%;
        height       : auto;
        background   : transparent;
        display      : block;
        border-radius: 0;
        align-self   : baseline;
        overflow     : hidden;
        padding      : 2em 4em 4em;
    }

    div.join-us-container .join-contain {
        width   : 100%;
        position: relative;
    }

    div.join-us-container .join-contain:before {
        content         : "";
        display         : block;
        background-color: green;
        width           : 200%;
        height          : 300px;
        border-radius   : 100%;
        position        : absolute;
        z-index         : 0;
        margin-left     : -50%;
        top             : -100px;
    }

    div.join-us-container .content h2 {
        position  : relative;
        font-size : 2em;
        text-align: center;
    }

    div.join-us-container .content .join-copy {
        margin-top: 100px;
        color     : #000;
    }

    div.join-us-container .content a {
        margin          : 0 auto;
        background-color: green;
        color           : #fff;
        display         : block;
    }

    div.join-us-container .join-image {
        display: block;
    }
}

@media screen and (min-width: 552px) {
    div.join-us-container .content h2 {
        margin-top: 1em;
    }

    div.join-us-container .content .join-copy {
        margin-top: 35%;
    }
}

@media screen and (min-width: 651px) {
    .join-us-container>.content {
        /* margin: 0 auto; */
    }

    div.join-us-container .content .join-copy {
        margin-top: 1em;
    }
}