body, html {font-family:Serif;height: 100%;margin:0;padding:0;text-align:justify;background-color:#fcf8f8;font-size: 16px;color:#2e2c2c}
html {overflow-x:hidden;scroll-behavior: smooth;}
h1 {font-family:serif Medium;color:white;font-size:42px;margin:0;padding:20px}
.h1 {color:white; font-size:20px;text-align: center;}
.h1 span {font-size:42px}
h2 {font-size:220%; font-family:Serif, Rolando, Georgia, Times;color:#074b49; padding: 0; margin:0;}
h3 {font-family:Serif Medium; font-weight: bold;padding: 0; text-align:left;margin:0;color:#074b49;}
h4 {font-family:Serif Medium; font-size:100%;font-weight: normal;padding: 0; text-align:right; margin:0; color:#074b49;}
.show-h4 {display: none; text-align:left}
h5 {font-family:Franklin Gothic Medium; font-size:140%;font-weight: bold;padding: 0; text-align:left;margin:0;color:white;line-height:140%}
* {box-sizing: border-box;}
.right {float: right;width: 75%;min-width:650px; padding: 0 0 0 50px;}
.text {max-width:900px;float:left;margin:0 40px;}
.waternimf-klein {width:250px;height:338px;float:left;margin: 0 20px 10px 0;}
img {border:2px solid #c3c7ce;border-radius: 8px 8px 8px 8px;box-shadow: 1px 1px #d6d4d4}
a:link, a:visited, a:active { padding: 1px 0 0 0; color:#00756c;text-decoration: none;font-weight: bold;}
a:hover {color:#074b49;text-decoration: underline}
p {text-align:center;margin:0 }
.clear {clear:both}
#sub3 {display: none; }
.menubutton {border:0;background-color:transparent;font-weight: bold; font-size:16px;color:white;cursor:pointer;text-align:right;float:right;line-height:180%;}
#nav-mob {display:inline; position: fixed; right: 10px;top: 13px; margin: 0;background: rgba(37, 149, 200, 0.90);border: #0b0b28;padding: 5px;box-shadow: 0 1px 1px black; border-radius: 7px 7px 7px 7px;z-index:100;font-size: 12px;}
#nav-mob a {color: white; }
#nav-mob a:hover, #sub3 li a:hover {color: #e5de72;text-decoration: underline}
#sub3 li a {display: block;font-weight: bold;border:none;float:none;padding: 0 20px;color: white; text-decoration: none;font-size:140%;line-height: 175%;}
#sub3 ul {list-style: none;padding: 5px 0;text-align:left;}
#sub2 {display: none; }
.menubutton2 {border:0;background-color:transparent;font-weight: bold; font-size:16px;color:white;cursor:pointer;text-align:right;float:right;line-height:180%;}
#nav-mob2 {display:inline; position: fixed; right: 10px;bottom: 10px; margin: 0;background: #074b49;border: #0b0b28;padding: 5px;box-shadow: 0 1px 1px black; border-radius: 7px 7px 7px 7px;z-index:100;font-size: 12px;}
#nav-mob2 a {color: white;text-transform: uppercase }
#nav-mob2 a:hover, #sub2 li a:hover {color: #e5de72;text-decoration: underline}
#sub2 li {display: block;font-weight: bold;border:none;float:none;padding: 0 20px;color: white; text-decoration: none;font-size:140%;line-height: 150%;}
#sub2 ul {list-style: none;padding: 5px 0;text-align:left;width:290px}
/* menu-desktop */
.nav1 {display: inline;text-align: right;margin:0; height:55px;position: fixed; right: 10px;top:0;width:auto;background-color: rgba(252, 248, 248, 0.8);border-radius: 0 0 8px 8px;z-index:100}
.wrap {display: inline-block;margin: 0;}
nav {position: relative;text-align: center;letter-spacing: normal;}
nav a {text-decoration: none;color: #00756c;display: block;}
nav ul {list-style: none;position: relative;text-align: left;margin-bottom:0}
nav li {float: left;}
nav ul:after {clear:both;}
nav ul:before, ul:after {content: " ";display: table;}
nav ul.primary li a {display: block;padding: 5px 8px 0;margin: 0 8px 0;color:#00756c;text-decoration:none}
nav ul.primary li:last-child a {border-right: none;}
nav ul.primary li a:hover {color: #00756c;}
nav ul.sub {position: absolute;z-index: 200;width: auto;display:none;margin: 0 0 0 8px}
nav ul.sub li {float: none;margin: 0 0 0 -40px;}
nav ul.sub li a {border-bottom: 1px dotted #ccc;border-right: none;color: #00756c;padding: 5px 0;}
nav ul.sub li:last-child a {border-bottom: none;}
nav ul.sub li a:hover {color: #00756c; background-color: rgba(240, 240, 240, 0.6);text-decoration: underline}
nav ul.primary li:hover ul {display: block;background-color: rgba(240, 240, 240, 0.6);}
nav ul.primary li:hover a {background-color: rgba(240, 240, 240, 0.6);color: #00756c;text-shadow: none;text-decoration: none;}
nav ul.primary li:hover > a {color: #00756c;text-decoration: underline}
nav ul.primary {margin:8px 0;padding:0}
/* end menu-desktop */
.back {background-image: url(../img/back.jpg);height:206px;margin: 60px 0 0 ;padding:0}
.column2, .contact1 { float: left; width: 50%; text-align-last: center;}
.wiebenik {text-align:justify;padding:80px 10% 20px 10%}
.nimf, .contact {width:60%;margin:80px 10% 20px 10%}
.contact2 {display:none}
.nettie {width:150px;height:188px;float:right;margin: 0 0 10px 20px;display:inline;}
.nettie2 {width:150px;height:188px;float:right;margin: 0 0 10px 20px;display:none;}
.boek {width:25%;float:right; margin: 0 2% 0 20px}
.passie {margin: 20px 20% 20px 20%}
.grotere-versie {text-align:center; margin: 0 6% 0 6%;;font-size: 80%}
.genea-kop1 {width: auto;margin:0 0 30px 20%;height: auto;padding:30px 0 0 0;font-size: 120%;text-align:left}
.genea-kop2 {width:600px;margin:auto;padding-left:25px;text-align:left}
/* container schilderijen fotos */
.desktop {display: inline}
.tablet {display: none}
.three-columns {display:flex;margin-bottom:20px }
.three-columns > * {width:25%; margin: 0 0 0 6%}
.two-columns {display:flex;margin-bottom:20px }
.two-columns > * {width:41%; margin: 0 0 0 6%}
.div-columns {position: relative;}
.vertical-center {margin: 0; position: relative;top: 50%;-ms-transform: translateY(-50%); transform: translateY(-50%);}
.mixed-media {width:60%; margin:0 6% 30px 6%;border:2px solid #c3c7ce;border-radius: 8px 8px 8px 8px;box-shadow: 1px 1px #d6d4d4;padding:15px;background-color: #fffcfd }
/*end container schilderijen fotos */
/*container genealogie */
#main { width: 700px;margin:auto;height: auto;border-left: 1px solid #c3c3c3;display: flex;flex-direction: column;}
#main div {margin: 0 0 30px 25px;padding:25px;border:2px solid #c3c7ce;border-radius: 8px 8px 8px 8px;box-shadow: 1px 1px #d6d4d4;background-color: #fafafa; width: 700px;height: auto}
.dot { height: 10px;width: 10px; background-color: #074b49; border-radius: 50%;display: inline-block;}
#main div .maanden {float:left;margin-left:-142px;width:120px;border:0;text-align:right;border-radius: 0;box-shadow:none;background-color: transparent;padding:0 25px 0 0}
.show-h4 {display: none; text-align:left}
.button {width: 730px;margin:auto;text-align:right;line-height: 30px}
/*end container genealogie */
/* fixed-button end page */
.foot {position:fixed;width:auto;max-width:400px;bottom:10px;right:10px;margin:4px;color:white;background: rgba(37, 149, 200, 0.90);border: #0b0b28;padding: 0;box-shadow: 0 1px 1px black; border-radius: 7px 7px 7px 7px;z-index:100;display:inline;font-size: 20px}
.foot ul {display:flex;align-items:flex-end;margin:0;padding:0;text-align:right;list-style-type:none;float:right;}
.foot li {padding:0;margin:0;float:left}
.foot li a {display:block;border:none;padding:0 0 6px 6px;color:#f8c460;text-decoration:none;font-weight: bold;font-size:16px;}
.foot li a:hover {color:#efe839}
.foot li .up {background-image:url(../img/diversos/up.png);background-repeat:no-repeat;width:30px;height:27px;}
.foot li .up:hover {background-image:url(../img/diversos/up2.png);background-repeat:no-repeat;}
/* end fixed-button end page */
@media screen and (min-device-width: 900px) {
#nav-mob {display:none}
#menu {width:25%; float:left;margin-top: 5px;padding:0}
nav {font:18px/21px; letter-spacing:normal; line-height:25px;}
.menulist, .menulist ul {margin:20px 0 0 10px; padding:0; text-align:right; list-style-type:none;line-height:25px;}
.menulist li {border:0 ; margin-bottom:20px;font-size:125%}
.menulist ul>li:last-child {margin-bottom: 1px;}
.menulist a {display:block; padding: 1px 0 0 0; color:#008f8f;text-decoration: none;font-weight: bold;}
.menulist a:hover, .menulist a.highlighted:hover {color:#074b49;text-decoration: underline}
.menulist a.highlighted {color:#FFF; background-color:none;}
.menulist a .subind {display:none;} /* 'subind' submenu indicators, which are automatically prepended to 'A' tag contents. */
* html .menulist li {float:left; height: 1%;}
* html .menulist a {height:1%;}
.break, .druppel-mob {display: none; }
}
@media handheld, only screen and (max-width: 1100px), only screen and (max-device-width: 1100px) {
.column2 {width: 40%;}
.contact1 {width:60%}
.wiebenik {text-align:left;padding:50px 5% 20px 5%}
.nimf, .contact {width:80%;margin:50px 5% 10px 5%}
.boek {width:35%;}
.grotere-versie {text-align:left; margin: 0 6% 0 6%;;font-size: 80%}
.menulist li {font-size:100%}
.menulist, .menulist ul {line-height:15px;}
}
@media handheld, only screen and (max-width: 1000px), only screen and (max-device-width: 1000px) {
.heading1-a {margin:15px 5% 30px 20px}
.heading1-b {margin:0 0 40px 40px;float:right}
.mixed-media {width:88%; margin:0 6% 30px 6%; }
}
@media handheld, only screen and (max-width: 900px), only screen and (max-device-width: 900px) {
nav ul.primary li a {padding: 5px 6px 0;margin: 0 6px 0;}
.column2 {width: 50%;}
.wiebenik {padding:30px 2% 0 2%}
.nimf {width:90%;margin:30px 2% 0 2%}
.nettie {display:none;}
.nettie2 {display:inline;}
.passie {margin: 20px 2% 0 2%}
.boek {width:40%;}
.indexlinks {float:left; width: 250px;height:100px; margin: 0 2% 20px 2%;}
.indexlinks span {font-size:16px}
.right {float: right;width: 96%;min-width:200px; padding: 0 20px 0 20px;}
.text {width:auto;max-width:100%;float:left;margin:0;}
.heading-mob {margin:0 20px 0 0;float:right;}
.break, .druppel-mob {display: inline; }
#menu, #sub3 {display: none; }
}
@media handheld, only screen and (max-width: 850px), only screen and (max-device-width: 850px) {
#main {width: auto;border:0;margin:0 0 0 2%;}
#main div {width: 96%;margin: 0 0 30px 0;text-align:left;padding:10px}
.dot {display: none}
#main div .maanden, .show-h4 {display: inline}
.genea-kop1 {margin:0 0 30px 2%;}
.genea-kop2 {max-width: 600px;width:auto; padding:0 2% 0 2%;}
.button {width:100%;padding:20px 4% 0 0}
}
@media handheld, only screen and (max-width: 750px), only screen and (max-device-width: 750px) {
.contact1 {display:none}
.contact2 {display:inline;margin:auto;padding:0 2% 0 2%}
.table {display:none}
}
@media handheld, only screen and (max-width: 600px), only screen and (max-device-width: 600px) {
#nav-mob {display:inline; }
.nav1 {top:-160px;}
.back {height:206px;margin: 0 ;padding:0}
h1 {padding:10px 100px 10px 10px}
.h1 {padding:0 10px 0 10px}
.desktop {display: none}
.tablet {display: inline}
.contact1 {display:none}
.contact2 {display:inline;margin:auto;padding:0 2% 0 2%}
h1 {font-size:28px;}
.h1 {font-size:18px;padding:25px 10px 10px 0}
.h1 span {font-size:28px}
}
@media handheld, only screen and (max-width: 450px), only screen and (max-device-width: 450px) {
.passie {margin: 20px 2% 0 2%;text-align: left}
.boek {width:96%;float:none; margin: 0 2% 20px 2%}
.indexlinks {width: 95%;height:auto}
h1 {font-size:28px;}
.h1 {font-size:18px;padding:10px}
.h1 span {font-size:28px}
}
@media handheld, only screen and (max-width: 350px), only screen and (max-device-width: 350px) {
.column2 {float:none; width: 100%; text-align-last: center;margin:20px 0 0 0}
.nimf {width:96%;margin:0 2% 0 2%}
.nettie {display:inline;float:none;width:96%;height:auto;margin:0 2% 0 2%}
.nettie2 {display:none;}
}