:root{
    --breedteTekst: 33%;
    --breedteWaarde: 21%;
    --breedteTabel: 620px;
}

main{
    padding-top: 100px;
    min-height: 100%;
    background-color: #253F58;
    box-sizing: border-box;
    text-align: center;
}

    main h2{
        margin: 0;
        padding: 4vh 0;
        font-size: 30px;
    }

    main .keuze{
        width: 95%;
        margin: 0 auto 3% auto;
        font-size: 1.2em;
    }

    main .tabel{
        overflow: auto;
        width: 98%;
        margin: 0 auto;
        height: auto;
    }

        @supports (-moz-appearance:none) {
            main .tabel{
                scrollbar-width: thin;
                scrollbar-color: #888 transparent;
            }
        }

        main .tabel::-webkit-scrollbar{ height: 5px; }
        main .tabel::-webkit-scrollbar-track{ background: transparent; }
        main .tabel::-webkit-scrollbar-thumb{ background: #888; border-radius: 8px; }

    main .abonnementen{
        overflow: auto;
        margin-bottom: 1%;
        min-width: var(--breedteTabel);
    }

        main .abonnementen .tekst{
            float: left;
            width: var(--breedteTekst);
            margin-right: 1%;
            height: 105px;
        }

        main .abonnementen > div:not(.tekst){
            float: left;
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: var(--breedteWaarde);
            margin-right: 1%;
            height: 105px;
            font-size: 25px;
            background-color: #2882C0;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
        }

            main .abonnementen  .title{
                margin: 0 auto 2% auto;
                font-weight: bold;
            }

            main .abonnementen .price{
                font-size: max(1vw, 14px);
            }

    main .sectie{
        overflow: auto;
        line-height: 40px;
        min-width: var(--breedteTabel);
        color: black;
    }

        main .sectie.eerste{
            border-top-left-radius: 10px;
        }

        main .sectie .tekst{
            float: left;
            width: var(--breedteTekst);
            margin-right: 1%;
            padding: 15px 0 0 1%;
            height: 61px;
            box-sizing: border-box;
            background-color: #80B4D8;
            font-size: 1.3em;
            font-weight: bold;
            text-align: left;
            border-bottom: 1px solid grey;
        }

            main .sectie.eerste .tekst{
                padding-top: 0;
                height: 41px;
            }

        main .sectie > div:not(.tekst){
            float: left;
            width: var(--breedteWaarde);
            margin-right: 1%;
            height: 60px;
            background-color: #80B4D8;
            border-bottom: 1px solid grey;
        }

            main .sectie.eerste > div:not(.tekst){
                padding-top: 0;
                height: 40px;
            }

    main .functionaliteiten{
        overflow: auto;
        min-width: var(--breedteTabel);
        color: black;
    }

        main .functionaliteiten .tekst{
            float: left;
            display: flex;
            align-items: center;
            width: var(--breedteTekst);
            margin-right: 1%;
            padding-left: 1%;
            min-height: 40px;
            height: var(--hoogte, auto);
            box-sizing: border-box;
            background-color: #80B4D8;
            font-size: max(12px, 1.1vw);
            text-align: left;
        }

        main .functionaliteiten > div:not(.tekst){
            float: left;
            display: flex;
            align-items: center;
            justify-content: center;
            width: var(--breedteWaarde);
            margin-right: 1%;
            min-height: 40px;
            height: var(--hoogte, auto);
            background-color: #80B4D8;
            font-size: max(12px, 1.1vw);
        }

            main .functionaliteiten img{
                height: 30px;
            }

        @media only screen and (max-width: 768px) {
            main .functionaliteiten .tekst{
                min-height: 30px;
            }

            main .functionaliteiten > div:not(.tekst){
                min-height: 30px;
            }
        }

    main .functionaliteiten.laatste{
        border-bottom-left-radius: 10px;
        margin-bottom: 2%;
    }

        main .functionaliteiten.laatste > div{
            min-height: 10px;
            height: 10px;
        }

    main a.registreren{
        display: block;
        width: fit-content;
        max-width: 90%;
        margin: 20px auto 0 auto;
        background-color: #FFC000;
        padding: 10px 25px;
        border: 1px solid #FFC000;
        border-radius: 10px;
        font-size: 20px;
        color: black;
        box-sizing: border-box;
    }

    main .btw{
        margin: 20px 0 40px 0;
    }

    main .cbm{
        margin-bottom: 10px;
    }