:root {
    font-size: 15px;
    --primary-margin: 3rem;
    --border-space: 26px;
    --primary-color: #5EC4FF;
    --secondary-color: #FF8119;
    --font-color: #000;
    --bg-color: #fff;
    --heading-color: #7f7f7f;
    --saturation: 1;
    --margin: 30px;
    --procenter: 100vh;
    --slide-height: 200px;
    /*    --gray: rgba(127, 127, 127, 1);
--blue: rgba(94, 196, 255, 1);
--orange: rgba(255, 129, 25, 1);
--green: rgba(90, 193, 142, 1);*/
    --top: 112px;
    --top-mobile: 71px;
    --top-alt: 30px;
    --top-mobile-alt: 10px;
    /*    --top: 112px;
--top-mobile: 71px;*/
    --bd-filter: 20px;
    /*    --border-style: solid 0px rgba(0, 0, 0, .4);*/
    --border-style: none;
    --border-style2: solid 2px rgba(0, 0, 0, .4);
    --blue: #0a9bff;
    --yellow: #ffc348;
    --green: #1ce3d4;
    --red: #f6777b;
    --gray: #90a3ad;
    --dark: rgba(26,26,55,1);
    --blue-soft: rgba(10, 155, 255, .8);
    --yellow-soft: rgba(255, 195, 72, .8);
    --green-soft: rgba(28, 227, 212, .8);
    --red-soft: rgba(246, 119, 123, .8);
    --gray-soft: rgba(146, 166, 176, 1);
    --dark-soft: rgba(26,26,55,.8);
    --blue-increase: rgba(10, 155, 255, 1);
    --yellow-increase: rgba(255, 195, 72, 1);
    --green-increase: rgba(28, 227, 212, 1);
    --red-increase: rgba(246, 119, 123, 1);
    --gray-increase: rgba(144, 163, 173, 1);
    --dark-increase: rgba(19, 3, 90, 1);
    --border-line: solid 1px rgba(0,0,0,.8);
    --shadow-color: rgba(47, 56, 73, .25);
    --shadow-color-light: rgba(47, 56, 73, .15);
}

/*@media screen and (max-width: 1200px) {
:root {
    --top: 112px;
}
}*/

.borderer {
/*    border: solid 2px rgba(40,40,40,1);*/
box-shadow: 0px 0px 2px rgba(0,0,0,.5) !important;
}

.borderer:hover {
    /*    border: solid 2px rgba(40,40,40,1);*/
    box-shadow: 1px 1px 2px rgba(0,0,0,.5) !important;
    transform: perspective(1px) translate(-1px, -1px) !important;
}

html, body {
margin: 0px;
padding: 0px;
overflow-x: hidden;
}

/*html {
overflow-y: scroll;
}*/

body {
background: var(--bg-color);
color: var(--font-color);
}

.fclick {
z-index: 50;
pointer-events: none;
}

.focusser {
transition: all .15s ease-in-out;
filter: saturate(0);
/*    opacity: .5;*/
/*    transform: scale(.9);*/
}

.focusser:hover {
    filter: saturate(1);
    opacity: 1;
/*        transform: scale(1);*/
}


.under_nav {
/*    transform: translateY(100px) !important;*/
background: black !important;
}

* {
font-family: 'Ubuntu', sans-serif;
}

::-webkit-resizer {
border-width: 8px;
border-style: solid;
border-color: transparent #d4ecff #d4ecff transparent;
}

::-webkit-scrollbar {
width: 14px;
height: 14px;
}

::-webkit-scrollbar-thumb {
height: 6px;
border: 3px solid rgba(0, 0, 0, 0);
background-clip: padding-box;
-webkit-border-radius: 7px;
background-color: rgba(0, 0, 0, 0.15);
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-button {
width: 0;
height: 0;
display: none;
}

::-webkit-scrollbar-corner {
background-color: transparent;
}

::-webkit-scrollbar-track {
    margin: 10px;
}

.extra-info {
display: none;
padding-left: 5%;
padding-right: 5%;
padding-bottom: 5%;
color: white;
transition: all .2s ease;
}

.info:hover .extra-info {
display: block;
color: white;
transition: all .2s ease;
}

.info {
font-size: 1rem;
padding-left: 0.5rem;
width: 1rem;
border-radius: 1rem;
color: #858585;
transition: all .2s ease;
max-width: 100%;
}

.info:hover {
    font-size: 1rem;
    background-color: #858585;
    padding: 0 0 0 0.5rem;
    width: 100%;
    text-align: left !important;
    color: white;
    transition: all .2s ease;
}

th, td {
padding-left: 1% !important;
padding-right: 1% !important;
}


.td-label {
width: 50%;
vertical-align: middle;
/*    padding-right: 5%;*/
/*    padding-left: 5%;*/
overflow-x: auto;
border: none;
}

.td-field {
text-align: right;
vertical-align: middle;
width: 50%;
/*    padding-right: 5%;*/
/*    padding-left: 5%;*/
overflow-x: auto;
border: none;
}

.td-help {
/*    width: 50px;*/
border: none;
}

.td-alt {
color: lightgray;
font-style: italic;
}

.gfg {
border-collapse: separate;
border-spacing: 0 0.8rem;
}

.special {
margin-top: calc(var(--primary-margin) * 2);
background-color: white;
border-radius: var(--border-space);
background: none;
}

.col-lg, .col-xl-3 {
padding: 0rem;
padding-bottom: 0px;
padding-top: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

/*.row {*/
/*    border-radius: var(--border-space) !important;*/
/*}*/

.marginer {
/*    padding-left: 2rem;*/
/*    padding-right: 2rem;*/
padding-top: var(--top);
}

.marginer-alt {
/*    padding-left: 2rem;*/
/*    padding-right: 2rem;*/
/*    padding-top: var(--top-alt);*/
}

.disclaim {
transition: all .15s ease-in-out;
position: fixed;
bottom: 0px;
right: 2.5rem;
z-index: 5000;
}

.row2 {
transition: all .15s ease-in-out;
-webkit-transition: all .15s ease-in-out;
-moz-transition: all .15s ease-in-out;
max-height: calc(80vh - 30px);
overflow: auto;
border-radius: 1.75rem;
margin-top: 2.4rem;
/*    margin-top: 1.3rem;*/
margin-bottom: 0px;
padding: .5rem;
padding-top: .7rem;
padding-bottom: 0px;
border: solid;
border-width: 7px;
border-color: rgba(255, 255, 255, 0);
background: var(--bg-color);
opacity: .9;
-webkit-box-shadow: 0px 1px 6px -4px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 1px 6px -4px rgba(0,0,0,0.75);
box-shadow: 0px 1px 6px -4px rgba(0,0,0,0.75);
animation: scale .2s;
-moz-animation: scale .2s; /* Firefox */
-webkit-animation: scale .2s; /* Safari and Chrome */
-o-animation: scale .2s; /* Opera */
/*    backface-visibility: hidden;*/
}

.row2:hover {
/*        transform: perspective(0px) scale(1.01) translate3d( 0, 0, 0);*/
/*        transform-origin: 50% 50%;*/
/*        padding-bottom: 3px;
    padding-top: 15px;*/
opacity: 1;
-webkit-box-shadow: 0px 1px 8px -3px rgba(0,0,0,1);
-moz-box-shadow: 0px 1px 8px -3px rgba(0,0,0,1);
box-shadow: 0px 1px 8px -3px rgba(0,0,0,1);
}


.row_main {
    margin: 20px 0px !important;
    /*    margin-top: 30px !important;*/
    /*    margin-bottom: 0px !important;*/
    pointer-events: all;
    background: rgba(0,0,0,0);
    transition: all .1s ease-in-out;
    -webkit-transition: all .15s ease-in-out;
    -moz-transition: all .15s ease-in-out;
    overflow: auto;
    /*    margin-top: 2.4rem;*/
    border-radius: calc(var(--border-space) * 1);
    /*    border-radius: 31px;*/
    /*    background: linear-gradient(145deg, #f0f0f0, #cacaca);*/
    /*    box-shadow: 8px 8px 16px rgba(0,0,0,.05), -8px -8px 16px rgba(0,0,0,.05);*/
    -moz-box-shadow: 0px 0px 8px var(--shadow-color-light);
    -webkit-box-shadow: 0px 0px 8px var(--shadow-color-light);
    box-shadow: 0px 0px 8px var(--shadow-color-light);
    /*    -webkit-box-shadow: 0px 1px 6px -4px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 1px 6px -4px rgba(0,0,0,0.75);
box-shadow: 0px 1px 6px -4px rgba(0,0,0,0.75);*/
    /*    animation: fadeiner .5s;*/
    /*    animation: scale .5s;
-moz-animation: scale .5s
-webkit-animation: scale .5s;
-o-animation: scale .5s;*/
    /*    animation: fader .05s;*/
    /*    border: var(--border-line);*/
}

    .row_main:hover {
        -moz-box-shadow: 0px 0px 6px var(--shadow-color-light);
        -webkit-box-shadow: 0px 0px 6px var(--shadow-color-light);
        box-shadow: 0px 0px 6px var(--shadow-color-light);
        /*        -webkit-box-shadow: 0px 1px 8px -3px rgba(0,0,0,1);
    -moz-box-shadow: 0px 1px 8px -3px rgba(0,0,0,1);
    box-shadow: 0px 1px 8px -3px rgba(0,0,0,1);*/
    }

.row_nada {
visibility: hidden;
}

.row_neu {
pointer-events: all;
z-index: 50;
transition: all .15s ease-in-out;
-webkit-transition: all .15s ease-in-out;
-moz-transition: all .15s ease-in-out;
overflow: auto;
margin-top: 2.4rem;
border-radius: var(--border-space);
background: linear-gradient(315deg, #c7c7c7, #a7a7a7);
box-shadow: -4px -4px 12px #9e9e9e, 4px 4px 12px #d6d6d6;
}

.row_banner {
transition: all .15s ease-in-out;
-webkit-transition: all .15s ease-in-out;
-moz-transition: all .15s ease-in-out;
background: rgba(90, 193, 142,.7) !important;
}

.row_banner:hover {
    background: rgba(90, 193, 142,.8) !important;
}

.row_top {
transition: all .15s ease-in-out;
background: var(--gray-soft);
border-radius: var(--border-space) var(--border-space) 0 0;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px)
}




#hoverer:hover > #responder {
/*    padding-bottom: 5px;*/
/*    padding-top: 5px;*/
background: rgba(166, 187, 198,.9);
}



.row_middle, .row_bottom {
transition: all .15s ease-in-out;
background: rgba(255,255,255,.9);
box-shadow: none;
/*    overflow: auto;*/
/*    max-height: calc(80vh - 80px);*/
padding: 22px;
padding-bottom: 0px;
padding-top: 17px;
}

.podk-border {
transition: all .15s ease-in-out;
border: solid 3px #919191;
}

.podk-border:hover {
    border: solid 3px var(--green);
}

.gray_text {
transition: all .15s ease-in-out;
color: #7f7f7f;
}

#hoverer:hover #responder_font_green {
color: #5AC18E;
}

