*{margin: 0; padding: 0; box-sizing: border-box;}
body{margin: 0; padding: 0; box-sizing: border-box; font-family: var(--font1);}

/* Main */
:root{
    --color1:#1a3769;
    --color2: rgb(53, 186, 200);
    --color3: #189e59;

    --font1: 'Montserrat', sans-serif;
    --font2: 'Kanit', sans-serif;

    --width: 1400px;
}

/* MAIN */
.alert-danger{position: fixed; bottom: 20%; right: 0; padding: 20px; background-color: red; z-index: 999; border-radius: 10px 0 0 10px; color: #fff;}
.btn{padding: 10px 15px; border-radius: 5px; background-color: var(--color2); color: #fff; border: none; cursor: pointer; transition: all 0.2s ease-in-out;}
.btn:hover{transition: all 0.2s ease-in-out; background-color: #ab0235d5;}

/* Btn website */
.btn_site{display: flex; justify-content: center; align-items: center; padding: 10px 20px; background-color: var(--color3); border-radius: 20px; color: #fff; text-decoration: none; transition: all 0.2s ease-in-out;}
.btn_site i{margin-top: -4px; padding-left: 5px; transition: all 0.2s ease-in-out;}
.btn_site:hover{background-color: var(--color2); transition: all 0.2s ease-in-out;}
.btn_site:hover i{padding-left: 10px; transform: rotate(45deg); transition: all 0.2s ease-in-out;}

/* Mobiel menu */
.mobile_menu{display: flex; justify-content: center; align-items: flex-start; width: 100%; height: 100vh; position: fixed; top: 0; left: 0;  background-repeat: no-repeat; background-position: center; background-size: cover; object-fit: cover; z-index: 99999999999999; overflow: scroll;}
.mobile_menu_inner{display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; padding: 20px;}
.mobile_menu_inner .top{position: sticky; top: 20px; display: flex; justify-content: space-between; align-items: center; width: 100%;}
.mobile_menu_inner .top img{width: 250px;}
.mobile_menu_inner .top i{font-size: 30px; color: #fff;}
.mobile_menu_inner .center{display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; margin-top: 100px;}
.mobile_menu_inner .center a{display: flex; text-align: center; text-decoration: none; padding: 10px; border-radius: 5px; color: #fff; padding: 5px 20px;}
.mobile_menu_inner .center p{font-family: var(--font2);font-weight: 500; font-size: 26px;}
.mobile_menu_inner .light{margin-left: 10px; }
.mobile_menu_inner .light p{color: #ffffffb0; font-family: var(--font1); font-size: 16px; line-height: 1;}
.mobile_menu .mobile_menu_error{display: flex; justify-content: center; align-items: center; position: absolute; right: 30px; bottom: 30px; width: 50px; height: 50px; background-color: var(--color2); border-radius: 50%;}
.mobile_menu .mobile_menu_error i{font-size: 25px; color: #fff;}


/* Navigation */
.topbar{display: flex; justify-content: center; align-items: center; width: 100%;background-color: var(--color3);}
.topbar_inner{display: flex; justify-content: center; align-items: center; width: 100%; max-width: var(--width); padding: 12px 20px;}
.topbar_inner .item{display: flex; align-items: center; text-decoration: none; color: #fff; font-size: 14px;}
.topbar_inner .item i{margin-right: 5px; color: var(--color1);}

/* Navbar */
.navbar{position: sticky; top: 0px; display: flex; justify-content: center; align-items: center; width: 100%; background-color: #fff; z-index: 999;}
.navbar_inner{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%; max-width: var(--width); padding: 20px;}
.navbar_inner .quotation_button{padding: 10px 20px; color: #fff; background-color: var(--color2); border-radius: 30px; transition: 0.2s ease-in-out;}
.navbar_inner .quotation_button:hover{background-color: #fff; border-radius: 0; transition: 0.2s ease-in-out;}
.navbar_inner .left{width: 20%;}
.navbar_inner .left img{width: 250px;}
.navbar_inner .right{display: flex; justify-content: flex-end; align-items: center; width: 75%;}
.navbar_inner .right a {margin: 0 20px; white-space: nowrap; text-decoration: none; font-size: 18px; font-weight: 600; font-family: var(--font2); color: var(--color1); position: relative;}
.navbar_inner .right .active_item {color: var(--color3);}
.navbar_inner .right a::after{ content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: var(--color1);  transform: scaleX(0); transform-origin: 0 100%; transition: transform 0.2s ease-in-out; }
.navbar_inner .right a:hover::after {transform: scaleX(1);}
.navbar_inner .right .dropdown_parent {position: relative;}
.navbar_inner .right .dropdown {display: flex; justify-content: center; align-items: center; position: absolute; width: 330px; top: 230px; left: -10px;}
.navbar_inner .right .dropdown_inner {display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; background-color: #fff;box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; border-radius: 10px; width: 100%; padding: 15px 10px; position: absolute; bottom: 0px; left: 0px;}
.navbar_inner .right .dropdown_inner a{margin-bottom: 5px; font-weight: 300;}
.navbar_inner .second{display: none;}
.navbar_inner .second i{font-size: 30px; cursor: pointer; color: var(--color1);}
@media only screen and (max-width: 1300px) {
    .navbar_inner .right a{font-size: 14px;}
}
@media only screen and (max-width: 1070px) {
    .navbar_inner .right{width: 84%;}
    .navbar_inner .left{width: 15%;}
    .navbar_inner .left img{width: 100px;}
    .navbar_inner .right .dropdown{width: 270px; top: 190px;}
}
@media only screen and (max-width: 1000px) {
    .navbar_inner .first{display: none;}
    .navbar_inner .second{display: flex;}
}

/* Lightbox */
.lightbox .lb-image{border: none !important;}

/* Authentication */
.login{display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; background-repeat: no-repeat; background-position: top; background-size: cover; object-fit: cover;}
.login_inner{display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; max-width: 500px; padding: 20px; border-radius: 1.25rem; box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; background-color: #ffffff; border: 1px solid var(--border); margin: 0 10px;}
.login_inner .login_img{width: 200px; height: auto; object-fit: contain; margin-bottom: 40px;}
.login_inner h1{margin-bottom: 40px; font-size: 24px; color: var(--theme1); font-family: var(--font1); font-weight: 500;}
.login_inner .item{margin-bottom: 20px; display: flex; align-items: flex-start; justify-content: flex-start; width: 100%; flex-direction: column;}
.login_inner .item .is-invalid{border: 1px solid red; outline: red;}
.login_inner .item .invalid-feedback{margin-top: 5px; font-size: 14px; font-weight: 600; color: red;}
.login_inner .item label{margin-bottom: 10px; font-size: 14px;}
.login_inner .item input{width: 100%;box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; padding: 10px; font-size: 18px; border: none; border-radius: 10px;}
.login_inner small{color: #204b9b; font-style: italic; margin-top: 30px;}
.login_inner a{color: #204b9b;}
.login_inner button{transition: all 0.1s ease-in-out; width: 100%; background-color: var(--color2); padding: 10px; border-radius: 10px; box-shadow: var(--boxshadow); color: #fff; border: 0; cursor: pointer; margin-top: 20px;}
.login_inner button:hover{transition: all 0.1s ease-in-out;  background-color: var(--color1);}


/* Admin */
.set_sidebar_fixed { position: fixed; top: 60px; left: 0; width: 200px;}
.sidebar { position: fixed; display: flex; justify-content: center; align-items: flex-start; height: 100vh; width: 300px; background-color: #fff; box-shadow: #0000004f 0px 2px 20px 0px; transition: all 0.3s ease-in-out; margin-top: -11px; border-top: 1px solid var(--border);}
.sidebar_inner { display: flex; justify-content: space-between; align-items: flex-start; flex-direction: column; width: 100%; max-width: 100%; height: calc(100vh - 60px); margin-top: 5px;}
.sidebar_inner p{ margin-top: auto !important; margin-bottom: 0rem !important;}
.sidebar_inner a { text-decoration: none !important; color: inherit !important;}
.sidebar_inner .top { width: 100%; padding: 10px; font-weight: 400; font-size: 14px; color: #101827;}
.sidebar_inner .item { display: flex; align-items: center; width: 100%; padding: 8px 15px; border-radius: 10px; margin-bottom: 3px;}
.sidebar_inner .active_item { display: flex; align-items: center; width: 100%; padding: 8px 15px; border-radius: 10px; background-color: var(--color2); color: #fff; margin-bottom: 3px;}
.sidebar_inner .item:hover { background-color: var(--color2); color: #fff; transition: all 0.1s ease-in-out;}
.sidebar_inner .item .active { color: #fff;}
.sidebar_inner .item i { width: 30px; font-size: 14px; padding-right: 10px;}

/* Authentication */
.auth_frame{display: flex; justify-content: center; align-items: center; width: 100%; margin-top: 50px;}
.auth_frame_inner{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%; max-width: var(--width); padding: 20px;}
.auth_frame_inner h1{margin-bottom: 20px;}
.auth_frame_inner h1 span{color: var(--color2);}
.auth_frame_inner .left{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 48%; height: 600px;}
.auth_frame_inner .right{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column;width: 48%; height: 600px;}
.auth_frame_inner .item{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; margin: 10px 0; width: 100%;}
.auth_frame_inner .item span{color: var(--color2);}
.auth_frame_inner .item label{margin-bottom: 5px;}
.auth_frame_inner .item input{width: 100%; padding: 10px; border: 1px solid #e6edf4;}
@media only screen and (max-width: 750px) {
    .auth_frame_inner .left{width: 100%; height: auto; margin-bottom: 50px;}
    .auth_frame_inner .right{width: 100%; height: auto;}
}

/* topbar */
.set_topbar_fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 2;}
.topbar_main { display: flex; justify-content: center; align-items: center; width: 100%; background-color: #fff; height: 50px; border-bottom: 1px solid #e1e8eb62;}
.topbar_main_inner { display: flex; justify-content: space-between; align-items: center; flex-direction: row; width: 100%; max-width: 100%;}
.topbar_main_inner .item h1 { font-weight: 600; color: var(--theme); padding: 15px;}
.topbar_main_inner .item { display: flex; justify-content: center; align-items: center; flex-direction: row;}
.topbar_main_inner .message { position: relative; color: var(--theme); padding: 10px; margin-right: 20px; border-radius: 10px; font-size: 20px; cursor: pointer;}
.profile_bar{ position: absolute; display: flex; justify-content: center; align-items: center; width: auto; top: 50px; right: 0px; background-color: #fff; border-radius: 0.475rem; padding: 10px; box-shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);}
.profile_bar_inner{ display: flex; justify-content: center; align-items: flex-start; flex-direction: column; width: 100%;}
.profile_bar_inner a{text-decoration: none; font-size: 14px; color: #3F4254; padding: 5px 10px; width: 100%; transition: all 0.2s ease-in-out;}
.profile_bar_inner a:hover{ background-color: #f0f9fe; transition: all 0.2s ease-in-out; border-radius: 4px; color: #009ef7;}
.profile_bar_inner .line_between{ height: 1px; width: 100%; background-color: #f8f8f8; margin: 10px 0;}
.profile_bar_inner .top{ display: flex; justify-content: space-between; align-items: center; width: 100%; border-bottom: 1px solid #f8f8f8; padding: 10px;}
.profile_bar_inner .top .left{ font-size: 30px; padding-right: 20px;}
.profile_bar_inner .top .right h5{ font-size: 14px; font-weight: 600;}
.profile_bar_inner .top .right p{ font-size: 12px; color: #A1A5B7;}
.topbar_main_inner .logout a { display: flex; justify-content: center; align-items: center; flex-direction: row; text-decoration: none; color: #fff;}
.topbar_main_inner .logout i { padding-right: 5px;}
.topbar_main_inner img.sidebar_logo { display: flex; justify-content: flex-start; width: auto; padding: 10px 0px 10px 10px; height: 50px; object-fit: contain;}
.topbar_main_inner form button { background-color: #fafafa; box-shadow: none !important; padding: 5px 10px 7px 10px; margin-left: -50px; font-size: 16px; border-radius: 10px; margin-top: 1px; border: none; color: #6d181f33; cursor: pointer; transition: all 0.3s ease-in-out;}
.topbar_main_inner form input { width: 600px; border: none; height: 40px; border-radius: 28px; padding: 10px; background-color: #fafafa;}
.topbar_main_inner form input:focus { box-shadow: 0 0 2px var(--primary) !important;}
.line_between{ height: 1px; background-color: rgba(206, 202, 202, 0.402); margin: 30px 0 10px 0; width: 100%;}

/* Responsive */
@media only screen and (max-width: 950px) {
    .topbar_main_inner form input { width: 400px;}
}
@media only screen and (max-width: 750px) {
    .topbar_main_inner form input { width: 300px;}
}
@media only screen and (max-width: 700px) {
    .topbar_main_inner .logout p { display: none;}
    .topbar_main_inner .logout i { padding-right: 0px;}
}
@media only screen and (max-width: 650px) {
    .sidebar {width: 60px;}
    .sidebar_inner .top p {display: none;}
    .sidebar_inner .item i { width: 0px; padding-right: 0px; margin-left: -3px;}
    .sidebar_logo_mobile { display: block;}
    .sidebar_inner .bottom .item_bottom p {display: none;}
    .sidebar_inner .bottom .item_bottom i { padding-left: 0px;}
}
@media only screen and (max-width: 600px) {
    .topbar_main_inner form input { width: 250px;}
}
@media only screen and (max-width: 500px) {
    .set_rightbar_fixed { width: 250px;}
}
@media only screen and (max-width: 400px) {
    .topbar_main_inner form input { width: 150px;}
}

.main { margin-left: 330px; margin-top: 65px; margin-right: 30px; margin-bottom: 30px;}
@media only screen and (max-width: 650px) {
.main { margin-left: 90px;}
}

.welcome{display: flex; justify-content: flex-start; align-items: center; width: 100%; margin-top: 50px; margin-bottom: 20px;}
.welcome_inner{display: flex; justify-content: flex-start; align-items: center; width: 100%; max-width: 600px; padding: 0 20px; background-color: #fff; box-shadow: 0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);; border-radius: 0.75rem; padding: 20px;}
.welcome_inner .profile{display: flex; justify-content: center; align-items: center; background-color: #101827; color: #fff; font-size: 25px; width: 50px; height: 50px; border-radius: 50%; margin-right: 20px;}
.welcome_inner h3{font-size: 1.25rem; font-weight: 600;}
.welcome_inner a{font-size: 14px; font-weight: 300; text-decoration: none; color: var(--color2);}

/* Pagina Titel */
.page_title{display: flex; justify-content: center; align-items: center; width: 100%; margin: 20px 0;}
.page_title_inner{display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; width: 100%; max-width: 100%;}
.page_title h1{font-weight: 600; font-size: 25px; margin-top: 10px;}
@media only screen and (max-width: 900px) {
    .page_title a{margin-bottom: 5px;}
}

/* Table */
.main-wrapper{ width: 100%; overflow-x: auto; margin-top: 20px; padding: 10px; border-radius: 5px 5px 0 0; font-family: var(--font2); background-color: #fff; border-radius: 10px; border: 1px solid var(--border);}
.main-wrapper .filter-wrapper{margin: 10px 0; background-color: #e0dddd1e; padding: 10px; border-radius: 10px;}
.main-wrapper .filter-wrapper label{font-weight: bold;}
.main-wrapper .filter-wrapper select{padding: 10px; border-radius: 10px;box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; width: 100%;}
.responsive-table{display: inline-block;min-width: 100%;}
.responsive-table .top_table{display: flex; justify-content: center; align-items: center; width: 100%; margin-bottom: 20px;}
.responsive-table .top_table_inner{display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; width: 100%; max-width: 100%;}
.responsive-table .top_table_inner .item{width: 20%; margin-right: 10px;}
.responsive-table .top_table_inner .item select{padding: 5px 10px; border-radius: 5px; height: 37px; margin-bottom: 10px; border: 1px solid #cccccc;}
.responsive-table .searchbar{width: 100%; padding: 5px 10px; border-radius: 5px; margin-bottom: 10px; border: 1px solid #cccccc;}
.responsive-table > table {width: 100%;border-collapse: collapse;}
.responsive-table > table thead {background-color: #f7f8f8;color: #4b5563; font-family: 300 !important; font-size: 14px;}
.responsive-table > table thead i{color: #aa596070;}
.responsive-table > table a{color: var(--color2);text-decoration: none;cursor: pointer;}
.responsive-table > table td, th {border-bottom: 1px solid #cccccc;text-align: left;font-weight: 400; font-size: 14px; padding: 12px 8px; font-family: var(--font2) !important;}
.responsive-table > table .table-row:hover {background-color: #d5d7d8aa;}
.responsive-table > table .table-row img {width: 50px; height: 50px; object-fit: contain;}
.responsive-table > table .table-row .pay_status {padding: 2px 5px; border-radius: 5px; text-align: center; color: #fff; text-transform: uppercase; font-size: 12px;}
.responsive-table > table .table-row .paid {background-color: #4bd964;}
.responsive-table > table .table-row .failed {background-color: #ff3b2f;}
.responsive-table > table .table-row .expired {background-color: #b3b3b3;}
.responsive-table > table .table-row .canceled {background-color: #e57a16;}
.responsive-table > table .table-row .open {background-color: #1638e5;}
.responsive-table > table .table-row .mollie {background-color: #4bd964;}
.responsive-table > table .table-row .invoice {background-color: #fd00f4;}
.responsive-table > table .block_red {padding: 5px 10px; border-radius: 20px; background-color: red; text-align: center; color: #fff;}
.responsive-table > table .block_orangje {padding: 5px 10px; border-radius: 20px; background-color: orange; text-align: center; color: #fff;}
.responsive-table > table .block_green {padding: 5px 10px; border-radius: 20px; background-color: #9de54c; text-align: center; color: #fff;}
.responsive-table > table .row_count {font-weight: 500 !important; color: #000;}
nav[role="navigation"] {margin-top: 10px !important;}
nav[role="navigation"] div:first-child{justify-content: flex-start !important;}

/* Forms */
.form{display: flex; justify-content: center; align-items: center; width: 100%;}
.form_inner{display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 100%; max-width: 100%;}
.form_inner .item{width: 48%; margin-bottom: 20px;}
.form_inner .item img{width: 80px; height: 80px; object-fit: contain; border-radius: 10px; margin-top: 10px;}
.form_inner .item input{width: 100%; padding: 10px; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;}
.form_inner .item textarea{width: 100%; padding: 10px; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;}
.form_inner .item select{width: 100%; padding: 10px; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;}
.form_inner .button_slide{transition: all 0.2s ease-in-out; cursor: pointer; padding: 10px; border-radius: 10px; color: #000; background-color: #fff; box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;}
.form_inner .button_slide:hover{transition: all 0.2s ease-in-out; background-color: #cecece4f;}
@media only screen and (max-width: 900px) {
    .form_inner .item{width: 100%;}
}

.button{padding: 10px 20px; border-radius: 30px; background-color: var(--color3); color: #fff; text-decoration: none; transition: all 0.2s ease-in-out;}
.button:hover{opacity: 0.8; background-color: var(--color2); transition: all 0.2s ease-in-out;}
.btn{padding: 10px 20px; border-radius: 30px; background-color: var(--color3); color: #fff; text-decoration: none; transition: all 0.2s ease-in-out;}
.btn:hover{opacity: 0.8; transition: all 0.2s ease-in-out;}

.banner{display: flex; justify-content: center; align-items: center; width: 100%; height: 60vh;}
.banner_inner{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%;}
.banner_inner .left{display: flex; justify-content: center; align-items: flex-start; flex-direction: column; width: 40%; height: 60vh; background-repeat: no-repeat; background-size: cover; background-position: center; padding: 20px 100px 20px 100px;}
.banner_inner .left h1{color: #fff; margin-bottom: 20px;}
.banner_inner .left p{color: #fff; font-size: 14px; margin-bottom: 20px;}
.banner_inner .right_slider{width: 60%; height: 60vh;}
.banner_inner .right_slider .right{width: 100%; height: 60vh; background-repeat: no-repeat; background-size: cover; background-position: center;}
@media only screen and (max-width: 1200px) {
    .banner_inner .left{width: 60%;}
    .banner_inner .right_slider{width: 40%;}
}
@media only screen and (max-width: 800px) {
    .banner{height: auto;}
    .banner_inner .left{width: 100%; height: auto; padding: 100px 20px;}
    .banner_inner .right_slider{width: 100%; height: 250px;}
    .banner_inner .right_slider .right{width: 100%; height: 250px;}
}

.page_banner{position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 300px; object-fit: cover; background-repeat: no-repeat; background-position: top; background-size: cover;}
.page_banner .icon{position: absolute; right: 20px; bottom: -120px; width: 300px; object-fit: contain; opacity: 0.3;}
.page_banner .arrow{cursor: pointer; display: flex; justify-content: center; align-items: center; position: absolute; right: 20px; top: 45%; width: 100px; height: 100px; border-radius: 50%; background-color: whitesmoke; object-fit: contain; opacity: 0.8; transition: all 0.2s ease-in-out;}
.page_banner .arrow:hover{opacity: 1; transition: all 0.2s ease-in-out;}
.page_banner .arrow i{font-size: 40px; color: var(--color2);}
.page_banner_inner{display: flex; justify-content: center; align-items: flex-start; flex-direction: column; flex-wrap: wrap; width: 100%; max-width: var(--width); padding: 20px;}
.page_banner_inner p{display: flex; justify-content: flex-start; align-items: center; flex-direction: row; padding-top: 50px; width: 100%; color: #fff;}
.page_banner_inner p a{text-decoration: none; color: #fff; transition: all 0.2s ease-in-out;}
.page_banner_inner p .active{color: var(--color2);}
.page_banner_inner p a:hover{color: var(--color2); transition: all 0.2s ease-in-out;}
/*.page_banner_inner p::before {content: "";display: block;width: 30px;height: 2px;background: var(--color2);margin-right: 10px;}*/
.page_banner_inner h1{color: #fff; font-family: var(--font1); margin-top: 20px; font-size: 50px; margin-bottom: 20px; width: 50%;}
@media only screen and (max-width: 1000px) {
    .page_banner_inner h1{width: 100%;}
    .page_banner .arrow{top: 80%}
}
@media only screen and (max-width: 500px) {
    .page_banner_inner h1{font-size: 35px;}
}

.between_block{display: flex; justify-content: center; align-items: center; width: 100%; height: 400px; background-position: center; background-repeat: no-repeat; background-size: cover; object-fit: cover; padding: 20px; margin: 100px 0;}
.between_block_inner{display: flex; justify-content: center; align-items: flex-start; flex-direction: column; width: 100%; max-width: var(--width); padding: 20px;}
.between_block_inner h1{font-size: 35px; margin-bottom: 20px; color: #fff;}
.between_block_inner p{margin-bottom: 20px; color: #fff;}
@media only screen and (max-width: 800px) {
    .between_block{height: 600px;}
}

/* Tekstblok 2 */
.text_block2{display: flex; justify-content: center; align-items: center; width: 100%; padding: 80px 0 0 0;}
.text_block2_inner .left{width: 32%;}
.text_block2_inner .left h1{font-size: 45px; font-family: var(--font2); color: var(--color3); font-weight: 400; line-height: 1.4;}
.text_block2_inner .left h1 b{font-weight: 600;}
.text_block2_inner .right{width: 63%;}
.text_block2_inner .right p{font-weight: 400; font-size: 16px; line-height: 1.6;}
.text_block2_inner .right strong{font-weight: 600; font-size: 14px;}
.text_block2_inner .right img{object-fit: contain; width: 300px;}
.text_block2 .right .title{margin-top: 60px;font-size: 25px; font-family: var(--font2); font-weight: 400; line-height: 1.4;}
.text_block2 .right .partners{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
.text_block2 .right .partners a{margin: 10px; text-decoration: none; border-bottom: 0px;}
.text_block2 .right .partners img{width: 200px;}.text_block2_inner{display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 100%; max-width: var(--width); padding: 20px;}
@media only screen and (max-width: 1200px) {
    .text_block2_inner .left h1{font-size: 35px;}
}
@media only screen and (max-width: 800px) {
    .text_block2{padding: 0;}
    .text_block2_inner .left{width: 100%; margin-bottom: 20px; margin-top: 50px;}
    .text_block2_inner .right{width: 100%;}
}
@media only screen and (max-width: 420px) {
    .text_block2_inner .left h1{font-size: 25px;}
    .text_block2_inner .right p{font-size: 16px;}
}

/*Services*/
.service_block{display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; padding: 50px 0;}
.service_block .load_more_button{color: #006bf7; margin: 20px 0; cursor: pointer;}
.service_block_inner{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%; max-width: var(--width); padding: 20px;}
.service_block_inner .service_block_item{display: flex; justify-content: flex-end; align-items: flex-start; flex-direction: column; text-decoration: none; width: 50%; height: 500px; padding: 40px; background-repeat: no-repeat; background-size: cover; background-position: center; object-fit: cover; transition: all 0.2s ease-in-out;}
.service_block_inner .service_block_item:hover .button{margin-left: 10px; transition: all 0.2s ease-in-out;}
.service_block_inner .service_block_item_right:hover .button{margin-right: 10px; transition: all 0.2s ease-in-out;}
.service_block_inner .service_block_item_right:hover h1{margin-right: 10px; transition: all 0.2s ease-in-out;}
.service_block_inner .service_block_item h1{font-size: 45px; font-family: var(--font1); color: #fff; font-weight: 600; line-height: 1.4; padding-bottom: 20px; transition: all 0.2s ease-in-out;}
.service_block_inner .service_block_item:hover h1{padding-left: 10px; transition: all 0.2s ease-in-out;}
@media only screen and (max-width: 1000px) {
    .service_block_inner .service_block_item{width: 100%; height: 350px;}
    .service_block_inner .service_block_item_right:hover h1{margin: 0}
    .service_block_inner .service_block_item h1{font-size: 25px;}
    .service_block_inner .service_block_item:hover h1{padding-left: 0}
}

/*Project uitgelicht*/
.project_images{display: flex; justify-content: center; align-items: center; width: 100%; margin-top: 50px;}
.project_images_inner{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%; max-width: var(--width); padding: 20px;}
.project_images_inner a{width: 49%; border-radius: 10px; height: 500px; margin-bottom: 25px; transition: all 0.2s ease-in-out;}
.project_images_inner a img{width: 100%; height: 500px; border-radius: 10px; object-fit: cover; transition: all 0.2s ease-in-out;}
.project_images_inner a:hover{transform: scale(0.98); transition: all 0.2s ease-in-out;}
@media only screen and (max-width: 800px) {
    .project_images_inner a{width: 100%;}
}
@media only screen and (max-width: 600px) {
    .project_images_inner a{width: 100%; height: 300px;}
    .project_images_inner a img{height: 300px;}
}

.home_about{display: flex; justify-content: center; align-items: center; width: 100%; padding: 50px 0; margin: 50px 0;}
.home_about_inner{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%; max-width: 100%;}
.home_about_inner ul{margin-left: 30px !important; margin-top: 10px;}
.home_about_inner .left{display: flex; justify-content: center; align-items: flex-end; flex-direction: column; width: 35%; padding: 20px; height: auto;}
.home_about_inner .left img{width: 100%; border-radius: 10px; margin-right: -140px; z-index: 1; object-fit: contain; margin-bottom: 20px;}
.home_about_inner .right{position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; width: 62%; background-color: rgba(53, 186, 200, 0.07); border-radius: 10px 0 0 10px; padding: 20px; height: auto;}
.home_about_inner .right .text{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column;width: 70%; padding: 20px 0;}
.home_about_inner .right .text h5{ margin-bottom: 20px;}
.home_about_inner .right .text h1{font-weight: 700; font-family: var(--font1); font-size: 40px; color: var(--color1); margin-bottom: 20px; line-height: 1.2;}
.home_about_inner .right .text p{font-weight: 400; font-size: 15px; line-height: 1.4;}
.home_about_inner .right .text .point{display: flex; text-decoration: none; color: inherit; justify-content: flex-start; align-items: center; width: 100%; margin-bottom: 10px; font-family: var(--font2); font-weight: 600 !important;}
.home_about_inner .right .text .point i{display: flex; justify-content: center; align-items: center; background-color: var(--color2); width: 25px; height: 25px; margin-right: 15px; color: #fff; border-radius: 50%;}
@media only screen and (max-width: 1200px) {
    .home_about_inner .left img{margin-right: -100px;}
}
@media only screen and (max-width: 1000px) {
    .home_about_inner .left img{margin-right: 0px;}
    .home_about_inner .left{width: 38%;}
    .home_about_inner .right{width: 60%;}
    .home_about_inner .right .text{width: 100%;}
}
@media only screen and (max-width: 750px) {
    .home_about{margin-top: -50px;}
    .home_about_inner{flex-direction: column-reverse;}
    .home_about_inner .left{width: 100%; height: auto;}
    .home_about_inner .left img{height: 350px;}
    .home_about_inner .right{width: 100%; height: auto; min-height: auto; padding: 50px 20px;}
}
@media only screen and (max-width: 800px) {
    .home_about_inner .right .text h1{font-size: 25px;}
}

.contact_items{display: flex; justify-content: center; align-items: center;width: 100%; margin-top: 50px;}
.contact_items_inner{display: flex; justify-content: space-between; align-items: center;flex-wrap: wrap; width: 100%; max-width: var(--width);}
.contact_items_inner .contact_items_inner_item{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 49%; margin-bottom: 20px;}
.contact_items_inner .contact_items_inner_item h5{display: flex; font-weight: 600; color: var(--color1); font-size: 20px;}
.contact_items_inner .contact_items_inner_item h5 i{margin-right: 10px; color: var(--color1);}
@media only screen and (max-width: 500px) {
    .contact_items_inner .contact_items_inner_item{width: 100%;}
}
.contact_form{display: flex; justify-content: center; align-items: center; width: 100%;}
.contact_form_inner{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%;}
.contact_form_inner .item{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 48%; margin-bottom: 20px;}
.contact_form_inner .item label{font-weight: 600; margin-bottom: 5px; color: var(--color1);}
.contact_form_inner .item input{width: 100%; padding: 10px; border-radius: 5px; background-color: whitesmoke;border: 1px solid #cccccc;}
.contact_form_inner .item textarea{width: 100%; padding: 10px; border-radius: 5px; background-color: whitesmoke;border: 1px solid #cccccc; font-family: var(--font1);}
.contact_form_inner .item button{border: none; cursor: pointer;}
@media only screen and (max-width: 500px) {
    .contact_form_inner .item{width: 100%;}
}
.tox-promotion{display: none !important;}
.tox-statusbar__branding{display: none;}

.thanks{display: flex; justify-content: center; align-items: center; width: 100%; padding: 50px 0; margin: 100px 0;}
.thanks_inner{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%; max-width: var(--width); padding: 20px;}
.thanks_inner h1{color: var(--color3); font-size: 30px; margin-bottom: 10px; font-family: var(--font1); font-weight: 600; line-height: 1.2;}

/*Footer*/
.footer_img{margin-top: 50px; width: 100%; height: 200px; background-size: cover; background-repeat: no-repeat; background-position: center; object-fit: cover;}
.footer{display: flex; justify-content: center; align-items: center; width: 100%; background-color: var(--color1); padding: 80px 0;}
.footer_inner{display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 100%; max-width: var(--width); padding: 20px;}
.footer_inner .item{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 22%;}
.footer_inner .item img{width: 250px; object-fit: contain;}
.footer_inner .social_icons{display: flex; justify-content: center; align-items: center; width: 100%; margin: 20px 0;}
.footer_inner .social_icons_inner{display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; width: 100%; max-width: 100%;}
.footer_inner .social_icons_inner .icon{display: flex; text-decoration: none; color: #fff; justify-content: center; align-items: center;transition: all 0.2s ease-in-out; font-size: 16px; width: 35px; height: 35px; border: 1px solid #9394a8; border-radius: 50%; margin-right: 10px; margin-bottom: 10px;}
.footer_inner .social_icons_inner .icon a{color: #fff; transition: all 0.2s ease-in-out;}
.footer_inner .social_icons_inner .icon:hover{border: 1px solid #fff; transition: all 0.2s ease-in-out;}
.footer_inner .social_icons_inner .icon:hover i{color: #fff; transition: all 0.2s ease-in-out;}
.footer_inner .item .item_click{color: #fff; text-decoration: none; margin-bottom: 15px; transition: all 0.2s ease-in-out;}
.footer_inner .item .item_click:hover{opacity: 0.8; transition: all 0.2s ease-in-out;}
.footer_inner .item h5{margin-bottom: 20px; color: #fff; font-weight: 600; font-size: 20px; transition: all 0.2s ease-in-out;}
@media only screen and (max-width: 1100px) {
    .footer_inner .item{width: 48%; margin-bottom: 20px;}
}
@media only screen and (max-width: 600px) {
    .footer{padding-bottom: 20px;}
    .footer_inner .item{justify-content: center; align-items: center; width: 100%;}
    .footer_inner .social_icons_inner{justify-content: center; align-items: center}
}
.footer_credit{display: flex; justify-content: center; align-items: center; width: 100%; background-color: var(--color1);}
.footer_credit_inner{display: flex; justify-content: center; align-items: center; width: 100%; max-width: var(--width); padding: 20px}
.footer_credit_inner p{text-align: center; font-size: 14px; color: #fff;}
.footer_credit_inner a{padding-left: 5px; color: #fff;}


.overlay{display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; position: fixed; background-color: #000; z-index: 9999999999}
.overlay_inner{display: flex; justify-content: center; align-items: center; width: 100%; color: #fff;}

.steps{display: flex; justify-content: center; align-items: center; width: 100%;}
.steps_inner{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%; max-width: 1000px; padding: 20px;}
.steps_inner .step{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%; margin-bottom: 20px;}
.steps_inner .step .left{display: flex; align-items: center}
.steps_inner .step .left .count{display: flex; justify-content: center; align-items: center; color: #fff; width: 50px; height: 50px; border-radius: 50%; margin-right: 10px; background-color: var(--color2);}
.steps_inner .step .left .title{font-weight: bold;}
.steps_inner .step .desc{width: 100%; padding-left: 60px;}

.service_title{display: flex; justify-content: center; align-items: center; width: 100%;}
.service_title .arrows{display: flex; justify-content: center; align-items: center; margin-bottom: 12px; margin-left: 20px;}
.service_title .arrows div{display: flex; justify-content: center; align-items: center; padding: 10px; border-radius: 5px; cursor: pointer; transition: all 0.2s ease-in-out; border: 1px solid #cccccc; width: 35px; height: 35px; margin-right: 10px;}
.service_title .arrows div:hover{background-color: rgba(204, 204, 204, 0.21); transition: all 0.2s ease-in-out;}
.service_title_inner{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%; max-width: var(--width); padding: 20px;}
.service_title_inner h1{font-weight: 700; font-family: var(--font1); font-size: 40px; color: var(--color1); margin-bottom: 20px; line-height: 1.2;}
@media only screen and (max-width: 800px) {
    .service_title_inner h1{font-size: 25px;}
}

.service_blocks_bottom{display: flex; justify-content: center; align-items: center; width: 100%;}
.service_blocks_bottom_inner{display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; width: 100%; max-width: var(--width); padding: 20px;}
.service_blocks_bottom_inner a{text-decoration: none; color: inherit; margin-bottom: 20px;}
.service_blocks_bottom_inner .service_blocks_bottom_inner_item{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 30%; margin-right: 20px;}
.service_blocks_bottom_inner .service_blocks_bottom_inner_item p{font-weight: 400;font-size: 16px;line-height: 1.6;}
.service_blocks_bottom_inner .service_blocks_bottom_inner_item img{width: 100%; height: 300px; border-radius: 10px; object-fit: cover; margin-bottom: 20px;}
@media only screen and (max-width: 1000px) {
    .service_blocks_bottom_inner{justify-content: space-between;}
    .service_blocks_bottom_inner .service_blocks_bottom_inner_item{width: 47%; margin-right: 0;}
}
@media only screen and (max-width: 600px) {
    .service_blocks_bottom_inner{justify-content: center;}
    .service_blocks_bottom_inner .service_blocks_bottom_inner_item{width: 100%; margin-bottom: 20px;}
}


.crumbs{display: flex; justify-content: center; align-items: center; width: 100%; background-color: var(--color1); color: #fff; margin: 50px 0 80px 0;}
.crumbs_inner{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%; max-width: var(--width); padding: 30px 20px;}
.crumbs_inner .crumb_item{display: flex; justify-content: center; align-items: center; width: 23%;}
.crumbs_inner .crumb_item i{margin-right: 10px;}
.crumbs_inner .crumb_item p{font-weight: 600;}
@media only screen and (max-width: 900px) {
    .crumbs_inner .crumb_item{width: 100%; margin-bottom: 10px;}
}

.contact_banner{display: flex; justify-content: center; align-items: center; width: 100%; padding: 50px 0;}
.contact_banner_inner{display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%; max-width: var(--width); padding: 20px;}
.contact_banner_inner .left{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 48%;}
.contact_banner_inner .left h1{font-weight: 700; font-family: var(--font1); font-size: 40px; color: var(--color1); margin-bottom: 20px; line-height: 1.2;}
.contact_banner_inner .sub_banner_title{display: flex; justify-content: flex-start; align-items: center; color: var(--color2); margin-bottom: 10px;}
.contact_banner_inner .sub_banner_title i{margin-right: 5px;}
.contact_banner_inner .sub_banner_title p{margin-top: 2px;}
.contact_banner_inner .right{display: flex; justify-content: flex-start; align-items: flex-start;flex-direction: column; width: 48%;}
.contact_banner_inner .right img{width: 100%; height: 500px; object-fit: cover; border-radius: 10px}

.contact_blocks{display: flex; justify-content: center; align-items: center; width: 100%;}
.contact_blocks_inner{display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; width: 100%;}
.contact_blocks_inner .contact_blocks_inner_item{text-decoration: none; color: inherit; margin-right: 10px; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; padding: 10px; border-radius: 5px; border: 1px solid #cccccc; transition: all 0.2s ease-in-out; margin-bottom: 10px;}
.contact_blocks_inner .contact_blocks_inner_item:hover{background-color: rgba(204, 204, 204, 0.26); transition: all 0.2s ease-in-out;}
.contact_blocks_inner .contact_blocks_inner_item i{margin-right: 10px;}
.contact_blocks_inner .contact_blocks_inner_item div{font-size: 14px;}
@media only screen and (max-width: 900px) {
    .contact_banner_inner .left{width: 100%; margin-bottom: 20px;}
    .contact_banner_inner .left h1{font-size: 25px;}
    .contact_banner_inner .right{width: 100%;}
}


.reviews{display: flex; justify-content: center; align-items: center; width: 100%;}
.reviews_inner{display: flex; justify-content: center; align-items: center; width: 100%; max-width: 800px; padding: 20px;}
.reviews_inner .review{display: flex; justify-content: center; align-items: center; text-align: center; flex-direction: column; width: 100%;}
.reviews_inner .review h1{margin-bottom: 20px;}
@media only screen and (max-width: 900px) {
    .reviews_inner .review h1{font-size: 20px;}

}


.sitemap{display: flex; justify-content: center; align-items: center; width: 100%; padding-top: 50px;}
.sitemap_inner{display: flex; justify-content: flex-start; align-items: flex-start; flex-direction: column; width: 100%; max-width: var(--width); padding: 20px;}
.sitemap_inner .item_click{text-decoration: none; color: inherit; padding: 10px; border-radius: 5px; width: 100%; margin-bottom: 10px; border: 1px solid #cccccc; background-color: rgba(204, 204, 204, 0.11);}
.sitemap_inner .item_click b{font-weight: bold; color: var(--color1);}
.sitemap_inner .item_click p{font-size: 12px; margin-top: 5px;}

.slick-initialized .slick-slide {display: flex !important}