/*
 Theme Name:     Brandeniers
 Theme URI:      Brandeniers.nl
 Description:    Brandeniers Child Theme
 Author:         Brandeniers
 Author URI:     Brandeniers.nl
 Template:       Divi
 Version:        1.0.1
*/

/* =Theme customization starts here
------------------------------------------------------- */

#page-container #et-boc h1 {
  font-size: 55px;
  line-height: 1.2;
}
#page-container #et-boc h2 {
  font-size: 55px;
  line-height: 1.2;
}
#page-container #et-boc h3 {
  font-size: 30px;
  line-height: 1.2;
}

#page-container #et-boc h4 {
  font-size: 21px;
  color: #b15d46;
  line-height: 1.2;
}

#page-container #et-boc .tekst-kolom h1 {
  padding-bottom: 20px;
}
#page-container #et-boc .tekst-kolom h2 {
  padding-bottom: 20px;
}
#page-container #et-boc .tekst-kolom h3 {
  padding-bottom: 20px;
}
#page-container #et-boc .footer-sectie-sitemap h4,
#page-container #et-boc .tekst-kolom h4 {
  padding-bottom: 25px;
}

@media all and (max-width: 980px) {
  #page-container #et-boc h1 {
    font-size: 35px;
  }
  #page-container #et-boc h2 {
    font-size: 35px;
  }
  #page-container #et-boch3 {
    font-size: 25px;
  }

  #page-container #et-boc h4 {
    font-size: 17px;
  }
}

/*---buttons---*/
@media all and (min-width: 1800px) {
  #page-container #et-boc .inline-buttons {
    display: flex;
    justify-content: flex-end;
  }
}
@media all and (min-width: 981px) {
  #page-container #et-boc .inline-buttons {
    text-align: right;
  }
}

#page-container #et-boc .inline-buttons .et_pb_button_module_wrapper {
  display: inline-block;
}
@media all and (min-width: 600px) {
  #page-container
    #et-boc
    .inline-buttons
    .et_pb_button_module_wrapper:nth-child(2) {
    margin-left: 12px;
  }
}

#page-container .inline-buttons2 .et_pb_code,
#page-container .inline-buttons2 .et_pb_button_module_wrapper {
  display: inline-block !important;
}

@media all and (min-width: 981px) {
  #page-container .indicatie-knop {
    position: absolute;
    top: 0px;
    left: 220px;
  }
}
@media all and (max-width: 980px) {
  #page-container .indicatie-knop {
    margin-top: 12px;
  }
}

#page-container #et-boc .knop-bruin {
  background-color: #463934;
  border-color: #463934;
}

/*----header sectie----*/

#page-container #et-boc .klever-menu-sectie {
  border-top: 8px solid;
  border-color: #63836e;
}

#page-container #et-boc .header-achterliggend {
  min-height: 30vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* menu-cta */
#page-container #et-boc .menu-cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#page-container #et-boc .et_pb_menu__menu li.menu-cta {
  padding-left: 50px;
}

#page-container #et-boc .menu-cta a {
  color: white !important;

  padding: 0.5em 1.5em !important;
  height: 43px;
  background-color: #b15d46;
}

#page-container #et-boc .et_pb_module .mobile_menu_bar:before {
  color: white !important;
  background-color: #463934f0 !important;
}

/*mega-men*/

#page-container #et-boc .et_pb_menu__menu .mega-menu-parent > ul {
  background-color: #463934f0 !important;
  border: none;
  border-radius: 0px 0px 10px 10px;
  margin-top: -43px;
}

#page-container #et-boc .et_pb_menu__menu .mega-menu-parent li {
  background: transparent !important;
}

#page-container #et-boc .et_pb_menu__menu .mega-menu-parent > ul > li > ul {
  background: transparent !important;
}

#page-container #et-boc .et_pb_menu__menu .mega-menu-parent li a {
  color: white !important;
  font-size: 16px;
  margin-left: 34px;
}

#page-container #et-boc .verbergen > a {
  display: none;
}

#page-container #et-boc .et_pb_menu__menu .mega-menu-parent li:before {
  content: "";
  background-image: url(/wp-content/uploads/2023/09/elementje-voor-groen.svg);
  width: 25px;
  height: 25px;
  border-radius: 100%;
  display: inline-block;
  background-size: contain;
  position: absolute;
  margin-top: 8px;
  margin-left: 1.1em;
  background-repeat: no-repeat;
}

