/*
Theme Name:     Tecnilab
Description:    Theme for Tecnilab
Author:         AudienceFirst
Author URI:     https://audience.nl/
Version:        1.0
License:        GNU General Public License v2 or later
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:    tecnilab
*/

@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/Poppins-Bold.ttf");
  font-weight: 700;
}

@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/Poppins-BoldItalic.ttf");
  font-style: italic;
}

@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/Poppins-Medium.ttf");
  font-weight: 600;
}

@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/Poppins-SemiboldItalic.ttf");
  font-style: italic;
}

@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/Poppins-Regular.ttf");
  font-weight: 400;
}

@font-face {
  font-family: "Poppins";
  src: url("assets/fonts/Poppins-Light.ttf");
  font-weight: 300;
}

@font-face {
  font-family:"Poppins";
  src:url("assets/fonts/Poppins-LightItalic.ttf");
  font-style: italic;
}

@font-face {
  font-family:"TitilliumWeb";
  src:url("assets/fonts/TitilliumWeb-SemiBold.ttf");
  font-weight: 600;
}

@font-face {
  font-family:"TitilliumWeb";
  src:url("assets/fonts/TitilliumWeb-Light.ttf");
  font-weight: 300;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
  font-weight: 600;
}

body {
  font-family: "Poppins";
  color: #4B4B4B;
  background-color: #ffffff;
}

body p{
  font-family: "TitilliumWeb";
  font-weight: 300;
}

a {
  color: #4B4B4B;
  text-decoration: none;
}

a:hover {
  color: #4B4B4B;
  text-decoration: underline;
}

b, strong {
  font-weight: 600;
}

img {
  max-width: 100%;
}

h1, h2, h3, h4, h5 {
  color: #282828;
  position: relative;
  font-family: "TitilliumWeb";
}

p{
  line-height: 1.5;
}

.site-content h1:before,
.site-content h2:before,
.site-content h3:before,
.site-content h4:before,
.site-content h5:before,
.footer-form h2:before {
  content: "";
  position: absolute;
  width: 40px;
  height: 3px;
  top: -10px;
  background: linear-gradient( to right, #7da571 25%, #00959e 25% 50%, #ea515b 50% 75%, #494948 75% 100% );
  background-repeat-x: no-repeat;
  background-size: 100%;
}

.top-row-menu {
  background-color: #FAFAFA;
}

.top-row-menu a {
  padding: 5px 0;
  font-size: 14px;
  display: inline-block;
}

.site-header #top-menu,
.site-header #main-menu {
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: 32px;
}

@media only screen and (max-width: 1199px) {
  .site-header #main-menu{
    gap: 20px;
  }
}

.site-header #top-menu {
  gap: 24px;
}

.site-header .top-row-menu ul li a {
  font-family: "TitilliumWeb";
  font-weight: 300;
  font-size: 14px;
  display: flex;
  align-items: center;
  height: 36px;
}

.site-header ul li a {
  font-family: "TitilliumWeb";
  font-weight: 300;
  font-size: 18px;
}

.site-header ul li a:hover {
  color: #000000;
  text-decoration: underline;
}

.site-header ul li.current_page_item a {
  font-weight: 600;
}

.site-branding {
  padding: 20px 0;
}

body .site-logo{
  display: flex;
}

body .site-logo img {
  max-width: inherit;
  height: 40px;
  width: 100%;
}

.site-header .main-menu-container {
  height: 100%;
}


.banner-content {
  background-color: #f5f5f5;
}

.smaller-banner-content {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  max-height: 480px;
}

.smaller-banner-content img {
  height: auto;
  object-fit: cover;
  aspect-ratio: 16/9;
  object-fit: cover;
  flex-grow: 1;
}

.services-banner-content {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  max-height: 480px;
  width: 100%;
}

.services-banner-content picture{
  width: 100%;
}

.services-banner-content img {
  height: auto;
  object-fit: cover;
  aspect-ratio: auto;
  object-fit: cover;
  flex-grow: 1;
  width: 100%;
}

.services-banner-content .btn-label{
  padding: 4px 10px;
  position: absolute;
  right: 16px;
  bottom: 16px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 300;
  font-family: "TitilliumWeb";
}

.btn-label.biomedisch{
  background-color: #7CA571 !important;
}

.btn-label.farmaceutisch{
  background-color: #00959E !important;
}

