/*
 Theme Name:   Zaan Primair
 Theme URI:    http://zaanprimair.nl/
 Description:  Thema voor Zaan Primair
 Author:       Jeroen Wiersma
 Author URI:   http://inbeeld.nl
 Template:     Divi
 Version:      1.2
 Tags:         Responsive, 2019, vacatures, 2025 responsive tabellen
*/


/*
Kleuren
Donkerblauw		#006ba3
Lichtblauw		#0080c2
Groen			#5ea736
Geel			#fdc000
Lichtoranje		#f6a745
Oranje			#ee8620
Lichtrood		#e4513f
Rood			#df2626
*/

body {font-size: 16px}
.et_pb_widget li a:hover {color: #0080c2;}
/* -- Standaard opmaak - Navigatie -- */
.et_header_style_centered #main-header .container {text-align: left;}
.et_header_style_centered #main-header .logo_container {margin-top:15px;}
.et_header_style_centered #main-header div#et-top-navigation {margin-top:30px;}
#main-header {
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 70%, #0080c2 70%, #0080c2 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 70%,#0080c2 70%,#0080c2 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ffffff 0%,#ffffff 70%,#0080c2 70%,#0080c2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#0080c2',GradientType=0 ); /* IE6-9 */}

#et_search_icon::before {color:#fff;}
span.et_close_search_field {color: #fff; padding-top: 5px;}

#main-header::after {content: "";display: block;height: 7px; background: url(/wp-content/themes/ZaanPrimair/zpbaan_kleurbaan.png);}
/*ul.top-menu .current_page_item a, #top-menu li.current-menu-ancestor > a {color: #fff !important;}
ul.submenu a {color: #0080c2 !important;}*/

#top-menu li a {color:rgba(255,255,255,0.7) !important;}
#top-menu li.current_page_item a, #top-menu li.current-menu-ancestor a {color:rgba(0,0,0,0.6) !important;}
#top-menu ul.sub-menu li a {color:rgba(0,61,92,0.9) !important;}

.et_header_style_centered .et-search-form input {top:66%}
.et-search-form input {background-color: rgba(255,255,255,0.2); padding: 5px; border-radius: 5px;}



#main-header .nav li ul {background-color: #fff !important; border-bottom: 2px solid #5ea736; border-top: 7px solid #5ea736;} /* bg mega-menu */
#top-menu li.mega-menu > ul > li > a:first-child {border-bottom: 0;}

/* Fullwidth Rows met headers home */
#header_home.et_pb_section 
	{padding-top: 0 !important;}
.et_pb_row.et_pb_row_fullwidth, .et_pb_specialty_fullwidth > .et_pb_row 
	{width: 100% !important; max-width: 100% !important;}
#slider_home .et_pb_slide_description 
	{width: auto; margin: 0; padding: 0%; padding-top: 0%; padding-bottom: 0%; max-width: 60%; text-align: left}
#slider_home .et_pb_slide_description .et_pb_slide_title 
	{font-weight: 500; font-size: 38px}
#slider_home .et_pb_text_overlay_wrapper {
    border-radius: 0;
    background: rgba(94,167,54,0.75);}  
#header_home {
    padding-bottom: 0;
    margin-bottom: -28px;}
    