#page-container #et-boc .producten-overzicht ul {
  column-count: 2;
  padding-top: 1.6em;
}

@media all and (max-width: 1150px) {
  #page-container #et-boc .producten-overzicht ul {
    column-count: 2;
  }
}

@media all and (max-width: 800px) {
  #page-container #et-boc .producten-overzicht ul {
    column-count: 1;
    margin-left: 0px !important;
    padding-left: 0 !important;
  }

  #page-container #et-boc .home-hero {
    aspect-ratio: 2 / 1!important;
    display: flex!important;
    flex-direction: column!important;
    justify-content: space-between!important;
    object-fit: cover!important;
    background-size: cover !important;
	  background-position: top;
  }
}

#page-container #et-boc .producten-overzicht li {
  list-style: none;
  padding-bottom: 1.5em;
  display: flex;
}
#page-container #et-boc .producten-overzicht li h4 {
  display: flex;
  align-content: center;
  flex-direction: column;
  justify-content: center;
  margin-left: 11px;
}

/*
#page-container #et-boc .producten-overzicht li a:before {
    content: "";
    background-image: url(/wp-content/uploads/2023/09/elementje-voor.svg);
    width: 35px;
    height: 36px;
   
    display: inline-block;
    background-size: contain;
    position: relative;
    margin-block: -12px;
    margin-left: -3em;
    background-repeat: no-repeat;
}
*/

/*seo producten*/

#page-container #et-boc .seo-sectie ul {
  column-count: 3;
  list-style: none;
}

@media all and (min-width: 480px) and (max-width: 980px) {
  #page-container #et-boc .seo-sectie ul {
    column-count: 2;
  }
}
@media all and (max-width: 479px) {
  #page-container #et-boc .seo-sectie ul {
    column-count: 1;
  }
}

/* product-categorie-overzicht */

.product-categorie-overzicht > div {
  background-color: white;
  border-radius: 10px;

  padding-bottom: 2em;
}

.product-categorie-overzicht > div img {
  border-radius: 10px 10px 0px 0px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

#page-container
  #et-boc
  .product-categorie-overzicht
  > div
  .et_pb_module:not(.et_pb_image) {
  padding: 0 2em;
}

/*--loophekken afwijkende pagina--

.tax-product-categorie.term-loophekken .producten-grid .dp-dfg-more-button {
  display: none;
}

.tax-product-categorie.term-loophekken .producten-grid .dp-dfg-item  {
  pointer-events: none;
  cursor: initial;

}
-*/

/*---hang sluit cta ----*/

#page-container #et-boc .hang-sluit-cta-tekst {
  display: none;
}

.product-categorie-hekwerk-en-afrastering
  #page-container
  #et-boc
  .hang-sluit-cta-tekst,
.product-categorie-slagbomen #page-container #et-boc .hang-sluit-cta-tekst,
.product-categorie-tuinbanken #page-container #et-boc .hang-sluit-cta-tekst,
.product-categorie-hang-sluitwerk
  #page-container
  #et-boc
  .hang-sluit-cta-tekst {
  display: block;
}

.product-categorie-hekwerk-en-afrastering
  #page-container
  #et-boc
  .product-cta-tekst,
.product-categorie-slagbomen #page-container #et-boc .product-cta-tekst,
.product-categorie-tuinbanken #page-container #et-boc .product-cta-tekst,
.product-categorie-hang-sluitwerk #page-container #et-boc .product-cta-tekst {
  display: none;
}

/*-----Footer-----*/

#page-container #et-boc .footer-sectie-sitemap > div:nth-child(1) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  flex-direction: row;
  justify-content: center;
}

@media all and (min-width: 981px) {
  #page-container #et-boc .footer-slagzin {
    text-align: right;
  }
}

#page-container #et-boc .copyright-div a {
  color: white;
}

#page-container #et-boc .footer-producten-lijst ul {
  padding: 0;
  list-style: none;
}

/*---tekst-afb-sectie----*/

#page-container #et-boc .tekst-afb-rij > .afb-kolom img {
  border-radius: 10px;
  max-width: 100%;
  min-width: 100%;
}
#page-container #et-boc .tekst-afb-rij > .afb-kolom .et_pb_image_wrap {
  width: 100%;
}

@media all and (max-width: 980px) {
  /*** wrap row in a flex box ***/
  #page-container #et-boc .tekst-afb-rij {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
    flex-wrap: wrap;
  }

  /*** custom classes that will designate the order of columns in the flex box row ***/
  #page-container #et-boc .tekst-afb-rij > .tekst-kolom {
    -webkit-order: 1;
    order: 1;
    margin-bottom: 30px;
  }

  #page-container #et-boc .tekst-afb-rij > .afb-kolom {
    -webkit-order: 2;
    order: 2;
  }
}