#hoverer:hover #responder_font_blue {
color: #5EC4FF;
}

#hoverer:hover #responder_font_orange {
color: #FF8119;
}

#hoverer:hover #responder_font_gray {
color: #919191;
}

/*.btn-podk {
color: rgba(90, 193, 142, 1) !important;
border: solid 2px rgba(90, 193, 142, 1) !important;
}

.btn-podk:hover {
    background: rgba(90, 193, 142, 1) !important;
    color: white !important;
    border: solid 2px rgba(90, 193, 142, 1) !important;
}*/

#hoverer:hover > #responder_bg {
background: rgba(255,255,255,1);
}

#hoverer:hover > #responder_bg_dark {
background: rgba(0,0,0,.8);
}

#colorize1 {
    transition: all .11s ease-in-out;
    color: var(--gray);
}

#colorize2 {
    transition: all .07s ease-in-out;
    color: var(--gray);
}

#colorize3 {
    transition: all .02s ease-in-out;
    color: var(--gray);
}

#colorize4 {
    transition: all .15s ease-in-out;
    color: var(--gray);
}

#hoverer:hover #colorize1 {
    color: #5EC4FF;
}

#hoverer:hover #colorize2 {
    color: #FF8119;
}

#hoverer:hover #colorize3 {
    color: #7f7f7f;
}

#hoverer:hover #colorize4 {
    color: #5AC18E;
}

.row_top_yellow {
background: var(--yellow-soft);
    
}

#hoverer:hover > #responder_yellow {
background: var(--yellow-increase);
}

.row_top_blue {
background: var(--blue-soft);
}

#hoverer:hover > #responder_blue {
background: var(--blue-increase);
}

.row_top_green {
background: var(--green-soft);
}

#hoverer:hover > #responder_green {
background: var(--green-increase);
}

.row_top_red {
background: var(--red-soft);
}

#hoverer:hover > #responder_red {
background: var(--red-increase);
}

.row_top_gray {
background: var(--gray-soft);
}

#hoverer:hover #responder_gray {
background: var(--gray-increase);
}

.row_top_lightgray {
background: #f5f5f5;
}

#hoverer:hover #responder_lightgray {
background: #f2f2f2;
}

.row_top_gold {
    background: var(--dark);
}

#hoverer:hover #responder_gold {
background: var(--dark);
}

.row_top_lightblue {
background: #def4fe;
}

#hoverer:hover #responder_lightblue {
background: #c4ebfd;
}

.row_top_white {
transition: all .15s ease-in-out;
background: rgba(255, 255, 255,.9);
}

#hoverer:hover > #responder_white {
/*    padding-bottom: 5px;*/
/*    padding-top: 5px;*/
background: rgba(255, 255, 255,1);
}

.row_top_blue_tk {
background: rgba(96, 148, 220,.8);
}

#hoverer:hover > #responder_blue_tk {
/*    padding-bottom: 5px;*/
/*    padding-top: 5px;*/
background: rgba(96, 148, 220,.9);
}

/*@media screen and (max-width: 1200px) {
#hoverer:hover > #responder {
    padding-bottom: 0px;
    padding-top: 0px;
}

#hoverer:hover > #responder_orange {
    padding-bottom: 0px;
    padding-top: 0px;
}

#hoverer:hover > #responder_blue {
    padding-bottom: 0px;
    padding-top: 0px;
}

#hoverer:hover > #responder_green {
    padding-bottom: 0px;
    padding-top: 0px;
}
}*/
#altlogo {
display: none;
}

#mainlogo {
display: none;
}

h4 {
color: #fff !important;
margin: 12px 8px !important;
/*    margin-bottom: .6rem !important;*/
font-size: 1.3rem !important;
}

h5 {
color: #397ad4 !important;
font-weight: 700 !important;
/*    text-shadow: 1px 1px 5px rgba(0,0,0,.1);*/
}
/*    margin: 10px !important;
margin-bottom: .75rem !important;*/
}

p {
margin: 10px;
margin-top: 15px;
margin-bottom: 15px;
font-size: 1rem;
}

.pcut {
margin-bottom: 0px;
/*    padding-bottom: 0px;*/
/*    font-size: 11pt !important;*/
}

.navbar {
    background: rgba(0,0,0,0);
    font-weight: bold;
    color: #7f7f7f !important;
    margin: var(--margin);
    /*    margin-top: calc(var(--primary-margin) * 0.42);*/
    opacity: 1;
    border-radius: 1.75rem;
    transition: all .15s ease-in-out;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    /*    border: solid 2px rgba(0,0,0,.4);*/
    will-change: transform !important;
    /*    border: solid 1px rgba(0,0,0,0);*/
}

.bgcolor {
background: rgba(255,255,255,.9) !important;
/*    -webkit-box-shadow: 0px 1px 6px -4px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 1px 6px -4px rgba(0,0,0,0.75);*/
box-shadow: 0px 1px 6px -4px rgba(0,0,0,0.75);
/*    box-shadow: 0px 0px 16px rgba(0,0,0,.1);*/
/*    border: var(--border-line);*/
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}

.bgcolor:hover {
    background: rgba(255,255,255,.95) !important;
    /*        box-shadow: 0px 0px 16px rgba(0,0,0,.2);*/
    /*        -webkit-box-shadow: 0px 1px 8px -4px rgba(0,0,0,1);
    -moz-box-shadow: 0px 1px 8px -4px rgba(0,0,0,1);*/
    box-shadow: 0px 1px 8px -4px rgba(0,0,0,1);
}

/*@media screen and (max-width: 1200px) {
    .bgrond:before {
        content: "";
        display: block;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        z-index: -10;
        background: url("{% static "landingpage/images/Achtergrond_NL_BW.webp" %}") no-repeat center center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        opacity: .6;
    }
}*/

/*.bgrond:before {
    background: rgba(93, 191, 192, .25);
}*/

.firsthide {
display: none;
transition: all .15s ease-in-out;
}

.shownow {
display: block;
}

.collapsing {
/*    position: relative;
height: 0;
overflow: hidden;*/
-webkit-transition: height .15s ease-in-out;
-o-transition: height .15s ease-in-out;
transition: height .15s ease-in-out;
}

.map-sizer {
height: 99%;
width: 100%
}

.cookie-dough {
    float: right;
    width: 24rem;
    background: var(--gray-soft);
    color: #fff;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-radius: var(--border-space);
    margin-bottom: 3rem;
    transition: all .15s ease-in-out;
}

.cookie-dough:hover {
    background: var(--gray);
}

.cookie-closer {
    font-size: 30px;
    line-height: 0;
    color: white !important;
    position: absolute;
    right: 20px;
    top: 50px;
}

.copyright {
margin-bottom: 2px;
opacity: .1;
font-size: .8rem;
}

.copyright:hover {
    opacity: 1
}

.is_mobile {
pointer-events: all;
}

.mobiler {
display: block !important;
}

.bottomer {
margin-bottom: 15px !important;
}

.highest {
min-height: 650px;
}

.heighter {
min-height: 500px;
}

.body_rel {
position: static !important;
}

.loginname {
margin: 0px 10px;
}

@media screen and (max-width: 1200px) {

    .navbar {
        -moz-box-shadow: 0px 0px 8px var(--shadow-color);
        -webkit-box-shadow: 0px 0px 8px var(--shadow-color);
        box-shadow: 0px 0px 8px var(--shadow-color);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }

    .navbar:hover {
        -moz-box-shadow: 0px 0px 6px var(--shadow-color);
        -webkit-box-shadow: 0px 0px 6px var(--shadow-color);
        box-shadow: 0px 0px 6px var(--shadow-color);
    }

:root {
    /*        font-size: 11pt;*/
    --procenter: 100%;
    --slide-height: 130px;
    --border-style: solid 0px rgba(0, 0, 0, .4);
}

.loginname {
    margin-top: -25px;
    margin-bottom: 10px;
}

.mobiler {
    display: none !important;
}

.bottomer {
    margin-bottom: 0px !important;
}

.is_mobile {
    pointer-events: none;
}

.special {
    margin-top: 4.75rem;
}

body {
    margin: 0.1rem;
}

.body_rel {
    position: relative !important;
}

.navbar {
    margin: 11px;
    margin-top: 12px;
    background: rgba(255,255,255,1);
    min-height: 50px;
}

.nav-item, .nav-link {
    padding-top: 0px;
    padding-left: 10px;
}

.col-lg, .col-xl-3 {
    padding: 1.5rem;
    padding-top: 0px;
    padding-bottom: 0px;
}

/*.row_main {
    margin: 10px 0px !important;*/
/*        margin-top: 5px !important;*/
/*        margin-bottom: 10px !important;*/
/*}*/

.topper {
    margin-top: -10px !important;
}

/*.row {
    margin-top: calc(var(--primary-margin) * .99);
}*/

.heighter {
    min-height: 100%;
}

.row2 {
    margin-top: 0.75rem;
    margin-bottom: 0px;
    padding: .25rem;
    padding-top: 1rem;
}

.marginer {
    padding-left: .625rem;
    padding-right: .625rem;
    margin-top: var(--top-mobile);
    padding-top: 0px;
}

.marginer-alt {
    padding-left: .625rem;
    padding-right: .625rem;
    margin-top: var(--top-mobile-alt);
    padding-top: 0px;
}

/*    .disclaim {
    position: fixed;
    margin-left: 0px;
    right: 0rem;
    z-index: 2;
    padding-bottom: 2px;
}*/

.disclaim {
    margin: 0px 10px;
    right: 0rem;
}

.map-sizer {
    margin-top: 4rem;
    border-radius: 10px;
    height: 90%;
    width: 100%
}

.cookie-dough {
    float: none;
    width: 100%;
    margin: auto;
    background: var(--gray-soft);
    /*        margin-left: 20px;*/
    margin-bottom: 40px;
}

.copyright {
    margin-right: 15px;
    margin-bottom: 4px;
}

/*    .row_top {
    border-radius: 0;
}*/


/*.bgcolor {
    background: rgba(255,255,255,.6) !important;*/
    /*    -webkit-box-shadow: 0px 1px 6px -4px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 1px 6px -4px rgba(0,0,0,0.75);*/
    /*box-shadow: 0px 1px 8px -4px rgba(0,0,0,.5);*/
    /*    box-shadow: 0px 0px 16px rgba(0,0,0,.1);*/
    /*backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

    .bgcolor:hover {
        background: rgba(255,255,255,.7) !important;*/
        /*        box-shadow: 0px 0px 16px rgba(0,0,0,.2);*/
        /*        -webkit-box-shadow: 0px 1px 8px -4px rgba(0,0,0,1);
    -moz-box-shadow: 0px 1px 8px -4px rgba(0,0,0,1);*/
        /*box-shadow: 0px 1px 6px -4px rgba(0,0,0,.4);
    }*/

/*#hoverer:hover > #responder_bg {
    background: rgba(255,255,255,1);
}*/
/*    .row_standard, .row_inverse, .row_both {
    border-radius: 1.75rem 1.75rem 1.75rem 1.75rem !important;
}*/

.box {
    opacity: 1 !important;
}
}

