:root{
        /* =====  FONT SCALING  ===== */

        /* FONT SCALING CALCULATIONS - DON'T NEED TO EDIT */
        --h1-slope: calc((var(--h1-max-size) - var(--h1-min-size)) / (var(--screen-max-width) - var(--screen-min-width)));
        --h2-slope: calc((var(--h2-max-size) - var(--h2-min-size)) / (var(--screen-max-width) - var(--screen-min-width)));
        --h3-slope: calc((var(--h3-max-size) - var(--h3-min-size)) / (var(--screen-max-width) - var(--screen-min-width)));
        --h4-slope: calc((var(--h4-max-size) - var(--h4-min-size)) / (var(--screen-max-width) - var(--screen-min-width)));
        --h5-slope: calc((var(--h5-max-size) - var(--h5-min-size)) / (var(--screen-max-width) - var(--screen-min-width)));
        --h6-slope: calc((var(--h6-max-size) - var(--h6-min-size)) / (var(--screen-max-width) - var(--screen-min-width)));

        --content-slope: calc((var(--content-max-size) - var(--content-min-size)) / (var(--screen-max-width) - var(--screen-min-width)));

        --xxxl-slope: calc((var(--xxxl-max-size) - var(--xxxl-min-size)) / (var(--screen-max-width) - var(--screen-min-width)));
        --xxl-slope: calc((var(--xxl-max-size) - var(--xxl-min-size)) / (var(--screen-max-width) - var(--screen-min-width)));
        --xl-slope: calc((var(--xl-max-size) - var(--xl-min-size)) / (var(--screen-max-width) - var(--screen-min-width)));
        --l-slope: calc((var(--l-max-size) - var(--l-min-size)) / (var(--screen-max-width) - var(--screen-min-width)));
        --m-slope: calc((var(--m-max-size) - var(--m-min-size)) / (var(--screen-max-width) - var(--screen-min-width)));
        --s-slope: calc((var(--s-max-size) - var(--s-min-size)) / (var(--screen-max-width) - var(--screen-min-width)));
        --xs-slope: calc((var(--xs-max-size) - var(--xs-min-size)) / (var(--screen-max-width) - var(--screen-min-width)));

        --h1-intersection: calc((-1 * var(--screen-min-width) * var(--h1-slope)) + var(--h1-min-size));
        --h2-intersection: calc((-1 * var(--screen-min-width) * var(--h2-slope)) + var(--h2-min-size));
        --h3-intersection: calc((-1 * var(--screen-min-width) * var(--h3-slope)) + var(--h3-min-size));
        --h4-intersection: calc((-1 * var(--screen-min-width) * var(--h4-slope)) + var(--h4-min-size));
        --h5-intersection: calc((-1 * var(--screen-min-width) * var(--h5-slope)) + var(--h5-min-size));
        --h6-intersection: calc((-1 * var(--screen-min-width) * var(--h6-slope)) + var(--h6-min-size));

        --content-intersection: calc((-1 * var(--screen-min-width) * var(--content-slope)) + var(--content-min-size));

        --xxxl-intersection: calc((-1 * var(--screen-min-width) * var(--xxxl-slope)) + var(--xxxl-min-size));
        --xxl-intersection: calc((-1 * var(--screen-min-width) * var(--xxl-slope)) + var(--xxl-min-size));
        --xl-intersection: calc((-1 * var(--screen-min-width) * var(--xl-slope)) + var(--xl-min-size));
        --l-intersection: calc((-1 * var(--screen-min-width) * var(--l-slope)) + var(--l-min-size));
        --m-intersection: calc((-1 * var(--screen-min-width) * var(--m-slope)) + var(--m-min-size));
        --s-intersection: calc((-1 * var(--screen-min-width) * var(--s-slope)) + var(--s-min-size));
        --xs-intersection: calc((-1 * var(--screen-min-width) * var(--xs-slope)) + var(--xs-min-size));

        --h1-preferred: calc(var(--h1-intersection) + (var(--h1-slope) * 100));
        --h2-preferred: calc(var(--h2-intersection) + (var(--h2-slope) * 100));
        --h3-preferred: calc(var(--h3-intersection) + (var(--h3-slope) * 100));
        --h4-preferred: calc(var(--h4-intersection) + (var(--h4-slope) * 100));
        --h5-preferred: calc(var(--h5-intersection) + (var(--h5-slope) * 100));
        --h6-preferred: calc(var(--h6-intersection) + (var(--h6-slope) * 100));

        --content-preferred: calc(var(--content-intersection) + (var(--content-slope) * 100));

        --xxxl-preferred: calc(var(--xxxl-intersection) + (var(--xxxl-slope) * 100));
        --xxl-preferred: calc(var(--xxl-intersection) + (var(--xxl-slope) * 100));
        --xl-preferred: calc(var(--xl-intersection) + (var(--xl-slope) * 100));
        --l-preferred: calc(var(--l-intersection) + (var(--l-slope) * 100));
        --m-preferred: calc(var(--m-intersection) + (var(--m-slope) * 100));
        --s-preferred: calc(var(--s-intersection) + (var(--s-slope) * 100));
        --xs-preferred: calc(var(--xs-intersection) + (var(--xs-slope) * 100));

        --h1-min: calc(var(--h1-min-size) * 1rem);
        --h1-mid: calc(var(--h1-preferred) * 1vw);
        --h1-max: calc(var(--h1-max-size) * 1rem);

        --h2-min: calc(var(--h2-min-size) * 1rem);
        --h2-mid: calc(var(--h2-preferred) * 1vw);
        --h2-max: calc(var(--h2-max-size) * 1rem);

        --h3-min: calc(var(--h3-min-size) * 1rem);
        --h3-mid: calc(var(--h3-preferred) * 1vw);
        --h3-max: calc(var(--h3-max-size) * 1rem);

        --h4-min: calc(var(--h4-min-size) * 1rem);
        --h4-mid: calc(var(--h4-preferred) * 1vw);
        --h4-max: calc(var(--h4-max-size) * 1rem);

        --h5-min: calc(var(--h5-min-size) * 1rem);
        --h5-mid: calc(var(--h5-preferred) * 1vw);
        --h5-max: calc(var(--h5-max-size) * 1rem);

        --h6-min: calc(var(--h6-min-size) * 1rem);
        --h6-mid: calc(var(--h6-preferred) * 1vw);
        --h6-max: calc(var(--h6-max-size) * 1rem);

        --content-min: calc(var(--content-min-size) * 1rem);
        --content-mid: calc(var(--content-preferred) * 1vw);
        --content-max: calc(var(--content-max-size) * 1rem);

        --xxxl-min: calc(var(--xxxl-min-size) * 1rem);
        --xxxl-mid: calc(var(--xxxl-preferred) * 1vw);
        --xxxl-max: calc(var(--xxxl-max-size) * 1rem);

        --xxl-min: calc(var(--xxl-min-size) * 1rem);
        --xxl-mid: calc(var(--xxl-preferred) * 1vw);
        --xxl-max: calc(var(--xxl-max-size) * 1rem);

        --xl-min: calc(var(--xl-min-size) * 1rem);
        --xl-mid: calc(var(--xl-preferred) * 1vw);
        --xl-max: calc(var(--xl-max-size) * 1rem);

        --l-min: calc(var(--l-min-size) * 1rem);
        --l-mid: calc(var(--l-preferred) * 1vw);
        --l-max: calc(var(--l-max-size) * 1rem);

        --m-min: calc(var(--m-min-size) * 1rem);
        --m-mid: calc(var(--m-preferred) * 1vw);
        --m-max: calc(var(--m-max-size) * 1rem);

        --s-min: calc(var(--s-min-size) * 1rem);
        --s-mid: calc(var(--s-preferred) * 1vw);
        --s-max: calc(var(--s-max-size) * 1rem);

        --xs-min: calc(var(--xs-min-size) * 1rem);
        --xs-mid: calc(var(--xs-preferred) * 1vw);
        --xs-max: calc(var(--xs-max-size) * 1rem);

        --fs-h1: clamp(var(--h1-min), var(--h1-mid), var(--h1-max));
        --fs-h2: clamp(var(--h2-min), var(--h2-mid), var(--h2-max));
        --fs-h3: clamp(var(--h3-min), var(--h3-mid), var(--h3-max));
        --fs-h4: clamp(var(--h4-min), var(--h4-mid), var(--h4-max));
        --fs-h5: clamp(var(--h5-min), var(--h5-mid), var(--h5-max));
        --fs-h6: clamp(var(--h6-min), var(--h6-mid), var(--h6-max));

        --fs-p: clamp(var(--content-min), var(--content-mid), var(--content-max));

        --fs-xxxl: clamp(var(--xxxl-min), var(--xxxl-mid), var(--xxxl-max));
        --fs-xxl: clamp(var(--xxl-min), var(--xxl-mid), var(--xxl-max));
        --fs-xl: clamp(var(--xl-min), var(--xl-mid), var(--xl-max));
        --fs-l: clamp(var(--l-min), var(--l-mid), var(--l-max));
        --fs-m: clamp(var(--m-min), var(--m-mid), var(--m-max));
        --fs-s: clamp(var(--s-min), var(--s-mid), var(--s-max));
        --fs-xs: clamp(var(--xs-min), var(--xs-mid), var(--xs-max));
}

