/* https://makitweb.com/simple-tabbed-content-area-with-html-css-and-jquery/ */

.tabs{
    width:90%;
    height:auto;
    margin:0 auto;
}

/* tab list item */
.tabs .tabs-list{
    list-style:none;
    margin:0px;
    padding:0px;
}
.tabs .tabs-list li{
    float:left;
    margin:0px;
    margin-right:2px;
    padding:10px 5px;
    text-align: center;
    background-color:cornflowerblue;
    border-radius:15px 15px 0px 0px;
}
.tabs .tabs-list li:hover{
    cursor:pointer;
    background-color: var(--intensie-marine);
}
.tabs .tabs-list li a{
    text-decoration: none;
    color:white;
}

/* Tab content section */
.tabs .tab{
    display:block;
    width:96%;
    height:auto;
    border-radius: 0px 15px 15px 15px;
    padding:20px 15px;
    background-color:lavender;
    clear:both;
}

.tabs .tabs-list li.active{
    background-color:lavender !important;
    color: black !important;
}
.tabs .tabs-list li.active a{
    color: var(--intensie-groen) !important;
}

.page { overflow: hidden; }
.page a.prevpage { float: left;}
.page a.nextpage { float: right;}
.page a, .page a:visited {
    border-radius: 50%;
    padding: 10px 15px;
    background-color: cornflowerblue;
    color: white;
}
.page a:not(.passive):hover {
    cursor:pointer;
    color: white;
    background-color: var(--intensie-marine);
}
.page a.passive {
    background-color: lavender;
    color: cornflowerblue;
    cursor: default;
}
.page a.passive:hover {
    color: cornflowerblue;
}

@media screen and (max-width:420px){
    .tabs{
        margin:0;
        width: 96%;
    }
    .tabs .tabs-list li {
        width: 20%;
    }
    .tabs .tabs-list li a span{
        display: none;
    }
    .tabs .tabs-list li a[href^='#facebook']:after { content: url(../img/icon_facebook.png); }
    .tabs .tabs-list li a[href^='#google']:after { content: url(../img/icon_google.png); }
    .tabs .tabs-list li a[href^='#gasten']:after { content: url(../img/icon_gasten.png); }
}