.nav-link, .navbar-brand {
color: var(--gray) !important;
}

.nav-link:hover, .navbar-brand:hover {
    color: var(--dark) !important;
}

.nav-link:focus, .nav-link:active {
    color: var(--dark) !important;
}

.blue {
color: #7f7f7f !important;
}

.blue:hover {
    color: var(--blue) !important;
}

.blue:focus {
    color: var(--blue) !important;
}

.orange {
color: #7f7f7f !important;
}

.orange:hover {
    color: var(--orange) !important;
}

.orange:focus {
    color: var(--orange) !important;
}

.green {
color: #7f7f7f !important;
}

.green:hover {
    color: var(--green) !important;
}

.green:focus {
    color: var(--green) !important;
}

/*    .nav-link:visited, */
.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
outline: none;
box-shadow: none;
border: none;
}

a:link {
color: #78ceff;
text-decoration: none;
}

a:hover {
color: #5EC4FF;
}

.login-button {
    color: var(--dark) !important
}

    .login-button:hover {
        color: var(--dark-soft) !important
    }

.btn {
border-radius: var(--border-space) !important;
font-weight: 700 !important;
border: none 2px white !important;
color: white !important;
/*    display: inline-block !important;*/
transition: all .09s ease-in-out !important;
/*    line-height: 1.5;*/
/*    width: 7.5rem;*/
/*    background: rgba(255,255,255,0);*/
/*    box-shadow: inset -3px -3px 2px rgba(0,0,0,.075), inset 3px 3px 2px rgba(255,255,255,.75);*/
}

/*.btn:hover {*/
    /*        border: none 2px black !important;*/
    /*        background: rgba(255,255,255,1);*/
    /*        box-shadow: inset 0px 0px 4px rgba(0,0,0,.2) !important;*/
/*}*/

.btn:focus {
    outline: none;
    box-shadow: none;
}

.btn-light {
color: lightgray !important;
}

.btn-light:hover {
    background: rgba(255, 129, 25,0.3);
}

.btn-info {
color: rgba(90, 193, 142, 1) !important;
background: rgba(255,255,255,.8) !important;
}

.btn-info:hover {
    background: rgba(255,255,255,1) !important;
}

.btn-blue-alt {
/*    background: rgba(94, 196, 255, .8) !important;*/
color: var(--gray) !important;
border: solid 2px var(--gray) !important;
background: rgba(255,255,255,.5) !important;
}

.btn-blue-alt:hover, .btn-blue-alt:focus {
    background: var(--blue) !important;
    color: white !important;
    border: solid 2px var(--blue) !important;
}

.btn-blue {
/*    background: rgba(94, 196, 255, .8) !important;*/
color: var(--blue) !important;
border: solid 2px var(--blue) !important;
background: rgba(255,255,255,.5) !important;
}

    .btn-blue:hover, .btn-blue:focus, .btn-blue.activated {
        background: var(--blue) !important;
        color: white !important;
        border: solid 2px var(--blue) !important;
        transform: scale(.95) !important;
    }

.btn-bluepodk {
/*    background: rgba(94, 196, 255, .8) !important;*/
color: #5EC4FF !important;
border: solid 2px #5EC4FF !important;
background: rgba(255,255,255,.5) !important;
}

.btn-bluepodk:hover, .btn-bluepodk:focus {
    background: #5EC4FF !important;
    color: white !important;
    border: solid 2px #5EC4FF !important;
    transform: scale(1.1) !important;
}

.btn-greenpodk {
/*    background: rgba(94, 196, 255, .8) !important;*/
color: #5AC18E !important;
border: solid 2px #5AC18E !important;
background: rgba(255,255,255,.5) !important;
}

.btn-greenpodk:hover, .btn-greenpodk:focus {
    background: #5AC18E !important;
    color: white !important;
    border: solid 2px #5AC18E !important;
    transform: scale(1.1) !important;
}

.btn-orangepodk {
/*    background: rgba(94, 196, 255, .8) !important;*/
color: #FF8119 !important;
border: solid 2px #FF8119 !important;
background: rgba(255,255,255,.5) !important;
}

.btn-orangepodk:hover, .btn-orangepodk:focus {
    background: #FF8119 !important;
    color: white !important;
    border: solid 2px #FF8119 !important;
    transform: scale(.95) !important;
}

.btn-dark {
    color: var(--dark) !important;
    border: solid 2px var(--dark) !important;
    background: rgba(255,255,255,.5) !important;
}

    .btn-dark:hover, .btn-dark:focus, .btn-dark:checked, .btn-dark:before, .btn-dark.activated {
        background: var(--dark) !important;
        color: white !important;
        border: solid 2px var(--dark) !important;
        transform: scale(.95) !important;
    }

.btn-green {
color: var(--green) !important;
border: solid 2px var(--green) !important;
background: rgba(255,255,255,.5) !important;
}

    .btn-green:hover, .btn-green:focus, btn-green:checked, btn-green:before, .btn-green.activated {
        background: var(--green) !important;
        color: white !important;
        border: solid 2px var(--green) !important;
        transform: scale(.95) !important;
    }

.btn-green-noactive {
    color: var(--green) !important;
    border: solid 2px var(--green) !important;
    background: rgba(255,255,255,.5) !important;
}

    .btn-green-noactive:hover {
        background: var(--green) !important;
        color: white !important;
        border: solid 2px var(--green) !important;
        transform: scale(.95) !important;
    }

.btn-red {
color: var(--red) !important;
border: solid 2px var(--red) !important;
background: rgba(255,255,255,.5) !important;
}

    .btn-red:hover, .btn-red:focus, .btn-red:checked, .btn-red:before, .btn-red.activated {
        background: var(--red) !important;
        color: white !important;
        border: solid 2px var(--red) !important;
        transform: scale(.95) !important;
    }

.btn-dark {
color: var(--dark) !important;
border: solid 2px var(--dark) !important;
background: rgba(255,255,255,.5) !important;
}

.btn-dark:hover, .btn-dark:focus, .btn-dark:checked, .btn-dark:before {
    background: var(--dark) !important;
    color: white !important;
    border: solid 2px var(--dark) !important;
    transform: scale(1.1) !important;
}

.btn-orange {
/*    background: rgba(255, 129, 25, .8) !important;*/
color: var(--yellow) !important;
border: solid 2px var(--yellow) !important;
background: rgba(255,255,255,.5) !important;
}

    .btn-orange:hover, .btn-orange.activated {
        background: var(--yellow) !important;
        color: white !important;
        border: solid 2px var(--yellow) !important;
        transform: scale(.95) !important;
    }


.btn-gold {
/*    background: rgba(255, 129, 25, .8) !important;*/
color: rgba(227, 168, 32, 1) !important;
border: solid 2px rgba(227, 168, 32, 1) !important;
}

.btn-gold:hover {
    background: rgba(227, 168, 32, 1) !important;
    color: white !important;
    border: solid 2px rgba(227, 168, 32, 1) !important;
}

.btn-gray {
background: rgba(255, 255, 255, .9) !important;
color: var(--gray) !important;
border: solid 2px var(--gray) !important;
}

.btn-gray:hover {
    background: var(--gray) !important;
    color: white !important;
    border: solid 2px var(--gray) !important;
    transform: scale(.95) !important;
}

.btn-gray-large {
    background: rgba(255, 255, 255, .9) !important;
    color: var(--dark) !important;
    border: solid 4px var(--dark) !important;
    font-size: 20px;
    padding: 7px 20px;
}

    .btn-gray-large:hover {
        background: var(--dark) !important;
        color: white !important;
        border: solid 4px var(--dark) !important;
        transform: scale(.95) !important;
    }

.btn-cancel {
background: rgba(255, 255, 255, .2) !important;
}

.btn-cancel:hover {
    background: rgba(255, 129, 25, .8) !important;
}


.btn-cookie {
/*    background: rgba(255, 255, 255, 1) !important;*/
color: white !important;
border: solid 2px white !important;
}

.btn-cookie:hover, .btn-cookie:focus {
    background: var(--green) !important;
    color: white !important;
    border: solid 2px var(--green) !important;
    transform: scale(.95) !important;
}

.btn-tender {
color: rgba(57, 122, 212, 1) !important;
border: solid 2px rgba(57, 122, 212, 1) !important;
}

.btn-tender:hover {
    background: rgba(57, 122, 212, 1) !important;
    color: white !important;
    border: solid 2px rgba(57, 122, 212, 1) !important;
}

.btn-tender2 {
background: rgba(255, 255, 255, .2) !important;
}

