.page-header.careers {
    background: rgb(24 70 100 / 90%);
}

section.who-we-are {
    background: white;
}

section.who-we-are img {
    max-width: 400px;
    width: 100%;
    margin: 0 auto;
}

@media (width >= 768px) {
    section.who-we-are .section-header {
        text-align: left;
    }

    section.who-we-are img {
        max-width: 100%;
    }
}

.page-header.careers p.disclaimer {
    margin-top: 24px;
    font-size: 14px;
    color: var(--l-blue6);
    line-height: 20px;
}

#benefits .ul-box ul {
    list-style: none;
    padding-left: 46px;
    font-size: 20px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    text-align: left;
    margin: 32px auto auto;
    width: 375px;
}

@media (width >= 768px) {
    #benefits .ul-box ul {
        margin: auto 24px auto auto;
        width: fit-content;
        padding-left: 16px;
    }

    #benefits .ul-box:last-of-type ul {
        margin: auto auto auto 24px;
    }
}

#benefits li {
    margin: 12px 4px 20px;
    padding: 8px;
    font-size: 20px;
    line-height: 32px;
    color: #42525c;
}

#benefits li span {
    display: block;
    font-size: 15px;
    color: #6b8393;
    line-height: 2rem;
}

#benefits li span.fa-stack {
    display: inline;
    font-size: 13px;
    margin-left: 4px;
    margin-right: -10px;
}

#benefits li i.fa {
    display: inline-block;
    color: var(--l-blue3);
    margin-left: -46px;
}

#benefits li i.fa.fa-birthday-cake {
    margin-left: -39px;
}

#benefits li i.fa.two {
    margin-top: 20px;
    margin-left: -35px;
}

#benefits li i.fa.three {
    margin-top: 33px;
}

@media (width <= 768px) {
    #benefits li span {
        margin-left: 9px;
    }

    #benefits li i.fa,
    #benefits li span.fa-stack {
        display: list-item;
        margin-bottom: -32px;
    }

    #benefits li i.fa .fa-birthday-cake,
    #benefits li i.fa .two {
        margin-left: -45px;
    }

    #benefits li i.fa .two {
        margin-top: 17px;
    }
}

.values .container {
    position: relative;
}

.values .row.empty {
    display: none;
}

.values .row .left-end {
    display: none;
    position: absolute;
    left: calc(-33.5% - 30px);
}

.values .row .right-end {
    display: none;
    position: absolute;
    right: calc(-25.5% - 30px);
}

.values .row .mid-left-end {
    display: none;
    position: absolute;
    left: calc(-25.5% - 30px);
}

.values .row .mid-right-end {
    display: none;
    position: absolute;
    right: calc(-33.5% - 30px);
}

.values .value {
    background: white;
    padding: 16px 16px 20px;
    margin: 8px 0;
    cursor: default;
}

.values .value h4 {
    color: var(--l-gray3);
    transition: 0.2s;
}

.values .value h4 strong {
    color: var(--l-blue3);
}

.values .value p {
    color: var(--l-gray4);
}

@media (width >= 992px) {
    .values {
        margin-bottom: -72px;
        padding-bottom: 0;
    }

    .values .value {
        margin: 15px 0;
        height: 150px;
        padding: 16px 32px 24px;
    }

    .values .row.empty,
    .values .row .right-end,
    .values .row .left-end,
    .values .row .mid-left-end,
    .values .row .mid-right-end {
        display: block;
    }

    .values .row .left {
        margin-left: -4.1667%;
    }

    .values .row .right {
        margin-left: 4.1667%;
    }

    .values .row .right-last {
        margin-right: -4.1667%;
    }
}

@media (width >= 1200px) {
    .values .value {
        height: 164px;
        padding: 24px 48px 32px 32px;
    }

    .values .value h4 {
        font-size: 32px;
    }

    .values .value p {
        font-size: 18px;
    }
}

.dei {
    background: radial-gradient(92.65% 93.51% at 48.89% 8.18%, rgb(38 111 160 / 0%) 0%, var(--l-primary-hover) 100%), var(--l-primary);
    text-align: left;
}

.dei h2 {
    margin: 0 auto 24px;
    color: white;
}

.dei h5 {
    color: var(--l-blue6);
}

@media (width >= 768px) {
    .dei h2,
    .dei h5 {
        max-width: 480px;
        margin: 16px auto;
    }
}

#positions {
    text-align: center;
}

#positions .position {
    padding: 16px 15px 12px;
}

#positions h3 {
    width: fit-content;
    margin: auto;
    padding: 8px 8px 32px;
    border-bottom: 1px solid var(--l-gray6);
}

