:root {
    --vti-oranje: #FFFFFF;
    --vti-black: #000000;
    --vti-white: #FFFFFF;
}
@font-face {
    font-family: "KGSolid";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url(/fonts/KGSecondChancesSolid.ttf) format("truetype")
}
@font-face {
    font-family: "KGSketch";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url(/fonts/KGSecondChancesSketch.ttf) format("truetype")
}
body {
    margin: 0;
    background: url(/img/background24.png);
    min-height: 100%;
    font-family: "KGSolid", helvetica, arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.site__nav {
    display: block;
    position: static;
    flex: 1 1 100%;
    min-width: 256px;
    max-width: 400px;
}
.site__nav__small {
    display: none;
    position:fixed;
    width:55px;
    height:70px;
    top: 400px;
    color: var(--vti-white);
    cursor: pointer;
    z-index: 10000;
}

.site__footer {
    width: 100vw;
}

.pos_headerNfo {
    font-size: 18px;
}
.vti_wedstrijd {
    margin-left:400px;float:left;width: 450px;font-size: 40px;
    color: var(--vti-black);
}
.vti_inschrijven {
    float:left;width: 450px;font-size: 40px;
    color: var(--vti-black);
    text-align: center !important;
}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 768px) {
    body {
        width: 406px !important;
    }
    .pos_headerNfo {
        font-size: 7px !important;
    }
    .svg--desktop {
        height: 1500px !important;
    }
    .site__header {
        background-image: url(/img/header_vti_roeselare.png);
        background-size: cover;
        height: 290px;
        background-repeat: no-repeat;
        background-position: center;
        margin-bottom: -140px;
        margin-top: 0px;
    }
    .site__main {
        margin-top: 10px;
    }
    .site__content {
        min-width: 100% !important;
    }
    .svgs {
        top: 130px !important
    }
    .site__main {
        position: static;
        display: flex;
        height: 1690px;
    }
    .site__nav {
        display: none !important;
    }
    .site__nav__small {
        display: block !important;
        top: 160px !important;
    }
    .navigation__logo {
        width: 140px !important;
    }
    .navigation__number {
        font-size: 26px !important;
        line-height: 28px !important;
        font-weight: 700;
        letter-spacing: -.03em;
        margin-bottom: 0;
        color: var(--vti-black);
    }
    .navigation__panel {
        padding: 17px 5px 30px 30px !important;
    }
    .pos_headerNfo {
        top: 100px !important;
        left: 240px !important;
        width: 175px !important;
        height: 84px !important;
        border-radius: 5px !important;
        padding: 10px;
        font-size:10px;
        line-height: 14px;
    }
    .footer {
        display: block !important
    }
    .vti_wedstrijd {
        width:100% !important;
        text-align: center !important;
        font-size: 30px !important;
        color: var(--vti-black);
        float: none;
        line-height: 40px;
        margin-left: 0px;
    }
    .vti_wedstrijd a, .vti_inschrijven a{
        padding-right: 10px;

    }
    .vti_inschrijven {
        width:100% !important;
        text-align: center !important;
        font-size: 30px !important;
        color: var(--vti-black);
        float: none;
    }
    #vti-roeselare-keuze-uren-A img,#vti-roeselare-keuze-uren-B img {
        width: 147px;
        margin-top: -3px;
    }

    h2{font-size:15px !important}
    .pos_pen{position:absolute;top: 122px ;left: 202px;width: 56px;height:75px;}
    .pos_avond{position:absolute;top: 234px ;left: 279px;width: 56px;height:75px;}
    .pos_avond iframe {width: 56px;height: 75px;border-radius: 5px !important;margin-left: -2px;margin-top: -2px;}
    .pos_brochure {position:absolute;top: 310px ;left: 22px;width: 57px;height:57px;}

    .pos_laptop_title{position:absolute;top: 122px ;left: 272px;width: 110px;height:75px;font-size:15px !important}
    .pos_infoavond_title{position:absolute;top: 194px ;left: 292px;width: 100px;height:75px;font-size:15px !important}
    .pos_brochure_title {position:absolute;top: 380px ;left: 22px;width: 110px;height:57px;font-size:15px !important}

    .pos_video1 {position:absolute;top: 192px;left: 76px ;width:220px;}
    .pos_video1 iframe{width:204px;height:151px}
    .pos_nfo1 {position:absolute;top: 340px;left: 240px;width:200px;}

    .pos_videoA {position:absolute;top: 545px;left: -2px ;width:220px;}
    .pos_videoA iframe{width:155px;height:115px}
    .pos_nfoA {position:absolute;top: 650px;left: 70px;width:200px;}

    .pos_videoB {position:absolute;top: 593px;left: 229px ;width:220px;}
    .pos_videoB iframe{width:155px;height:115px}
    .pos_nfoB {position:absolute;top: 700px;left: 210px;width:200px;}

    .pos_kuA {position:absolute;top: 788px;left: 1px ;width:220px;font-size: 7px !important}
    .pos_kuA ul {margin-left: -20px}
    .pos_kuA li {line-height: 10px !important}
    .pos_kuA iframe{width:153px;height:103px}
    .pos_nfoAA {position:absolute;top: 888px;left: 1px;width:160px;}
    .pos_nfoAA h2{line-height: 17px}

    .pos_kuB {position:absolute;top: 806px;left: 211px ;width:220px;font-size: 7px !important}
    .pos_kuB li {line-height: 10px !important}
    .pos_kuB ul {margin-left: -20px}
    .pos_kuB iframe{width:153px;height:103px}
    .pos_nfoBA {position:absolute;top: 906px;left: 211px;width:160px;}
    .pos_nfoBA h2{line-height: 17px;}

    .pos_kuA1 {position:absolute;top: 962px;left: 35px ;width:280px}
    .pos_kuA1 iframe{width:133px;height:105px}
    .pos_nfoA1 {position:absolute;top: 1076px;left: 10px;width:200px;}

    .pos_kuB1 {position:absolute;top: 962px;left: 240px ;width:280px;}
    .pos_kuB1 iframe{width:133px;height:105px}
    .pos_nfoB1 {position:absolute;top: 1076px;left: 240px;width:200px;}

    .pos_kuA2 {position:absolute;top: 1164px;left: 27px ;width:280px;}
    .pos_kuA2 iframe{width:133px;height:105px}
    .pos_nfoA2 {position:absolute;top: 1265px;left: 100px;width:200px;}

    .pos_kuA3 {position:absolute;top: 1387px;left: 35px ;width:280px;}
    .pos_kuA3 iframe{width:133px;height:105px}
    .pos_nfoA3 {position:absolute;top: 1497px;left: 10px;width:200px;}


    .pos_videoAB1 {position:absolute;top: 1840px;left: 57px ;width:280px;}
    .pos_videoAB1 iframe{width:133px;height:105px}
    .pos_nfoAB1 {position:absolute;top: 1787px;left: 57px;width:200px;}

    .pos_videoAB2 {position:absolute;top: 1807px;left: 188px ;width:280px;}
    .pos_videoAB2 iframe{width:133px;height:105px}
    .pos_nfoAB2 {position:absolute;top: 1757px;left: 300px;width:200px;}

    .pos_videoAB3 {position:absolute;top: 1935px;left: 70px ;width:280px;}
    .pos_videoAB3 iframe{width:133px;height:105px}
    .pos_nfoAB3 {position:absolute;top: 2040px;left: 31px;width:200px;}

    .pos_videoAB4 {position:absolute;top: 1908px;left: 194px ;width:280px;}
    .pos_videoAB4 iframe{width:133px;height:105px}
    .pos_nfoAB4 {position:absolute;top: 2010px;left: 269px;width:200px;}

    .pos_leven {position:absolute;top: 990px;left: 41px ;width:280px;}
    .pos_leven iframe{width:154px;height:115px}
    .pos_nfo_leven {position:absolute;top: 1090px;left: 160px;width:200px;}

    .leerprofielIMG{width:150px; padding: 5px;}

    .pos_av {position:absolute;top: 1161px;left: 204px ;width:280px;}
    .pos_av iframe{width:154px;height:115px}
    .pos_nfo_av {position:absolute;top: 1263px;left: 127px;width:200px;}

    .pos_or {position:absolute;top: 1427px;left: 102px ;width:280px;}
    .pos_or iframe{width:154px;height:115px}
    .pos_nfo_or {position:absolute;top: 1530px;left: 202px;width:200px;}

    .pos_algemeen {position:absolute;top: 2447px;left: 12px ;width:280px;}
    .pos_algemeen iframe{width:154px;height:115px}
    .pos_nfo_algemeen {position:absolute;top: 2447px;left: 12px;width:200px;}
}