.btn-tender2:hover {
    background: rgba(57, 122, 212, 1) !important;
}

.btn-mg {
color: rgba(242, 82, 139, 1) !important;
border: solid 2px rgba(242, 82, 139, 1) !important;
}

.btn-mg:hover {
    background: rgba(242, 82, 139, 1) !important;
    color: white !important;
    border: solid 2px rgba(242, 82, 139, 1) !important;
}


.btn-mm {
/*    background: rgba(100, 100, 100, .7) !important;*/
color: rgba(57, 82, 164, 1) !important;
border: solid 2px rgba(57, 82, 164, 1) !important;
}

.btn-mm:hover {
    background: rgba(57, 82, 164, 1) !important;
    color: white !important;
    border: solid 2px rgba(57, 82, 164, 1) !important;
}


.btn-trello {
color: rgba(2, 106, 167, 1) !important;
border: solid 2px rgba(2, 106, 167, 1) !important;
}

.btn-trello:hover {
    background: rgba(2, 106, 167, 1) !important;
    color: white !important;
    border: solid 2px rgba(2, 106, 167, 1) !important;
}

.btn-alg {
background: rgba(100, 100, 100, .7) !important;
}

.btn-alg:hover {
    background: rgba(100, 100, 100, 1) !important;
}

.btn-podk {
color: #7f7f7f !important;
border: solid 2px #7f7f7f !important;
}

.btn-podk:hover {
    background: rgba(90, 193, 142, 1) !important;
    color: white !important;
    border: solid 2px rgba(90, 193, 142, 1) !important;
}

#hoverer:hover #responder_btn_gray {
transition: all .15s ease-in-out;
/*    background: #5AC18E !important;*/
color: #5AC18E !important;
border: solid 2px #5AC18E !important;
}

#responder_btn_gray:hover #responder_btn {
/*    transition: all .15s ease-in-out;*/
/*    background: #5AC18E !important;*/
color: white !important;
}

.btn-black {
/*    background: rgba(100, 100, 100, .7) !important;*/
color: #7f7f7f !important;
border: solid 2px #7f7f7f !important;
}

.btn-black:hover {
    background: #1f1f1f !important;
    color: white !important;
    border: solid 2px #1f1f1f !important;
}

.fader {
animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
-o-animation: fadein 2s; /* Opera */
}

@keyframes fadein {
from {
    opacity: 0;
}

to {
    opacity: 1;
}
}

@-moz-keyframes fadein { /* Firefox */
from {
    opacity: 0;
}

to {
    opacity: 1;
}
}

@-webkit-keyframes fadein { /* Safari and Chrome */
from {
    opacity: 0;
}

to {
    opacity: 1;
}
}

@-o-keyframes fadein { /* Opera */
from {
    opacity: 0;
}

to {
    opacity: 1;
}
}

.scaler {
animation: scale 1s;
-moz-animation: scale 1s; /* Firefox */
-webkit-animation: scale 1s; /* Safari and Chrome */
-o-animation: scale 1s; /* Opera */
}

.scaler-sm {
animation: scale-sm 1s;
-moz-animation: scale-sm 1s; /* Firefox */
-webkit-animation: scale-sm 1s; /* Safari and Chrome */
-o-animation: scale-sm 1s; /* Opera */
}

@keyframes scale {
0% {
    transform: scale(0.98,0.98);
    opacity: 0;
}

100% {
    transform: scale(1,1);
    opacity: 1;
}
}

@keyframes scale-sm {
0% {
    transform: scale(0.99,0.99);
    opacity: .7;
}

100% {
    transform: scale(1,1);
    opacity: 1;
}
}

#mapid {
width: 100%;
height: 100%;
border: none;
}

#map_base {
width: 100%;
height: 100%;
border: none;
}

#mapid_draw {
width: 100%;
height: 100%;
border: none;
}

.leaflet-container {
background: rgba(0, 0, 0, 0) !important;
font-size: 14px !important;
}

.leaflet-popup-tip {
background: rgba(0, 0, 0, 0) !important;
margin: 0px !important;
padding: 0px !important;
padding-top: 20px !important;
box-shadow: 0 0px 0px rgba(0,0,0,0) !important;
}

.leaflet-popup-close-button,
.leaflet-popup-tip-container {
    display: block !important;
    margin: 0px !important;
    margin-top: 5px !important;
    margin-right: 2px !important;
    padding: 0px !important;
    animation: fadeiner-half .6s !important;
    opacity: .5 !important;
}

    .leaflet-popup-close-button:hover,
    .leaflet-popup-tip-container:hover {
        opacity: 1 !important;
    }

.leaflet-popup-content-wrapper {
    transform-origin: top !important;
    transition: all .2s ease !important;
    max-height: 300px !important;
    overflow: auto !important;
    border-radius: .75rem !important;
    margin: 0px !important;
    padding: 0px !important;
    border: none !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    background-color: rgba(255,255,255,.9) !important;
    -webkit-box-shadow: 0px 1px 6px -4px rgba(0,0,0,0.15) !important;
    -moz-box-shadow: 0px 1px 6px -4px rgba(0,0,0,0.15) !important;
    box-shadow: 0px 1px 6px -4px rgba(0,0,0,0.15) !important;
    animation-name: occo !important;
    animation-duration: .3s !important;
    opacity: .9 !important;
}

.leaflet-popup-content-wrapper:hover {
    transition: all .2s ease !important;
    -webkit-box-shadow: 0px 1px 8px -3px rgba(0,0,0,0.25) !important;
    -moz-box-shadow: 0px 1px 8px -3px rgba(0,0,0,0.25) !important;
    box-shadow: 0px 1px 8px -3px rgba(0,0,0,0.25) !important;
}

@keyframes occo {
from {
    opacity: .5;
    transform: scale(0, 0) translateY(-150px);
}

to {
    opacity: 0.9;
    transform: scale(1, 1) translateY(0px);
}
}

.leaflet-control-wms-legend {
display: block !important;
padding: 3px !important;
border-radius: 4px !important;
-webkit-border-radius: 4px !important;
-moz-border-radius: 4px !important;
box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65) !important;
cursor: auto !important;
text-align: center !important;
background-color: #FFFFFF !important;
}

.leaflet-control-wms-legend:hover {
    background-color: #F4F4F4 !important;
}

#network {
width: 100%;
height: 200px;
margin: 0;
padding: 0px;
padding-bottom: 10px;
border: none;
text-align: center;
}

.vis-network {
outline: none !important;
border-radius: .75rem;
}

.blurrer {
-webkit-filter: blur(4px) saturate(var(--saturation));
-moz-filter: blur(4px) saturate(var(--saturation));
-ms-filter: blur(4px) saturate(var(--saturation));
filter: blur(4px) saturate(var(--saturation));
/*    height: 200vh;*/
}

.form-control:focus {
/*    outline: none !important;*/
/*    border: none !important;*/
box-shadow: none !important;
}

.btn .verstuur:before {
content: 'Verstuur';
}

.btn .verstuurd:before {
content: 'Verstuurd';
}

.btn .checker:before {
content: '\2022';
}

.btn:hover .checker:before, .checker.activated {
content: '\2713';
}


/*.btn:focus .checker:before {
    content: '\2713';
}*/

.checker {
width: 10px;
margin-right: 5px;
display: inline-block;
}

.btn .extender:before {
content: '\2022';
/*    font-size: 19px;
line-height: 0;*/
}

.btn:hover .extender:before {
content: '\21B8';
/*    font-size: 14px;
line-height: 0;*/
}

.btn:focus .extender:before {
content: '\21B8';
/*    font-size: 14px;
line-height: 0;*/
}

.extender {
width: 10px;
margin-right: 5px;
display: inline-block;
}

.read-more-state {
display: none;
}

.read-more-target {
opacity: 0;
max-height: 0;
font-size: 0;
transition: all .1s ease-in-out;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
opacity: 1;
font-size: inherit;
max-height: 999em;
}

.read-more-state ~ .read-more-trigger:before {
content: 'Lees meer \00BB';
}

.read-more-state:checked ~ .read-more-trigger:before {
/*    font-size: 2rem;*/
/*    line-height: 0;*/
padding-left: 5px;
content: '\00AB';
}

.read-more-trigger {
cursor: pointer;
display: inline-block;
width: 100%;
/*    margin-left: 10px;*/
/*    padding: 0 .5em;*/
/*    margin-bottom: -20px;
padding-bottom: -20px;*/
/*margin: 0px;*/
/*    padding-bottom: 0px;*/
margin-top: 7px;
padding-left: 0px;
color: var(--gray);
/*    font-size: 1rem;*/
font-weight: bold;
opacity: 1;
/*    line-height: 0;*/
/*    transform: scale(1.3);*/
/*    border: solid;*/
/*    text-align: right;*/
}

.read-more-trigger:hover {
    opacity: 1;
    color: var(--dark);
    transition: all .1s ease-in-out;
}

.read-more-state:checked ~ .read-more-trigger:hover {
opacity: 1;
color: #1f1f1f;
transition: all .1s ease-in-out;
}

.control-label {
margin-bottom: 10px !important;
}

.col-md-10 {
border-radius: 100px;
}

.row_alt {
background-color: rgba(90,90,90,1);
color: white !important;
}

.texter {
color: #1f1f1f;
}

/*Simple css to style it like a toggle switch*/
.theme-switch-wrapper {
display: flex;
align-items: center;
}

.theme-switch {
display: inline-block;
height: 34px;
position: relative;
width: 60px;
}

.theme-switch input {
    display: none;
}

.slider {
background-color: #ccc;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: .4s;
}

.slider:before {
    background-color: #fff;
    bottom: 4px;
    content: "";
    height: 26px;
    left: 4px;
    position: absolute;
    transition: .4s;
    width: 26px;
}

input:checked + .slider {
background-color: #66bb6a;
}

input:checked + .slider:before {
    transform: translateX(26px);
}

