/* ------------------------------------------------------------------------
SITE MAIN DEFINITIONS
------------------------------------------------------------------------ */

body{
    background-color:var(--clr-1-60);
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem;
    
}
html{
    scroll-padding-top: 14rem;
    scroll-margin-top: 14rem;
}


/* ------------------------------------------------------------------------
SITE MAIN BLOCK SETTINGS
------------------------------------------------------------------------ */

/* Optional body container */
#site-container{
    background-color:var(--clr-white);
    max-width:1920px;
    margin:0 auto;
}

@media only screen and (min-width: 1921px) {
    #site-container{
        margin:3rem auto;
        box-shadow: 0 0 10px var(--clr-black);
    }
}

/* Website header */ 
#site-header{
    position: sticky;
    top:0;
    background-color: var(--clr-white);
    box-shadow: 0 0 10px var(--clr-black);
    z-index: 100;

    grid-template-areas:
        "sitelogo menu menu shortcuts"
        "sitelogo breadcrumbs breadcrumbs shortcuts";
    grid-template-columns: repeat(4, 1fr);
}
    #site-logo{
        grid-area: sitelogo;
    }
    #site-logo a{
        display: inline-block;
        margin:0;
        vertical-align:top;
    }
    #site-logo > a > img{
        display: block;
        width:100%;
        min-width: 150px;
        max-width: 240px;
    }
    #site-main-nav{
        grid-area: menu;
    }
    #shortcuts{
        grid-area: shortcuts;
        justify-self: end;
        padding-left: 1rem;
    }
    #breadcrumbs{
        grid-area: breadcrumbs;
    }

    @media only screen and (min-width: 1201px){
        #site-header{
            padding:3rem
        }
    }
    @media only screen and (max-width: 1200px){
        #site-header{
            grid-template-areas:
                "shortcuts shortcuts"
                "sitelogo menu";
            grid-template-columns: 1fr min-content;
        }
        #site-logo{
            padding:1rem var(--grid-items-padding-left);
        }
        #site-logo > a > img{
            width:auto;
            min-width:auto;
            height:44px;
        }
        #site-main-nav{
            /*position: relative;*/
            grid-area: menu;
        }
        .site-main-nav-ul{
            display: none;
        }
        #site-main-nav-toggle{
            display: none;
        }
        #site-main-nav-toggle ~ label{
            display: block;
            position: absolute;
            z-index: 99;
            height: 64px;
            width: 64px;
            right:0;
        }
        #site-main-nav-toggle ~ label i{
            display: block;
            width: 100%;
            height: 100%;
            background-color: var(--clr-1);
            transition: background-color 0.5s ease;
            cursor: pointer;
            color: var(--clr-white);
            text-align: center;
            
            padding-top: 1.6rem;
            font-size: 3.4rem;
        }
        #site-main-nav-toggle:checked ~ label{
            position: absolute;
            right:3rem;
            top:3rem;
            
        }
        #site-main-nav-toggle:checked ~ label i{
            background-color: var(--clr-2);
        }
        #site-main-nav-toggle:checked ~ .site-main-nav-ul{
            display: block;
        }
        #shortcuts{
            padding: 0.6rem 3rem;
            background-color: var(--clr-gray-1);
            justify-self: stretch;
            border-left: none;
        }
    }


/* Website user generated content */
#site-content-container{
    background-color: var(--clr-white);
    z-index: 1;
    
}
    #carousel{
        overflow:hidden;
    }

main{
    display: contents;
}

/* ------------------------------------------------------------------------
SITE FOOTER
------------------------------------------------------------------------ */

