html{
scroll-behavior: smooth;
}
h1{
font-weight: bold;
}
.az-letters {
display:  grid;
gap: 8px;
background: #fff;
border-radius: 12px;
margin-bottom: 30px;
}
.az-letters a {
width: 100%;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ebe6e7;
border-radius: 12px;
text-decoration: none;
font-weight: 600;
font-size: 20px;
color: #364153;
transition: all 0.2s ease;
background-color: #fbf9fa;
}
.az-letters a:hover {
background: #fce7f3;
color: #c6005c;
}
.vertical-az a{
display: block;
font-size: 12px;
margin-bottom: -5px;
text-align: center;
}
.vertical-az{
position: fixed;
right: 0;
top: 50%;
right: 2rem;
transform: translateY(-50%);
z-index: 999;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease;
}
.vertical-az.is-visible {
opacity: 1;
pointer-events: auto;
}
.vertical-az a.active{
font-weight: bold;
color: #000 !important;
}
.vertical-az .disabled-naam{
color: #aaa;
pointer-events: none;
}
.azpage-list ul,
.babynaam-lijst,
.letter-itemloop{
list-style-type: none !important;
padding-left: 0 !important;
}
.azpage-list li a,
.babynaam-lijst li a,
.letter-items a{
padding: 10px 20px;
background: #fbf9fa;
margin-bottom: 15px;	
display: block;
border: 1px solid #ebe6e7;
border-radius: 12px;
color: #364153;
}
.azpage-list li a:hover,
.babynaam-lijst li a:hover,
.letter-items a:hover{
background: #fce7f3;
color: #c6005c;
}
.meisjes-list ol li::marker{
color: #ff6b6b;
}
.jongens-list ol li::marker{
color: #155dfc;
}
.icon-circle {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
}
.icon-circle .et-pb-icon {
font-size: 30px !important;
line-height: 1 !important;
display: block;
margin-left: 15px;
}
.icon-pink:hover .et-pb-icon,
.icon-blue:hover .et-pb-icon,
.icon-purple:hover .et-pb-icon{
color: #fff !important;
}
.icon-pink .icon-circle{
background-color: #fce7f3;
}
.icon-pink:hover .icon-circle{
background-color: #e60076;
}
.icon-blue .icon-circle{
background-color: #dbeafe;
}
.icon-blue:hover .icon-circle{
background-color: #155dfc;
}
.icon-purple .icon-circle{
background-color: #f3e8ff;
}
.icon-purple:hover .icon-circle{
background-color: #9810fa;
}
.icon-pink:hover,
.icon-blue:hover,
.icon-purple:hover{
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.18);
cursor: pointer;
} .single-geslacht a{
font-size: 75%;
text-transform: capitalize;
}
.single-geslacht a[href*="meisjesnaam"]{
background: #fce7f3;
color: #c6005c;
padding: 10px 20px;
border-radius: 20px;
}
.single-geslacht a[href*="jongensnaam"]{
background: #dbeafe;
color: #2ea3f2;
padding: 10px 20px;
border-radius: 20px;
}
.baby-buttons{
display:inline-flex;
gap:10px;
} .image-wrapper {
aspect-ratio: 16 / 9;
overflow: hidden;
}
.image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
}
.et_pb_blog h2.entry-title,
.et_pb_blog p.post-meta{
margin-left: -19px;
}
.custom-blog {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.custom-blog-item img {
width: 100%;
height: auto;
display: block;
border-radius: 12px;
margin-bottom: 12px;
}
.custom-blog-item .meta span{
border: 1px solid;
border-radius: 12px;
padding: 6px 12px;
font-size: small;
}
.custom-blog-item .meta .category{
margin-left: 10px;
}
.custom-pagination{
margin-top: 36px;
}
.wp-pagenavi{
margin-top: 2rem;
}
body #main-content .wp-pagenavi span.pages{
margin-right: 3rem;
color: #030213 !important;
}
body #main-content .wp-pagenavi span.current{
color: #030213 !important;
}
.et_pb_blog .post-meta .author a{
pointer-events: none;
}
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}
.blog-item {
background: #fff;
border-radius: 10px;
overflow: hidden;
}
.blog-thumb img {
width: 100%;
height: auto;
display: block;
border-radius: 10px;
}
.blog-meta {
font-size: 13px;
}
.blog-title {
padding-top: 15px;
font-size: 18px;
}
.blog-cat {
margin-right: 5px;
font-size: 12px;
background: #f2f2f2;
padding: 2px 6px;
border-radius: 4px;
} .babynaam-zoek{
padding:12px 40px !important;
margin-bottom: 24px !important;
border: 1px solid #ebe6e7;
border-radius: 12px;
background-repeat:no-repeat;
background-position:12px center;
background-size:18px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23000000' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E");`
}
.babynamen-controls {
position: relative;
}
.babynaam-results {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: #fff;
border: 1px solid #ddd;
display: none;
z-index: 999;
}
.babynamen-filters{
margin-bottom: 24px;
}
.babynamen-filters button, 
.search-active:not(:empty),
.filter-active:not(:empty){
border-radius: 20px;
border: 1px solid #bbb;
padding: 12px 24px;
background-color: #fff;
}
.babynamen-filters button.active{
background: #ff6b6b;
border: 1px solid #ff6b6b;
color: #fff !important;
}
.babynamen-filters button:hover{
cursor: pointer;
}
.babynamen-filters button:not(:last-of-type){
margin-right: 10px;
}
.search-active{
margin-bottom: 12px;
}
.babynamen-controls .filter-active{
margin-bottom: 24px;
display: inline-block;
}
.search-active:empty,
.filter-active:empty{
display: none;
}
.search-active .clear-filter,
.filter-active .clear-filter{
font-weight: bold;
margin-left: 12px;
}
.result-item {
display: block;
padding: 10px;
text-decoration: none;
border-bottom: 1px solid #eee;
}
.result-item:hover {
background: #f5f5f5;
}
.babynamen-search-only {
position: relative;
max-width: 400px;
margin: 0 auto;
}
.home .babynamen-search-only{
margin: inherit;
}
.babynaam-results {
position: absolute;
background: #fff;
width: 100%;
border: 1px solid #ddd;
display: none;
z-index: 999;
}
.home .babynaam-results{
}
.wp-pagenavi{
border-top: 0;
text-align: center;
}
.wp-pagenavi .current, .wp-pagenavi .extend, .wp-pagenavi a{
font-weight: 700 !important;
text-transform: uppercase;	
}
.wp-pagenavi .pages{
display: block;
margin-right: 0 !important;
margin-bottom: 1rem !important;
}
body .wp-pagenavi a.page,
body .wp-pagenavi a.previouspostslink,
body .wp-pagenavi a.nextpostslink{
border-radius: 100px;
height: 40px;
width: 40px;
line-height: 40px;
background-color: rgba(109,124,144,.1);
color: #030213 !important;
display: inline-block;
}
body .wp-pagenavi a.page:hover,
body .wp-pagenavi a.previouspostslink:hover,
body .wp-pagenavi a.nextpostslink:hover{
background: #fce7f3;
}
.wp-pagenavi span.current{
border-radius: 100px;
height: 40px;
width: 40px;
line-height: 40px;
background: #fce7f3;
display: inline-block;
}
body #main-content .wp-pagenavi .first,
body #main-content .wp-pagenavi .last,
body #main-content .wp-pagenavi .extend{
color: #030213 !important;
} .wpcf7-mail-sent-ok {
display: none;
}
.cf-container {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -5px;
margin-left: -5px;
}
.cf-col-6, .cf-col-12 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 5px;
padding-left: 5px;
}
ul.babynaam-lijst, ul.letter-itemloop{
column-count: 4;	
} .normal-results{
margin-top: 2rem;
}
.info-zoeken .et_pb_searchform {
position: relative;
} .info-zoeken .et_pb_searchsubmit {
width: 50px !important;
min-width: 50px;
padding: 0 !important;
text-indent: -9999px;
overflow: hidden;
position: relative;
cursor: pointer;
}
.info-zoeken .et_pb_searchform div {
position: relative;
}
.info-zoeken .et_pb_searchform div::after {
content: "\55";
font-family: "ETmodules";
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
font-size: 18px;
color: #030213;
} .namen-lijst {
display: flex;
flex-direction: column;
gap: 14px;
}
.naam-item {
display: flex;
align-items: center;
gap: 18px;
padding: 18px 20px;
border-radius: 18px;
background: #fff;
border: 1px solid #f3e8ee;
text-decoration: none;
color: #222;
transition: all .25s ease;
box-shadow:
0 2px 10px rgba(0,0,0,0.03);
}
body .naam-item:hover {
transform: translateY(-2px);
border-color: #f7cfe0;
box-shadow:
0 10px 24px rgba(0,0,0,0.07);
}
.rank {
width: 52px;
height: 52px;
flex-shrink: 0;
border-radius: 14px;
background: linear-gradient(
135deg,
#fdf2f8,
#ffe4ec
);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 700;
color: #d9467a;
}
.naam-content {
flex: 1;
}
.naam-content h3 {
margin: 0 0 6px;
font-size: 22px;
line-height: 1.2;
}
.meta {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.meta span {
font-size: 13px;
padding: 6px 10px;
border-radius: 999px;
background: #f8f8f8;
color: #666;
}
.arrow {
font-size: 22px;
color: #bbb;
transition: transform .25s ease;
flex-shrink: 0;
}
.naam-item:hover .arrow {
transform: translateX(4px);
}
.naam-item.top-3 {
background: linear-gradient(
135deg,
#fff7ed,
#fff
);
border-color: #fed7aa;
} .page-id-68 .naam-item, .home-jongens .naam-item,
.page-id-29 .populair-jongens .naam-item,
.page-id-59 .populair-jongens .naam-item,
.page-id-31 .naam-item{
border-color: #dbeafe;
}
html .page-id-68 .naam-item:hover, html .home-jongens .naam-item:hover,
html .page-id-29 .populair-jongens .naam-item:hover,
html .page-id-59 .populair-jongens .naam-item:hover,
html .page-id-31 .naam-item:hover{
border-color: #93c5fd;
}
.page-id-68 .rank, .home-jongens .rank,
.page-id-29 .populair-jongens .rank,
.page-id-59 .populair-jongens .rank,
.page-id-31 .rank{
background: linear-gradient(
135deg,
#eff6ff,
#dbeafe
);
color: #2563eb;
}
.page-id-68 .naam-item.top-3, .home-jongens .naam-item.top-3,
.page-id-29 .populair-jongens .naam-item.top-3,
.page-id-59 .populair-jongens .naam-item.top-3,
.page-id-31 .naam-item.top-3{
background: linear-gradient(
135deg,
#f0f9ff,
#ffffff
);
border-color: #93c5fd;
}
.single-babynaam #main-content a.et_pb_button[href="https://www.babynamenwijzer.nl/geslacht/jongensnamen/"]{
background: #155dfc;
}
.single-babynaam #main-content a.et_pb_button[href="https://www.babynamenwijzer.nl/geslacht/jongensnamen/"]:hover{
background: #000;
}
.single-geslacht a[href="https://www.babynamenwijzer.nl/jongensnamen/jongensnamen-a-z/"]{
font-size: 75%;
text-transform: capitalize;
border: 1px solid #94c1ff;
padding: 10px 30px;
border-radius: 15px;
color: #94c1ffc !important;
}
.single-geslacht a[href="https://www.babynamenwijzer.nl/jongensnamen/jongensnamen-a-z/"]:hover{
background: #94c1ff;
color: #030213 !important;
}
.single-geslacht a[href="https://www.babynamenwijzer.nl/meisjesnamen/meisjesnamen-a-z/"]{
font-size: 75%;
text-transform: capitalize;
border: 1px solid #c6005c;
padding: 10px 30px;
border-radius: 15px;
color: #c6005c !important;
}
.single-geslacht a[href="https://www.babynamenwijzer.nl/meisjesnamen/meisjesnamen-a-z/"]:hover{
background: #c6005c;
color: #030213 !important;
} .baby-blog-categories{
display:flex;
flex-wrap:wrap;
gap:14px;
margin:30px 0;
}
.baby-blog-category{
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 20px;
background:#fdf2f8;
border:1px solid #f9d7e6;
border-radius:999px;
color:#d14d8b;
font-size:15px;
font-weight:600;
text-decoration:none;
transition:all .25s ease;
line-height:1;
}
.baby-blog-category:hover{
background:#d14d8b;
border-color:#d14d8b;
color:#fff;
transform:translateY(-2px);
}
@media (max-width:767px){
.baby-blog-categories{
gap:10px;
}
.baby-blog-category{
padding:10px 16px;
font-size:14px;
}
.naam-item {
padding: 14px;
gap: 12px;
}
.naam-content h3 {
font-size: 18px;
}
.rank {
width: 44px;
height: 44px;
font-size: 18px;
}
.cf-col-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.cf-push-6 { margin-left: 50%; }
.cf-col-12 {
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
}
@media only screen and (min-width: 981px){
.nav li ul{
border-radius: 20px;
border: 2px solid #ebe6e7 !important;
width: 340px;
}
nav ul.et-menu > li:hover:after{
content: '';
position: absolute;
width: 106%;
left: -3%;
height: 40px;
top: 50%;
transform: translateY(-50%);
background: #e9ebef !important;
border-radius: 10px;
}
nav ul.et-menu > li:hover a{
z-index: 99;
}
.et-menu li li a{
width: 300px;
}
.sub-menu a:hover{
color: #861043 !important;
z-index: 99;
}
.sub-menu li:hover:after{
content: '';
position: absolute;
width: 300px;
height: 40px;
top: 50%;
transform: translateY(-50%);
background: #fce7f3 !important;
border-radius: 10px;		
}
.az-letters {
grid-template-columns: repeat(13, 1fr);
}
.azpage-list ul.babynamen-list{
column-count: 4;
}
.blog-item{
margin-bottom: 30px;
}
}
@media (max-width: 980px){
.az-letters {
grid-template-columns: repeat(7, 1fr);
}
.custom-blog {
grid-template-columns: repeat(1, 1fr);
}
.azpage-list ul.babynamen-list,
ul.babynaam-lijst, ul.letter-itemloop{
column-count: 2;	
}
.single-naam-btns{
display: inline-grid;
}
.blog-grid{
grid-template-columns: repeat(1, 1fr);
}
.blog-item{
margin-bottom: 20px;
}
}
@media (max-width: 600px){
.azpage-list ul.babynamen-list,
ul.babynaam-lijst, ul.letter-itemloop{
column-count: 1;	
}
.namen-lijst .arrow{
display: none;
}
.landen-lijst .et_pb_column{
padding: 1rem !important;
--vertical-gap: 5px;
}
h1, h2, h3, h4, h5, h6{
line-height: 2ch;
}
body h1{
font-size: 2rem !important;
}
body h2{
font-size: 1.75rem !important;
}
body h3{
font-size: 1.5rem !important;
}	
body h4{
font-size: 1.25rem !important;
}
.vertical-az.is-visible{
right: -20px;
}
.page-id-31 .vertical-az.is-visible,
.page-id-74 .vertical-az.is-visible{
right: 13px;
}
}