/* ---- The normal page content html tags to design the content ---- */
.blackBg {
    html,
    body {
        background-color: var(--black);
    }

    p:not(.tag) {
        color: var(--white);
    }
}

h1 {
    font-weight: 700;
    font-size: 5em;
    color: var(--blue);
    line-height: 100%;

    grid-column: span 5;

    align-self: flex-start;
}

h2 {
    font-weight: 700;
    color: var(--blue);

    font-size: 3em;

    line-height: 120%;

    transition-duration: 0.2s;

    margin-bottom: 0em;
}

h3 {
    font-weight: 300;
    font-size: 2em;
    color: var(--blue);

    line-height: 130%;

    transition-duration: 0.2s;
}

p {
    font-size: 16px;
    font-weight: 300;
    line-height: 150%;

    color: var(--black);

    margin: 0em;

    align-self: flex-end;

    transition-duration: 0.2s;
}

a {
    text-decoration: none;

    font-size: 16px;
    font-weight: 300;

    color: var(--black);

    margin: 0em;

    transition-duration: 0.2s;

    cursor: none;
}

video {
    box-sizing: border-box;
    object-fit: cover;

    width: 100%;

    align-self: flex-end;

    margin: 0px;
    padding: 0px;

    border-radius: 20px;
}

img {
    margin: 0px;
    padding: 0px;

    box-sizing: border-box;
    object-fit: cover;

    width: 100%;

    align-self: flex-end;
}

img:not(.navImg img):not(.pageTease):not(.extendedWidth) {
    border-radius: 20px;
}

div {
    margin: 0px;
}

/* ---- Class when multiple images are needed in one column group (e.g. in lSub or rSub) ---- */
.imgDiv {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ---- Classes for "metadata" info at top of page (see layoutVariables for more) ---- */

.pageTease {
    margin: 0em;
    padding: 0em;

    position: absolute;
    top: 0;
    left: -5%;

    width: calc(100vw + 10%);
    max-width: 120vw;

    object-fit: cover;
    object-position: center;

    z-index: -1;

    border-radius: 0em;

    height: 100lvh;
}

.pageHeader {
    margin-left: 3em;
    grid-column: 1 / span 3;

    display: flex;
    height: 82lvh;

    margin-top: 10em;

    flex-direction: column;
    justify-content: end;
    align-items: start;

    .altBg {
        color: var(--white);
        border-color: var(--white);
    }
}

.metaInfo {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    text-align: left;

    align-self: start;
    margin: 0px;
    margin-top: 0em;
}

.extraPageHeader {
    grid-column: 6 / span 2;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    text-align: right;

    align-self: end;
    justify-content: end;
    margin: 0px;

    .altBg {
        color: var(--white);
        border-color: var(--white);
    }
    .extraTitle {
        font-size: 3em;
        font-weight: 500;
        flex-basis: 100%;
        line-height: 0%;
        margin-top: 1em;
        margin-right: 0.5em;
        margin-bottom: 0.5em;
    }
    .tag {
        margin-bottom: 0em;
    }

    p {
        line-height: 100%;
    }
}

.infoTitle {
    margin-right: 2em;
    flex-basis: 100%;
}

.title {
    align-self: auto;
    margin: 0px;
    margin-top: 0.2em;
}

.subTitle {
    grid-column: span 3;

    font-size: 16px;

    margin: 0px;
    margin-top: 1em;
}

.borderBlue {
    border-radius: 20px;
    border: solid 0.5em var(--blue);
}

.pageSection {
    width: 100%;

    p {
        margin-top: 0.4em;
        padding-left: 0em;
        font-weight: 400;
        font-size: 20px;
        width: 40%;
        line-height: 130%;
    }
    h1 {
        font-size: 70px;
    }
}