@charset 'utf-8';
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
@font-face{font-family:'Material Symbols Outlined';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v283/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2) format('woff2');}

:root{
    --complementary_100:#ffcbbb;
    --complementary_300:#ff8463;
    --complementary_500:#ff451d;
    --complementary_700:#fa3713;
    --complementary_900:#d41900;
    --primary_100:#b2ebf2;
    --primary_300:#4dcfe1;
    --primary_500:#00BCD4;
    --primary_700:#0097A7;
    --primary_900:#005f64;
    --tertiary_50:#eceff1;
    --tertiary_100:#cfd8dc;
    --tertiary_300:#90a4ae;
    --tertiary_500:#607d8b;
    --tertiary_700:#455a64;
    --tertiary_900:#263238;
    --text:#263238;
	--white:#ffffff;
}

*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
html{text-rendering:optimizeLegibility;}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0px;margin:0px;padding:0px;vertical-align:baseline;}
ol,ul,li{border:0px;vertical-align:baseline;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block;}

body{background-color:var(--primary_700);color:var(--text);}

h1{font-family:"Manrope",sans-serif;font-optical-sizing:auto;font-size:30px;font-style:normal;font-weight:600;line-height:150%;padding:0px;}
h2{font-family:"Manrope",sans-serif;font-optical-sizing:auto;font-size:24px;font-style:normal;font-weight:600;line-height:150%;padding:0px;padding-top:12px;}
h3{font-family:"Manrope",sans-serif;font-optical-sizing:auto;font-size:18px;font-style:normal;font-weight:600;line-height:150%;padding:0px;padding-top:12px;}
html,body,button,input,li,optgroup,p,select,textarea{font-family:"Manrope",sans-serif;font-optical-sizing:auto;font-size:15px;font-style:normal;font-weight:300;line-height:150%;}
button,input,li,optgroup,p,select,textarea{line-height:150%;}
input,select,textarea{padding:6px 12px;}
p{padding-top:15px;}

a,button,div,nav{-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;}
a{text-decoration:none;}
a{color:var(--primary_700);font-weight:600;}
a:hover{color:var(--primary_900);}

#page{position:relative;}

#header{background-color:rgba(255,255,255,0.8);left:0px;position:fixed;top:0px;width:100%;z-index:60;}
    #header_container{height:60px;margin:0 auto;position:relative;max-width:1200px;width:100%;}
    #header_logo{height:60px;left:12px;position:absolute;top:0px;width:270px;}
    #header_logo img{height:100%;padding:12px 0px;}
    #header_menu_right{position:absolute;right:12px;top:12px;}
    #header_menu_right a{background-color:var(--primary_700);border-radius:12px;color:var(--white);display:inline-block;line-height:100%;padding:6px 6px;}
    #header_menu_right a:hover{background-color:var(--primary_900);}
    #header_menu_right a .material_symbols{font-size:24px;line-height:24px;}
    #header_top{position:absolute;right:6px;top:0px;}
    #header_top_menu{display:none;font-size:12px;line-height:18px;padding-right:12px;text-align:right;width:100%;}
    #header_top_menu a{color:var(--text);font-weight:300;padding-right:12px;}
    #header_top_menu a:hover{color:var(--primary_700);}
    #header_top_menu a:last-of-type{color:var(--text);padding-right:0px;}
    #header_top_menu a:last-of-type:hover{color:var(--primary_700);}
    #header_bottom{position:absolute;right:6px;top:18px;}
    #header_bottom_menu{display:none;text-align:right;width:100%;}
    #header_bottom_menu a{color:var(--text);font-size:15px;font-weight:300;line-height:54px;padding:0px 6px;}
    #header_bottom_menu a:hover{color:var(--primary_700);}
    #header_bottom_menu a:last-of-type{padding-right:0px;}
    #header_bottom_menu a.active{background-color:var(--primary_700);border-radius:18px;color:var(--white);display:inline-block;line-height:100%;margin-left:6px;padding:12px 12px;}
    #header_bottom_menu a.active:hover{background-color:var(--primary_900);color:var(--white);}

    #header.active #header_container{height:60px;}
    #header.active #header_logo{height:60px;}
    #header.active #header_logo img{height:100%;}
    #header.active #header_top{top:-18px;}
    #header.active #header_bottom{line-height:60px;top:0px;}

    #right_menu{background-color:var(--white);display:none;position:fixed;right:0px;top:0px;z-index:75;}
    #right_menu nav{position:absolute;right:12px;top:12px;}
    #right_menu_title{border-bottom:1px solid var(--tertiary_100);font-size:18px;padding:12px;}
    #right_menu_title a .material_symbols{margin:0px 0px 0px 6px;vertical-align:middle;}
    #right_menu_title a .title{vertical-align:middle;}
    #right_menu_content{margin:12px 0px;}
    #right_menu_content a{display:block;line-height:48px;}
    #right_menu_content a .material_symbols{color:var(--text);margin:0px 12px 2px 24px;vertical-align:middle;}
    #right_menu_content a .title{color:var(--text);margin-right:30px;}
    #right_menu_content a:hover{background-color:var(--primary_700);}
    #right_menu_content a:hover .material_symbols{color:var(--white);}
    #right_menu_content a:hover .title{color:var(--white);}
    #right_menu_content div.divider{border-top:1px solid var(--tertiary_100);line-height:0%;margin:12px 0px 12px 0px;}

