/*Menu reponsive*/
.btn_menu {
    display: none; position: absolute; top: 50%; right: 15px;
    background: #686868; margin-top: -10px; z-index: 1000;
}
.btn_menu span:before{
    content: '';
    position: absolute;
    width: 68%;
    height: 5px;
    background: #fff;
    top: 10px;
    right: 16%;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    opacity: 0;
}
.btn_menu span:after {
    content: '';
    position: absolute; top: 10px; left: 16%;
    width: 68%; height: 5px;
    background: #fff;
    box-shadow:
            0 10px 0 #fff,
            0 20px 0 #fff;

    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.btn_menu span {
    background: transparent; border: none;
    width: 48px; height: 45px;
    text-indent: -900em;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    outline: none;
    float: right;
    display: block;
    z-index: 999;
    font-size: 0;

    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.btn_menu.opened span:after{
    top: 20px;
    left: 16%;
    box-shadow: none;
    background: #fff;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.btn_menu.opened span:before{
    opacity: 1;
    top: 20px;
    right: 16%;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
@media only screen and (max-width: 1630px){
    .main_header_wrapper .col-right { float: left;}
}
@media only screen and (max-width: 1600px) {

    /*Homepage - Banner*/
    .home .page_banner .welcome_box {
        position: relative; top: auto; right: auto; height: auto; width: 100%;
    }
    .home .page_banner .welcome_box .welcome_box_inner {
        position: relative; top: auto; left: auto;
        transform: translate(0,0); -ms-transform: translate(0,0); -webkit-transform: translate(0,0);
        margin: auto; padding: 30px 20px;
        -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
    }
}
@media only screen and (max-width: 1280px) {
    .col-button a.btn-popup-form { padding: 15px 10px;}
    .main_header_wrapper .col-right { width: 57%;}
    .main-menu ul li { margin: 0 12px;}
}
@media only screen and (max-width: 1170px) {
    .main-menu ul li a { font-size: 15px;}
}
@media only screen and (max-width: 1050px) {
    /*Homepage - Contact section*/
    #block-bottom-d .home-form.main_content .home-form-inner {padding: 0 30px;}
}
@media only screen and (min-width: 1081px) {.menu_container {display: block !important;}}
@media only screen and (max-width: 1080px) {
    .col-button {
        right: 130px; top: 35px;
    }
    .page-banner-wrapper,
    .home .page_banner {/* padding: 108px 0 0; */}
    .main_header_wrapper {padding: 15px 0; position: fixed; top: auto; left: auto;}
    .main_header_wrapper.menufixed {position: fixed;}
    .main_header_wrapper .col-left {width: 50%;}
    .main_header_wrapper .col-right {width: 50%;}
    /*Logo*/
    .main_header_wrapper .col-left .logo a {width: 340px; max-width: none;}
    /*Menu*/
    .btn_menu {display: block; top: 35px;}
    .menu_container {
        display: none; position: absolute; top: 88px; right: 0;
        background: #192d75; width: 100%; text-align: center; padding: 20px 0;
    }
    .main-menu ul li {float: none; clear: both;}
    .main-menu ul li:last-child {margin-right: 18px;}
    .main-menu ul li a {color: #fff; padding: 15px 0;}
    .main-menu ul li ul {
        display: none; position: relative; top: auto; left: auto;
        margin-left: auto; width: 100%;
    }
    .main-menu ul li:hover ul {display: none;}
    .showsub {
        -webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
        -moz-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
        -o-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
        transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
    }

    /* FLAG ICON */
    .flag-icon {margin:0; position:absolute; top:-5px; right:23px; left:auto;}

    /*Homepage - Aanbod section*/
    #block-bottom-a .aanbod-item {width: 50%;}

    /*Homepage - Counter section*/
    .items_statistics .item .item_number {font-size: 50px;}
    .items_statistics .item .item_title {font-size: 16px;}

    /*Inner page*/
    .page-banner-wrapper .page-banner {height: 350px;}
    .template-sidebar-left .page-content,
    .template-sidebar-left .menu-sidebar {width: 100%; float: none; clear: both; padding: 0;}
}
@media only screen and (max-width: 1020px) {
    #popup-form { width: 75%}
    /*Homepage - Contact section*/
    #block-bottom-d .home-form,
    #block-bottom-d .home-map {width: 100%; clear: both; float: none;}
    #block-bottom-d .home-form {padding: 35px 0;}
    #block-bottom-d .home-form.main_content .home-form-inner {float: none; clear: both; margin: auto;}
    #block-bottom-d .home-map #map-canvas {height: 300px !important;}
    #block-bottom-d .home-map.map-image img {max-width:unset;}

    /*Homepage - CTA section*/
    #block-bottom-b .conversion-buttons .conversion-col {width: 100%; clear: both; float: none;}
    #block-bottom-b .conversion-buttons .conversion-col.full-height .conversion-item .conversion-item-inner {height: 170px;}
    #block-bottom-b .conversion-buttons .conversion-col.full-height .conversion-item .conversion-item-inner .conversion-item-title,
    #block-bottom-b .conversion-buttons .conversion-col .conversion-item .conversion-item-inner .conversion-item-title {margin: 20px 0 10px;}

    /*Footer*/
    footer {padding: 20px 0;}
    footer .col2-3,
    footer .col1-3 {width: 100%; clear: both; float: none;}
    footer .col1-3 {margin: 20px 0 0 0; padding-left: 0;}
    footer .col2-3 .contact-detail-item .col1-3 {float: left; clear: none;}
    footer .col2-3 .contact-detail-item {padding-bottom: 15px; margin-bottom: 15px;}
    footer .col2-3 .contact-detail-item:last-child {border-bottom: 2px solid #fff;}
}
@media only screen and (max-width: 768px) {
    /*Logo*/
    .main_header_wrapper .col-left {width: 70%;}
    .main_header_wrapper .col-right {width: 30%;}
    .main_header_wrapper .col-left .logo a {width: 250px; max-width: none;}
    .main_header_wrapper .col-left .logo { padding: 12px 0;}


    /*Banner & page title*/
    .page-banner-wrapper .page-banner {height: 200px;}
    .page-title {font-size: 30px; padding: 10px 20px;}

    /*Editor - Visual Composer*/
    .main_content .vc_tta.vc_general .vc_tta-panel-title {font-size: 20px;}
    .mceContentBody h1, .main_content h1 {font-size: 30px;}
    .mceContentBody h2, .main_content h2 {font-size: 26px;}
    .mceContentBody h3, .main_content h3 {font-size: 24px;}
    .mceContentBody h4, .main_content h4 {font-size: 22px;}
    .mceContentBody h5, .main_content h5 {font-size: 20px;}
    .mceContentBody h6, .main_content h6 {font-size: 17px;}

    /*Gravity form - Contact form*/
    .main_content .gform_wrapper ul li.one-half-left,
    .main_content .gform_wrapper ul li.one-half-right {width: 100%; float: none; clear: both;}
    #popup-form .main_content .gform_wrapper form .gform_body ul li.gfield.one-half-left,
    #popup-form .main_content .gform_wrapper form .gform_body ul li.gfield.one-half-right {
        width: 100% !important; padding: 0 !important;
    }

    /*Homepage - Aanbod section*/
    #block-bottom-a {padding: 30px 0 0;}
    #block-bottom-a .aanbod-item {width: 100%; clear: both; float: none;}
    #block-bottom-a .aanbod-item.block-title .block-title-inner .aanbod-title {font-size: 30px;}
    #block-bottom-a .aanbod-item .aanbod-item-inner .aanbod-item-title {font-size: 20px;}
    .main_content .page-subpage {display: none !important;}
    .main_content .subpage-responsive {display: block !important;}

    /*Homepage - News section*/
    #block-bottom-c .block-title, #block-bottom-b .block-title {font-size: 30px;}
    .nieuws ul li {
        width: 100%; clear: both; float: none; margin-bottom: 20px;
    }
    .nieuws ul li .post-content {height: auto !important; }

    /*Contact page*/
    #contact_info::before {display: none;}
    #contact_info .contact_logo {display: none;}
    #contact_info .contact_content {height: auto !important;}

    /*Footer*/
    footer .col2-3 .contact-detail-item .col1-3 {width: 100%; clear: both; float: none;}
    footer .col1-3 .socials ul {margin: 20px 0 5px;}
    footer .col1-3 .socials ul li {margin-bottom: 15px;}
    footer .cta-button {flex-direction:column;}
    footer .cta-button .cta-button-item::before {left: 10px;}
    footer .cta-button .cta-button-item {font-size: 0; padding: 24px;}
    footer .cta-button .cta-button-item:not(:last-child) {margin-right:0; margin-bottom:3px;}
    footer .cta-button .cta-button-item.icon i {font-size:26px; left:12px;}
}
@media only screen and (max-width: 680px) {
    .btn_menu { top: 32px;}
    .main_header_wrapper .col-left .logo a { width: 240px; margin-top: 10px;}
}
@media only screen and (max-width: 640px) {
    .col-button {
        right: 33px; top: 55px;
    }
    .col-button a.btn-popup-form {
        padding: 10px; font-size: 12px;
    }
    .main_header_wrapper .col-left .logo a { margin: 0;}
    .btn_menu { top: 0;}
    .languages {
        position: absolute; right: 80px; top: 0;
    }

    /* FLAG ICON */
    .flag-icon {top:0; right:80px;}
}
@media only screen and (max-width: 550px) {
    .col-button { right: 15px;}

    /*Homepage - Counter section*/
    .items_statistics .item {width: 100%;}
    .items_statistics .item:not(:last-child) {margin: 0 0 30px;}
}
@media only screen and (max-width: 480px) {
    #popup-form { width: 90%;}

    /*Logo*/
    .main_header_wrapper .col-left .logo a img {margin-top: 0;}

    /*Homepage - News section*/
    #block-bottom-c .nieuws ul li .post-content .post-created,
    #block-bottom-c .nieuws ul li .post-content .post-excerpt,
    #block-bottom-c .nieuws ul li .post-content .btn_w_arrow_red {margin-left: 20px; margin-right: 20px;}

    /*Homepage - Aanbod section*/
    .main_content .page-subpage .subpage-item {width: 100%; float: none; clear: both;}
    .template-sidebar-left .menu-sidebar .sidebar-item span {font-size: 17px;}
}
@media only screen and (max-width: 380px) {
    .main_header_wrapper .col-left .logo a { width: 150px;}
    .main_header_wrapper .col-left .logo { padding: 22px 0;}
    .col-button a.btn-popup-form { font-size: 10px;}

    /*Homepage - Counter section*/
    .items_statistics .item .item_number {font-size: 40px;}
}