*,
*::before,
*::after{
        box-sizing: border-box;
        margin:0;
        text-decoration:none;
        hyphens:auto;
        overflow-wrap:break-word;
        -webkit-text-size-adjust:none;
        -webkit-tap-highlight-color:rgba(0,0,0,0);
        outline:none;
        line-height:normal;
}

#page-progressbar{
        background: linear-gradient(to right, var(--bgr-progressbar-300) 0%, var(--bgr-progressbar-400)  100%);
        position:fixed;
        top:0;
        left:0;
        width:0;
        height:2px;
        z-index:10000;
}


sub, sup{
        font-size: 60%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
}

sup{
        top: -0.75em;
}

sub{
        bottom: -0.25em;
}

.small{
        font-size:var(--fs-xs);
        line-height:1rem;
}

body{
        background:var(--bgr-body-300);
        font-family:var(--primary-font-family);
        color:var(--clr-primary-300);
        scroll-behavior: smooth;
}

body.noscroll{
        overflow:hidden;
}

h1{
        float:left;
        width:100%;
        font-size:var(--fs-h1);
        margin:1rem 0 .25rem 0;
}

h2{
        float:left;
        width:100%;
        font-size:var(--fs-h2);
        margin:1rem 0 .25rem 0;
}

h3{
        float:left;
        width:100%;
        font-size:var(--fs-h3);
        margin:1rem 0 .25rem 0;
}

