/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/

*, *::before, *::after {box-sizing: border-box;}
* {margin: 0;}

@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

body {line-height: 1.5; -webkit-font-smoothing: antialiased;}
img, picture, video, canvas, svg {display: block; max-width: 100%;}
input, button, textarea, select {font: inherit;}
p, h1, h2, h3, h4, h5, h6 {overflow-wrap: break-word;}
p {text-wrap: pretty;}
h1, h2, h3, h4, h5, h6 {text-wrap: balance;}
#root, #__next {isolation: isolate;}


/* settings */

:root
{
    --pogo-whiteblue: #e1ecff;
    --pogo-lightblue: #9ec8d3;
    --pogo-brightblue: #00c6e0;
    --pogo-blue: #2779a7;
    --pogo-darkblue: #3d91a8;
    --pogo-greenblue: rgba(81, 152, 157, 1);
    --pogo-green: #81bf4d;
    --pogo-grey: #c7c2ba;
    --pogo-darkestblue:rgba(44, 80, 110, 1);
    --pogo-red: #8C0000;
    --podium-pink:rgb(220, 42, 154);
    --podium-gray:rgb(34, 40, 40);

    --font-color: #000;
    --font-family1: 'Open Sans', sans-serif;
    --font-family2: Noto Serif;
    --font-size: 16px;
    --line-height: 1.5;

    --h1-font-size: 2.5rem;
    --h2-font-size: 2rem;
    --h3-font-size: 1.75rem;
    --h4-font-size: 1.5rem;
    --h5-font-size: 1.25rem;
    --h6-font-size: 1rem;

    /* body (dus alle content_types) */

    /* helper related */
    --blueprint-anchor-menu-background-color: #ccc;

    /* block related */
    --blueprint-block-margin-top: 10px;
    --blueprint-block-margin-bottom: 10px;

    --blueprint-block-gap-small: 10px;
    --blueprint-block-gap-medium: 20px;
    --blueprint-block-gap-large: 40px;

    /* columns related */
    --blueprint-column-gap-small: 10px;
    --blueprint-column-gap-medium: 20px;
    --blueprint-column-gap-large: 40px;
}

/* style.css */
main{overflow:hidden; position:relative;}
main *{position:relative;}
img{width:100%;}
h1{font-size:var(--h1-font-size);}
h2{font-size:var(--h2-font-size);}
h3{font-size:var(--h3-font-size);}
h4{font-size:var(--h4-font-size);}
h5{font-size:var(--h5-font-size);}
h6{font-size:var(--h6-font-size);}
p{margin:0.5rem 0px;}
li p {margin: 0px;}
button, .button{padding:0.5rem 1rem; display:inline-block; cursor:pointer;}
button, .button:hover {transform: scale(1.03);}

/* width op basis van percentage */
.w100 {width:100%;}
.w90 {width:90%;}
.w80 {width:80%;}
.w70 {width:70%;}
.w75 {width:75%;}
.w67 {width:67%;}
.w60 {width:60%;}
.w50 {width:50%;}
.w40 {width:40%;}
.w30 {width:30%;}
.w33 {width:33%;}
.w33:nth-child(2){width:34%;}
.w25 {width:25%;}
.w20 {width:20%;}
.w10 {width:10%;}
.w0 {width:100%;}


/* helpers */
.anchor-menu-helper {
    width: 100%;
    display: flex;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index:100000;
    background-color: var(--blueprint-anchor-menu-background-color);


}

.anchor-menu-helper__menu {
    list-style: none;
    display: flex;
    gap: 10px;
}

.anchor-menu-helper__menu_item
{

}

.anchor-menu-helper__menu_item__prefix {

}

.anchor-menu-helper__menu_item__link {
    text-decoration: none;
}

.anchor-menu-helper__menu_item__postfix {

}

.menu-helper {
    width: 100%;
    display: flex;
    justify-content: center;
}

.menu-helper__menu {
    list-style: none;
    display: flex;
    gap: 10px;
}

.menu-helper__title
{

}

.menu-helper__menu_item
{

}

.menu-helper__menu_item__prefix {

}

.menu-helper__menu_item__link {
    text-decoration: none;
}

.menu-helper__menu_item__postfix {

}

/* layout-base */
:root
{
    --blueprint-layout_base-main-background-color: #fff;
    --blueprint-layout_base-main-padding-left:10px;
    --blueprint-layout_base-main-padding-right:10px;
    --padding-10:10%;
}


/* blocks */
.text{vertical-align: top;}

.text-image
{
    width:100%;
    display:flex;
    margin-top: var(--blueprint-block-margin-top);
    margin-bottom: var(--blueprint-block-margin-bottom);
    gap: var(--blueprint-block-gap-small);
}


.text-slider
{
    width:100%;
    margin-top: var(--blueprint-block-margin-top);
    margin-bottom: var(--blueprint-block-margin-bottom);
    height:200px;
}

.text-slider-block__swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide.text-slider-block__swiper__slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.columns {width: 100%;
    display: flex;
    margin-top: var(--blueprint-block-margin-top);
    margin-bottom: var(--blueprint-block-margin-bottom);
    gap: var(--blueprint-column-gap-small);
}

.column{flex:1;}
.video-embed {
    margin-top: var(--blueprint-block-margin-top);
    margin-bottom: var(--blueprint-block-margin-bottom);
}
.video-embed .yt-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}

.video-embed .yt-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-embed .vimeo-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video-embed  .vimeo-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
}