:root {
    --top-bar-size: 5rem;
    --top-bar-size2: 3rem;

    --section-padding: 4rem;
    --transition-time: .4s;

    --col-black: #000000;
    --col-white: #FFFFFF;

    --c-bg-neutral-c1: #F5F5F6;
    --c-bg-neutral-c2: #ECECEC;
    --c-bg-neutral-c3: #D9D9D9;


    /*
    --col-primary-l: #5abf9a;
    --col-primary-d: #1e7756;

    --col-secondary-l: #4aa8db;
    --col-secondary-d: #4aa8db;

    --col-tertiary-l: #0B4B84;
    --col-tertiary-d: #0B4B84;

    --col-tertiary-l: #0B4B84;
    --col-tertiary-d: #0B4B84;

    --col-tertiary-l: #0B4B84;
    --col-tertiary-d: #0B4B84;


    --col-primary-l: #5abf9a;
    --col-primary-d: #4ca083;

    --col-secondary-l: #546bce;
    --col-secondary-d: #4357b2;

    --col-tertiary-l: #f7a440;
    --col-tertiary-d: #d68936;

    --col-quaternary-l: #88c060;
    --col-quaternary-d: #6ea349;

    --col-quinary-l: #5c92d1;
    --col-quinary-d: #4a7ab4;

    --col-senary-l: #f17a87;
    --col-senary-d: #d56770;

   */

    --col-primary-l: #00c491;
    --col-primary-d: #007a68;

    --col-secondary-l: #f38eb8;
    --col-secondary-d: #bb527c;

    --col-tertiary-l: #ecd24d;
    --col-tertiary-d: #9f8600;

    --col-quaternary-l: #a789e1;
    --col-quaternary-d: #5f259a;

    --col-quinary-l: #e77c50;
    --col-quinary-d: #8f2f00;

    --col-senary-l: #3585d5;
    --col-senary-d: #003b85;

    --c-shadow: rgba(61,24,35,.3);
    --c-shadow-2: rgba(61,24,35,.15);

    --col-text-l: #05101d;
    --col-text-2-l: #050c13;
    --col-bg-l: #efeae7;
    --col-bg-2-l: #dcd9d9;
    --col-bg-3-l: #ffffff;

    --col-text-d: #efeae7;
    --col-text-2-d: #dcd9d9;
    --col-bg-d: #09111a;
    --col-bg-2-d: #050c13;
    --col-bg-3-d: #000000;

    --c-success: #038125;
    --c-info: #1e77c9;
    --c-warning: #d98711;
    --c-error: #d2102b;

}


@media (prefers-reduced-motion) {
    :root {
        --transition-time: 0s;
    }
}