h4{
        float:left;
        width:100%;
        font-size:var(--fs-h4);
        margin:1rem 0 .25rem 0;
}

h5{
        float:left;
        width:100%;
        font-size:var(--fs-h5);
        margin:1rem 0 .25rem 0;
}

h6{
        float:left;
        width:100%;
        font-size:var(--fs-h6);
        margin:1rem 0 .25rem 0;
}

.ol{
        float:left;
        width:100%;
        margin:0;
        padding:0;
        color:var(--clr-primary-200);
        font-size:var(--fs-m);
}

.hl{
        float:left;
        width:100%;
        margin:0;
        padding:0;
        font-size:var(--fs-h1);
}

.sl{
        float:left;
        width:100%;
        margin:0;
        padding:0;
        color:var(--clr-primary-200);
        font-size:var(--fs-m);
}

p{
        color:var(--clr-primary-300);
        font-size:var(--fs-p);
        line-height:1.4rem;
        margin:1rem 0 .25rem 0;
}

a{
        color:var(--clr-primary-300);
        font-weight:bold;
}

/* Mobile View > Mobile Only */
@media screen and (max-width: 45rem){

        ul,
        ol{
                margin:0 0 0 1rem;
                padding:0;
        }
}

ul li{
        float:left;
        text-align:left;
        width:100%;
        padding:0 0 .15rem 0;
        font-size:var(--fs-p);
        list-style: none;
}


hr{
        float:left;
        width:100%;
        height:1px;
        margin:1rem 0 .5rem 0;
        background:none;
        border:none;
        border-bottom:var(--brd-primary-100) 1px solid;
}

