/* ====== Root Variables ====== */
:root {
	/* KLEUREN */
	--text-color: #666666;
	--primary-color: #518B05;
	--primary-color-75: rgb(4, 87, 143, 0.75);
	--secondary-color: #04578f;
	--tertiary-color: #04578f;
	--bg-color: #F2F3F9;
	--white: #FFFFFF;
	--black: #000000;
	--grey: #AAAAAA;
	--light-grey: #EEEEEE;
	--warning: #d12929;

	/* FILTERS */
	--primary-filter: brightness(0) saturate(100%) invert(27%) sepia(85%) saturate(1500%) hue-rotate(5deg) brightness(105%) contrast(110%);
	--secondary-filter: brightness(0) saturate(100%) invert(13%) sepia(5%) saturate(200%) hue-rotate(0deg) brightness(95%) contrast(95%);
	--tertiary-filter: brightness(0) saturate(100%) invert(38%) sepia(90%) saturate(2000%) hue-rotate(10deg) brightness(105%) contrast(110%);
	--white-filter: brightness(0) saturate(100%) invert(95%) sepia(91%) saturate(38%) hue-rotate(277deg) brightness(111%) contrast(111%);
 
	/* FONTS */
	--primary-font: "Yeseva One", serif;
	--secondary-font: "Josefin Sans", sans-serif;
 
	--font-awesome: 'Font Awesome 7 Pro';
	--arrow-up: '\f062';
	--arrow-right: '\f061';
	--arrow-down: '\f063';
	--arrow-left: '\f060';
 
	--angler-down: '\f107';
	--angler-right: '\f105';
 
	/* DETAILS */
	--border-radius: 10px;
	--box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	--primary-gradient: linear-gradient(92.27deg, rgba(81, 139, 5, 0.65) 0%, rgba(4, 87, 143, 0.65) 100%);
;
;
 
	/* CONTAINER */
	--container-width: 1664px;
	--rest-space: calc(100vw - var(--container-width));
	--half-space: calc(var(--rest-space) / 2);
}
 
*{ outline: 0 !important; }
body{ font-family: var(--secondary-font); font-size: 1rem; font-weight: 400; font-style: normal; color: var(--text-color); line-height: 1.5; background-color: var(--bg-color); }
h1{ font-family: var(--primary-font); font-weight: 400; font-size: clamp(2.5rem, 8.5vw, 5.6rem); line-height: 1; color: var(--secondary-color); margin: 0 0 24px; }
h2{ font-family: var(--primary-font); font-weight: 400; font-size: clamp(1.7rem, 3.5vw, 3rem); line-height: 1.3; color: var(--tertiary-color); margin: 0 0 20px; }
h3{ font-family: var(--primary-font); font-weight: 400; font-size: clamp(1.4rem, 2.3vw, 2.1875rem); line-height: 1.3; color: var(--secondary-color); margin: 0 0 20px; }
h4{ font-family: var(--primary-font); font-weight: 400; font-size: clamp(1.1rem, 1.8vw, 1.5rem); line-height: 1.25; color: var(--secondary-color); margin: 0 0 16px; }
h5{ font-family: var(--secondary-font); font-weight: 700; font-size: clamp(1.2rem, 1.4vw, 1.56rem); line-height: 1.3; color: var(--text-color); margin: 0 0 12px; letter-spacing: .08em; }
h6{ font-family: var(--secondary-font); font-weight: 400; font-size: clamp(0.95rem, 1.2vw, 1rem); line-height: 1.3; color: var(--text-color); margin: 0 0 12px; letter-spacing: .04em; }

/* FOOTER ALTIJD ONDERAAN DE PAGINA, OOK ALS DE PAGINA TE KORT IS */
body{ min-height: 100vh; display: flex; flex-direction: column; } 
main{ flex: 1; }

/* Buttons */
.btn{font-family:var(--secondary-font); font-weight:600; font-size:1.1rem; line-height:1.2; border-radius:50px; padding:10px 20px; border:1px solid transparent; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; text-decoration:none; cursor:pointer; transition:background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .1s ease;}
/* .btn::after { content: var(--arrow-right); font-family: var(--font-awesome); margin-left: .5rem; } */