.slider.round {
border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.photo_contain {
display: flex;
width: 100%;
padding: 0% 0%;
/*    box-sizing: border-box;*/
height: 100%;
margin-bottom: 20px;
margin-top: 15px;
border-radius: 1.75rem;
}



.box {
flex: 1;
overflow: hidden;
transition: all .15s ease-in-out;
margin: 0px 1%;
/*    box-shadow: 0 20px 30px rgba(0,0,0,.1);*/
line-height: 0;
border-radius: 0.75rem;
opacity: 1;
}

.box > img {
    /*        width: 100%;*/
    /*        height: calc(100% - 10vh);*/
    height: 100%;
    object-fit: cover;
}

.box:hover {
    flex: 1 1 50%;
    opacity: 1;
    cursor: pointer;
}

    .box:hover > img {
        width: 100%;
        height: 100%;
    }

/*.gallery {
width: 600px;
margin: auto;
border-radius: 3px;
overflow: hidden;
}*/

#paint {
display: none;
}

.img-c {
/*    flex: 1;*/
width: 50%;
height: 200px;
float: left;
position: relative;
overflow: hidden;
margin: 0px 5px;
box-shadow: 0px 0px 4px rgba(0, 0, 0,.1);
border-radius: 12px;
/*    border: var(--border-line);*/
}

.img-c:hover, .img-c:after, img-c:focus, img-c:target {
    /*            flex: 1;*/
    width: 100%;
}


/*    .imgwidth {
    width: 100% !important;
}*/

/*.img-c:after {*/
/*    flex: 1;*/
/*width: 100%;
}*/

.img-w {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
background-size: cover;
background-position: center;
cursor: pointer;
transition: transform ease-in-out 300ms;
border-radius: 10px;
/*    margin: 0px 5px;*/
transition: all .05s ease-in-out;
/*    border: solid 2px white;*/

}

.img-w img {
    display: none;
}

.imgbg {
background: rgba(0, 0, 0, 0);
pointer-events: all !important;
transition: all .5s ease-in-out;
cursor: pointer;
z-index: 0 !important;
}

.point {
pointer-events: all !important;
}

.img-c {
transition: width ease 300ms, height ease 250ms, left cubic-bezier(0.4, 0, 0.2, 1) 300ms, top cubic-bezier(0.4, 0, 0.2, 1) 300ms;
}

/*.img-c:hover .img-w {*/
    /*        transform: scale(1.08);
    transition: transform cubic-bezier(0.4, 0, 0.2, 1) 450ms;*/
    /*        border: solid 0px white;*/
/*}*/

.img-c.active {
    width: 45% !important;
    height: 55% !important;
    position: absolute;
    z-index: 999;
    border-radius: 10px;
    /*        border: solid;*/
    box-shadow: 0px 0px 8px rgba(20, 38, 23,.3);
    pointer-events: none;
    /*        transform: translateY(-500px);*/
}

.img-c.postactive {
    position: absolute;
    z-index: 1000;
    pointer-events: none;
    animation: fadeout .5s !important;
}

.img-c.active.positioned {
    left: 15vw !important;
    top: calc(var(--topper) + 20vh) !important;
    /*        right: 50vw !important;*/
    /*bottom: 500px !important;*/
    /*transform: translateY(-300px);*/
    /*        transition-delay: 50ms;*/
    z-index: 999;
    pointer-events: none;
}

.img-clicked {
pointer-events: all;
width: 50%;
}

@media screen and (max-width: 1200px) {
.img-c.active {
    width: 90vw !important;
    height: 30vh !important;
}

    .img-c.active.positioned {
        left: 3.5vw !important;
        top: var(--topper) !important;
    }

.img-c:hover, .img-c:after, img-c:focus, img-c:target {
    /*            flex: 1;*/
    width: 50%;
}

.img-clicked {
    pointer-events: all;
}
}

@keyframes fadeout {
0% {
    opacity: 1;
}

25% {
    opacity: 1;
}

100% {
    opacity: 0;
}
}

.fancy {
font-style: italic;
font-weight: bold;
font-size: 1.25rem;
text-align: justify;
color: #1f1f1f;
opacity: .9;
}

/*    .fancy:hover {
    opacity: 1;
}*/

#ms:hover ~ #msd {
transform: scale(2);
}



.flasher {
animation: flashed 1s;
-moz-animation: flashed 1s;
-webkit-animation: flashed 1s;
-o-animation: flashed 1s;
}

@keyframes flashed {
0% {
}

25% {
    background: rgba(0, 0, 0, .75);
}

100% {
}
}

.anchor {
position: relative;
top: calc(var(--top) * -1);
}

.anchor-alt {
position: relative;
top: calc(var(--top) * .7 * -1);
}

.anchor-alt2 {
position: relative;
top: calc(var(--top-alt) * -1);
}

.logo {
font-weight: 700;
margin: 0px;
padding: 0px;
margin-left: 3px;
line-height: 0;
font-size: 25px;
letter-spacing: 1px;
z-index: 900;
will-change: transform !important;
}

:root {
--text-shadow: 0px 1px 8px rgba(0,0,0,.25);
}

/*.logo_large {
font-size: 7vw;*/
/*    text-shadow: var(--text-shadow);*/
/*}*/

/*.logo_sub {
font-size: 1.5vw;
transform: translateY(7.5vh);
color: #a6bbc6;*/
/*    text-shadow: var(--text-shadow);*/
/*font-weight: 700;
overflow-wrap: break-word;
}*/

.intro {
/*    margin: auto;*/
/*    margin-top: 45px;*/
/*    margin-bottom: 34vh;*/
/*    margin-bottom: calc(15vh + 40px);*/
text-align: center;
}

:root {
--slidein: 11.8vw;
}


.slidein {
animation: leftin 1s;
margin: auto;
}

@keyframes leftin {
0% {
    padding-right: 5vw;
    opacity: 0;
}

25% {
    opacity: 0;
}

100% {
    opacity: 1;
}
}

.popin {
animation: fadeiner 1s;
}

.popin-slow {
animation: fadeiner 2s;
}

.popin-very-slow {
animation: fadeiner 3s;
}

.popin-fast {
animation: fadeiner .5s;
}

@keyframes fadeiner {
0% {
    opacity: 0;
}

25% {
    opacity: 0;
}

100% {
    opacity: 1;
}
}

.popin-less {
animation: fadeiner-less 1s;
opacity: 1;
}

@keyframes fadeiner-less {
0% {
    opacity: 0;
}

25% {
    opacity: 0;
}

100% {
    opacity: 1;
}
}

@keyframes fadeiner-half {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 0;
    }

    100% {
        opacity: .5;
    }
}


.showmobile {
display: block;
}



#subOverlay {
display: none;
}

/*hr {
margin: auto;
width: 50%;
height: 10px !important;
}*/

.opening {
margin: auto;
font-size: 2rem;
text-align: center;
padding-bottom: 200px;
color: #1f1f1f;
}

.hider {
display: none;
transition: 0s;
}

.tkosten {
background: linear-gradient(to bottom right, rgba(96, 148, 220,.5) 0%, rgba(220, 178, 96,.5) 100%);
height: 100vh;
}

.aanbesteden {
transform: scale(2) translateY(-.75px);
height: 15px;
background: #525661;
line-height: 0;
padding: 2px 5px;
margin-right: 35px;
border-radius: 10px;
opacity: .8;
}

.aanbesteden:hover {
    opacity: .9;
}

.gotoproject {
opacity: .8;
/*    font-size: 20px;*/
/*    line-height: 0px;*/
}

.gotoproject:hover {
    opacity: 1;
}

.wip {
position: fixed;
z-index: 1000;
bottom: 0px;
left: 30px;
color: dimgray;
background: rgba(255,255,255,.75);
border-radius: 10px;
padding: 0px 10px;
}

.mindjet {
height: calc(100vh - 50px);
width: 100%;
padding-top: 114px;
position: absolute;
z-index: 900;
}

@media screen and (max-width: 1200px) {

    .row_main {
        margin: 10px 0px !important;
        -moz-box-shadow: 0px 0px 8px var(--shadow-color);
        -webkit-box-shadow: 0px 0px 8px var(--shadow-color);
        box-shadow: 0px 0px 8px var(--shadow-color);
    }

.mindjet {
    height: calc(100vh - 90px);
    width: 100vw;
    padding-top: 70px;
    position: absolute;
    z-index: 900;
}

.wip {
    position: fixed;
    z-index: 1000;
    bottom: 25px;
    left: 11px;
    right: 11px;
    color: dimgray;
    background: rgba(255,255,255,.75);
    border-radius: 20px;
    padding: 0px 20px;
    font-size: 12px;
}

.tkosten {
    background: black;
}

.aanbesteden {
    transform: scale(2);
    /*height: 15px;
    background: gray;
    line-height: 0;
    padding: 2px 5px;*/
    margin-left: 30px;
    margin-top: 5px;
    margin-bottom: 10px;
}

.showmobile {
    display: none;
}

.intro {
    display: none;
    /*        width: 90vw;
    margin: auto;
    margin-top: 225px;
    margin-bottom: 250px;*/
}

.logo_large {
    display: block;
    font-size: 12vw;
}

.logo_sub {
    display: block;
    font-size: 6vw;
    line-height: 2;
    margin-top: -60px;
}

.logo {
    margin-left: 3px;
    margin-bottom: 1px;
}

:root {
    --slidein: 17vw;
}

.anchor {
    position: relative;
    top: calc(-1 * var(--top-mobile) - 1px);
}

.anchor-alt {
    position: relative;
    top: -60px;
}

    .navbar-collapse {
        padding-top: 10px !important;
        padding-bottom: 0px !important;
        margin: -5px !important;
/*        border: solid !important;*/
    }
}

.slide-alt {
pointer-events: none;
position: fixed;
z-index: 10;
bottom: 10%;
height: 150px;
width: 100%
}

.btn-list {
margin: auto;
/*    margin-top: 14px;*/
margin-bottom: 20px;
/*margin-right: 5px;*/
margin-right: 10px;
}

.noshadow {
box-shadow: none !important;
}

.customer-logos {
background-color: rgba(0,0,0,0);
visibility: hidden;
}

.customer-logos.slick-initialized {
    visibility: visible;
}

/* Slider */
.slick-slide {
margin: auto 20px;
}

.slick-slide img {
    width: 100%;
    transition: all .15s ease-in-out;
    backface-visibility: hidden;
    transform: translateZ(0);
    /*        -webkit-font-smoothing: subpixel-antialiased;*/
    opacity: .5;
    pointer-events: all;
    filter: saturate(0);
}

    .slick-slide img:hover {
        width: 100%;
        opacity: 1;
        filter: saturate(1);
    }