.show{
        float:left;
        width:100%;
        animation:fade-in 850ms ease-in forwards;
}

.hide{
        float:left;
        width:100%;
        animation:fade-out 850ms ease-out forwards;
}

.toggle{
        transition:height 250ms ease-in-out;
        overflow:hidden;
}

.toggle:not(.active) {
        display:none;
}

@keyframes tilt-shaking {
        0% { transform: rotate(0deg); }
        25% { transform: rotate(10deg); }
        50% { transform: rotate(0deg); }
        75% { transform: rotate(-10deg); }
        100% { transform: rotate(0deg); }
}

@keyframes fade-in{

        from{
                visibility: hidden;
                opacity: 0;
        }to{
                 visibility: visible;
                 opacity: 1;
         }

}

@keyframes fade-out{

        from{
                visibility: visible;
                opacity: 1;
        }to{
                 visibility: hidden;
                 opacity: 0;
         }

}

@keyframes scale-up{

        50% {
                transform: scale(1.1);
        }

        100% {
                transform: scale(1);
        }
}

/* Mobile View only */
@media screen and (max-width: 45rem){

        @keyframes scale-down{

                70% {
                        transform: scale(1);
                }

                100% {
                        transform: scale(.5);
                }
        }

        @keyframes add{

                50% {
                        transform: scale(.9);
                }

                100% {
                        transform: scale(1);
                }
        }


}

/* Tablet and above */
@media screen and (min-width: 45rem){

        @keyframes scale-down{

                50% {
                        transform: scale(1.1);
                }

                70% {
                        transform: scale(1);
                }

                100% {
                        transform: scale(.5);
                }
        }

        @keyframes add{

                50% {
                        transform: scale(1.4);
                }

                100% {
                        transform: scale(1);
                }
        }
}


main{
        grid-area:main;
}

article{
        float:left;
        width:100%;
        margin:0 0 1rem 0;
        padding:.75rem 0;
}

article header{
        float:left;
        width:100%;
        margin:0;
        padding:0;
        background:none;
}

article section{
        float:left;
        width:100%;
        margin:0;
        padding:0;
}

/* Mobile View */
@media screen and (max-width: 45rem){

        article header h1{
                float:left;
                width:100%;
                text-align:center;
        }

        article header h1 .ol{
                width:100%;
                margin:0 0 .25rem 0;
                padding:0;
                color:var(--clr-primary-200);
                font-size:var(--fs-s);
                font-family:var(--primary-font-family);
        }

        article header h1 .hl{
                width:100%;
                margin:0;
                padding:0;
                color:var(--clr-primary-400);
                font-size:var(--fs-h1);
                font-family:var(--accent-font-family);
        }

        article header h1 .sl{
                width:100%;
                margin:0;
                padding:0;
                color:var(--clr-primary-200);
                font-size:var(--fs-s);
                font-family:var(--primary-font-family);
        }



        article{
                float:left;
                width:calc(100% - 1.5rem);
                margin:.25rem .75rem;
                padding:0;
        }

}

/* Tablet and above */
@media screen and (min-width: 45rem){

        article header h1{
                float:left;
                width:100%;
                text-align:center;
        }

        article header h1 .ol{
                float:left;
                width:100%;
                margin:0 0 .25rem 0;
                padding:0;
                color:var(--clr-primary-200);
                font-size:var(--fs-s);
                font-family:var(--primary-font-family);
        }

        article header h1 .hl{
                float:left;
                width:100%;
                margin:0;
                padding:0;
                color:var(--clr-primary-400);
                font-size:var(--fs-h1);
                font-family:var(--accent-font-family);
        }

        article header h1 .sl{
                float:left;
                width:100%;
                margin:0;
                padding:0;
                color:var(--clr-primary-200);
                font-size:var(--fs-s);
                font-family:var(--primary-font-family);
        }


        article{
                float:left;
                width:calc(100% - 1.5rem);
                margin:.25rem .75rem;
                padding:0;
        }

}


article .asset{
        border-bottom:var(--brd-primary-300) 1px solid;
}