@media (max-height: 899px) {
    .navigation__logo {
        display: none;
    }
    .navigation__sections {
        margin-top: -10px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    body {
        width: 768px !important;
    }
    .site__header {
        background-image: url(/img/header_vti_roeselare.png);
        background-size: cover;
        height: 560px;
        background-repeat: no-repeat;
        background-position: center;
        margin-bottom: -260px;
        margin-top: 0px;
    }
    .site__main {
        margin-top: 10px;
    }
    .svgs {
        top: 330px !important
    }
    .site__main {
        position: static;
        display: flex;
        height: 3260px;
    }
    .site__nav {
        display: none !important;
    }
    .site__nav__small {
        display: block !important
    }
    .pos_headerNfo {
        top: 260px !important;
        left: 400px !important;
        width: 325px !important;
        height: 184px !important;
        padding: 10px;
        border-radius: 10px;
    }

    .footer {
        display: block !important
    }
    .vti_wedstrijd {
        width:100% !important;
        text-align: center;
        font-size: 60px !important;
        color: var(--vti-black);
        float: none;
        line-height: 80px;
        margin-left: 0px;
    }
    .vti_wedstrijd a, .vti_inschrijven a{
        padding-right: 10px;

    }
    .vti_inschrijven {
        width:100% !important;
        text-align: right;
        font-size: 60px !important;
        color: var(--vti-black);
        float: none;
        line-height: 60px;
    }
    .footer .material-icons {
        font-size: 80px !important;
    }
    #vti-roeselare-keuze-uren-A img,#vti-roeselare-keuze-uren-B img {
        width: 290px;
        margin-top: 7px;
    }

    .pos_laptop_title{position:absolute;top: 355px ;left: 720px;width: 300px;height:75px;font-size:22px !important;font-weight: 700;line-height: 30px;letter-spacing: -.03em;}
    .pos_infoavond_title{position:absolute;top: 760px ;left: 740px;width: 300px;height:75px;font-size:22px !important;font-weight: 700;line-height: 30px;letter-spacing: -.03em;}
    .pos_brochure_title {position:absolute;top: 870px ;left: 180px;width: 320px;height:57px;font-size:22px !important;font-weight: 700;line-height: 30px;letter-spacing: -.03em;}

    .pos_pen{position:absolute;top: 314px ;left: 91px;width: 114px;height:166px;}
    .pos_avond{position:absolute;top: 526px ;left: 236px;width: 114px;height:166px;}
    .pos_avond iframe {width: 146px;height: 196px;border-radius: 5px !important;margin-left: -1px;margin-top: -2px;}
    .pos_brochure {position:absolute;top: 669px ;left: -249px;width: 114px;height:116px;}

    .pos_video1 {position:absolute;top: 446px;left: -151px ;width:362px;}
    .pos_video1 iframe{width:389px;height:290px}
    .pos_nfo1 {position:absolute;top: 1350px;left: 150px;width:400px;}

    .pos_videoA {position:absolute;top: 1114px;left: -293px ;width:362px;}
    .pos_videoA iframe{width:296px;height:222px}
    .pos_nfoA {position:absolute;top: 1340px;left: -150px;width:400px;}

    .pos_videoB {position:absolute;top: 1205px;left: 144px ;width:362px;}
    .pos_videoB iframe{width:296px;height:222px}
    .pos_nfoB {position:absolute;top: 1430px;left: 150px;width:400px;}

    .pos_kuA {position:absolute;top: 1565px;left: -289px ;width:362px;}
    .pos_kuA iframe{width:297px;height:200px}
    .pos_nfoAA {position:absolute;top: 1765px;left: -289px;width:300px;}

    .leerprofielIMG{width:290px; padding: 5px;}

    .pos_kuB {position:absolute;top: 1607px;left: 108px ;width:362px;}
    .pos_kuB iframe{width:297px;height:200px}
    .pos_nfoBA {position:absolute;top: 1801px;left: 108px;width:300px;}


    .pos_kuA1 {position:absolute;top: 1904px;left: -224px ;width:280px;}
    .pos_kuA1 iframe{width:255px;height:200px}
    .pos_nfoA1 {position:absolute;top: 2134px;left: -290px;width:350px;}

    .pos_kuB1 {position:absolute;top: 1904px;left: 164px ;width:280px;}
    .pos_kuB1 iframe{width:255px;height:200px}
    .pos_nfoB1 {position:absolute;top: 2134px;left: 101px;width:350px;}

    .pos_kuA2 {position:absolute;top: 2286px;left: -239px ;width:280px;}
    .pos_kuA2 iframe{width:255px;height:200px}
    .pos_nfoA2 {position:absolute;top: 2504px;left: -110px;width:350px;}

    .pos_kuA3 {position:absolute;top: 2708px;left: -224px ;width:280px;}
    .pos_kuA3 iframe{width:255px;height:200px}
    .pos_nfoA3 {position:absolute;top: 2924px;left: -290px;width:300px;}


    .pos_videoAB1 {position:absolute;top: 3564px;left: -182px ;width:280px;}
    .pos_videoAB1 iframe{width:255px;height:200px}
    .pos_nfoAB1 {position:absolute;top: 3474px;left: -178px;width:300px;}

    .pos_videoAB2 {position:absolute;top: 3500px;left: 65px ;width:280px;}
    .pos_videoAB2 iframe{width:255px;height:200px}
    .pos_nfoAB2 {position:absolute;top: 3404px;left: 180px;width:300px;}

    .pos_videoAB3 {position:absolute;top: 3745px;left: -157px ;width:280px;}
    .pos_videoAB3 iframe{width:255px;height:200px}
    .pos_nfoAB3 {position:absolute;top: 3694px;left: -159px;width:300px;}

    .pos_videoAB4 {position:absolute;top: 3694px;left: 77px ;width:280px;}
    .pos_videoAB4 iframe{width:255px;height:200px}
    .pos_nfoAB4 {position:absolute;top: 3914px;left: 195px;width:300px;}

    .pos_leven {position:absolute;top: 1956px;left: -213px ;width:280px;}
    .pos_leven iframe{width:296px;height:222px}
    .pos_nfo_leven {position:absolute;top: 2156px;left: -3px;width:350px;}

    .pos_av {position:absolute;top: 2277px;left: 95px ;width:280px;}
    .pos_av iframe{width:296px;height:222px}
    .pos_nfo_av {position:absolute;top: 2487px;left: 294px;width:350px;}

    .pos_or {position:absolute;top: 2785px;left: -97px ;width:280px;}
    .pos_or iframe{width:296px;height:222px}
    .pos_nfo_or {position:absolute;top: 2995px;left: -301px;width:350px;}

    .pos_algemeen {position:absolute;top: 4713px;left: -267px ;width:280px;}
    .pos_algemeen iframe{width:296px;height:222px}
    .pos_nfo_algemeen {position:absolute;top: 4935px;left: -275px;width:350px;}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    body {
        width: 992px !important;
    }
    .site__header {
        background-image: url(/img/header_vti_roeselare.png);
        background-size: cover;
        height: 726px;
        background-repeat: no-repeat;
        background-position: center;
        margin-bottom: -350px;
        margin-top: 0px;
    }
    .site__main {
        margin-top: 20px;
    }
    .svgs {
        top: 430px !important
    }
    .site__main {
        position: static;
        display: flex;
        height: 4210px;
    }
    .site__nav {
        display: none !important;
    }
    .site__nav__small {
        display: block !important
    }

    .pos_headerNfo {
        top: 360px !important;
        left: 600px !important;
        width: 325px !important;
        height: 184px !important;
        border-radius: 11px;
        padding: 10px;
    }
    .footer {
        display: block !important
    }
    .vti_wedstrijd {
        idth: 100% !important;
        text-align: center;
        font-size: 40px;
        color: var(--vti-black);
        float: none;
        line-height: 110px;
        margin-left: 0px;
    }
    .vti_wedstrijd a, .vti_inschrijven a{
        padding-right: 10px;

    }
    .vti_inschrijven {
        width:100% !important;
        text-align: right;
        font-size: 40px;
        color: var(--vti-black);
        float: none;
    }

    .pos_laptop_title{position:absolute;top: 425px ;left: 690px;width: 300px;height:75px;font-size:22px !important;font-weight: 700;line-height: 30px;letter-spacing: -.03em;}
    .pos_infoavond_title{position:absolute;top: 760px ;left: 870px;width: 150px;height:75px;font-size:22px !important;font-weight: 700;line-height: 30px;letter-spacing: -.03em;}
    .pos_brochure_title {position:absolute;top: 1030px ;left: 90px;width: 320px;height:57px;font-size:22px !important;font-weight: 700;line-height: 30px;letter-spacing: -.03em;}

    .pos_pen{position:absolute;top: 404px ;left: 522px;width: 147px;height:196px;}
    .pos_avond{position:absolute;top: 678px ;left: 710px;width: 147px;height:196px;}
    .pos_brochure {position:absolute;top: 864px ;left: 81px;width: 149px;height:151px;}


    .pos_video1 {position:absolute;top: 575px;left: 208px ;width:362px;}
    .pos_video1 iframe{width:504px;height:375px}
    .pos_nfo1 {position:absolute;top: 975px;left: 590px;width:400px;}

    .pos_videoA {position:absolute;top: 1438px;left: 23px ;width:362px;}
    .pos_videoA iframe{width:384px;height:288px}
    .pos_nfoA {position:absolute;top: 1735px;left: 200px;width:400px;}

    .pos_videoB {position:absolute;top: 1555px;left: 588px ;width:362px;}
    .pos_videoB iframe{width:384px;height:288px}
    .pos_nfoB {position:absolute;top: 1855px;left: 620px;width:400px;}


    .pos_kuA {position:absolute;top: 2033px;left: 30px ;width:362px;}
    .pos_kuA iframe{width:385px;height:262px}
    .pos_nfoAA {position:absolute;top: 2293px;left: 38px;width:300px;}

    .leerprofielIMG{width:380px; padding: 5px;}

    .pos_kuB {position:absolute;top: 2075px;left: 542px ;width:362px;}
    .pos_kuB iframe{width:385px;height:262px}
    .pos_nfoBA {position:absolute;top: 2335px;left: 521px;width:300px;}

    .pos_kuA1 {position:absolute;top: 2458px;left: 113px ;width:280px;}
    .pos_kuA1 iframe{width:329px;height:259px}
    .pos_nfoA1 {position:absolute;top: 2744px;left: 40px;width:350px;}

    .pos_kuB1 {position:absolute;top: 2458px;left: 613px ;width:280px;}
    .pos_kuB1 iframe{width:329px;height:259px}
    .pos_nfoB1 {position:absolute;top: 2744px;left: 511px;width:350px;}

    .pos_kuA2 {position:absolute;top: 2952px;left: 94px ;width:280px;}
    .pos_kuA2 iframe{width:329px;height:259px}
    .pos_nfoA2 {position:absolute;top: 3224px;left: 271px;width:350px;}

    .pos_kuA3 {position:absolute;top: 3496px;left: 113px ;width:280px;}
    .pos_kuA3 iframe{width:329px;height:259px}
    .pos_nfoA3 {position:absolute;top: 3769px;left: 21px;width:300px;}


    .pos_videoAB1 {position:absolute;top: 4602px;left: 168px ;width:280px;}
    .pos_videoAB1 iframe{width:330px;height:260px}
    .pos_nfoAB1 {position:absolute;top: 4490px;left: 211px;width:300px;}

    .pos_videoAB2 {position:absolute;top: 4521px;left: 486px ;width:280px;}
    .pos_videoAB2 iframe{width:330px;height:260px}
    .pos_nfoAB2 {position:absolute;top: 4400px;left: 730px;width:300px;}

    .pos_videoAB3 {position:absolute;top: 4836px;left: 198px ;width:280px;}
    .pos_videoAB3 iframe{width:330px;height:260px}
    .pos_nfoAB3 {position:absolute;top: 5109px;left: 149px;width:300px;}

    .pos_videoAB4 {position:absolute;top: 4770px;left: 500px ;width:280px;}
    .pos_videoAB4 iframe{width:330px;height:260px}
    .pos_nfoAB4 {position:absolute;top: 5049px;left: 685px;width:300px;}

    .pos_leven {position:absolute;top: 2526px;left: 128px ;width:280px;}
    .pos_leven iframe{width:382px;height:287px}
    .pos_nfo_leven {position:absolute;top: 2796px;left: 18px;width:350px;}

    .pos_av {position:absolute;top: 2941px;left: 525px ;width:280px;}
    .pos_av iframe{width:382px;height:287px}
    .pos_nfo_av {position:absolute;top: 3211px;left: 305px;width:350px;}

    .pos_or {position:absolute;top: 3595px;left: 276px ;width:280px;}
    .pos_or iframe{width:382px;height:287px}
    .pos_nfo_or {position:absolute;top: 3865px;left: 66px;width:350px;}


    .pos_algemeen {position:absolute;top: 6086px;left: 57px ;width:280px;}
    .pos_algemeen iframe{width:382px;height:287px}
    .pos_nfo_algemeen {position:absolute;top: 6380px;left: 111px;width:350px;}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    body {
        width: 1200px !important;
    }
    .site__header {
        background-image: url(/img/header_vti_roeselare.png);
        background-size: cover;
        height: 891px;
        background-repeat: no-repeat;
        background-position: center;
        margin-bottom: -520px;
        margin-top: 0px;
    }
    .site__main {
        margin-top: 70px;
    }
    .svgs {
        top: 560px !important
    }
    .site__main {
        position: static;
        display: flex;
        height: 3510px;
    }
    .site__nav {
        display: block !important;
    }
    .site__nav__small {
        display: none !important
    }
    .pos_headerNfo {
        top: 360px !important;
        left: calc(949px - 150px) !important;;
        width: 325px !important;
        height: 184px !important;
        color: var(--vti-black);
        border-radius: 11px;
        padding: 10px;
        background: var(--vti-white);
        border-radius: 10px;
    }

    .footer {
        display: flex !important
    }
    .vti_wedstrijd {
        width: 100% !important;
        text-align: right;
        font-size: 40px;
        color: var(--vti-black);
        float: none;
        line-height: 60px;
        margin-left: 0px;
    }
    .vti_inschrijven {
        text-align: left;
    }
    .pos_pen{position:absolute;top: 358px ;left: 558px;width: 124px;height:155px;}
    .pos_avond{position:absolute;top: 580px ;left: 710px;width: 200px;height:156px;}
    .pos_avond iframe {width: 199px;height: 156px;border-radius: 5px !important;margin-left: -1px;margin-top: -2px;}
    .pos_brochure {position:absolute;top: 730px ;left: 209px;width: 118px;height:120px;}

    .pos_laptop_title{position:absolute;top: 355px ;left: 720px;width: 300px;height:75px;font-size:22px !important;font-weight: 700;line-height: 30px;letter-spacing: -.03em;}
    .pos_infoavond_title{position:absolute;top: 760px ;left: 740px;width: 300px;height:75px;font-size:22px !important;font-weight: 700;line-height: 30px;letter-spacing: -.03em;}
    .pos_brochure_title {position:absolute;top: 870px ;left: 180px;width: 320px;height:57px;font-size:22px !important;font-weight: 700;line-height: 30px;letter-spacing: -.03em;}

    .pos_video1 {position:absolute;top: 496px;left: 311px ;width:362px;}
    .pos_video1 iframe{width:406px;height:302px}
    .pos_nfo1 {position:absolute;top: 815px;left: 620px;width:400px;}

    .pos_videoA {position:absolute;top: 1192px;left: 163px ;width:362px;}
    .pos_videoA iframe{width:309px;height:232px}
    .pos_nfoA {position:absolute;top: 1445px;left: 290px;width:400px;}

    .leerprofielIMG{width:300px; padding: 5px;}

    .pos_videoB {position:absolute;top: 1287px;left: 618px ;width:362px;}
    .pos_videoB iframe{width:309px;height:232px}
    .pos_nfoB {position:absolute;top: 1545px;left: 620px;width:400px;}


    .pos_kuA {position:absolute;top: 1673px;left: 168px ;width:362px;}
    .pos_kuA iframe{width:309px;height:208px}
    .pos_nfoAA {position:absolute;top: 1874px;left: 138px;width:300px;}

    .pos_kuB {position:absolute;top: 1706px;left: 581px ;width:362px;}
    .pos_kuB iframe{width:309px;height:208px}
    .pos_nfoBA {position:absolute;top: 1914px;left: 551px;width:300px;}


    .pos_kuA1 {position:absolute;top: 2014px;left: 236px ;width:280px;}
    .pos_kuA1 iframe{width:264px;height:208px}
    .pos_nfoA1 {position:absolute;top: 2244px;left: 101px;width:350px;}

    .pos_kuB1 {position:absolute;top: 2014px;left: 639px ;width:280px;}
    .pos_kuB1 iframe{width:264px;height:208px}
    .pos_nfoB1 {position:absolute;top: 2244px;left: 581px;width:350px;}

    .pos_kuA2 {position:absolute;top: 2412px;left: 219px ;width:280px;}
    .pos_kuA2 iframe{width:264px;height:208px}
    .pos_nfoA2 {position:absolute;top: 2644px;left: 361px;width:300px;}

    .pos_kuA3 {position:absolute;top: 2853px;left: 236px ;width:280px;}
    .pos_kuA3 iframe{width:264px;height:208px}
    .pos_nfoA3 {position:absolute;top: 3079px;left: 101px;width:300px;}


    .pos_videoAB1 {position:absolute;top: 3744px;left: 279px ;width:280px;}
    .pos_videoAB1 iframe{width:264px;height:208px}
    .pos_nfoAB1 {position:absolute;top: 3650px;left: 281px;width:300px;}

    .pos_videoAB2 {position:absolute;top: 3678px;left: 538px ;width:280px;}
    .pos_videoAB2 iframe{width:264px;height:208px}
    .pos_nfoAB2 {position:absolute;top: 3570px;left: 730px;width:300px;}

    .pos_videoAB3 {position:absolute;top: 3931px;left: 304px ;width:280px;}
    .pos_videoAB3 iframe{width:264px;height:208px}
    .pos_nfoAB3 {position:absolute;top: 4139px;left: 229px;width:300px;}

    .pos_videoAB4 {position:absolute;top: 3880px;left: 549px ;width:280px;}
    .pos_videoAB4 iframe{width:264px;height:208px}
    .pos_nfoAB4 {position:absolute;top: 4109px;left: 691px;width:300px;}

    .pos_leven {position:absolute;top: 2071px;left: 247px ;width:280px;}
    .pos_leven iframe{width:307px;height:231px}
    .pos_nfo_leven {position:absolute;top: 2291px;left: 77px;width:350px;}

    .pos_av {position:absolute;top: 2406px;left: 567px ;width:280px;}
    .pos_av iframe{width:307px;height:231px}
    .pos_nfo_av {position:absolute;top: 2626px; left: 397px;;width:350px;}

    .pos_or {position:absolute;top: 2933px;left: 366px ;width:280px;}
    .pos_or iframe{width:307px;height:231px}
    .pos_nfo_or {position:absolute;top: 3153px; left: 156px;width:350px;}

    .pos_algemeen {position:absolute;top: 4941px;left: 190px ;width:280px;}
    .pos_algemeen iframe{width:307px;height:231px}
    .pos_nfo_algemeen {position:absolute;top: 5170px;left: 191px;width:350px;}
}