#positions p {
    color: var(--l-gray4);
}

#positions i {
    color: var(--l-blue6);
    line-height: 0;
}

.employee-quotes #quotes {
    width: 400%;
    padding-bottom: 16px;
}

.employee-quotes .quote .card {
    padding: 48px 32px 48px 15px;
    background: var(--l-gray9);
    border-radius: var(--l-rad-big);
    box-shadow: var(--l-shadow);
    border: none;
}

.employee-quotes .quote .card h5 {
    font-weight: 600;
}

.employee-quotes .headshot {
    text-align: center;
}

.employee-quotes .headshot img {
    width: 144px;
    padding-top: 12px;
}

.employee-quotes p {
    margin-top: 20px;
}

.employee-quotes .quotes-nav {
    padding-top: 32px;
}

.employee-quotes .quotes-nav li {
    background: var(--l-blue6);
}

.employee-quotes .quotes-nav li.active,
.employee-quotes .quotes-nav li:hover {
    background: var(--l-blue3);
}

/* ----  ABOUT US ---- */

.page-header.about,
.page-header.careers {
    margin-top: 0;
    padding-top: 120px;
}

@media screen and (width <= 768px) {
    .page-header.about h1,
    .page-header.about p,
    .page-header.careers h1,
    .page-header.careers p {
        text-align: left;
    }
}

section.why-do .container-fluid {
    background: rgb(255 255 255 / 90%);
    padding: 56px 24px;
    border-radius: var(--l-rad-big);
}

@media screen and (width <= 768px) {
    section.why-do .container-fluid h1 br {
        display: none;
    }
}

section.why-do .container-fluid h5 {
    color: var(--l-gray3);
    line-height: 28px;
    margin-bottom: 12px;
}

@media screen and (width >= 1200px) {
    section.why-do .container-fluid h5 {
        line-height: 34px;
        margin-bottom: 16px;
    }
}

section.why-do picture {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

section.why-do picture img {
    min-width: 1200px;
    max-width: unset;
    width: 100%;
    min-height: 100%;
}

.img-row {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 40px auto 16px;
}

.img-row .headshot {
    margin: 0 16px 32px;
    transition: 0.2s;
    padding: 0;
}

.img-row .headshot img {
    opacity: 0.85;
    transition: 0.2s;
}

.img-row .headshot div {
    opacity: 0;
    position: absolute;
    width: 160%;
    left: -30%;
    padding: 12px;
    text-align: center;
    background: white;
    box-shadow: var(--l-shadow);
    transition: 0.2s;
    z-index: 7;
    pointer-events: none;
}

.img-row .headshot div p {
    color: var(--l-gray2);
}

.img-row .headshot div p span {
    font-size: 14px;
    color: var(--l-gray4);
}

.img-row .headshot div p strong {
    color: var(--l-blue4);
}

.img-row .headshot:hover {
    margin-top: -8px;
    transition: 0.2s;
}

.img-row .headshot:hover img,
.img-row .headshot:hover div {
    opacity: 1;
    transition: 0.2s;
    border-radius: var(--l-rad);
}

@media screen and (width <= 1200px) {
    .img-row {
        max-width: 900px;
    }
}

@media screen and (width <= 992px) {
    .img-row {
        max-width: 600px;
    }
}

@media screen and (width <= 768px) {
    .img-row {
        max-width: 440px;
    }

    .img-row .headshot.right div {
        left: -60%;
    }

    .img-row .headshot.left div {
        left: 0;
    }
}

.rad-what .leader,
.rad-now .leader {
    position: relative;
    text-align: center;
    margin-bottom: 32px;
    color: var(--l-gray3);
}

.rad-what .leader .bio,
.rad-now .leader .bio {
    position: absolute;
    background: hsl(0deg 0% 100% / 90%);
    padding: 8px;
    opacity: 0;
    top: 0;
    height: 100%;
    width: calc(100% - 30px);
    transition: 0.2s;
    pointer-events: none;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
}

.rad-what .leader .bio p,
.rad-now .leader .bio p {
    font-size: 14px;
    line-height: 22px;
}

.rad-what .leader h5 span,
.rad-now .leader h5 span {
    font-size: 75%;
    color: var(--l-gray4);
}

.rad-what .leader img,
.rad-now .leader img {
    max-width: 180px;
    margin: 0 auto 12px;
}

.rad-what .leader:hover .bio,
.rad-now .leader:hover .bio {
    opacity: 1;
    transition: 0.2s;
}

@media screen and (width <= 768px) {
    .rad-what .section-header h2,
    .rad-now .section-header h2 {
        text-align: left;
        padding-left: 15px;
    }

    .rad-what .section-header p,
    .rad-now .section-header p {
        text-align: left;
    }
}

@media screen and (width >= 768px) and (width <= 1200px) {
    .rad-what .leader-row,
    .rad-now .leader-row {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
    }
}

@media screen and (width >= 1200px) {
    .rad-what .leader.small,
    .rad-now .leader.small {
        width: 20%;
    }

    .rad-what .leader.small img,
    .rad-now .leader.small img {
        max-width: 140px;
    }

    .rad-what .leader.small .bio,
    .rad-now .leader.small .bio {
        width: 100%;
        margin-left: -15px;
    }

    .rad-what .leader.small .bio p,
    .rad-now .leader.small .bio p {
        font-size: 13px;
        line-height: 18px;
    }
}

#rad-history .section-header {
    text-align: left;
}

