@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;0,900;1,400&display=swap');

:root {
  --primary-color: #FF0000;
  
  --white-color: #ffffff;
  --black-color: #000000;

  --blue-color: #2B2E34;
  --gray-color: #CCCCCC;
  --light-gray-color: #F0F0F0;
  --green-color: #63C93E;

  --dark-color: #404040;

  --bg-color: #F7F7F7;

  --filter-primary: brightness(0) saturate(100%) invert(13%) sepia(95%) saturate(6521%) hue-rotate(4deg) brightness(103%) contrast(116%);
  --filter-white: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7441%) hue-rotate(69deg) brightness(113%) contrast(116%);
  --filter-black: brightness(0) saturate(100%) invert(0%) sepia(1%) saturate(3%) hue-rotate(326deg) brightness(97%) contrast(104%);
  
  
  /* JUISTE AFMETING IN DE CONTAINER ZETTEN */
  --container-width: 1400px;
	--rest-space: calc(100vw - var(--container-width));
	--half-space: calc(var(--rest-space) / 2);

  --font-awesome: 'Font Awesome 6 Pro';

  --mv-arrow-right: url('../images/ico_arrow.svg');
  --mv-arrow-next: url('../images/arrow-next.png');
  --mv-arrow-back: url('../images/back-arrow.png');
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {scroll-behavior: smooth; scroll-padding: 150px;}

/* Headings */
body{font-family: 'Montserrat';font-size: 16px;line-height: 1.6em;color: #000000;letter-spacing: 0px;}
h1{font-size: 44px; font-weight: 900; color: #000; text-transform: uppercase;}
h2{font-size: 36px; font-weight: 900; color: var(--primary-color); text-transform: uppercase;}
h3{font-size: 30px; font-weight: 600; color: #000; text-transform: uppercase;}
h4{font-size: 28px; font-weight: 600; color: #000; text-transform: uppercase;}
h5{font-size: 22px; font-weight: 500; color: var(--primary-color); text-transform: uppercase;}

h2.dark {color: #000; font-size: 42px;}

p[role="doc-subtitle"] {color: var(--primary-color); font-weight: 600; text-transform: uppercase; margin: 0; }

a {color: inherit; text-decoration: none;}
a:hover {color: inherit; text-decoration: none;}

/* Buttons */
.btn {font-weight: bold;font-size: 18px;letter-spacing: 0px;border-radius: 0;background: none;}
.btn:hover {background: none;}
.btn-primary {color: #000 !important;background: none;padding: 0 20px 6px 4px;text-transform: uppercase; border:none; border-bottom: 1px solid var(--primary-color) !important;}
.btn-primary:hover {color: var(--primary-color); border-color: var(--black-color) !important;}
.btn-primary:after {content: var(--mv-arrow-right);width: 20px;margin-left: 20px;transition: 0.3s ease-in;-o-transition: 0.3s ease-in;-ms-transition: 0.3s ease-in;-moz-transition: 0.3s ease-in;-webkit-transition: 0.3s ease-in;}
.btn-primary:hover:after {margin-left: 40px;}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle, .btn-primary.focus, .btn-primary:focus {background: none; color: inherit; outline: none; box-shadow: none !important;}

.btn-secondary {color: #000 !important;background: none;padding: 0 20px 6px 4px;text-transform: uppercase;border:none;border-bottom: 1px solid var(--primary-color);letter-spacing: 0px;transition: 0.3s ease-in;-o-transition: 0.3s ease-in;-ms-transition: 0.3s ease-in;-moz-transition: 0.3s ease-in;-webkit-transition: 0.3s ease-in;}
.btn-secondary:hover {color: #000; border-color: #000000;}
.btn-secondary:after {content: var(--mv-arrow-right);width: 24px;margin-left: 20px;transition: 0.3s ease-in;-o-transition: 0.3s ease-in;-ms-transition: 0.3s ease-in;-moz-transition: 0.3s ease-in;-webkit-transition: 0.3s ease-in;}
.btn-secondary:hover:after {margin-left: 40px;}
.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle, .btn-secondary.focus, .btn-secondary:focus {background: none; color: inherit; outline: none !important; box-shadow: none !important;}

.btn-success {position: relative; padding: 20px; text-transform: uppercase; background: green; letter-spacing: 0px; transition: 0.3s ease-in;-o-transition: 0.3s ease-in;-ms-transition: 0.3s ease-in;-moz-transition: 0.3s ease-in;-webkit-transition: 0.3s ease-in;}
.btn-success:hover {background: #00c700;}
.btn-success:after {content: var(--mv-arrow-next);width: 24px;margin-left: 40px;transition: 0.3s ease-in;-o-transition: 0.3s ease-in;-ms-transition: 0.3s ease-in;-moz-transition: 0.3s ease-in;-webkit-transition: 0.3s ease-in;top: 22px;position: absolute;right: 10%;}
.btn-success:hover:after {right: 5%;}

.video-btn {background-color: transparent; border: none; transition: all 0.5s;}
.video-btn:focus,
.video-btn:hover {background-color: transparent; border: none; outline: none; scale: 1.2;}
.video-btn i { font-size: 72px; color: var(--primary-color);}

.alert p:last-child {margin: 0;}

.btn-default {text-transform: uppercase; background: var(--primary-color); color: #fff; font-size: 16px; border-radius: 4px;}
.btn-back {}
.btn-back:before{background-image: var(--mv-arrow-back);background-size: 22px 16px;display: inline-block;width: 22px;height: 16px;background-size: cover;content:"";top: 2px;position: relative;margin-right: 10px;}
.pull-right {float: right;}

/* Modal 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; 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: #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: 1.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 a {pointer-events: none;}
.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 .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: 1.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; }

.modal.fixed-left .menu-content .main-menu .navbar-nav li.dropdown::after {position: absolute; margin-left: 75vw;}
.modal.fixed-left .title-bar .button-filler {display: none;}

/* ============================================
        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; }

@media only screen and (min-width: 1399px) {

  .col-xxl-4 {flex: 0 0 33.333333%; max-width: 33.333333%;}

}

@media only screen and (max-width: 1439px) {
  :root {
    --container-width: 1140px;
  }

 .my-10 { margin-top: 6rem !important; margin-bottom: 6rem !important;}

}

@media only screen and (max-width: 1199px) {
  :root {
    --container-width: 960px;
  }

  .my-10 { margin-top: 5rem !important; margin-bottom: 5rem !important;}

}

@media only screen and (max-width: 991px) {
  :root {
    --container-width: 720px;
  }

  .my-10 { margin-top: 4rem !important; margin-bottom: 4rem !important;}

}

@media only screen and (max-width: 767px) {
  :root {
    --container-width: 540px;
  }
}

@media only screen and (max-width: 575px) {
  :root {
    --container-width: 100%;
  }
}