#main{background-color:var(--tertiary_50);margin-top:0px;position:relative;z-index:10;}
    #intro{padding-top:96px;}
    #intro_container{border-radius:24px;margin:0 auto;max-width:1200px;padding:0px 0px 60px 0px;position:relative;text-align:center;width:calc(100% - 24px);}
    #intro_triangle_bottom{border-bottom:48px solid var(--tertiary_50);border-left:calc(100vw - 24px) solid transparent;height:0px;position:absolute;right:0px;bottom:0px;width:0px;z-index:11;}
    #intro_image{bottom:-24px;display:none;position:absolute;right:24px;z-index:12;}
    #intro_image img{width:360px;}
    #intro nav{margin-top:24px;}
    #intro nav a{margin-right:6px;}
    #intro nav a:last-of-type{margin-right:0px;}
    #intro .box{max-width:360px;width:100%;}
    #intro .box h1{font-size:30px;}
    #intro .box p{font-size:18px;}

    #modules .flex_container{margin-top:12px;width:100%;}
    #modules .flex_item{background-color:var(--white);border:1px solid var(--tertiary_300);border-radius:24px;border-top:3px solid var(--tertiary_300);padding:12px;text-align:center;width:100%;}
    #modules .icon .material_symbols{font-size:18px;margin-top:2px;}
    #modules .text{display:inline-block;line-height:150%;text-align:left;}

    #modules .content{align-content:stretch;align-items:stretch;display:flex;flex-direction:column;flex-wrap:wrap;gap:6px;height:100%;justify-content:space-between;}
    #modules .content .title{align-self:stretch;flex-basis:auto;flex-grow:0;flex-shrink:0;order:0;}
    #modules .content .teaser{align-self:stretch;flex-basis:auto;flex-grow:1;flex-shrink:1;order:0;padding-bottom:12px;}
    #modules .content .cta{display:none;align-self:stretch;flex-basis:auto;flex-grow:0;flex-shrink:0;order:0;padding-bottom:12px;}

    #concept .content{background-color:var(--white);border:1px solid var(--tertiary_300);border-radius:24px;border-top:3px solid var(--tertiary_300);margin-top:12px;padding:12px;text-align:center;width:100%;}
    #concept .content .flex_container{padding:12px;}
    #concept .content h3:first-of-type,#concept .content h3:nth-of-type(2){padding-top:0px;}
    #concept p{text-align:left;}

    #klanten .flex_container{margin-top:12px;width:100%;}
    #klanten .flex_item{background-color:var(--white);border:1px solid var(--tertiary_300);border-radius:24px;border-top:3px solid var(--tertiary_300);padding:12px;text-align:center;width:100%;}

    #klanten .content{align-content:stretch;align-items:stretch;display:flex;flex-direction:column;flex-wrap:wrap;gap:6px;height:100%;justify-content:space-between;}
    #klanten .content .quote{align-self:stretch;flex-basis:auto;flex-grow:1;flex-shrink:1;order:0;}
    #klanten .content .logo{align-self:stretch;flex-basis:auto;flex-grow:0;flex-shrink:0;order:0;padding-top:12px;}
    #klanten .content .logo img{height:48px;margin:0px 6px;max-width:80%;}

    #impact_realtimemonitor{padding:48px 0px;}
    #impact_container{border-radius:24px;margin:0 auto;max-width:1200px;padding:48px 0px 12px 0px;position:relative;text-align:center;width:calc(100% - 24px);}
    #impact_triangle_top{border-top:48px solid var(--tertiary_50);border-right:calc(100vw - 24px) solid transparent;height:0px;position:absolute;right:0px;top:0px;width:0px;z-index:11;}
    #impact_image{bottom:-36px;display:none;position:absolute;left:36px;z-index:12;}
    #impact_image img{height:360px;}
    #impact_realtimemonitor nav{margin-top:24px;}
    #impact_realtimemonitor nav a{margin-right:6px;}
    #impact_realtimemonitor nav a:last-of-type{margin-right:0px;}
    #impact_realtimemonitor .box{max-width:360px;width:100%;}
    #impact_realtimemonitor .box h2{font-size:30px;}
    #impact_realtimemonitor .box p{font-size:18px;}

    /* #impact_realtimemonitor{padding:72px 0px;text-align:center;}
    #impact_realtimemonitor nav{margin-top:12px;} */