a, span{
    color: var(--vti-black);
    cursor: pointer;
}
iframe, object {
     border:2px solid #FFFFFF;
     border-radius: 20px !important;
     background: white;
 }

.navigation__sections a.active,.navigation__sections span.active {
    color: var(--vti-white);
    background-color: var(--vti-black);
}
.nfo {
    color: var(--vti-black);
}
.navigation__sections a, .navigation__sections span{
    text-decoration: none;
    display: inline-block;
    padding: 5px 5px 3px;
    border-radius: 999999px;
}

@media (min-width: 1024px) {
    .navigation__section-title {
        font-size: 22px;
        line-height: 28px;
    }
}
@media (min-width: 768px){
    .navigation__section-title {
    font-size: 20px;
    line-height: 24px;
    }
}

.navigation__section-title {
font-size: 16px;
line-height: 18px;
letter-spacing: -.03em;
display: block;
font-weight: 700;
margin-bottom: 0;
text-transform: uppercase;
}

@media (min-width: 1024px) {
    .navigation__sections {
        margin-bottom: 40px;
    }
}

.navigation__sections {
list-style: none;
padding-left: 0;
min-width: 195px;
max-width: 95%;
margin-bottom: 20px;
}

@media (min-width: 1024px) {
    .navigation__number {
        font-size: 72px;
        line-height: 66px;
    }
}