p:has(.btn + .btn) { display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px 24px; }

.btn.btn-primary { background-color: var(--primary-color); color: var(--white); border-color: var(--primary-color); }
.btn.btn-primary:is(:hover, :focus-visible, :active) { background-color: var(--secondary-color); border-color: var(--secondary-color); color: var(--white); }

.btn.btn-secondary { background-color: var(--secondary-color); color: var(--white); border-color: var(--secondary-color); }
.btn.btn-secondary:is(:hover, :focus-visible, :active) { background-color: var(--primary-color); border-color: var(--primary-color); color: var(--white); }

.btn.btn-tertiary { background-color: var(--tertiary-color); color: var(--primary-color); border-color: var(--tertiary-color); }
.btn.btn-tertiary:is(:hover, :focus-visible, :active) { background-color: var(--secondary-color); border-color: var(--secondary-color); color: var(--white); }

.btn.btn-info { background-color: transparent; color: var(--primary-color); border: 0; padding: 0; border-radius: 0; text-decoration: none; font-weight: 600; }
/* .btn.btn-info::after { content: var(--arrow-right); font-family: var(--font-awesome); margin-left: 6px; font-size: .9em; transition: transform .2s ease; } */
.btn.btn-info:is(:hover, :focus-visible, :active) { color: var(--tertiary-color); text-decoration: underline; }
/* .btn.btn-info:is(:hover, :focus-visible, :active)::after { transform: translateX(3px); } */

.btn.btn-default { background-color: var(--primary-color); color: var(--white); border-color: var(--primary-color); }
.btn.btn-default:is(:hover, :focus-visible, :active) { background-color: var(--secondary-color); border-color: var(--secondary-color); }

/* .btn.back { flex-direction: row-reverse; &::after {content: var(--arrow-left);} } */

figure{ margin-bottom: 0; }

/* STYLING LINKJES IN TEKST */
a:not(.btn):not(:has(img)):not( .item) { color: var(--primary-color); text-decoration: underline; text-underline-offset: 3px; transition: color .2s ease, text-decoration-color .2s ease; }
a:not(.btn):not(:has(img)):not( .item):is(:hover, :focus-visible) { color: var(--tertiary-color); text-decoration-color: var(--tertiary-color); }
a:not(.btn):not(:has(img)):not( .item):active { color: var(--secondary-color); }

.container-fluid.content ul { padding-left: 0; }
.container-fluid.content ul li { list-style: none; position: relative; padding-left: 24px; }
.container-fluid.content ul li::before { content: var(--angler-right); font-family: var(--font-awesome); font-weight: 400; font-style: normal; position: absolute; left: 0; top: 2px; }

.container-fluid.content .image:has(a) { overflow: hidden; border-radius: var(--border-radius); }
.container-fluid.content .image:has(a) img {  -moz-transition: all .5s; -webkit-transition: all .5s; transition: all .5s; }
.container-fluid.content .image:has(a):hover img{ -moz-transform: scale(1.08); -webkit-transform: scale(1.08); transform: scale(1.08); }

.row > .container { width: 100%; margin-right: auto; margin-left: auto; }

/* ============================================
		MELDING
=============================================*/
.container-fluid.notification{ background: var(--warning); font-size: 1rem; color: var(--white); text-align: center; text-transform: uppercase; }
.container-fluid.notification a{ color: var(--white); text-decoration: none; }
.container-fluid.notification a:hover{ color: var(--white); text-decoration: underline; }
.container-fluid.notification p{ margin: 5px 0; }

/* ============================================
		TOP
=============================================*/
.container-fluid.top{ }