#footer{background-color:var(--primary_700);color:var(--white);width:100%;}
    #footer_top{margin:0 auto;padding:24px 0px;position:relative;max-width:1200px;width:calc(100% - 24px);}
    #footer_top .flex_item{flex-basis:100%;}
    #footer_top h2{padding-top:0px;}
    #footer_top_platform{max-width:360px;}
    #footer_bottom{font-size:12px;line-height:48px;margin:0 auto;position:relative;max-width:1200px;width:100%;}
    #footer_bottom a{color:var(--white);padding-right:12px;}
    #footer_bottom a:hover{color:var(--white);text-decoration:underline;}
    #footer_bototm a:last-of-type{color:var(--white);padding-right:0px;}
    #footer_bottom_copyright{padding-left:12px;}
    #footer_bottom_menu{text-align:right;}

#mask{background-color:rgba(0,0,0,0.3);display:none;height:100%;left:0px;position:fixed;top:0px;width:100%;z-index:70;}
#mask_sub{background-color:rgba(0,0,0,0.3);display:none;height:100%;left:0px;position:fixed;top:0px;width:100%;z-index:80;}

.accent_100{background-color:var(--primary_100);color:var(--text);}
    .accent_100 .box{margin:0 auto;position:relative;max-width:1200px;width:100%;}
    .accent_100 h2{padding-top:0px;}
    .accent_100 h3{padding-top:0px;}
    .accent_100 a{padding-right:12px;}
    .accent_100 a:last-of-type{padding-right:0px;}
    .accent_100 a.active{background-color:var(--complementary_700);border:2px solid var(--complementary_700);border-radius:18px;color:var(--white);display:inline-block;padding:6px 12px;}
    .accent_100 a.inactive{background-color:var(--white);border:2px solid var(--complementary_700);border-radius:18px;color:var(--complementary_700);display:inline-block;padding:6px 12px;}

.accent_500{background-color:var(--primary_500);color:var(--white);}
    .accent_500 .box{margin:0 auto;position:relative;max-width:1200px;width:100%;}
    .accent_500 h2{padding-top:0px;}
    .accent_500 h3{padding-top:0px;}
    .accent_500 a{padding-right:12px;}
    .accent_500 a:last-of-type{padding-right:0px;}
    .accent_500 a.active{background-color:var(--complementary_700);border:2px solid var(--complementary_700);border-radius:18px;color:var(--white);display:inline-block;padding:6px 12px;}
    .accent_500 a.inactive{background-color:var(--white);border:2px solid var(--complementary_700);border-radius:18px;color:var(--complementary_700);display:inline-block;padding:6px 12px;}

.accent_700{background-color:var(--primary_700);color:var(--white);}
    .accent_700 .box{margin:0 auto;position:relative;max-width:1200px;width:100%;}
    .accent_700 h2{padding-top:0px;}
    .accent_700 h3{padding-top:0px;}
    .accent_700 a{padding-right:12px;}
    .accent_700 a:last-of-type{padding-right:0px;}
    .accent_700 a.active{background-color:var(--complementary_700);border:2px solid var(--complementary_700);border-radius:18px;color:var(--white);display:inline-block;padding:6px 12px;}
    .accent_700 a.active:hover{background-color:var(--complementary_900);border:2px solid var(--complementary_900);}
    .accent_700 a.inactive{background-color:var(--white);border:2px solid var(--complementary_700);border-radius:18px;color:var(--complementary_700);display:inline-block;padding:6px 12px;}
    .accent_700 a.inactive:hover{background-color:var(--complementary_100);border:2px solid var(--complementary_700);}

.accent_900{background-color:var(--primary_900);color:var(--white);}
    .accent_900 .box{margin:0 auto;position:relative;max-width:1200px;width:100%;}
    .accent_900 h2{padding-top:0px;}
    .accent_900 h3{padding-top:0px;}
    .accent_900 a{padding-right:12px;}
    .accent_900 a:last-of-type{padding-right:0px;}
    .accent_900 a.active{background-color:var(--complementary_700);border:2px solid var(--complementary_700);border-radius:18px;color:var(--white);display:inline-block;padding:6px 12px;}
    .accent_900 a.inactive{background-color:var(--white);border:2px solid var(--complementary_700);border-radius:18px;color:var(--complementary_700);display:inline-block;padding:6px 12px;}

