#hero {
    position: relative;
    padding: 7em 0
}

#hero:after {
    overflow: hidden;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgba(16,16,16,.45)
}

#hero-divider-container {
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    z-index: 2
}

.slogan {
    z-index: 2
}

.slogan h1 {
    font-size: 3rem;
    line-height: 1
}

.slogan p {
    font-size: 2.5rem;
    line-height: 1;
    font-family: lato,sans-serif
}

@media screen and (min-width: 768px) {
    #hero {
        padding:11em 0
    }

    .slogan p {
        font-size: 2rem
    }

    .cw-intro-text h3 {
        font-size: 2.5rem;
        line-height: 1
    }
}





.cw-banner a.button {
    height: 80px;
    line-height: 80px;
    margin-top: 1em;
    padding: 0 2em;
    background: var(--color-theme-secondary);
    font-size: 1.25rem;
}

@media (min-width: 992px) {

    .cw-banner a.button {
        margin: 0;
        padding: 0 1em 0 3.75em;
    }

    .cw-banner a.button:before {
        top: 0;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        margin-top: 0;
        border-color: rgba(255, 255, 255, 0);
        border-top-color: #353A40;
        left: 0px;
        border-top-width: 80px;
        border-right-width: 60px;
        border-left-width: 0;
    }

    .cw-banner a.button:after {
        top: 0;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        margin-top: 0;
        border-color: rgba(255, 255, 255, 0);
        border-top-color: var(--color-theme-secondary);
        right: -60px;
        border-top-width: 80px;
        border-right-width: 60px;
        border-left-width: 0;
    }
}

.cw-banner a.button:focus:after {
    border-top-color: #353A40;
}