@import url('components.css.php');

@import "fonts.css";
@import "vars.css";
@import "grid.css";
@import "header.css";
@import "component-sponsors.css";
@import "component-layouts.css";
@import "component-video.css";
@import "component-gallery.css";
@import "component-slideshow.css";
@import "component-breadcrumb.css";
@import "component-button.css";
@import "footer.css";
@import "filters.css";


@import "hero.css"; 
@import "readmore.css";
@import "pagination.css";  

@import "teaser.css";
@import "teaser__agenda.css";
  
@import "blocks.css";
@import "block__info.css";
@import "block__media.css";
@import "block__team.css";
@import "block__quote.css";
@import "block__statement.css";
@import "block__form.css";
@import "block__slideshow.css";

@import "socials.css";
@import "partners.css";
@import "banner.css";






body {
  margin: 0;
  padding: 0;
  font-family: var(--font-regular);
  background-color: white;
  color: var(--color-primary);
  font-size: var(--font-size-regular);
}


a{
    color: var(--color-primary);
    
    &:active{
        color: var(--color-secondary);
    }

    &:hover{
        color: var(--color-accent);
    }
}



h1, h2, h3, h4{
    margin: 0 0 1rem 0;
    font-family: var(--font-bold);
}

h1{
    font-size: var(--font-xxlg-xxxlg);
    font-family: var(--font-semibold-36pt);
    margin-bottom: 0rem;
}

h2{
    font-size: var(--font-xlg-xxlg);
    margin: 2rem 0 1rem 0
}


h3{
    font-size: var(--font-size-large);
    margin: 2rem 0 1rem 0;
}

h4{
    font-size: var(--font-size-medium);
}

p{
    margin: 0 0 1rem 0;
}

figure, figcaption{
    margin: 0;
    padding: 0;
}

figcaption{
    color: var(--color-tertiary);
    font-size: var(--font-size-x-small);
    padding-top: .5rem;
}


img{
    width: 100%;
    display: block;
    height: auto;
}


.visually-hidden{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.section__header{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 0rem;
    font-size: var(--font-size-medium);
    
}

.section__header h1{
    margin: 0;
}


.section__title{
    margin: 0 0 2rem 0;
}

.section__footer{
    display: flex;
    /* justify-content: flex-end; */
    margin-top: 2rem;
}


b, strong{
    font-family: var(--font-semibold);
}

.label__container{
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.label{
    text-decoration: none;
    color: var(--color-accent);
    background-color: var(--color-white);
    border: 1px solid var(--color-accent);
    padding: .25rem .5rem;
    display: inline-block;
    margin: 0 .25rem 0 .25rem;
    text-transform: uppercase;
    font-family: var(--font-bold);
    font-size: var(--font-size-small);
    border-radius: 3px;
    transition: var(--transition);
    &:hover{    
        color: var(--color-white);
        background-color: var(--color-accent);
    }   
}

.label.selected{
    color: var(--color-white);
    background-color: var(--color-accent);
}


.page__title{
    margin: 2rem 0 2rem 0;
}



.bottom-right{
    @media(min-width: 64rem){
        /* Calculate the Y offset based on desired angle */
        /* For a 10% slope, we use calc to maintain proportion */
        clip-path: polygon(
            0 0,                    /* top left */
            100% 0,                /* top right */
            100% calc(100% - 5vw), /* bottom right */
            0 calc(100% - 0vw)                 /* bottom left */
        );


       
        
    }
}

.bottom-left{
    @media(min-width: 64rem){
        /* Calculate the Y offset based on desired angle */
        /* For a 10% slope, we use calc to maintain proportion */
        clip-path: polygon(
            0 0,                    /* top left */
            100% 0,                /* top right */
            100% calc(100% - 0vw), /* bottom right */
            0 calc(100% - 5vw)                 /* bottom left */
        );

    }
}

.top-left{
    @media(min-width: 64rem){
        /* Calculate the Y offset based on desired angle */
        /* For a 10% slope, we use calc to maintain proportion */
        clip-path: polygon(
            0 15%,                    /* top left */
            100% 0,                /* top right */
            100% calc(100% - 0vw), /* bottom right */
            0 calc(100% - 0vw)                 /* bottom left */
        );

    }
}


.blue{
    background-color: var(--color-bg-secondary);
}

.yellow{
    background-color: var(--color-bg);
}