/*
Theme Name:  Plaatselijk Belang Oosterzee
Theme URI: https:/oosterzee.com
Author: Scherrenburg Development
Author URI: https://scherrenburgdevelopment.nl
Description: Op maat gemaakte website voor Plaatselijk Belang Oosterzee
Version: 1.0
*/

/* ======================================
    Algemene styling
====================================== */

* {margin: 0; padding: 0; transition: 0.3s ease; text-decoration: none; color: inherit; list-style-type: none; box-sizing: border-box;}

html,body {font-family: 'Sofia Pro', sans-serif; font-size: 16px; color: var(--color4); background-color: var(--color1); font-weight: 700;}
img {display: block; max-width: 100%; height: auto;}
.clear {clear: both;}
strong {font-weight: 700;}
fieldset.hidden-fields-container { display: none; }

  
main {position: relative;}
.maxw {max-width: 1350px; margin: 0 auto; padding: 0 20px;}
.maxw1 {max-width: 1650px; margin: 0 auto; padding: 0 20px;}
:root {--color1: #EDF2F8; --color2: #E3EBF3; --color3: #041F3C; --color4:  #000; --color5: #fff; --color6: #232B34; --borderradius: 3px; }

h1, .h1 {font-size: 40px; font-weight: 700;}
h2, .h2 {font-size: 35px; font-weight: 700;}
h3, .h3 {font-size: 27px; font-weight: 700;}
h4, .h4 {font-size: 25px; font-weight: 700;}
h5, .h5 {font-size: 22px; font-weight: 700;}
h6, .h6 {font-size: 17px; font-weight: 700;}
  
.btns {display: flex; gap: 25px;}
.btn {padding: 13px 30px; border-radius: var(--borderradius); display: inline-block;}
.btn.btn_color1 {background-color: var(--color5); color: var(--color4);}
.btn.btn_color1:hover {order: 1px solid var(--color2);}
.btn.btn_color2 {background-color: var(--color3); color: var(--color5);}
.btn.btn_transparant {border: 1px solid var(--color2);}
.btn.btn_color2:hover {box-shadow: 0 0 0 1px var(--color3); background-color: transparent; color: var(--color4);}
.btn.btn_transparant:hover {background-color: var(--color2)}

.btn i {margin: 0 0 0 15px;}

/* =====================================
    Navigatie en header
====================================== */

.front_page, .page {background-repeat: no-repeat; background-size: cover; background-position: center;}
.overlay {padding: 75px 0; background-color: rgb(4, 31, 60, 0.97);}

.topbar {background-color: var(--color2); padding: 10px 0; font-size: 14px; color: var(--color3); font-weight: 500;
    position: relative; z-index: 100000;}
.topbar .maxw1 {display: flex; justify-content: flex-end;}
.topbar .maxw1 .navbar {position: fixed; background-color: var(color1);     background: var(--color1);}
.topbar a {padding: 0 10px 0 0;}
.topbar a:last-child {padding: 0px;}

.navbar { display: flex; justify-content: space-between; align-items: center;  padding: 30px 0; color: var(--color4);     background: var(--color1); position: sticky; z-index: 100000;}
.navbar .logo { width: 235px; margin: 0 25px 0 0; display: block; z-index: 100000; }
.navbar nav { width: calc(100% - 235px); display: flex; justify-content: flex-end; }
.navbar nav ul > li { display: inline-block; margin: 0 15px 0 0; font-size: 19px; position: relative; font-weight: 300; }
.navbar .desktop_menu ul > li::after { content: ""; display: block; width: 100%; height: 3px; background-color: var(--color3); position: absolute; bottom: -5px; transition: 0.3s ease; left: 0; opacity: 0; border-radius: var(--borderradius); }
.navbar .desktop_menu ul > li:hover::after, .navbar .desktop_menu ul > li.current-menu-item::after { opacity: 1; }
.navbar nav ul > li.menu-item-has-children:after { opacity: 0; }
.navbar nav ul > li:last-child { margin: 0; }
.navbar .desktop_menu ul:first-of-type > li:last-child > a { background-color: var(--color3); padding: 13px 30px; border-radius: var(--borderradius); margin: 0; position: static; color: var(--color1); }
.navbar .desktop_menu ul:first-of-type > li:last-child > a:hover { background-color: transparent; box-shadow: 0 0 0 1px var(--color3); color: var(--color4); }
.navbar .desktop_menu ul:first-of-type > li:last-child > a:after { content: '\f007'; font-family: "Font Awesome 5 Free"; padding: 0 0 0 12px; }
.navbar .desktop_menu ul:first-of-type > li:last-child::after { display: none; }

.navbar .desktop_menu .sub-menu {display: none;position: absolute; color: #fff; top: 100%; left: 0;background-color: var(--color3); z-index: 1000;line-height: initial;min-width: 230px;border-radius: var(--borderradius);}
.navbar .desktop_menu .sub-menu li {width: 100%;}
.navbar .desktop_menu .sub-menu li a {padding: 14px 15px; line-height: 14px; font-size: 16px; color: #fff !important;text-decoration: none;white-space: normal;display: block;width: 100%;}
.navbar .desktop_menu .sub-menu li:first-child a {border-top-left-radius: var(--borderradius); border-top-right-radius: var(--borderradius);}
.navbar .desktop_menu .sub-menu li:last-child a {border-bottom-left-radius: var(--borderradius);border-bottom-right-radius: var(--borderradius);}
.navbar .desktop_menu nav ul li:hover > .sub-menu,
.navbar .desktop_menu .menu-item-has-children:hover > .sub-menu {display: block;}
.navbar .desktop_menu .sub-menu .sub-menu {top: 0; left: 100%; margin-left: 1px; border-radius: var(--borderradius);}
.navbar .desktop_menu .sub-menu li:hover > .sub-menu {display: block;}
.navbar .desktop_menu .sub-menu li a:hover {background-color: var(--color2) !important; color: var(--color3)!important; }
.navbar .desktop_menu .sub-menu li:last-child > a:after {content: none !important;}
.navbar .desktop_menu .sub-menu li:last-child > a {padding: 14px 15px !important; border-top-left-radius: 0!important; border-top-right-radius: 0!important; border-bottom-right-radius: var(--borderradius)!important; border-bottom-left-radius: var(--borderradius)!important; box-shadow: none !important;}

.mobile_menu { display: none; }
#mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  background-color: var(--color1);
  visibility: hidden;
  opacity: 0;
  transition: top 0.3s ease, opacity 0.3s ease;
  z-index: 20000;
}

.mobile_logo_wrapper .maxw1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}
#mobile-menu-toggle { cursor: pointer; font-size: 30px; display: none; }
#mobile-menu { top: -100%; left: 0; position: fixed; padding: 90px 20px; height: 100%; width: 100%; background-color: var(--color1); z-index: 20000; box-shadow: 0px 5px 16px 0px rgba(0, 0, 0, 0.24); visibility: hidden; opacity: 0;     transition: top 0.3s ease, opacity 0.3s ease, visibility 0s linear 0.3s;  }
#mobile-menu.active { visibility: visible; opacity: 1;  top: 0; display: block; transition: top 0.3s ease, opacity 0.3s ease; }
#mobile-menu ul { width: 100%; display: flex; flex-direction: column; margin: 61px 0 0 0; padding: 0; }

#mobile-menu ul li {margin: 0;}
#mobile-menu ul li a{margin: 5px 0; background-color: var(--color3); color: #fff; padding: 8px 15px; border-radius: var(--borderradius);}
#mobile-menu ul li a {display: flex; flex-wrap: wrap; font-weight: 500; font-size: 18px; padding: 11px 12px;}
#mobile-menu ul li a:hover {background: transparent; color: var(--color3); box-shadow: 0 0 0 1px var(--color3);}
#mobile-menu ul li .sub-menu {display: none; padding: 0; margin: 0; background: transparent;overflow: hidden;list-style-type: none;}
#mobile-menu ul li.submenu-open > .sub-menu {display: flex; padding: 0 0 0 15px; background-color: var(--color1); margin: 8px 0 0 0;}
#mobile-menu ul li.submenu-open > .sub-menu li {background: transparent; color: #fff; margin: 0;}
#mobile-menu ul li.submenu-open > .sub-menu li:hover a {background-color: var(--color3); color: #fff; box-shadow: none;}
#mobile-menu ul li.submenu-open > .sub-menu li a {background-color: transparent; color: var(--color3); padding: 8px 10px; font-size: 17px;}

.header_content {background-position: center; background-size: cover; background-repeat: no-repeat; color: var(--color5); font-weight: 700;}
.header_content .overlay {position: relative; padding: 100px 0; background: linear-gradient(to top left, rgba(4, 31, 60, 0.22) 8%, rgba(4, 31, 60, 0.29) 18%, rgba(4, 31, 60, 0.37) 27%, rgba(4, 31, 60, 0.48) 39%, rgba(4, 31, 60, 0.78) 64%, rgba(4, 31, 60, 0.95) 89%, rgba(4, 31, 60, 1) 100%)}
.header_content.frontpage .h1 {font-size: 50px}
.header_content.frontpage p {margin: 15px 0 0 0; font-weight: 300; font-family: "Poppins", sans-serif; max-width: 60%;}
.header_content.frontpage .btns {margin: 50px 0 0 0;}
.header_content.frontpage .btns .btn.btn.btn_color1:hover {background-color: transparent; color: var(--color5); box-shadow: 0 0 0 1px var(--color5);}
.header_content.frontpage .btns .btn.btn_transparant:hover {background-color: var(--color5); color: var(--color4);}

.header_content.page > .overlay {padding: 100px 0; background: rgb(4, 31, 60, 0.97);}
.header_content.page .page_header h1 {font-size: 45px;}

.icoontjes_header_frontpage {position: absolute; right: 0; bottom: 0; width: 285px; height: auto; aspect-ratio: 1 / 1; background-repeat: no-repeat; background-size: contain; background-position: right bottom; z-index: 5; pointer-events: none;}
.icoontjes_header_page {position: absolute; right: 0; bottom: 0; width: 175px; height: auto; aspect-ratio: 1 / 1; background-repeat: no-repeat; background-size: contain; background-position: right bottom; z-index: 5; pointer-events: none;}
.icoontjes_rij {position: absolute; right: 0; bottom: 0; width: 375px; height: auto; aspect-ratio: 1 / 1; background-repeat: no-repeat; background-size: contain; background-position: right bottom; z-index: 5; pointer-events: none;}
/* =====================================
    Algemeen content
====================================== */

.content {padding: 75px 0; display: flex; justify-content: space-between; flex-wrap: wrap;}
.content .content_left {width: 50%; font-weight: 300;}
.content .content_left h1 {margin: 0 0 20px 0; color: var(--color6);}
.content .content_left p:first-of-type {margin: 0 0 1.8em 0;}
.content .content_left p {margin: 1.8em 0; font-family: "Poppins", sans-serif; font-weight: 300;}
.content .content_left p > a {color: var(--color3); text-decoration: underline; font-weight: 700   ;}
.content .content_left .date {font-weight: 700;}
.content .content_left ol {list-style-type: disc; padding-left: 1.5rem; margin: 1.8em 0; font-family: "Poppins", sans-serif;}
.content .content_left ul {list-style-type: disc; padding-left: 1.5rem; margin: 1.8em 0; font-family: "Poppins", sans-serif; }
.content .content_left li { margin-bottom: 0.5rem;  list-style-type: decimal; }

.content .content_right {width: 35%;}
.content .content_right > img {border-radius: var(--borderradius);}

/* =====================================
    Agenda
====================================== */

.agenda {background-repeat: no-repeat; background-size: cover; background-position: center; color: var(--color5);}   
.agenda .overlay .maxw {display: flex; flex-wrap: wrap; justify-content: space-between;}
.agenda .agenda_left {width: 65%; max-width: 50%;}
.agenda .agenda_left .text {font-weight: 300; font-family: "Poppins", sans-serif; margin: 50px 0 0 0;}
.agenda .agenda_left .btn {margin: 60px 0 0 0;}
.agenda .agenda_left .btn:hover {background-color: transparent; box-shadow: 0 0 0 1px var(--color5); color: var(--color5);}

.agenda .agenda_right {width: 35%;}
.agenda .agenda_right > h3 {margin: 0 0 30px 0;}
.agenda .agenda_item {display: flex; flex-direction: column; border-bottom: 1px solid var(--color2); padding: 25px 0; font-family: "Poppins", sans-serif; font-weight: 300;}
.agenda .agenda_item > .date {font-weight: 700;}

/* =====================================
    Archive agenda
====================================== */

.archive_agenda {padding: 75px 0;}
.archive_agenda .agenda_item:first-child {padding: 0 0 25px 0;}
.archive_agenda .agenda_item {display: flex; flex-direction: column; border-bottom: 1px solid var(--color3); padding: 25px 0; font-family: "Poppins", sans-serif; font-weight: 300;}
.archive_agenda .agenda_item > .date {font-weight: 700;}

/* =====================================
    Nieuws
====================================== */

.nieuws {padding: 75px 0;}
.nieuws .maxw {display: flex; flex-wrap: wrap;}
.nieuws .items {display: flex; flex-wrap: wrap; margin: 75px -15px 0 -15px; width: calc(100% + 30px); padding: 0 0 75px 0;}
.nieuws .items .item:nth-child(1) {margin: 0 15px;}
.nieuws .items .item:nth-child(2) {margin: 0 15px;}
.nieuws .items .item {width: calc(50% - 30px); margin: 30px 15px 0 15px; border-radius: var(--borderradius); background-size: cover; background-position: center; position: relative; display: flex; min-height: 250px;}
.nieuws .items .item.margin {margin: 0 15px 30px 15px;}
.nieuws .items .item .overlay {width: 100%; display: flex; transition: 0.3s ease; flex-direction: column; justify-content: flex-end; padding: 150px 50px 40px 50px; color: var(--color5); border-radius: var(--borderradius);}
.nieuws .items .item:not(.default-bg) .overlay {background: linear-gradient(to right, rgba(4, 31, 60, 1), rgba(0, 0, 0, 0.561) 45%); border-radius: var(--borderradius);}
.nieuws .items .item.default-bg .overlay {background-color: rgb(4, 31, 60, 0.97); border-radius: var(--borderradius);}
.nieuws .items .item .overlay > .date {font-weight: 300; font-family: "Poppins", sans-serif; margin: 0 0 10px 0; font-size: 13px;}
.nieuws .items .item .overlay > h2 {margin: 0 0 10px 0;}
.nieuws .items .item .overlay > p {font-weight: 300; font-family: "Poppins", sans-serif; margin: 0 0 25px 0;}
.nieuws .items .item .overlay > .more {font-family: "Poppins", sans-serif; font-size: 15px; margin: 0;}
.nieuws .items .item:hover .overlay > .date,
.nieuws .items .item:hover .overlay > h2,
.nieuws .items .item:hover .overlay > p,
.nieuws .items .item:hover .overlay > .more {transform: translateY(-15px);}
/* =====================================
    Call-To-Action
====================================== */

.call_to_action {color: var(--color5); font-weight: 500;}
.call_to_action .overlay {padding: 50px 0;}
.call_to_action .overlay .maxw {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.call_to_action .call_left {max-width: 45%;}
.call_to_action .call_right {font-weight: 300; font-size: 18px; font-family: "Poppins", sans-serif;}
.call_to_action .call_right .item {margin: 5px 0 0 0;}
.call_to_action .call_right .item i {margin: 0 15px 0 0;}
.call_to_action .call_right .btns {margin: 23px 0 0 0;}
.call_to_action .call_right .btns .btn {padding: 10px 25px;}
.call_to_action .call_right .btns .btn.btn_transparant:hover {color: #000;}

/* =====================================
    Bestuursleden
====================================== */

.bestuurslid {margin: 30px 0 0 0; border-radius: var(--borderradius);}	
.bestuurslid:first-child {margin: 0 0 0 0;}
.bestuurslid .overlay {padding: 30px; color: var(--color5); display: flex; flex-wrap: wrap;}
.bestuurslid .overlay > .left {width: 50px;}
.bestuurslid .overlay > .left >  i {font-size: 23px; font-weight: 300;}

.bestuurslid .overlay > .right {width: calc(100% - 50px); font-family: "Poppins", sans-serif;}
.bestuurslid .overlay > .right .naam {font-weight: 700; font-size: 20px; margin: 0 0 15px 0; font-family: 'Sofia Pro', sans-serif;}
.bestuurslid .overlay > .right .flex {display: flex; flex-wrap: wrap;}
.bestuurslid .overlay > .right .flex > div:first-child {margin: 0 30px 0 0;}
.bestuurslid .overlay > .right span {font-weight: 700;}
.bestuurslid .overlay > .right .beschrijving {margin: 15px 0 0 0; font-size: 15px;}


/* =====================================
    Bedrijvigheid
====================================== */

.bedrijvigheid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;  margin: 20px 0 0 0;}
.bedrijvigheid > div {border: 1px solid var(--color3); border-radius: var(--borderradius); padding: 10px; text-align: center; vertical-align: top; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.bedrijvigheid img {max-width: 100%; height: auto; max-height: 100px; border-radius: var(--borderradius);}
.bedrijvigheid > div .beschrijving_bedrijvigheid {text-align: left; font-weight: 500; margin: 10px 0 0 0; width: 100%;}
.bedrijvigheid > div .beschrijving_bedrijvigheid a {color: var(--color3); text-decoration: underline;}

/* =====================================
    Contact block, contactpagina | (content_left)
====================================== */

.contact_block .overlay {background-repeat: no-repeat; background-size: cover; background-position: center; padding: 35px; color: var(--color5); border-radius: var(--borderradius); font-weight: 300; font-family: "Poppins", sans-serif;}
.contact_block .h3 {font-size: 25px;}
.contact_block p {margin: 25px 0 0 0; font-size: 16px;}
.contact_block b {font-weight: 700;}

/* =====================================
    Footer
====================================== */

footer {background-color: var(--color2);}
footer .maxw .logo {padding: 75px 0; width: 235px; display: block;}
footer .blocks {display: flex; flex-wrap: wrap; justify-content: space-between; font-weight: 300; font-family: "Poppins", sans-serif;}

footer .blocks .block .kop {font-weight: 700; color: var(--color6);}
footer .blocks .block .juridisch {margin: 25px 0 0 0;}
footer .bottom {padding: 60px 0 15px 0; font-size: 13px; font-weight: 300; font-family: "Poppins", sans-serif;}
footer .bottom a:last-child {font-weight: 700;}

/* =====================================
    Contactinstellingen
====================================== */

.wpcf7-form p {font-size: 13px;}
.wpcf7-text, .wpcf7-textarea {border: 1px solid var(--color3); border-radius: var(--borderradius); padding: 10px 15px; width: 100%; font-family: "Poppins", sans-serif;  font-size: 17px; margin: 0 0 15px 0; background-color: transparent; resize: none; max-width: 500px;}
.wpcf7-text:focus, .wpcf7-textarea:focus {outline: none;}
.wpcf7-text::placeholder, .wpcf7-textarea::placeholder {color: var(--color3); font-family: "Poppins", sans-serif; font-size: 17px;}
.wpcf7 .post-password-form input[type="button"], input[type="submit"] {padding: 6px 25px;background-color: var(--color3); color: var(--color1); margin: 0;  font-family: "Poppins", sans-serif; border: none; font-size: 17px; border-radius: var(--borderradius);}
.wpcf7 .post-password-form input[type="button"]:hover, input[type="submit"]:hover {background-color: transparent; box-shadow: 0 0 0 1px var(--color3); color: var(--color4)}

p[role="status"][aria-live="polite"] {display: none !important;}
span.wpcf7-not-valid-tip{display: none!important;}
[aria-invalid="true"]{border-color: red!important;}
div.wpcf7-response-output{width: 100%; margin: 10px 0 0!important; color: var(--color4);}
div.wpcf7-response-output.wpcf7-validation-errors{color: red;}
.wpcf7-list-item-label {margin: 0 0 0 5px!important;}

/* =====================================
    Responsive
====================================== */

@media screen and (max-width: 1230px) {
    .navbar nav ul > li {font-size: 17px;}
}

@media screen and (max-width: 1100px) { 

body {font-size: 15px;}
h1, .h1 {font-size: 35px; font-weight: 700;}
h2, .h2 {font-size: 33px; font-weight: 700;}
h3, .h3 {font-size: 25px; font-weight: 700;}
h4, .h4 {font-size: 23px; font-weight: 700;}
h5, .h5 {font-size: 20px; font-weight: 700;}
h6, .h6 {font-size: 15px; font-weight: 700;}

    .bestuurslid .overlay > .right .beschrijving {font-size: 15px;}

.header_content.frontpage .h1 {font-size: 45px;}
.navbar nav {display: none;}
#mobile-menu-toggle {display: flex; gap: 10px; z-index: 100000; align-items: center; background-color: var(--color3); padding: 8px; border-radius: var(--borderradius); color: #ffffff;}
#mobile-menu-toggle > div {font-weight: 400; font-size: 14px;}
    .call_to_action .call_right {font-size: 16px;}
}

@media screen and (max-width: 1000px) {
.header_content.page .page_header h1 {font-size: 40px;}
.content .content_left {width: 100%}
.content .content_right {width: 100%; margin: 75px 0 0 0; display: flex; justify-content: center;}
.content .content_right > img {width: 100%; max-width: 100%;}

.agenda .agenda_left {width: 100%; max-width: 100%;}
.agenda .agenda_left .text {margin: 25px 0 0 0;}
.agenda .agenda_right {width: 100%; margin: 75px 0 0 0;}

.nieuws .items {width: calc(100%); margin: 0 0 0 0;}
.nieuws .items .item:first-child {margin: 0 0 0 0;}
.nieuws .items .item {width: calc(100%); margin: 15px 0 0 0;}
.nieuws .items .item:nth-child(1) {margin: 50px 0 0 0;}
.nieuws .items .item:nth-child(2) {margin: 15px 0 0 0;}

.call_to_action .call_left {width: 100%; max-width: 65%;}
.call_to_action .call_right {width: 100%; margin: 30px 0 0 0;}

footer .blocks .block:first-child {margin: 0;}
footer .blocks .block {width: 100%; margin: 35px 0 0 0;}
footer .bottom {padding: 50px 0 15px 0; font-size: 11px;}

.content .contact_block {width: 100%;}
.icoontjes_header_frontpage {width: 230px;}
.icoontjes_header_page {width: 150px;}
    .icoontjes_rij {width: 275px;}

}

@media screen and (max-width: 800px) {
    .icoontjes_header_frontpage {width: 185px;}
    .bedrijvigheid {grid-template-columns: repeat(2, 1fr);}
}


@media screen and (max-width: 650px) {
    .navbar .logo {width: 150px;}
    footer .maxw .logo {width: 150px;}

    h1, .h1 {font-size: 32px; font-weight: 700;}
    h2, .h2 {font-size: 28px; font-weight: 700;}
    h3, .h3 {font-size: 24px; font-weight: 700;}
    h4, .h4 {font-size: 20px; font-weight: 700;}
    h5, .h5 {font-size: 17px; font-weight: 700;}
    h6, .h6 {font-size: 15px; font-weight: 700;}
    .breadcrumbs {font-size: 13px;}
    .header_content.page .page_header h1 {font-size: 32px;}
    body {font-size: 15px;}
    .bestuurslid .overlay > .right .beschrijving {font-size: 15px;}
    .btn {padding: 12px 16px;}
    .overlay {padding: 50px 0;}
    .nieuws {padding: 50px 0;}
    .content {padding: 50px 0;}
    footer .maxw .logo {padding: 50px 0;}
    .nieuws .items {padding: 0 0 50px 0;}
    .content .content_right {margin:50px 0 25px 0px;}
    .content .contact_block .h3 {font-size: 22px;}
    .content .contact_block p {font-size: 15px;}

    .topbar a {font-size: 10px;}
    .header_content .overlay {padding: 75px 0;}
    .header_content.page > .overlay {padding: 75px 0;}
    .header_content.frontpage .h1 {font-size: 40px;}
    .header_content.frontpage p {max-width: 75%;}
    .header_content.front_page .btns {margin: 30px 0 0 0;}
    .call_to_action .call_left {max-width: 100%;}
    .navbar {padding: 18px 0;}

    .icoontjes_header_frontpage {width: 150px;}
    .icoontjes_header_page {width: 100px;}

    .nieuws .items .item .overlay {padding: 120px 35px 35px 35px;}

    .wpcf7-text::placeholder, .wpcf7-textarea::placeholder {font-size: 15px;}
    .wpcf7-text, .wpcf7-textarea {padding: 7px 14px;}
    .wpcf7 .post-password-form input[type="button"], input[type="submit"] {font-size: 15px;}
}

@media screen and (max-width: 480px) {
    .bedrijvigheid {grid-template-columns: 1fr;}
    .bedrijvigheid img {max-height: 80px;}
    .icoontjes_header_frontpage {display: none;}
    .header_content.frontpage p {max-width: 100%; font-size: 15px;}
    .header_content.frontpage div {margin: 0 0 2px 0;}
    .agenda .agenda_left div {margin: 0 0 2px 0;}
    .call_to_action .call_left div {margin:  0 0 2px 0;}

}

@media screen and (max-width: 420px) {
    .topbar a:nth-child(1) {display: none;}
    .topbar a:nth-child(2) {display: none;}
    .header_content.frontpage .h1 {font-size: 35px;}
    .call_to_action .call_right {font-size: 15px;}
    .icoontjes_rij {width: 175px;}
    .bestuurslid .overlay > .left {width: 100%; margin: 0 0 30px 0;}
    .bestuurslid .overlay > .right {width: calc(100%);}
}

@media screen and (max-width: 370px) {.icoontjes_header_page {display: none;}}