/* ============================================
		NAVIGATIE
=============================================*/
.container-fluid.navigatie { background-color: var(--bg-color); position: sticky; top: 0; z-index: 99; }
.container-fluid.navigatie .collapse { justify-content: flex-end; }
.container-fluid.navigatie .navbar-brand { max-width: 150px; width: 100%; flex-shrink: 0; display: flex; align-items: center; transition: max-width 0.3s ease-in-out; }
.container-fluid.navigatie .navbar-brand img{ width: 100%; }
.container-fluid.navigatie .navbar-nav { gap: 28px; }
.container-fluid.navigatie .navbar-nav .nav-item { position: relative; }
.container-fluid.navigatie .navbar-nav .nav-item .nav-link { font-family: var(--primary-font); font-weight: 400; font-size: 1rem; padding: 4px 0; color: var(--black); position: relative; text-decoration: none; transition: color .2s ease; }
.container-fluid.navigatie .navbar-nav .nav-item .nav-link::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 0%; height: 2px; background-color: var(--black); transition: width .25s ease; }
.container-fluid.navigatie .navbar .navbar-collapse .navbar-nav .nav-item.dropdown:is(:hover, :focus, :focus-visible, :target, :focus-within, :active) .dropdown-menu { display: flex; }

.navbar-toggler:focus{ box-shadow: none !important; }
.container-fluid.navigatie .navbar-toggler{ border: 0; border-radius: 0; padding-right: 0; }

.container-fluid.navigatie .navbar-nav .dropdown.nav-item:hover .dropdown-menu{ display: flex; flex-direction: column; gap: 6px; }
.container-fluid.navigatie .navbar-nav .nav-item.dropdown > .nav-link span::after {content: var(--angler-down); font-family: var(--font-awesome); display: inline-block; transition: all 0.5s ease-in-out;}
.container-fluid.navigatie .navbar-nav .nav-item.dropdown:is(:hover, :focus-visible) > .nav-link span::after {transform: rotate(180deg);}

/* ============================================
		SLIDER/BANNER
=============================================*/
.container-fluid.mainbanner .col-md-12{ padding: 0; }
.container-fluid.mainbanner img{ width: 100%; }

/* .container-fluid.banner{ padding: 0; position: relative; } */
.container-fluid.banner img{ width: 100%; }
.container-fluid.banner .content{ position: absolute; bottom: 0px; left: 0; width: 100%; z-index: 2; }
.container-fluid.banner .content .text{ }
.container-fluid.banner .content .text h1{ color: var(--white); }

/* ============================================
		CONTENT
=============================================*/
.container-fluid.content{  }

/* ============================================
		MODULES
=============================================*/
.block:is(.product, .list, .calendar):has(.item){ row-gap: 24px}

/* 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: var(--grey); }
.block.breadcrumb ul li.breadcrumarrow:after{ content: "\f105"; font-family: var(--font-awesome); font-weight: 400; font-style: normal; margin: 0 10px; }
.block.breadcrumb ul li a{ font-weight: 300; color: var(--grey); }
.block.breadcrumb ul li:last-child a{ font-weight: 500; color: var(--grey); }

/* BESCHIKBAARHEID */
.block.availability{ position: relative; float: right; }
.block.availability .availa_column .available:before{ content: '\f111'; font-family: var(--font-awesome); 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: var(--font-awesome); font-size: 8px; font-weight: 900; color: var(--warning); 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: var(--text-color); }
.block.list.input a:hover{ color: var(--text-color); text-decoration: none; }
.block.list.input .item{ position: relative; height: 100%; border: 1px solid var--(light-grey); }
.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 a{ color: var(--text-color); }
.block.list.news a:hover{ color: var(--text-color); text-decoration: none; }
.block.list.news .item{ position: relative; height: 100%; border: 1px solid var--(light-grey); }
.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: var(--black); color: var(--white); 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 a{ color: var(--text-color); }
.block.list.vacatures a:hover{ color: var(--text-color); text-decoration: none; }
.block.list.vacatures .item{ position: relative; height: 100%; border: 1px solid var--(light-grey); }
.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: var(--black); color: var(--white); 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 */
details{ overflow: hidden; padding: 10px 20px; background: var(--white); margin-bottom: 10px; }
details summary span{ margin-left: 5px; }
details .content{ overflow: hidden; height: 0; transition: height 0.5s ease; margin-top: 10px; }