.scale-slide {
transition: all .15s ease-in-out;
}

.scale-slide:hover {
    transform: scale(1.05);
}

.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}

.slick-list {
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}

.slick-list:focus {
    outline: none;
}

.slick-list.dragging {
    cursor: pointer;
    cursor: grab;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

.slick-track {
display: flex;
}

.slick-track:before,
.slick-track:after {
    display: table;
    content: '';
}

.slick-track:after {
    clear: both;
}

.slick-loading .slick-track {
visibility: hidden;
}

.slick-slide {
display: flex;
height: auto;
align-items: center;
justify-content: center;
}

[dir='rtl'] .slick-slide {
float: right;
}

.slick-slide img {
display: block;
}

.slick-slide.slick-loading img {
display: none;
}

.slick-slide.dragging img {
pointer-events: none;
}

.slick-initialized .slick-slide {
display: block;
}

.slick-loading .slick-slide {
visibility: hidden;
}

.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
display: none;
}

.inverter {
filter: brightness(0) invert(1);
opacity: .3;
}

.inverter:hover {
    filter: brightness(1) invert(0);
    opacity: 1;
}

@media screen and (max-width: 1200px) {

.slick-slide img {
    filter: saturate(1);
    opacity: 1;
}

.inverter {
    filter: brightness(1) invert(0);
    opacity: 1;
}

.firsthide {
    display: block;
}
}

.imageContainer > img:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}




.block {
overflow: hidden;
width: 100%;
height: 100px;
background: rgba(0,0,0,0);
backface-visibility: hidden;
transform: translateZ(0);
}

.animation {
width: auto;
font-size: 0px;
}

.animation div {
    display: inline-block;
    width: auto;
    float: none;
    padding: 0 20px;
}

.courasel-item {
transition: all .15s ease-in-out;
backface-visibility: hidden;
transform: translateZ(0);
-webkit-font-smoothing: subpixel-antialiased;
opacity: .5;
filter: saturate(0);
}

.courasel-item:hover {
    width: 100%;
    opacity: 1;
    filter: saturate(1);
    transform: scale(1.1);
}

@media screen and (max-width: 1200px) {
    .courasel-item {
        opacity: .9;
        filter: saturate(1);
    }
}

.row {
margin-top: 0px;
margin-bottom: 0px;
}

/*PARALLAX*/
.flexer {
display: grid;
grid-gap: 0px;
grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
padding: 0px;
padding-top: 0px;
padding-bottom: 0px;
margin: 0px -5px;
}

.flexer-dashboard {
display: grid;
grid-gap: 0px;
grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
padding: 0px;
padding-top: 0px;
padding-bottom: 0px;
margin: 0px -5px;
}

.flexer-alt {
display: grid;
grid-gap: 32px;
grid-template-columns: minmax(250px, 1fr) minmax(200px, .95fr) minmax(200px, .95fr) minmax(250px, 1fr);
padding: 26px;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
margin-top: 0px;
}

.altgrid {
grid-column: auto / span 4;
}

.altgrid2 {
grid-column: auto / span 2;
}

@media screen and (max-width: 1500px) {
    .flexer {
        display: grid;
        grid-gap: 0px;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        padding: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
        margin: 0px -5px;
    }

    .altgrid {
        grid-column: auto / span 3;
    }
    }


@media screen and (max-width: 1200px) {
    .flexer {
        display: grid;
        grid-gap: 0px;
        grid-row-gap: 0px;
        grid-template-columns: repeat(auto-fit, minmax(99vw, 1fr));
        padding: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
        margin: 0px -10px;
    }

    .flexer-alt {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        grid-gap: 11px;
        grid-row-gap: 0px;
        padding: 11px;
        padding-top: 0px;
        padding-bottom: 0px;
        margin-bottom: 0px;
        margin-top: 0px;
    }

    .row {
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .altgrid {
        grid-column: 1;
    }

    .altgrid2 {
        grid-column: 1;
    }

    .marquee-content li img {
        opacity: 1 !important;
        filter: saturate(1) !important;
    }

    .tiler {
        max-width: 100vw !important;
    }
}


.flexer-narrow {
    border: solid;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 100px));
}

.excluder {
    pointer-events: none !important;
}
/*.glide__track {
height: 100px !important;
width: 100% !important;
}

.glide__slide {
height: 100% !important;
width: 50px !important;
}*/



.carousel-inner, .carousel-item {
    /*    align-items: center;
height: 100%;
justify-content: center;
vertical-align: middle;*/
}

.carousel-item {
    text-align: center;
}


.caro-img {
    transition: all .15s ease-in-out;
    backface-visibility: hidden;
    transform: translateZ(0);
    /*        -webkit-font-smoothing: subpixel-antialiased;*/
    opacity: .5;
    filter: saturate(0);
    transform: scale(1);
    /*    vertical-align: middle;
display: inline-block;*/
    /*    height: 100%;*/
    /*    width: 80%;*/
    height: 100px;
    /*    align-items: center;
justify-content: center;
vertical-align: middle;*/
    transform: scale(.95);
}

    .caro-img:hover {
        opacity: 1;
        filter: saturate(1);
        transform: scale(1);
    }

/** {
margin: 0;
padding: 0;
box-sizing: border-box;
}*/

.lazy {
    opacity: 0;
    transition: opacity 1s;
}

:root {
    --marquee-width: 100%;
    --marquee-height: 100%;
    /* --marquee-elements: 12; */ /* defined with JavaScript */
    --marquee-elements-displayed: 5;
    /*    --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));*/
    --marquee-element-width: 200px;
    --marquee-animation-duration: calc(var(--marquee-elements) * 3s);
}

.marquee {
    width: var(--marquee-width);
    height: var(--marquee-height);
    /*    background-color: #111;*/
    /*    color: #eee;*/
    overflow: hidden;
    position: relative;
    will-change: transform;
}

/*    .marquee:before, .marquee:after {
    position: absolute;
    top: 0;
    width: 10rem;
    height: 100%;
    content: "";
    z-index: 1;
}*/

/*.marquee:before {
    left: 0;*/
/*        background: linear-gradient(to right, #111 0%, transparent 100%);*/
/*}

.marquee:after {
    right: 0;*/
/*        background: linear-gradient(to left, #111 0%, transparent 100%);*/
/*}*/

.marquee-content {
    list-style: none;
    height: 100%;
    display: flex;
    animation: scrolling var(--marquee-animation-duration) linear infinite;
}
/* .marquee-content:hover {
animation-play-state: paused;
} */
@keyframes scrolling {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-1 * var(--marquee-element-width) * var(--marquee-elements)));
    }
}

.marquee-content li {
    display: flex;
    /*    justify-content: center;
align-items: center;*/
    text-align: center;
    /* text-align: center; */
    flex-shrink: 0;
    width: var(--marquee-element-width);
    max-width: 200px;
    max-height: 100%;
    padding: 0 20px;
    /*font-size: calc(var(--marquee-height)*3/4);*/ /* 5rem; */
    /*white-space: nowrap;*/
    margin: auto;
    justify-content: center;
}

    .marquee-content li img {
        width: 100%;
        height: 100%;
        opacity: .5;
        filter: saturate(0);
        transition: all .15s ease-in-out;
        backface-visibility: hidden;
        transform: translateZ(0);
        margin: auto;
    }

        .marquee-content li img:hover {
            width: 100%;
            opacity: 1;
            filter: saturate(1);
            transform: scale(1.05);
        }

/*@media (max-width: 600px) {
html {
    font-size: 12px;
}

:root {
    --marquee-width: 100vw;
    --marquee-height: 16vh;
    --marquee-elements-displayed: 3;
}

.marquee:before, .marquee:after {
    width: 5rem;
}
}*/
/*.navbar .nav-item:not(:last-child) {
margin-right: 35px;
}*/

/*.dropdown, .nav-item, .nav-link, .dropdown-menu {
color: green !important;
}
*/
.dropdown-menu {
    background: rgba(255,255,255,1);
    /*    color: white;*/
    border-radius: 10px;
    border: none;
    box-shadow: 0px 1px 8px -4px rgba(0,0,0,.5);
}

    .dropdown-menu li > a {
        color: var(--gray);
        font-weight: 700;
    }

        .dropdown-menu li > a:focus {
            color: black;
            font-weight: 700;
        }

    .dropdown-menu > li {
        padding: 3px 0px;
    }

    .dropdown-menu li > a:hover {
        background: rgba(0,0,0,0);
    }

    .dropdown-menu li > a:focus {
        background: rgba(0,0,0,0);
    }



@media screen and (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: none;
    }

    .navbar .nav-item:hover .nav-link {
        color: var(--dark);
    }

    .navbar .nav-item:hover .dropdown-menu {
        display: block;
    }

    .navbar .nav-item .dropdown-menu {
        margin-top: 0;
    }
}

/*.hidden-scroll {
cursor: grab;
}*/

.hidden-scroll::-webkit-scrollbar {
    display: none;
}

.hidden-scroll {
    scrollbar-width: none;
    max-height: 100vh;
    overflow-y: auto;
}


.sizer {
    transform: scale(1);
}

    .sizer:hover {
        transform: scale(1.05);
    }

/*.tooltipper {
position: relative;
display: inline-block;
color: var(--green);
}

.tooltipper .tooltiptext {
    visibility: hidden;*/
/*        display: none;*/
/*width: 200px;
    background: rgba(255, 255, 255, .9);*/
/*        color: #fff;*/
/*text-align: center;
    border-radius: calc(var(--border-space) / 2);
    padding: 10px;
    position: absolute;
    z-index: 2000;
    opacity: 0;
    transition: opacity .15s;
    top: 100%;
    left: 50%;
    margin-left: -100px;*/ /* Use half of the width (120/2 = 60), to center the tooltip */
/*margin-top: 5px;
    box-shadow: 0px 0px 16px rgba(0,0,0,.1);
}

.tooltipper:hover .tooltiptext {
    visibility: visible;
    opacity: 1;*/
/*        display: block;*/
/*}*/