/*----Home -----*/
#page-container #et-boc .home-hero {
	aspect-ratio: 4 / 1;
  display: flex;
	object-fit: cover;
  flex-direction: column;
  justify-content: space-between;
}

#page-container #et-boc .header-groene-blok {
  margin-bottom: 0px;
}

header .has_et_pb_sticky .klever-menu-sectie {
  filter: drop-shadow(0 0 0.75rem rgba(99, 131, 110, 0.5));
}

/*---Producten----*/
.page-id-367 #reguliere-cta,
.page-id-178 #reguliere-cta,
.page-id-557 #reguliere-cta,
.page-id-560 #reguliere-cta,
.single-producten #reguliere-cta {
  display: none;
}

#page-container #et-boc .pagination-item a {
  background-color: #463934;
  color: white;
}
#page-container #et-boc .pagination-item.active a {
  background-color: #fff;
  color: #463934;
}

#page-container #et-boc .dp-dfg-layout-grid .dp-dfg-image,
#page-container #et-boc .dp-dfg-layout-grid .dp-dfg-overlay {
  margin: 0 -2em;
}

#page-container #et-boc .dp-dfg-layout-grid .dp-dfg-item {
  padding: 0 2em;
}

#page-container #et-boc span.dfg_et_overlay:before {
  content: "";
  background-image: url(/wp-content/uploads/2023/10/klever-beeld-groen.svg);
  width: 80px;
  height: 80px;
  display: block;
  position: absolute;
  z-index: 100;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

#page-container #et-boc .dp-dfg-item {
  border-radius: 10px;
}
#page-container
  #et-boc
  .producten-grid
  .et_pb_button_wrapper.read-more-wrapper {
  text-align: left;
}

#page-container #et-boc .lees-meer-knop-categorie,
#page-container #et-boc .producten-grid .dp-dfg-more-button {
  background: transparent;
  color: #63836e;
  font-size: 14px;
  border: none;
  border-bottom: 1px solid #63836e;
}

#page-container #et-boc .producten-grid .dp-dfg-more-button:after {
  top: -1px;
}

.et-db #et-boc .et-l .product-categorie-overzicht .et_pb_button:hover:after {
  top: -1px;
}

#page-container #et-boc .dp-dfg-items h3 {
  font-size: 20px;
}

#page-container #et-boc .dp-dfg-items {
}
#page-container #et-boc .dp-dfg-image img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  min-width: 100%;
  max-width: 100%;
}

/*----Projecten----*/

#page-container #et-boc .dp-dfg-filter-link {
  background-color: #463934;
  color: white;
}

#page-container #et-boc .dp-dfg-filter-link.active {
  color: #463934;
  background-color: white;
}

#page-container #et-boc .dp-dfg-header.entry-header {
  margin-top: 9px;
}

#page-container #et-boc .taxonomy-project_tag:before {
  content: "Locatie: ";
}

/*----contact-----*/

.emailtje,
.telefoontje,
.adresje,
.kvktje {
  margin-left: 30px;
  margin-bottom: 15px;
}
.telefoontje:before,
.emailtje:before,
.adresje:before {
  content: "";
  display: block;
  position: absolute;
  background-repeat: no-repeat;
  width: 22px;
  height: 1.5em;
  background-size: contain;
  margin-left: -30px;
  margin-top: 4px;
  background-position: center top;
}
.adresje:before {
  background-image: url(/wp-content/uploads/2023/09/location-pin.svg);
}
.emailtje:before {
  background-image: url(/wp-content/uploads/2023/09/Group-2842.svg);
}
.telefoontje:before {
  background-image: url(/wp-content/uploads/2023/09/iconmonstr-phone-3-1.svg);
}

/*---gravity forms ----*/

.gform_body input.text,
.gform_body input.title,
.gform_body input[type="email"],
.gform_body input[type="password"],
.gform_body input[type="tel"],
.gform_body input[type="text"],
.gform_body select,
.gform_body textarea {
  color: #000 !important;
  border-color: #fff;
  border-bottom: 1px solid #63836e;
  background: white;
  padding: 14px;
  width: 100%;
}