/* 190906 width home slider */
.et_pb_slider .et_pb_container {max-width: 100%;max-height: 470px;}

    
/* -- blokkengrid home -- */
.blok_rood_top h4, 
.blok_blauw_top h4, 
.blok_oranje_top h4, 
.blok_groen_top h4, 
.blok_lichtrood_top h4, 
.blok_geel_top h4 {color:#fff;padding:15px;}

.blok_rood_top h4 {background: #df2626;}
.blok_blauw_top h4 {background: #0080c2;}
.blok_oranje_top h4 {background: #f6a745;}
.blok_groen_top h4 {background: #5ea736;}
.blok_geel_top h4 {background: #fdc000;}
.blok_lichtrood_top h4 {background: #e4513f;}
.blok_rood_top p, 
.blok_blauw_top p, 
.blok_oranje_top p, 
.blok_groen_top p,
.blok_lichtrood_top p, 
.blok_geel_top p, 
a.more-link {padding: 15px 15px 0 15px}    

.et_pb_number_counter .percent {height: 46px;}
.followicon::before {color: #fff; font-family: "ETmodules" !important; content: "\e0a0 \0020";padding-right:20px}
.tweeticon::before {color: #fff; font-family: "ETmodules" !important; content: "\e094 \0020";padding-right:20px}

.twittericon::before {color: #0080c2; font-family: "ETmodules" !important; content: "\e094 \0020";padding-right:8px; font-size:25px}
.facebookicon::before {color: #0080c2; font-family: "ETmodules" !important; content: "\e093 \0020";padding-right:8px; font-size:25px}
.linkedinicon::before {color: #0080c2; font-family: "ETmodules" !important; content: "\e09d \0020";padding-right:8px; font-size:25px}


/* reusable blurbs */
.ZPblock {padding:9%; box-shadow: 0px 12px 18px -6px rgba(0,0,0,0.3);border-radius: 5px}
.ZPblock:hover {box-shadow: 0px 0px 18px -6px rgba(0,0,0,0.3);}
.ZPblock h3, .ZPblock p {color:#fff}

/* nieuws */

.et_pb_widget_area_left .widget_recent_entries ul li {padding: 1em; border-bottom: 1px solid #c6d6f0; font-weight:600;}
.et_pb_widget_area_left .widget_recent_entries ul li::before {font-family: 'ETmodules' !important; ;content: '$'; padding-right: 1.5rem; font-weight: 600}
.et_pb_widget_area_left .widget_recent_entries .current-menu-item a {color: #3D89E7 !important; font-weight: 600}
.et_pb_widget_area_left .widget_recent_entries ul li:last-child {border-bottom: none;}

.et_pb_post .et_pb_section.et_pb_section_0.et_section_regular { padding-top: 0 !important;} /* aanpassen ruimte boven post */

/* nieuws home - april 2019 */
#grid_home .et_pb_post {margin-bottom: 20px; padding: 0 14px;}
.extranieuwshome p {display: none;}
.extranieuwshome a.more-link {display: none;}
.extranieuwshome article {margin-bottom: 0;}
    
    
    
/* -- Vacatures -- */    
#functie_vac h1, #functie_vac h2, #functie_vac h3 {color:#fff}
#functie_vac .et_pb_module.et_pb_text {margin-bottom: 5px;}
.fileupload {float: left;width: 50%;clear: none !important; margin-bottom: 2em;}
.home .category-vacature .post-content {display: none;} /* vacatures op home */
.home .category-vacature.et_pb_post {margin-bottom: 20px;}

/* -- Styling formulieren -- */

#sollicitatieformulier {padding-top:1px}
.gform_wrapper h3.gform_title {font-weight: 500 !important; font-size: 3em !important}
.gform_wrapper {background: rgba(0,128,194,0.12) !important;padding: 5%;}
ul.gform_fields {padding: 0 !important;}

/*** REMOVE LABEL ON FIELDS USING PLACEHOLDER - 211012 uitgezet ivm verdwijnen kopjes boven velden zonder placeholder ***/
/*.gform_wrapper .top_label .gfield_label,
.gform_wrapper .field_sublabel_below .ginput_complex.ginput_container label {
    display: none;
}*/

/*** FIELD STYLING ***/
.gform_wrapper ul.gform_fields li.gfield,
.gform_wrapper .top_label li.gfield.gf_right_half {
    padding-right: 0;
}
input[type=text],
textarea {
    background: rgba(0,128,194,0.05);
    border: none;
    border-bottom: 2px solid #006ba3;
    border-radius: 0;
    color: #006ba3 !important;
    font-weight: 700 !important;
    padding: 17px 15px !important;
}
/*** FIELD FOCUS STYLING ***/
input[type=text]:focus,
input.text:focus,
input.title:focus,
textarea:focus {
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .2);
}
/*** MESSAGE BOX TRANSITION ***/
.gform_wrapper textarea.medium {
    margin-top: 6px;
    height: 10em;
    transition: height .3s ease-out;
}
/*** MESSAGE BOX FOCUS HEIGHT ***/
.gform_wrapper textarea.medium:focus {
    height: 25em;
}
/*** BUTTON STYLING ***/
.gform_wrapper .gform_footer input.button,
.gform_wrapper .gform_footer input[type=submit] {
    width: 100%;
}
.gform_wrapper input[type="submit"] {
    cursor: pointer;
    font-weight: 500;
    padding: 9px 20px;
    border-radius: 0;
    background: #fff;
    color: #2ea3f2;
    border: 2px solid #006ba3;
    font-size: 20px !important;
}


/*** BUTTON HOVER STYLING ***/
.gform_wrapper input[type=submit]:hover {
    background: #006ba3;
    color: #2ea3f2;
}
/*** PLACEHOLDER ***/
::-webkit-input-placeholder {
    /* Chrome */
    color: rgba(255, 255, 255, 0.7) !important;
}
:-ms-input-placeholder {
    /* IE 10+ */
    color: rgba(255, 255, 255, 0.7) !important;
}
::-moz-placeholder {
    /* Firefox 19+ */
    color: rgba(255, 255, 255, 0.7) !important;
}
:-moz-placeholder {
    /* Firefox 4 - 18 */
    color: rgba(255, 255, 255, 0.7) !important;
}

body.et_pb_button_helper_class .et_pb_button {color:#0080c2 !important}

/* -- Footer info -- */
#footer-menu {font-size:13px}
#footer-menu .et_pb_column {margin-right: 4% !important; width: 16%;}
#footer-menu .et_pb_column ul {padding: 0 0 23px 0; list-style-type: none; }

#main-footer {background-color: #0080c2;font-size:13px; color:#fff;}
.footer-widget {width: 17% !important; margin-right: 3% !important;}
.footer-widget h4 {color:#fff;}

html, body {height: 100%}
#page-container {position: relative; min-height:100%; height: auto !important; height: 100%; padding-bottom: 54px;}
#footer-bottom {position: absolute; bottom: 0; width: 100%; height:54px;background-color: #000 !important;}
#footer-info { color: rgba(255,255,255,0.8); float: right; font-size: 0.8em; padding-bottom: 10px; text-align: left;}
#footer-info a {color: rgba(255, 255, 255, 0.8); font-weight: 400;}

.bottom-nav {text-align: center}
.bottom-nav li {font-weight:400}
.bottom-nav a {color: #f4e1c5;}
#et-footer-nav {color:rgba(89, 64, 53, 0.6); background-color: rgba(88, 63, 52, 0.85)}
    
::selection {
  background: #214080; /* WebKit/Blink Browsers */
  color:#84cfc6;
  padding-top:6px
}
::-moz-selection {
  background: #214080; /* Gecko Browsers */
  color:#84cfc6;
}


/* 250208 Verhalen van Medewerkers */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.et-blog-css-grid > div {display: block !important;}
}

@media only screen
and (min-width : 481px) {
.et-blog-css-grid > div {display: grid !important; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.et-blog-css-grid .et_pb_post {align-self: flex-start; padding: 15px;}
.et-blog-css-grid .entry-featured-image-url {padding-top: 70.25%;}
.et-blog-css-grid .entry-featured-image-url img {position: absolute;height: 100%; width: 100%; top: 0; object-fit: cover;}
}

/* responsive table 250901 Jeroen */
table.responsive {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

table.responsive th,
table.responsive td {
  padding: 12px 14px;
  border: 1px solid #e6e6e6;
  text-align: left;
  vertical-align: middle;
  font-size: 15px;
  line-height: 1.35;
}

/* Desktop headers */
table.responsive thead th {
  background: #f7f7f9;
  font-weight: 600;
}

/* Mobile override voor schermen <= 700px */
@media (max-width: 700px) {
  /* Verberg table head visueel maar houd voor screen readers */
  table.responsive thead {
    display: none;
  }

  /* Forceer block-layout zodat geen desktopregels doorlopen */
  table.responsive,
  table.responsive tbody,
  table.responsive tr,
  table.responsive th,
  table.responsive td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Maak elke rij tot 'card' */
  table.responsive tr {
    margin: 0 0 22px 0 !important;
    padding: 12px !important;
    border: 1px solid #e9eae9 !important;
    border-radius: 0px !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  /* Cel: label boven, content onder */
  table.responsive td {
    padding: 0 !important;/* reset */
    border: none !important;
    background: transparent !important;
  }

  /* Pseudo-label op eigen regel */
  table.responsive td::before {
    content: attr(data-label);
    display: block !important;/* eigen regel */
    font-weight: 700 !important;
    color: #111 !important;
    font-size: 14px !important;
    padding: 12px 12px 0px 0px !important; /* ruime padding rond label */
    background: transparent !important;
    line-height: 1.6em !important;
    box-sizing: border-box !important;
    white-space: normal !important;
  }

  /* Inhoudblok: zit onder het label, met ruime padding en goede wrap */
  table.responsive td > * {
    display: block !important;
    padding: 40px 12px 12px 12px !important;
    margin: 0 !important;
    color: #222 !important;
    font-size: 15px !important;
    line-height: 1.4em !important;
    overflow-wrap: break-word !important;
    word-break: break-all !important;
  }

  /* Zorg dat laatste cel geen extra scheidingslijn nodig heeft */
  table.responsive tr td:last-child {
    border-bottom: 0 !important;
  }

  /* Fallback labels via nth-child (tot 8 kolommen) — gebruikt wanneer data-label leeg */
  table.responsive tr td:nth-child(1)::before { content: "Naam school" !important; }
  table.responsive tr td:nth-child(2)::before { content: "Project" !important; }
  table.responsive tr td:nth-child(3)::before { content: "Locatie" !important; }
  table.responsive tr td:nth-child(4)::before { content: "Fase" !important; }

  /* Sterk tekst duidelijk houden */
  table.responsive td strong { font-weight: 700 !important; }
}
/* == Einde responsive table Jeroen == */

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
	#main-header {background:#fff;}
	#main-header::after {background: none}
	#slider_home .et_pb_slide_description {max-width: 99%}
	#functie_vac h1 {font-size: 30px}
	#functie_vac h2, .et_pb_post h2 {font-size: 26px}
	#functie_vac h3 {font-size: 22px}
	.category-vacature div.et_pb_section.et_pb_section_0 {background-color: rgba(0,128,194,0.78) !important} /*kleurverloop verwijderen*/
	.category-vacature div.et_pb_section.et_pb_section_0 {background-image: none !important} /*kleurverloop verwijderen*/
	.vcature_reageren .et_pb_row_1.et_pb_row {margin-right: 20px !important; margin-left: 20px !important;}
	.fileupload {width: 80%;}
}

@media (max-width: 980px) {
	.et_header_style_centered .mobile_nav .select_page {color:#fff;}
	.et_header_style_centered #main-header .mobile_nav {background-color: #0080c2;}
	
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}