/* CSS Document */
/* col1 header footer bgcolor h1 border input button bg bbvok var(--col1) */
/* col2 tekst kleur link footer var(--col2) */
/* col3 links kleur var(--col3) */
/* col4 block bg var(--col4) */
/* col5 page bg var(--col5) */
/* col6 tip & nieuw var(--col6) */
/* col7 tekst page var(--col7) */
/* col8 scroll var(--col8) */
/* col9 scroll:hover button:hover var(--col9) */

:root {
--col1: #18202b;
--col2: #ffffff;
--col3: #18202b;
--col4: #fffefe;
--col5: #f3f0ef;
--col6: #ed6b5d;
--col7: #3f3e3e;
--col8: #18202b;
--col9: #ed6b5d;
}
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
    background-color: var(--col5);
    color: var(--col7);
}
.top {
    border-bottom: 25px solid var(--col1);
    margin: 0 0 25px 0;
}
.container {
    max-width: 960px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}
h1 {
    color: var(--col1); 
}
.c {
    width: 32%;
    float: left;
}
.c2 {
    margin: 0 2%;
}
.text {
    margin: 0 0 25px 0;
    padding: 0 0 15px 0;
}
.block {
    background-color: var(--col4);
    margin: 0 0 25px 0;
    padding: 0 0 15px 0;
    border-radius: 5px;
}
.adv {
    margin: 0 0 25px 0;
}
.adv img {
    margin: 0 auto;
    display: block;
    width: 100%;
    max-width: 300px;
}
h2 {
    background-color: var(--col1);
    color: var(--col2);
    padding: 4px 15px;
    width: 100%;
    margin: 0 0 25px 0;
    font-size: 17px;
    box-sizing: border-box;
    border-radius: 5px 5px 0 0;
}
a {
    color: var(--col3);
    text-indent: 15px;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
ul {
    padding: 0 0 0 30px;
}
.block ul {
    padding: 0 10px 0 40px;
}
li {
    list-style-type: none;
}
li::before {
    content: "➤"; 
    color: var(--col3);
    display: inline-block;
    width: 25px;
    margin-left: -25px;
}
#tip, #nieuw {
    height: 18px;
    width: 47px;
    display: inline-block;
}
.cls-1 {
    fill: var(--col6)!important;
    color: var(--col6)!important;
}
/* form */
form {    
}
input, textarea {
    border: 1px solid var(--col1);
    background-color: #efefef;
    opacity: .3;
    width: 100%;
    padding: 1%;
    line-height: 20px;
    border-radius: 3px;
}
input:focus, textarea:focus {
    opacity: 1;
}
.lt h2, .bt h2  {
    margin: 25px 0;
}
form p {
    padding: 0;
    margin: 0;
}
form td {
    padding: 0 0 8px 0;
}
.button {
    background-color: var(--col1);
    color: var(--col2);
    opacity: 1;
    padding: 10px;
    font-size: 18px;
    cursor: pointer;
}
.button:hover {
    background-color: var(--col9);
    border: 1px solid var(--col9);
}
.bbvok {
    color: var(--col1);
    font-weight: bold;
    margin: 0 0 25px 0;
}
/* /form */
.ftable {
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
    padding: 5px;
    box-sizing: border-box;
    display: block;
}
#tbutton {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    outline: none; /* Remove outline */
    background-color: var(--col8); /* Set a background color */
    color: var(--col5); /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 5px 10px 10px 10px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 30px; /* Increase font size */
    border: 3px solid var(--col5);
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

#tbutton:hover {
  background-color: var(--col9);
}
.footer {
    padding: 6px 15px;
    text-align: center;
    background-color: var(--col1);
    color: var(--col2);
    position: relative;
    width: 100%;
    box-sizing: border-box;
    clear: both;
}
.footer a {
    color: var(--col2);
    text-decoration: none;   
}
.footer a:hover {
    text-decoration: underline;
}
@media screen and (max-width: 960px) {
    .container {
        width: 96%;
    }
}
@media screen and (max-width: 560px) {
    .c, .c2 {
        width: 100%;
        margin: 0;
    }
}