.box{margin:0 auto;max-width:1200px;padding:24px;position:relative;width:100%;}
.box h2{text-align:center;}
.box h3{text-align:center;}
.box p{text-align:center;}

.button{border:none;-webkit-border-radius:9px;-moz-border-radius:9px;border-radius:9px;cursor:pointer;display:inline-block;line-height:100%;padding:6px 12px;-o-text-overflow:clip;text-overflow:clip;white-space:nowrap;}
.button .material_symbols{font-size:18px;line-height:100%;vertical-align:top;}

.button_active, a.button_active{background-color:var(--primary_500);border:1px solid var(--primary_500);color:var(--white);}
.button_active:hover, a.button_active:hover{background-color:var(--primary_700);border:1px solid var(--primary_700);color:var(--white);}
.button_inactive, a.button_inactive{background-color:#546e7a;border:1px solid #546e7a;color:var(--white);}
.button_inactived:hover, a.button_inactive:hover{background-color:var(--primary_500);border:1px solid var(--primary_500);color:var(--white);}
.button_disabled, a.button_disabled{background-color:var(--white);border:1px solid #b0bec5;color:#b0bec5;cursor:not-allowed;}
.button_disabled:hover, a.button_disabled:hover{color:#b0bec5;}

.flex_container{align-content:stretch;align-items:stretch;display:flex;flex-direction:row;flex-wrap:wrap;gap:12px;justify-content:space-evenly;}
.flex_item{align-self:stretch;flex-basis:auto;flex-grow:1;flex-shrink:1;order:0;}

.line{border-top:2px solid var(--tertiary_50);display:block;left:12px;position:absolute;top:17px;width:calc(100% - 24px);}
.line_container{height:36px;margin-top:12px;position:relative;}
.line_icon{background-color:var(--primary_500);border-radius:50%;color:var(--white);font-size:24px;padding:6px;position:absolute;left:calc(50% - 18px);top:0px;}

.material_symbols{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga';-moz-font-feature-settings:'liga';-moz-osx-font-smoothing:grayscale;}

.shadow{-webkit-box-shadow:0px 6px 6px 0px rgba(144,164,174,0.6);-moz-box-shadow:0px 6px 6px 0px rgba(144,164,174,0.6);box-shadow:0px 6px 6px 0px rgba(144,164,174,0.6);}
.text_shadow{text-shadow:3px 6px 9px rgba(0,0,0,0.9);}

.the_public_secret{margin:0 auto;padding-top:12px;text-align:center;width:calc(100% - 48px);}
.the_public_secret .icon{display:block;}
.the_public_secret .icon .material_symbols{background-color:var(--primary_500);border-radius:50%;color:var(--white);font-size:30px;padding:9px;width:48px;}
.the_public_secret .plus{font-size:30px;}


@media only screen and (min-height:300px) and (min-width:744px){
    #intro .box{margin:0px 0px 0px calc((100% - 360px - 360px) / 2);width:360px;}
    #intro_image{display:block;}
    #impact_realtimemonitor .box{margin:0px 0px 0px calc((100% - 360px - 360px) / 2 + 360px);width:360px;}
    #impact_image{display:block;}
}

@media only screen and (min-height:300px) and (min-width:765px){
    #header_container{height:72px;}
    #header_logo{height:72px;}
    #header_top_menu{display:block;}
    #header_bottom_menu{display:block;}
    #header_menu_right{display:none;}
    #intro{padding-top:108px;}
}

@media only screen and (min-height:300px) and (min-width:960px){
	#modules .flex_item{width:calc(25% - 12px);}
	#concept .flex_item{width:calc(50% - 12px);}
	#klanten .flex_item{width:calc(25% - 12px);}
    .the_public_secret .flex_item{width:calc(100% / 9 - 12px) !important;}
    .the_public_secret .flex_item:nth-child(even){width:30px !important;}
    .the_public_secret .flex_item .plus{display:block;margin-top:30px;}
}

@media only screen and (min-height:300px) and (min-width:1200px){
    #intro_container{width:100%;}
    #intro_triangle_bottom{border-left:1200px solid transparent;}
    #impact_container{width:100%;}
    #impact_triangle_top{border-right:1200px solid transparent;}
    #footer_top{width:100%;}
    #footer_bottom_copyright{padding-left:0px;}
}