html, body, * {
    -webkit-touch-callout: none; /*no touch & hold feature*/
    -webkit-user-select: none; /* no select text feature*/
    -moz-user-select: none; /* no select text feature*/
    -ms-user-select: none; /* no select text feature*/
    user-select: none; /* no select text feature*/
    -webkit-appearance: none; /* no platform-native styling*/
    -moz-appearance: none;
    -khtml-user-select: none;
    -o-user-select: none;
    -webkit-user-drag: none; /*element not draggable*/
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    background-size: cover;
}

.unselectable {
    -moz-user-select: none;
    -webkit-user-select: none;
}

div.hidden {
    display: none;
}

.w3-tag {
    cursor: pointer;
}

h2 {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-left: 10px;
}

h3 {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-left: 10px;
}

a {
    font-weight: bold;
    color: #346AA8;
}

    a:hover,
    a:focus,
    a:active {
        text-decoration: none;
    }

h2 .speech {
    display: block;
    padding-left: 10px;
}

h3 .speech {
    display: block;
    padding-left: 10px;
}

.modal_background {
    /*background: linear-gradient(90deg, #80a5a1 0%, #808ea5 50%, #80a5a1 100%);*/
    background: #808ea5;
    border-style: none;
}

.w3-modal {
    background-color: rgba(0,0,0,.6);
}

/*.page-container {
    margin: 0 auto;
    margin-bottom: 30px;
}*/

.speech {
    cursor: pointer;
    position: relative;
}

    .speech.beforeplay {
        background-color: #f4d5d5;
        border-width: 3px;
        margin: 5px;
        border-style: solid;
        border-color: rgb(152,157,228);
    }

    .speech.isplaying {
        background-color: rgba(72,106,189,.3);
        color: #000000;
        border-width: 3px;
        margin: 5px;
        border-style: solid;
        border-color: white;
        z-index: 0;
    }

        .speech.isplaying:before, .speech.isplaying:after {
            position: absolute;
            left: -2px;
            top: -2px;
            background: linear-gradient(45deg, #f7b284, #fccb8d, #cfe09b, #8ec89a, #83d0f5, #8f99cd, #ab8cc0, #f29fc5, #f39ca2, #f3997b);
            background-size: 400%;
            width: calc(100% + 4px);
            height: calc(100% + 4px);
            content: "";
            z-index: -1;
            animation: steam 50s linear infinite;
        }

@keyframes steam {
    0% {
        background-position: 0 0;
    }

    50% {
        background-position: 400% 0;
    }

    100% {
        background-position: 0 0;
    }
}

.speech.afterplay {
    background-color: rgba(175,239,189,.7);
    border-width: 3px;
    margin: 5px;
    border-style: solid;
    border-color: #90b9c2;
}

.tag {
    cursor: pointer;
}

.w3-text-red {
    cursor: pointer;
}

/*.w3-modal {
    background-color: rgba(0,0,0,.6);
}
*/
.block {
    position: relative;
}

    .block:before, .block:after {
        content: "";
        position: absolute;
        left: -2px;
        top: -2px;
        background: linear-gradient(45deg, #808ea5, #808ea5, #808ea5,#00eaff, #00ff00, #808ea5, #808ea5, #808ea5,#808ea5, #808ea5);
        background-size: 400%;
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        z-index: -1;
        animation: steam 50s linear infinite;
    }

.block:after {
    filter: blur(10px);
}

.toplinks {
    width: 60px;
    height: 80px;
    margin-right: 1%;
    margin-left: 1%;
    display: inline-block;
    cursor: pointer;
}

img {
    border: 0;
    vertical-align: middle;
    display: block;
    max-width: 100%;
    height: auto;
}

.img_kleur {
    background-color: #fff0f0;
}


.toplinks2 {
    width: 200px;
    height: 100px;
    margin-right: 1%;
    margin-left: 1%;
    display: inline-block;
    cursor: pointer;
}

#wijsvinger {
    z-index: 5;
}

/**** phone max-width:600px klein scherm ****/
/*@media only screen and (max-width:600px) {
    .page-container {*/ /*ruimte links en rechts bij kleine schermen*/
        /*margin-left: 10px;
        margin-right: 10px;
    }

    .terug {
        width: 110%;
        display: block;
        cursor: pointer;
    }

    h3 {
        font-size: 12px;
    }

    .speech.beforeplay {
        border-width: 1px;
        padding: 1px;
    }

    .speech.isplaying {
        border-width: 1px;
        padding: 1px;
    }

    .speech.afterplay {
        border-width: 1px;
        padding: 1px;
    }

    .w3-card-4 {
        margin-top: 30px;
        display: block;
        cursor: pointer;
    }

    .mCSB_inside > .mCSB_container {
        margin-right: 40px;
    }
}*/
/*toegevoegd voor ruimte links en rechts bij middelgroot scherm*/
/*@media (max-width:768px) {
   
    .page-container {
        margin-left: 10px;
        margin-right: 10px;
    }
}*/

/**** tablet/pc min-width:601px ****/
@media only screen and (min-width:601px) {
    #wijsvinger {
        z-index: 5;
    }
}

