/* dark blue #141C2F light blue #2B3B61 blue text #BBBFCB yellow #FFD15D turq #64A9A1 light grey #F5F5F5 */ @font-face { font-family:'Roboto'; src:url('../fonts/Roboto-Regular.woff2') format('woff2'); font-display: swap; } @font-face { font-family:'Roboto'; src:url('../fonts/Roboto-Bold.woff2') format('woff2'); font-display: swap; font-weight:bold; } @font-face { font-family:'Ubuntu'; src:url('../fonts/Ubuntu-Bold.woff2') format('woff2'); font-display: swap; font-weight:bold; } /* label input[type="radio"], label input[type="checkbox"]{ display:none; } */ #compass{ visibility:visible; color:#2B3B61; background:#fff; } #compass h2, #compass h3, #compass strong{ color:#141C2F; } #compass h2{ font-size:20px; margin-bottom:40px; } #compass .side-handle{ display:none; } #compass .wrap{ display:grid; grid-template-columns:1fr calc(25% + 32px); padding:64px 0; height:688px; grid-template-rows:1fr 47px; grid-gap:4px; transition:grid-template-columns .4s, grid-template-rows .4s .4s; } #compass .more_info .label::after{ content:'\f05a'; font-family:'Font Awesome 6 Pro'; color:#A4ADC2; font-size:18px; line-height:18px; font-weight:300; top:3px; position:relative; } #compass .hidden_input{ position:absolute; top:0; left:0; width:100%; height:100%; margin:0 !important; padding:0 !important; border-radius:0 !important; color:transparent !important; border:transparent !important; appearance:none !important; background:transparent !important; } /*, #compass input[type="radio"], #compass input[type="checkbox"]*/ #compass label{ position:relative; } #compass .label{ position:relative; /*font-weight:bold;*/ background-color:#F5F5F5; padding:18px 24px; display:grid; grid-template-columns:auto 1fr auto; transition:background-color .2s, color .2s; } #compass .label .fa-light{ color:#64A9A1; font-size:18px; width:26px; position:relative; transition:background-color .2s, color .2s; } #compass .label .text { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } #compass input:checked + .label{ background:#cae1df; } #compass input:checked + .label{ color:#18645b; } #compass input:checked + .label .fa-light{ color:#448b83; } #compass .more_info input:checked + .label::after{ color:#8ab7b2; } #compass input:disabled + .label{ color:#D6DADC; } #compass input:disabled + .label .text{ color:#D6DADC; } #compass input:disabled + .label .fa-light{ color:#D6DADC; } /* slide basics */ #compass .inactive{ z-index:1; } #compass .active, #compass .subactive, #compass .out_right, #compass .out_left{ z-index:2; visibility:inherit !important; } #compass .in_right, #compass .in_left{ z-index:3; } #compass #slides{ width:calc(100% + 32px); width:100%; overflow:hidden; position:relative; } #compass .slide{ visibility:hidden; padding:0 64px; background:#fff; position:absolute; right:0; top:0; width:100%; height:100%; transition:opacity .2s 0s; opacity:0; } #compass .slide.active, #compass .slide.subactive{ opacity:1; } #compass .in_right{ animation:in_right .4s both; } @keyframes in_right{ from{ right:-100%; } to{ right:0%; } } #compass .in_left{ animation:in_left .4s both; } @keyframes in_left{ from{ right:100%; } to{ right:0%; } } #compass .out_left{ animation:out_left .4s both; } @keyframes out_left{ from{ right:0%; } to{ right:100%; } } #compass .out_right{ animation:out_right .4s both; } @keyframes out_right{ from{ right:0%; } to{ right:-100%; } } #compass .slide.in_right{ animation:slide_in_right .4s both, fade_in .4s both; } @keyframes slide_in_right{ from{ right:-50%; } to{ right:0%; } } #compass .slide.in_left{ animation:slide_in_left .4s both, fade_in .4s both; } @keyframes slide_in_left{ from{ right:50%; } to{ right:0%; } } #compass .slide.out_left{ animation:slide_out_left .4s both, fade_out .4s both; } @keyframes slide_out_left{ from{ right:0%; } to{ right:50%; } } #compass .slide.out_right{ animation:slide_out_right .4s both, fade_out .4s both; } @keyframes slide_out_right{ from{ right:0%; } to{ right:-50%; } } @keyframes fade_in{ from{ opacity:0; } to{ opacity:1; } } @keyframes fade_out{ from{ opacity:1; } to{ opacity:0; } } /* tooltip */ #compass #tips{ display:grid; grid-column:2; grid-row:1 /3; position:relative; left:32px; overflow:hidden; border-radius:32px 0 32px 32px; opacity:1; transition:opacity .4s, left .4s; } #compass .tip{ width:100%; background:#F5F5F5; padding:32px; display:grid; grid-template-rows:auto 1fr; grid-auto-flow:row; position:absolute; right:0; top:0; height:100%; transition:background-color .4s; /*animation-delay:0.1s; animation-duration:.3s;*/ /*animation-delay:0.3s;*/ } #compass .tip.inactive{ background:#EDEDED; } #compass .tip.active{ background:#F5F5F5; } #compass .tip::before, #compass .tip::after{ content:'\f10d'; color:#dee2e9; font-family:'Font Awesome 6 Pro'; font-weight:bold; font-size:28px; line-height:1; width:28px; height:24px; display:block; /*background-image:url('../img/quote.svg'); background-size:contain; background-repeat:no-repeat;*/ } #compass .tip::before{ margin-bottom:16px; } #compass .tip::after{ position:absolute; bottom:32px; right:32px; transform:rotate(180deg); } #compass .tip .profile{ display:flex; align-items:center; } #compass .tip .profile .image{ width:64px; height:64px; border-radius:100%; margin-right:16px; background:#fff; background-size:cover; opacity:0.85; } #compass .tip .profile strong{ color:#141C2F; } #compass .tip.subtip{ width:calc(100% - 24px); border-radius:32px 0 32px 32px; outline:32px solid #EDEDED; animation:cast_shadow .4s .2s both; } #compass .tip.subtip.in_right{ animation:in_right .4s both, cast_shadow .4s .2s both; } @keyframes cast_shadow{ 0%{ outline-color:transparent; } 100%{ outline-color:#EDEDED; } } #compass .tip.subtip.out_right{ animation:out_right .4s both, cast_shadow_off .4s 0s both; } @keyframes cast_shadow_off{ 0%{ outline-color:#EDEDED; } 100%{ outline-color:transparent; } } #compass .tip .close_tip{ display:none; } /* slide content */ #compass .label .fa-wheat{ top:2px; } #compass .label .fa-helmet-safety{ font-size:16px; top:3px; } #compass .label .fa-briefcase{ top:1px; } #compass .label .fa-burger-soda{ font-size:17px; } #compass .label .fa-heart-pulse{ top:1px; } #compass .label .fa-forklift{ font-size:16px; top:2px; } #compass .label .fa-utensils{ top:2px; } #compass .label .fa-desktop{ top:3px; font-size:15px; } #compass .label .fa-wrench{ top:1px; } #compass .label .fa-truck{ font-size:17px; top:2px; } #compass .label .fa-bolt{ font-size:19px; left:2px; } #compass .label .fa-graduation-cap{ font-size:17px; top:1px; } #compass .label .fa-flag{ top:1px; left:1px; } #compass .label .fa-cart-shopping{ font-size:17px; top:2px; } #compass .label .fa-key{ top:1px; left:1px; } #compass .label .fa-shirt{ font-size:16px; top:2px; } #compass .label .fa-ellipsis{ top:2px; left:1px; } #compass .label .fa-box-archive{ font-size:17px; top:2px; } #compass .label .fa-user-tag{ font-size:15px; top:3px; } #compass .label .fa-apple-whole{ font-size:19px; } #compass .label .fa-car{ top:1px; } #compass .label .fa-flask-vial{ font-size:15px; top:2px; } #compass .label .fa-sheet-plastic{ left:2px; top:1px } #compass .label .fa-burger-soda{ font-size:17px; } #compass .label .fa-dryer{ top:1px; left:2px; } #compass .label .fa-chair{ left:2px; top:1px; } #compass .label .fa-print{ left:1px; } #compass .label .fa-box-open{ font-size:16px; top:3px; } #compass .label .fa-warehouse-full{ font-size:14px; top:2px; } #compass .label .fa-conveyor-belt-boxes{ font-size:16px; top:2px; left:-1px; } #compass .label .fa-fill-drip{ font-size:16px; top:1px; } #compass .label .fa-diagram-project{ top:2px; font-size:17px; } #compass .label .fa-question{ left:4px; top:1px; } #compass .label .fa-box-taped{ top:2px } #compass .label .fa-boxes-stacked{ font-size:17px; top:2px; left:-1px; } #compass .label .fa-clipboard-list{ font-size:20px; left:2px } #compass .label .fa-triangle-person-digging{ font-size:17px; top:1px; left:-1px; } #compass .label .fa-comments-alt{ font-size:16px; top:1px; left:-1px; } #compass .label .fa-camera{ top:1px; } #compass .label .fa-megaphone{ font-size:16px; top:2px; } #compass .label .fa-euro-sign{ left:2px; top:1px; } #compass .label .fa-bed{ font-size:16px; top:3px; } #compass .label .fa-user-group{ font-size:15px; top:3px; } #compass .label .fa-hourglass-end{ font-size:16px; top:3px; margin-right:0; width:20px; } #compass .label .fa-money-check-pen{ font-size:17px; top:1px; } #compass .label .fa-shop{ font-size:16px; top:1px; } #compass .label .fa-hospital{ font-size:16px; left:-1px; top:2px; } #compass .label .fa-warehouse{ font-size:16px; left:-1px; top:2px; } #compass .label .fa-chalkboard-user{ font-size:16px; left:-1px; top:3px; } #compass .label .fa-globe{ top:1px; } #compass .answers{ display:grid; grid-gap:4px; } #compass .slider_wrap .slider_wrap { display:grid; grid-template-columns:1fr auto; } #compass .slider_wrap + .slider_wrap{ margin-top:40px; } #compass .slider_wrap .label{ padding:8px 12px; } #compass .slider_wrap{ display:grid; grid-template-columns:124px 1fr; align-items:center; grid-gap:32px; } #compass .slider_field{ font-size:24px; width:100%; text-align:center; padding:0 6px; margin-bottom:2px; padding:12px 0; } #compass input.slider { display:none; margin:16px 0 0 0; grid-column:1 / 3; -webkit-appearance:none; appearance:none; width:100%; height:8px; background:#F5F5F5; outline:none; } #compass input.slider:hover { opacity:1; } #compass input.slider::-webkit-slider-thumb { width:24px; height:24px; background:#64A9A1; cursor:pointer; border-radius:100%; -webkit-appearance:none; appearance:none; } #compass input.slider::-moz-range-thumb { width:24px; height:24px; background:#64A9A1; cursor:pointer; border-radius:100%; } #compass input.slider:disabled{ opacity:0.5; } #compass input.slider:disabled::-webkit-slider-thumb { background:#c8dcda; } #compass input.slider:disabled::-moz-range-thumb { background:#c8dcda; } #compass .slide[data-name="sector"] .answers{ grid-template-columns:repeat(3, 1fr); } #compass .slide[data-name="production"] .answers{ grid-template-columns:repeat(2, 1fr); } #compass .slide[data-name='size'] input[type="number"]::-webkit-outer-spin-button, #compass .slide[data-name='size'] input[type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; } #compass .slide[data-name='size'] input[type=number] { -moz-appearance:textfield; } #compass .slide[data-name='platform'] .answers{ grid-template-columns:repeat(4, 1fr); } #compass .slide[data-name='platform'] .label { position:relative; padding-top:60px; text-align:center; grid-template-columns:auto auto; justify-content:center; } #compass .slide[data-name='platform'] .label .fa-light { position:absolute; width:100%; text-align:center; font-size:32px; top:20px; } #compass .slide[data-name='platform'] .more_info .label::after{ top:3px; position:relative; margin-left:4px; font-size:14px; } #compass .slide[data-name='reason']{ display:grid; grid-auto-flow:row; grid-template-rows:auto 1fr; } #compass .slide[data-name='reason'] .answers{ display:flex; flex-direction:column; padding-bottom:64px; } #compass .slide[data-name='reason'] textarea{ max-height:180px; height:100%; padding:12px; resize:none; } #compass .slide[data-name='compare']{ display:grid; grid-auto-flow:row; grid-template-rows:auto 1fr; } #compass .slide[data-name='compare'] .answers{ display:flex; align-items:center; padding-bottom:80px; } #compass .slide[data-name='compare'] label{ flex-grow:1; position:relative; } #compass .slide[data-name='compare'] .label{ display:block; padding:16px 16px 12px 16px; text-align:center; background:#F5F5F5; } #compass .slide[data-name='compare'] .label i{ display:block; height:6px; background:#F5F5F5; background:transparent; transition:background-color .2s, color .2s; } #compass .slide[data-name='compare'] .label i + i{ margin-top:2px; } #compass .slide[data-name='compare'] .label i.fill{ background:#dbe1e4; } #compass .slide[data-name='compare'] .label .text{ margin-top:12px; } #compass .slide[data-name='compare'] .label .text strong{ font-size:18px; font-weight:normal; line-height:1em; } #compass .slide[data-name='compare'] .label .text span{ display:none; } #compass .slide[data-name='compare'] input:checked + .label{ background:#cae1df; } #compass .slide[data-name='compare'] input:checked + .label i{ background:transparent; } #compass .slide[data-name='compare'] input:checked + .label i.fill{ background:#64A9A1; } #compass .slide[data-name='compare'] .compare_recommended{ position:absolute; padding:4px 10px; background:#FFD15D; font-weight:bold; color:#817446; text-align:center; left:50%; transform:translateX(-50%); bottom:calc(100% + 16px); } #compass .slide[data-name='compare'] .compare_recommended::after{ content:''; position:absolute; border:6px solid transparent; border-top-color:#FFD15D; top:100%; left:50%; transform:translateX(-50%); } #compass .slide[data-name='construction'] .answers{ display:grid; grid-template-columns:1fr 1fr; } #compass .slide[data-name='services'] .answers{ display:grid; grid-template-columns:1fr 1fr; } #compass .slide[data-name='wholesale'] .answers{ display:grid; grid-template-columns:1fr 1fr; } #compass input[name="retail_extra_outlets"]{ width:88px; text-align:right; } #compass .time_implement_explanation{ display:none; color:#7D89A5; } #compass input:disabled + .label .time_implement_explanation{ display:block; } #compass .multiple_questions .label{ padding:8px 12px; } #compass .multiple_questions .row{ display:grid; grid-template-columns:1fr auto; background-color:#F5F5F5; padding:18px 24px; } #compass .multiple_questions .row + .row{ margin-top:4px; } #compass .multiple_questions .options{ display:flex; margin:-8px 0; } #compass .multiple_questions .options label + label{ margin-left:4px; } #compass .multiple_questions input{ background:#fff; } #compass .multiple_questions input[type="text"], #compass .multiple_questions input[type="number"]{ margin:-6px 4px; padding:6px 12px; width:100%; } #compass .multiple_questions input[type="number"]{ width:100%; max-width:80px; text-align:right; } #compass .multiple_questions input[type="number"]::-webkit-outer-spin-button, #compass .multiple_questions input[name="extra_revenue"][type="number"]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; } #compass .multiple_questions input[name="extra_revenue"][type="number"]input[type=number] { -moz-appearance:textfield; } #compass .multiple_questions .label .fa-check{ margin-right:6px; width:auto; top:1px; } #compass .multiple_questions .label .fa-check-double{ margin-right:6px; width:auto; top:1px; } #compass .multiple_questions .label .fa-xmark{ margin-right:6px; width:auto; top:1px; color:#B98975; } #compass .multiple_questions .label .fa-question{ margin-right:6px; left:0; top:4px; font-size:15px; width:auto; } #compass .multiple_questions .label .fa-euro-sign{ width:auto; top:1px; margin-right:4px; } #compass .multiple_questions input[name="extra_revenue"] { width:100%; max-width:104px; text-align:right; padding-left:0; } #compass .multiple_questions .extra_revenue_label .label{ font-weight:normal; } #compass .multiple_questions .row.more_info .title::before{ content:'\f05a'; font-family:'Font Awesome 6 Pro'; color:#A4ADC2; font-size:18px; line-height:18px; font-weight:300; top:1px; position:relative; margin:0 2px 0 0; } #compass .multiple_questions .row.more_info .label::after{ display:none; } #compass .multiple_questions .row.subquestion{ display:none; margin-left:24px; } #compass .slide[data-name='loading'] h2{ display:none; } #compass .slide[data-name='loading'] .answers{ width:100%; height:100%; align-content:stretch; grid-template-columns:auto 0fr; overflow:hidden; transition:grid-template-columns .6s; grid-gap:0; } #compass .slide[data-name='loading'] .answers h2{ display:block; margin:0 0 1em 0; } #compass .slide[data-name='loading'] .results_wrap{ background:#f5f5f5; display:flex; justify-content:space-between; transition:background-color .6s; } #compass .slide[data-name='loading'] .results{ width:fit-content; margin:0 auto; padding:56px; } #compass .slide[data-name='loading'] .results *{ transition:color .6s; } #compass .slide[data-name='loading'] .loading_step{ position:relative; padding-left:28px; } #compass .slide[data-name='loading'] .loading_step::before{ font-family:'Font Awesome 6 Pro'; color:#64A9A1; display:inline-block; line-height:1; position:absolute; top:1px; left:0; font-size:19px; } #compass .slide[data-name='loading'] .loading_step.loading::before{ content:'\f110'; animation:spinner 1s both steps(8, end) infinite; } #compass .slide[data-name='loading'] .loading_step.done::before{ content:'\f058'; left:1px; font-weight:bold; animation:none; } @keyframes spinner{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } #compass .slide[data-name='loading'] .form_wrap{ overflow:hidden; } #compass .slide[data-name='loading'] .form{ margin-left:24px; padding:56px; height:100%; background:#f5f5f5; opacity:0; transition:opacity .4s; } #compass .slide[data-name='loading'] .form h2{ margin-bottom:12px; } #compass .slide[data-name='loading'] .form h3{ margin-bottom:16px; font-size:16px; font-family:inherit; display:none; } #compass .slide[data-name='loading'] .form p{ margin-bottom:2em; } #compass .slide[data-name='loading'] .form label{ display:grid; align-items:center; max-width:400px; } #compass .slide[data-name='loading'] .form label + label{ margin-top:16px; } #compass .slide[data-name='loading'] .form input{ height:48px; padding-left:16px; background:#fff; transition:background-color .2s; } #compass .slide[data-name='loading'] .form .button.submit{ margin-top:24px } #compass .slide[data-name='loading'] .form label{ transition:color .2s; } #compass .slide[data-name='loading'] .form label.error{ color:#b00b0b; } #compass .slide[data-name='loading'] .form label.error input{ background:#ffdddd; } #compass .slide[data-name='loading'] .form_fields{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(3, auto); grid-auto-flow:column; grid-gap:0px 40px; } #compass .slide[data-name='loading'].loaded .answers{ grid-template-columns:auto 1fr; } #compass .slide[data-name='loading'].loaded .results_wrap{ background:#DCF2D8; } #compass .slide[data-name='loading'].loaded .results h2{ color:#1B7724; } #compass .slide[data-name='loading'].loaded .loading_step.done::before{ color:#49a752; } #compass .slide[data-name='loading'].loaded .loading_step, #compass .slide[data-name='loading'].loaded .loading_step strong{ color:#083a0d; } #compass .slide[data-name='loading'].loaded .form{ opacity:1; transition-delay:0.6s; } #compass .slide[data-name='thank']{ display:grid; align-items:center; align-content:center; padding-bottom:80px; } #compass .slide[data-name='thank'] h2{ text-align:center; font-size:40px; margin:0 0 16px 0; display:none; padding:0; } #compass .slide[data-name='thank'] h3{ text-align:center; font-size:20px; } #compass .slide[data-name='thank'] .open_tip{ display:none; } /* progress bar */ #compass .progress{ grid-column:1 / 3; } #compass .progress .part{ background:#64A9A1; width:0%; height:10px; transition:width .4s; } /* hide tips */ #compass.hide_tips .wrap{ grid-template-columns:1fr 0px; grid-template-rows:1fr 0px; } #compass.hide_tips #tips{ left:0; } #compass.hide_tips #tips .tip{ animation:none !important; left:0 !important; right:auto !important; } #compass.hide_tips #actions{ opacity:0; } /* action buttons */ .orange #compass #actions .button.next { border-radius: 0 0 12px 0; background-color: #e68a00; color: #fff; } .orange #actions_mobile .button.next{ background-color: #e68a00; color: #fff; } #compass #actions{ padding:0 64px; display:flex; align-items:flex-start; justify-content: center; overflow:hidden; opacity:1; transition:opacity .4s; } #compass #actions #steps_wrap{ width:0; overflow:hidden; white-space:nowrap; transition:width .4s; } #compass #actions #steps_wrap.active{ width:64px; } #compass #actions #steps{ width:64px; line-height:47px; font-weight:bold; text-align:center; } #compass #actions .button.prev{ border-radius:12px 0 0 12px; font-size: inherit !important; } #compass #actions .button.next{ border-radius:0 0 12px 0; font-size: inherit !important; } #compass #actions .button.next:disabled{ background-color:#F5F5F5; color:#D6DADC; } #compass #actions > * + *{ margin-left:2px; } #compass #actions.hide{ opacity:0; } #compass #actions .button.next:disabled + #press_enter{ opacity:.2; } #compass #actions .button.submit{ display:none; } #compass #press_enter{ margin-left:12px; line-height:47px; opacity:1; transition:opacity .2s; } #compass #press_enter strong{ color:#005C4E; } #compass #press_enter svg path{ fill:#64A9A1; } /* actions mobile MAY 2025 EDIT */ #compass .slide .ol_number { display: none; } #compass .slide[data-name='size_mobile'] .fa-users{ margin-right:4px; } #actions_mobile{ position:fixed; transform: translateY(100%); top:100%; left:0; background:#fff; color: #141C2F; width:100%; z-index:999; padding:12px 16px; padding-bottom:200px; display:flex; align-items:flex-start; justify-content: center; overflow:hidden; opacity:1; transition:opacity .4s, transform .3s; } #actions_mobile #steps_wrap_mobile{ width:0; overflow:hidden; white-space:nowrap; transition:width .4s; } #actions_mobile #steps_wrap_mobile.active{ width:64px; } #actions_mobile #steps_mobile{ width:64px; line-height:47px; font-weight:bold; text-align:center; } #actions_mobile .button.prev{ border-radius:12px 0 0 12px; flex-grow:1; font-size: inherit !important; } #actions_mobile .button.next{ border-radius:0 0 12px 0; flex-grow:1; font-size: inherit !important; } #actions_mobile .button.next:disabled{ background-color:#F5F5F5; color: #D6DADC; } /* #actions_mobile .button.prev:disabled{ background-color: #43506b; color: #303c55; } */ #actions_mobile > * + *{ margin-left:2px; } #actions_mobile.hide{ opacity:0; } #actions_mobile .button.next:disabled + #press_enter{ opacity:.2; } #actions_mobile .button.submit{ display:none; } /* full screen AUGUST 2025 EDIT */ #compass #actions .button.next{ background:#235f5a; } #actions_mobile .button.next{ background:#235f5a; } body #filler{ display:none; } body.form_full_screen #filler{ display:block; } body.form_full_screen #compass .progress{ position:relative; top:0; transition:top .2s; } body.form_full_screen #compass.full_screen_enabled .progress{ top:-10px; } body.form_full_screen #compass{ position:relative; } body.form_full_screen #compass .wrap{ min-height:100%; transition: grid-template-columns .4s, grid-template-rows .4s .4s, min-height .2s; } body.form_full_screen #compass.full_screen_enabled .wrap{ max-height:100vh; max-height:100dvh; } body.form_full_screen #compass.full_screen_enabled{ position:fixed; z-index:9; transition:width .2s, left .2s, top .2s; } body.form_full_screen #compass.full_screen_enabled .wrap{ min-height:100vh; min-height:100dvh; } body.form_full_screen #compass.full_screen_enabled #tips{ left:0; } body.form_full_screen #compass.full_screen_enabled #form_close_button{ display:block; } body.form_full_screen #compass #form_close_button{ display:none; position:absolute; top:0; right:0; z-index: 9; line-height: 1; background: #141c2f; padding: 16px 24px; animation:form_close_button_show both .6s; cursor:pointer; } body.form_full_screen #compass #form_close_button::before{ content: '\f00d'; font-family: 'Font Awesome 6 Pro'; font-size: 32px; color: #fff; } @keyframes form_close_button_show{ 0%{ opacity:0; } 100%{ opacity:1;} } /* testimonials */ /* .testi{ } */ .testi ul{ display:flex; grid-gap:80px; } .testi ul li{ flex-grow:1; } .testi .profile{ display:flex; align-items:center; margin-bottom:1em; } .testi .stars{ margin-bottom:4px; } .testi .stars::before{ color:#FFC700; content:'\f005 \f005 \f005 \f005 \f005'; font-size:12px; letter-spacing:0.4em; font-family:'Font Awesome 6 Sharp', 'Font Awesome 6 Pro'; } .testi .image{ width:72px; height:72px; border-radius:100%; margin-right:1em; background-color:#fff; position:relative; overflow:hidden; flex-shrink:0; background-size:cover; } .testi .name{ font-weight:bold; font-size:16px; } .testi .text{ color:#BBBFCB; font-weight:bold; font-size:16px; } /* process */ .process{ background:#1D2639; } .process article{ display:grid; grid-template-columns:1fr 1fr; position:relative; } .process .image{ background-color:#252e41; position:absolute; top:0; right:calc(50% + 40px); width:calc(50vw - 40px); height:100%; /*background-image:url('../img/selection.jpg'); background-size:cover; background-repeat:no-repeat;*/ } .process .image img{ position:absolute; top:0; left:0; object-fit:cover; object-position:center top; width:100%; height:100%; } .process .text{ grid-column:2 / 3; padding:256px 40px; font-size:16px; } .process .text p{ color:#BBBFCB; font-weight:bold; } .process .title{ display:grid; } .process .title h2{ order:1; margin:24px 0; } .process .title h3 ul{ display:flex; } .process .title h3 li + li{ margin-left:2em; } .process .title li::before{ content:'\f058'; font-family:'Font Awesome 6 Pro'; color:#FFC700; margin-right:4px; } /* network */ .network{ background:#F5F5F5; padding:144px 0 128px 0; } .network h2{ text-align:right; color:#2D3D62; } .network .text{ display:grid; grid-template-columns:1fr 1fr; font-size:16px; align-items:center; grid-gap:80px; } .network .text p{ font-weight:bold; color:#2B3B61; max-width:540px; } .network .logos{ background:#fff; margin-top:104px; padding:40px 0; overflow:hidden; display:grid; grid-auto-flow:column; } .network .logos .wrap{ display:grid; grid-auto-flow:column; grid-gap:120px; padding:0 120px; animation:loopLogos 640s both linear infinite; } .network .logos .wrap img{ width:136px; height:90px; object-fit:contain; }/* .network .logos .wrap div{ width:136px; height:90px; background-size:contain; background-position:center; background-repeat:no-repeat; } */ @keyframes loopLogos{ 0%{ margin-left:0%; } 50%{ margin-left:calc(-90%) } 100%{ margin-left:0%; } } /* usp */ .usp ul{ display:grid; grid-template-columns:repeat(3, 1fr); grid-gap:80px; } .usp ul li{ text-align:center; font-size:16px; } .usp ul li::before{ font-family:'Font Awesome 6 Pro'; color:#64A9A1; font-weight:200; font-size:64px; } .usp ul li:nth-child(1)::before{ content:'\f4ba'; } .usp ul li:nth-child(2)::before{ content:'\f13d'; } .usp ul li:nth-child(3)::before{ content:'\f648'; } .usp .icon{ font-size:40px; } .usp h2{ font-size:20px; } .usp p{ color:#BBBFCB; font-weight:bold; } /* about */ .about{ background-color:#F3F4F7; padding:280px 0; position:relative; } .about::before{ content:''; position:absolute; width:75%; height:100%; top:0; right:0; background-image:url('../img/about.jpg'); background-size:cover; background-position:left center; z-index:0; } .about::after{ content:''; position:absolute; width:50%; height:100%; top:0; left:25%; background:linear-gradient(90deg, rgba(243,244,247,1) 0%, rgba(243,244,247,0) 100%); } .about article{ position:relative; z-index:2; } .about h2{ color:#2D3D62; } .about p{ font-size:16px; font-weight:bold; color:#2B3B61; max-width:640px; } /* faq */ .faq{ background:#fff; padding:128px 0; margin-top:0; } .faq article{ max-width:674px; } .faq h2{ font-size:48px; } .faq h2, .faq h3{ color:#2D3D62; } .faq h3{ margin-top:40px; } .faq p{ color:#2B3B61; } .faq .contact_wrap .profiles{ width:100%; justify-content:center; display:flex; margin:80px 0 -44px 0; } .faq .contact_wrap .profile{ width:88px; height:88px; border-radius:100%; background:#eee; border:2px solid #fff; background-size:cover; object-fit:cover; } .faq .contact_wrap .profile + .profile{ margin-left:-16px; } .faq .contact{ background:#F5F5F5; text-align:center; border-radius:32px 0 32px 32px; padding:80px 32px 64px 32px; margin:0 0 0 -200px; width:calc(100% + 400px); } .faq .contact h2{ font-size:20px; } .faq .contact p{ margin:1em auto; max-width:520px; } .faq .contact a{ color:#005C4E; font-weight:bold; } .faq .links{ display:flex; justify-content:center; } .faq .links li + li{ margin-left:16px; } /* final */ .final{ margin:0; background-color:#1D2639; position:relative; } .final::before{ content:''; position:absolute; top:0; left:0; width:100%; height:100%; background-image:url('../img/office.jpg'); background-size:cover; opacity:0.15; } .final article{ position:relative;} .final h2.title{ padding:244px 0; margin:0; max-width:880px; } .final .steps{ border-radius:32px 0 32px 32px; position:relative; top:72px; margin:-72px 0 0 0; } /* footer */ footer{ padding:200px 0 128px; } footer .info{ display:grid; grid-template-columns:1fr auto; grid-gap:40px; align-items:center; margin:40px 0 80px 0; } footer .info ul{ display:flex; } footer .info ul li{ background:#293247; padding:24px 32px; border-radius:12px 0 12px 12px; } footer .info ul li a{ color:#fff; } footer .info ul li h3{ color:#fff; } footer .info ul li h3::before{ font-family:'Font Awesome 6 Pro'; font-size:20px; font-weight:300; position:relative; top:1px; margin-right:6px; } footer .info ul li:nth-child(1) h3::before{ content:'\f8d3'; } footer .info ul li:nth-child(2) h3::before{ content:'\f0e0'; } footer .info ul li:nth-child(3) h3::before{ content:'\f3c5'; } footer .info ul li + li{ margin-left:16px; } footer .info p{ color:#BBBFCB; font-weight:bold; margin:0; max-width:480px; } /* modal */ .modal{ display:none; position:fixed; padding:0 24px; top:0; left:0; width:100%; height:100%; z-index:9999; background:rgba(20,28,47,.8); overflow:hidden; } .modal.show{ display:block; animation:show_modal .4s both; } .modal.hide{ display:block; animation:hide_modal .4s both; } @keyframes show_modal { 0%{ opacity:0; padding-top:80px; } 100%{ opacity:1; padding-top:0; } } @keyframes hide_modal { 0%{ opacity:1; padding-top:0; } 100%{ opacity:0; padding:80px; } } .modal .close_modal{ font-family:'Font Awesome 6 Pro'; font-weight:bold; font-size:40px; position:absolute; top:40px; right:40px; line-height:1; cursor:pointer; } .modal .close_modal::before{ content:'\f00d'; } .modal .scroll{ max-width:762px; margin:auto; overflow-y:scroll; height:100vh; } .modal .content{ background:#fff; color:#2B3B61; padding:72px 80px; } .modal ul{ margin-bottom:1em; padding-left:18px; } .modal ul li{ list-style-type: disc; } .modal h2, .modal h3, .modal h4{ color:#2D3D62; } .modal h2{ font-size:40px; } .modal h3{ font-size:24px; } .modal * + h3{ margin-top:1em; } .modal h4{ font-size:16px; } .modal a{ color:#64A9A1; font-weight:bold; } .modal .image{ height:326px; position:relative; margin:48px 0 48px -80px; width:calc(100% + 160px); } .modal .image img{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:100%; height:100%; object-fit:cover; } @media (max-width:1500px) { #compass .wrap{ padding:40px 0; } #compass .slide{ padding:0 40px; } #compass #tips{ left:16px; } #compass #actions{ padding:0 40px; } .process .text{ padding:144px 40px; } } @media (max-width:1200px) { .testi ul{ grid-gap:40px; } .testi li:nth-child(3){ display:none; } .usp ul{ grid-gap:40px; } .faq .contact{ margin:0 0 0 -56px; width:calc(100% + 112px); } .process article{ grid-template-columns:2fr 3fr; } .process .image{ width:40%; right:60%; } footer .info{ grid-template-columns:1fr; } footer .info ul li{ flex-grow:1; } } @media (max-width:1100px) { #compass{ overflow:hidden; } #compass h2{ display:grid; grid-template-columns:auto 1fr; padding-top:3px; margin-bottom:24px; } #compass .wrap{ width:100%; grid-template-columns:100%; grid-gap:0; position:relative; } #compass #slides{ width:auto; } #compass .slide{ padding:0 40px; } #compass #tips{ position:absolute; left:0%; top:-40px; height:calc(100% + 88px); width:320px; z-index:9; border-radius:32px 0 0 32px; transition:left 0.4s; } #compass #tips.show{ left:-320px; } #compass .tip, #compass .tip.active{ background:#EDEDED; animation:none !important; } #compass .tip::before, #compass .tip::after{ color:#dcdbe1; } @keyframes cast_shadow{ 0%{ outline-color:transparent; } 100%{ outline-color:#e7e6ea; } } @keyframes cast_shadow_off{ 0%{ outline-color:#e7e6ea; } 100%{ outline-color:transparent; } } #compass .open_tip{ display:inline-block; cursor:pointer; } #compass .open_tip::after{ content:'\f059'; color:#64A9A1; font-family:'Font Awesome 6 Pro'; font-size:23px; margin:0 8px 0 0; position:relative; top:-3px; /* background:#cae1df; width:56px; height:72px; line-height:72px; padding-left:2px;*/ } #compass .tip .close_tip{ display:block; position:absolute; top:30px; right:24px; background:#64A9A1; color:#fff; width:28px; height:28px; line-height:28px; text-align:center; border-radius:100%; cursor:pointer; } #compass .tip .close_tip::before{ content:'\f00d'; font-size:16px; font-family:'Font Awesome 6 Pro'; } #compass #actions{ grid-row:2 / 3; } #compass .slide[data-name='loading'].loaded .answers{ grid-template-rows:auto 1fr; } #compass .slide[data-name='loading'] .results_wrap{ align-items:center; /* background:#fff;*/ } #compass .slide[data-name='loading'] .results_wrap h2{ text-align:center; } #compass .slide[data-name='loading'] .results{ padding:24px; margin:0; width:100%; } #compass .slide[data-name='loading'] .answers{ grid-template-columns:1fr !important; grid-template-rows:auto 0fr; transition:grid-template-rows .6s; } #compass .slide[data-name='loading'] .answers h2{ margin-bottom:12px; } #compass .slide[data-name='loading'] .loading_step{ display:none; } #compass .slide[data-name='loading'] .loading_step[data-name="loading_matching"]{ display:block; margin:0; padding:0; text-align:center; } #compass .slide[data-name='loading'] .loading_step::before{ position:relative; margin-right:4px; } #compass .slide[data-name='loading'] .form{ margin-left:0; padding:32px; background-color:transparent; padding-left:0; padding-right:0; } #compass .slide[data-name='loading'] .form_fields{ display:block; } #compass .slide[data-name='loading'] .form input{ background:#f5f5f5; } #compass .slide[data-name='loading'] .form label { grid-template-columns:120px 1fr; } #compass .slide[data-name='loading'] .form label + label{ margin-top:8px; } .about::before{ background-position:50% center; } .about p{ max-width:480px; } } @media (max-width:1000px) { #compass .wrap{ padding:40px 0 32px 0; } #compass .slide{ padding:0 32px; } #compass #actions{ padding:0 32px; } .process article{ display:block; } .process .image{ position:relative; right:0; top:-32px; height:280px; width:calc(100% + 32px); margin:0 0 8px -32px; } .process .image img{ object-position:center bottom; } .process .text{ padding:0 0 80px 0; } .modal .content{ padding:56px 40px; } .modal .close_modal{ background:#64A9A1; padding:8px; border-radius:100%; width:56px; height:56px; top:0; right:0; text-align:center; transform:scale(0.6); } } @media (max-width:900px) { header h1 { max-width:460px; } #compass .wrap{ height:728px; } #compass .label{ padding:14px 20px; } #compass .slide[data-name="sector"] .answers{ grid-template-columns:repeat(2, 1fr); } #compass .slide[data-name='construction'] .answers, #compass .slide[data-name='wholesale'] .answers, #compass .slide[data-name='platform'] .answers{ grid-template-columns:1fr; } #compass .multiple_questions .row{ padding:0; grid-template-columns:1fr; background:transparent } #compass .multiple_questions .title{ font-weight:bold; } #compass .multiple_questions .options{ margin:5px 0 0 0; flex-wrap:wrap; grid-gap:6px 16px; } #compass .multiple_questions .options label + label{ margin-left:0px; } #compass .multiple_questions .row + .row{ margin-top:22px; } #compass .multiple_questions .label { padding:4px 10px; } #compass .multiple_questions .text .label{ background:transparent; padding-left:0; } #compass .multiple_questions input[type="text"], #compass .multiple_questions input[type="number"]{ background:#f5f5f5; } } @media (max-width:800px) { input[type="text"], input[type="number"], textarea{ font-size:16px; } #compass .wrap{ padding:32px 0 24px 0; } #compass .slide{ padding:0 24px; } #compass #actions{ padding:0 24px; } #compass #press_enter{ display:none; } #compass #tips{ top:-32px; height:calc(100% + 66px); } /* actions mobile MAY 2025 EDIT */ #compass .wrap{ height:auto; min-height:508px; grid-template-rows:1fr; } #compass .slide{ padding:0 16px; } #compass .slide.active{ position:relative; } #compass .slide .ol_number { display:inline; color:#abb8d2; } #compass .label { padding:12px 14px; align-items:center; grid-gap:4px; } #compass .label .fa-light{ font-size: 18px !important; top: 0 !important; width: 26px !important; position: relative !important; text-align: center !important; left: 0 !important; margin-right:0 !important; } #compass label.text .label{ padding:0; height:100%; grid-gap:0; } #compass .multiple_questions input[type="text"], #compass .multiple_questions input[type="number"]{ margin:0; height:100%; min-height:42px; } #compass .multiple_questions .options{ display:grid; grid-template-columns:repeat(2, 1fr); grid-gap:4px; white-space:nowrap; } #compass .multiple_questions .label{ padding:10px; } #compass .multiple_questions .title{ line-height:1.2; } #compass .multiple_questions .row{ grid-gap:4px; } #compass .multiple_questions .row.subquestion{ margin-left:16px; } #compass .multiple_questions .row.more_info .title::before{ display:none; } #compass .multiple_questions .row + .row{ margin-top:0; } #compass .multiple_questions .multiple_questions{ display: flex; flex-direction: column; grid-gap: 32px; } #compass .multiple_questions label.unknown{ display:none; } #compass .multiple_questions .options .text{ grid-column:1 / 3; } #compass .multiple_questions .options .text input{ width:100%; max-width:none; } #compass .multiple_questions .options .text .label{ grid-gap:4px; } #compass .slide[data-name='services'] .answers{ grid-template-columns:1fr; } #compass .slide[data-name='platform'] .label { padding-top: 12px; text-align: left; justify-content: flex-start; } #compass .slide[data-name='compare'] .label{ height:100%; } #compass #actions{ display:none; } #actions_mobile.show{ transform:translateY(calc(-100% + 190px)); } #compass.hide_tips + #actions_mobile.show{ transform:translateY(calc(-100% + 190px)); } #compass .slide[data-name='reason'] textarea{ max-height: none; min-height: 180px; } .testi .text, .process ul li, .process .text p, .network .text p, .usp p, .about p{ font-size:1rem; } .network .text{ grid-gap:24px; grid-template-columns:5fr 6fr; } .network .logos .wrap{ grid-gap:0px; animation:loopLogos 400s both linear; } .network .logos .wrap img{ transform:scale(0.6); } .about{ padding:400px 0 120px; } .about::before{ width:100%; height:320px; } .about::after{ display:none; } .about p{ max-width:none; } .faq article{ max-width:none; } .faq .contact{ margin:0; width:100%; } .final h2.title { padding:244px 0 40px 0; } .final .steps{ padding:32px 24px; grid-gap:16px; } .final .steps li{ grid-template-columns:1fr; grid-auto-flow:row; grid-gap:0; } .final .steps li::before{ margin-bottom:8px;} .final .steps li p{ grid-column:initial; } .final .steps .time{ display:none; } footer .info ul li{ padding:16px; } /* full screen AUGUST 2025 EDIT */ body.form_full_screen #compass.full_screen_enabled #tips { left:0%; top:0; z-index: 10; height: 100dvh; } body.form_full_screen #compass.full_screen_enabled #tips.show { left:-320px; } body.form_full_screen #compass .slide{ padding-top:40px; padding-bottom:40px; } body.form_full_screen #compass .wrap { padding:0; } body.form_full_screen #compass.full_screen_enabled #slides{ overflow-y:auto; } body.form_full_screen #compass.full_screen_enabled .slide{ height:fit-content; padding-bottom: 80px; } body.form_full_screen #compass #form_close_button { padding:12px 20px; } body.form_full_screen #compass #form_close_button::before{ font-size:20px; } body.form_full_screen #compass .slide[data-name='loading']{ padding-top:24px; } body.form_full_screen #compass .slide[data-name='loading'] .form{ padding-bottom:0; } #compass .slide[data-name='loading'] .form .button.submit { padding: 20px 24px; background: #235f5a; width: 100%; font-size:inherit !important; } #compass .tip::after{ display:none } } @media (max-width:640px) { #compass .slide[data-name='loading'] .form input{ height:40px; font-size: 16px; } .testi ul{ flex-direction:column; grid-gap:80px; } } @media (max-width:600px) { /* focus effect */ body.focus_effect main > *, body.focus_effect main .compass_wrap article > *, body.focus_effect header{ transition:opacity .2s; } body.focus_effect.focus_form main > *, body.focus_effect.focus_form main .compass_wrap article > *, body.focus_effect.focus_form header { opacity: 0.4; } body.focus_effect.focus_form main > section.compass_wrap { opacity: 1; } body.focus_effect.focus_form #compass { opacity: 1 !important; } #compass h2{ font-size:18px; } #compass .slide[data-name='compare'] .answers{ flex-direction:column-reverse; } #compass .slide[data-name='compare'] label{ width:100%; } #compass .slide[data-name='compare'] .label{ padding:16px; display:flex; flex-direction:row-reverse; align-items:center; justify-content:flex-end; } #compass .slide[data-name='compare'] .label i{ width:6px; } #compass .slide[data-name='compare'] .label i + i{ margin:0 0 0 2px; } #compass .slide[data-name='compare'] .label .text{ width:32px; text-align:left; margin:0; } #compass .slide[data-name='compare'] .label .text strong{ line-height:24px; } #compass .slide[data-name='compare'] .compare_recommended{ z-index:1; bottom:0; transform:translateY(-50%); left:auto; right:12px; } #compass .slide[data-name='compare'] .compare_recommended::after{ display:none; } .process .image img{ object-position:center top; } .testi ul{ display:block; } .testi li + li{ margin-top:56px; } .testi li:last-child{ display:block; } .network h2{ text-align:left; } .network .text{ display:block; } .usp ul{ display:block; } .usp li + li{ margin-top:40px; } .usp ul li::before{ font-size:48px; } .final .steps{ border-radius:24px 0 24px 24px; } footer{ padding-bottom:48px; } footer .info{ margin:40px 0 48px 0; } footer .info ul{ flex-direction:column; } footer .info ul li + li{ margin:16px 0 0 0; } footer .nav{ flex-direction:column; } footer .nav li + li{ margin:16px 0 0 0; } } @media (max-width:540px) { #compass input:disabled + .label{ grid-template-columns:auto 1fr; } #compass input:disabled + .label .time_implement_explanation{ grid-column:1 / 3; display:none; } }