article section .foreground.row{
        display:flex;
        justify-content:space-between !important;
        align-items:center;
        flex-direction:column;
        margin:0 0 1rem 0;
}

article section .foreground .title,
article section .foreground.row .title{
        float:left;
        width:100%;
        font-family:var(--accent-font-family);
        text-align:center;
}


article section .foreground .text{
        text-align:center;
}


article section .foreground.row .text{
        float:left;
        width:100%;
        display:flex;
        justify-content:space-between !important;
        align-items:start;
        flex-wrap:wrap;
}


article section .foreground.row.big{
        display:flex;
        justify-content:space-between;
        align-items:center;
        margin:0 0 1rem 0;

}

article section .foreground.row.big .title{
        display:flex;
        justify-content:center;
        align-items:flex-start;
        width:100%;
        flex-wrap:wrap;
        font-family:var(--secondary-font-family);
}

article section .foreground.row.big .text{
        float:left;
        width:100%;
        display:flex;
        justify-content:center !important;
        align-items:start;
        flex-wrap:wrap;
}




/* Mobile View > till Tablet */
@media screen and (max-width: 45rem){

        article section .foreground.row .media{
                width:4.65rem !important;
                height:auto !important;
                margin:1rem 0 0 0;
                padding:0;
        }

        article section .foreground.row .media img{
                width:100% !important;
                height:auto !important;
                border-radius:50%;
                border:var(--brd-primary-100) .15rem solid;
        }

        article section .foreground.row.big .media{
                width:11rem !important;
                height:auto !important;
                margin:1rem;
        }

        article section .foreground.row.big .media img{
                width:100% !important;
                height:auto !important;
                border:none;
        }

        article section .foreground.row figure .legend .hl{
                display:none;
        }

}


/* Mobile View > Tablet */
@media screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: portrait){

        article section .foreground.row .media{
                width:8rem !important;
                height:auto !important;
                margin:1rem;
        }

        article section .foreground.row .media img{
                width:100% !important;
                height:auto !important;
                border-radius:50%;
                border:var(--brd-primary-100) .25rem solid;
        }

        article section .foreground.row.big .media{
                width:13rem !important;
                height:auto !important;
        }

        article section .foreground.row.big .media img{
                width:100% !important;
                height:auto !important;
                border:none;
        }

        article section .foreground.row figure .legend .hl{
                font-size:var(--fs-m);
        }

}

/* Tablet and above */
@media screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: landscape){

        article section .foreground.row .media{
                width:9rem !important;
                height:auto !important;
                margin:1rem;
        }

        article section .foreground.row .media img{
                width:100% !important;
                height:auto !important;
                border-radius:50%;
                border:var(--brd-primary-100) .25rem solid;
        }

        article section .foreground.row.big .media{
                width:15rem !important;
                height:auto !important;
                margin:1rem;
        }

        article section .foreground.row.big .media img{
                width:100% !important;
                height:auto !important;
                border:none;
        }

        article section .foreground.row figure .legend .hl{
                font-size:var(--fs-m);
        }

}


/* Desktop View */
@media screen and (min-width: 79.5rem){

        article section .foreground.row .media{
                width:11rem !important;
                height:auto !important;
                margin:2rem;
        }

        article section .foreground.row .media img{
                width:100% !important;
                height:auto !important;
                border-radius:50%;
                border:var(--brd-primary-100) .35rem solid;
        }

        article section .foreground.row.big .media{
                width:15rem !important;
                height:auto !important;
                margin:2rem;
        }

        article section .foreground.row.big .media img{
                width:100% !important;
                height:auto !important;
                border:none;
        }

}



/* Mobile View > till Tablet */
@media screen and (max-width: 45rem){

        main .card .foreground,
        main .card .foreground.key{
                float:left;
                width:calc(100% - 1.5rem);
                margin:.25rem .75rem;
                padding:0;
        }


        main .card .foreground.key{
                display:grid;
                grid-template-rows:min-content auto auto auto;
                grid-template-areas:
                "keyvisual keyvisual"
                "title title"
                "text text"
                "asset asset";
                grid-template-columns:1fr 3fr;
                grid-column-gap:.25rem;
        }


        main .card .foreground.key .keyvisual{
                grid-area:keyvisual;
                width:100%;
        }

        main .card .foreground.key .keyvisual img{
                max-width: 50%;
                margin:.25rem auto 0 auto;
        }

}