.supertool {
    /*    max-width: 220px !important;*/
    background: rgba(255, 255, 255, .8) !important;
    text-align: center !important;
    border-radius: calc(var(--border-space) / 2) !important;
    padding: 7px 15px !important;
    box-shadow: 0px 0px 16px rgba(0,0,0,.1) !important;
    animation-name: occo2 !important;
    animation-duration: .15s !important;
    transform: translateY(0px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    backdrop-filter: blur(5px) !important;
    border: solid 3px var(--gray) !important;
    z-index: 2000 !important;
    max-width: 300px !important;
/*    position: fixed !important;*/
}

@keyframes occo2 {
    from {
        opacity: .5;
        transform: scale(0, 0) translateY(0px);
    }

    to {
        opacity: 1;
        transform: scale(1, 1) translateY(0px);
    }
}

.vis-tooltip {
    /*    max-width: 200px !important;*/
    background: rgba(255, 255, 255, .5) !important;
    text-align: center !important;
    border-radius: 16px !important;
    padding: 5px 8px !important;
    box-shadow: 0px 0px 16px rgba(0,0,0,.1) !important;
    border: none 2px white !important;
    font-family: Ubuntu !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #404040 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
}

    .vis-tooltip:hover {
        opacity: 0 !important;
        transition: opacity 2s !important;
    }


tr td {
    padding-top: 12px;
}

form :invalid {
    color: red !important;
}

#goTopButton {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: -25px; /* Place the button at the bottom of the page */
    right: 20px; /* Place the button 30px from the right */
    left: 20px;
    z-index: 2000; /* Make sure it does not overlap */
    border: solid 3px var(--gray); /* Remove borders */
    outline: none; /* Remove outline */
    background: white; /* Set a background color */
    color: var(--gray); /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 0px;
    /*    padding-right: 18px;*/
    border-radius: 30%; /* Rounded corners */
    /*font-size: 25px !important;*/ /* Increase font size */
    width: 50px;
    height: 50px;
    font-weight: 700;
    margin: auto;
    /*    line-height: 19px;*/
    text-align: center;
/*    box-shadow: 0px 0px 16px rgba(0,0,0,.1) !important;*/
    vertical-align: middle;
    /*    transform-origin: 0 0;
transform: rotate(90deg);*/
}

/*#goTopButton:hover {
    background-color: #555;*/ /* Add a dark-grey background on hover */
/*}*/


.smallbig {
    animation: smallbigger .15s;
    -moz-animation: smallbigger .15s;
    -webkit-animation: smallbigger .15s;
    -o-animation: smallbigger .15s;
}

@keyframes smallbigger {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.lefttile {
    transition: all .3s ease-in-out;
    transform: translateX(20vw);
    opacity: .7;
}

.righttile {
    transition: all .3s ease-in-out;
    transform: translateX(-20vw);
    opacity: .7;
    z-index: 25;
}

    .lefttile:hover, .righttile:hover {
        transform: translateX(0px);
        opacity: 1;
    }

.hrline {
    /*    height: 3px !important;*/
    /*    margin: auto 20px !important;*/
    /*    background: rgba(0,0,0,.3) !important;*/
    /*    border-radius: 4px !important;*/
    /*    background: radial-gradient(ellipse at top, rgba(255,255,255,.5) 10%, rgba(255,255,255,0) 70%) !important;*/
    margin: auto -15px !important;
    outline: dashed 2px rgba(0,0,0,.15) !important;
    border-radius: 4px !important;
    height: 0px !important;
    z-index: 2000 !important;
    opacity: 1 !important;
    /*    box-shadow: 0 0 1pt 1pt white !important;*/
}

.een_slim_project_gradient {
    background: radial-gradient(ellipse at top, rgba(255,255,255,.5) 10%, rgba(255,255,255,0) 70%);
    padding-top: 90px;
    padding-bottom: 0px;
}

.podk_gradient {
    background: radial-gradient(ellipse at bottom, rgba(255,255,255,.5) 10%, rgba(255,255,255,0) 70%);
    padding-top: 0px;
    padding-bottom: 0px;
}

.project_tools_gradient {
    background: radial-gradient(ellipse at top, rgba(255,255,255,.5) 10%, rgba(255,255,255,0) 70%);
    padding-top: 90px;
    padding-bottom: 90px;
}

/*.pcut2 {
font-size: 17px !important;
text-align: center;
}*/

.network-height {
    height: 375px !important;
}

.kostencalc {
    display: block;
    max-width: 700px;
    margin: auto;
    margin-top: 0px;
    padding: 17px 0px;
    overflow: hidden !important;
    color: black !important;
    font-weight: 400 !important;
    cursor: default !important;
    background: rgba(255,255,255,.9) !important;
    border-radius: var(--border-space);
    box-shadow: 0px 0px 8px rgba(0,0,0,.1);
    border: var(--border-style) !important;
}

    .kostencalc:hover {
        background: rgba(255,255,255,1) !important;
        box-shadow: 0px 0px 4px rgba(0,0,0,.1);
    }

@media screen and (max-width: 1200px) {

    .hidden-scroll {
        max-height: none;
        overflow-y: hidden;
        border-radius: var(--border-space);
    }

    .kostencalc {
        display: inline-block !important;
        max-width: 700px !important;
        margin: 0px !important;
        margin-top: 10px !important;
        padding: 0px !important;
        overflow: hidden !important;
        color: black !important;
        font-weight: 400 !important;
        cursor: default !important;
        background: none !important;
        border-radius: 0px !important;
        box-shadow: none !important;
        width: 100% !important;
    }

        .kostencalc:hover {
            /*            background: none !important;*/
            box-shadow: none !important;
        }

    .tiler {
        margin: auto;
        background: rgba(255,255,255,.9);
        max-width: 500px;
        border-radius: var(--border-space);
        -moz-box-shadow: 0px 0px 8px var(--shadow-color);
        -webkit-box-shadow: 0px 0px 8px var(--shadow-color);
        box-shadow: 0px 0px 8px var(--shadow-color);
        padding: 20px;
        margin-bottom: 10px;
    }

    .tiler2 {
        margin: auto;
        background: rgba(255,255,255,.9);
        max-width: 500px;
        border-radius: var(--border-space);
        -moz-box-shadow: 0px 0px 8px var(--shadow-color);
        -webkit-box-shadow: 0px 0px 8px var(--shadow-color);
        box-shadow: 0px 0px 8px var(--shadow-color);
        padding: 20px 0px;
        margin-bottom: 10px;
    }

    .tiler:hover, tiler2:hover {
        background: rgba(255,255,255,.95);
    }

    .network-height {
        height: 200px !important;
        padding: 0px !important;
        margin-top: 10px !important;
    }

    /*    .pcut2 {
    font-size: 15px !important;
    text-align: left;
}*/

    /*    .pcut {
    font-size: 15px !important;
}*/

    .een_slim_project_gradient {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .podk_gradient {
        padding-top: 0px;
        padding-bottom: 0px;
        margin-bottom: 10px;
    }

    .project_tools_gradient {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .podk-border {
        border: solid 3px var(--green);
    }
}

.table-popup {
    border: rgba(0,0,0,0) !important;
    padding: 0px !important;
    margin: 0px !important;
}

.scroll-out {
    -webkit-mask-image: -webkit-gradient(linear, left 96%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
/*    mask-image: linear-gradient(linear, left 96%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));*/
    /*    border-radius: var(--border-space) var(--border-space) 0px 0px !important;*/
}



.froster2 {
    /*    background: rgba(255, 255, 255, .15);*/
    backdrop-filter: blur(0px);
    /*    background: linear-gradient(135deg, rgba(255, 255, 255,.8) 0%, rgba(255, 255, 255,.2) 100%);*/
}

    .froster2:hover {
        /*    background: rgba(255, 255, 255, .15);*/
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px)
        /*        background: linear-gradient(135deg, rgba(255, 255, 255,.9) 0%, rgba(255, 255, 255,.25) 100%);*/
    }

.podk-section {
    margin: auto;
    padding: 90px 0px;
}

@media screen and (max-width: 1200px) {
    .podk-section {
        padding: 0px;
        margin-bottom: -20px;
    }

    .darker {
        background: var(--dark);
        color: white;
        font-weight: 400;
        border: solid 5px var(--dark);
        border-radius: 26px !important
    }

        .darker:hover, darker:focus {
            background: var(--dark) !important
        }

    .froster {
        /*    transition: all .15s ease-in-out;*/
        /*    background: rgba(255, 255, 255, .15);*/
        backdrop-filter: blur(0px);
        /*    background: linear-gradient(135deg, rgba(255, 255, 255,.4) 0%, rgba(255, 255, 255,.1) 100%);*/
    }

    .froster:hover {
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px)
    }

    .froster2:hover {
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px)
    }
}


.row_invisible {
    /*    transition: all .15s ease-in-out;*/
    background: none;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px)
    /*    filter: blur(0px);*/
    /*    border-radius: var(--border-space);*/
    /*    backdrop-filter: saturate(1);*/
}