#site-footer{
    z-index: 10;
    background-color: var(--clr-1);
    color: var(--clr-white);
}
#site-footer > div > *:not(:first-child){
    padding-top:1rem;
}
#site-footer > div > p:first-child,
#site-footer .title{
    font-size: var(--fs-l);
    font-weight: var(--fw-bold);
}
#site-footer ul{
    list-style: none;
}
#site-footer ul:not(.social-media-links) li:not(:first-child){
    padding-top:0.6rem;
}
#site-footer ul:not(.social-media-links) a::before{
    content: '> ';
}
#site-footer a{
    color: var(--clr-white);
    text-decoration: none;
}
#site-footer a:hover{
    color: var(--clr-2);
}
.social-media-links{
    font-size: 4rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.social-media-links a{
    display: block;
    line-height: 0;
}


#site-credits{
    border-top: 1px solid var(--clr-1-40);

    display:grid;
    grid-template-areas:
        "partners"
        "copyrights";
    background-color: var(--clr-1);
    color: var(--clr-white);
    text-align: center;
}
.partners{
    grid-area: partners;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 6rem 0;
    gap:6rem;
}
.partners img{
    max-height: 6rem;
}
.copyrights{
    grid-area: copyrights;
    padding: 1.2rem 0;
    background-color: var(--clr-black);
    color:var(--clr-white-a);
    font-size:1.3rem;
}
.copyrights a{
    color: var(--clr-white-a);
    text-decoration: none;
}
@media only screen and (max-width: 768px) {
    .copyrights{
        font-size:1.1rem;
    }
}


/* ------------------------------------------------------------------------
PADDING AND MARGIN SETTINGS
------------------------------------------------------------------------ */

 /* Default padding undo's */
 .no-padding{ padding:0 !important; }
 .no-top-padding{ padding-top:0 !important; }
 .no-right-padding{ padding-right:0 !important; }
 .no-bottom-padding{ padding-bottom:0 !important; }
 .no-left-padding{ padding-left:0 !important; }

 /* Default margin undo's */
 .no-margin{ margin:0 !important; }
 .no-top-margin{ margin-top:0 !important; }
 .no-right-margin{ margin-right:0 !important; }
 .no-bottom-margin{ margin-bottom:0 !important; }
 .no-left-margin{ margin-left:0 !important; }

 /* Undo margins on direct children of this element */
 .no-child-margin > * { margin:0 !important; }
 .no-child-top-margin > * { margin-top:0 !important; }
 .no-child-right-margin > * { margin-right:0 !important; }
 .no-child-bottom-margin > * { margin-bottom:0 !important; }
 .no-child-left-margin > * { margin-left:0 !important; }

 /* Padding for content blocks like <p> <ul> etc. apply to parent container */
 .content-top-padding > *:not(:first-child){
     padding-top:var(--grid-content-padding-top);
 }



/* ------------------------------------------------------------------------
GENERAL DISPLAY AND SELECT SETTINGS
------------------------------------------------------------------------ */

/* Mobile only settings */
.mobile-only{
    display: none;
}
.hide-on-mobile{
    display:block;
}
@media only screen and (min-width: 1201px) {
    .hide-on-desktop{
        display:none;
    }
}
@media only screen and (max-width: 1200px) {
    .mobile-only{
        display: block;
    }
}
@media only screen and (max-width: 768px) {
    .hide-on-mobile{
        display:none !important;
    }
}

body.disable-scroll{
    overflow: hidden;
}
.background-image{
    background-position: center;
    background-size: cover;
}
.grayscale{
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}
.whitney-bold{
    font-family: 'WhitneyBold', 'Poppins', 'sans-serif';
}
.whitney-medium{
    font-family: 'WhitneyMedium', 'Poppins', 'sans-serif';
}