/* TEAM */
.block.list.team{}
.block.list.team a{ color: var(--text-color); }
.block.list.team a:hover{ color: var(--text-color); text-decoration: none; }
.block.list.team .item{ position: relative; height: 100%; border: 1px solid var--(light-grey); }
.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: var(--black); color: var(--white); 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; }
.block.html.contact-details a { color: var(--text-color); text-decoration: none; }
.block.html.contact-details a:hover { color: var(--primary-color); text-decoration: underline; }
.block.html.contact-details table tbody tr { width: 50%; }
.block.html.contact-details table tbody tr td { padding: 10px 0; }
.block.html.contact-details table tbody tr i { font-size: 1.5rem; vertical-align: top; margin-right: 15px; color: var(--primary-color); }

/* FORMULIER */
.block.form .form-group { margin-bottom: 15px; }
.block.form .form-group:has(select){ position: relative; }
.block.form .form-group:has(select)::after{ content: '\f078'; font-family: var(--font-awesome); font-size: 1rem; position: absolute; top: calc(50% - 12px); right: 20px; pointer-events: none; }
.block.form .form-group textarea{ field-sizing: content; min-height: 100px; } 
.block.form .form-group :is(input:not(.btn), textarea) { width: 100%; padding: 10px; border: 1px solid var(--text-color); border-radius: 5px; color: var(--text-color); background-color: transparent; }
.block.form .form-group :is(input, textarea)::placeholder { color: var(--text-color); }

/* 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: var(--white); 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: var(--white); }
.block.gallery .item:hover .overlay{ visibility: visible; opacity: 1; }

.block.gallery .gallery_top{ margin-bottom: 20px; } 

/* KALENDER */
.block.calendar{}
.block.calendar a{ color: var(--text-color); }
.block.calendar a:hover{ color: var(--text-color); text-decoration: none; }
.block.calendar .item{ position: relative; height: 100%; border: 1px solid var(--light-grey); }
.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: var(--black); color: var(--white); 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 a:not(.btn){ color: var(--secondary-color); text-underline-offset: 3px; transition: color .2s ease, text-underline-offset .2s ease; }
.block.product a:not(.btn):hover{ color: var(--primary-color); text-underline-offset: 1px; }
.block.product .item{ position: relative; height: 100%; border: 1px solid var(--light-grey); }
.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: var(--white); 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; }

/* POP-UP */
.modal .modal-dialog{ max-width: 650px; }
.modal .modal-dialog .modal-content .modal-header{ padding: 1rem 1.5rem; }
.modal .modal-dialog .modal-content .modal-header h3{ margin-top: 0; }
.modal .modal-dialog .modal-content .modal-body{ padding: 1.5rem; }

/* SITEMAP */
.block.sitemap .sitemap_ul .sitemap_ul{ margin: 5px 0; }
.block.sitemap .sitemap_ul .sitemap_li:before{ font-size: 1rem; top: 1px; }
.block.sitemap a{ text-decoration: none; color: var(--text-color); }
.block.sitemap a:hover{ color: var(--primary-color); }

/* ============================================
		FOOTER
=============================================*/
.container-fluid.footer-endpage{ background: var(--secondary-color); }
.container-fluid.footer-endpage .footer{ color: var(--white); padding-top: 25px; padding-bottom: 25px; }
.container-fluid.footer-endpage .footer h2{ font-size: clamp(22px, 4vw, 35px); letter-spacing: 0; color: var(--white); line-height: 30px; margin-top: 0; margin-bottom: 15px; text-transform: unset; }
.container-fluid.footer-endpage .footer ul li{ list-style: none; position: relative; }
.container-fluid.footer-endpage .footer ul li:before{ content: '\f105'; font-family: var(--font-awesome); position: absolute; left: -25px; }
.container-fluid.footer-endpage .footer table tr td:nth-child(1){ width: 30px !important; vertical-align: top; }
.container-fluid.footer-endpage .footer i{ color: var(--white); }
.container-fluid.footer-endpage .footer a{ color: var(--white); }