#page-container #et-boc .gform_button.button {
  float: right;
  background: #b15d46;
  border: 1px solid #b15d46;

  font-style: normal;
  text-transform: none;
  text-decoration: none;
  padding: 0.3em 2em !important;
  font-size: 18px;
  color: white;
  line-height: 1.7em !important;

  cursor: pointer;
  transition: all 300ms ease 0ms;
}
#gform_submit_button_1:hover {
  transform: scale(1.1);
}
#page-container .gform_footer {
  justify-content: flex-end;
  padding-top: 40px;
}

#gform_wrapper_1 .gform_fields .gfield input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #fff;
  font-style: italic;
}
#gform_wrapper_1 .gform_fields .gfield input::-moz-placeholder {
  /* Firefox 19+ */
  color: #fff;
  font-style: italic;
}
#gform_wrapper_1 .gform_fields .gfield input:-ms-input-placeholder {
  /* IE 10+ */
  color: #fff;
  font-style: italic;
}
#gform_wrapper_1 .gform_fields .gfield input:-moz-placeholder {
  /* Firefox 18- */
  color: #fff;
  font-style: italic;
}

::-moz-selection {
  /* Code for Firefox */
  color: #fff;
  background: #63836e;
}

::selection {
  color: #fff;
  background: #63836e;
}

.et_pb_bg_layout_dark ::-moz-selection {
  /* Code for Firefox */
  color: #fff;
  background: #463934;
}

.et_pb_bg_layout_dark ::selection {
  color: #fff;
  background: #463934;
}

/** Custom module flickity slider **/
.flickity-viewport {
  min-height: 150px;
}

.carousel-nav {
  padding-bottom: 27px;
}
.flickity-button-icon {
  width: 14px !important;
  left: 50% !important;
  transform: translateX(-50%);
}
.flickity-button {
  border-radius: 0 !important;
  height: 50px !important;
  width: 50px !important;
  top: -75px !important;
  color: #63836e !important;
  background: transparent;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}
.flickity-prev-next-button.next {
  right: -20px !important;
  background: url(/wp-content/uploads/2023/09/elementje-voor.svg) !important;
}
.flickity-prev-next-button.previous {
  left: -20px !important;

  background: url(/wp-content/uploads/2023/09/elementje-voor-2.svg) !important;
}
.brandeniers-slider {
  margin: auto;
}
.carousel-slide {
  width: 100%;
}

.flickity-button-icon {
  opacity: 0;
}

.flickity-slider {
  display: flex;
  justify-content: flex-start;
  padding-top: 40px;
}
.carousel-main .flickity-slider {
  padding-top: 0;
}
.carousel-nav {
}
.carousel-nav button {
  display: none;
}
.carousel-cell h1 {
  padding: 0;
}

/*
  .carousel-nav__item {
    background: url(/wp-content/uploads/2023/09/klevertje.svg);
    background-size: cover;
    position: relative;
    text-decoration: none;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    padding: 10px;
    width: 100px;
    height: 100px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-image 0.3s ease-in-out;
    margin-right: 185px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  @media all and (min-width: 981px) {
  .carousel-nav__item:not(:first-child):before {
    display: block;
    content: "";

    position: absolute;
    width: 85px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    top: 50%;
    transform: translateY(-50%);
    left: -100%;
    transform: translateX(20%);
    background-position: center;
  }
}


  .carousel-nav__item.is-selected {
    background: url(/wp-content/uploads/2023/09/klevertje-wit.svg);
    background-size: cover;
    position: relative;
    filter:drop-shadow(0px 0px 20px rgb(255, 255, 255, 0.6));
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }*/
.carousel-grid-container {
  display: flex;
  margin: auto;
}
.carousel-grid-col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  margin: 15px;
}

@media all and (max-width: 980px) {
  .carousel-grid-container {
    flex-direction: column;
  }
  .carousel-nav__item {
    margin-right: 0px;
    width: 33%;

    height: 50px;
  }

  .flickity-viewport {
    min-height: 100px;
  }
  .flickity-button {
    top: -32px !important;
  }
}

.flickity-page-dots .dot {
  background: #63836e !important;
}

.carousel-grid-col img {
  border-radius: 10px;
  aspect-ratio: 16 / 9;
  width: 100%;
  object-fit: cover;
}

.flickity-page-dots {
  display: none;
}

.carousel-cell.carousel-nav__item {
  width: 100px;
}

.carousel-nav__item.is-selected h3 {
  color: white;
}

/* START: Collapse Divi Menu Module Submenus and Keep Parent Items Clickable on Mobile */
/* Parent menu item */
#page-container
  #et-boc
  .et_pb_module
  .et_mobile_menu
  .menu-item-has-children.clickable,