#rad-history .section-header p {
    height: 96px;
}

#rad-history * {
    box-sizing: border-box;
}

#rad-history .hist-start,
#rad-history .hist-end {
    position: absolute;
    height: 0;
    text-align: center;
    width: 100vw;
}

#rad-history .hist-start {
    top: -8px;
}

#rad-history .hist-start img {
    height: 328px;
    margin-left: -18px;
}

#rad-history .hist-end {
    bottom: 240px;
}

#rad-history .hist-end img {
    height: 248px;
    margin-left: -9px;
}

#rad-history .timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

#rad-history .timeline::after {
    content: "";
    position: absolute;
    width: 4px;
    background-color: var(--l-blue6);
    top: 24px;
    bottom: 124px;
    left: calc(50% + 1px);
    margin-left: -3px;
    z-index: 0;
}

/* Container around content */

#rad-history .hist-item {
    padding: 9px 40px 0 45px;
    position: relative;
    background-color: inherit;
    width: 50%;
    height: 134px;
}

#rad-history .hist-item h2 {
    margin: 0 0 16px;
}

#rad-history .hist-item img,
#rad-history .hist-item i::before {
    color: var(--l-blue3);
    height: 32px;
}

#rad-history .hist-item::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    right: -23px;
    background-color: #f0f9ff;
    border: 4px solid #d8ecfa;
    top: -18px;
    border-radius: 50%;
    z-index: 1;
}

#rad-history .hist-item h4 {
    margin-top: 4px;
    font-weight: 600;
}

#rad-history .hist-item h4::before {
    content: "";
    position: absolute;
    height: 4px;
    width: 54px;
    background-color: #d8ecfa;
    top: 7px;
    left: -22px;
    bottom: 0;
    transform: rotate(45deg);
}

#rad-history .hist-item h4::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: #f0f9ff;
    border: 4px solid #d8ecfa;
    top: 22px;
    left: 18px;
    border-radius: 50%;
    z-index: 1;
}

#rad-history .hist-item .contents {
    display: inline-block;
    padding: 24px 16px 8px;
    margin: 0 15px 15px 0;
    padding-bottom: 16px;
    width: fit-content;
    background-color: #fff;
    position: relative;
    border-radius: 6px;
    text-align: center;
    height: 104px;
    box-shadow: var(--l-shadow-small);
}

#rad-history .hist-item .contents i {
    margin-bottom: 2px;
    margin-top: 1.5px;
}

#rad-history .hist-item .contents p {
    color: var(--l-gray4);
}

/* Place the container to the left */

#rad-history .hist-item.left {
    padding: 9px 45px 0 40px;
}

#rad-history .hist-item.left h4 {
    text-align: right;
}

#rad-history .hist-item.left h4::before {
    left: unset;
    right: -22px;
    transform: rotate(-45deg);
}

#rad-history .hist-item.left h4::after {
    left: unset;
    right: 18px;
}

#rad-history .hist-item.left .contents {
    float: right;
    margin: 0 0 15px 15px;
}

/* Place the container to the right */

#rad-history .hist-item.right {
    left: calc(50% + 30px);
}

#rad-history .hist-item.right h4 {
    text-align: left;
}

#rad-history .hist-item.right::after {
    left: -23px;
}

#rad-history .hist-item.two-row {
    height: 260px;
}

#rad-history .hist-item.end {
    height: 300px !important;
}

#rad-history .hist-item > div {
    position: absolute;
}

#rad-history .hist-item > div h4::before {
    left: -62px;
    top: 3px;
}

#rad-history .hist-item > div h4::after {
    left: -27px;
    top: 13px;
}