/* ============================================
		ENDPAGE
=============================================*/
.container-fluid.footer-endpage .endpage{ color: var(--white); padding-top: 5px; padding-bottom: 5px;  }
.container-fluid.footer-endpage .endpage [class*="col-"]:nth-child(1){}
.container-fluid.footer-endpage .endpage [class*="col-"]:nth-child(2){ text-align: right; }
.container-fluid.footer-endpage .endpage [class*="col-"]:nth-child(2) img{ max-width: 30px; }
.container-fluid.footer-endpage .endpage ul{ margin-bottom: 0; padding-left: 0; }
.container-fluid.footer-endpage .endpage ul li{ list-style: none; display: inline; }
.container-fluid.footer-endpage .endpage ul li:after{ content: "|"; margin: 0 5px; }
.container-fluid.footer-endpage .endpage ul li:last-child:after{ content: ""; margin: 0; }
.container-fluid.footer-endpage .endpage a{ color: var(--white); }
.container-fluid.footer-endpage .endpage a:hover img{ filter: invert(54%) sepia(97%) saturate(3788%) hue-rotate(1deg) brightness(101%) contrast(106%); }

/* ============================================
		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%; justify-content: space-between; overflow: hidden; background: var(--primary-color); background: var(--primary-color-75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.modal.fixed-left .title-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; }
.modal.fixed-left .title-bar h5 { text-align: center; margin-bottom: 15px; color: var(--white); min-width: 200px; }
.modal.fixed-left .title-bar h5 img { max-width: 150px; filter: brightness(0) invert(1); }
.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: var(--white); background: none; border: 0; }
.modal.fixed-left .title-bar .close-btn-wrap:hover { cursor: pointer; opacity: 0.8; }
.modal.fixed-left .title-bar .close-btn-wrap:focus { box-shadow: 0 0px 0px 2px rgb(255 255 255 / 25%); border: 2px solid rgb(255 255 255 / 50%); }
.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: var(--white); }
.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: var(--white); 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: var(--white); display: flex; align-items: center; transition: transform 0.3s; }
.modal.fixed-left.show .menu-content .main-menu .navbar-nav li.active a { color: var(--primary-color); } 
.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: var(--font-awesome); 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 var(--white); }
.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: var(--white); }
.modal.fixed-left .menu-content .first-sub .sub-header h5 { margin-bottom: 0; line-height: 1; color: var(--white); font-family: var(--secondary-font); text-transform: none; letter-spacing: 0; font-size: 1.5rem; }
.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: var(--white); 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: var(--white); 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{ text-decoration: none; }
.modal.fixed-left .menu-footer .socials a .item{ display: flex; justify-content: center; align-items: center; border: 1px solid var(--white); width: 40px; height: 40px; border-radius: 30px; margin-left: 10px; text-decoration: none; }
.modal.fixed-left .menu-footer .socials a .item i{ font-size: 16px; color: var(--white); }
.modal.fixed-left .menu-footer .socials a:hover .item{ background: var(--white); }
.modal.fixed-left .menu-footer .socials a:hover .item i{ color: var(--primary-color); }

/* ============================================
        MARGIN
=============================================*/
.mt-6{ margin-top: 4rem !important; } 
.mt-7{ margin-top: 5rem !important; }
.mt-8{ margin-top: 6rem !important; }
.mt-9{ margin-top: 7rem !important; }
.mt-10{ margin-top: 8rem !important; }
 
.me-6{ margin-right: 4rem !important; }
.me-7{ margin-right: 5rem !important; }
.me-8{ margin-right: 6rem !important; }
.me-9{ margin-right: 7rem !important; }
.me-10{ margin-right: 8rem !important; }
 
.mb-6{ margin-bottom: 4rem !important; }
.mb-7{ margin-bottom: 5rem !important; }
.mb-8{ margin-bottom: 6rem !important; }
.mb-9{ margin-bottom: 7rem !important; }
.mb-10{ margin-bottom: 8rem !important; }
 
.ms-6{ margin-left: 4rem !important; }
.ms-7{ margin-left: 5rem !important; }
.ms-8{ margin-left: 6rem !important; }
.ms-9{ margin-left: 7rem !important; }
.ms-10{ margin-left: 8rem !important; }
 
.my-6{ margin-top: 4rem !important; margin-bottom: 4rem !important; }
.my-7{ margin-top: 5rem !important; margin-bottom: 5rem !important; }
.my-8{ margin-top: 6rem !important; margin-bottom: 6rem !important; }
.my-9{ margin-top: 7rem !important; margin-bottom: 7rem !important; }
.my-10{ margin-top: 8rem !important; margin-bottom: 8rem !important; }
 