/*@media (min-width: 768px) {
    .page-container {
        width: 710px;
    }
}*/

/*@media (min-width: 992px) {
    .page-container {
        width: 970px;
    }
}*/

/*@media (min-width: 1200px) {
    .page-container {
        width: 1100px;
    }
}*/

/*//////////////////////////////////////////////////////////*/

.fontje {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.5vw;
    color: grey;
    text-align: center;
    background: rgb(255, 255, 255);
    border-radius: 0 0 10px 10px; /* Plat aan de bovenkant, afgerond aan de onderkant */
}

.copyright {
    color: #4a4a4a;
}

@media (max-width: 600px) {
    .fontje {
        font-family: 'Quicksand', sans-serif;
        font-size: 12px; /* Dit wordt toegepast op schermen kleiner dan 400px breed */
    }

 /*   .page-container {
        margin-left: 10px;
        margin-right: 10px;
    }*/

    .terug {
        width: 110%;
        display: block;
        cursor: pointer;
    }

    h3 {
        font-size: 12px;
    }

    .speech.beforeplay {
        border-width: 1px;
        padding: 1px;
    }

    .speech.isplaying {
        border-width: 1px;
        padding: 1px;
    }

    .speech.afterplay {
        border-width: 1px;
        padding: 1px;
    }

    .w3-card-4 {
        margin-top: 30px;
        display: block;
        cursor: pointer;
    }

    .mCSB_inside > .mCSB_container {
        margin-right: 40px;
    }
}

@media (max-width: 900px) {
    .fontje {
        font-family: 'Quicksand', sans-serif;
        font-size: 15px; /* Dit wordt toegepast op schermen kleiner dan 400px breed */
    }
}

@media (min-width: 1200px) {
    .fontje {
        font-family: 'Quicksand', sans-serif;
        font-size: 16px; /* Dit wordt toegepast op schermen breder dan 1200px */
    }
  /*  .page-container {
        width: 1100px;
    }*/
}

.spectrum-background {
    /*background: linear-gradient(90deg, #80a5a1 0%, #808ea5 50%, #80a5a1 100%);*/
    background: #808ea5;
}

.spectrum-background-RvS {
    /*background: linear-gradient(90deg, #80a5a1 0%, #808ea5 50%, #80a5a1 100%);*/
    background: #000000;
}

.main-container {
    display: flex;
    justify-content: space-between;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    /*  margin-right: 40px;*/ /* Ruimte voor de zijbalk */
}

.flex-container-praatplaat {
    display: flex;
    /*margin-right: 40px;*/ /* Ruimte voor de zijbalk */
    justify-content: center; /* centreert horizontaal */
}

.flex-item.praatplaat_titel img {
    border-radius: 10px;
}

.flex-item.pijltjen {
    flex: 0 0 6%;
}


.flex-item {
    box-sizing: border-box;
    /*flex: 0 0 14.5%;*/ /* Wel groei, geen krimp, basis van 20% */
    flex: 0 0 14.65%;
    margin: 1%;
    border-radius: 10px;
}

    .flex-item img {
        width: 100%;
        height: auto; /* Zorgt dat afbeeldingen hun verhoudingen behouden */
        border-radius: 10px 10px 0 0; /* Afgerond aan de bovenkant, plat aan de onderkant */
    }

@media (max-width: 1200px) {
    .flex-item {
        flex: 0 1 31.33%; /* 3 kolommen */
    }

        .flex-item.pijltjen {
            flex: 0 0 12%;
        }
}

/*@media (max-width: 900px) {
            .flex-item {
                flex: 0 1 48%;*/ /* 2 kolommen voor tablets, beetje kleiner dan 50% ivm margin */
/*}
        }*/

@media (max-width: 600px) {
    .flex-item {
        flex: 0 1 48%; /* 2 kolommen voor tablets, beetje kleiner dan 50% ivm margin */
    }

        .flex-item.pijltjen {
            flex: 0 0 25%;
        }
}

@media (max-width: 400px) {
    .flex-item {
        flex: 0 1 100%; /* Elke flex item neemt de volledige breedte in op kleine schermen */
    }

        .flex-item.pijltjen {
            flex: 0 0 50%;
        }
}