.container-icon {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.box-icon {
    position: absolute;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    /*    border-radius: 3px;*/
    overflow: hidden;
    border-radius: var(--border-space)
}

.icon {
    position: relative;
    /*    margin-top: -20px;*/
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
    will-change: transform;
    color: white;
    font-size: 20px;
}

.icon_bg {
    width: 140px;
    height: 140px;
    border-radius: 100% 100% 100% 10%;
    transform: rotateZ(-45deg);
    /*        border: 1px solid rgba(225, 227, 232, 0.18);*/
    -webkit-box-shadow: 0 0px 8px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0px 8px rgba(0, 0, 0, 0.1);
    /*    background-color: #fff;*/
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    will-change: transform;
    cursor: pointer;
    /*    backdrop-filter: blur(5px);*/
}

.title {
    position: relative;
    color: white;
}

.super-box:hover .box-icon {
    /*   border: 1px solid rgba(225, 227, 232, 0.18); */
    /*    -webkit-box-shadow: 0 0px 8px rgba(0, 0, 0, 0.1);*/
    box-shadow: none;
}

.super-box:hover .icon_bg {
    -webkit-transform: scale(3.5);
    transform: scale(3.5);
    border-radius: var(--border-space);
}

.super-box:hover .icon {
    -webkit-transform: translateY(-28px) scale(1.4);
    transform: translateY(-28px) scale(1.4);
}

.super-box {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.text {
    position: relative;
    /*    top: -10px;*/
    width: 100%;
    text-align: center;
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
}

.super-box:hover .text {
    opacity: 0;
    /*    -webkit-transform: translateY(-4px) scale(.8);*/
    /*    transform: translateY(-4px) scale(.8);*/
}

.text-expand {
    opacity: 0;
    position: relative;
    top: -30px;
    width: 100%;
    text-align: center;
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
    display: none;
    box-shadow: none;
}

.super-box:hover .text-expand {
    opacity: 1;
    display: block;
}

.box-icon::after {
    /*    content: "Discover the attacker's tactics and purposes and find out the identity of the attacker";*/
    position: absolute;
    width: 100%;
    opacity: 0;
    /*    font-size: 15px;*/
    /*    color: #5d6494;*/
    /*    line-height: 20px;*/
    -webkit-transition: all 0.1s ease;
    transition: all 0.1s ease;
}

.super-box:hover .box-icon::after {
    opacity: 1;
}

/*.dr {
position: absolute;
bottom: 16px;
right: 16px;
width: 100px;
}*/


/** {
-webkit-transition-property: all;
-webkit-transition-duration: .2s;
-moz-transition-timing-function: cubic-bezier(100,50,21,6);
-moz-transition-property: all;
-moz-transition-timing-function: cubic-bezier(100,50,21,6);
}*/

.pillars {
    color: white;
    background: rgba(255,255,255,.9) !important;
    padding: 60px 120px;
    font-size: 20px;
    letter-spacing: 2px;
    margin: 5px !important;

    -webkit-transition-duration: .2s;
    -moz-transition-duration: .2s;
    transition-duration: .2s;
    -moz-transition-property: all;
    -webkit-transition-property: all;
    transition-property: all;
    -moz-transition-timing-function: cubic-bezier(100,50,21,6);
    -webkit-transition-timing-function: cubic-bezier(100,50,21,6);
    transition-timing-function: cubic-bezier(100,50,21,6);

    -moz-box-shadow: 0px 0px 4px var(--shadow-color-light);
    -webkit-box-shadow: 0px 0px 4px var(--shadow-color-light);
    box-shadow: 0px 0px 4px var(--shadow-color-light);

    background-repeat: no-repeat !important;
    background-position: 50% 50% !important;
    background-size: cover !important;
}

    .pillars:hover {
        /*        border: none;*/
        color: white !important;
        padding: 110px 180px;
        border-radius: calc(var(--border-space) * 1.5) !important;
        box-shadow: 0px 0px 16px rgba(0,0,0,.1);
        cursor: default;
        background-repeat: no-repeat !important;
        background-position: 50% 50% !important;
        background-size: cover !important;
        /*        border: var(--border-line);*/
    }

.pillar-red {
    border: solid 4px var(--red-increase);
    border-right: none;
    background-image: none;
    /*    padding: 100px 150px;*/
}

/*.pillar-red .project:before {
content: 'PROJECT';
}*/

.pillar-green {
    border: solid 4px var(--green-increase);
    border-right: none;
    border-left: none;
}

.pillar-yellow {
    border: solid 4px var(--yellow-increase);
    border-right: none;
    border-left: none;
}

.pillar-blue {
    border: solid 4px var(--blue-increase);
    border-left: none;
}

.pillar-title {
    transition: all .03s ease-in-out;
    position: absolute;
    opacity: 1;
    text-align: center;
    transform: translateX(-50%)
    /*    transform: translateX(-50px);*/
}

.pillars:hover .pillar-title {
    opacity: 0;
}

.pillar-title-sub {
    transition: all .03s ease-in-out;
    opacity: 0;
    position: absolute;
    margin: auto;
    transform: translate(-50%, -75px);
    text-align: center;
    width: 280px;
    vertical-align: central;
    text-anchor: middle;
    height: 180px;
    line-height: 180px;
    justify-content: center;
    align-items: center;
    color: white;
}

c {
    display: inline-block;
    vertical-align: middle;
    line-height: 30px; /* <-- adjust this */
}

/*    .pillar-red:hover .project:before {
    content: 'Dit is een lange text met meerdere lijnen bla bla test met nog meer zodat het net niet past';
}*/

.pillars:hover .pillar-title-sub {
    opacity: 1;
}

/*.pillar-red:hover {
    background: var(--red-increase) !important;
}*/

/*.pillar-green:hover {
    background: var(--green-increase) !important;
}

.pillar-yellow:hover {
    background: var(--yellow-increase) !important;
}

.pillar-blue:hover {
    background: var(--blue-increase) !important;
}*/

.onlymobile {
    display: none;
}

.btn-background {
    background: rgba(255,255,255,1);
    padding: 7px;
    border-radius: var(--border-space);
}

@media screen and (max-width: 1200px) {

    .btn-background {
        background: none;
        padding: 5px;
        border-radius: unset;
    }

    .onlymobile {
        display: block;
    }

    .pillars {
        background: none !important;
        /*        border: solid 4px !important;*/
        box-shadow: none !important;
        padding: 10px 80px !important;
        line-height: 75px !important;
        margin: -2px !important;
        font-size: 1.1rem !important;
        letter-spacing: 1px;
        /*        border-radius: var(--border-space) !important;*/
    }

        .pillars:hover {
            /*            background: none !important;*/
            /*            border: solid 4px inherit !important;*/
            /*            box-shadow: none !important;*/
            font-size: .9rem !important;
            padding: 30px 49% !important;
            /*            color: var(--dark) !important;*/
            /*            border-radius: 0px !important;*/
        }

    .pillar-title-sub {
        transition: .05s ease-in;
        opacity: 0;
        position: absolute;
        margin: auto;
        transform: translate(-50%, -3px);
        text-align: center;
        width: 70%;
        font-size: .9rem;
        vertical-align: central;
        text-anchor: middle;
        height: 75px;
        line-height: 75px;
        justify-content: center;
        align-items: center;
    }

    c {
        display: inline-block;
        vertical-align: middle;
        line-height: 20px; /* <-- adjust this */
    }

    .pillar-red {
        border: solid 4px var(--red-increase);
        border-radius: var(--border-space) !important;
    }

    .pillar-green {
        border: solid 4px var(--green-increase);
        border-radius: var(--border-space) !important;
    }

    .pillar-yellow {
        border: solid 4px var(--yellow-increase);
        border-radius: var(--border-space) !important;
    }

    .pillar-blue {
        border: solid 4px var(--blue-increase);
        border-radius: var(--border-space) !important;
    }

    .pillar-red:hover {
        background: var(--red-increase) !important;
        border-radius: 15px !important;
    }

    .pillar-green:hover {
        background: var(--green-increase) !important;
        border-radius: 15px !important;
    }

    .pillar-yellow:hover {
        background: var(--yellow-increase) !important;
        border-radius: 15px !important;
    }

    .pillar-blue:hover {
        background: var(--blue-increase) !important;
        border-radius: 15px !important;
    }

    .iconscaler {
        filter: invert(8%) sepia(35%) saturate(2096%) hue-rotate(213deg) brightness(97%) contrast(93%);
        opacity: 1 !important;
    }

        .iconscaler:hover {
            opacity: 1 !important;
        }
}

.iconscaler {
    filter: invert(8%) sepia(35%) saturate(2096%) hue-rotate(213deg) brightness(97%) contrast(93%);
    transform: scale(.9);
    opacity: .8 !important;
    -webkit-transition-property: all;
    -webkit-transition-duration: .1s;
    -moz-transition-timing-function: cubic-bezier(100,50,21,6);
    -moz-transition-property: all;
    -moz-transition-timing-function: cubic-bezier(100,50,21,6);
}

    .iconscaler:hover {
        transform: scale(1);
        opacity: 1 !important;
    }

.logoscaler {
    transform: scale(1) !important;
    -webkit-transition-property: all;
    -webkit-transition-duration: .1s;
    -moz-transition-timing-function: cubic-bezier(100,50,21,6);
    -moz-transition-property: all;
    -moz-transition-timing-function: cubic-bezier(100,50,21,6);
}

    .logoscaler:hover {
        transform: scale(.96) !important;
        opacity: 1 !important;
    }


.stripper {
    border: none !important;
    background: none !important;
    text-align: center !important;
}

    .stripper:hover, .stripper:focus, .stripper:checked, .stripper:before {
        border: none !important;
        background: none !important;
    }

.hr_gtp {
    height: 2px !important;
    color: var(--gray) !important;
    opacity: .5 !important;
}

.iconic {
    font-size: 15px;
    line-height: 0;
    padding-right: 5px;
}

.opacer {
    color: var(--gray);
    line-height: 0;
    margin-left: 3px
    /*    font-size: 17px;
    padding: 0px 0px;*/
}

    .opacer:hover {
        cursor: pointer;
        filter: brightness(.2);
        /*        font-size: 15px;
        padding: 0px 1px;*/
    }

.opacer2 {
    color: var(--gray) !important;
    opacity: .5;
    line-height: 0;
    margin-left: 3px
    /*    font-size: 17px;
    padding: 0px 0px;*/
}

    .opacer2:hover {
        cursor: default;
        /*        font-size: 15px;
        padding: 0px 1px;*/
    }

.inner-shadow {
    -moz-box-shadow: inset 0 0 7px rgba(0,0,0,.1);
    -webkit-box-shadow: inset 0 0 7px rgba(0,0,0,.1);
    box-shadow: inset 0 0 7px rgba(0,0,0,.1);
}

.grid-room {
    display: grid;
    grid-template-columns: 1fr 1fr; /* creates 2 columns */
    gap: 20px; /* creates a gap between the columns and rows */
}

.grid-item {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: auto;
    justify-content: center;
    align-content: center;
    align-items: center;
    justify-items: center;
}

.selection_box {
    transition: all .2s ease-in-out;
    border: solid 2px rgba(146, 166, 176, .75) !important;
    margin-top: 12px !important;
    margin-bottom: 10px !important;
    border-radius: 20px !important;
    width: 100% !important;
    height: 35px !important;
    padding: 3px 10px !important;
    padding-top: 2px !important;
    background: rgba(146, 166, 176, .05) !important;
}

    .selection_box:focus {
        outline: none;
    }

    .selection_box:hover {
        border: solid 2px rgba(146, 166, 176, 1) !important;
        background: rgba(146, 166, 176, .02) !important;
    }