#page-container
  #et-boc
  .et_pb_module
  .et_mobile_menu
  .menu-item-has-children
  > a {
  position: relative;
}
/* Parent menu item icon */
#page-container
  #et-boc
  .et_pb_module
  .et_mobile_menu
  .menu-item-has-children:not(.clickable)
  > a:after,
#page-container
  #et-boc
  .et_pb_module
  .et_mobile_menu
  .menu-item-has-children.clickable
  > span.parent_icon:after {
  font-family: "ETmodules";
  text-align: center;
  speak: none;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
}
/* Disabled parent menu item icon positioning */
#page-container
  #et-boc
  .et_pb_module
  .et_mobile_menu
  .menu-item-has-children:not(.clickable)
  > a:after {
  position: absolute;
  top: 13px;
  right: 10px;
}
/* Clickable parent menu item icon */
#page-container
  #et-boc
  .et_pb_module
  .et_mobile_menu
  .menu-item-has-children.clickable
  > span.parent_icon {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  align-items: center;
  position: absolute;
  width: 46px;
  height: 46px;
  background: #63836e;
  color: white;

  right: 0;
  top: 0;
  z-index: 9;
}
/* Collapsed submenu parent menu item icon */
#page-container
  #et-boc
  .et_pb_module
  .et_mobile_menu
  .menu-item-has-children:not(.clickable)
  > a:after,
#page-container
  #et-boc
  .et_pb_module
  .et_mobile_menu
  .menu-item-has-children.clickable
  > span.parent_icon:after {
  content: "\33";
}
/* Expanded submenu parent menu item icon */
#page-container
  #et-boc
  .et_pb_module
  .et_mobile_menu
  .menu-item-has-children:not(.clickable).visible
  > a:after,
#page-container
  #et-boc
  .et_pb_module
  .et_mobile_menu
  .menu-item-has-children.clickable.visible
  > span.parent_icon:after {
  content: "\32";
}
/* Hide submenu by default */
#page-container #et-boc .et_pb_module .et_mobile_menu ul.sub-menu,
#page-container
  #et-boc
  .et-db
  #et-boc
  .et-l
  .et_pb_menu
  .et_mobile_menu
  > ul.sub-menu,
#page-container
  #et-boc
  .et-db
  #et-boc
  .et-l
  .et_pb_fullwidth_menu
  .et_mobile_menu
  > ul.sub-menu {
  display: none !important;
  visibility: hidden !important;
}
/* Show submenu */
#page-container #et-boc .et_pb_module .et_mobile_menu .visible > ul.sub-menu,
#page-container
  #et-boc
  .et-db
  #et-boc
  .et-l
  .et_pb_menu
  .et_mobile_menu
  .visible
  > ul.sub-menu,
#page-container
  #et-boc
  .et-db
  #et-boc
  .et-l
  .et_pb_fullwidth_menu
  .et_mobile_menu
  .visible
  > ul.sub-menu {
  display: block !important;
  visibility: visible !important;
}
/* END: Collapse Divi Menu Module Submenus and Keep Parent Items Clickable on Mobile */

#page-container #et-boc .et_mobile_menu {
  overflow-y: scroll;
  max-height: 80vh;
  border-top: 0px !important;
  background-color: #463934f0 !important;
}

#page-container #et-boc .et_mobile_menu ul {
  background: transparent !important;
}

#page-container #et-boc .et_mobile_menu a {
  color: white !important;
}

/* Responsive Table CSS */
/* Responsive Table CSS */
.responsive-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.responsive-table th,
.responsive-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.responsive-table th {
  background-color: #f2f2f2;
}

.responsive-table tr:nth-child(even) {
  background-color: #f9f9f9;
}

.responsive-table tr:hover {
  background-color: #ddd;
}

@media screen and (max-width: 600px) {
  .responsive-table thead {
    display: none;
  }

  .responsive-table tbody,
  .responsive-table tr,
  .responsive-table td {
    display: block;
    width: 100%;
  }

  .responsive-table tr {
    margin-bottom: 15px;
  }

  .responsive-table td {
    text-align: left;
    padding: 10px;
    border: none;
    border-bottom: 1px solid #ddd;
    position: relative;
  }

  .responsive-table td:before {
    content: attr(data-label);
    font-weight: bold;
    width: 100%;
    display: inline-block;
    margin-bottom: 5px;
  }
}