
:root{
	--primary-color: #ec6608;
  	--secondary-color: #0c0350;
}
*{ outline: 0 !important; }
body{ font-family: 'Lato', sans-serif; font-size: 1.125rem; font-weight: 400; font-style: normal; color: #444444; line-height: 1.5; }
h1{ font-family: 'Lato', sans-serif; font-size: 3rem; font-weight: 900; font-style: normal; color: #444444; line-height: 1.4; margin: 0 0 30px 0; }
h2{ font-family: 'Lato', sans-serif; font-size: 2rem; font-weight: 700; font-style: normal; color: #444444; line-height: 1.4; margin: 25px 0 15px 0; }
h3{ font-family: 'Lato', sans-serif; font-size: 1.5rem; font-weight: 700; font-style: normal; color: #444444; line-height: 1.4; margin: 20px 0 10px 0; }
h4{ font-family: 'Lato', sans-serif; font-size: 1.25rem; font-weight: 400; font-style: normal; color: #444444; line-height: 1.4; margin: 15px 0 5px 0; }

.btn{}
.btn.btn-primary{ background: #ff6a00; border-color: #ff6a00; color: #ffffff !important; }
.btn.btn-primary:hover{ background: #ffffff; border-color: #ff6a00; color: #ff6a00 !important; }
.btn.btn-secondary{ background: #ffffff; border-color: #ff6a00; color: #ff6a00 !important; }
.btn.btn-secondary:hover{ background: #ff6a00; border-color: #ff6a00; color: #ffffff !important; }
.btn.btn-success{}
.btn.btn-success:hover{}
.btn.btn-warning{}
.btn.btn-warning:hover{}
.btn.btn-info{}
.btn.btn-info:hover{}

.row > .container { width: 100%; margin-right: auto; margin-left: auto; }

/* ============================================
		TOP
=============================================*/
.container-fluid.top{ }

/* ============================================
		NAVIGATIE
=============================================*/
.container-fluid.navigatie{}
.container-fluid.navigatie .navbar-brand{ max-width: 100px; width: 100%; }
.container-fluid.navigatie .navbar-brand img{ width: 100%; }
.container-fluid.navigatie .navbar-nav{}
.container-fluid.navigatie .navbar-nav .nav-item{}
.container-fluid.navigatie .navbar-nav .nav-item .nav-link{}

/* ============================================
		SLIDER/BANNER
=============================================*/
.container-fluid.slider .col-md-12{ padding: 0; }
.container-fluid.slider img{ width: 100%; }

/* ============================================
		CONTENT
=============================================*/
.container-fluid.content{ }
.container-fluid.content a{}
.container-fluid.content a:hover{}

.container-fluid.content ul{ }
.container-fluid.content ul li{ list-style: none; position: relative; }
.container-fluid.content ul li:before{ content: "\f105"; font-family: 'Font Awesome 6 Pro'; font-weight: 400; font-style: normal; position: absolute; left: -20px; }

/* ============================================
		MODULES
=============================================*/

/* BREADCRUMBS */
.container-fluid.breadcrumb{  }
.block.breadcrumb{ padding: 0; margin-bottom: 0; }
.block.breadcrumb ul{ padding-left: 0; margin-bottom: 0; }
.block.breadcrumb ul li{ list-style: none; display: inline; color: #AAAAAA; }
.block.breadcrumb ul li.breadcrumarrow:after{ content: "\f105"; font-family: 'Font Awesome 6 Pro'; font-weight: 400; font-style: normal; margin: 0 10px; }
.block.breadcrumb ul li a{ font-weight: 300; color: #AAAAAA; }
.block.breadcrumb ul li:last-child a{ font-weight: 500; color: #AAAAAA; }

/* BESCHIKBAARHEID */
.block.availability{ position: relative; float: right; }
.block.availability .availa_column .available:before{ content: '\f111'; font-family: 'Font Awesome 6 Pro'; font-size: 8px; font-weight: 900; color: #41ab34; display: block; position: absolute; left: 5px; top: 0; }
.block.availability .availa_column .not_available:before{ content: '\f111'; font-family: 'Font Awesome 6 Pro'; font-size: 8px; font-weight: 900; color: #FF0004; display: block; position: absolute; left: 5px; top: 0; }
.block.availability .availa_column .available,
.block.availability .availa_column .not_available{ padding-left: 25px; }

/* INPUT */
.block.list.input{}
.block.list.input .col-md-6.col-lg-4{ margin-bottom: 30px; }
.block.list.input a{ color: #444444; }
.block.list.input a:hover{ color: #444444; text-decoration: none; }
.block.list.input .item{ position: relative; height: 100%; border: 1px solid #eeeeee; }
.block.list.input .item .image{ position: relative; }
.block.list.input .item .image img{}
.block.list.input .item .content{ padding: 20px 20px 70px 20px; }
.block.list.input .item .content h3{ margin-top: 0px; }
.block.list.input .item .content .text{}
.block.list.input .item .content .btn.btn-primary{ position: absolute; bottom: 20px; right: 20px; }

/* NEWS */
.block.list.news{}
.block.list.news .col-md-6.col-lg-4{ margin-bottom: 30px; }
.block.list.news a{ color: #444444; }
.block.list.news a:hover{ color: #444444; text-decoration: none; }
.block.list.news .item{ position: relative; height: 100%; border: 1px solid #eeeeee; }
.block.list.news .item .image{ position: relative; }
.block.list.news .item .image img{}
.block.list.news .item .image .overlay{ position: absolute; bottom: 10px; right: 10px; }
.block.list.news .item .image .overlay span{ background: #000000; color: #ffffff; padding: 5px; }
.block.list.news .item .content{ padding: 20px 20px 70px 20px; }
.block.list.news .item .content h3{ margin-top: 0px; }
.block.list.news .item .content .text{}
.block.list.news .item .content .btn.btn-primary{ position: absolute; bottom: 20px; right: 20px; }

/* LOGO SLIDER */
.block.list.logoslider{}
.block.list.logoslider .item{ padding: 0; }

/* VACATURES */
.block.list.vacatures{}
.block.list.vacatures .col-md-6.col-lg-4{ margin-bottom: 30px; }
.block.list.vacatures a{ color: #444444; }
.block.list.vacatures a:hover{ color: #444444; text-decoration: none; }
.block.list.vacatures .item{ position: relative; height: 100%; border: 1px solid #eeeeee; }
.block.list.vacatures .item .image{ position: relative; }
.block.list.vacatures .item .image img{}
.block.list.vacatures .item .image .overlay{ position: absolute; bottom: 10px; right: 10px; }
.block.list.vacatures .item .image .overlay span{ background: #000000; color: #ffffff; padding: 5px; }
.block.list.vacatures .item .content{ padding: 20px 20px 70px 20px; }
.block.list.vacatures .item .content h3{ margin-top: 0px; }
.block.list.vacatures .item .content .text{}
.block.list.vacatures .item .content .btn.btn-primary{ position: absolute; bottom: 20px; right: 20px; }

/* FAQ */
.block.list.accordion{  }
.block.list.accordion .card{ margin-bottom: 20px; }
.block.list.accordion .card-header{ padding: 0; }
.block.list.accordion .card-header .card-title{ margin-bottom: 0; }
.block.list.accordion .card-header .card-title > div{ position: relative; padding: 15px 50px 15px 25px; cursor: pointer; }
.block.list.accordion .card-header .icon{ height: auto; transition: 0.3s; transform: rotateZ(-45deg); position: absolute; right: 25px; top: 15px; }
.block.list.accordion .card-header .collapsed .icon{ transform: rotateZ(0deg);  }
.block.list.accordion .card-header .collapsed:hover .icon{ transform: rotateZ(-20deg); }
.block.list.accordion .card-body p{ margin: 0 0 10px 0; }

/* TEAM */
.block.list.team{}
.block.list.team .col-md-6.col-lg-4{ margin-bottom: 30px; }
.block.list.team a{ color: #444444; }
.block.list.team a:hover{ color: #444444; text-decoration: none; }
.block.list.team .item{ position: relative; height: 100%; border: 1px solid #eeeeee; }
.block.list.team .item .image{ position: relative; }
.block.list.team .item .image img{}
.block.list.team .item .image .overlay{ position: absolute; bottom: 10px; right: 10px; }
.block.list.team .item .image .overlay span{ background: #000000; color: #ffffff; padding: 5px; }
.block.list.team .item .content{ padding: 20px; }
.block.list.team .item .content h3{ margin-top: 0px; }
.block.list.team .item .content h4{ margin-top: 0px; }
.block.list.team .item .content .functie{}

/* CONTACTPAGINA */
.row.maps .col-lg-12{ padding: 0; }
.row.maps .block.html.map{ margin-top: 25px; margin-bottom: -59px; }

/* GALLERIJ */
.block.gallery .item{ position: relative; margin-bottom: 30px; }
.block.gallery .item .text{ position: absolute; bottom: 0; left: 20px; width: 100%; }
.block.gallery .item .text .title{  }
.block.gallery .item .text .title h2{ font-size: 26px; font-weight: 500; color: #ffffff; text-shadow: 2px 2px 5px rgba(0,0,0,0.8); }
.block.gallery .item .overlay{ visibility: hidden; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(66,66,66,0.5); transition: all 0.2s ease-in-out; }
.block.gallery .item .overlay span{ position: absolute; top: calc(50% - 15px); left: 0; width: 100%; text-align: center; font-size: 30px; color: #ffffff; }
.block.gallery .item:hover .overlay{ visibility: visible; opacity: 1; }

.block.gallery .gallery_top{ margin-bottom: 20px; }

/* KALENDER */
.block.calendar{}
.block.calendar .col-md-6.col-lg-4{ margin-bottom: 30px; }
.block.calendar a{ color: #444444; }
.block.calendar a:hover{ color: #444444; text-decoration: none; }
.block.calendar .item{ position: relative; height: 100%; border: 1px solid #eeeeee; }
.block.calendar .item .image{ position: relative; }
.block.calendar .item .image img{}
.block.calendar .item .image .date{ position: absolute; bottom: 10px; right: 10px; }
.block.calendar .item .image .date span{ background: #000000; color: #ffffff; padding: 5px; }
.block.calendar .item .content{ padding: 20px 20px 70px 20px; }
.block.calendar .item .content h3{ margin-top: 0px; }
.block.calendar .item .content .text{}
.block.calendar .item .content .btn.btn-primary{ position: absolute; bottom: 20px; right: 20px; }

/* PRODUCTEN */
.block.product{}
.block.product .col-md-6.col-lg-4{ margin-bottom: 30px; }
.block.product a{ color: #444444; }
.block.product a:hover{ color: #444444; text-decoration: none; }
.block.product .item{ position: relative; height: 100%; border: 1px solid #eeeeee; }
.block.product .item .image{ position: relative; }
.block.product .item .image img{}
.block.product .item .image .overlay{ position: absolute; bottom: 10px; right: 10px; }
.block.product .item .image .overlay span{ background: #000000; color: #ffffff; padding: 5px; }
.block.product .item .content{ padding: 20px 20px 70px 20px; }
.block.product .item .content h3{ margin-top: 0px; }
.block.product .item .content .text{}
.block.product .item .content .btn.btn-primary{ position: absolute; bottom: 20px; right: 20px; }

/* ARROW */
.slick-arrow{ background: rgba(0,0,0,0.5); text-align: center; padding: 10px; width: 60px; border: 0; outline: 0; }
.slick-arrow:hover{ background: rgba(0,0,0,0.8); }
.slick-arrow:focus{ border: 0; outline: 0; }
.slick-arrow i{ font-size: 30px; color: #ffffff; line-height: 40px; }
.slick-prev{ position: absolute; top: calc(50% - 30px); left: 0; z-index: 999; }
.slick-next{ position: absolute; top: calc(50% - 30px); right: 0; z-index: 999; }

/* DOTS */
.slick-dots li:before{ display: none; }
.slick-dots{ margin-top: -30px; display: flex; justify-content: center; margin: 0; padding: 1rem 0; list-style-type: none; }
.slick-dots li{ margin: 0 0.25rem; }
.slick-dots li:focus{ border: 0; outline: 0; }
.slick-dots li button { display: block; width: 12px; height: 12px; padding: 0; border: none; border-radius: 100%; background-color: #cccccc; text-indent: -9999px; cursor: pointer; }
.slick-dots li.slick-active button{ background-color: #aaaaaa; }

/* ============================================
		FOOTER
=============================================*/
.container-fluid.footer{ background: #2B2B2B; color: #ffffff; padding-top: 25px; padding-bottom: 25px; }
.container-fluid.footer h2{ font-size: 22px; color: #ffffff; line-height: 30px; margin-top: 0; margin-bottom: 15px; }
.container-fluid.footer ul li{ list-style: none; position: relative; }
.container-fluid.footer ul li:before{ content: '\f105'; font-family: 'Font Awesome 6 Pro'; position: absolute; left: -25px; }
.container-fluid.footer table tr td:nth-child(1){ width: 30px !important; vertical-align: top; }
.container-fluid.footer i{ color: #CDE200; }
.container-fluid.footer a{ color: #ffffff; }

/* ============================================
		ENDPAGE
=============================================*/
.container-fluid.endpage{ background: #000000; color: #ffffff; padding-top: 3px; padding-bottom: 3px;  }
.container-fluid.endpage .col-md-6:nth-child(2){ text-align: right; }
.container-fluid.endpage .col-md-6:nth-child(2) img{ max-width: 30px; }
.container-fluid.endpage ul{ margin-bottom: 0; padding-left: 0; }
.container-fluid.endpage ul li{ list-style: none; display: inline; }
.container-fluid.endpage ul li:after{ content: "|"; margin: 0 5px; }
.container-fluid.endpage ul li:last-child:after{ content: ""; margin: 0; }
.container-fluid.endpage a{ color: #ffffff; }

/* ============================================
		MOBIEL MENU
=============================================*/
.modal.fixed-left {  }
.modal.fixed-left .modal-dialog-vertical { height: 100%; width: 100vw; max-width: none; margin: 0; transition: transform 0.3s; transform: translateX(-100%); }
.modal.fixed-left.show .modal-dialog-vertical { transform: translateX(0); }
.modal.fixed-left .modal-content { border-radius: 0; border: none; min-height: 100%; background: var(--primary-color); justify-content: space-between; overflow: hidden; }
.modal.fixed-left .title-bar { display: flex; justify-content: space-between; align-items: center; }
.modal.fixed-left .title-bar h5 { text-align: center; margin-bottom: 0; color: #fff; }
.modal.fixed-left .title-bar .button-filler,
.modal.fixed-left .title-bar .close-btn-wrap { height: 50px; width: 50px; display: flex; justify-content: center; align-items: center; font-size: 1.125rem; color: #fff; }
.modal.fixed-left .title-bar .close-btn-wrap:hover { cursor: pointer; opacity: 0.8; }
.modal.fixed-left .menu-content .main-menu .logo-wrap { margin: 15px 0; display: flex; justify-content: center; }
.modal.fixed-left .menu-content .main-menu .section-title { padding: 15px; margin-top: 10px; margin-bottom: 0; color: #fff; }
.modal.fixed-left .menu-content .main-menu .navbar-nav { padding: 0; margin-bottom: 25px; list-style: none; }
.modal.fixed-left .menu-content .main-menu .navbar-nav li { position: relative; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 500; color: #fff; font-size: 2rem; transition: transform 0.4s, opacity 0.4s; transform: translateX(-30px); opacity: 0; }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li { transform: none; opacity: 1; }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li:nth-child(1) { transition-delay: 0.1s; }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li:nth-child(2) { transition-delay: 0.2s; }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li:nth-child(3) { transition-delay: 0.3s; }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li:nth-child(4) { transition-delay: 0.4s; }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li:nth-child(5) { transition-delay: 0.5s; }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li:nth-child(6) { transition-delay: 0.6s; }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li:nth-child(7) { transition-delay: 0.7s; }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li:nth-child(8) { transition-delay: 0.8s; }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li:nth-child(9) { transition-delay: 0.9s; }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li:nth-child(10) { transition-delay: 1s; }
.modal.fixed-left .menu-content .main-menu .navbar-nav li a { padding: 8px 15px; font-weight: 700; flex-grow: 1; text-decoration: none; color: #fff; display: flex; align-items: center; transition: transform 0.3s; }
.modal.fixed-left .menu-content .main-menu .navbar-nav li a i { margin-right: 10px; width: 20px; display: inline-flex; justify-content: flex-end; }
.modal.fixed-left .menu-content .main-menu .navbar-nav li.dropdown::after { content: '\f054'; font-family: 'Font Awesome 6 Pro'; margin-left: 20px; padding-right: 15px; transition: transform 0.3s; }
.modal.fixed-left .menu-content .main-menu .navbar-nav li.dropdown .dropdown-menu.show { display: none; }
.modal.fixed-left .menu-content .main-menu .navbar-nav li.dropdown .dropdown-menu.show { display: none; }
.modal.fixed-left .menu-content .main-menu .navbar-nav li:hover a { opacity: 0.8; transform: translateX(5px); }
.modal.fixed-left .menu-content .main-menu .navbar-nav li.dropdown:hover::after { opacity: 0.8; transform: translateX(5px); }
.modal.fixed-left .menu-content .main-menu .navbar-nav li .item.select-wrap { display: flex; align-items: center; }
.modal.fixed-left .menu-content .main-menu .navbar-nav li .item.select-wrap select { flex-grow: 1; }
.modal.fixed-left .menu-content { overflow: hidden; }
.modal.fixed-left .menu-content nav { width: 200%; display: flex; transition: transform 0.3s; }
.modal.fixed-left .menu-content nav > * { width: 50%; flex-shrink: 0; }
.modal.fixed-left .menu-content nav.open { transform: translateX(-50%); }
.modal.fixed-left .menu-content nav .sub-menu { display: none; }
.modal.fixed-left .menu-content .first-sub {  }
.modal.fixed-left .menu-content .first-sub .sub-header { display: flex; align-items: center; cursor: pointer; border-bottom: 2px solid #fff; }
.modal.fixed-left .menu-content .first-sub .sub-header:hover { background: rgb(0 0 0 / 5%); }
.modal.fixed-left .menu-content .first-sub .sub-header .back-btn { height: 50px; width: 50px; display: flex; justify-content: center; align-items: center; color: #fff; }
.modal.fixed-left .menu-content .first-sub .sub-header h5 { margin-bottom: 0; line-height: 1; color: #fff; }
.modal.fixed-left .menu-content .first-sub .submenu-items .dropdown-menu { display: block; padding: 0; width: 100%; margin: 0; list-style: none; position: relative!important; transform: none!important; border: none; background: none; margin-top: 15px; }
.modal.fixed-left .menu-content .first-sub .submenu-items .dropdown-menu li a { display: flex; cursor: pointer; padding: 8px 15px; color: #fff; font-size: 2rem; font-weight: 700; transition: transform 0.3s; }
.modal.fixed-left .menu-content .first-sub .submenu-items .dropdown-menu li a i { margin-right: 10px; font-size: 1.25rem; margin-top: 2px; width: 40px; display: flex; align-items: center; }
.modal.fixed-left .menu-content .first-sub .submenu-items .dropdown-menu li a:hover { text-decoration: none; opacity: 0.8; transform: translateX(5px); }
.modal.fixed-left .menu-footer { padding: 15px; margin-top: 25px; color: #fff; font-size: 20px; transform: translateY(20px); opacity: 0; transition: transform 0.5s, opacity 0.5s; transition-delay: 0.3s; }
.modal.fixed-left.show .menu-footer { transform: translateY(0); opacity: 1; }
.modal.fixed-left .menu-footer .socials { font-size: 1.875rem; display: flex; justify-content: center; }
.modal.fixed-left .menu-footer .socials a { color: #fff; margin: 0 5px; }
.modal.fixed-left .menu-footer .socials a:hover { opacity: 0.8; }

/* ============================================
		MOBIEL
=============================================*/

@media only screen and (max-width: 1399px) {
	.row > .container { max-width: 1140px; }
}

/* ================================================== */
@media only screen and (max-width: 1199px) {
	.row > .container { max-width: 960px; }
}
/* ================================================== */
@media only screen and (max-width: 991px) {
	.row > .container { max-width: 720px; }
}
/* ================================================== */
@media only screen and (max-width: 767px) {
	.row > .container { max-width: 540px; }
	.modal.fixed-left .menu-content .main-menu .navbar-nav li { font-size: 1.875rem; }
	.modal.fixed-left .menu-content .first-sub .submenu-items .dropdown-menu li a { font-size: 1.875rem; }

  	.container-fluid.endpage .col-md-6:nth-child(1){ text-align: center; }
	.container-fluid.endpage .col-md-6:nth-child(2){ text-align: center; }
}
/* ================================================== */
@media only screen and (max-width: 575px) {
	.row > .container { max-width: none; }
	.modal.fixed-left .menu-content .main-menu .navbar-nav li { font-size: 1.5rem; }
	.modal.fixed-left .menu-content .main-menu .navbar-nav li a { padding: 3px 12px; }
	.modal.fixed-left .menu-content .first-sub .submenu-items .dropdown-menu li a { font-size: 1.5rem; }
}

/* ================================================== */
@media only screen and (max-width: 479px) {
	.btn{ width: 100%; }

	.modal.fixed-left .menu-content .main-menu .navbar-nav li { font-size: 1.25rem; }
	.modal.fixed-left .menu-content .first-sub .submenu-items .dropdown-menu li a { font-size: 1.25rem; }
}
