:root {
    --background-primary: white;
    --background-secondary: #f7f7f7;
    --color-primary: #FFF;
    --color-secondary: #000;
    --color-red: #e42312;
    --color-blue: #006ea6;
    --color-grey: #95949a;
    --border: solid 1px lightgrey;
    --border-active: solid 1px darkgrey;
    --header-height: 100px;
    --subheader-height: 75px;
    --zag-width: 6px;
    --zag-rotation: -35deg;
}

h1 {
    font-weight: 500;
    text-align: center;
    color: var(--color-primary);
    font-size: min(4vw, 50px);
}

h2 {
    color: var(--color-secondary);
    text-align: center;
    margin: 0;
    font-size: min(3.5vw, 36px);
    font-weight: bold;
}

h3 {
    color: var(--color-red);
    margin: 0;
    font-size: min(2.25vw, 30px);
}

h4 {
    text-align: center;
    color: var(--color-red);
    margin: 0;
    font-size: min(1.5vw, 25px);
}

h6 {
    color: inherit;
    text-align: center;
    font-weight: bold;
    font-size: min(1.25vw, 22px);
    margin: 20px 0;
}

p {
    text-align: center;
    line-height: 28px;
    margin-top: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

.shadow {
    box-shadow: -1px -1px 7px 0px rgba(209,209,209,0.75);
    -webkit-box-shadow: -1px -1px 7px 0px rgba(209,209,209,0.75);
    -moz-box-shadow: -1px -1px 7px 0px rgba(209,209,209,0.75);
}

.link {
    position: relative;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    padding: .25em;
    background-color: white;
    z-index: 2;
    color: var(--color-grey);
}

.link:hover {
    color: var(--color-red);
}

.link.active {
    color: var(--color-red);
}

.link.active::before {
    right: calc(-0.5 * var(--zag-width));
    left: calc(-0.5 * var(--zag-width));
    animation: grow .3s;
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    bottom: calc(50% - 1px);
    background-color: var(--color-red);
    transform: rotate(var(--zag-rotation));
    z-index: -1;
}

.link span {
    background: var(--background-primary);
    padding: 5px 0;
    display: inline-block;
    width: 100px;
    text-align: center;
}

.button-container {
    z-index: 0;
    position: relative;
    display: block;
}

.button-container--red {
    background: var(--color-red);
}

.button-container--blue {
    background: var(--color-blue);
}

.button {
    border: 0;
    color: white;
    clip-path: polygon(100% 0, 100% 60%, 70% 100%, 0 100%, 0 0);
    z-index: 1;
    font-weight: bold;
    padding: 0.8em 2em;
    transform: scale(1.111);
    cursor: pointer;
    filter: drop-shadow(-1px 6px 3px rgba(209,209,209,0.75));
}

.button--blue {
    background-color: var(--color-blue);
}

.button--red {
    background-color: var(--color-red);
}

.button:hover {
    background-color: var(--color-red);
    transition: background-color .3s;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

section {
    position: relative;
}

section>div {
    position: relative;
}

section div.content {
    padding-left: 10vw;
    padding-right: 10vw;
}

.top-left-triangle {
    background-image: url("../img/corner_top.svg");
    position: absolute;
    top: 0;
    left: 0;
    width: 500px;
    height: 250px;
    background-size: contain;
    background-repeat: no-repeat;
}

.bottom-right-triangle {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    background-image: url("../img/corner_bottom.svg");
    width: 500px;
    height: 250px;
    background-size: cover;
    background-repeat: no-repeat;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.align-start {
    align-items: flex-start;
}

.column {
    flex-direction: column;
}

.mt-1 {
    margin-top: 1em;
}

.mt-2 {
    margin-top: 2em;
}

.mt-3 {
    margin-top: 3em;
}

.mb-1 {
    margin-bottom: 1em;
}

.mb-3 {
    margin-bottom: 2em;
}

.mb-5 {
    margin-bottom: 5em;
}

.pt-6 {
    padding-top: 6em;
}

.pb-5 {
    padding-bottom: 5em;
}

.pb-7 {
    padding-bottom: 7em;
}

.pb-10 {
    padding-bottom: 10em;
}

.pb-15 {
    padding-bottom: 15em;
}

.fixed-height {
    height: 450px;
}

.shadow-bottom {
    box-shadow: 0px 20px 20px -5px rgba(204, 204, 204, 0.3);
}

body {
    margin: 0;
    color: var(--color-secondary);
    font-family: "Montserrat";
}

.max-width {
    max-width: 1000px;
}

.width-100 {
    width: 100%;
}

.cutout-top-left {
    clip-path: polygon(200px 0, 100% 0, 100% 100%, 0 100%, 0 129px);
}

.cutout-top-bottom {
    clip-path: polygon(200px 0, 100% 0, 100% calc(100% - 130px), calc(100% - 200px) 100%, 0 100%, 0 129px);
}

.padding-1 {
    padding: 1em;
}

.flex-1 {
    flex: 1;
}

.diag {
    width: 50px;
    height: 50px;
    display: inline-block;
    position: relative;
}

.diag::after {
    right: calc(-0.5 * var(--zag-width));
    left: calc(-0.5 * var(--zag-width));
    content: "";
    position: absolute;
    top: calc(50% - 2px);
    bottom: calc(50% - 1px);
    background-color: var(--color-red);
    transform: rotate(var(--zag-rotation));
}

.cards {
    display: flex;
    max-width: 1200px;
}

.cards .space-between {
    justify-content: space-between;
}

.card {
    flex: 1;
    cursor: pointer;
    background: var(--background-primary);
    padding: 2em;
    display: flex;
    flex-direction: column;
    transition: .3s;
}

.cards .card:not(:last-child) {
    margin-right: 20px;
}

.card h3 {
    word-break: break-word;
    margin-bottom: .5em;
    transition: .3s;
}

.card p {
    flex-grow: 1;
}

.card .max-width {
    text-align: left;
}

.card:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    transition: .3s;
}

.card:hover h3 {
    color: var(--color-secondary);
    transition: .3s;
}

.card:hover .link {
    color: var(--color-red);
    width: 100px;
}

.card:hover .link:before {
    right: calc(-0.5 * var(--zag-width));
    left: calc(-0.5 * var(--zag-width));
    animation: grow .3s;
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    bottom: calc(50% - 1px);
    background-color: var(--color-red);
    transform: rotate(var(--zag-rotation));
    z-index: -1;
}

.tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    box-sizing: border-box;
}

.tabs .tab-container {
    cursor: pointer;
    height: 100%;
    box-sizing: border-box;
    flex: 1 1 0;
}

.tabs .tab-container .tab {
    text-align: center;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: row;
    font-weight: bold;
    padding: 1em 0;
    margin: 0 1em;
    box-sizing: border-box;
}

.tabs .tab-container:not(:last-child) {
    border-right: var(--border);
}

.tabs .tab-container .tab.active {
    border-top: solid var(--color-grey) 1px;
    border-bottom: solid var(--color-grey) 1px;
}

.tabs .tab-container .tab img {
    height: 100%;
}

.tabs .tab-container .tab .indicator {
    height: 40px;
    width: 40px;
    background: lightgrey;
    display: flex;
    justify-content: center;
    align-items: center;
    border: solid 1px black;
    border-radius: 100%;
    font-weight: bold;
    box-shadow: inset 22px 22px 15px -11px #fff;
    margin-right: 1em;
}

.tab-body {
    display: none;
    max-width: 1600px;
}

.tab-body--active {
    display: block;
}

.job {
    margin: 0 3em;
}

.job h6 {
    color: var(--color-red);
}

.job:nth-child(odd) h6 {
    color: var(--color-blue);
}

.job .row {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 1em;
    border-bottom: var(--border);
}

.job .row .description {
    display: flex;
    align-items: center;
    width: 100%;
}

.job .row .description>* {
    flex: 1;
    text-align: left;
}

.job .job-description {
    display: flex;
    justify-content: center;
    align-items: start;
}

.job .job-description .col {
    flex: 1;
    padding: 1em;
    text-align: left;
}

.job .job-description .col div p {
    text-align: left;
}

footer {
    padding: 2em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
}

footer .logo-container {
    width: 200px;
}

footer .logo-container img {
    width: 100%;
}

footer .contact {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

@keyframes grow {
    from {
        right: 50%;
        left: 50%;
    }

    to {
        right: calc(-0.5 * var(--zag-width));
        left: calc(-0.5 * var(--zag-width));
    }
}

@media screen and (max-width: 1080px) {
    h1 {
        font-size: 40px;
    }

    h2 {
        font-size: 35px;
    }

    h3 {
        font-size: 30px;
    }

    h4 {
        font-size: 20px;
    }

    h6 {
        font-size: 16px;
    }

    p {
        font-size: 16px;
    }

    section div.content {
        padding-left: 2em;
        padding-right: 2em;
    }

    .header-container .nav {
        display: none;
    }

    .mobile-burger {
        display: block;
    }

    .top-left-triangle,
    .bottom-right-triangle {
        display: none;
    }

    .values {
        display: none;
    }

    .values--mobile {
        display: block;
    }

    .cards {
        flex-direction: column;
    }

    .cards .card {
        margin: 20px 0 0 0 !important;
    }

    .grid-cards {
        grid-template-columns: 1fr 1fr;
    }

    .certifications-partners-content {
        flex-direction: column;
    }

    .certifications-partners-content .certifications,
    .certifications-partners-content .partners {
        width: 100%;
    }

    .certifications-partners-content .certifications {
        margin-bottom: 2em;
    }

    .mission .cutout-top-bottom {
        clip-path: none;
    }

    .job-tabs .tab-container .tab {
        width: 150px;
    }

    .job .row .description .pointer {
        display: none;
    }

    .welcome h1,
    .welcome--large h1 {
        width: 100%;
        padding: 0 .5em;
    }

    .cutout-top-left {
        clip-path: none;
    }
}

@media screen and (max-width: 600px) {
    .grid-cards {
        grid-template-columns: 1fr;
    }

    .mobile-flex-column {
        flex-direction: column;
    }

    header .header-container {
        padding: 0 1em;
    }

    header .header-sub-container {
        padding: 0 1em;
    }

    header .header-sub-container nav ul .button-container {
        display: none;
    }

    .pb-15 {
        padding-bottom: 100px;
    }

    .job-tabs .tab-container .tab {
        width: 120px;
        font-size: 14px;
    }

    footer .contact {
        text-align: center;
    }
}