/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

/* #region reset */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* #endregion reset */


/* ==================
    Federated CSS
===================== */
* {
    box-sizing: border-box;
}

.no-scroll {
    overflow: hidden;
}

/* #region Keyframes & Animation */
@keyframes slide-in--down {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0);
    }
}

.page-load-animation {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.1s cubic-bezier(0.3, 0, 0.5, 1), transform 0.8s cubic-bezier(0.3, 0, 0.5, 1);
}

.page-load-animation.activated {
    opacity: 1;
    transform: translateY(0);
}

/* #endregion Keyframes & Animation */

/* #region Buttons */
.global-btn {
    background: none;
    border: none;
}

.global__main-button {
    background: var(--main-orange);
    color: var(--white);
    text-align: center;
    font-weight: 600;
}

.global__main-button:hover {
    color: var(--white);
    background: var(--main-orange-hover-color);
}

.main-button-hover:hover {
    color: var(--white);
    background: var(--main-orange-hover-color);
}

/* #endregion Buttons */

/* #region Colors */
:root {
    /* Default colors */
    --white: rgb(255, 255, 255);
    --black: rgb(0, 0, 0);
    --grey: rgb(128, 128, 128);
    --light-grey: rgb(168, 168, 168);
    --red: rgb(255, 0, 0);
    --green: rgb(0, 128, 0);
    --blue: rgb(0, 0, 255);


    /* Custom Colors */
    --main-blue: #4D6F83;
    --secondary-blue: #385261;
    --main-orange: #D67147;
    --main-orange-hover-color: #DD9E5E;
    --main-purple: #50345c;
    --off-white: #E4E3D8;
    --light-black: #353533;
    --olive-green: #768A54;


    /* opacity colors */
    --white-op85: rgba(255, 255, 255, 0.85);
    --white-op6: rgba(255, 255, 255, 0.6);
    --white-op3: rgba(255, 255, 255, 0.3);

    --black-op8: rgba(0, 0, 0, 0.8);
    --black-op7: rgba(0, 0, 0, 0.7);
    --black-op6: rgba(0, 0, 0, 0.6);
    --black-op55: rgba(0, 0, 0, 0.55);
    --black-op4: rgba(0, 0, 0, 0.4);
    --black-op3: rgba(0, 0, 0, 0.3);
    --black-op25: rgba(0, 0, 0, 0.25);
    --black-op2: rgba(0, 0, 0, 0.2);
    --black-op15: rgba(0, 0, 0, 0.15);
    --black-op1: rgba(0, 0, 0, 0.1);
    --black-op05: rgba(0, 0, 0, 0.05);
}

.global__white-text {
    color: var(--white);
}

.global__black-text {
    color: var(--black);
}

.global__red-text {
    color: var(--red);
}

.global__main-blue-text {
    color: var(--main-blue);
}

.global__main-orange-text {
    color: var(--main-orange);
}

.white-op6-text {
    color: var(--white-op6);
}

.black-op6-text {
    color: var(--black-op6);
}

.global__black-background-container {
    background: var(--black);
}

.global__main-blue-background-container {
    background: var(--main-blue);
}

.global__secondary-blue-background-container {
    background: var(--secondary-blue);
}

.global__white-background-container {
    background: var(--white);
}

/* #endregion Colors */

/* #region Typography */
body {
    font-family: "Hanken Grotesk", sans-serif;
    min-width: 300px;
    overflow-x: hidden;
}

a {
    text-decoration: none;
}

a:hover {
    color: var(--main-orange-hover-color);
    cursor: pointer;
}

.global__bold-700 {
    font-weight: 700;
}

.global__bold-600 {
    font-weight: 600;
}

.global__bold-500 {
    font-weight: 500;
}

.global__bold-400 {
    font-weight: 400;
}

.global__bold-300 {
    font-weight: 300;
}

.global__bold-200 {
    font-weight: 200;
}

.global__bold-100 {
    font-weight: 100;
}

h1 {
    font-size: 40px;

    @media (min-width: 768px) {
        font-size: 72px;
    }

    @media (min-width: 1280px) {
        font-size: 80px;
    }
}