/* Tablet View */
@media screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: portrait){

        main .card .foreground,
        main .card .foreground.key{
                float:left;
                width:calc(100% - 1.5rem);
                margin:.25rem .75rem;
                padding:0;
        }

}

/* Tablet View */
@media screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: landscape){

        main .card .foreground,
        main .card .foreground.key{
                float:left;
                width:calc(100% - 1.5rem);
                margin:.25rem .75rem;
                padding:0;
        }

}


/* Desktop only */
@media screen and (min-width: 79.5rem){

        main .card .foreground,
        main .card .foreground.key{
                float:left;
                width:100%;
                margin:.25rem 0;
                padding:0;
        }

}

/* Tablet and above */
@media screen and (min-width: 45rem){

        main .card .foreground.key{
                display:grid;
                grid-template-rows:minmax(0,auto) auto minmax(0,auto);
                grid-template-areas:
                "title title"
                "keyvisual text"
                "asset asset";
                grid-template-columns:1fr 3fr;
                grid-column-gap:.25rem;
        }

        main .card .foreground.key .keyvisual{
                grid-area:keyvisual;
                height:auto;
                max-width:80%;
        }

        main .card .foreground.key .keyvisual .media{
                float:left;
                width:100%;
                margin:1.5rem .5rem;
                padding:0;
        }
}

/* Mobile View */
@media screen and (max-width: 45rem){

        article section .foreground .title{
                grid-area:title;
                display:inline-block;
                width:100%;
                margin:0;
                padding:0;
        }

        article section .foreground .title .ol{
                float:left;
                width:100%;
                margin:0;
                padding:0;
                color:var(--clr-primary-200);
                font-size:var(--fs-m);
                font-family:var(--accent-font-family);
        }

        article section .foreground .title .hl{
                float:left;
                width:100%;
                margin:0;
                padding:0;
                font-size:var(--fs-h2);
        }

        article section .foreground .title .sl{
                float:left;
                width:100%;
                margin:0;
                padding:0;
                color:var(--clr-primary-200);
                font-size:var(--fs-s);
                font-family:var(--primary-font-family);
        }


        article section .foreground .text{
                grid-area:text;
                display:block;
                width:100%;
        }

        article section .foreground .asset{
                grid-area:asset;
                display:inline-block;
                width:100%;
        }
}



/* Tablet and above */
@media screen and (min-width: 45rem){

        article section .foreground .title{
                grid-area:title;
                display:inline-block;
                width:100%;
                margin:0;
                padding:0;
        }

        article section .foreground .title .ol{
                float:left;
                width:100%;
                margin:0;
                padding:0;
                color:var(--clr-primary-200);
                font-size:var(--fs-m);
                font-family:var(--accent-font-family);
        }

        article section .foreground .title .hl{
                float:left;
                width:100%;
                margin:0;
                padding:0;
                font-size:var(--fs-h1);
        }

        article section .foreground .title .sl{
                float:left;
                width:100%;
                margin:0;
                padding:0;
                color:var(--clr-primary-200);
                font-size:var(--fs-s);
                font-family:var(--primary-font-family);
        }

        article section .foreground .text{
                grid-area:text;
                display:block;
                width:100%;
        }

        article section .foreground .asset{
                grid-area:asset;
                display:inline-block;
                width:100%;
        }

}


article section .foreground.row figcaption.legend{
        float:left;
        width:100% !important;
        margin:.25rem 0 0 0;
        padding:0;
        text-align:center;
        background:none;
}

article section .foreground.row figcaption.legend p{
        float:left;
        width:100%;
        margin:0;
        padding:0;
        text-align:center;
}

article section .foreground.row.big figcaption.legend{
        float:left;
        width:100% !important;
        margin:.25rem 0 0 0;
        padding:0;
        text-align:center;
        background:none;
}

article section .foreground.row.big figcaption.legend p{
        float:left;
        width:100%;
        margin:0;
        padding:0;
        text-align:center;
}