/*
Theme Name: Theme Webwerkplaats
Theme URI: http://www.webwerkplaats.nl
Description: Divi Child Theme by Webwerkplaats 
Author: Elegant Themes additions by Webwerkplaats
Author URI: http://www.elegantthemes.com
Template: Divi
Version: 1.0.0
*/

@import url("../Divi/style.css");
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400&family=Roboto&display=swap');

/* Site Wide: Bepalen welk Lettertype voor de H en de P */
h1, h2, h3 {overflow-wrap: normal;font-family: 'PT Serif', serif;}
h4, h5, h6, p {overflow-wrap: normal;font-family: 'Roboto', sans-serif;}

/* Site wide: Zet variabelen voor de kleuren.                     */
/* Wordt toegepast in H1 tm H6, de "Back to Top" knop, Menu_CTA Hoofdmenu knop, Footer */
:root {
  --hoofdkleur: #036238;
  --highlight: #2ba067;
  --zwart: #000000;
  --wit: #ffffff;
  --fontgrijs: #444444;
  --klikbaar: black;
  --menuback:#303030;
  --bullet1: #036238;
  --bullet2: #036238;
  --bullet3: #036238;
}


/* Inspringen naar rechts van alle List UL (30) of OL (10) */
.entry-content ol, .entry-content ul {
    padding: 30px 0px 30px 50px;
    list-style-position: outside;
}
 
.entry-content ol li, .entry-content ul li {
    margin-bottom: 10px;
}

/* --------------------Alle Navigatie Componenten --------------------------------------*/

/* schaduw onder main header weg */
#main-header, #main-header.et-fixed-header {
    -webkit-box-shadow: none!important;
    -moz-box-shadow: none!important;
    box-shadow: none!important;
}

/* ----------------- Hoofd Menu----------------- */
/* Class  menu_cta  voegt een Call to Action knop toe aan Divi Menu                      */
/* Bij Weergave>Menu's klik op menukeuze. Dan menu_cta invullen bij CSS Class (optioneel)*/
/* Als "CSS Class (optioneel)" niet zichtbaar is dan eerst aanzetten bij "schermopties"  */
.menu_cta {
background-color: var(--highlight);
color: var(--wit);
padding: 0 !important;
}
.menu_cta a {
color: var(--wit) !important;
padding: 15px 15px 15px 15px !important;
}

/* Vergrootglas zoek icon kleur */
  #et_search_icon {color: var(--hoofdkleur);}
  
/* ----------------- Mobiel menu----------------- */
/* Zet woord "MENU" voor de 3 hamburger streepjes */
#et_mobile_nav_menu:before {
    content: 'MENU';
    font-size: 14px;
    position: absolute !important;
    bottom: 29px;
    right: 35px;
    color: var(--menuback)!important;
}
/* Zet X om mobiel menu te sluiten als het hamburger menu op is */
.mobile_nav.opened .mobile_menu_bar:before {
 content: '\4d';
}

/* Terug naar boven knop uit op Mobiel. Kleiner dan 651px */
@media only screen and ( max-width: 651px ) {
  .et_pb_scroll_top{
    display:none !important;
  }
}

/* Terug naar boven knop aanpassen */
.et_pb_scroll_top.et-pb-icon.et-visible, .et_pb_scroll_top.et-hidden {
background: var(--hoofdkleur); /* verander de achtergrond kleur hier */
color: var(--wit); /* verander de kleur van het pijltje hier */
border: 2px solid var(--hoofdkleur); /* Hier kun je de boord breedte, stijl en kleur veranderen */
}

/* ------------------ Footer ------------------ */
/* footer bullets kleuren */
#footer-info a {
color: var(--hoofdkleur);
}
#footer-info a:hover {
color: var(--highlight)
opacity: 1 !important;
}
/* Footer bullets verwijderen behalve bij Woocommerce */
#footer-widgets .footer-widget li:before {
 display: none; 
} 
html #footer-widgets .footer-widget .et_pb_widget:not(.woocommerce) ul li {
 line-height: 26px; 
 padding-left: 0px; 
}
/* center the footer credits */
#footer-info {
	text-align: center;
	width: 100%;
}

/* ---------------- Verander Bullets in Divi tekens------*/
/* 360 ETThemes icons vind je hier: https://www.elegantthemes.com/blog/resources/elegant-icon-font */
.et_pb_text ul li {
    list-style-type: none;
}
 /* Eerste niveau van de lijst */
.et_pb_text ul li::before {
    font-family: 'ETmodules';
    content: "\52";
    font-size: 120%; /* enlarge the size of the icon */
    color: var(--bullet1)!important;
    float: left;
    margin-left: -1em;
    margin-right: 0.5em;
}

/* Tweede niveau van de lijst */
.et_pb_text ul li ul li:before {
    color:var(--bullet2)!important;
    content:"\4c";
}

/* Derde niveau van de lijst */
.et_pb_text ul li ul li ul li:before {
    color:var(--bullet3)!important;
    content:"\4b";
}

/* Aanpassen van de ruimte tussen de lijstens */
.et_pb_text ul li ul, 
.et_pb_text ul li ul li ul {
    margin-bottom:-1em;
}

/* ----------------------------- Einde standaard ----------------------------*/
/* Alle bewerkingen voor de beide top menu's */
.et_menu_container {width: 80%!important;
height: 50px;
position: relative;}

.et_menu_container:after {content: ”;
display: block;
position: absolute;
width: 80%;
top: -5px;
left: 0px;

/* schuin deel */
#top-header {
    background-image: linear-gradient(150deg,rgba(255,255,255,0.1) 55%,rgba(255,255,255,0.2) 25%);
}

/* top / secundair menu aanpassen */
#top-header .et-social-icons {
display: inline-block;
float: right;
}
 
.top-phone {
width: 95px!important;
}
 
.top-phone a {
color: blue!important;
font-size: 12px!important;
}
 
.top-phone:before {
font-family: 'ETmodules';
content: "\e090";
font-size: 12px;
float: left;
}
 
.top-email {
width: 125px!important;
}
 
.top-email a {
color: white!important;
font-size: 12px!important;
}
 
.top-email:before {
font-family: 'ETmodules';
content: "\e076";
font-size: 12px;
float: left;
}
 
.top-facebook {
width: 72px!important;
}
 
.top-facebook a {
color: white!important;
font-size: 12px!important;
}
 
.top-facebook:before {
font-family: 'ETmodules';
content: "\e093";
font-size: 12px;
float: left;
}
 
#top-header .et-social-icon a {
font-size: 14px;
background: white;
color: #3e007f;
padding: 5px;
border-radius: 25px;
margin-top: -3px;
height: 24px;
width: 24px;
}
 
#top-header .et-social-icons li {
margin-top: -2px;
margin-left: 5px;
}
 
#et-secondary-nav, #et-secondary-nav li {
display: inline-block;
margin-right: 15px;
}
 
@media only screen and (max-width: 980px) {
 
.top-phone {
width: 100%!important;
}
 
.top-email {
width: 100%!important;
}
 
.top-facebook {
width: 100%!important;
}
 
.top-phone:before {
color: white;
margin-top: 10px;
margin-right: 12px;
}
 
.top-email:before {
color: white;
margin-top: 10px;
margin-right: 12px;
}
 
.top-facebook:before {
color: white;
margin-top: 10px;
margin-right: 12px;
}
}

#top-menu li a {
background: #C1B2AB!important;
padding: 15px 20px;
border-radius: 3px;
}