.btn-label.gezondheidszorg{
  background-color: #EA515A !important;
}

.btn-label.biosafety{
  background-color: #4B4B4B !important;
}

.banner-content .carousel.slide,
.banner-content .carousel-inner,
.banner-content .carousel-item {
  height: 100%;
}

.banner-content .carousel-item {
  background-repeat: no-repeat;
  background-position: center right;
  padding: 8rem 0;
}

.banner-content .column-right {
  position: absolute;
  height: 100%;
  left: auto;
  right: 0;
  top: 0;
  bottom: 0;
}

.banner-content .column-right img {
  max-width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  object-fit: cover;
  height: 100%;
}

.banner-content .column-right:before {
  content: "";
  background: linear-gradient(90deg, #f5f5f5 10%, rgba(255,255,255,0) 100%);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 20%;
  z-index: 1;
}

.carousel-indicators [data-bs-target] {
  border: 1px solid #212529;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-left: 5px;
  margin-right: 5px;
}

.carousel-indicators button.active {
  background-color: #212529;
}

body .carousel-indicators{
  z-index: 2;
  margin-bottom: 2rem;;
}

.carousel-item-inner{
  width: 100%;
  max-width: 452px;
}

.carousel-item-inner h2 {
  position: relative;
  margin-bottom: 2rem;
  font-family: "TitilliumWeb";
  font-weight: 300;
}

.carousel-item-inner h2:before {
  content: "";
  position: absolute;
  width: 40px;
  height: 3px;
  top: -20px;
  background: linear-gradient( to right, #7da571 25%, #00959e 25% 50%, #ea515b 50% 75%, #494948 75% 100% );
  background-repeat-x: no-repeat;
  background-size: 100%;
}

.carousel-item-inner p {
  font-size: 20px;
  line-height: 1.5;
  font-family: "TitilliumWeb";
  font-weight: 300;
}

.btn-holder .btn {
  background-color: #282828;
  display: inline-block;
  border-radius: 0;
  box-shadow: none;
  padding: 10px 15px;
}

.btn-holder .btn:hover{
  text-decoration: underline;
}

.btn-holder .btn{
  color: #ffffff;
  font-size: 16px;
  font-weight: 300;
  font-family: "TitilliumWeb";
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.btn-holder .btn svg{
  transform: rotate(90deg);
  fill: #ffffff;
  width: 12px;
  transform: rotate(90deg);
  margin-right: 0px;
}

.btn-holder .btn:after {
  /* content: "";
  margin-left: 20px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #fff;
  display: inline-block;
  left: 0;
  position: relative;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out; */
}

.btn-holder .btn:hover:after {
  /* left: 4px; */
}

.breadcrumbs #crumbs,
.breadcrumbs span.current{
  color: #282828;
  font-family: "TitilliumWeb";
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
}

.breadcrumbs a{
  color: #282828;
  font-family: "TitilliumWeb";
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
}

section {
  margin-top: 2rem;
  margin-bottom: 3rem;
}

section:last-of-type {
  margin-bottom: 0rem;
}

section.icons-section {
  margin-top: 8rem;
  margin-bottom: 0rem;
}

section.icons-section .row{
  row-gap: 2rem;
}

.icons-section .section-inner {
  width: 100%;
  max-width: 320px;
  margin: auto;
}

.icons-section img {
  max-width: 68px;
  margin: 0 auto;
  display: block;
  margin-bottom: 1rem;
}

.icons-section strong {
  color: #282828;
  font-family: "TitilliumWeb";
  font-weight: 600;
  font-size: 18px;
  line-height: 1.5;
}

.icons-section p {
  font-family: "TitilliumWeb";
  font-size: 16px;
  line-height: 1.5;
  font-weight: 300;
  display: block;
  margin-bottom: 0rem;
  margin-top: 0.8rem;
}

section.vier-pijlers {
  margin-top: 8rem;
  margin-bottom: 0rem;
}

.vier-pijlers .column{
  margin-top: 0rem;
}

.vier-pijlers .column picture{
  position: relative;
  height: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.vier-pijlers .column picture::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(rgba(40, 40, 40, 0), rgba(40, 40, 40, 0), rgba(40, 40, 40, 0.48));
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 1;
  display: block;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.vier-pijlers .column picture::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  display: block;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.vier-pijlers .column picture span{
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  color: #ffffff;
  font-family: "TitilliumWeb";
  font-size: 16px;
  line-height: 1.5;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - 40px);
  z-index: 1;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.vier-pijlers .column:hover picture span,
.vier-pijlers .column:focus picture span{
  text-decoration: underline;
}

.vier-pijlers .column:hover picture span svg,
.vier-pijlers .column:focus picture span svg{
  margin-right: -4px;
}

.vier-pijlers .column picture span svg{
  fill: #ffffff;
  width: 12px;
  transform: rotate(90deg);
  margin-right: 0px;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.vier-pijlers .column picture img {
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: center center;
  background-repeat: no-repeat;
  position: relative;
  width: 100%;
  height: auto;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.vier-pijlers .column:hover picture::before,
.vier-pijlers .column:focus picture::before{
  opacity: 0;
}

.vier-pijlers .column.block-0 picture::after{
  opacity: 0;
  background-color: #7ca571;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.vier-pijlers .column.block-0:hover picture::after,
.vier-pijlers .column.block-0:focus picture::after{
  opacity: 0.8;
  background-color: #7ca571;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.vier-pijlers .column.block-1 picture::after{
  opacity: 0;
  background-color: #00959e;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.vier-pijlers .column.block-1:hover picture::after,
.vier-pijlers .column.block-1:focus picture::after{
  opacity: 0.8;
  background-color: #00959e;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.vier-pijlers .column.block-2 picture::after{
  opacity: 0;
  background-color: #ea515a;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.vier-pijlers .column.block-2:hover picture::after,
.vier-pijlers .column.block-2:focus picture::after{
  opacity: 0.8;
  background-color: #ea515a;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.vier-pijlers .column.block-3 picture::after{
  opacity: 0;
  background-color: #4b4b4b;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.vier-pijlers .column.block-3:hover picture::after,
.vier-pijlers .column.block-3:focus picture::after{
  opacity: 0.8;
  background-color: #4b4b4b;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

/* .vier-pijlers h3 {
  text-align: left;
  font-weight: 600;
} */

.banner-wrapper h1 {
  font-weight: 300;
}

.home .vier-pijlers h2 {
  text-align: center;
}

.vier-pijlers h3 span {
  font-weight: 300;
}

.vier-pijlers .column-wrapper{
  display: flex;
  flex-wrap: wrap;
  row-gap: 2rem;
}

.vier-pijlers a:hover .column-inner:before {
  opacity: 1;
}

.vier-pijlers a .column-inner:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  -webkit-transition: all .3s ease-in;
  transition: all .3s ease-in;
}

.vier-pijlers .column-inner {
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 380px;
  position: relative;
}

.vier-pijlers .column-inner span {
  position: absolute;
  bottom: 20px;
  left: 30px;
  right: 30px;
  color: #ffffff;
  font-weight: 600;
  justify-content: space-between;
  display: inline-flex;
  align-items: center;
}

section.latest-news {
  margin-top: 8rem;
}

.latest-news .row{
  row-gap: 24px;
}

.latest-news .row .column{
  margin-top: 0rem;
}

.latest-news h3 {
  font-weight: 600;
  margin-bottom: 0px;
}

.latest-news h3:before{
  display: none;
}

.latest-news h3 span {
  font-weight: 300;
}

.latest-news .alle-nieuws {
  text-decoration: underline;
  margin-left: auto;
  align-self: center;
  font-family: "TitilliumWeb";
}

.latest-news a:hover {
  text-decoration: none;
}

.latest-news .featured-image-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
  display: flex;
}

.latest-news .featured-image {
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: center center;
  background-repeat: no-repeat;
  position: relative;
  width: 100%;
  height: auto;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.latest-news a:hover .featured-image {
  transform: scale(1.05);
}

.latest-news .btn-label {
  padding: 4px 10px;
  position: absolute;
  right: 14px;
  bottom: 14px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 300;
  font-family: "TitilliumWeb";
}

.latest-news .column-inner {
  box-shadow: 1px 1px 8px #dfdfdf;
  height: 100%;
}

.latest-news .blog-info .date {
  color: #757575;
  display: block;
  font-size: 14px;
  font-family: "TitilliumWeb";
  font-weight: 300;
  margin-bottom: 8px;
}

.latest-news .blog-info .title {
  color: #000000;
  display: block;
  font-family: "TitilliumWeb";
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.latest-news .blog-info p {
  font-family: "TitilliumWeb";
  display: block;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: #575757;
  margin-bottom: 0px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.latest-news a:hover .blog-info .title {
  text-decoration: underline;
}

section.page-content {
  margin-top: 2rem;
  margin-bottom: 4rem;
}

.page-content h2 {
  margin-bottom: 1.5rem;
}

.page-content.over-ons h2:before {
  right: 50%;
}

.page-content.over-ons .section-inner {
  padding: 0 10rem;
}

.col-vacatures .row{
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
}

.search-item,
.col-vacatures .vacature-item {
  padding: 20px;
  border: 0.5px solid #dfdfdf;
  box-shadow: 0px 0px 2px #dfdfdf;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.col-vacatures > .search-item:last-child{
  margin-bottom: 0px !important;
}

.col-vacatures a:hover,
.col-vacatures a:focus{
  text-decoration: none;
}

.col-vacatures a:hover h2,
.col-vacatures a:focus h2{
  text-decoration: underline;
}

.col-vacatures a:hover span,
.col-vacatures a:focus span{
  text-decoration: none;
}

.vacature-item__left h2:before{
  display: none;
}

.col-vacatures a:hover .vacature-item__left span,
.col-vacatures a:focus .vacature-item__left span{
  text-decoration: none;
}

.vacature-item__right{
  svg{
    transform: rotate(90deg);
    fill: #4B4B4B;
    width: 12px;
    transform: rotate(90deg);
    margin-right: 0px;
  }
}

.col-vacatures .search-item a{
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

.col-vacatures .search-item__left p{
  margin-bottom: 0px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.col-vacatures .search-item__right{
  svg{
    transform: rotate(90deg);
    fill: #4B4B4B;
    width: 12px;
    transform: rotate(90deg);
    margin-right: 0px;
  }
}

.search-item:hover,
.col-vacatures .vacature-item:hover {
  box-shadow: 0px 0px 10px #dfdfdf;
}

.search-item .title,
.col-vacatures .vacature-title {
  color: #282828;
  margin-bottom: .8rem;
  font-family: "TitilliumWeb";
  font-weight: 600;
}

.search-item .title:before{
  display: none;
}

.search-item span,
.col-vacatures span {
  font-family: "TitilliumWeb";
  font-weight: 300;
  font-size: 16px;
  margin-right: 10px;
}

.search-item span svg,
.col-vacatures span svg {
  margin-right: 5px;
}

.single-biomedisch h1,
.single-biomedisch h2,
.single-biomedisch h3,
.single-gezondheidszorg h1,
.single-gezondheidszorg h2,
.single-gezondheidszorg h3,
.single-biosafety h1,
.single-biosafety h2,
.single-biosafety h3,
.page-template-template-services h1,
.page-template-template-services h2,
.page-template-template-services h3,
.page-template-template-services h4,
.page-template-template-services h5 {
  color: #7CA571;
}

.single-farmaceutisch h1,
.single-farmaceutisch h2,
.single-farmaceutisch h3,
.single-farmaceutisch h4,
.single-farmaceutisch h5,
.page-content.farmaceutisch h1,
.page-content.farmaceutisch h2,
.page-content.farmaceutisch h3,
.page-content.farmaceutisch h4,
.page-content.farmaceutisch h5 {
  color: #00959e;
}

.single-gezondheidszorg h1,
.single-gezondheidszorg h2,
.single-gezondheidszorg h3,
.single-gezondheidszorg h4,
.single-gezondheidszorg h5,
.page-content.gezondheidszorg h1,
.page-content.gezondheidszorg h2,
.page-content.gezondheidszorg h3,
.page-content.gezondheidszorg h4,
.page-content.gezondheidszorg h5 {
  color: #ea515b;
}

.single-biosafety h1,
.single-biosafety h2,
.single-biosafety h3,
.single-biosafety h4,
.single-biosafety h5,
.page-content.biosafety h1,
.page-content.biosafety h2,
.page-content.biosafety h3,
.page-content.biosafety h4,
.page-content.biosafety h5 {
  color: #494948;
}

.page-template-template-nieuws h1,
.page-template-template-services h1,
.page-template-template-werken-bij h1{
  margin-bottom: 2.4rem;
}

.distributeur-list .column-inner {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 20px;
}

.page-template-template-services .site-header {
  background-color: #fafafa;
}

.page-template-template-werken-bij .site-content {
  padding-bottom: 4rem;
}

.single .site-header-wrapper:after,
.page-template-template-werken-bij .site-header-wrapper:after,
.page-template-template-services .site-header-wrapper:after {
  content: "";
  height: 450px;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  transform: skewY(5deg);
  background-color: #fafafa;
  top: -20px;
}

.sidebar .wp-block-group__inner-container {
  margin-bottom: 1.5rem;
}

.sidebar h2 {
  font-size: 1.3rem;
  line-height: 1;
  margin-bottom: 0;
  padding: 25px 30px;
}

.sidebar h2 a {
  color: #ffffff;
  display: flex;
  align-items: center;
  position: relative;
  gap: 2rem;
}

.sidebar h2:before {
  display: none;
}

.sidebar ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  padding-bottom: 10px;
}

.sidebar ul li a {
  color: #ffffff;
}

.sidebar ul.menu li a {
  padding: 8px 30px;
  display: block;
}

.sidebar ul.menu li.menu-item-has-children {
  position: relative;
}

.sidebar ul.menu li.menu-item-has-children:after {
  /* content: "\f0da";
  position: absolute;
  top: 10px;
  right: 30px;
  color: #ffffff;
  font-family: 'FontAwesome'; */

  content: "";
  position: absolute;
  top: 14px;
  right: 30px;
  background: url(assets/img/chevron-right-white.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain !important;
  border: 0;
  outline: 0;
  padding: 0;
  width: 12px;
  height: 12px;
}

.sidebar ul.menu > li.menu-item-has-children .sub-menu li.menu-item-has-children:after {
  right: 0;
}

.sidebar ul.menu li a,
.sidebar ul.sub-menu li a,
.sidebar ul.menu li.menu-item-has-children > a {
  font-weight: 300;
  font-family: "TitilliumWeb";
  font-weight: 300;
  font-size: 16px;
}

.sidebar ul.submenu li,
.sidebar ul.submenu ul{
  width: calc(100% - 10px);
}

.sidebar ul.menu li.menu-item-has-children > a{
  position: relative;
}

.sidebar ul.menu li > a:first-of-type{
  font-weight: 600;
}

.sidebar .sub-menu li a{
  font-weight: 300 !important;
}

.sidebar ul.sub-menu li {
  margin-left: 30px;
  margin-right: 30px;
}

.sidebar ul.sub-menu li a {
  padding-left: 0;
  padding-right: 0;
  font-weight: 400;
  border-bottom: 1px solid;
}

.sidebar ul.sub-menu li ul.sub-menu li {
  margin-left: 0;
  margin-right: 0;
}

.sidebar ul.sub-menu li ul.sub-menu li a {
  font-weight: 400;
  padding-left: 15px;
}

.sidebar ul#menu-biomedisch li a {
  background-color: #68905f;
}

.sidebar ul#menu-biomedisch li ul li a {
  background-color: #7ca571;
}

.sidebar ul#menu-biosafety li a {
  background-color: #282828;
}

.sidebar ul#menu-biosafety li ul li a {
  background-color: #4b4b4b;
}

.sidebar ul#menu-gezondheidszorg li a {
  background-color: #ab2931;
}

.sidebar ul#menu-gezondheidszorg li ul li a {
  background-color: #ea515a;
}

.sidebar ul#menu-farmaceutisch li a {
  background-color: #017981;
}

.sidebar ul#menu-farmaceutisch li ul li a {
  background-color: #00959e;
}

.sidebar .widgettitle a:after {
  content: "";
  position: absolute;
  right: 0;
  background: url(assets/img/chevron-right-white.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain !important;
  border: 0;
  outline: 0;
  padding: 0;
  width: 12px;
  height: 12px;
}

.sidebar .widgettitle a.collapsed:after {
  content: "";
}

.single .site-content {
  padding-bottom: 5rem;
}

.single .andere-suggesties {
  margin-bottom: 2rem;
}

.andere-suggesties .featured-image {
  min-height: 220px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.andere-suggesties a {
  display: block;
}

.andere-suggesties a.btn-green {
  color: #ffffff;
  background-color: #7CA571;
  display: block;
  text-align: center;
  border-radius: 0;
  box-shadow: none;
  padding: 10px 15px;
  margin-bottom: 1rem;
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s,visibility .3s;
}

.andere-suggesties .column-inner:hover a.btn-green {
  opacity: 1;
  visibility: visible;
}

section.contact .contact-wrapper {
  padding: 6rem 4rem;
  margin-bottom: 4rem;
  background-color: #ffffff;
  box-shadow: 1px 1px 8px #dbdbdb;
}

.contact-wrapper .icon {
  margin-right: 1rem;
}

.contact-wrapper .address .justify-content-between {
  flex-grow: 1;
  font-weight: 600;
  color: #282828;
}

.contact-wrapper .address p.tel,
.contact-wrapper .address p.email {
  margin-bottom: 0;
}

.contact-wrapper .icon img {
  max-width: 42px;
}

section.section404 {
  padding-bottom: 0rem;
}

section.section404 h1 {
  font-size: 4rem;
  color: #4B4B4B;
}

section.section404 h3 {
  color: #4B4B4B;
  line-height: 1.5;
  margin-bottom: 2rem;
}

section.section404 h3:before {
  display: none;
}

section.section404 ul {
  margin-top: 1rem;
}

ul.page-numbers {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
}

ul.page-numbers li {
  border: 1px solid #dfdfdf;
  line-height: 1;
  margin: 0 5px;
  min-width: 35px;
  text-align: center;
}

ul.page-numbers li span,
ul.page-numbers li a {
  padding: 10px;
  display: block;
}

ul.page-numbers li span.current{
  color: #212529;
  background-color: #fafafa;
}

ul.page-numbers li:hover {
  color: #212529;
  background-color: #dfdfdf;
}

.site-footer {
  background-color: #fafafa;
  padding-top: 4rem;
  padding-bottom: 4rem;
  position: relative;
  margin-top: 150px;
}

.site-footer:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  top: -120px;
  left: 0;
  right: 0;
  min-height: 120px;
  background-color: #fafafa;
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

.footer-main {
  margin-top: 0rem;
  z-index: 2;
  position: relative;
}

.site-footer .footer-column:first-of-type img {
  height: 52px;
  width: auto;
}

.site-footer .footer-columns .row{
  row-gap: 2rem;
}

.site-footer .footer-columns a {
  color: #575757;
  font-family: "TitilliumWeb";
  font-size: 18px;
  line-height: 1.7;
  font-weight: 300;
}

.site-footer .footer-columns a:hover {
  text-decoration: underline;
}

.site-footer h2,
.site-footer h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 2rem;
  color: #040404;
}

.site-footer h3 {
  color: #282828;
}

.site-footer h2.before-text {
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 2rem;
}

.site-footer h2.before-text span {
  font-weight: 300;
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin-bottom: 0rem;
}

.site-footer p{
  font-family: "TitilliumWeb";
  font-size: 18px;
  line-height: 1.7;
  font-weight: 300;
  margin-bottom: 0rem;
  color: #575757;
}

.copyright {
  margin-top: 3rem;
  color: #575757;
  font-family: "TitilliumWeb";
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
}

.copyright a{
  color: #575757;
  font-family: "TitilliumWeb";
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
}

.footer-form {
  margin-top: 0rem;
  margin-bottom: 4rem;
  z-index: 2;
  position: relative;
}

.footer-form .wpcf7 .form-inner {
  padding: 6rem 4rem;
  background-color: #ffffff;
  box-shadow: 1px 1px 8px #dbdbdb;
}

.footer-form .wpcf7-form-control-wrap {
  width: 100%;
  max-width: 100%;
  margin-bottom: 1rem;
  display: inline-block;
}

.footer-form svg {
  position: absolute;
  z-index: 2;
  margin-top: 10px;
  font-size: .8rem;
}

.wpcf7 button, 
.wpcf7 input, 
.wpcf7 optgroup, 
.wpcf7 select, 
.wpcf7 textarea {
  max-width: 100%;
  padding: 5px 5px 5px 20px;
  outline: none;
  border: 0;
  border-bottom: 1px solid #575757;
   font-size: 18px;
  line-height: 1.5;
  font-family: "TitilliumWeb";
  font-weight: 300;
}

.wpcf7 form.invalid .wpcf7-response-output, 
.wpcf7 form.unaccepted .wpcf7-response-output, 
.wpcf7 form.payment-required .wpcf7-response-output{
  font-size: 18px;
  line-height: 1.5;
  font-family: "TitilliumWeb";
  font-weight: 300;
}

.wpcf7-not-valid-tip{
  font-size: 18px;
  line-height: 1.5;
  font-family: "TitilliumWeb";
  font-weight: 300;
  margin-top: 1rem;
  display: block;
}

.wpcf7 textarea {
  width: 100%;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus {
  border-bottom: 1px solid #282828;
}

.wpcf7 .btn-holder .btn {
  order: 1;
}

.wpcf7-spinner {
  margin: 10px;
  margin-left: auto;
}

#desktop-menu {
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#mobile-menu-wrapper {
  display: none;
  height: 100%;
  justify-content: end;
  position: relative;
}

.mobile-menu-handle {
  padding: 10px 0;
  color: #fff;
  align-self: center;
}

.mobile-menu-handle button {
  background: url(assets/img/menu.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain !important;
  border: 0;
  outline: 0;
  color: #282828;
  padding: 0;
  width: 24px;
  height: 24px;
}

.mobile-menu-handle button:not(.collapsed) {
  background: url(assets/img/close.svg);
  background-repeat: no-repeat;
}

.mobile-menu-handle button svg {
  visibility: hidden;
}

.mobile-menu-container {
  position: absolute;
  background: #fff;
  z-index: 3;
  width: 100%;
  max-width: 320px;
  padding: 20px;
  top: 100%;
  margin-top: 0px;
  box-shadow: 0px 0px 10px #dfdfdf;

}

.mobile-menu-container:before {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #4B4B4B;
  position: absolute;
  top: -10px;
  right: 0px;
}

.mobile-menu-container h1 {
  display: block;
  margin-bottom: 20px;
}

.mobile-menu-container button {
  position: absolute;
  top: 20px;
  right: 20px;
  color: #a2adb8;
  border: 0;
  font-size: 22px;
  z-index: 2;
  background: transparent;
}

.mobile-menu-container ul {
  list-style: none;
  padding: 0;
  display: block;
}

.mobile-menu-container ul li {
  position: relative;
  display: block;
  border-bottom: 1px solid #d1d6dc;
}

.mobile-menu-container ul li .sub-menu-wrapper {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  -webkit-transition: opacity .3s,visibility .3s;
  transition: opacity .3s,visibility .3s;
}

.mobile-menu-container ul li.show > .sub-menu-wrapper.lvl-0,
.mobile-menu-container ul li.show > .sub-menu-wrapper.lvl-1 {
  opacity: 1;
  visibility: visible;
  position: relative;
}

.mobile-menu-container ul li.menu-item-has-children .dropdown-btn {
  position: absolute;
  top: 4px;
  right: 0;
}

.mobile-menu-container ul li.menu-item-has-children .dropdown-btn:after {
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-weight: 700;
  font-size: 18px;
  color: #a2adb8;
}

.mobile-menu-container ul li.menu-item-has-children.show > .dropdown-btn:after {
  content: "\f107";
}

.lvl-0 li a {
  padding-left: 10px;
}

.lvl-1 li a {
  padding-left: 20px;
}

.mobile-menu-container ul li.show .sub-menu li:last-of-type {
  border-bottom: 0;
}

.mobile-menu-container ul li a {
  color: #4B4B4B;
  display: block;
  padding: 10px 0;
  font-size: 18px;
  line-height: 1.5;
  font-family: "TitilliumWeb";
  font-weight: 300;
}

.mobile-menu-container ul li.current-menu-item a {
  font-weight: 600;
}

#searchform {
  position: relative;
  margin-left: 30px;
  width: 180px;
}

#searchform input[type="text"] {
  color: #4B4B4B;
  border: 1px solid #4B4B4B;
  padding: 4px 10px;
  border-radius: 0;
  outline: 0;
  width: 100%;
  font-family: "TitilliumWeb";
  font-size: 18px;
  line-height: 1.5;
  font-weight: 300;
}

.searchform button[type="submit"] {
  background: url(assets/img/search.svg);
  background-repeat: no-repeat;
  background-position: center;
  color: #282828;
  border-radius: 50%;
  font-size: 1.2rem;
  width: 38px;
  height: 100%;
  align-items: center;
  justify-content: center;
  border: 0;
  position: absolute;
  right: 0;
  z-index: 2;
  border: 0;
}

.searchform button[type="submit"] svg {
  visibility: hidden;
}

.mobile-menu-container #searchform {
  width: 100%;
  margin-left: 0;
  margin-bottom: 15px;
}

.mobile-menu-container .searchform button[type="submit"] {
  top: 0;
}

section.page-content{
  font-family: "TitilliumWeb";
  font-size: 18px;
  line-height: 1.5;
  font-weight: 300;
  color: #575757;
}

section.page-content:last-of-type{
  margin-bottom: 0rem;
}



@media (max-width: 992px){
  #desktop-menu {
    display: none;
  }

  .page-template-template-nieuws h1,
  .page-template-template-services h1,
  .page-template-template-werken-bij h1{
    margin-bottom: 1.8rem;
  }

  .mobile-menu-container.in {
    opacity: 1;
    visibility: visible;
    left: 0;
    top: 0;
    position: fixed;
    width: 60%;
    background: #fff;
    z-index: 10;
    bottom: 0;
    overflow-y: scroll;
    margin-top: 0;
  }

  #mobile-menu-wrapper {
    display: flex;
  }

  .mobile-menu-container .sub-menu-wrapper.lvl-0 {
    opacity: 0;
    visibility: hidden;
    position: absolute;
  }

  .banner-content {
    /* height: 450px; */
    /* min-height: 450px; */
  }

  .banner-content .column-right:before {
    content: "";
    background: linear-gradient(90deg, #f5f5f5 10%, rgba(255,255,255,0) 100%);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1;
  }

  .smaller-banner-content,
  .services-banner-content {
    max-height: 400px;
  }

  .banner-content .carousel-item{
    padding: 6rem 0rem;
  }

  .carousel-item .column-left {
    z-index: 2;
  }

  .carousel-item .column-left,
  .carousel-item .column-right {
    width: 100%;
  }

  .vier-pijlers .column {
    width: 50%;
  }

  /* .footer-column {
    width: 50%;
  } */

  .footer-columns {
    width: 100%;
  }

  .page-content.over-ons .section-inner {
    padding: 0;
  }

  .page-template-template-services .column-left,
  .page-template-template-services .column-right {
    width: 100%;
  }

  .distributeur-list .col-md-3 {
    width: 33%;
  }

  .main-row-menu .left-col {
    width: 30%;
  }

  .main-row-menu .right-col {
    width: 70%;
  }

  section.contact .contact-wrapper {
    padding: 4rem 2rem;
  }

  section.contact .contact-wrapper .btn-holder {
    margin-bottom: 6rem;
  }

  .footer-form .wpcf7 .form-inner {
    padding: 4rem 2rem;
  }

  .site-footer h2,
  .site-footer h3 {
    margin-bottom: 1rem;
  }

  .site-footer .footer-column figure{
    margin-bottom: 3rem;
  }

  /* SECTIONS */
  section.icons-section,
  section.vier-pijlers,
  section.latest-news{
    margin-top: 6rem;
    margin-bottom: 0rem;
  }

  .sidebar-inner{
    margin-top: 4rem;
  }
}

@media (max-width: 576px){
  .banner-content {
    /* height: 350px; */
    /* min-height: 350px; */
  }

  .banner-content .column-right:before {
    content: "";
    background: linear-gradient(90deg, #f5f5f5 10%, rgba(255,255,255,0) 100%);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1;
  }

  .smaller-banner-content,
  .services-banner-content {
    max-height: 320px;
  }

  .banner-content .carousel-item{
    padding: 4rem 0rem;
  }

  .carousel-item .column-left {
    padding: 0 2rem;
  }

  .vier-pijlers .column {
    width: 100%;
  }

  .footer-column {
    width: 100%;
  }

  .distributeur-list .col-md-3 {
    width: 50%;
  }

  .main-row-menu .left-col {
    width: 40%;
  }

  .main-row-menu .right-col {
    width: 60%;
  }

  #mobile-menu-wrapper {
    position: unset;
  }

  .mobile-menu-container {
    top: 110px;
    left: 0;
    right: 0;
    max-width: 100%;
  }

  .col-vacatures .row {
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
  }

  .footer-form .wpcf7 .form-inner {
      padding: 4rem 2rem;
  }
}