.mx-6{ margin-left: 4rem !important; margin-right: 4rem !important; }
.mx-7{ margin-left: 5rem !important; margin-right: 5rem !important; }
.mx-8{ margin-left: 6rem !important; margin-right: 6rem !important; }
.mx-9{ margin-left: 7rem !important; margin-right: 7rem !important; }
.mx-10{ margin-left: 8rem !important; margin-right: 8rem !important; }
 
/* ============================================
        PADDING
=============================================*/
.pt-6{ padding-top: 4rem !important; }
.pt-7{ padding-top: 5rem !important; }
.pt-8{ padding-top: 6rem !important; }
.pt-9{ padding-top: 7rem !important; }
.pt-10{ padding-top: 8rem !important; }
 
.pe-6{ padding-right: 4rem !important; }
.pe-7{ padding-right: 5rem !important; }
.pe-8{ padding-right: 6rem !important; }
.pe-9{ padding-right: 7rem !important; }
.pe-10{ padding-right: 8rem !important; }
 
.pb-6{ padding-bottom: 4rem !important; }
.pb-7{ padding-bottom: 5rem !important; }
.pb-8{ padding-bottom: 6rem !important; }
.pb-9{ padding-bottom: 7rem !important; }
.pb-10{ padding-bottom: 8rem !important; }
 
.ps-6{ padding-left: 4rem !important; }
.ps-7{ padding-left: 5rem !important; }
.ps-8{ padding-left: 6rem !important; }
.ps-9{ padding-left: 7rem !important; }
.ps-10{ padding-left: 8rem !important; }
 
.py-6{ padding-top: 4rem !important; padding-bottom: 4rem !important; }
.py-7{ padding-top: 5rem !important; padding-bottom: 5rem !important; }
.py-8{ padding-top: 6rem !important; padding-bottom: 6rem !important; }
.py-9{ padding-top: 7rem !important; padding-bottom: 7rem !important; }
.py-10{ padding-top: 8rem !important; padding-bottom: 8rem !important; }
 
.px-6{ padding-left: 4rem !important; padding-right: 4rem !important; }
.px-7{ padding-left: 5rem !important; padding-right: 5rem !important; }
.px-8{ padding-left: 6rem !important; padding-right: 6rem !important; }
.px-9{ padding-left: 7rem !important; padding-right: 7rem !important; }
.px-10{ padding-left: 8rem !important; padding-right: 8rem !important; }

/* ============================================
		MOBIEL
=============================================*/
@media (min-width: 2100px){
	:root{ --container-width: 2000px; }
}

/* ================================================== */
@media (min-width: 1700px){
	.container{ max-width: var(--container-width); }
}

/* ================================================== */
@media only screen and (max-width: 1599px) {
	:root{ --container-width: 1400px; }
	.container{ max-width: var(--container-width); }
	
}

/* ================================================== */
@media only screen and (max-width: 1499px ) {
	:root{ --container-width: 1320px; }
}

/* ================================================== */
@media only screen and (max-width: 1399px) {
	:root{ --container-width: 1140px; }
	.container { max-width: var(--container-width); }
}

/* ================================================== */
@media only screen and (max-width: 1199px) {
	:root{ --container-width: 960px; }
}
/* ================================================== */
@media only screen and (max-width: 991px) {
	:root{ --container-width: 720px; }
}
/* ================================================== */
@media only screen and (max-width: 767px) {
	:root{ --container-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.footer-endpage .endpage [class*="col-"]:nth-child(1){ text-align: center; }
	.container-fluid.footer-endpage .endpage [class*="col-"]:nth-child(2){ text-align: center; }
	.container-fluid.footer-endpage .endpage [class*="col-"]:nth-child(2) img{ max-width: 30px; }
}
/* ================================================== */
@media only screen and (max-width: 575px) {
	:root{ --container-width: 100%; }
	.container { max-width: none; }
	.btn{ font-size: 1rem; }
	.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%; font-size: 0.95rem; }

	.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; }

	
}