@media screen and (width <= 992px) {
    #rad-history .timeline::after {
        width: 3px;
        bottom: 100px;
        top: -5px;
    }

    #rad-history .hist-start {
        top: -6px;
    }

    #rad-history .hist-start img {
        height: 260px;
    }

    #rad-history .hist-end {
        bottom: 206px;
    }

    #rad-history .hist-end img {
        height: 212px;
    }

    #rad-history .hist-item {
        height: 96px;
        padding: 0 20px 0 25px;
    }

    #rad-history .hist-item h4 {
        margin-top: 0;
    }

    #rad-history .hist-item h4::before {
        height: 3px;
        width: 34px;
        top: -2px;
    }

    #rad-history .hist-item h4::after {
        width: 12px;
        height: 12px;
        border: 3px solid #d8ecfa;
        top: 8px;
        left: 3px;
    }

    #rad-history .hist-item.left {
        padding: 0 25px 0 20px;
    }

    #rad-history .hist-item::after {
        width: 12px;
        height: 12px;
        border: 3px solid #d8ecfa;
        top: -12px;
        left: -21px;
    }

    #rad-history .hist-item .contents p {
        font-size: 15px;
    }

    #rad-history .hist-item.left::after,
    #rad-history .hist-item.left h4::before {
        right: -21px;
        left: unset;
    }

    #rad-history .hist-item.right::after {
        left: -21px;
    }

    #rad-history .hist-item.left h4::after {
        right: 4px;
    }

    #rad-history .hist-item > div {
        position: absolute;
    }

    #rad-history .hist-item > div h4::before {
        left: -47px;
        top: -1px;
    }

    #rad-history .hist-item > div h4::after {
        left: -22px;
        top: 8px;
    }
}

@media screen and (width <= 768px) {
    #rad-history .section-header p {
        padding: 0 0 24px;
        height: unset;
    }

    #rad-history .timeline::after {
        left: 10px;
        bottom: 100px;
        top: -85px;
    }

    #rad-history .hist-start {
        text-align: left;
        left: -125px;
    }

    #rad-history .hist-start img {
        height: 240px;
        margin-left: unset;
    }

    #rad-history .hist-end {
        text-align: left;
        left: -87px;
        bottom: 182px;
    }

    #rad-history .hist-end img {
        height: 188px;
        margin-left: unset;
    }

    #rad-history .hist-item.left,
    #rad-history .hist-item.right {
        height: auto;
        width: 100%;
        padding-left: 48px;
        padding-right: 0;
        margin-bottom: 12px;
    }

    #rad-history .hist-item.left h4,
    #rad-history .hist-item.right h4 {
        text-align: left !important;
    }

    #rad-history .hist-item.left h4::before,
    #rad-history .hist-item.right h4::before {
        width: 20px;
        top: 6px;
        left: 22px;
        transform: rotate(45deg);
    }

    #rad-history .hist-item.left h4::after,
    #rad-history .hist-item.right h4::after {
        left: 32px;
    }

    #rad-history .hist-item.left::after,
    #rad-history .hist-item.right::after {
        top: -7px;
    }

    #rad-history .hist-item.left .contents,
    #rad-history .hist-item.right .contents {
        display: inline-block;
        height: auto;
        float: none;
        padding: 16px 12px 8px;
        margin: 0 12px 10px -5px;
    }

    #rad-history .hist-item.left .contents img,
    #rad-history .hist-item.left .contents i,
    #rad-history .hist-item.left .contents i::before,
    #rad-history .hist-item.right .contents img,
    #rad-history .hist-item.right .contents i,
    #rad-history .hist-item.right .contents i::before {
        height: 24px;
        max-height: 24px;
    }

    #rad-history .hist-item.left .contents i + p,
    #rad-history .hist-item.right .contents i + p {
        margin-top: 1px;
    }

    #rad-history .hist-item.left > div,
    #rad-history .hist-item.right > div {
        display: inline-block;
        position: relative;
    }

    #rad-history .hist-item.left > div h4::before,
    #rad-history .hist-item.right > div h4::before {
        width: 20px;
        top: 5px;
        left: -27px;
        transform: rotate(45deg);
    }

    #rad-history .hist-item.left > div h4::after,
    #rad-history .hist-item.right > div h4::after {
        left: -16px;
        top: 9px;
    }

    #rad-history .hist-item.right.end {
        height: 244px;
    }

    #rad-history .hist-item.right::after {
        left: 17px;
    }

    #rad-history .hist-item.left::after {
        left: 18px;
    }

    #rad-history .hist-item.right {
        left: 0%;
    }
}

.clickable-cell {
    display: block;
    width: 100%;
}