h2 {
    font-size: 24px;

    @media (min-width: 768px) {
        font-size: 32px;
    }

    @media (min-width: 1280px) {
        font-size: 40px;
    }
}

.global__italic-text {
    font-style: italic;
}

.global__paragraph-sm {
    font-size: 0.8rem;
}

.global__paragraph {
    font-size: 1rem;
}

.global__paragraph-md {
    font-size: 1.2rem;
}

.global__paragraph-lg {
    font-size: 1.5rem;
}

.global__lh__1 {
    line-height: 1;
}

.global__lh__1-1 {
    line-height: 1.1;
}

.global__lh__1-2 {
    line-height: 1.2;
}

.global__lh__1-3 {
    line-height: 1.3;
}

.global__opacity__9 {
    opacity: 0.9;
}

.global__opacity__8 {
    opacity: 0.8;
}

/* #endregion Typography */

/* #region Layout */
.global__height-100-vh {
    height: 100vh;
}

.global__width-100 {
    width: 100%;
}

.global__mwidth-fitContent {
    max-width: fit-content;
}

.global__main-width-container {
    @media (min-width: 768px) {
        max-width: 720px;
        margin: 0 auto;
    }

    @media (min-width: 1280px) {
        max-width: 1200px;
    }
}

.global__main-padding-container {
    padding: 32px 16px;

    @media (min-width: 768px) {
        padding: 48px 0;
    }

    @media (min-width: 1280px) {
        padding: 64px 0;
    }
}

.global__title-subtitle-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.flex-row {
    display: flex;
}

.flex-row-gap1 {
    display: flex;
    gap: 16px;
}

.flex-col-gap1 {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

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

.link-container {
    display: flex;
    gap: 5px;
    align-items: center;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

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

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

.align-items-baseline {
    align-items: baseline;
}

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

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

.wrap-wrap {
    flex-wrap: wrap;
}

.wrap-nowrap {
    flex-wrap: nowrap;
}

.width-grow {
    flex-basis: 0;
    flex-grow: 1;
}

.link-container {
    display: flex;
    gap: 5px;
    align-items: center;
}

.height100 {
    height: 100%;
}

.width-auto {
    width: auto;
}

.width100 {
    width: 100%;
}
/* #endregion Layout */

/* #region COLUMN-DIVIDERS */
.column-divider-secondary-blue {
    background-color: var(--secondary-blue);
    display: flex;
    align-items: end;
    height: 64px;
}

.column-divider-white {
    background-color: var(--white);
    display: flex;
    align-items: end;
    height: 64px;
}

.column-divider-black {
    background-color: var(--black);
    display: flex;
    align-items: end;
    height: 64px;
}

.column-divider-main-blue {
    background-color: var(--main-blue);
    display: flex;
    align-items: end;
    height: 64px;
}


.column-white-empty,
.column-white-half,
.column-white-small {
    flex-grow: 1;
    background-color: var(--white);
}

.column-black-empty,
.column-black-half,
.column-black-small {
    flex-grow: 1;
    background-color: var(--black);
}

.column-main-blue-empty,
.column-main-blue-half,
.column-main-blue-small {
    flex-grow: 1;
    background-color: var(--main-blue);
}

.column-white-empty,
.column-black-empty,
.column-main-blue-empty {
    height: 0px;
}

.column-white-half,
.column-black-half,
.column-main-blue-half {
    height: 21px;
}

.column-white-small,
.column-black-small,
.column-main-blue-small {
    height: 42px;
}

@media (min-width: 768px) {
    .column-white-full {
        flex-grow: 1;
        background-color: var(--white);
    }

    .column-black-full {
        flex-grow: 1;
        background-color: var(--black);
    }

    .column-main-blue-full {
        flex-grow: 1;
        background-color: var(--main-blue);
    }

    .column-white-full,
    .column-black-full,
    .column-main-blue-full {
        height: 64px;
    }
}

/* #endregion COLUMN-DIVIDERS */