: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-intercept: calc(var(--h1-min-size) - var(--h1-slope) * var(--screen-min-width));
--h2-intercept: calc(var(--h2-min-size) - var(--h2-slope) * var(--screen-min-width));
--h3-intercept: calc(var(--h3-min-size) - var(--h3-slope) * var(--screen-min-width));
--h4-intercept: calc(var(--h4-min-size) - var(--h4-slope) * var(--screen-min-width));
--h5-intercept: calc(var(--h5-min-size) - var(--h5-slope) * var(--screen-min-width));
--h6-intercept: calc(var(--h6-min-size) - var(--h6-slope) * var(--screen-min-width));
--content-intercept: calc(var(--content-min-size) - var(--content-slope) * var(--screen-min-width));
--xxxl-intercept: calc(var(--xxxl-min-size) - var(--xxxl-slope) * var(--screen-min-width));
--xxl-intercept: calc(var(--xxl-min-size) - var(--xxl-slope) * var(--screen-min-width));
--xl-intercept: calc(var(--xl-min-size) - var(--xl-slope) * var(--screen-min-width));
--l-intercept: calc(var(--l-min-size) - var(--l-slope) * var(--screen-min-width));
--m-intercept: calc(var(--m-min-size) - var(--m-slope) * var(--screen-min-width));
--s-intercept: calc(var(--s-min-size) - var(--s-slope) * var(--screen-min-width));
--xs-intercept: calc(var(--xs-min-size) - var(--xs-slope) * var(--screen-min-width));

--fs-h1: clamp(calc(var(--h1-min-size) * 1rem), calc(var(--h1-slope) * 100vw + var(--h1-intercept) * 1rem), calc(var(--h1-max-size) * 1rem));
--fs-h2: clamp(calc(var(--h2-min-size) * 1rem), calc(var(--h2-slope) * 100vw + var(--h2-intercept) * 1rem), calc(var(--h2-max-size) * 1rem));
--fs-h3: clamp(calc(var(--h3-min-size) * 1rem), calc(var(--h3-slope) * 100vw + var(--h3-intercept) * 1rem), calc(var(--h3-max-size) * 1rem));
--fs-h4: clamp(calc(var(--h4-min-size) * 1rem), calc(var(--h4-slope) * 100vw + var(--h4-intercept) * 1rem), calc(var(--h4-max-size) * 1rem));
--fs-h5: clamp(calc(var(--h5-min-size) * 1rem), calc(var(--h5-slope) * 100vw + var(--h5-intercept) * 1rem), calc(var(--h5-max-size) * 1rem));
--fs-h6: clamp(calc(var(--h6-min-size) * 1rem), calc(var(--h6-slope) * 100vw + var(--h6-intercept) * 1rem), calc(var(--h6-max-size) * 1rem));
--fs-p: clamp(calc(var(--content-min-size) * 1rem), calc(var(--content-slope) * 100vw + var(--content-intercept) * 1rem), calc(var(--content-max-size) * 1rem));
--fs-xxxl: clamp(calc(var(--xxxl-min-size) * 1rem), calc(var(--xxxl-slope) * 100vw + var(--xxxl-intercept) * 1rem), calc(var(--xxxl-max-size) * 1rem));
--fs-xxl: clamp(calc(var(--xxl-min-size) * 1rem), calc(var(--xxl-slope) * 100vw + var(--xxl-intercept) * 1rem), calc(var(--xxl-max-size) * 1rem));
--fs-xl: clamp(calc(var(--xl-min-size) * 1rem), calc(var(--xl-slope) * 100vw + var(--xl-intercept) * 1rem), calc(var(--xl-max-size) * 1rem));
--fs-l: clamp(calc(var(--l-min-size) * 1rem), calc(var(--l-slope) * 100vw + var(--l-intercept) * 1rem), calc(var(--l-max-size) * 1rem));
--fs-m: clamp(calc(var(--m-min-size) * 1rem), calc(var(--m-slope) * 100vw + var(--m-intercept) * 1rem), calc(var(--m-max-size) * 1rem));
--fs-s: clamp(calc(var(--s-min-size) * 1rem), calc(var(--s-slope) * 100vw + var(--s-intercept) * 1rem), calc(var(--s-max-size) * 1rem));
--fs-xs: clamp(calc(var(--xs-min-size) * 1rem), calc(var(--xs-slope) * 100vw + var(--xs-intercept) * 1rem), calc(var(--xs-max-size) * 1rem));
}

*,
*::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:has(dialog[open]),
body:has(#nav.open){
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{
float:left;
width:100%;
margin:0 0 0 1rem;
padding:0;
}
}

ul,
ol{
float:left;
width:100%;
margin:.25rem 0 .5rem 0;
}

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

ul li:before{
display:inline-block;
content:'';
height:.75em;
width:1rem;
background:url('/assets/img/icon/list.svg') no-repeat top left;
}

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

.asset{
float:left;
width:100%;
margin:.25rem 0;
padding:.25rem 0;
border-top:var(--brd-gray-300) 1px solid;
border-bottom:var(--brd-gray-300) 1px solid;
}

.asset a{
float:right;
}

.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%;
}

article header h1 .ol{
float:left;
width:100%;
margin:0 0 .15rem 0;
padding:0;
color:var(--clr-primary-200);
font-size:var(--fs-m);
font-family:var(--accent-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);
}


}

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

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

}

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

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

}

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

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



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

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


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


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

}

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

.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){

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

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

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

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

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

}


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

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

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

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

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

.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){

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

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

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

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

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

}


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

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

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

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

.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:1.25rem .75rem 0 .75rem;
padding:0;
}


main .card .foreground.key{
display:grid;
grid-template-rows:min-content auto auto auto;
grid-template-areas:
                "keyvisual"
                "title"
                "text"
                "asset";
grid-template-columns:100%;
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:
                "keyvisual 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;
}