:root {
    --job-primary: #52647c;
    --job-secondary: #c87a00;
}

.job-list {
    display: grid;
    grid-gap: 1.25rem;
    grid-template-columns: repeat(auto-fill,minmax(380px,1fr));
    margin-left: 0;
    margin-right: 0;
}

.job-list .job-entry a {
    background-color: #fff;
    border-radius: 3px;
    border: 1px solid #ebebeb;
    display: flex;
    flex-direction: column;
    padding: 30px 30px 10px 30px;
    transition: box-shadow .3s;
    font-size: 20px;
}

.job-list .job-entry a:hover {
    box-shadow: 0 5px 10px 0 rgba(0,34,96,.1);
}

.job-list .job-entry h3 {
    margin: 0 0 10px 0;
    padding: 0;
    font-size: 18px;
    color: var(--job-secondary);
}


.job-list .job-location {
    flex: 1;
    margin: 0 0 18px;
    padding-left: 0;
    position: relative;
}
.job-list .job-meta {
    border-top: 1px solid #ebebeb;
    padding: 14px 0 16px 0;
    position: relative;
    word-wrap: break-word;
}

/* Job Detail */
.job-box-inner .job-title {
    font-size: 2.125rem;
    margin-bottom: 1rem;
}

.job-box-inner .job-info > * {
    font-size: 1.25rem;
    padding: 1.5rem 1.5rem 1.5rem 0;
}
.job-box-inner .job-info > div:not(:last-child) {
    border-bottom: 1px solid var(--bg-light);
  }

.job-nav-inner .job-nav-right {
    justify-content: flex-end;
}

.job-box-inner .button,
.job-nav-inner .button {
    font-size: 1rem;
padding: 0.5rem 2rem;
}



.job-box .job-title {
    color: #2852a0;
}
.job-box {
    width: 100%;
    height: auto;
    padding: 2.5rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    position: relative;
    max-width: 600px;
    z-index: 22;
}

.job-box .job-box-inner {
    position: relative;
    z-index: 2;
}

.job-box:before {
    content: "";
    width: 100%;
    height: .5rem;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg,#134780,#2852a0);
}
.job-box:after {
    content: "";
    position: absolute;
    left: 0;
    height: 100px;
    transform: skewY(-5deg);
    transform-origin: top left;
    bottom: -55px;
    background-color: #fff;
    width: 100%;
    height: 85%;
    display: block;
    box-shadow: 0 40px 40px 0 rgba(0,0,0,.12);
    transform: skewY(-5deg);
    z-index: -1;
  }

  @media screen and (max-width:768px) {
    .job-list {
        display: grid;
        grid-gap: 1.25rem;
        grid-template-columns: 1fr;
        padding-bottom: 40px;
      }
  }