@font-face {
  font-family: 'Aller';
  src: url('../fonts/Aller-Italic.woff2') format('woff2'),
        url('../fonts/Aller-Italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'Aller';
  src: url('../fonts/Aller-Light.woff2') format('woff2'),
        url('../fonts/Aller-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Aller';
  src: url('../fonts/Aller-LightItalic.woff2') format('woff2'),
        url('../fonts/Aller-LightItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Aller';
  src: url('../fonts/Aller-Bold.woff2') format('woff2'),
        url('../fonts/Aller-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Aller';
  src: url('../fonts/Aller-BoldItalic.woff2') format('woff2'),
        url('../fonts/Aller-BoldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: 'Aller';
  src: url('../fonts/Aller.woff2') format('woff2'),
        url('../fonts/Aller.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Aller Display';
  src: url('../fonts/AllerDisplay.woff2') format('woff2'),
        url('../fonts/AllerDisplay.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body { font-family: 'Aller'; font-size: 16px; font-weight: 300; font-style: normal; color: #222222; line-height: 28px; text-align: left;}

h1 { font-family: 'Aller'; font-size: 40px; font-weight: bold; font-style: normal; color: var(--primary-color); text-align: left; margin: 0 0 20px 0;}
h1:after { display: none;}
h2 { font-family: 'Aller'; font-size: 40px; font-weight: 300; font-style: normal; color: var(--secondary-color); text-align: center; margin-bottom: 40px;}
h2 span { font-weight: bold;}
h2:after { content: ''; display: block; width: 50px; height: 5px; background: var(--secondary-color); margin: 20px auto 20px auto;}
h3 { font-family: 'Aller'; font-size: 26px; font-weight: bold; font-style: normal; color: var(--primary-color); margin-bottom: 0px;}
h3:after { content: ''; display: block; width: 50px; height: 3px; background: var(--primary-color); margin: 15px 0 15px 0;}
h4 { font-family: 'Aller'; font-size: 20px; font-weight: bold; font-style: normal; color: var(--secondary-color); margin: 20px 0 10px 0;}

.btn { font-family: 'Aller'; font-size: 18px; font-weight: bold; padding: 6px 50px; border: 1px solid transparent; border-radius: 0; margin-top: 30px;}
.btn:hover { border: 1px solid transparent !important;}
.btn.btn-primary { color: var(--secondary-color) !important; background-color: transparent; border-color: var(--secondary-color) !important;}
.btn.btn-primary:after { font-family: "Font Awesome 5 Regular"; content: "\f178"; display: none;}
.btn.btn-primary svg { margin-left: 15px; font-size: 18px;}
.btn.btn-primary:hover { background-color: var(--secondary-color); border-color: var(--secondary-color); color: var(--white) !important;}

.container_banner { background: var(--secondary-color); font-size: 60px; font-weight: bold; color: var(--white); display: block; position: relative;}
.container_banner:after { content: ''; background: url(../images/pattern.svg); background-size: 6% auto; background-position: -50px -50px; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.15;}
.container_banner .container .col-md-12 { position: relative; min-height: 170px;}
.container_banner .container .col-md-12 .pagetitle { position: absolute; bottom: 7px; left: 15px;}

.container-fluid.content { padding: 50px 0;}
.container-fluid.content .row { padding: 0; display: flex; flex-wrap: wrap;}
.container-fluid.content .row .order-lg-1 { order: 1; }
.container-fluid.content .row .order-lg-2 { order: 2; }
.container-fluid.content .align-self-center { align-self: center;}

/*LISTITEM*/
.block.list.simplelist { margin: 0 -15px; display: flex; flex-wrap: wrap;}
.block.list.simplelist .item { border: 1px solid #eeeeee; margin-bottom: 30px;}
.block.list.simplelist .item .image { position: relative;}
.block.list.simplelist .item .image img { width: 100%;}
.block.list.simplelist .item .image .price { position: absolute; right: 10px; bottom: 10px; background: var(--secondary-color); padding: 5px 15px; font-weight: bold; color: var(--white);}
.block.list.simplelist .item .text { padding: 20px; min-height: 310px;}
.block.list.simplelist .item .text h3 { margin-top: 0; line-height: 30px; min-height: 80px;}
.block.list.simplelist .item .text a { color: var(--secondary-color); border: none;}
.block.list.simplelist .item .text a:hover { color: var(--secondary-color); border-bottom: 1px solid var(--secondary-color);}
.block.list.simplelist .item .text .write { color: var(--primary-color);}

.block.list.simplelist.blog .item .text { min-height: auto;}
.block.list.simplelist.blog .item .text h3 { font-size: 18px; line-height: 26px; min-height: 95px;}
.block.list.simplelist.blog .listitem .write { color: var(--secondary-color); font-style: italic; margin-bottom: 20px;}
.block.list.simplelist.blog .listitem .image img { width: 100%;}
.block.list.simplelist.blog .listitem .image .number { background: var(--secondary-color); padding: 15px 0; font-size: 24px; font-weight: bold; color: var(--white); width: 100%; text-align: center; margin-bottom: 20px;}

.block.list.simplelist.video .item .image .play { position: absolute; top: calc(50% - 22px); left: calc(50% - 19px); background: var(--secondary-color); width: 50px; padding: 11px 0; font-size: 24px; font-weight: bold; color: var(--white); text-align: center;}
.block.list.simplelist.video .item .text { min-height: 133px;}
.block.list.simplelist.video .item .text h3 { min-height: auto;}

/*PAGINA*/
.block.html .price { background: var(--secondary-color); padding: 15px 0; font-size: 24px; font-weight: bold; color: var(--white); display: block; width: 100%; text-align: center; margin-bottom: 20px;}
.block.list.person_uitgelicht { margin: 0 -15px;}
.block.list.person_uitgelicht .item img { width: 100%;}
.block.list.person_uitgelicht h4 { color: var(--primary-color); text-align: center; margin: 10px 0;}
.block.list.person_uitgelicht .btn.btn-primary { padding: 6px 0; width: 100%; margin-top: 0; font-weight: 300; color: var(--secondary-color);}
.block.list.person_uitgelicht .btn.btn-primary svg { margin-left: 0; margin-right: 5px;}
.block.list.person_uitgelicht .btn.btn-primary svg:nth-child(2) { display: none !important;}
.block.list.person_uitgelicht .btn.btn-primary a svg { content: ' '; display: none;}
.block.list.person_uitgelicht .btn.btn-primary a { color: var(--secondary-color); font-weight: 300; text-decoration: none; border: none;}
.block.list.person_uitgelicht .btn.btn-primary a:hover { color: var(--white);}

.block.list.klant_uitgelicht { margin: 0 -15px;}
.block.list.klant_uitgelicht .item { border: 1px solid #dddddd; padding: 30px;}
.block.list.klant_uitgelicht .item img { width: 100%;}
.block.list.klant_uitgelicht .item .btn.btn-primary { padding: 6px 0; width: 100%; font-weight: bold;}

/*KLANTEN*/
.block.list.cases { margin: 0 -15px;}
.block.list.cases .item { border: 1px solid #dddddd; padding: 30px; margin-bottom: 30px;}
.block.list.cases .item img { width: 100%;}
.block.list.cases .item .btn.btn-primary { padding: 6px 0; width: 100%; font-weight: bold;}
.block.list.cases .listitem .write { color: var(--secondary-color); font-size: 20px; font-style: italic; margin-bottom: 20px;}

/*MI68*/
.block.list.person { margin: 25px -15px 0 -15px;}
.block.list.person .item { font-size: 18px; font-weight: 300; text-align: left; line-height: 30px;}
.block.list.person .item .image:after { content: ''; display: none;}
.block.list.person .item img { width: 100%;}
.block.list.person .item h2 { font-weight: bold; color: var(--primary-color); text-align: left; margin-bottom: 0; line-height: 50px;}
.block.list.person .item h2:after { display: none;}
.block.list.person .item .surname { font-size: 30px; color: var(--primary-color);}
.block.list.person .item a:hover .surname { color: var(--secondary-color);}
.block.list.person .item table tr td:nth-child(1) { width: 30px;}
.block.list.person .item table tr td svg { font-size: 16px;}
.block.list.person .item a { font-weight: 300; color: var(--primary-color); border: none;}
.block.list.person .item a:hover { color: var(--secondary-color);}
.block.list.person .item svg { margin-right: 5px; color: var(--primary-color);}
.block.list.person .item .prijzen { color: var(--primary-color); font-size: 16px; font-style: italic; margin-top: 20px;}
.block.list.person .item .prijzen ul { padding-left: 30px;}
.block.list.person .item .prijzen ul li { list-style: none; position: relative;}
.block.list.person .item .prijzen ul li:before { font-family: "Font Awesome 5 Regular"; content: "\f2eb"; display: none;}
.block.list.person .item .prijzen ul li svg { position: absolute; left: -30px; top: 4px;}

.block.list.simplelist.spiegel .item .text { min-height: auto;}

.block.html.image img { width: 100%;}

.block.html.terugbutton .btn.btn-primary { color: var(--primary-color) !important; border-color: var(--primary-color) !important;}
.block.html.terugbutton .btn.btn-primary:hover { color: var(--white) !important; border-color: var(--secondary-color) !important;}
.block.html.terugbutton .btn.btn-primary svg:nth-child(2) { content: ''; display: none;}
.block.html.terugbutton .btn.btn-primary:before { font-family: "Font Awesome 5 Regular"; content: "\f177"; display: none;}
.block.html.terugbutton .btn.btn-primary svg { margin-right: 15px; margin-left: 0; font-size: 18px;}
.block.html.terugbutton .btn { margin-top: 15px; margin-bottom: 20px;}

.h2-smaller h2 { font-family: 'Aller'; font-size: 26px; font-weight: bold; font-style: normal; color: var(--primary-color); margin-bottom: 0px; text-align: left;}
.h2-smaller h2::after { width: 50px; height: 3px; background: var(--primary-color); margin: 15px 0 15px 0;}

.block.list.features { display: flex; flex-wrap: wrap;}
.block.list.features article[class*="col-"] { padding: 0;}
.block.list.features .item { background-color: var(--primary-color); padding: 30px 50px; color: var(--white); text-align: center;}
.block.list.features .item .icon img { max-width: 35px; filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(256deg) brightness(104%) contrast(101%);}
.block.list.features .item .content h3 { color: var(--white);}
.block.list.features .item .content h3::after { background-color: var(--white); margin: 10px auto 20px;}

.block.list.text-columns { }
.block.list.text-columns .item { font-size: 16px; line-height: 1.5;}
.block.list.text-columns .item h3 { font-size: 18px;}

.block.content.text-left { text-align: left;}
.block.content.text-left h2 { text-align: left;}
.block.content.text-left h2::after { margin-left: 0;}

.block.html.contact-bar { position: relative; background-color: var(--primary-color); color: var(--white); border-radius: 15px;}
.block.html.contact-bar .image { position: relative; display: flex; justify-content: center; overflow: visible; height: 100%; bottom: 0;}
.block.html.contact-bar .image img { position: absolute; bottom: 0; transform: scale(1); max-width: 235px;}
.block.html.contact-bar .content { padding: 35px 80px 30px 0;}
.block.html.contact-bar .content h2 { color: var(--white); text-align: left; margin-bottom: 20px;}
.block.html.contact-bar .content h2::after { display: none;}
.block.html.contact-bar .content .text { }
.block.html.contact-bar .content .text p { }
.block.html.contact-bar .content .text p strong { font-size: 1.25rem;}
.block.html.contact-bar .content .contact-links { display: flex; gap: 30px;}
.block.html.contact-bar .content .contact-links .item { display: flex; padding-bottom: 24px;}
.block.html.contact-bar .content .contact-links .item .icon { margin-right: 12px;}
.block.html.contact-bar .content .contact-links .item .icon img { filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(256deg) brightness(104%) contrast(101%); transition: transform 0.5s ease-in-out;}
.block.html.contact-bar .content .contact-links .item:has(.link:hover) .icon img { transform: translateY(-5px);}
.block.html.contact-bar .content .contact-links .item .link { }
.block.html.contact-bar .content .contact-links .item .link a { color: var(--white);}
.block.html.contact-bar .content .contact-links .item .link a::after { content: ''; display: block; width: 0%; height: 1px; background-color: var(--white); transition: width 0.5s;}
.block.html.contact-bar .content .contact-links .item .link:hover a::after { width: 100%;}
.block.html.contact-bar .content .btn.btn-secondary { background-color: var(--secondary-color); border: 1px solid var(--secondary-color); color: var(--white) !important;}
.block.html.contact-bar .content .btn { position: absolute; bottom: -24px; box-shadow: 3px 3px 7.5px 0px #3F3F3F0D;}
.block.html.contact-bar .content .btn.btn-secondary:hover { background-color: var(--white); color: var(--secondary-color) !important; border-color: var(--secondary-color);}


/*#Tablet (Landscape)
==================================================*/
@media only screen and (min-width: 959px) and (max-width: 1220px) {
  .container_banner { font-size: 70px;}
  .container_banner .container .col-md-12 .pagetitle { bottom: 10px;}
  .block.list.simplelist .item .text { min-height: 345px;}
  .block.list.simplelist .item .text h3 { font-size: 20px;}
  .block.list.simplelist.blog .item .text { min-height: 300px;}
}

/*Tablet (Portrait)
==================================================*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
  .container_banner { font-size: 50px;}
  .container_banner .container .col-md-12 .pagetitle { bottom: 3px;}
  .block.list.simplelist .item .text { min-height: 315px;}
  .block.list.simplelist.video .item .text { min-height: 135px;}
  .block.list.klant_uitgelicht .item { padding: 10px;}
  .block.list.person_uitgelicht { max-width: 300px; margin: 0 auto;}
  h2 { margin-top: 50px;}
  .block.list.cases .image { margin-top: 20px; text-align: center;}
  .block.list.person .item h2 { margin-top: 20px;}
}

/*#Mobile (Landscape)
==================================================*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .container_banner { font-size: 30px;}
  .container_banner .container .col-md-12 { min-height: 100px;}
  .container_banner .container .col-md-12 .pagetitle { bottom: -4px;}
  .block.list.simplelist .item .text { min-height: auto;}
  .block.list.simplelist .item .text h3 { min-height: auto;}
  .block.list.simplelist.video .item .text { min-height: auto;}
  .block.list.simplelist.blog .item .text h3 { min-height: auto;}
  .block.list.klant_uitgelicht { max-width: 300px; margin: 0 auto;}
  .block.list.klant_uitgelicht .item { padding: 10px; margin-bottom: 20px;}
  .block.list.person_uitgelicht { max-width: 300px; margin: 0 auto;}
  .block.list.person_uitgelicht .btn.btn-primary svg:nth-child(3) { display: none !important;}
  h2 { margin-top: 50px;}
  .block.list.cases .image { margin-top: 20px; text-align: center;}
  .block.list.person { margin: 0 auto;}
  .block.list.person .item h2 { margin-top: 20px;}
}
/*Mobiel (Portrait)
==================================================*/
@media only screen and (max-width: 479px) {
  h1 { font-size: 36px;}
  h2 { margin-top: 50px;}
  .container_banner { font-size: 30px; line-height: 36px;}
  .container_banner:after { background-size: 10% auto; opacity: 0.25;}
  .container_banner .container .col-md-12 { min-height: 75px;}
  .container_banner .container .col-md-12 .pagetitle { bottom: -8px;}
  .block.list.simplelist .item .text { min-height: auto;}
  .block.list.simplelist .item .text h3 { min-height: auto; font-size: 22px;}
  .block.list.simplelist.video .item .text { min-height: auto;}
  .block.list.simplelist.blog .item .text h3 { min-height: auto;}
  .block.list.klant_uitgelicht .item { padding: 10px; margin-bottom: 20px;}
  .block.list.person_uitgelicht { max-width: 350px; margin: 0 -15px;}
  .block.list.person_uitgelicht .btn.btn-primary svg:nth-child(3) { display: none !important;}
  .block.list.cases .image { margin-top: 20px; text-align: center;}
  .block.list.person { margin: 0 -15px;}
  .block.list.person .item h2 { margin-top: 20px;}
}

/*---------------------------------------*/
@media (max-width: 1399px) {

}

/*---------------------------------------*/
@media (max-width: 1199px) {
  .block.html.contact-bar .col-lg-4 { width: 33.33333333%;}
  .block.html.contact-bar .col-lg-8 { width: 66.66666667%;}
}

/*---------------------------------------*/
@media (max-width: 991px) {
  
  .block.html.contact-bar .col-lg-4 { width: 100%;}
  .block.html.contact-bar .col-lg-8 { width: 100%;}
  .block.html.contact-bar .image { display: none;}
  .block.html.contact-bar .content { padding: 35px 24px;}
  .block.html.contact-bar .content h2 { margin-top: 0; }
}

/*---------------------------------------*/
@media (max-width: 767px) {

}

/*---------------------------------------*/
@media (max-width: 575px) {

}

/*---------------------------------------*/
@media (max-width: 479px) {
  .block.html.contact-bar .content .contact-links { flex-direction: column;}
  .block.html.contact-bar .content .btn { width: calc(100% - 48px);}
}