@media (min-width: 768px) {
    .navigation__number {
        font-size: 62px;
        line-height: 58px;
    }
}

.navigation__number {
    font-size: 36px;
    line-height: 38px;
    font-weight: 700;
    letter-spacing: -.03em;
    margin-bottom: 0;
    color: var(--vti-black);
}


@media (min-width: 1024px){
    .h2, h2 {
    margin-bottom: 8px;
    }
}
@media (min-width: 768px) {
    .h2, h2 {
        margin-bottom: 11px;
    }
}
@media (min-width: 1024px) {
    .h2, h2 {
        font-size: 42px;
        line-height: 42px;
    }
}
@media (min-width: 768px) {
    .h2, h2 {
        font-size: 36px;
        line-height: 34px;
    }
}
.h2, h2 {
font-size: 32px;
line-height: 30px;
font-weight: 700;
letter-spacing: -.03em;
margin-bottom: 3px;
}
.u-visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    -webkit-clip-path: polygon(0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

.container {
    padding-left: 128px;
    max-width: 80%;
}

.svgs {
    display: flex;
    position: absolute;
    top: 505px;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
    width:inherit !important;

}




.rotate {
    transform: rotate(-90deg);


    /* Legacy vendor prefixes that you probably don't need... */

    /* Safari */
    -webkit-transform: rotate(-90deg);

    /* Firefox */
    -moz-transform: rotate(-90deg);

    /* IE */
    -ms-transform: rotate(-90deg);

    /* Opera */
    -o-transform: rotate(-90deg);

    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.svg--desktop {
    display: block;
    width: 100%;
    height: 3000px;
}
.svg--desktop {
    display: block
}


@media (max-width: 1279px) {
    .container {
        padding-left: 96px;
        max-width: 768px;
    }

    .svgs::before {
        min-width: 0px;
        max-width: calc(100% - 1024px / 2);
    }
}
@media (min-width: 1279px) {

    .svgs::before {
        display: block;
        content: '';
        position: static;
        flex: 1 1 100%;
        min-width: 256px;
        max-width: 400px;
    }
}
@media (min-width: 1281px) {

    .svgs::before {
        display: block;
        content: '';
        position: static;
        flex: 1 1 100%;
        min-width: 256px;
        max-width: 400px;
    }
}
@media(max-width: 992px) {
    .svg--desktop {
        display: block
    }

    .container {
        max-width: 320px;
        padding: 0 24px 0 40px;
        padding-left: 40px;
        margin: 0 auto;
    }
}

.site__content {
    flex: 1 1 100%;
    min-width: 1006px;
    overflow: hidden;
}

.svgs__inner {
    flex: 1 1 100%;
    min-width: 1024px;
    position: relative;
}

.navigation__panel {
    z-index: 1;
    top: 700px;
    bottom: 0;
    box-shadow: 15px 15px 10px rgba(0, 0, 0, .15);
    width: 275px;
    height: 100vh;
    transform: none;
    padding: 37px 5px 30px 30px;
    z-index: 1;
    background: #ffffff;
    border-radius: 0 35px 35px 0;
    overflow-y: scroll;
    scrollbar-width: none;
    will-change: transform;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    overflow: hidden;
}
.navigation__panel__small {
    z-index: 1;
    top: 700px;
    bottom: 0;
    box-shadow: 15px 15px 10px rgba(0, 0, 0, .15);
    width: 55px;
    height: 40px;
    transform: none;
    padding: 37px 5px 30px 5px;
    z-index: 1;
    background: #ffffff;
    border-radius: 0 35px 35px 0;
    overflow-y: scroll;
    scrollbar-width: none;
    will-change: transform;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    overflow: hidden;
    color: var(--vti-black);
}

.site__footer {
    background: #fff;
}

.footer {
    display: flex;
    text-align: center;
    padding: 75px 0 100px;
}

.navigation__logo {
    width: 192px;
}

.aos-init {
    opacity: 0;
}

.aos-animate {
    opacity: 1;
    -webkit-animation: fadeInFromNone 0.5s ease-in;
    -moz-animation: fadeInFromNone 0.5s ease-in;
    -o-animation: fadeInFromNone 0.5s ease-in;
    animation: fadeInFromNone 0.5s ease-in;
}

@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}
.pos_headerNfo {
    position: absolute;
    top: 360px;
    left: calc(949px - 150px);
    width: 325px;
    height: 184px;
    color: var(--vti-black);
    border-radius: 11px;
    padding: 10px;
    background: var(--vti-white);
    border-radius: 10px;
    border-color: var(--vti-black);
    border: 1px solid;
}
.pos_kuA211 iframe {
    border-radius: 0px !important;
    border-top-left-radius: 20px !important;
    border-bottom-left-radius: 20px !important;
}
.pos_kuB211 iframe {
    border-radius: 0px !important;
    border-top-right-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
}
.pos_kuA iframe,.pos_kuB iframe {
    border-radius: 15px !important;
    background: transparent !important;
    border: 4px solid white;
}
.pos_pen, .pos_avond, .pos_brochure {border-radius: 8px;border: 4px solid white;z-index:10}
.footer .material-icons {
    font-size: 40px !important;
}
.vti_chat {
    position: fixed;
    bottom: 0px;
    right: 10px;
    width: 250px;
    height: 188px;
    z-index: 10000;
}
.vti_chat_box {
    position:absolute;
    top:10px;
    left:10px;
    width:90%;
    height:90%;
    color: var(--vti-black);
}
.vti_chat_box span {
    font-size: 40px;
    top: 40px;
    position: relative;
    color: green;
    left: 5px;
}
#chat_open {
    text-align: center;
}
#chat_open sup{
    font-size: 14px;
    color: var(--vti-oranje) !important;
    text-decoration: underline;
}
#chat_close, #chat_open {
    display:none;
}
.pos_kuA,.pos_kuB {
    padding: 5px;
}
.pos_kuA li,.pos_kuB li {
    line-height: 25px;
    color: var(--vti-black);
}

.pos_headerNfo span {
    font-family: "KGSketch", helvetica, arial, sans-serif !important;
}