/* Elements that are not to be selected */
#site-header,
#carousel,
#bc,
#site-footer,
.do-not-select,
.do-not-select *,
.button,
.button *,
/*.advert,*/
/*.eb-advert,*/
form label{
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer and Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

/* Default background image settings */
.background-image{
    background-position: center;
    background-size: cover;
    background-color: burlywood;
}

/* Default aspect ratio settings */
.aspect-ratio-4-3{ aspect-ratio: 4 / 3; }
.aspect-ratio-3-2{ aspect-ratio: 3 / 2; }
.aspect-ratio-0{ aspect-ratio: 0; }





h1{
    font-size: var(--fs-xxl);
    font-weight: var(--fw-bold);
}
h2{
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
}
h3{
    font-size: var(--fs-l);
    font-weight: var(--fw-bold);
}
h4{
    font-size: var(--fs-r);
    font-weight: var(--fw-bold);
}
h5{
    font-size: var(--fs-r);
    font-weight: var(--fw-regular);
    text-decoration: underline;
}
h6{
    font-size: var(--fs-r);
    font-weight: var(--fw-light);
    text-decoration: underline;
}
p, th, td{
    font-size: var(--fs-r);
}
ul, ol{
    font-size: var(--fs-r);
    list-style-position: inside;
}

strong{
    font-weight: var(--fw-bold);
}
em{
    font-style: italic;
}

ul:not([class]){
    list-style-position: inside;
    list-style: none;
}
ul:not([class]) li:before{
    content: "\2022";
    font-weight: var(--fw-bold);
    font-size: var(--fs-r);
    position: absolute;
    left:0;
    color: var(--clr-2);
}
ul:not([class]) li{
    position: relative;
    padding-left:3rem;
}
ul:not([class]) li:not(:first-child){
    padding-top:1rem;
}
ul:not([class]) ul li{
    padding-top:1rem;
}



ol:not([class]){
    list-style:none;
    counter-reset: countIt;
    list-style-position: inside;
}
ol:not([class]) li{
    counter-increment: countIt;
    position: relative;
    padding-left:3rem;
}
ol:not([class]) li:before{
    content: counter(countIt) ". ";
    font-weight: var(--fw-bold);
    font-size: var(--fs-r);
    position: absolute;
    left:0;
    color: var(--clr-2);
}

ol:not([class]) li:not(:first-child){
    padding-top:1rem;
}
ol:not([class]) ol li{
    padding-top:1rem;
}




/*ol ol,
ul ul,
ol ul,
ul ol{
    padding-left: var(--list-padding-left);
}*/



#site-content-container ul ul,
#site-content-container ul ol,
#site-content-container ol ul,
#site-content-container ol ol {
    margin-left: var(--list-padding-left);
}



#site-content-container a:not([class]){
    color: var(--clr-1);
}
#site-content-container a:not([class]):hover{
    color: var(--clr-2);
}



.eb img{
    width:100% !important;
    border-radius: 5px;
}
.eb-advert h2{
    font-size: var(--fs-xxxl);
}
.eb-advert p.subtitle{
    font-size: var(--fs-xl);
    margin-top:0; padding-top:0;
}
.eb-advert a:not(.button){
    color: var(--clr-white);
}
.eb-advert a:not(.button):hover{
    color: var(--clr-2);
}
.eb-advert-text-block{
    /*border: solid 1px var(--clr-white);*/
    border-radius: 5px;
    padding: 3rem;
    background-color:var(--clr-black-a);
}
@media only screen and (min-width: 769px) and (max-width: 1200px) {
    .eb-advert h2{
        font-size: var(--fs-xxl);
        text-align: center;
    }
    .eb-advert p.subtitle{
        font-size: var(--fs-l);
        margin-top:0; padding-top:0;
        text-align: center;
    }
    .text-align-center-on-mobile{
        text-align: center;
    }
    
}
@media only screen and (max-width: 768px) {
    .eb-advert h2{
        font-size: var(--fs-xxl);
        text-align: center;
    }
    .eb-advert p.subtitle{
        font-size: var(--fs-l);
        margin-top:0; padding-top:0;
        text-align: center;
    }
    .text-align-center-on-mobile{
        text-align: center;
    }
    .eb > *{
        padding-top:4rem !important;
        padding-bottom:4rem !important;
    }
} 



.row-color-gray-01{
    background-color: var(--clr-gray-1-40);
}
.row-color-gray-50{
    background-color: var(--clr-gray-1);
}
.row-color-gray-99{
    background-color: var(--clr-gray-1-60);
}