*,*::before,*::after{
    box-sizing: border-box;
}
html, body{
    width: 100%; margin: 0;
    scroll-behavior: smooth;
}
body{
    --col-text: var(--col-text-l);
    --col-text-2: var(--col-text-2-l);
    --col-bg: var(--col-bg-l);
    --col-bg-2: var(--col-bg-2-l);
    --col-bg-3: var(--col-bg-3-l);

    --col-primary: var(--col-primary-l);
    --col-secondary: var(--col-secondary-l);
    --col-tertiary: var(--col-tertiary-l);
    --col-quaternary: var(--col-quaternary-l);
    --col-quinary: var(--col-quinary-l);
    --col-senary: var(--col-senary-l);

    --border: 2px solid var(--col-text);
    --btn-border: 2px solid var(--col-text);
    --border-radius: 1.5em;
    --btn-border-radius: 10em;

    background: var(--col-bg);
    transition: color var(--transition-time) ease-in-out, background var(--transition-time) ease-in-out;
}
body.darkmode{
    --col-text: var(--col-text-d);
    --col-text-2: var(--col-text-2-d);
    --col-bg: var(--col-bg-d);
    --col-bg-2: var(--col-bg-2-d);
    --col-bg-3: var(--col-bg-3-d);

    --col-primary: var(--col-primary-d);
    --col-secondary: var(--col-secondary-d);
    --col-tertiary: var(--col-tertiary-d);
    --col-quaternary: var(--col-quaternary-d);
    --col-quinary: var(--col-quinary-d);
    --col-senary: var(--col-senary-d);
}
body.darkmode .bg-negative{
    --font-par-weight: 450;
}
body, input, label, textarea, button, option, select{
    font-family: var(--font-par);
    font-weight: var(--font-par-weight);
    color: var(--col-text);
    outline-color: var(--col-secondary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body{
    width: 100%;
    max-width: 100vw;
    min-height: 100vh;
    overflow-x: hidden;
}
body.darkmode img, body.darkmode video, body.darkmode iframe{
    filter: brightness(70%) contrast(120%);
}
body.darkmode img.nodark, body.darkmode video.nodark, body.darkmode .nodark img, body.darkmode .custom-logo{
    filter: none;
}




main{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main>header, main>section, main>footer{
    padding: var(--section-padding) 0;
    max-width: 100vw;
    overflow-x: clip;
}
main>footer{
    margin-top: auto;
    padding-bottom: 0;
}


.breadcrumbs .col>div{
    border: 0 var(--col-text) solid;
    /* border-width: 1px 0px 1px 0px; */
}




.background{
    position: absolute; z-index: -1;
    top: 0; right: 0; bottom: 0; left:0;
}

.bg-primary{background-color: var(--col-primary);}
.bg-secondary{background-color: var(--col-secondary);}
.bg-tertiary{background-color: var(--col-tertiary);}
.bg-quaternary{background-color: var(--col-quaternary);}
.bg-quinary{background-color: var(--col-quinary);}
.bg-senary{background-color: var(--col-senary);}


.bg-neutral, .bg-neutral .background{background-color: var(--col-bg); color: var(--col-text);}
.bg-neutral-2, .bg-neutral-2 .background{background-color: var(--col-bg-2); color: var(--col-text-2);}
.bg-negative, .bg-negative .background{background-color: var(--col-text); color: var(--col-bg);}





a{
    color: var(--col-text);
    text-decoration-color: var(--col-primary);
}

.bg-negative a{
    color: var(--col-bg);
}


.vertical-padding-fix>div{
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.border{
    border: var(--border);
}
.rounded{
    border-radius: var(--border-radius);
}

.w-100{
    width: 100%;
}
.w-100-auto{
    width: 100%;
    height: auto;
}
.h-100{
    height: 100%;
}
.card-image{
    border-radius: var(--border-radius);
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}
.card, .card-body{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.card-bottom-link{
    margin-top: auto;
}
.stretched-link::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
}

input, textarea, button, select{
    background-color: var(--col-bg-3);
    font-size: 1rem;
    padding: .5rem;
    border: none;
    border-radius: .25rem;
    outline-color: var(--col-tertiary);
}


.half-screen-image{
    position: relative;
    width: 100vw;
    margin-left: 50%;
    left: -50vw;
    line-height: 0;
}
.half-screen-image>.border{
    border-left-width: 0;
    border-right-width: 0;
}
.half-screen-image>.rounded{
    border-radius: 0;
}

@media (min-width: 768px) {
    .half-screen-image{
        width: 50vw;
    }
    .half-screen-image>.rounded{
        border-radius: var(--border-radius);
    }
    .half-screen-image-right{
        margin-left: 0;
        left: 0;
    }
    .half-screen-image-right>.border{
        border-right-width: 0;
        border-left-width: unset;
    }
    .half-screen-image-right>.rounded{
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    .half-screen-image-left{
        margin-left: 100%;
        left: -50vw;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        border-left-width: 0;
        border-right-width: unset;
    }
    .half-screen-image-left>.border{
        border-right-width: unset;
        border-left-width: 0;
    }
    .half-screen-image-left>.rounded{
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}







/*


#######################################################################################
############################################################################### BUTTONS
####################################################################################### */
.btn, .chip {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-image: none;
    border: var(--btn-border);
    background-color: transparent !important;
    padding: 0.375em 0.75em;
    border-radius: var(--btn-border-radius);
    margin: 0;
}
.btn{
    display: inline-flex;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    gap: .5em !important;
    font-weight: 600;
    line-height: 1.1;
    cursor: pointer;
    transition: color 0.15s ease-in-out, margin 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
    --btn-bg-color: transparent;
    --btn-hover-color: var(--col-primary);
}
.btn::before, .btn::after{
    position: absolute;
    content:'';
    inset: -2%;
    width: 104%;
    z-index: -1;
}
.btn::before{
    background-color: var(--btn-bg-color);
}
.btn::after{
    background-color: var(--btn-hover-color);
    border-radius: var(--btn-border-radius);
    box-shadow: 5rem 0 var(--col-secondary), 12rem 0 var(--col-tertiary), 20rem 0 var(--col-senary);
    left: calc(-104% - 20rem);
    transition: left 1s ease-in-out;
}
.btn:hover::after{
    left: 0;
}
.btn img, .btn svg{
    height: 1.5em;
    width: auto;
    margin: -.25em;
}
.btn-disabled {
    cursor: not-allowed;
    opacity: 0.25;
}
.btn-shadow{
    box-shadow: .3em .3em 1.5em var(--col-shadow2);
}
.btn-lg{
    padding: .75em 1.5em;
}
.btn-white{
    --btn-bg-color: var(--col-bg-3);
    border-color: var(--col-bg-3);
    color: var(--col-text) !important;
}
.btn-outline{
    border-color: var(--col-text);
    color: var(--col-text);
}
.chip-outline{
    border-color: var(--col-text);
}
.btn-white-outline, .chip-white-outline{
    border-color: white;
    color: white;
}
.btn-primary, .chip-primary{
    border-color: var(--col-primary);
    --btn-bg-color: var(--col-primary);
    --btn-hover-color: var(--col-secondary);
    color: var(--col-text);
}
.btn-primary-outline, .chip-primary-outline{
    --btn-bg-color: transparent;
    --btn-hover-color: var(--col-secondary);
    border-color: var(--col-primary-darker-1);
    color: var(--col-text);
}
.btn-secondary{
    --btn-bg-color: var(--col-secondary);
    --btn-hover-color: var(--col-primary);
    border-color: var(--col-secondary);
    color: var(--col-text);
}
.btn-secondary-outline, .chip-secondary-outline{
    --btn-bg-color: transparent;
    --btn-hover-color: var(--col-primary);
    border-color: var(--col-secondary-darker-1);
}
.btn-tertiary{
    --btn-bg-color: var(--col-tertiary);
    --btn-hover-color: var(--col-primary);
    border-color: var(--col-tertiary);
    color: var(--col-text);
}
.btn-tertiary-outline{
    background-color: transparent;
    border-color: var(--col-tertiary-lighter-2);
}

.btn-senary{
    --btn-bg-color: var(--col-senary);
    --btn-hover-color: var(--col-primary);
    border-color: var(--col-senary);
    color: var(--col-text);
}
.btn-success{
    background-color: var(--col-success);
    border-color: var(--col-success);
    color: var(--col-white);
}
.btn-success-outline{
    background-color: transparent;
    border-color: var(--col-success);
}








@media (max-width: 991px) {

    .desktop-only{
        display: none;
    }
}

@media (min-width: 992px) {
    .mobile-only {
        display: none;
    }
}

@media (max-width: 1199px) {
    .containerrrrr-fluid>.row{
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

.outline{
    outline: #ff0000 1px solid;
}

.image-50{
    width: 100%;
    height: auto;
    object-fit: cover;
    min-height: 20rem;
    max-height: 80vh;
}


/*
#######################################################################################
################################################################# ON-APPEAR TRANSITIONS
#######################################################################################


header.visinit .col>*, footer.visinit>div:last-child .col>*{
    opacity: 1;
    filter: none;
}

.visinit .col{
    overflow: hidden;
}
*/

.visinit .col.fadein-left>*, .col.visinit.fadein-left>*, .visinit .col.fadein-right>*, .col.visinit.fadein-right>*{
    opacity: 0%;
    transition: all .5s 0s ease-in-out;
}
.visinit .col.fadein-left>*, .col.visinit.fadein-left>*{
    translate: -50vw 0;
}
.visinit .col.fadein-right>*, .col.visinit.fadein-right>*{
    translate: 50vw 0;
}
.visinit.visible .col.fadein-left>*, .col.visinit.visible.fadein-left>*, .visinit.visible .col.fadein-right>*, .col.visinit.visible.fadein-right>*{
    opacity: 100%;
    translate: 0 0;
}
.fadein-left:nth-child(2)>*, .fadein-right:nth-child(2)>*{
   transition-delay: .1s !important;
}
.fadein-left:nth-child(3)>*, .fadein-right:nth-child(3)>*{
   transition-delay: .15s !important;
}
.fadein-left:nth-child(4)>*, .fadein-right:nth-child(4)>*{
   transition-delay: .2s !important;
}
.fadein-left:nth-child(5)>*, .fadein-right:nth-child(5)>*{
   transition-delay: .25s !important;
}
.fadein-left:nth-child(6)>*, .fadein-right:nth-child(6)>*{
   transition-delay: .27s !important;
}
.fadein-left:nth-child(7)>*, .fadein-right:nth-child(7)>*{
   transition-delay: .3s !important;
}
.fadein-left>*:nth-child(8), .fadein-right>*:nth-child(8){
   transition-delay: .32s !important;
}
.fadein-left>*:nth-child(9), .fadein-right>*:nth-child(9){
   transition-delay: .34s !important;
}
.fadein-left>*:nth-child(10+n), .fadein-right>*:nth-child(n+10){
   transition-delay: .36s !important;
}


/*
.visinit.visible .col>*, .col.visinit.visible>*{
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
}
*/
