/* Minification failed. Returning unminified contents. (4955,84): run-time error CSS1030: Expected identifier, found '.' (4955,97): run-time error CSS1031: Expected selector, found ')' (4955,97): run-time error CSS1025: Expected comma or open brace, found ')' (7020,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7022,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7023,16): run-time error CSS1039: Token not allowed after unary operator: '-height' (7027,75): run-time error CSS1039: Token not allowed after unary operator: '-b' (7027,97): run-time error CSS1039: Token not allowed after unary operator: '-b' (7027,131): run-time error CSS1039: Token not allowed after unary operator: '-b' (7027,167): run-time error CSS1039: Token not allowed after unary operator: '-b' (7027,201): run-time error CSS1039: Token not allowed after unary operator: '-b' (7027,241): run-time error CSS1039: Token not allowed after unary operator: '-b' (7027,257): run-time error CSS1039: Token not allowed after unary operator: '-b' (7027,291): run-time error CSS1039: Token not allowed after unary operator: '-b' (7027,320): run-time error CSS1039: Token not allowed after unary operator: '-b' (7027,354): run-time error CSS1039: Token not allowed after unary operator: '-b' (7027,382): run-time error CSS1039: Token not allowed after unary operator: '-b' (7030,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7031,16): run-time error CSS1039: Token not allowed after unary operator: '-height' (7049,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7055,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7061,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7067,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7073,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7079,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7085,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7091,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7444,39): run-time error CSS1019: Unexpected token, found ' ' (7444,39): run-time error CSS1019: Unexpected token, found ' ' (7444,39): run-time error CSS1042: Expected function, found ' ' (7444,39): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' ' (7451,41): run-time error CSS1019: Unexpected token, found ' ' (7451,41): run-time error CSS1019: Unexpected token, found ' ' (7451,41): run-time error CSS1042: Expected function, found ' ' (7451,41): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' ' (7496,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7498,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7499,16): run-time error CSS1039: Token not allowed after unary operator: '-height' (7503,75): run-time error CSS1039: Token not allowed after unary operator: '-b' (7503,97): run-time error CSS1039: Token not allowed after unary operator: '-b' (7503,131): run-time error CSS1039: Token not allowed after unary operator: '-b' (7503,167): run-time error CSS1039: Token not allowed after unary operator: '-b' (7503,201): run-time error CSS1039: Token not allowed after unary operator: '-b' (7503,241): run-time error CSS1039: Token not allowed after unary operator: '-b' (7503,257): run-time error CSS1039: Token not allowed after unary operator: '-b' (7503,291): run-time error CSS1039: Token not allowed after unary operator: '-b' (7503,320): run-time error CSS1039: Token not allowed after unary operator: '-b' (7503,354): run-time error CSS1039: Token not allowed after unary operator: '-b' (7503,382): run-time error CSS1039: Token not allowed after unary operator: '-b' (7504,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (7525,3): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (8577,41): run-time error CSS1019: Unexpected token, found ' ' (8577,41): run-time error CSS1019: Unexpected token, found ' ' (8577,41): run-time error CSS1042: Expected function, found ' ' (8577,41): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' ' (8640,41): run-time error CSS1039: Token not allowed after unary operator: '-MegaMenu-offset' (9012,35): run-time error CSS1030: Expected identifier, found '.' (9012,47): run-time error CSS1031: Expected selector, found ')' (9012,47): run-time error CSS1025: Expected comma or open brace, found ')' (9017,35): run-time error CSS1030: Expected identifier, found '.' (9017,47): run-time error CSS1031: Expected selector, found ')' (9017,47): run-time error CSS1025: Expected comma or open brace, found ')' (9020,35): run-time error CSS1030: Expected identifier, found '.' (9020,47): run-time error CSS1031: Expected selector, found ')' (9020,47): run-time error CSS1025: Expected comma or open brace, found ')' (9023,35): run-time error CSS1030: Expected identifier, found '.' (9023,47): run-time error CSS1031: Expected selector, found ')' (9023,47): run-time error CSS1025: Expected comma or open brace, found ')' (9027,37): run-time error CSS1030: Expected identifier, found '.' (9027,49): run-time error CSS1031: Expected selector, found ')' (9027,49): run-time error CSS1025: Expected comma or open brace, found ')' (9030,37): run-time error CSS1030: Expected identifier, found '.' (9030,49): run-time error CSS1031: Expected selector, found ')' (9030,49): run-time error CSS1025: Expected comma or open brace, found ')' (9033,37): run-time error CSS1030: Expected identifier, found '.' (9033,49): run-time error CSS1031: Expected selector, found ')' (9033,49): run-time error CSS1025: Expected comma or open brace, found ')' (9187,41): run-time error CSS1019: Unexpected token, found ' ' (9187,41): run-time error CSS1019: Unexpected token, found ' ' (9187,41): run-time error CSS1042: Expected function, found ' ' (9187,41): run-time error CSS1062: Expected semicolon or closing curly-brace, found ' ' (10134,41): run-time error CSS1030: Expected identifier, found '.' (10134,68): run-time error CSS1031: Expected selector, found ')' (10134,68): run-time error CSS1025: Expected comma or open brace, found ')' (10137,41): run-time error CSS1030: Expected identifier, found '.' (10137,68): run-time error CSS1031: Expected selector, found ')' (10137,68): run-time error CSS1025: Expected comma or open brace, found ')' (10143,41): run-time error CSS1030: Expected identifier, found '.' (10143,74): run-time error CSS1031: Expected selector, found ')' (10143,74): run-time error CSS1025: Expected comma or open brace, found ')' (10318,50): run-time error CSS1030: Expected identifier, found '.' (10318,60): run-time error CSS1031: Expected selector, found ')' (10318,60): run-time error CSS1025: Expected comma or open brace, found ')' (10322,52): run-time error CSS1030: Expected identifier, found '.' (10322,62): run-time error CSS1031: Expected selector, found ')' (10322,62): run-time error CSS1025: Expected comma or open brace, found ')' (10327,52): run-time error CSS1030: Expected identifier, found '.' (10327,62): run-time error CSS1031: Expected selector, found ')' (10327,62): run-time error CSS1025: Expected comma or open brace, found ')' (10331,50): run-time error CSS1030: Expected identifier, found '.' (10331,60): run-time error CSS1031: Expected selector, found ')' (10331,60): run-time error CSS1025: Expected comma or open brace, found ')' */ /*NIEUWSMODULE IN ADMIN ALS 'AFBEELDING TONEN' OP NEE STAAT KRIJG JE WEL DE OPTIE OM EEN AFBEELDING OP TE LADEN BIJ HET TOEVOEGEN VAN EEN NIEUWSPUNTJE. DIT ZOU DAN TOCH NIET ZICHTBAAR MOGEN ZIJN??*/ /*TALEN dropdown nog verder stylen */ /*In admin is het mogelijk om de naam van het logo mee te geven. Te bekijken welke oplossingen hiervoor te vinden zijn. Nu worden er verschillende logo's ingeladen afhankelijk van de schermgroottes*/ /*De structuur + namen van de kolommen laten aanpassen*/ /* Bij het aanmaken van een nieuwe pagina moeten er nu 4 keuzes zijn. • Pagina • Doorgelinkt menupuntje • Link naar externe pagina • Togglemenu : Een link zonder eigen pagina die dient om submenupunten open en dicht te klappen. Deze moet ook een eigen class krijgen alsook een extra class om deze open of dicht te klappen. */ /*google font roboto altijd inladen omwille van navbar. Of naar een websafe font gaan kijken*/ /*Realisatiemodule met uitvullen-firstrow, uitvullen en normal bekijken of dit helemaal juist werkt, dan ook toepassen op aanbod bekijken*/ /*TABEL MOGELIJKHEDEN NOG BEKIJKEN*/ /* "none" ELSE "color_scheme1" OR "color_scheme2" */ /* "none" ELSE "color_scheme1" OR "color_scheme2" */ /* "subIncrement" ELSE "increment" */ /*-----------------------------*/ /* NAVICON ALGEMEEN */ /*-----------------------------*/ /*-----------------------------*/ /* ICON ALGEMEEN */ /*-----------------------------*/ /*-----------------------------*/ /* ICON FIXED SIZE */ /*-----------------------------*/ /*-----------------------------*/ /* ICON MORE */ /*-----------------------------*/ /* "plus" ELSE "arrow" */ /*-----------------------------*/ /* SCROLL TO TOP */ /*-----------------------------*/ /*-----------------------------*/ /* SANDWICH */ /*-----------------------------*/ /* "cross" ELSE "arrow" ELSE "none" (geen animatie ) */ /*-----------------------------*/ /* LOGO HOME */ /*-----------------------------*/ /*-----------------------------*/ /* LOGO */ /*-----------------------------*/ /*-----------------------------*/ /* LANGUAGE */ /*-----------------------------*/ /* "dropdown" ELSE "default" */ /* "true" ELSE "false" */ /*-----------------------------*/ /* NAV TOGGLE */ /*-----------------------------*/ /* "arrow" ELSE "plus" */ /* "true" ELSE "false" */ /* "true" ELSE "false" */ /* "true" ELSE "false" */ /*-----------------------------*/ /* NAV MOBILE */ /*-----------------------------*/ /* "left" ELSE "right" Langs welke zijde moet het menu inschuiven. */ /*-----------------------------*/ /* HEADER TEXT */ /*-----------------------------*/ /* "none" ELSE "block" */ /* "true" ELSE "false" */ /* "true" ELSE "false" */ /*-----------------------------*/ /* HEADER */ /*-----------------------------*/ /* "true" ELSE "false" */ /* "true" ELSE "false" */ /*-----------------------------*/ /* NAV TOP */ /*-----------------------------*/ /* "true" ELSE "false" */ /* "true" ELSE "false" */ /*-----------------------------*/ /* NAV ROOT */ /*-----------------------------*/ /* "true" ELSE "false" */ /* "true" ELSE "false" */ /*-----------------------------*/ /* NAV MAIN */ /*-----------------------------*/ /* nav_main-width in % of px */ /*-----------------------------*/ /* NAV MODULE */ /*-----------------------------*/ /* "arrow" ELSE "plus" */ /*-----------------------------*/ /* MAIN CONTENT */ /*-----------------------------*/ /* main-width kan % toegevoegd worden bij noodzaak */ /*-----------------------------*/ /* COLUMNS */ /*-----------------------------*/ /*-----------------------------*/ /* MODULES ALGEMEEN */ /*-----------------------------*/ /*-------------------------*/ /* FOOTER + CREDITS */ /*-------------------------*/ /*-----------------------------*/ /* TESTIMONIALS */ /*-----------------------------*/ /* "sides", "center" */ /* "top", "bottom", "center" */ /* % */ /*-----------------------------*/ /* RESPONSIVE VIDEO */ /*-----------------------------*/ /*-----------------------------*/ /* RESPONSIVE MAPS */ /*-----------------------------*/ /*-----------------------------*/ /* SOCIAL */ /*-----------------------------*/ /*Grootte van het svg icoontje tov de btn*/ /*-----------------------------*/ /* FOTOSLIDESHOW */ /*-----------------------------*/ /* "bullets" ELSE "default" */ /* "cover" ELSE "link-only" */ /*-----------------------------*/ /* FOTOMATRIX */ /*-----------------------------*/ /* "matrix" ELSE "masonry-hor" */ /*-------------------------*/ /* DOCUMENTEN */ /*-------------------------*/ /*-------------------------*/ /* FORMULIER */ /*-------------------------*/ /*-------------------------*/ /* TAGS */ /*-------------------------*/ /*-----------------------------*/ /* AANBOD */ /*-----------------------------*/ /* "uitvullen" ELSE "normal" */ /*-----------------------------*/ /* REALISATIES */ /*-----------------------------*/ /* "normal" ELSE "uitvullen" ELSE "uitvullen-firstrow" */ /*-----------------------------*/ /* NIEUWS */ /*-----------------------------*/ /* "normal" ELSE "uitvullen" ELSE "uitvullen-firstrow" */ /* "default", "metWeekdagLang", "metWeekdagKort" */ /* "default", "maandLang", "maandKort" */ /* "default", "jaarKort" */ /* inline, none */ html { scroll-behavior: smooth; } /*--------------------------------------------------------------------------------*/ /* ALGEMEEN */ /*--------------------------------------------------------------------------------*/ *, *:before, *:after { box-sizing: border-box; } .no-scroll { overflow: hidden; } html, body, form { min-height: 100%; } figure { margin: 0; } /*CUSTOM SELECTION COLOR*/ ::selection { background: #c71717 !important; color: #fff; } ::-moz-selection { background: #c71717 !important; color: #fff; } :active, :focus { outline-style: none; -moz-outline-style: none; } body.preload * { transition: none !important; } /*--------------------------------------------------------------------------------*/ /* ANKER AUTO ADDED OFFSET */ /*--------------------------------------------------------------------------------*/ :target:before, a[name]:before { content: ''; padding: 0; padding-top: 60px; margin-top: -60px; z-index: -1; pointer-events: none; display: block; text-decoration: none; } .has-navbar :target:before, .has-navbar a[name]:before { padding-top: 106px; margin-top: -106px; } @media only screen and (min-width: 576px) { :target:before, a[name]:before { padding: 0; padding-top: 60px; margin-top: -60px; } .has-navbar :target:before, .has-navbar a[name]:before { padding-top: 106px; margin-top: -106px; } } @media only screen and (min-width: 768px) { :target:before, a[name]:before { padding: 0; padding-top: 65px; margin-top: -65px; } .has-navbar :target:before, .has-navbar a[name]:before { padding-top: 111px; margin-top: -111px; } } @media only screen and (min-width: 992px) { :target:before, a[name]:before { padding: 0; padding-top: 194px; margin-top: -194px; } .has-navbar :target:before, .has-navbar a[name]:before { padding-top: 240px; margin-top: -240px; } } @media only screen and (min-width: 1200px) { :target:before, a[name]:before { padding: 0; padding-top: 199px; margin-top: -199px; } .has-navbar :target:before, .has-navbar a[name]:before { padding-top: 245px; margin-top: -245px; } } /*--------------------------------------------------------------------------------*/ /* INPUT PLACEHOLDER */ /*--------------------------------------------------------------------------------*/ ::-webkit-input-placeholder { color: #c7c7c7; opacity: 1; } :-moz-placeholder { color: #c7c7c7; opacity: 1; } ::-moz-placeholder { color: #c7c7c7; opacity: 1; } :-ms-input-placeholder { color: #c7c7c7; opacity: 1; } .color_scheme1_inputPlaceHolder-color ::-webkit-input-placeholder { color: #c7c7c7; } .color_scheme1_inputPlaceHolder-color :-moz-placeholder { color: #c7c7c7; } .color_scheme1_inputPlaceHolder-color ::-moz-placeholder { color: #c7c7c7; } .color_scheme1_inputPlaceHolder-color :-ms-input-placeholder { color: #c7c7c7; } .color_scheme2_inputPlaceHolder-color ::-webkit-input-placeholder { color: #c7c7c7; } .color_scheme2_inputPlaceHolder-color :-moz-placeholder { color: #c7c7c7; } .color_scheme2_inputPlaceHolder-color ::-moz-placeholder { color: #c7c7c7; } .color_scheme2_inputPlaceHolder-color :-ms-input-placeholder { color: #c7c7c7; } /*--------------------------------------------------------------------------------*/ /* ICON ALGEMEEN */ /*--------------------------------------------------------------------------------*/ .nav_icon { width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; border-radius: 50%; } .icon, .icon span { width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; border-radius: 0%; } @media only screen and (min-width: 576px) { .icon, .icon span { width: 30px; height: 30px; } } @media only screen and (min-width: 768px) { .icon, .icon span { width: 26px; height: 26px; } } @media only screen and (min-width: 992px) { .icon, .icon span { width: 26px; height: 26px; } } @media only screen and (min-width: 1200px) { .icon, .icon span { width: 26px; height: 26px; } } /*ADD THIS TO MAKE IT FIXED SIZE*/ .more_icon { position: relative; } .more_icon span:before, .more_icon span:after { content: ''; position: absolute; width: 1px; height: 0; background: #fff; border-radius: 0.5px; transition: 0.2s; } .more_icon span:before { transform: rotate(90deg); } .more_icon span { transform: rotate(90deg); } .more_icon span:before, .more_icon span:after { transform-origin: 0.5px 0.5px; } .more_icon span:after { transform: rotate(45deg); } .more_icon span:before { transform: rotate(-45deg); } /*--------------------------------------------------------------------------------*/ /* SCROLL TO TOP */ /*--------------------------------------------------------------------------------*/ #scrollToTop { bottom: 55px; left: inherit; right: 10px; background: #111b1e; position: fixed; z-index: 10000; } #scrollToTop:hover { background: #111b1e; } #scrollToTop span { position: relative; height: 45%; } #scrollToTop span, #scrollToTop span:before, #scrollToTop span:after { background-color: #fff; width: 1px; border-radius: 0.5px; } #scrollToTop span:before, #scrollToTop span:after { content: " "; position: absolute; } #scrollToTop span:before, #scrollToTop span:after { transform-origin: 0.5px 0.5px; height: 75%; } #scrollToTop span:before { transform: rotate(-45deg); top: 0; } #scrollToTop span:after { transform: rotate(45deg); top: 0; } .show-nav #scrollToTop, .has-navbar #scrollToTop { display: none !important; } /*--------------------------------------------------------------------------------*/ /* SANDWICH */ /*--------------------------------------------------------------------------------*/ @media only screen and (min-width: 992px) { #sandwich { display: none; } } @media only screen and (max-width: 991px) { #sandwich { background: transparent; justify-content: center; align-items: center; position: fixed; z-index: 10000; } #sandwich span { position: relative; width: 45%; } #sandwich span, #sandwich span:before, #sandwich span:after { background-color: #fff; height: 1px; border-radius: 0.5px; transition: 0.2s; } #sandwich span:before, #sandwich span:after { content: " "; position: absolute; top: -5px; left: 0; right: 0; } #sandwich span:after { top: 5px; } .show-nav { overflow: hidden; } .show-nav #sandwich span { background: transparent; } .show-nav #sandwich span:before { transform: rotate(-45deg); top: 0; } .show-nav #sandwich span:after { transform: rotate(45deg); top: 0; } } #sandwich { top: 5px; left: inherit; right: 0; } .has-navbar #sandwich { top: 51px; } @media only screen and (min-width: 576px) { #sandwich { top: 5px; left: inherit; right: 0; } .has-navbar #sandwich { top: 51px; } } @media only screen and (min-width: 768px) { #sandwich { top: 7.5px; left: inherit; right: 0; } .has-navbar #sandwich { top: 53.5px; } } @media only screen and (min-width: 992px) { #sandwich { top: 29px; left: inherit; right: 0; } .has-navbar #sandwich { top: 75px; } } @media only screen and (min-width: 1200px) { #sandwich { top: 31.5px; left: inherit; right: 0; } .has-navbar #sandwich { top: 77.5px; } } /*--------------------------------------------------------------------------------*/ /* CLOSE ICON */ /*--------------------------------------------------------------------------------*/ .close_icon { display: flex; justify-content: center; align-items: center; } .close_icon span { position: relative; width: 45%; } .close_icon span:before, .close_icon span:after { content: " "; position: absolute; left: 0; right: 0; top: 0; } .close_icon span:before, .close_icon span:after { background-color: #fff; height: 1px; border-radius: 0.5px; } .close_icon span:before { transform: rotate(-45deg); } .close_icon span:after { transform: rotate(45deg); } /*--------------------------------------------------------------------------------*/ /* BODY */ /*--------------------------------------------------------------------------------*/ body { padding-top: 50px; } @media only screen and (min-width: 576px) { body { padding-top: 50px; } } @media only screen and (min-width: 768px) { body { padding-top: 55px; } } @media only screen and (min-width: 992px) { body { padding-top: 98px; } } @media only screen and (min-width: 1200px) { body { padding-top: 103px; } } /*--------------------------------------------------------------------------------*/ /* WRAPPER */ /*--------------------------------------------------------------------------------*/ .wrapper { max-width: 1380px; margin: 0 auto; display: flex; flex-wrap: wrap; height: 100%; width: 100%; } #main_top > .wrapper { max-width: 100%; } #main_bottom > .wrapper { max-width: 1380px; } main { display: block; /*IE11*/ } main > .wrapper { flex-wrap: nowrap; align-items: flex-start; } /*--------------------------------------------------------------------------------*/ /* HEADER TEXT */ /*--------------------------------------------------------------------------------*/ #header_text { display: flex; } #header_text { position: relative; z-index: 9001; height: 0; } @media only screen and (min-width: 576px) { #header_text { height: 0; } } @media only screen and (min-width: 768px) { #header_text { height: 0; } } @media only screen and (min-width: 992px) { #header_text { height: 42px; } } @media only screen and (min-width: 1200px) { #header_text { height: 42px; } } #header_text { position: fixed; top: 0px; left: 0; right: 0; } .has-navbar #header_text { top: 46px; } @media only screen and (min-width: 576px) { #header_text { top: 0px; } .has-navbar #header_text { top: 46px; } } @media only screen and (min-width: 768px) { #header_text { top: 0px; } .has-navbar #header_text { top: 46px; } } @media only screen and (min-width: 992px) { #header_text { top: 0px; } .has-navbar #header_text { top: 46px; } } @media only screen and (min-width: 1200px) { #header_text { top: 0px; } .has-navbar #header_text { top: 46px; } } #header_text { height: 0; } #header_text .module.html { height: 0; } @media only screen and (min-width: 576px) { #header_text { height: 0; } #header_text .module.html { height: 0; } } @media only screen and (min-width: 768px) { #header_text { height: 0; } #header_text .module.html { height: 0; } } @media only screen and (min-width: 992px) { #header_text { height: 0; } #header_text .module.html { height: 42px; } } @media only screen and (min-width: 1200px) { #header_text { height: 0; } #header_text .module.html { height: 42px; } } /*--------------------------------------------------------------------------------*/ /* NAV TOP */ /*--------------------------------------------------------------------------------*/ #nav_top { position: relative; z-index: 9001; height: 0; } @media only screen and (min-width: 576px) { #nav_top { height: 0; } } @media only screen and (min-width: 768px) { #nav_top { height: 0; } } @media only screen and (min-width: 992px) { #nav_top { height: 42px; } } @media only screen and (min-width: 1200px) { #nav_top { height: 42px; } } #nav_top { position: fixed; top: 0; left: 0; right: 0; } .has-navbar #nav_top { top: 46px; } @media only screen and (min-width: 576px) { #nav_top { top: 0; } .has-navbar #nav_top { top: 46px; } } @media only screen and (min-width: 768px) { #nav_top { top: 0; } .has-navbar #nav_top { top: 46px; } } @media only screen and (min-width: 992px) { #nav_top { top: 0; } .has-navbar #nav_top { top: 46px; } } @media only screen and (min-width: 1200px) { #nav_top { top: 0; } .has-navbar #nav_top { top: 46px; } } #nav_top { height: 0; } #nav_top ul { height: 0; } @media only screen and (min-width: 576px) { #nav_top { height: 0; } #nav_top ul { height: 0; } } @media only screen and (min-width: 768px) { #nav_top { height: 0; } #nav_top ul { height: 0; } } @media only screen and (min-width: 992px) { #nav_top { height: 0; } #nav_top ul { height: 42px; } } @media only screen and (min-width: 1200px) { #nav_top { height: 0; } #nav_top ul { height: 42px; } } /*--------------------------------------------------------------------------------*/ /* HEADER */ /*--------------------------------------------------------------------------------*/ header { position: relative; z-index: 9001; height: 50px; } @media only screen and (min-width: 576px) { header { height: 50px; } } @media only screen and (min-width: 768px) { header { height: 55px; } } @media only screen and (min-width: 992px) { header { height: 98px; } } @media only screen and (min-width: 1200px) { header { height: 103px; } } header { position: fixed; top: 0; left: 0; right: 0; } .has-navbar header { top: 46px; } @media only screen and (min-width: 576px) { header { top: 0; } .has-navbar header { top: 46px; } } @media only screen and (min-width: 768px) { header { top: 0; } .has-navbar header { top: 46px; } } @media only screen and (min-width: 992px) { header { top: 0; } .has-navbar header { top: 46px; } } @media only screen and (min-width: 1200px) { header { top: 0; } .has-navbar header { top: 46px; } } /*--------------------------------------------------------------------------------*/ /* LOGO */ /*--------------------------------------------------------------------------------*/ .logo { display: block; background: url(/Assets/_Analyz-it/Images/symbool_ait.svg) center center / contain no-repeat; width: 25px; height: 25px; background-size: contain; } @media only screen and (min-width: 576px) { .logo { background: url(/Assets/_Analyz-it/Images/symbool_ait.svg) center center / contain no-repeat; width: 25px; height: 25px; background-size: contain; } } @media only screen and (min-width: 768px) { .logo { display: block; background: url(/Assets/_Analyz-it/Images/symbool_ait.svg) center center / contain no-repeat; width: 30px; height: 30px; background-size: contain; } } @media only screen and (min-width: 992px) { .logo { display: block; background: url(/Assets/_Analyz-it/Images/symbool_ait.svg) center center / contain no-repeat; width: 45px; height: 45px; background-size: contain; } } @media only screen and (min-width: 1200px) { .logo { display: block; background: url(/Assets/_Analyz-it/Images/symbool_ait.svg) center center / contain no-repeat; width: 50px; height: 50px; background-size: contain; } } /*--------------------------------------------------------------------------------*/ /* LANGUAGE */ /*--------------------------------------------------------------------------------*/ #languages-wrapper { position: relative; z-index: 9001; display: flex; } #languages-wrapper #active-language { display: none; } #languages-wrapper #languages { display: flex; flex-direction: row; } #languages-wrapper #languages a { display: block; text-decoration: none; color: #343434; } #languages-wrapper #languages a.active { pointer-events: none; cursor: default; } /*--------------------------------------------------------------------------------*/ /* NAV ROOT */ /*--------------------------------------------------------------------------------*/ #nav_root ul { flex-wrap: nowrap; } #nav_root { position: relative; z-index: 9001; height: 0; } @media only screen and (min-width: 576px) { #nav_root { height: 0; } } @media only screen and (min-width: 768px) { #nav_root { height: 0; } } @media only screen and (min-width: 992px) { #nav_root { height: 56px; } } @media only screen and (min-width: 1200px) { #nav_root { height: 61px; } } #nav_root { position: fixed; top: 0; left: 0; right: 0; } .has-navbar #nav_root { top: 46px; } @media only screen and (min-width: 576px) { #nav_root { top: 0; } .has-navbar #nav_root { top: 46px; } } @media only screen and (min-width: 768px) { #nav_root { top: 0; } .has-navbar #nav_root { top: 46px; } } @media only screen and (min-width: 992px) { #nav_root { top: 42px; } .has-navbar #nav_root { top: 88px; } } @media only screen and (min-width: 1200px) { #nav_root { top: 42px; } .has-navbar #nav_root { top: 88px; } } #nav_root { height: 0; } #nav_root ul { height: 0; } @media only screen and (min-width: 576px) { #nav_root { height: 0; } #nav_root ul { height: 0; } } @media only screen and (min-width: 768px) { #nav_root { height: 0; } #nav_root ul { height: 0; } } @media only screen and (min-width: 992px) { #nav_root { height: 0; } #nav_root ul { height: 56px; } } @media only screen and (min-width: 1200px) { #nav_root { height: 0; } #nav_root ul { height: 61px; } } /*--------------------------------------------------------------------------------*/ /* NAV TOGGLE */ /*--------------------------------------------------------------------------------*/ nav { user-select: none; } nav a { position: relative; } nav a.has-children span { position: absolute; right: 10px; left: inherit; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; } nav a.has-children span:before, nav a.has-children span:after { content: ''; position: absolute; width: 5px; height: 1px; background: #fff; top: 50%; left: 5px; right: 5px; margin-top: 0.5px; border-radius: 0.5px; transition: 0.2s; display: none; } nav a.has-children span:before, nav a.has-children span:after { transform-origin: 0; margin-top: 1.75px; } nav a.has-children span:after { transform: rotate(-145deg); } nav a.has-children span:before { transform: rotate(-35deg); } nav a.has-children.active span:before, nav a.has-children.active span:after { margin-top: -1.75px; } nav a.has-children.active span:after { transform: rotate(-215deg); } nav a.has-children.active span:before { transform: rotate(35deg); } nav > ul li > ul { display: none; } nav > ul li.active > ul { display: block; } nav#nav_mobile a.has-children span:before, nav#nav_mobile a.has-children span:after { display: block; } nav#nav_main a.has-children span:before, nav#nav_main a.has-children span:after { display: block; } /*--------------------------------------------------------------------------------*/ /* NAV ALGEMEEN */ /*--------------------------------------------------------------------------------*/ nav ul { display: flex; flex-wrap: wrap; padding: 0; margin: 0; } nav ul li { padding: 0; margin: 0; list-style: none; } nav ul li a { display: block; text-decoration: none; color: #343434; } /*--------------------------------------------------------------------------------*/ /* NAV MOBILE */ /*--------------------------------------------------------------------------------*/ @media only screen and (max-width: 991px) { main > .wrapper { flex-wrap: wrap; } #nav_top { display: none; } #nav_root { display: none; } #nav_main { display: none; } #nav_mobile { position: fixed; z-index: 9999; top: 0; bottom: 0; width: 260px; transition: 0.2s; overflow: auto; } #nav_mobile ul { flex-direction: column; } #nav_mobile { right: -260px; } .show-nav #nav_mobile { right: 0; } .has-navbar #nav_mobile { top: 46px; } } @media only screen and (min-width: 992px) { #nav_mobile { display: none; } } /*--------------------------------------------------------------------------------*/ /* NAV MAIN */ /*--------------------------------------------------------------------------------*/ #nav_main { min-width: 100%; width: 100%; } @media only screen and (min-width: 576px) { #nav_main { min-width: 100%; width: 100%; } } @media only screen and (min-width: 768px) { #nav_main { min-width: 100%; width: 100%; } } @media only screen and (min-width: 992px) { #nav_main { min-width: 25%; width: 25%; } } @media only screen and (min-width: 1200px) { #nav_main { min-width: 25%; width: 25%; } } /*--------------------------------------------------------------------------------*/ /* MAIN CONTENT */ /*--------------------------------------------------------------------------------*/ main .content { display: flex; flex-wrap: wrap; flex-grow: 1; width: auto; } @media only screen and (min-width: 576px) { main .content { width: auto; } } @media only screen and (min-width: 768px) { main .content { width: auto; } } @media only screen and (min-width: 992px) { main .content { width: auto; } } @media only screen and (min-width: 1200px) { main .content { width: auto; } } /*--------------------------------------------------------------------------------*/ /* COOKIEPOLICY */ /*--------------------------------------------------------------------------------*/ .cookiepolicy_melding { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10001; background: rgba(0, 0, 0, 0.8); box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.31); } .cookiepolicy_melding .content { padding: 25px; width: 100%; } .cookiepolicy_melding .close { position: absolute; top: 0; right: 0; font-size: 0; } .cookiepolicy_melding p { margin: 0; color: white; } .cookiepolicy_melding p:first-child { margin: 0 0 15px 0; font-weight: 900; } .cookiepolicy_melding a { color: white; } @media only screen and (min-width: 576px) { .cookiepolicy_melding .content { padding: 25px; } } @media only screen and (min-width: 768px) { .cookiepolicy_melding .content { padding: 30px; } } @media only screen and (min-width: 992px) { .cookiepolicy_melding .content { padding: 40px; } } @media only screen and (min-width: 1200px) { .cookiepolicy_melding .content { padding: 40px; } } /*--------------------------------------------------------------------------------*/ /* COLUMNS */ /*--------------------------------------------------------------------------------*/ .acms-column-extra, .acms-column-volledigebreedte, .acms-column-breed, .acms-column-smal, .acms-column-derde, .acms-column-half { width: 100%; padding: 25px 0; flex-grow: 1; } .acms-column-breed { width: 100%; } .acms-column-smal { width: 100%; } .acms-column-derde { width: 100%; } .acms-column-half { width: 100%; } @media only screen and (min-width: 576px) { .acms-column-volledigebreedte, .acms-column-breed, .acms-column-smal, .acms-column-derde, .acms-column-half { padding: 25px 0; } .acms-column-breed { width: 100%; } .acms-column-smal { width: 100%; } .acms-column-derde { width: 33.333333333%; } .acms-column-half { width: 100%; } } @media only screen and (min-width: 768px) { .acms-column-volledigebreedte, .acms-column-breed, .acms-column-smal, .acms-column-derde, .acms-column-half { padding: 30px 0; } .acms-column-breed { width: 66.666666667%; } .acms-column-smal { width: 33.333333333%; } .acms-column-derde { width: 33.333333333%; } .acms-column-half { width: 50%; } } @media only screen and (min-width: 992px) { .acms-column-volledigebreedte, .acms-column-breed, .acms-column-smal, .acms-column-derde, .acms-column-half { padding: 40px 0; } .acms-column-breed { width: 66.666666667%; } .acms-column-smal { width: 33.333333333%; } .acms-column-derde { width: 33.333333333%; } .acms-column-half { width: 50%; } } @media only screen and (min-width: 1200px) { .acms-column-volledigebreedte, .acms-column-breed, .acms-column-smal, .acms-column-derde, .acms-column-half { padding: 40px 0; } .acms-column-breed { width: 66.666666667%; } .acms-column-smal { width: 33.333333333%; } .acms-column-derde { width: 33.333333333%; } .acms-column-half { width: 50%; } } /*--------------------------------------------------------------------------------*/ /* MODULES */ /*--------------------------------------------------------------------------------*/ .controls-row, .module-row, .preview-panel { display: flex; flex-direction: row; flex-wrap: wrap; /*overflow: hidden;*/ } .controls-row .module, .module-row .module, .preview-panel .module, .controls-row .added-module, .module-row .added-module, .preview-panel .added-module { flex-grow: 1; } .preview-panel { background: #fff; } .acms-column-extra .module, .acms-column-extra .added-module { width: 100%; } .acms-column-volledigebreedte .module, .acms-column-volledigebreedte .added-module { width: 100%; } .acms-column-half .module, .acms-column-half .added-module { width: 100%; } .acms-column-breed .module, .acms-column-breed .added-module { width: 100%; } .acms-column-smal .module, .acms-column-smal .added-module { width: 100%; } .acms-column-derde .module, .acms-column-derde .added-module { width: 100%; } .module { padding: 0 25px; } @media only screen and (min-width: 576px) { .acms-column-extra .module, .acms-column-extra .added-module { width: 50%; } .acms-column-volledigebreedte .module, .acms-column-volledigebreedte .added-module { width: 50%; } .acms-column-half .module, .acms-column-half .added-module { width: 50%; } .acms-column-breed .module, .acms-column-breed .added-module { width: 50%; } .acms-column-smal .module, .acms-column-smal .added-module { width: 50%; } .acms-column-derde .module, .acms-column-derde .added-module { width: 150%; } .module { padding: 0 25px; } } @media only screen and (min-width: 768px) { .acms-column-extra .module, .acms-column-extra .added-module { width: 33.333333333%; } .acms-column-volledigebreedte .module, .acms-column-volledigebreedte .added-module { width: 33.333333333%; } .acms-column-half .module, .acms-column-half .added-module { width: 66.666666667%; } .acms-column-breed .module, .acms-column-breed .added-module { width: 50%; } .acms-column-smal .module, .acms-column-smal .added-module { width: 100%; } .acms-column-derde .module, .acms-column-derde .added-module { width: 100%; } .module { padding: 0 30px; } } @media only screen and (min-width: 992px) { .acms-column-extra .module, .acms-column-extra .added-module { width: 25%; } .acms-column-volledigebreedte .module, .acms-column-volledigebreedte .added-module { width: 25%; } .acms-column-half .module, .acms-column-half .added-module { width: 50%; } .acms-column-breed .module, .acms-column-breed .added-module { width: 37.5%; } .acms-column-smal .module, .acms-column-smal .added-module { width: 75%; } .acms-column-derde .module, .acms-column-derde .added-module { width: 75%; } .module { padding: 0 40px; } } @media only screen and (min-width: 1200px) { .acms-column-extra .module, .acms-column-extra .added-module { width: 20%; } .acms-column-volledigebreedte .module, .acms-column-volledigebreedte .added-module { width: 20%; } .acms-column-half .module, .acms-column-half .added-module { width: 40%; } .acms-column-breed .module, .acms-column-breed .added-module { width: 30%; } .acms-column-smal .module, .acms-column-smal .added-module { width: 60%; } .acms-column-derde .module, .acms-column-derde .added-module { width: 60%; } .module { padding: 0 40px; } } @media only screen and (min-width: 1380px) { .acms-column-extra .module, .acms-column-extra .added-module { width: 16.666666667%; } .acms-column-volledigebreedte .module, .acms-column-volledigebreedte .added-module { width: 16.666666667%; } .acms-column-half .module, .acms-column-half .added-module { width: 33.333333333%; } .acms-column-breed .module, .acms-column-breed .added-module { width: 25%; } .acms-column-smal .module, .acms-column-smal .added-module { width: 50%; } .acms-column-derde .module, .acms-column-derde .added-module { width: 50%; } } /*--------------------------------------------------------------------------------*/ /* FOOTER + CREDITS */ /*--------------------------------------------------------------------------------*/ footer .module.html { display: block; } #credits .module.html { display: block; } #credits .module.seotags { display: none; } #credits .module.testimonials { display: none; } #credits .module.form { display: block; } #credits .module.documents { display: none; } /*--------------------------------------------------------------------------------*/ /* LAYOUT COLOR SCHEMES */ /*--------------------------------------------------------------------------------*/ a { cursor: pointer; } a, input, textarea, select { transition: 0.2s; outline: 0; } img { width: auto; max-width: 100%; height: auto; border: 0; outline: 0; } html { font-family: "Roboto", Sans-serif; line-height: 1; } .module { /*Nodig voor class="links-wrapper" in text.custom.less*/ font: 300 15px "Roboto", Sans-serif; line-height: 1.333; color: #343434; /*textarea{ min-height: 60px; }*/ } .module a[name], .module a[name]:hover { color: inherit; text-decoration: none; display: block; cursor: auto; } .module.text { position: relative; } .module p { color: #343434; margin: 0 0 1.5em 0; padding: 0; } @media only screen and (min-width: 576px) { .module p, .module ul, .module ol { font-size: 15px; } } @media only screen and (min-width: 768px) { .module p, .module ul, .module ol { font-size: 16px; } } @media only screen and (min-width: 992px) { .module p, .module ul, .module ol { font-size: 17px; } } @media only screen and (min-width: 1200px) { .module p, .module ul, .module ol { font-size: 18px; } } .module h1 { font: 300 173.333333333% "Roboto", Sans-serif; color: #c71717; text-transform: none; } .module h2 { font: 300 173.333333333% "Roboto", Sans-serif; color: #343434; text-transform: none; } .module h3 { font: 300 133.333333333% "Roboto", Sans-serif; color: #c71717; text-transform: none; } .module h4 { font: 300 133.333333333% "Roboto", Sans-serif; color: #343434; text-transform: none; } .module h5 { font: 300 120% "Roboto", Sans-serif; color: #c71717; text-transform: none; } .module h6 { font: 300 120% "Roboto", Sans-serif; color: #343434; text-transform: none; } .module h1, .module h2, .module h3, .module h4, .module h5, .module h6 { line-height: 1; margin: 0 0 0.5em 0; } @media only screen and (min-width: 576px) { .module { font-size: 15px; } .module h1 { font-size: 200%; } .module h2 { font-size: 200%; } .module h3 { font-size: 133.333333333%; } .module h4 { font-size: 133.333333333%; } .module h5 { font-size: 120%; } .module h6 { font-size: 120%; } } @media only screen and (min-width: 768px) { .module { font-size: 16px; } .module h1 { font-size: 187.5%; } .module h2 { font-size: 187.5%; } .module h3 { font-size: 125%; } .module h4 { font-size: 125%; } .module h5 { font-size: 112.5%; } .module h6 { font-size: 112.5%; } } @media only screen and (min-width: 992px) { .module { font-size: 17px; } .module h1 { font-size: 211.764705882%; } .module h2 { font-size: 211.764705882%; } .module h3 { font-size: 176.470588235%; } .module h4 { font-size: 176.470588235%; } .module h5 { font-size: 117.647058824%; } .module h6 { font-size: 117.647058824%; } } @media only screen and (min-width: 1200px) { .module { font-size: 18px; } .module h1 { font-size: 200%; } .module h2 { font-size: 177.777777778%; } .module h3 { font-size: 161.111111111%; } .module h4 { font-size: 144.444444444%; } .module h5 { font-size: 127.777777778%; } .module h6 { font-size: 111.111111111%; } } .module a { font-weight: 300; color: #c71717; text-decoration: underline; } .module a:hover, .module a:active, .module a.active { color: #343434; text-decoration: underline; } .module strong { font-weight: 700; } .module ul, .module ol { color: #343434; margin: 0; padding-left: 10px; } .module ol li, .module ul li { position: relative; margin: 10px 0; list-style-type: none; } .module ol li:before, .module ul li:before { display: inline-flex; position: absolute; justify-content: flex-end; width: 10px; left: -10px; } .module ul li:before { content: ""; background-size: contain !important; display: inline-flex; } .module ul li { padding: 0 0 10px 1em; } .module ul > li:before { margin: 10px 0 0 0; width: 8px; height: 8px; background: transparent; border-radius: 4px; } .module ul > li > ul > li:before { margin: 10px 0 0 0; width: 8px; height: 8px; background: transparent; border-radius: 4px; } .module ul > li > ul > li > ul > li:before { margin: 8px 0 0 0; width: 6px; height: 6px; background: #c71717; border-radius: 4px; } .module ul > li > ul > li > ul > li > ul > li:before { margin: 8px 0 0 0; width: 6px; height: 6px; background: #343434; border-radius: 4px; } .module ol { counter-reset: section; } .module ol li:before { content: counter(section); counter-increment: section; display: inline-flex; position: absolute; justify-content: flex-end; width: 10px; left: -10px; } .module ol li { padding: 0 0 10px 1em; } .module ol.metStap li > ol li:before { content: counters(section, ".") " "; } .module ol li:before { content: counters(section, ".") " "; } .module input, .module input[type=text], .module input[type=file], .module input[type=password], .module select, .module textarea, .module select option { font-family: "Roboto", Sans-serif; color: #343434; width: 100%; padding: 10px; border: 1px solid #c7c7c7; border-width: 1px; background: none; line-height: 1; } .module input:focus, .module input[type=text]:focus, .module input[type=file]:focus, .module input[type=password]:focus, .module select:focus, .module textarea:focus { color: #fff; border: 1px solid #c71717; border-width: 1px; background: #c71717; } .module input[type=checkbox], .module input[type=radio] { width: 20px; vertical-align: middle; background: transparent; border: 0; } .module input, .module input[type=text], .module input[type=file], .module input[type=password], .module input[type=date], .module select, .module textarea { /*CUSTOM IOS STYLING SELECT, input*/ background: linear-gradient(none, none, none); border-radius: 8px; } .module hr { margin: 3em 0; height: 4px; padding: 0; border: 0; color: #c71717; background: #c71717; } .module table { border: 1px solid #343434; border-width: 1px; border-spacing: 0; max-width: 100%; display: block; overflow-x: auto; border-collapse: collapse; } .module table tbody, .module table thead { display: block; } .module table tr { display: flex; flex-wrap: wrap; border: 1px solid #343434; border-width: 1px 0 0 0; flex-direction: column; /*&:first-child{ border: @rowBorder-width-firstChild; }*/ } .module table tbody:first-child tr:first-child, .module table thead:first-child tr:first-child { border: 0; } .module table td, .module table th { padding: 5px; border: 1px solid #edeeef; border-width: 1px; background: transparent; flex-grow: 1; min-width: 100%; } @media only screen and (min-width: 576px) { .module table { display: table; } .module table tbody, .module table thead { display: table-row-group; } .module table tr { display: table-row; } .module table td, .module table th { min-width: auto; } } .video .responsive-video { display: block; position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin: 0 auto; width: 100%; } .video .responsive-video iframe, .video .responsive-video object, .video .responsive-video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .responsive-maps { display: block; position: relative; padding-bottom: 50%; height: 0; overflow: hidden; margin: 0 auto; width: 100%; } .responsive-maps iframe, .responsive-maps object, .responsive-maps embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .fotoslideshow-singleImage { text-align: center; } .fotoslideshow-singleImage .singleImage { overflow: hidden; position: relative; /*img{ width: 100%; }*/ } .fotoslideshow-singleImage .singleImage:before { content: ''; display: block; padding-top: 66.666666667%; } .fotoslideshow-singleImage .singleImage img { transform: translateY(-50%) translateX(-50%); left: 50%; top: 50%; position: absolute; width: 100%; } .fotoslideshow-singleImage.landscape .singleImage:before { padding-top: 66.666666667%; } .fotoslideshow-singleImage.portrait .singleImage:before { padding-top: 150%; } .fotoslideshow-singleImage.square .singleImage:before { padding-top: 100%; } .fotoslideshow-singleImage.widescreen .singleImage:before { padding-top: 41.841004184%; } .fotoslideshow-galleria { height: 100px; } .fotoslideshow-galleria { height: auto !important; } .fotoslideshow-galleria .galleria-container:before { content: ''; display: block; padding-top: 66.666666667%; } .fotoslideshow-galleria .galleria-thumbnails-container { padding: 5px; } .fotoslideshow-galleria .galleria-thumbnails .galleria-image { margin-right: 5px; } .fotoslideshow-galleria.landscape .galleria-container:before { padding-top: 66.666666667%; } .fotoslideshow-galleria.portrait .galleria-container:before { padding-top: 150%; } .fotoslideshow-galleria.square .galleria-container:before { padding-top: 100%; } .fotoslideshow-galleria.widescreen .galleria-container:before { padding-top: 41.841004184%; } .slideshow a.singleImage { display: block; } .slideshow .img-info-wrapper { display: flex; flex-wrap: wrap; position: absolute; z-index: 1; top: 0; left: 0; right: 0; padding: 10px; background: rgba(0, 0, 0, 0.5); } .slideshow .img-info-wrapper .img-info h3 { margin: 0; color: white; line-height: 1; } .slideshow .img-info-wrapper .img-info h4 { margin: 0; color: white; line-height: 1; } .slideshow .img-info-wrapper .img-info p { margin: 0; color: white; } .slideshow .img-info-wrapper .img-info a { color: white; } .slideshow .img-info-wrapper .img-info a:hover { color: white; } .documents .document-item { padding: 10px 0; border: 1px dashed rgba(0, 0, 0, 0.3); border-width: 1px 0 0 0; display: flex; align-items: center; flex-wrap: wrap; } .documents .document-item:first-child { border: 0; } .documents .document-item .document-img { padding: 0 5px 0 0; display: flex; } .documents .document-item .document-img span { width: 30px; height: 30px; background-position: center center; background-repeat: no-repeat; background-size: contain; } .documents .document-item .document-img .icon-doc { background-image: url(/Assets/_Analyz-it/Images/Documents/doc.png); } .documents .document-item .document-img .icon-docx { background-image: url(/Assets/_Analyz-it/Images/Documents/docx.png); } .documents .document-item .document-img .icon-gif { background-image: url(/Assets/_Analyz-it/Images/Documents/gif.png); } .documents .document-item .document-img .icon-invisible { background-image: url(/Assets/_Analyz-it/Images/Documents/invisible.png); } .documents .document-item .document-img .icon-jpeg { background-image: url(/Assets/_Analyz-it/Images/Documents/jpeg.png); } .documents .document-item .document-img .icon-jpg { background-image: url(/Assets/_Analyz-it/Images/Documents/jpg.png); } .documents .document-item .document-img .icon-pdf { background-image: url(/Assets/_Analyz-it/Images/Documents/pdf.png); } .documents .document-item .document-img .icon-png { background-image: url(/Assets/_Analyz-it/Images/Documents/png.png); } .documents .document-item .document-img .icon-ppt { background-image: url(/Assets/_Analyz-it/Images/Documents/ppt.png); } .documents .document-item .document-img .icon-pptx { background-image: url(/Assets/_Analyz-it/Images/Documents/pptx.png); } .documents .document-item .document-img .icon-txt { background-image: url(/Assets/_Analyz-it/Images/Documents/txt.png); } .documents .document-item .document-img .icon-unknown { background-image: url(/Assets/_Analyz-it/Images/Documents/unknown.png); } .documents .document-item .document-img .icon-xls { background-image: url(/Assets/_Analyz-it/Images/Documents/xls.png); } .documents .document-item .document-img .icon-xlsx { background-image: url(/Assets/_Analyz-it/Images/Documents/xlsx.png); } .documents .document-item .document-img .icon-eps { background-image: url(/Assets/_Analyz-it/Images/Documents/eps.png); } .documents .document-item .document-img .icon-psd { background-image: url(/Assets/_Analyz-it/Images/Documents/psd.png); } .documents .document-item .document-img .icon-ai { background-image: url(/Assets/_Analyz-it/Images/Documents/ai.png); } .documents .document-item .document-information { flex-grow: 1; } .documents .document-item .document-information .document-title { display: block; } .documents .document-item .document-information .document-description { display: block; } .form ::-webkit-input-placeholder { color: #c7c7c7; opacity: 1; } .form :-moz-placeholder { color: #c7c7c7; opacity: 1; } .form ::-moz-placeholder { color: #c7c7c7; opacity: 1; } .form :-ms-input-placeholder { color: #c7c7c7; opacity: 1; } /*.formuliermodule-container{ max-width:@formWidth; } .formuliermodule-veld-checkboxes label, .formuliermodule-veld-radiobuttons label{ display: block; }*/ /*NORNAAL*/ .form { position: relative; } .form-newletter, .form-submit, .form-privacy, .form-item { margin: 0 0 5px 0; position: relative; display: flex; flex-wrap: wrap; } .form-field, .form-label { flex-grow: 1; } .form-label { width: 100%; padding: 4px 0; } .form-field { width: 100%; } .form-required { width: 0; position: absolute; right: -5px; } .form-field label { display: flex; align-items: center; margin-bottom: 5px; } .form-field label input { min-width: 20px; } .form-privacy, .form-newletter { font-size: 80%; } .form-privacy label, .form-newletter label { display: inline-block; margin-left: 20px; } .form-privacy label input[type="checkbox"], .form-newletter label input[type="checkbox"] { margin-left: -20px; } @media only screen and (min-width: 768px) { .form-label { width: 30%; } .form-field { width: 70%; } .form-newletter, .form-submit, .form-privacy { padding-left: 30%; } .form.compact .form-newletter, .form.compact .form-submit, .form.compact .form-privacy, .form.compact .form-item { margin: 0 0 5px 0; } .form.compact .form-label { width: 100%; } .form.compact .form-field { width: 100%; } .form.compact .form-newletter, .form.compact .form-submit, .form.compact .form-privacy { padding-left: 0; } } /*.form-errors{ color: @formErrorColor; }*/ /*BEVESTIGING FORMULIER*/ @keyframes fadeIn { 0% { opacity: 1; } 60% { opacity: 0; } 100% { opacity: 0; visibility: hidden; height: 0; overflow: hidden; margin: 0; z-index: -1; } } .form-succes, .form-errors { animation-name: fadeIn; animation-duration: 0.2s; animation-delay: 4s; animation-fill-mode: forwards; } .form-succes, .form-errors { width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.7); } .form-succes ul, .form-errors ul { color: white; margin: 10px 0; padding: 5px; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); min-width: 50%; } .form-succes ul li, .form-errors ul li { padding: 10px 20px; margin: 2px; } .form-succes ul li { background: #aada59; border: 1px solid #77a825; } .form-errors ul li { background: #da5959; border: 1px solid #a82525; } .errorAll { padding: 25px; } @media only screen and (min-width: 576px) { .errorAll { padding: 25px; } } @media only screen and (min-width: 768px) { .errorAll { padding: 30px; } } @media only screen and (min-width: 992px) { .errorAll { padding: 40px; } } @media only screen and (min-width: 1200px) { .errorAll { padding: 40px; } } .nav_module { background: rgba(255, 255, 255, 0.75); /* top wordt automatisch berekend zie onderaan */ } .nav_module .wrapper { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; } .nav_module .wrapper > div:last-child { margin-left: auto; } .nav_module.top { position: sticky; z-index: 9000; } .nav_module ul { margin: 0; } .nav_module ul li { padding: 0; } .nav_module ul li:before { display: none; } .nav_module .filters { position: relative; } .nav_module .filters .active-filter { cursor: pointer; padding: 0px 10px 0px 30px; user-select: none; } .nav_module .filters .filter { display: flex; flex-direction: column; position: absolute; z-index: 9000; left: 0; height: 0; overflow: hidden; transition: 0.2s; } .nav_module .filters .filter a { padding: 10px 20px; background: #000000; border: 1px solid #343434; border-top: none; text-decoration: none; color: #fff; white-space: nowrap; } .nav_module .filters .filter a:hover { color: #fff; background: #343434; } .nav_module .filters .filter a:first-child { border-top: 1px solid #c7c7c7; } .nav_module .filters.focus .filter { height: auto; } .nav_module .pager ul { display: flex; flex-wrap: wrap; flex-direction: row; } .nav_module .pager ul li { padding: 0 2px; margin: 0; } .nav_module .pager ul li.disabled { pointer-events: none; cursor: default; opacity: 0.5; } .nav_module .pager ul li a { background: transparent; text-decoration: none; min-width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border: 0; color: #c71717; } .nav_module .pager ul li.active a, .nav_module .pager ul li:hover a { color: #fff; background: #c71717; } .nav_module .vorigevolgende { display: flex; flex-wrap: nowrap; flex-direction: row; align-self: flex-start; } .nav_module .vorigevolgende a { text-decoration: none; background: transparent; min-width: 30px; height: 30px; display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; border: 0; color: #c71717; } .nav_module .vorigevolgende a.disabled { pointer-events: none; cursor: default; opacity: 0.5; } .nav_module .vorigevolgende a.active, .nav_module .vorigevolgende a:hover { color: #fff; background: #c71717; } .nav_module.page .wrapper { flex-wrap: nowrap; } /*open close icon voor filtering*/ .nav_module .filters .active-filter { position: relative; } .nav_module .filters .active-filter span { position: absolute; right: inherit; left: 15px; top: 50%; } .nav_module .filters .active-filter span:before, .nav_module .filters .active-filter span:after { content: ''; position: absolute; width: 10px; height: 1px; background: #343434; margin-top: 0.5px; border-radius: 0.5px; transition: 0.2s; } .nav_module .filters .active-filter span:after { transform: rotate(90deg); } .nav_module .filters.focus .active-filter span:after { transform: rotate(0deg); } .nav_module .filters .active-filter span:before, .nav_module .filters .active-filter span:after { transform-origin: 0; margin-top: 4.5px; } .nav_module .filters .active-filter span:after { transform: rotate(-135deg); } .nav_module .filters .active-filter span:before { transform: rotate(-45deg); } .nav_module .filters.focus .active-filter span:before, .nav_module .filters.focus .active-filter span:after { margin-top: -4.5px; } .nav_module .filters.focus .active-filter span:after { transform: rotate(-225deg); } .nav_module .filters.focus .active-filter span:before { transform: rotate(45deg); } /*@add-header_text-height-* komt uit layout.default.less body padding-top berekening*/ .nav_module { top: 50px; } .has-navbar .nav_module { top: 96px; } @media only screen and (min-width: 576px) { .nav_module { top: 50px; } .has-navbar .nav_module { top: 96px; } } @media only screen and (min-width: 768px) { .nav_module { top: 55px; } .has-navbar .nav_module { top: 101px; } } @media only screen and (min-width: 992px) { .nav_module { top: 98px; } .has-navbar .nav_module { top: 144px; } } @media only screen and (min-width: 1200px) { .nav_module { top: 103px; } .has-navbar .nav_module { top: 149px; } } .news .list { display: flex; flex-wrap: wrap; } .news .list .item .item-content { width: 100%; } .news .list .item time { font-size: 80%; } .news .list .item time > span:before { font-size: 80%; } .news .list .item time .slash { display: inline; } .news .list .item figure { width: 100%; } .news .list .item figure a, .news .list .item figure div, .news .list .item figure span { display: block; position: relative; overflow: hidden; padding-top: 50%; } .news .list .item figure a img, .news .list .item figure div img, .news .list .item figure span img { width: 100%; height: 100%; object-fit: cover; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); } .news .list .item { width: 100%; } .acms-column-half .news .list .item { width: 100%; } .acms-column-breed .news .list .item { width: 100%; } .acms-column-smal .news .list .item { width: 100%; } .acms-column-derde .news .list .item { width: 100%; } @media only screen and (min-width: 576px) { .news .list .item { width: 50%; } .acms-column-half .news .list .item { width: 50%; } .acms-column-breed .news .list .item { width: 50%; } .acms-column-smal .news .list .item { width: 50%; } .acms-column-derde .news .list .item { width: 150%; } } @media only screen and (min-width: 768px) { .news .list .item { width: 50%; } .acms-column-half .news .list .item { width: 100%; } .acms-column-breed .news .list .item { width: 75%; } .acms-column-smal .news .list .item { width: 150%; } .acms-column-derde .news .list .item { width: 150%; } } @media only screen and (min-width: 992px) { .news .list .item { width: 33.333333333%; } .acms-column-half .news .list .item { width: 66.666666667%; } .acms-column-breed .news .list .item { width: 50%; } .acms-column-smal .news .list .item { width: 100%; } .acms-column-derde .news .list .item { width: 100%; } } @media only screen and (min-width: 1200px) { .news .list .item { width: 33.333333333%; } .acms-column-half .news .list .item { width: 66.666666667%; } .acms-column-breed .news .list .item { width: 50%; } .acms-column-smal .news .list .item { width: 100%; } .acms-column-derde .news .list .item { width: 100%; } } /*NIEUWS DETAIL*/ /*.nieuwsmodule-detail-navigation{ border:1px solid @corporateColor; border-width:1px 0; position:relative; padding:7px 0; height:54px; margin-bottom:30px; h1{ color:white; font-size:30px; font-weight:normal; line-height:40px; padding-right:180px; margin:0;} a{ display:inline-block; padding:6px 9px; background: @corporateColor-extra2; text-decoration:none; line-height:1;margin:5px 0 0 4px;font-size:14px; color:@baseFontColor; text-transform:uppercase; position:absolute; right:0; top:8px; &:Hover{ background:@corporateColor; color: @corporateColor; } } } #acms-content-bottom .nieuwsmodule-detail-navigation{ margin-bottom:30px;}*/ /*NIEUWS SHARE MOGELIJKHEID*/ /* ul.social{ position: absolute; margin:0px 0 0 -76px; width:76px;background:#efefef; padding:10px; right:-76px; &:before{ content:'Deel dit artikel op:'; color:@baseFontColor; text-align:center; display:block; text-transform:uppercase; font-size:12px;} li{ a{ display:block;width:54px; height:auto; font-size:0px; overflow:hidden; text-align:center; color:@baseFontColor; padding-top:30px; text-decoration:none; span{ font-size:14px; display:block; background:white; } } margin:5px 0 0 0; padding:0; .fluid-background(60%, auto) !important; border:1px solid #bbb; &:first-child{ margin:0; } &.facebook-detail{ display:inline-block; background:@facebookColor url(/Assets/_Analyz-it/Styling/@{basicPath}/Social/iconFacebook.png) center top no-repeat;} &.linkedin-detail{ display:inline-block; background:@linkedInColor url(/Assets/_Analyz-it/Styling/@{basicPath}/Social/iconLinkedin.png) center top no-repeat; } &.twitter-detail{ display:inline-block; background:@twitterColor url(/Assets/_Analyz-it/Styling/@{basicPath}/Social/iconTwitter.png) center top no-repeat;} &.googleplus-detail{ display:inline-block; background:@googleColor url(/Assets/_Analyz-it/Styling/@{basicPath}/Social/iconGoogleplus.png) center top no-repeat;} } }*/ .matrix { overflow: hidden; } .matrix .matrix-nav { display: none; } .matrix .matrix-page { display: none; } .matrix .matrix-page.fotomatrix-fotopagina-actief { display: flex; flex-wrap: wrap; } .matrix .matrix-page .matrix-item { display: flex; flex: inherit; justify-content: center; padding: 1px; } .matrix .matrix-page .matrix-item > a { display: flex; align-items: center; justify-content: center; width: 100%; overflow: hidden; position: relative; } .matrix .matrix-page .matrix-item > a:before { content: ''; display: block; padding-top: 66.666666667%; } .matrix .matrix-page .matrix-item > a img { position: absolute; width: 100%; height: 100%; max-width: inherit; object-fit: cover; object-position: center; display: block; transform: translateY(-50%) translateX(-50%); left: 50%; top: 50%; /* Nodig voor IE11 en Safari 10.1 juiste uitlijning. Ideaal zou zijn als dit weg mag */ } .matrix .matrix-page .matrix-item { width: 100%; } .acms-column-half .matrix .matrix-page .matrix-item { width: 100%; } .acms-column-breed .matrix .matrix-page .matrix-item { width: 100%; } .acms-column-smal .matrix .matrix-page .matrix-item { width: 100%; } .acms-column-derde .matrix .matrix-page .matrix-item { width: 100%; } @media only screen and (min-width: 576px) { .matrix .matrix-page .matrix-item { width: 50%; } .acms-column-half .matrix .matrix-page .matrix-item { width: 50%; } .acms-column-breed .matrix .matrix-page .matrix-item { width: 50%; } .acms-column-smal .matrix .matrix-page .matrix-item { width: 50%; } .acms-column-derde .matrix .matrix-page .matrix-item { width: 150%; } } @media only screen and (min-width: 768px) { .matrix .matrix-page .matrix-item { width: 50%; } .acms-column-half .matrix .matrix-page .matrix-item { width: 100%; } .acms-column-breed .matrix .matrix-page .matrix-item { width: 75%; } .acms-column-smal .matrix .matrix-page .matrix-item { width: 150%; } .acms-column-derde .matrix .matrix-page .matrix-item { width: 150%; } } @media only screen and (min-width: 992px) { .matrix .matrix-page .matrix-item { width: 33.333333333%; } .acms-column-half .matrix .matrix-page .matrix-item { width: 66.666666667%; } .acms-column-breed .matrix .matrix-page .matrix-item { width: 50%; } .acms-column-smal .matrix .matrix-page .matrix-item { width: 100%; } .acms-column-derde .matrix .matrix-page .matrix-item { width: 100%; } } @media only screen and (min-width: 1200px) { .matrix .matrix-page .matrix-item { width: 20%; } .acms-column-half .matrix .matrix-page .matrix-item { width: 40%; } .acms-column-breed .matrix .matrix-page .matrix-item { width: 30%; } .acms-column-smal .matrix .matrix-page .matrix-item { width: 60%; } .acms-column-derde .matrix .matrix-page .matrix-item { width: 60%; } } /*-----------------------------------*/ /*HERNOEMEN NAAR acms.module.lightbox*/ /*-----------------------------------*/ #lightbox { width: auto !important; height: auto !important; position: fixed !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; text-align: center !important; margin: 0 auto !important; background: rgba(0, 0, 0, 0.8) !important; overflow-y: scroll !important; z-index: 1000000001 !important; } #lightbox .lightbox-shadow { display: none; } #lightbox .acms-lightbox-content { top: 0; bottom: 0; right: 0; left: 0; overflow: initial; } #lightbox .acms-lightbox-content .acms-lightbox-image { top: 0; right: 0; left: 0; bottom: 0; padding: 0; overflow: initial; } #lightbox .acms-lightbox-content .acms-lightbox-image .lb-image { top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); position: absolute; width: 100%; box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, 0.3); } #lightbox .acms-lightbox-content .acms-lightbox-info { position: fixed; left: auto; right: 20px; bottom: 20px; background: white; z-index: 1; width: 40px; height: 40px; line-height: 40px; text-align: center; display: inline-block; box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.5); } #lightbox .acms-lightbox-content .acms-lightbox-info .acms-lightbox-counter { float: none; margin: 0; } #lightbox .lb-nav { top: 0 !important; height: 100%; } #lightbox .lb-nav .acms-lightbox-nav-fixedTop { position: fixed !important; top: 20px !important; margin: 0 !important; width: 40px !important; height: 40px !important; line-height: 40px !important; cursor: pointer; } #lightbox .lb-nav .acms-lightbox-next { left: 50% !important; margin-left: 1px !important; background: #fff; } #lightbox .lb-nav .acms-lightbox-prev { right: 50% !important; margin-right: 1px !important; background: #fff; } #lightbox .acms-lightbox-close { position: fixed; top: 20px; right: 20px; width: 40px; height: 40px; line-height: 40px; box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.5); background: #fff; cursor: pointer; } .acms-lightbox-overlay { z-index: 100000 !important; } #lightbox.acms-lightbox-box { /*background:none !important; */ overflow: hidden; } #lightbox.acms-lightbox-box .acms-lightbox-shadow { display: none; } #lightbox.acms-lightbox-box .acms-lightbox-content { background: none; } #lightbox.acms-lightbox-box .acms-lightbox-content .acms-lightbox-image .lb-image { width: auto; max-height: 90%; } #lightbox.acms-lightbox-box .acms-lightbox-content .acms-lightbox-info { display: none !important; } .testimonials { position: relative; } .testimonials .testimonial-nav { position: absolute; left: 0; right: 0; margin: 0 auto; display: flex; z-index: 9999; } .testimonials .testimonial-nav .prev-icon, .testimonials .testimonial-nav .next-icon { position: relative; } .testimonials .testimonial-nav .prev-icon span, .testimonials .testimonial-nav .next-icon span { display: flex; justify-content: center; align-items: center; } .testimonials .testimonial-nav .prev-icon span:before, .testimonials .testimonial-nav .next-icon span:before, .testimonials .testimonial-nav .prev-icon span:after, .testimonials .testimonial-nav .next-icon span:after { content: ''; position: absolute; width: 1px; height: 0; background: #fff; border-radius: 0.5px; transition: 0.2s; transform-origin: 0.5px 0.5px; } .testimonials .testimonial-nav .prev-icon span:after, .testimonials .testimonial-nav .next-icon span:after { transform: rotate(45deg); } .testimonials .testimonial-nav .prev-icon span:before, .testimonials .testimonial-nav .next-icon span:before { transform: rotate(-45deg); } .testimonials .testimonial-nav .prev-icon span { transform: rotate(-90deg); } .testimonials .testimonial-nav .next-icon span { transform: rotate(90deg); } .testimonials .testimonial-nav .prev-icon span, .testimonials .testimonial-nav .next-icon span { width: 20px; height: 20px; } @media only screen and (min-width: 576px) { .testimonials .testimonial-nav .prev-icon span, .testimonials .testimonial-nav .next-icon span { width: 30px; height: 30px; } } @media only screen and (min-width: 768px) { .testimonials .testimonial-nav .prev-icon span, .testimonials .testimonial-nav .next-icon span { width: 40px; height: 40px; } } @media only screen and (min-width: 992px) { .testimonials .testimonial-nav .prev-icon span, .testimonials .testimonial-nav .next-icon span { width: 50px; height: 50px; } } @media only screen and (min-width: 1200px) { .testimonials .testimonial-nav .prev-icon span, .testimonials .testimonial-nav .next-icon span { width: 60px; height: 60px; } } .testimonials .testimonial-nav { top: 50%; margin-top: -10px; } @media only screen and (min-width: 576px) { .testimonials .testimonial-nav { margin-top: -15px; } } @media only screen and (min-width: 768px) { .testimonials .testimonial-nav { margin-top: -20px; } } @media only screen and (min-width: 992px) { .testimonials .testimonial-nav { margin-top: -25px; } } @media only screen and (min-width: 1200px) { .testimonials .testimonial-nav { margin-top: -30px; } } .testimonials .testimonial-nav { width: 100%; } .testimonials .testimonial-nav .prev-icon, .testimonials .testimonial-nav .next-icon { position: absolute; } .testimonials .testimonial-nav .prev-icon { left: 0; } .testimonials .testimonial-nav .next-icon { right: 0; } .aanbod .list { display: flex; flex-wrap: wrap; } .aanbod .list .item .item-content { width: 100%; } .aanbod .list .item figure { width: 100%; } .aanbod .list .item figure a, .aanbod .list .item figure div { display: block; position: relative; overflow: hidden; } .aanbod .list .item figure a:before, .aanbod .list .item figure div:before { content: ''; display: block; padding-top: 66.666666667%; } .aanbod .list .item figure a img, .aanbod .list .item figure div img { width: 100%; height: 100%; object-fit: cover; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); } .aanbod .list .item { width: 100%; } .acms-column-half .aanbod .list .item { width: 100%; } .acms-column-breed .aanbod .list .item { width: 100%; } .acms-column-smal .aanbod .list .item { width: 100%; } .acms-column-derde .aanbod .list .item { width: 100%; } @media only screen and (min-width: 576px) { .aanbod .list .item { width: 50%; } .acms-column-half .aanbod .list .item { width: 50%; } .acms-column-breed .aanbod .list .item { width: 50%; } .acms-column-smal .aanbod .list .item { width: 50%; } .acms-column-derde .aanbod .list .item { width: 150%; } } @media only screen and (min-width: 768px) { .aanbod .list .item { width: 50%; } .acms-column-half .aanbod .list .item { width: 100%; } .acms-column-breed .aanbod .list .item { width: 75%; } .acms-column-smal .aanbod .list .item { width: 150%; } .acms-column-derde .aanbod .list .item { width: 150%; } } @media only screen and (min-width: 992px) { .aanbod .list .item { width: 33.333333333%; } .acms-column-half .aanbod .list .item { width: 66.666666667%; } .acms-column-breed .aanbod .list .item { width: 50%; } .acms-column-smal .aanbod .list .item { width: 100%; } .acms-column-derde .aanbod .list .item { width: 100%; } } @media only screen and (min-width: 1200px) { .aanbod .list .item { width: 33.333333333%; } .acms-column-half .aanbod .list .item { width: 66.666666667%; } .acms-column-breed .aanbod .list .item { width: 50%; } .acms-column-smal .aanbod .list .item { width: 100%; } .acms-column-derde .aanbod .list .item { width: 100%; } } .social-media-links { position: fixed; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-wrap: wrap; flex-direction: column; z-index: 10000; } .social-media-links > div { transition: 0.2s; width: 30px; height: 30px; border-radius: 15px; margin: 5px 10px; border: 1px solid #343434; } .social-media-links > div a { display: block; width: 100%; height: 100%; background-size: 70%; background-repeat: no-repeat; background-position: center center; } .social-media-links .facebook { background-color: #ffffff; } .social-media-links .facebook a { background-image: url("/Assets/Images/Social/facebook.svg?fill=rgba(79, 97, 174, 0)"); } .social-media-links .facebook:hover { background-color: #c71717; } .social-media-links .facebook:hover a { background-image: url("/Assets/Images/Social/facebook.svg?fill=rgba(255, 255, 255, 0)"); } .social-media-links .linkedin { background-color: #ffffff; } .social-media-links .linkedin a { background-image: url("/Assets/Images/Social/linkedin.svg?fill=rgba(45, 115, 176, 0)"); } .social-media-links .linkedin:hover { background-color: #c71717; } .social-media-links .linkedin:hover a { background-image: url("/Assets/Images/Social/linkedin.svg?fill=rgba(255, 255, 255, 0)"); } .social-media-links .twitter { background-color: #ffffff; } .social-media-links .twitter a { background-image: url("/Assets/Images/Social/twitter.svg?fill=rgba(33, 150, 214, 0)"); } .social-media-links .twitter:hover { background-color: #c71717; } .social-media-links .twitter:hover a { background-image: url("/Assets/Images/Social/twitter.svg?fill=rgba(255, 255, 255, 0)"); } .social-media-links .pinterest { background-color: #ffffff; } .social-media-links .pinterest a { background-image: url("/Assets/Images/Social/pinterest.svg?fill=rgba(203, 32, 39, 0)"); } .social-media-links .pinterest:hover { background-color: #c71717; } .social-media-links .pinterest:hover a { background-image: url("/Assets/Images/Social/pinterest.svg?fill=rgba(255, 255, 255, 0)"); } .social-media-links .youtube { background-color: #ffffff; } .social-media-links .youtube a { background-image: url("/Assets/Images/Social/youtube.svg?fill=rgba(244, 60, 47, 0)"); } .social-media-links .youtube:hover { background-color: #c71717; } .social-media-links .youtube:hover a { background-image: url("/Assets/Images/Social/youtube.svg?fill=rgba(255, 255, 255, 0)"); } .social-media-links .instagram { background-color: #ffffff; } .social-media-links .instagram a { background-image: url("/Assets/Images/Social/instagram.svg?fill=rgba(0, 0, 0, 0)"); } .social-media-links .instagram:hover { background-color: #c71717; } .social-media-links .instagram:hover a { background-image: url("/Assets/Images/Social/instagram.svg?fill=rgba(255, 255, 255, 0)"); } .social-media-links .share { background-color: #ffffff; } .social-media-links .share a { background-image: url("/Assets/Images/Social/share.svg?fill=rgba(0, 0, 0, 0)"); } .social-media-links .share:hover { background-color: #c71717; } .social-media-links .share:hover a { background-image: url("/Assets/Images/Social/share.svg?fill=rgba(255, 255, 255, 0)"); } .tags .list { display: flex; flex-wrap: wrap; align-items: center; } .tags .tag { padding: 0 4px 4px 0; } .tags .tag a { display: block; padding: 6px; background: transparent; border: none; text-decoration: none; } .tags .tag a.hoog, .tags .tag a.seotag-hoog { font-size: 15.66px; color: #343434; } .tags .tag a.medium, .tags .tag a.seotag-medium { font-size: 13.92px; color: #343434; } .tags .tag a.laag, .tags .tag a.seotag-laag { font-size: 13.05px; color: #343434; } .tags .tag a.link-all { font-size: 13.05px; color: #343434; } .tags .tag.active a, .tags .tag:hover a { background: #c71717; color: #fff; } .realisaties .list { display: flex; flex-wrap: wrap; } .realisaties .list .item .item-content { width: 100%; } .realisaties .list .item figure { width: 100%; } .realisaties .list .item figure a, .realisaties .list .item figure div { display: block; position: relative; overflow: hidden; } .realisaties .list .item figure a:before, .realisaties .list .item figure div:before { content: ''; display: block; padding-top: 50%; } .realisaties .list .item figure a img, .realisaties .list .item figure div img { width: 100%; height: 100%; object-fit: cover; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); } .realisaties .list .item { width: 100%; } .acms-column-half .realisaties .list .item { width: 100%; } .acms-column-breed .realisaties .list .item { width: 100%; } .acms-column-smal .realisaties .list .item { width: 100%; } .acms-column-derde .realisaties .list .item { width: 100%; } @media only screen and (min-width: 576px) { .realisaties .list .item { width: 50%; } .acms-column-half .realisaties .list .item { width: 50%; } .acms-column-breed .realisaties .list .item { width: 50%; } .acms-column-smal .realisaties .list .item { width: 50%; } .acms-column-derde .realisaties .list .item { width: 150%; } } @media only screen and (min-width: 768px) { .realisaties .list .item { width: 50%; } .acms-column-half .realisaties .list .item { width: 100%; } .acms-column-breed .realisaties .list .item { width: 75%; } .acms-column-smal .realisaties .list .item { width: 150%; } .acms-column-derde .realisaties .list .item { width: 150%; } } @media only screen and (min-width: 992px) { .realisaties .list .item { width: 33.333333333%; } .acms-column-half .realisaties .list .item { width: 66.666666667%; } .acms-column-breed .realisaties .list .item { width: 50%; } .acms-column-smal .realisaties .list .item { width: 100%; } .acms-column-derde .realisaties .list .item { width: 100%; } } @media only screen and (min-width: 1200px) { .realisaties .list .item { width: 33.333333333%; } .acms-column-half .realisaties .list .item { width: 66.666666667%; } .acms-column-breed .realisaties .list .item { width: 50%; } .acms-column-smal .realisaties .list .item { width: 100%; } .acms-column-derde .realisaties .list .item { width: 100%; } } /*LET OP: Sommige waarden moeten een !important regel krijgen omwille de color schemes*/ .VerwijderMarges { margin: 0 !important; } .Hoofdletters { text-transform: uppercase; } .module a.btn1 { background: #343434; color: #fff; text-decoration: none; text-transform: uppercase; padding: 10px 15px; line-height: 1; border-radius: 10px; display: inline-block; margin: 10px 2px 2px 2px; } .module a.btn1:hover { background: #c71717; } .module a.link-wrapper { text-decoration: none; color: #343434; } .module a.link-wrapper:before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } .module .Supersize { font-size: 200%; } .module .Bigger { font-size: 120%; } .module .Minisize { font-size: 75%; } .module .StickTogether { white-space: nowrap; } .module .highlight { font-size: 130%; color: #9e9e9e; text-align: center; display: block; width: 85%; margin: 2em auto; font-style: italic; } .module .highlight:before { content: open-quote; } .module .highlight:after { content: close-quote; } .module ul > li:before { border: 2px solid #c71717; } .module ul > li > ul > li:before { border: 2px solid #343434; } .module ul > li > ul > li > ul > li:before { border: none; } .module .quote { font-style: italic; font-size: clamp(1rem, 4vw, 1.5rem); display: block; } /*--------------------------------------------------------------------------------*/ /* ALGEMEEN */ /*--------------------------------------------------------------------------------*/ @media only screen and (min-width: 992px) { #scrollToTop { bottom: 10px; } } .vergroten { font-size: 400%; font-weight: 900; } .module:not(.text) img { border-radius: 15px 15px 15px 0; } @media only screen and (min-width: 992px) { .module:not(.text) img { border-radius: 25px 25px 25px 0; } } .module a.knop { display: inline-flex; align-items: center; text-decoration: none; text-transform: uppercase; color: #343434; position: relative; padding: 3px; padding-left: 10px; border-radius: 25px; } .module a.knop:after { content: ' '; height: 34px; width: 34px; background: #c71717 url(/Assets/_Analyz-it/Images/Site-graphics/linkArrowIcon.png) center center no-repeat; background-size: contain; border-radius: 50%; margin-left: 5px; } .module a.knop:hover { background: #c71717; color: #fff; } .module a.knop:hover:after { background-color: #343434; } @keyframes bg-pan-left { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } .module .cta { background: linear-gradient(50deg, #c71717, #de327f, #aa1717); background-size: 1500% 100%; font-size: 110%; border-radius: 30px 30px 30px 0; padding: 25px; animation: bg-pan-left 15s infinite alternate both; } .module .cta > * { max-width: 1380px; margin: 0 auto; text-align: center; } .module .cta p, .module .cta a, .module .cta h1, .module .cta h2, .module .cta h3, .module .cta h4, .module .cta h5, .module .cta h6 { color: #fff; } @media only screen and (min-width: 992px) { .module .cta { padding: 40px; } } #anker-menu ul { margin: 0; padding: 0; } #anker-menu ul li { margin: 0; padding: 0; background: transparent; margin-top: 5px; border-radius: 10px; } #anker-menu ul li:before { display: none; } #anker-menu ul li a { color: #000000; background: #fff; display: block; padding: 10px; text-decoration: none; border: 1px solid #343434; border-radius: 10px; } #anker-menu ul li a:hover { background: #c71717; color: #fff; border-color: #c71717; } .intro-container { min-height: 70vh; font-size: 110%; padding: 25px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .intro-container > .intro { max-width: 1380px; margin: 0 auto; text-align: center; } .intro-container p, .intro-container a, .intro-container h1, .intro-container h2, .intro-container h3, .intro-container h4, .intro-container h5, .intro-container h6 { color: #fff; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5); } .intro-container p:last-child { margin-bottom: 0; } @media only screen and (min-width: 992px) { .intro-container { min-height: 50vh; } .intro { padding: 0 40px; } } .schaduw { box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.3); } .cols { display: flex; flex-wrap: wrap; } .cols .col { width: 100%; } .zigzag-container .cols .col { text-align: center; } .zigzag-container .cols .col:last-child { padding-top: 25px; } @media only screen and (min-width: 768px) { .cols .col { width: 50%; } .cols .col:nth-child(odd) { padding-right: 15px; } .cols .col:nth-child(even) { padding-left: 15px; } .zigzag-container .cols { align-items: center; } .zigzag-container .cols:nth-child(odd) { flex-direction: row-reverse; } .zigzag-container .cols:nth-child(odd) .col.txt { text-align: right; } .zigzag-container .cols:nth-child(even) { text-align: left; } .zigzag-container .cols:nth-child(even) .col.txt { text-align: left; } .zigzag-container .cols .col.txt { position: sticky; top: 75px; } .zigzag-container .cols .col:first-child { width: 40%; padding: 0; } .zigzag-container .cols .col:last-child { width: 60%; padding: 0 30px; } } @media only screen and (min-width: 992px) { .cols .col { width: 100%; } .cols .col:nth-child(odd) { padding-right: 0; } .cols .col:nth-child(even) { padding-left: 0; } .zigzag-container .cols { padding: 40px 0; } .zigzag-container .cols .col.txt { top: 115px; } .zigzag-container .cols .col:first-child { width: 50%; padding: 0; } .zigzag-container .cols .col:last-child { width: 50%; padding: 0 40px; } } @media only screen and (min-width: 1200px) { .cols .col { width: 50%; } .cols .col:nth-child(odd) { padding-right: 20px; } .cols .col:nth-child(even) { padding-left: 20px; } } .module .no-list-plz { display: flex; flex-wrap: wrap; padding: 0; } .module .no-list-plz li { padding: 5px 10px; border: 1px dashed #c7c7c7; background: #fff; border-radius: 10px; margin: 1px; } .module .no-list-plz li:before { display: none; } .module .no-list-plz.in-matrix { margin: 0 -30px; } .module .no-list-plz.in-matrix li { padding: 0 30px; width: 50%; display: flex; align-items: center; justify-content: center; margin: 0; border: 0; border-radius: 0; } .module .no-list-plz.in-matrix li a { width: 100%; } .module .no-list-plz.in-matrix li img { width: 100%; height: 100%; object-fit: contain; } @media only screen and (min-width: 768px) { .module .no-list-plz.in-matrix li { width: 33.333%; } } @media only screen and (min-width: 992px) { .module .no-list-plz.in-matrix li { width: 25%; } } .module hr { text-align: left; width: 200px; } .module hr.hr-center { margin: 3em auto; } .module .vinkjes > li:before { background: url(/Assets/_Analyz-it/Images/Site-graphics/vinkje.png) center center no-repeat; width: 16px; height: 16px; border: none; } .acms-column-extra .module { padding: 0; } .form input { font-size: 80%; } .tags .list { justify-content: center; } .tags .hoog, .tags .seotag-hoog { font-weight: 400; } .tags a { line-height: 1; border-radius: 10px; } ol.metStap { counter-reset: section; margin: 0; } ol.metStap li { padding: 0 0 0 70px; position: relative; list-style-type: none; } ol.metStap li:before { content: "Stap " counter(section) ": "; counter-increment: section; display: inline-flex; position: absolute; justify-content: flex-start; width: 65px; left: 0; font-weight: 700; color: #c71717; } ol.metStap li > ol li:before { content: counters(section, ".") " "; } .acms-column-extra { padding: 0; } /*--------------------------------------------------------------------------------*/ /* HEADER */ /*--------------------------------------------------------------------------------*/ header { background: #000000; } header .wrapper { max-width: 100%; } header .wrapper { align-items: center; } header .logo { position: relative; left: 12.5px; } @media only screen and (min-width: 576px) { header .logo { left: 12.5px; } } @media only screen and (min-width: 768px) { header .logo { left: 15px; } } @media only screen and (min-width: 992px) { header .logo { left: 26.666666667px; } } @media only screen and (min-width: 1200px) { header .logo { left: 26.666666667px; } } /*-------------------------------------------------------------------------------- /* NAV MOBILE */ /*--------------------------------------------------------------------------------*/ #nav_mobile { background: #edeeef; top: 50px; } #nav_mobile a { padding: 25px; } #nav_mobile a:hover, #nav_mobile a.active { color: #c71717; } #nav_mobile > ul > li { border-top: 1px solid rgba(0, 0, 0, 0.1); } #nav_mobile > ul > li.active.has-children { padding-bottom: 12.5px; } #nav_mobile > ul > li > ul > li { background: #fff; padding-left: 25px; } #nav_mobile > ul > li > ul > li a { padding: 12.5px; font-size: 80%; } #nav_mobile > ul > li > ul > li.alt-menu.first { border-top: 1px dashed #edeeef; padding-top: 12.5px; } #nav_mobile .mobile { font-size: 120%; background: #fff; } .has-navbar #nav_mobile { top: 96px; } @media only screen and (max-width: 991px) { .show-nav:before { content: ''; background: rgba(0, 0, 0, 0.5); position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 9000; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } } @media only screen and (min-width: 576px) { #nav_mobile { top: 50px; } .has-navbar #nav_mobile { top: 96px; } } @media only screen and (min-width: 768px) { #nav_mobile { top: 55px; } .has-navbar #nav_mobile { top: 101px; } } @media only screen and (min-width: 992px) { #nav_mobile { top: 98px; } .has-navbar #nav_mobile { top: 144px; } } @media only screen and (min-width: 1200px) { #nav_mobile { top: 103px; } .has-navbar #nav_mobile { top: 149px; } } /*--------------------------------------------------------------------------------*/ /* HEADER TEXT */ /*--------------------------------------------------------------------------------*/ #header_text .wrapper { max-width: 100%; justify-content: flex-end; } #header_text .module { padding: 0; } #header_text .header-cta-links { position: relative; right: 40px; display: flex; top: 5px; transition: 0.2s; } #header_text .header-cta-links a { color: #fff; text-decoration: none; /*background: @defaultBlack;*/ position: relative; display: inline-flex; align-items: center; font-size: 0; } #header_text .header-cta-links a:before { content: ''; width: 40px; height: 40px; } #header_text .header-cta-links a.tel:before { background: url(/Assets/_Analyz-it/Images/Site-graphics/tel-icon.png) center center / 50% no-repeat; } #header_text .header-cta-links a.mail:before { background: url(/Assets/_Analyz-it/Images/Site-graphics/mail-icon.png) center center / 50% no-repeat; } @media only screen and (min-width: 992px) { #header_text .wrapper { padding: 0 40px; } #header_text .header-cta-links { top: 0; right: 0; } } @media only screen and (min-width: 1200px) { #header_text .wrapper { padding: 0 40px; } } @media only screen and (min-width: 1380px) { #header_text .header-cta-links a { font-size: 15px; padding-right: 25px; } } /*--------------------------------------------------------------------------------*/ /* NAV TOP */ /*--------------------------------------------------------------------------------*/ @media only screen and (min-width: 992px) { #nav_top .wrapper { max-width: 100%; } #nav_top .wrapper ul { justify-content: flex-end; margin-left: auto; margin-right: 130px; } #nav_top .wrapper ul li { display: flex; height: 100%; align-items: center; } #nav_top .wrapper ul a { padding: 0 17px; color: rgba(255, 255, 255, 0.7); margin: 0 auto; text-align: center; font-weight: 300; } #nav_top .wrapper ul a:hover, #nav_top .wrapper ul a.active { color: #fff; } } @media only screen and (min-width: 1380px) { #nav_top .wrapper ul { margin-right: 483px; } } /*--------------------------------------------------------------------------------*/ /* NAV ROOT */ /*--------------------------------------------------------------------------------*/ @media only screen and (min-width: 992px) { #nav_root .wrapper { max-width: 100%; padding: 0 40px; } #nav_root .wrapper ul { justify-content: flex-end; margin-left: 125px; width: 100%; } #nav_root .wrapper ul li { display: flex; height: 100%; align-items: center; position: relative; } #nav_root a { padding: 9px 25px; color: #fff; margin: 0 auto; text-align: center; font-size: 18px; } #nav_root a:hover, #nav_root a.active { color: #fff; } #nav_root a { position: relative; margin: 0 0 0 12px; } #nav_root a:after { content: ''; position: absolute; bottom: -3px; background: #c71717; left: 0; right: 0; width: 0; height: 3px; margin: 0 auto; transition: 0.2s; } #nav_root a:hover:after, #nav_root a.active:after { width: 100%; } } @media only screen and (min-width: 1200px) { #nav_root .wrapper { padding: 0 40px; } #nav_root .wrapper ul { margin-left: 90px; } } /*--------------------------------------------------------------------------------*/ /* NAV MAIN */ /*--------------------------------------------------------------------------------*/ @media only screen and (min-width: 992px) { #nav_main { position: sticky; top: 98px; } #nav_main > ul { flex-direction: column; padding: 20px 40px 20px 0; } #nav_main > ul a { padding: 10px; } #nav_main ul li a { color: #343434; } #nav_main ul li:hover > a, #nav_main ul li.active > a { color: #c71717; } #nav_main > ul > li { margin: 5px 0 0 0; border-radius: 10px; border: 1px solid #343434; background: #edeeef; transition: 0.2s; } #nav_main > ul > li:hover, #nav_main > ul > li.active { border-color: #c71717; background: #fff; } #nav_main > ul > li:hover > ul > li > a, #nav_main > ul > li.active > ul > li > a { padding-left: 20px; } #nav_main > ul > li.alt-menu { background: #fff; } #nav_main > ul > li.alt-menu.first { margin-top: 40px; } #nav_main > ul > li.alt-menu:hover, #nav_main > ul > li.alt-menu.active { background: #c71717; border-color: #c71717; } #nav_main > ul > li.alt-menu:hover > a, #nav_main > ul > li.alt-menu.active > a { color: #fff; } #nav_main > ul > li:first-child.alt-menu.first { margin-top: 0; } #nav_main .module { padding-left: 0; } .has-navbar #nav_main { top: 144px; } .blog #nav_main, .nieuws #nav_main { top: 164px; } .has-navbar.blog #nav_main, .has-navbar.nieuws #nav_main { top: 210px; } } @media only screen and (min-width: 1200px) { #nav_main > ul { flex-direction: column; padding: 20px 40px 20px 0; } } /*--------------------------------------------------------------------------------*/ /* MAIN */ /*--------------------------------------------------------------------------------*/ /*main{ padding-bottom: @defaultPadding-xs; } @media only screen and (min-width: @bp-sm){ main{ padding-bottom: @defaultPadding-sm; } } @media only screen and (min-width: @bp-md){ main{ padding-bottom: @defaultPadding-md; } } @media only screen and (min-width: @bp-lg){ main{ padding-bottom: @defaultPadding-lg; } } @media only screen and (min-width: @bp-xl){ main{ padding-bottom: @defaultPadding-xl; } }*/ @media only screen and (min-width: 992px) { main > .wrapper { flex-direction: row-reverse; } } /*--------------------------------------------------------------------------------*/ /* MAIN_BOTTOM */ /*--------------------------------------------------------------------------------*/ .op-home #main_bottom { background: #e0e1e3; padding: 25px 0; } @media only screen and (min-width: 576px) { .op-home #main_bottom { padding: 25px 0; } } @media only screen and (min-width: 768px) { .op-home #main_bottom { padding: 30px 0; } } @media only screen and (min-width: 992px) { .op-home #main_bottom { padding: 40px 0; } } @media only screen and (min-width: 1200px) { .op-home #main_bottom { padding: 40px 0; } } /*--------------------------------------------------------------------------------*/ /* CREDITS */ /*--------------------------------------------------------------------------------*/ /*--------------------------------------------------------------------------------*/ /* UITGEBREIDE CREDITS */ /*--------------------------------------------------------------------------------*/ /*--------------------------------------------------------------------------------*/ /* CONVERSIEKNOPPEN FOOTER */ /*--------------------------------------------------------------------------------*/ footer .module { padding: 0; } .slit-in-horizontal { animation: slit-in-horizontal 0.45s ease-out 1.5s both; } @keyframes slit-in-horizontal { 0% { transform: translateZ(-800px) rotateX(90deg); opacity: 0; } 54% { transform: translateZ(-160px) rotateX(87deg); opacity: 1; } 100% { transform: translateZ(0) rotateX(0); } } .blink-1 { animation: blink-1 0.6s 60s both; } @keyframes blink-1 { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0.5; } } .op-home #footerConversieKnoppenContainer #footerConversieKnoppen { animation: slit-in-horizontal 0.45s ease-out 1.5s both; } #footerConversieKnoppenContainer { position: fixed; z-index: 9001; bottom: 0; left: 0; right: 0; perspective: 1000px; perspective-origin: 50% 400%; transition: 0.2s; animation: blink-1 0.6s 60s both; } #footerConversieKnoppenContainer #footerConversieKnoppen { display: flex; justify-content: center; } #footerConversieKnoppenContainer a { background: #c71717; color: #fff; text-decoration: none; padding: 10px 0; flex: 0 0 160px; text-align: center; font-size: 15px; } #footerConversieKnoppenContainer a:first-child { border-radius: 10px 0 0 0; } #footerConversieKnoppenContainer a:last-child { border-radius: 0 10px 0 0; position: relative; } #footerConversieKnoppenContainer a:last-child:before { content: ''; height: 100%; width: 1px; background: rgba(255, 255, 255, 0.3); position: absolute; display: block; left: 0; top: 0; } #footerConversieKnoppenContainer a:hover { background: #000000; } #footerConversieKnoppenContainer a:first-child { position: relative; } #footerConversieKnoppenContainer a:first-child:before { content: ''; background: url(/Assets/_Analyz-it/Images/Site-graphics/conversieKnoppen-specialBorder.svg) center center no-repeat; width: 10px; height: 10px; display: block; position: absolute; left: -10px; bottom: 0; transition: 0.2s; } #footerConversieKnoppenContainer a:first-child:hover:before { content: ''; background: url(/Assets/_Analyz-it/Images/Site-graphics/conversieKnoppen-specialBorder-hover.svg) center center no-repeat; width: 10px; height: 10px; display: block; position: absolute; left: -10px; bottom: 0; } #footerConversieKnoppenContainer a:last-child { position: relative; } #footerConversieKnoppenContainer a:last-child:after { content: ''; background: url(/Assets/_Analyz-it/Images/Site-graphics/conversieKnoppen-specialBorder.svg) center center no-repeat; width: 10px; height: 10px; display: block; position: absolute; right: -10px; bottom: 0; transform: rotateZ(90deg); transition: 0.2s; } #footerConversieKnoppenContainer a:last-child:hover:after { content: ''; background: url(/Assets/_Analyz-it/Images/Site-graphics/conversieKnoppen-specialBorder-hover.svg) center center no-repeat; width: 10px; height: 10px; display: block; position: absolute; right: -10px; bottom: 0; transform: rotateZ(90deg); } .show-nav #footerConversieKnoppenContainer { bottom: -60px; } @media only screen and (min-width: 992px) { #footerConversieKnoppenContainer a { font-size: 18px; flex: 0 0 200px; } } /*--------------------------------------------------------------------------------*/ /* NAV MODULE */ /*--------------------------------------------------------------------------------*/ .nav_module { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); transition: 0.2s; } .nav_module.top .wrapper:before { bottom: 0; } .nav_module.bottom .wrapper:before { top: 0; } .nav_module .wrapper { padding: 25px; position: relative; } .nav_module .wrapper:before { content: ''; position: absolute; left: 25px; right: 25px; height: 1px; width: calc(100% - 50px); background: #c71717; } .nav_module .wrapper .filters.focus .filter { height: 180px; } .nav_module .wrapper .filters .active-filter { height: 30px; display: flex; align-items: center; } .nav_module .wrapper .pager .page-item a { border-radius: 50%; font-size: 80%; } .nav_module .wrapper .vorigevolgende a { width: 30px; height: 30px; border-radius: 50%; font-size: 0; position: relative; } .nav_module .wrapper .vorigevolgende a:after { content: ''; border: 1px solid #000000; width: 9px; height: 9px; position: absolute; top: 10px; transform: rotateZ(45deg); transition: 0.2s; } .nav_module .wrapper .vorigevolgende a:hover { background: #c71717; } .nav_module .wrapper .vorigevolgende a:hover:after { border-color: #fff; } .nav_module .wrapper .vorigevolgende a.disabled, .nav_module .wrapper .vorigevolgende a.disabled:hover { opacity: 0.3; } .nav_module .wrapper .vorigevolgende a.vorige:after { border-width: 0 0 1px 1px; right: 9px; } .nav_module .wrapper .vorigevolgende a.volgende:after { border-width: 1px 1px 0 0; left: 9px; } .nav_module .wrapper .vorigevolgende a.lijst { display: none; } .nav_module .wrapper .title h1 { margin: 0; font-size: 26px; font-weight: 300; color: #c71717; } @media only screen and (min-width: 576px) { .nav_module .wrapper { padding: 25px 25px; } .nav_module .wrapper:before { left: 25px; right: 25px; width: calc(100% - 50px); } .nav_module .wrapper .title h1 { margin: 0; font-size: 30px; } } @media only screen and (min-width: 768px) { .nav_module .wrapper { padding: 25px 30px; } .nav_module .wrapper:before { left: 30px; right: 30px; width: calc(100% - 60px); } .nav_module .wrapper .title h1 { margin: 0; font-size: 30px; } .nav_module .wrapper .pager ul li a { width: 30px; height: 30px; } } @media only screen and (min-width: 992px) { .nav_module .wrapper { padding: 25px 40px; } .nav_module .wrapper:before { left: 40px; right: 40px; width: calc(100% - 80px); } .nav_module .wrapper .title h1 { margin: 0; font-size: 36px; } } @media only screen and (min-width: 1200px) { .nav_module .wrapper { padding: 25px 40px; } .nav_module .wrapper:before { left: 40px; right: 40px; width: calc(100% - 80px); } .nav_module .wrapper .title h1 { margin: 0; font-size: 36px; } } @media only screen and (max-width: 991px) { .realisatiemoduleNav-fadeOut .nav_module { opacity: 0; pointer-events: none; } } /*--------------------------------------------------------------------------------*/ /* REALISATIE MODULE LIJST */ /*--------------------------------------------------------------------------------*/ .realisaties .acms-column-volledigebreedte { padding: 0; } .module.realisaties { padding: 0; } .module.realisaties .list .item { padding: 25px; } .module.realisaties .list .item .item-content { display: flex; flex-direction: column; } .module.realisaties .list .item .item-content h4 { order: 2; } .module.realisaties .list .item .item-content figure { order: 1; } .module.realisaties .list .item .item-content p { order: 3; } .module.realisaties .list .item h4 { margin: 0; } .module.realisaties .list .item h4 > a { color: #c71717; text-transform: uppercase; text-decoration: none; font-size: 16px; padding: 25px 0; display: block; line-height: 1; } .module.realisaties .list .item h4:after { content: ''; width: 40%; height: 4px; background: #c71717; display: block; } .module.realisaties .list .item p { margin: 1em 0 0 0; } @media only screen and (min-width: 576px) { .module.realisaties .list .item { padding: 25px; } .realisaties form[action="./realisaties?p=1"] .module.realisaties .list .item:first-child, .realisaties form[action="./realisaties"] .module.realisaties .list .item:first-child, .realisaties form[action="./realisaties?p=1"] .module.realisaties .list .item:nth-child(2), .realisaties form[action="./realisaties"] .module.realisaties .list .item:nth-child(2) { width: 100%; } } @media only screen and (min-width: 768px) { .module.realisaties .list .item { padding: 30px; } } @media only screen and (min-width: 992px) { .module.realisaties .list .item { padding: 40px; } .realisaties form[action="./realisaties?p=1"] .module.realisaties .list .item:first-child, .realisaties form[action="./realisaties"] .module.realisaties .list .item:first-child, .realisaties form[action="./realisaties?p=1"] .module.realisaties .list .item:nth-child(2), .realisaties form[action="./realisaties"] .module.realisaties .list .item:nth-child(2) { width: 50%; } } @media only screen and (min-width: 1200px) { .module.realisaties .list .item { padding: 40px; } } /*--------------------------------------------------------------------------------*/ /* REALISATIE MODULE DETAIL */ /*--------------------------------------------------------------------------------*/ .realisaties .content { flex-direction: column-reverse; } .realisaties .acms-column-breed { width: 100%; } .realisaties .acms-column-smal { background: #edeeef; border-radius: 20px 0 30px 20px; align-self: flex-start; margin: 0 25px; width: calc(100% - (25px*2)); padding: 25px; position: relative; } .realisaties .acms-column-smal:after { content: ''; display: block; position: absolute; z-index: -2; left: -15px; top: -15px; width: 50%; height: 50%; max-height: 100px; background: #c71717; border-radius: 20px 30px 50px 0; } .realisaties .acms-column-smal:before { content: ''; display: block; position: absolute; z-index: -1; inset: 0; background: #edeeef; border-radius: 20px 0 30px 20px; } .realisaties .acms-column-smal p > img { max-height: 140px; background: white; border-radius: 20px 20px 0 20px; box-shadow: 0 0 20px 0 rgba(17, 27, 30, 0.1); overflow: hidden; padding: 20px; } .realisaties .acms-column-smal .controls-row .module.text p:not(:has(img)) { font-size: 0.8em; font-style: italic; opacity: 0.7; } .realisaties .acms-column-smal .controls-row p:has(img) { transform: translateX(-37.5px); text-align: left !important; position: relative; display: flex; } @media only screen and (min-width: 576px) { .realisaties .acms-column-smal .controls-row p:has(img) { transform: translateX(-37.5px); } } @media only screen and (min-width: 768px) { .realisaties .acms-column-smal .controls-row p:has(img) { transform: translateX(-45px); } } @media only screen and (min-width: 992px) { .realisaties .acms-column-smal .controls-row p:has(img) { transform: translateX(-60px); } } @media only screen and (min-width: 1200px) { .realisaties .acms-column-smal .controls-row p:has(img) { transform: translateX(-60px); } } .realisaties .acms-column-smal .module { padding: 0; } .realisaties .acms-column-smal .meerwaarde p span { display: block; color: #c71717; } .realisaties .acms-column-smal .meerwaarde p span::first-letter { text-transform: capitalize; } .realisaties .acms-column-smal .controls-row:nth-last-child(2) .module:last-child p:last-child { margin-bottom: 0; } .realisaties .acms-column-smal .controls-row:nth-last-child(2) + .controls-row:has(.externalLink) { margin-top: 40px; } .realisaties .acms-column-smal .externalLink { margin: 0; } .realisaties .acms-column-smal .externalLink:empty { margin-top: 1.5em; } .realisaties .acms-column-smal .externalLink a { display: inline-flex; align-items: center; text-decoration: none; text-transform: uppercase; color: #343434; position: relative; padding: 3px; padding-left: 10px; margin-left: -10px; border-radius: 25px; background: transparent; } .realisaties .acms-column-smal .externalLink a:after { content: ' '; height: 34px; width: 34px; background: #c71717 url(/Assets/_Analyz-it/Images/Site-graphics/linkArrowIcon.png) center center no-repeat; background-size: contain; transition: 0.2s; border-radius: 50%; margin-left: 5px; } .realisaties .acms-column-smal .externalLink a:hover { background: #c71717; color: #fff; } .realisaties .acms-column-smal .externalLink a:hover:after { background-color: #343434; } @media only screen and (min-width: 576px) { .realisaties .acms-column-smal { padding: 25px; } } @media only screen and (min-width: 768px) { .realisaties .acms-column-smal { padding: 30px; } } @media only screen and (min-width: 992px) { .realisaties .content { flex-direction: row; } .realisaties .acms-column-smal { width: calc(100%/3 - (40px*2)); margin: 40px; } .realisaties .acms-column-breed { width: 66.666666667%; } } @media only screen and (min-width: 1200px) { .realisaties .acms-column-smal { width: calc(100%/3 - (40px*2)); margin: 40px; } } /*--------------------------------------------------------------------------------*/ /* NIEUWS LIJST */ /*--------------------------------------------------------------------------------*/ .module.news { padding: 0; } .module.news .list .item { padding: 25px; } .module.news .list .item .item-content { display: flex; flex-direction: column; } .module.news .list .item .item-content time { order: 3; } .module.news .list .item .item-content h4 { order: 2; } .module.news .list .item .item-content figure { order: 1; } .module.news .list .item .item-content p { order: 4; } .module.news .list .item time { display: none; } .module.news .list .item h4 { margin: 0 0 1em 0; } .module.news .list .item h4 > a { color: #c71717; text-transform: uppercase; text-decoration: none; font-size: 16px; padding: 25px 0; display: block; line-height: 1; } .module.news .list .item h4:after { content: ''; width: 40%; height: 4px; background: #c71717; display: block; } .module.news .list .item p { margin: 0; } .module.news .list .item .link { display: none; } .module.news .link.all { text-align: center; } .module.news .link.all a { background: #343434; color: #fff; text-decoration: none; text-transform: uppercase; padding: 10px 15px; line-height: 1; border-radius: 10px; display: inline-block; margin: 10px 2px 2px 2px; } .module.news .link.all a:hover { background: #c71717; } @media only screen and (min-width: 576px) { .module.news .list .item { padding: 25px; } .nieuws:not(.nieuwsarchief) .module.news .list .item:first-child, .nieuws:not(.nieuwsarchief) .module.news .list .item:nth-child(2) { width: 100%; } } @media only screen and (min-width: 768px) { .module.news .list .item { padding: 30px; } } @media only screen and (min-width: 992px) { .module.news .list .item { padding: 40px; } .nieuws:not(.nieuwsarchief) .module.news .list .item:first-child, .nieuws:not(.nieuwsarchief) .module.news .list .item:nth-child(2) { width: 50%; } } @media only screen and (min-width: 1200px) { .module.news .list .item { padding: 40px; } } /*--------------------------------------------------------------------------------*/ /* INVULLING */ /*--------------------------------------------------------------------------------*/ /******************************************************************/ /* HOME HEADER */ /******************************************************************/ .op-home #sandwich { top: 17.5px; } .op-home header .logo { background: transparent; } .op-home header .logo:before { transition: 0.2s; content: ''; display: block; background: url(/Assets/_Analyz-it/Images/logo_ait.svg) center center / contain no-repeat; width: 104px; height: 50px; } .op-home header .logo:after { content: ''; display: block; background: url(/Assets/_Analyz-it/Images/symbool_ait.svg) center center / contain no-repeat; width: 104px; height: 50px; position: absolute; opacity: 0; left: 0; top: 0; } .op-home #header_text .header-cta-links { top: 17.5px; } .op-home.scrolled #sandwich { top: 5px; } .op-home.scrolled header .logo:after { background: url(/Assets/_Analyz-it/Images/symbool_ait.svg) center center / contain no-repeat; width: 25px; height: 25px; } .op-home.scrolled #header_text .header-cta-links { top: 5px; } .op-home.scrolled header .logo:before { opacity: 0; } .op-home.scrolled header .logo:after { opacity: 1; left: 0; } .op-home.has-navbar #sandwich { top: 63.5px; } .op-home.has-navbar.scrolled #sandwich { top: 51px; } @media only screen and (min-width: 576px) { .op-home #sandwich { top: 17.5px; } .op-home header { height: 75px; } .op-home header .logo:before { width: 104px; height: 50px; } .op-home #header_text .header-cta-links { top: 17.5px; } .op-home.scrolled #sandwich { top: 5px; } .op-home.scrolled header { height: 50px; } .op-home.scrolled header .logo:after { width: 25px; height: 25px; } .op-home.scrolled #header_text .header-cta-links { top: 5px; } .op-home.has-navbar #sandwich { top: 63.5px; } .op-home.has-navbar.scrolled #sandwich { top: 51px; } } @media only screen and (min-width: 768px) { .op-home #sandwich { top: 26.25px; } .op-home header { height: 92.5px; } .op-home header .logo:before { width: 130px; height: 62.5px; } .op-home #header_text .header-cta-links { top: 26.25px; } .op-home.scrolled #sandwich { top: 7.5px; } .op-home.scrolled header { height: 55px; } .op-home.scrolled header .logo:after { width: 30px; height: 30px; } .op-home.scrolled #header_text .header-cta-links { top: 7.5px; } .op-home.has-navbar #sandwich { top: 72.25px; } .op-home.has-navbar.scrolled #sandwich { top: 53.5px; } } @media only screen and (min-width: 992px) { .op-home #sandwich { top: 41.666666667px; } .op-home header { height: 123.333333333px; } .op-home header .logo:before { width: 173.333333333px; height: 83.333333333px; } .op-home #header_text .header-cta-links { top: 0; right: 0; } .op-home #nav_root { top: 70px; transition: 0.2s; } .op-home.scrolled #sandwich { top: 29px; } .op-home.scrolled header { height: 98px; } .op-home.scrolled header .logo:after { width: 45px; height: 45px; } .op-home.scrolled #header_text .header-cta-links { top: 0; right: 0; } .op-home.scrolled #nav_root { top: 42px; } .op-home.has-navbar #nav_root { top: 116px; } .op-home.has-navbar.scrolled #nav_root { top: 88px; } } @media only screen and (min-width: 1200px) { .op-home #sandwich { top: 48.638132296px; } .op-home header { height: 137.276264591px; } .op-home header .logo:before { width: 202.33463035px; height: 97.276264591px; } .op-home.scrolled #sandwich { top: 31.5px; } .op-home.scrolled header { height: 103px; } .op-home.scrolled header .logo:after { width: 50px; height: 50px; } .op-home.has-navbar #nav_root { top: 116px; } .op-home.has-navbar.scrolled #nav_root { top: 88px; } } /******************************************************************/ /* HOME HERO */ /******************************************************************/ #hero { margin-top: -50px; background: #000000; height: 60vh; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; text-align: center; } #hero video { min-width: 100%; min-height: 100%; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); } #hero .content { color: #fff; position: relative; z-index: 1; } #hero .content__container { font-weight: 600; overflow: hidden; height: 40px; padding: 0 25px; position: relative; display: flex; flex-wrap: wrap; align-items: baseline; white-space: nowrap; } #hero .content__container:before { content: '['; left: 0; } #hero .content__container:after { content: ']'; position: absolute; right: 0; } #hero .content__container:after, #hero .content__container:before { position: absolute; top: 0; color: #c71717; font-size: 30px; line-height: 40px; -webkit-animation-name: opacity; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; animation-name: opacity; animation-duration: 2s; animation-iteration-count: infinite; } #hero .content__container__text { margin: 0; line-height: 40px; color: #fff; } #hero .content__container__list { margin: 0; padding-left: 10px; text-align: left; list-style: none; -webkit-animation-name: change; -webkit-animation-duration: 15s; -webkit-animation-iteration-count: infinite; animation-name: change; animation-duration: 15s; animation-iteration-count: infinite; } #hero .content__container__list__item { padding: 0; margin: 0; background: none; line-height: 40px; color: #c71717; } #hero .content__container__list__item:before { display: none; } #hero .content a.btn1 { background: #c71717; color: #fff; } #hero .content a.btn1:hover { background: #fff; color: #c71717; } @keyframes opacity { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } @keyframes change { 0%, 12.66%, 100% { transform: translate3d(0, 0, 0); } 16.66%, 29.32% { transform: translate3d(0, -25%, 0); } 33.32%, 45.98% { transform: translate3d(0, -50%, 0); } 49.98%, 62.64% { transform: translate3d(0, -75%, 0); } 66.64%, 79.3% { transform: translate3d(0, -50%, 0); } 83.3%, 95.96% { transform: translate3d(0, -25%, 0); } } @media only screen and (min-width: 576px) { #hero { margin-top: -50px; } } @media only screen and (min-width: 768px) { #hero { margin-top: -55px; } #hero .content__container { height: 50px; padding: 0 30px; } #hero .content__container:before, #hero .content__container:after { font-size: 50px; line-height: 50px; } #hero .content__container__text, #hero .content__container__list__item { line-height: 50px; font-size: 30px; } } @media only screen and (min-width: 992px) { #hero { margin-top: -98px; } } @media only screen and (min-width: 1200px) { #hero { margin-top: -103px; } } /******************************************************************/ /* HOME WIE IS AIT */ /******************************************************************/ #wie { text-align: center; display: flex; justify-content: center; align-items: center; margin-bottom: 2.5vw; padding: 25px; } @media only screen and (min-width: 1200px) { #wie { padding: 15vw; background: url(/Assets/_Analyz-it/Images/Home/WieIsAIT_2024-07.jpg?v=2) center top / contain no-repeat; height: 50vw; } #wie img { display: none; } } /******************************************************************/ /* WEBAPPLICATIES OP MAAT */ /******************************************************************/ .webapplicaties-op-maat .intro-container { background: url(/Assets/_Analyz-it/Images/Webapplicaties/webapplicaties-intro.jpg) center center no-repeat; background-size: cover; } .webapplicaties-op-maat .cols .col img { border: 1px dashed #c7c7c7; padding: 10px; } /******************************************************************/ /* WEBSHOPS */ /******************************************************************/ .webshops .intro-container { background: url(/Assets/_Analyz-it/Images/Webshops/webshops-intro.jpg) center center no-repeat; background-size: cover; } .webshops .cols.webshop-aanbod .col { text-align: center; position: relative; margin-bottom: 25px; } .webshops .cols.webshop-aanbod .col h2 { position: absolute; top: 0; padding: 25px; color: #fff; } .webshops .cols.webshop-aanbod .col:first-child h2 { left: 0; right: 33%; text-align: left; } .webshops .cols.webshop-aanbod .col:last-child h2 { right: 0; left: 33%; text-align: right; } .webshops .cols.webshop-aanbod .col a { display: block; } .webshops .cols.webshop-aanbod .col:first-child img { border-radius: 15px 15px 0 15px; } .webshops .cols.webshop-aanbod .col:last-child img { border-radius: 15px 15px 15px 0; } @media only screen and (min-width: 768px) { .webshops .cols.webshop-aanbod { margin: 0 -25px; } .webshops .cols.webshop-aanbod .col { width: 50%; padding: 0 25px; } .webshops .cols.webshop-aanbod .col:first-child h2 { left: 25px; } .webshops .cols.webshop-aanbod .col:last-child h2 { right: 25px; } } @media only screen and (min-width: 768px) { .webshops .cols.webshop-aanbod .col:first-child p { text-align: right; } .webshops .cols.webshop-aanbod .col:last-child p { text-align: left; } } @media only screen and (min-width: 768px) { .webshops .cols.webshop-aanbod .col:first-child img { border-radius: 25px 25px 0 25px; } .webshops .cols.webshop-aanbod .col:last-child img { border-radius: 25px 25px 25px 0; } } /******************************************************************/ /* WEBSITES */ /******************************************************************/ .websites .intro-container { background: url(/Assets/_Analyz-it/Images/Websites/websites-intro.jpg) center center no-repeat; background-size: cover; } .websites .websites-container #websites-animated-imgs { display: none; } @media only screen and (min-width: 992px) { .websites .websites-container { display: flex; flex-wrap: wrap; align-items: flex-start; } .websites .websites-container #websites-animated-imgs { width: 45%; position: sticky; top: 22.5vh; display: block; } .websites .websites-container #websites-animated-imgs img { position: absolute; top: 0; left: 0; opacity: 0; transition: 0.7s; top: -5%; } .websites .websites-container #websites-animated-imgs img:first-child { position: relative; opacity: 1; } .websites .websites-container #websites-animated-imgs img.visible { opacity: 0.2; top: 0; } .websites .websites-container #websites-animated-imgs img.active { opacity: 1; } .websites .websites-container #websites-animated-imgs img:first-child.active { top: -25vh; } .websites .websites-container #websites-animated-imgs img:first-child.active.visible { top: 0; } .websites .websites-container #websites-teksten { width: 55%; padding-left: 40px; padding-top: 10vh; padding-bottom: 25vh; } .websites .websites-container #websites-teksten .txt { height: 50vh; } .websites .websites-container #websites-teksten .txt img { display: none; } } /******************************************************************/ /* ONLINE MARKETING */ /******************************************************************/ .online-marketing .intro-container { background: url(/Assets/_Analyz-it/Images/Online-marketing/online-marketing-intro.jpg) center center no-repeat; background-size: cover; } /******************************************************************/ /* CONTACT */ /******************************************************************/ .contact .intro-container { background: url(/Assets/_Analyz-it/Images/Contact/contact-intro.webp) center center no-repeat; background-size: cover; } .contact #acms-content-middle { padding-bottom: 0; } .responsive-maps { display: block; position: relative; padding-bottom: 50%; height: 0; overflow: hidden; margin: 0 auto; width: 100%; } .responsive-maps iframe, .responsive-maps object, .responsive-maps embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media only screen and (min-width: 992px) { .responsive-maps { padding-bottom: 20%; } } /******************************************************************/ /* OVER ONS */ /******************************************************************/ .over-analyz-it .intro-container { background: #efefef; justify-content: flex-start; } .over-analyz-it .intro-container > * { text-align: left; } .over-analyz-it .intro-container > * h1, .over-analyz-it .intro-container > * h5, .over-analyz-it .intro-container > * p, .over-analyz-it .intro-container > * a { color: #343434; text-shadow: none; } .over-analyz-it .intro-container > * h1 { color: #c71717; } .over-analyz-it #over-ait-container #anker-menu { display: none; } .over-analyz-it .ons-team-container { position: relative; padding: 25px 0 50px 0; align-items: center; } .over-analyz-it .ons-team-container:before { content: ''; background: #edeeef; position: absolute; left: 50%; right: 50%; top: 0; bottom: 0; transform: translateX(-50%); width: 100vw; z-index: -1; } .over-analyz-it .ons-team-container .cols .col { position: relative; cursor: crosshair; text-align: left; padding: 10px; } .over-analyz-it .ons-team-container .cols .col img { transition: 0.2s; } .over-analyz-it .ons-team-container .cols .col .content { position: absolute; bottom: 0; padding: 20px; padding-bottom: 30px; transition: 0.2s; } .over-analyz-it .ons-team-container .cols .col .content > * { line-height: 1; } .over-analyz-it .ons-team-container .cols .col .content > h5, .over-analyz-it .ons-team-container .cols .col .content p { color: #fff; font-weight: 900; margin: 0; text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } .over-analyz-it .ons-team-container .cols .col .content > h5 { width: 100%; } .over-analyz-it .ons-team-container .cols .col .content > p { font-weight: 300; } .over-analyz-it .klanten-container { padding: 25px 0; } @media only screen and (min-width: 560px) { .over-analyz-it .ons-team-container .cols .col { width: 50%; } } @media only screen and (min-width: 768px) { .over-analyz-it .klanten-container { padding: 30px 0; } } @media only screen and (min-width: 992px) { .over-analyz-it .intro-container { position: relative; overflow: hidden; } .over-analyz-it .intro-container img { position: absolute; right: 0; top: 0; width: 55%; height: 100%; object-fit: contain; z-index: 0; } .over-analyz-it .intro-container > * { padding-right: 50%; } .over-analyz-it .intro-container h1, .over-analyz-it .intro-container h5, .over-analyz-it .intro-container p { z-index: 1; position: relative; } .over-analyz-it #over-ait-container { display: flex; align-items: flex-start; } .over-analyz-it #over-ait-container #anker-menu { width: 25%; display: block; position: sticky; top: 98px; padding: 40px 0 40px 40px; } .over-analyz-it #over-ait-container #over-ait-content { width: 75%; } .over-analyz-it .ons-team-container:before { left: 66.666%; right: 66.666%; width: 96vw; } .over-analyz-it .ons-team-container .cols .col { width: 33.333%; padding: 10px; } .over-analyz-it .wat-container .cols { align-items: flex-start; } .has-navbar.over-analyz-it #over-ait-container #anker-menu { top: 144px; } } @media only screen and (min-width: 1025px) { .over-analyz-it .ons-team-container .cols .col .content { opacity: 0; } .over-analyz-it .ons-team-container .cols .col:hover img { filter: saturate(1.2) brightness(0.8); } .over-analyz-it .ons-team-container .cols .col:hover .content { opacity: 1; } } @media only screen and (min-width: 1200px) { .over-analyz-it .ons-team-container:before { width: 94vw; } } @media only screen and (min-width: 1680px) { .over-analyz-it .intro-container > * { padding-right: 35%; } } /******************************************************************/ /* INTERNET OPLOSSINGEN */ /******************************************************************/ .internet-oplossingen-txt { padding: 25px; background: #edeeef; text-align: center; } .internet-oplossingen-txt p { margin: 0; } .internet-oplossingen-txt.top { border-radius: 15px 15px 0 0; margin-bottom: 1px; } .internet-oplossingen-txt.top h1 { font-size: 100%; color: #343434; margin: 0; } .internet-oplossingen-txt.bottom { border-radius: 0 0 15px 15px; margin-top: 1px; } .internet-oplossing-container { padding-top: 33%; position: relative; transition: 0.25s; transition-timing-function: linear; overflow: hidden; border-radius: 0; margin: 1px 0; } .internet-oplossing-container .internet-oplossing { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.15); margin: 0; color: #fff; text-decoration: none; font-size: 150%; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5); } .internet-oplossing-container .internet-oplossing:hover { color: #fff; text-decoration: none; background: transparent; } .internet-oplossing-container.webapps { background: url(/Assets/_Analyz-it/Images/Webapplicaties/webapplicaties-intro.jpg) center center / cover no-repeat; } .internet-oplossing-container.online-marketing { background: url(/Assets/_Analyz-it/Images/Online-marketing/online-marketing-intro.jpg) center center / cover no-repeat; } .internet-oplossing-container.webshops { background: url(/Assets/_Analyz-it/Images/Webshops/webshops-intro.jpg) center center / cover no-repeat; } .internet-oplossing-container.websites { background: url(/Assets/_Analyz-it/Images/Websites/websites-intro.jpg) center center / cover no-repeat; } .internet-oplossing-container:hover { background-position: center 45%; } .internet-oplossing-container:hover a { padding-bottom: 10px; transform: scale(1.2); } @media only screen and (min-width: 576px) { .internet-oplossing-container { margin: 1px 0; } .internet-oplossing-container .internet-oplossing { font-size: 130%; } .internet-oplossing-container.webapps { margin-right: -24px; } .internet-oplossing-container.online-marketing { margin-left: -24px; } .internet-oplossing-container.webshops { margin-right: -24px; } .internet-oplossing-container.websites { margin-left: -24px; } .internet-oplossingen-txt { padding: 25px; } .internet-oplossingen-txt.top { border-radius: 15px 15px 0 0; } .internet-oplossingen-txt.bottom { border-radius: 0 0 15px 15px; } } @media only screen and (min-width: 768px) { .internet-oplossing-container { margin: 1px 0; } .internet-oplossing-container .internet-oplossing { font-size: 150%; } .internet-oplossing-container.webapps { margin-right: -29px; } .internet-oplossing-container.online-marketing { margin-left: -29px; } .internet-oplossing-container.webshops { margin-right: -29px; } .internet-oplossing-container.websites { margin-left: -29px; } .internet-oplossingen-txt { padding: 30px; } .internet-oplossingen-txt.top { border-radius: 25px 25px 0 0; } .internet-oplossingen-txt.bottom { border-radius: 0 0 25px 25px; } } @media only screen and (min-width: 992px) { .internet-oplossing-container { margin: 1px 0; } .internet-oplossing-container .internet-oplossing { font-size: 180%; } .internet-oplossing-container.webapps { margin-right: -39px; } .internet-oplossing-container.online-marketing { margin-left: -39px; } .internet-oplossing-container.webshops { margin-right: -39px; } .internet-oplossing-container.websites { margin-left: -39px; } .internet-oplossingen-txt { padding: 40px; } .internet-oplossingen-txt.top { border-radius: 50px 50px 0 0; } .internet-oplossingen-txt.bottom { border-radius: 0 0 50px 50px; } } @media only screen and (min-width: 1200px) { .internet-oplossing-container { margin: 1px 0; } .internet-oplossing-container .internet-oplossing { font-size: 200%; } .internet-oplossing-container.webapps { margin-right: -39px; } .internet-oplossing-container.online-marketing { margin-left: -39px; } .internet-oplossing-container.webshops { margin-right: -39px; } .internet-oplossing-container.websites { margin-left: -39px; } .internet-oplossingen-txt { padding: 40px; } .internet-oplossingen-txt.top { border-radius: 50px 50px 0 0; } .internet-oplossingen-txt.bottom { border-radius: 0 0 50px 50px; } } @media only screen and (min-width: 1380px) { /*#speciale-uitlijning{ position: absolute; top: 285px; left:0; right:0; margin: 0 auto; display: flex; justify-content: center; z-index: 1; .cta{ border-radius: 25px; width: 770px;} }*/ } /******************************************************************/ /* E-COMMERCE PLATFORM TABEL */ /******************************************************************/ #e-comTableContainer { margin-top: 20px; } #e-comTableContainer #itemsContainer { text-align: center; margin-bottom: 40px; } #e-comTableContainer #itemsContainer #items { font-size: 0; } #e-comTableContainer #itemsContainer #items .itemContainer { width: 100%; display: inline-block; } #e-comTableContainer #itemsContainer #items .itemContainer .item { position: relative; display: block; margin: 0; background: #bfbfbf; transition: 0.2s; } #e-comTableContainer #itemsContainer #items .itemContainer .item .titel { display: inline-block; width: 50%; height: auto; vertical-align: middle; font-size: 14px; } #e-comTableContainer #itemsContainer #items .itemContainer .item .titel h3 { color: white; margin: 0; margin-bottom: 5px; } #e-comTableContainer #itemsContainer #items .itemContainer .item .titel p { color: white; margin: 0; line-height: 1; font-size: 16px; } #e-comTableContainer #itemsContainer #items .itemContainer .item .titel span { font-size: 10px; display: block; } #e-comTableContainer #itemsContainer #items .itemContainer .item ul { margin: 0; padding: 0; } #e-comTableContainer #itemsContainer #items .itemContainer .item ul > li { margin: 0; padding: 0; background: none; position: static; } #e-comTableContainer #itemsContainer #items .itemContainer .item ul > li:before { display: none; } #e-comTableContainer #itemsContainer #items .itemContainer .item .opties { display: inline-block; width: 50%; padding: 20px; font-size: 14px; vertical-align: middle; background: #bfbfbf; } #e-comTableContainer #itemsContainer #items .itemContainer .item .knop { font-size: 14px; text-transform: uppercase; padding: 7px 0px; text-decoration: none; display: block; width: 75%; margin: 0 auto; margin-top: 10px; } #e-comTableContainer #itemsContainer #items .itemContainer .item .knop:hover { background: #c71717; } #e-comTableContainer #itemsContainer #items .itemContainer .item .knop:after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; } #e-comTableContainer #itemsContainer #items .itemContainer .item:hover { background: #c7c7c7; } #e-comTableContainer #itemsContainer #items .itemContainer._1 .item { background: #76736e; } #e-comTableContainer #itemsContainer #items .itemContainer._1 .item:hover { background: #5c5955; } #e-comTableContainer #itemsContainer #items .itemContainer._2 .item { background: #c71717; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); z-index: 2; position: relative; margin: 0 -10px; } #e-comTableContainer #itemsContainer #items .itemContainer._2 .item:hover { background: #991212; } #e-comTableContainer #itemsContainer #items .itemContainer._2 .item img.aanrader { position: absolute; left: inherit; top: -2px; right: -2px; width: auto; } #e-comTableContainer #itemsContainer #items .itemContainer._2 .item .opties { background: white; } #e-comTableContainer #itemsContainer #items .itemContainer._2 .item .basic { display: none; } #e-comTableContainer #itemsContainer #items .itemContainer._2 .item .advanced { font-weight: bold; } #e-comTableContainer #itemsContainer #items .itemContainer._3 .item { background: #b67f2c; } #e-comTableContainer #itemsContainer #items .itemContainer._3 .item:hover { background: #8d6222; } #e-comTableContainer #itemsContainer #items .itemContainer._3 .item .basic, #e-comTableContainer #itemsContainer #items .itemContainer._3 .item .advanced { display: none; } #e-comTableContainer #itemsContainer #items .itemContainer._3 .item .pro { font-weight: bold; } @media only screen and (min-width: 768px) { #e-comTableContainer #itemsContainer #items .itemContainer { width: 33.333333333%; } #e-comTableContainer #itemsContainer #items .itemContainer .item .titel { width: 100%; padding: 20px; } #e-comTableContainer #itemsContainer #items .itemContainer .item .opties { width: 100%; } #e-comTableContainer #itemsContainer #items .itemContainer .item:hover { background: #c7c7c7; } } @media only screen and (max-width: 480px) { #e-comTableContainer #itemsContainer #items .itemContainer { width: 100%; } #e-comTableContainer #itemsContainer #items .itemContainer .item .titel { width: 100%; padding: 20px; } #e-comTableContainer #itemsContainer #items .itemContainer .item .opties { width: 100%; } #e-comTableContainer #itemsContainer #items .itemContainer .item:hover { background: #c7c7c7; } } /******************************************************************/ /* OLD FAKSS MODEL */ /******************************************************************/ .fakssContainer { font-size: 0; max-width: 860px; margin: 0 auto; } .fakssContainer img { border-radius: 0; } .fakssContainer span { display: inline-block; vertical-align: top; } .fakssContainer span._0 { width: 100%; } .fakssContainer span._1 { width: 13.953488372%; } .fakssContainer span._2 { width: 16.279069767%; } .fakssContainer span._2 img { display: block; margin: 0 auto; } .fakssContainer span._3 { width: 10.465116279%; } .fakssContainer span._4 { width: 11.627906977%; } .fakssContainer span._5 { width: 11.627906977%; } .fakssContainer span._6 { width: 36.046511628%; } /******************************************************************/ /* SOCIAL MEDIA MARKETING */ /******************************************************************/ @keyframes media-animate { 0% { left: 50%; top: 50%; transform: translate(-50%, -50%); } 100% { transform: translate(0, 0); } } @keyframes media-icon-animate { 0% { width: 0; padding-top: 0; } 100% { width: 100%; padding-top: 100%; } } @keyframes media-gebruikers-opacity { 0% { opacity: 0; } 100% { opacity: 1; } } #social-media-marketing { position: relative; padding-top: 110%; margin-top: 25px; } #social-media-marketing:hover .media-platform { opacity: 0.5 !important; transition: 0.2s; } #social-media-marketing:hover a.media-platform:hover { opacity: 1 !important; z-index: 1; transition: 0.2s; } #social-media-marketing:hover a.media-platform:hover .icon { transform: scale(1.25); } #social-media-marketing .media-platform { text-align: center; position: absolute; display: flex; justify-content: center; align-items: center; left: 50%; top: 50%; transform: translate(-50%, -50%); animation: media-animate 1.2s forwards; } #social-media-marketing .media-platform .gebruikers { text-transform: uppercase; white-space: nowrap; position: absolute; left: 50%; transform: translateX(-50%); top: -26px; font-weight: 100; color: #000000; opacity: 0; animation: media-gebruikers-opacity 0.6s forwards; } #social-media-marketing .media-platform .gebruikers span { font-weight: 700; } #social-media-marketing .media-platform .icon { height: auto; background: red center center /60% no-repeat; border-radius: 50%; animation: media-icon-animate 0.6s forwards; transition: 0.4s; } #social-media-marketing .media-platform.facebook { width: 52.666666667%; left: 0; top: 0; } #social-media-marketing .media-platform.facebook .gebruikers { animation-delay: 0.2s; } #social-media-marketing .media-platform.facebook .icon { background-color: #4f61ae; background-image: url("/Assets/Images/Social/facebook.svg?fill=rgba(255,255,255,99)"); } #social-media-marketing .media-platform.youtube { width: 44.444444444%; left: 54%; top: 20%; } #social-media-marketing .media-platform.youtube .gebruikers { animation-delay: 0.4s; } #social-media-marketing .media-platform.youtube .icon { background-color: #f43c2f; background-image: url("/Assets/Images/Social/youtube.svg?fill=rgba(255,255,255,99)"); animation-delay: 0.2s; } #social-media-marketing .media-platform.instagram { width: 22.222222222%; left: 30%; top: 58%; } #social-media-marketing .media-platform.instagram .gebruikers { animation-delay: 0.6s; } #social-media-marketing .media-platform.instagram .icon { background-color: #000000; background-image: url("/Assets/Images/Social/instagram.svg?fill=rgba(255,255,255,99)"); animation-delay: 0.4s; } #social-media-marketing .media-platform.linkedin { width: 6.888888889%; left: 10%; top: 85%; } #social-media-marketing .media-platform.linkedin .gebruikers { animation-delay: 0.8s; } #social-media-marketing .media-platform.linkedin .icon { background-color: #2d73b0; background-image: url("/Assets/Images/Social/linkedin.svg?fill=rgba(255,255,255,99)"); animation-delay: 0.6s; } #social-media-marketing .media-platform.pinterest { width: 5.888888889%; left: 70%; top: 80%; } #social-media-marketing .media-platform.pinterest .gebruikers { animation-delay: 1s; } #social-media-marketing .media-platform.pinterest .icon { background-color: #cb2027; background-image: url("/Assets/Images/Social/pinterest.svg?fill=rgba(255,255,255,99)"); animation-delay: 0.8s; } body.facebook #social-media-marketing .media-platform { opacity: 0.5; } body.facebook #social-media-marketing .media-platform.facebook { opacity: 1; } body.youtube #social-media-marketing .media-platform { opacity: 0.5; } body.youtube #social-media-marketing .media-platform.youtube { opacity: 1; } body.instagram #social-media-marketing .media-platform { opacity: 0.5; } body.instagram #social-media-marketing .media-platform.instagram { opacity: 1; } body.linkedin #social-media-marketing .media-platform { opacity: 0.5; } body.linkedin #social-media-marketing .media-platform.linkedin { opacity: 1; } body.pinterest #social-media-marketing .media-platform { opacity: 0.5; } body.pinterest #social-media-marketing .media-platform.pinterest { opacity: 1; } /*Realisatie detail test*/ .real-detail-mockup { margin-bottom: 1em; } .real-detail-mockup .container { border-radius: 25px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 25px 0; background: #edeeef; } .real-detail-mockup .container .txt { width: 100%; padding: 25px; } .real-detail-mockup .container .txt p { margin-bottom: 1em; } .real-detail-mockup .container .txt *:not(a.btn-new) { color: #fff; } .real-detail-mockup .container .image { margin: -25px; margin-bottom: -37.5px; position: relative; } .real-detail-mockup .bottom { display: grid; align-items: center; justify-content: center; grid-template-columns: 1fr; } @media only screen and (min-width: 768px) { .real-detail-mockup .bottom { grid-template-columns: 1fr 1fr; } } .real-detail-mockup .bottom .review { margin-top: -50px; position: relative; } .real-detail-mockup .bottom .company { margin: 0 auto; max-width: 130px; } .real-detail-mockup .bottom .company img { width: 100%; height: 100%; } .real-detail-mockup-container { display: grid; grid-template-columns: 1fr; gap: 1em; } @media only screen and (min-width: 768px) { .real-detail-mockup-container { grid-template-columns: repeat(2, 1fr); } } .real-detail-mockup-container .real-detail-small-mockup { background: #edeeef; padding: 40px; border-radius: 40px; } .real-detail-mockup-container .real-detail-small-mockup .container { padding: 0; } .real-detail-mockup-container .real-detail-small-mockup .container .bottom { display: grid; grid-template-columns: 2fr 1fr; gap: 2em; align-items: center; } @media only screen and (min-width: 576px) { .real-detail-mockup .container .txt { padding: 25px; } .real-detail-mockup .container .image { margin: -25px; margin-bottom: -50px; } } @media only screen and (min-width: 768px) { .real-detail-mockup .container .txt { padding: 30px; } .real-detail-mockup .container .image { margin: -30px; margin-bottom: -75px; } } @media only screen and (min-width: 992px) { .real-detail-mockup .container .txt { width: 50%; padding: 40px; } .real-detail-mockup .container .image { width: 50%; margin: -40px; margin-bottom: -60px; } } @media only screen and (min-width: 1200px) { .real-detail-mockup .container .txt { padding: 40px; } .real-detail-mockup .container .image { margin: -40px; margin-bottom: -60px; } } /*Loading issue fix? */ section .container { max-width: 1380px; margin: 0 auto; position: relative; } /*--------------------------------------------------------------------------------*/ /* VARS */ /*--------------------------------------------------------------------------------*/ .todo { background: yellow; } /*--------------------------------------------------------------------------------*/ /* OBJECT */ /*--------------------------------------------------------------------------------*/ .module .btn-secondary { border-radius: 15px; border: 1px solid #111b1e; padding: 10px 14px; display: inline-block; text-decoration: none; color: #343434; line-height: 1; font-size: 0.85em; box-shadow: 0 0 0 0 #111b1e; } .module .btn-secondary:hover { text-decoration: none; box-shadow: 5px 5px 0 0 #111b1e; } .module .btn-secondary strong { color: #c71717; font-size: 1.45em; font-weight: 700; display: block; transition: 0.2s; } .grid-cols { display: grid; gap: 2em; } @media only screen and (min-width: 768px) { .grid-cols.cols2 { grid-template-columns: 1fr 1fr; } .grid-cols.cols3 { grid-template-columns: 1fr 1fr 1fr; } } .grey-box { background: #edeeef; padding: 25px; border-radius: 0 25px 25px 25px; } @media screen and (min-width: 768px) { .grey-box { padding: 40px; border-radius: 0 40px 40px 40px; } } /*--------------------------------------------------------------------------------*/ /* HEADER */ /*--------------------------------------------------------------------------------*/ header { background: #111b1e; transition: 0.2s; } body.scrolled header { border-radius: 50px 0 0 50px; margin-left: 25px; } @media only screen and (min-width: 576px) { body.scrolled header { margin-left: 12.5px; } } @media only screen and (min-width: 768px) { body.scrolled header { margin-left: 15px; } } @media only screen and (min-width: 992px) { body.scrolled header { margin-left: 20px; } } @media only screen and (min-width: 1200px) { body.scrolled header { margin-left: 20px; } } /*--------------------------------------------------------------------------------*/ /* NAV TOP */ /*--------------------------------------------------------------------------------*/ #nav_top { z-index: 10001; } #nav_top .wrapper { padding: 0 40px; } #nav_top .wrapper ul { margin-right: 0; gap: 2em; } #nav_top .wrapper ul a { color: #adbfc4; padding: 0; } /*--------------------------------------------------------------------------------*/ /* HEADER TEXT > + JS INSERT AFTER FUNCTION */ /*--------------------------------------------------------------------------------*/ .contact-link { position: relative; display: flex; align-items: center; gap: 1ch; } @media only screen and (min-width: 992px) { .contact-link:before { content: ''; width: 10px; height: 10px; background: #adbfc4; border: 1px solid #e8edef; border-radius: 50%; } .contact-link.ait-open:before { background: #98fc56; border: 1px solid #bcff90; } .contact-link.ait-open .contact-cta-links a.tel em.open { display: flex; } } .contact-cta-links { display: none; } .header-cta-links a.tel span { content: ''; display: block; width: 6px; height: 6px; background: #adbfc4; border: 1px solid #e8edef; border-radius: 50%; position: absolute; right: 10px; top: 10px; } .header-cta-links.ait-open a.tel span { background: #98fc56; border: 1px solid #bcff90; } @media only screen and (min-width: 992px) { #header_text .header-cta-links { display: none; } .contact-cta-links { top: 42px; background: #263133; border: 1px solid #c71717; border-radius: 30px 0 30px 30px; display: flex; flex-direction: column; padding: 25px; box-shadow: 0 0 0 #c71717; opacity: 0; pointer-events: none; position: absolute; right: 0; transition: 0.2s; } .contact-cta-links a { color: #adbfc4; text-decoration: none; display: flex; align-items: center; padding: 0; text-align: left !important; min-width: 26ch; } .contact-cta-links a:before { content: ''; min-width: 40px; height: 40px; } .contact-cta-links a.tel:before { background: url(/Assets/_Analyz-it/Images/NewAssets/header-icons/tel-icon.svg) center center / 50% no-repeat; } .contact-cta-links a.mail:before { background: url(/Assets/_Analyz-it/Images/NewAssets/header-icons/form-icon.svg) center center / 50% no-repeat; } .contact-cta-links a.at:before { background: url(/Assets/_Analyz-it/Images/NewAssets/header-icons/mail-icon.svg) center center / 50% no-repeat; } .contact-cta-links a.loc:before { background: url(/Assets/_Analyz-it/Images/NewAssets/header-icons/loc-icon.svg) center center / 50% no-repeat; } .contact-cta-links a.tel span { display: flex; flex-direction: column; } .contact-cta-links a.tel em { color: #adbfc4; font-size: 0.65em; display: flex; gap: 1ch; align-items: baseline; } .contact-cta-links a.tel em:before { content: ''; width: 6px; height: 6px; background: #adbfc4; border: 1px solid #e8edef; border-radius: 50%; } .contact-cta-links a.tel em.open { display: none; color: #98fc56; } .contact-cta-links a.tel em.open:before { background: #98fc56; border: 1px solid #bcff90; } .contact-cta-links a.tel em.closed { display: none; color: #adbfc4; } .contact-cta-links a.tel em.closed:before { background: #adbfc4; border: 1px solid #e8edef; } .contact-link:hover .contact-cta-links { opacity: 1; pointer-events: all; box-shadow: -10px 10px 0 #c71717, -3px 4px 0 #c71717, -4px 3px 0 #c71717; } } /*--------------------------------------------------------------------------------*/ /* NAV ROOT */ /*--------------------------------------------------------------------------------*/ @media only screen and (min-width: 992px) { #nav_root .wrapper ul { gap: 2em; } #nav_root a { font-size: 21px; padding: 1em 0; } #nav_root a:after { content: ''; position: absolute; bottom: -3px; background: #c71717; transition: 0.2s; inset: auto auto 0.75em 0; } #nav_root a:hover:after, #nav_root a.active:after { width: 4ch; } } /*--------------------------------------------------------------------------------*/ /* WIE V2 */ /*--------------------------------------------------------------------------------*/ #wie_v2 { background: #111b1e; border-radius: 0 0 0 clamp(1.5rem, 6vw, 9rem); padding: 20px 0 0 0; margin-bottom: 4em; position: relative; } #wie_v2 .gradients-container { overflow: hidden; border-radius: 0 0 0 clamp(1.5rem, 6vw, 9rem); } #wie_v2 .wrapper { grid-column: 1/-1; grid-row: 1/-1; display: grid; gap: 2em; grid-template-columns: 1fr; align-items: center; padding: 25px; position: relative; z-index: 1; } @media only screen and (min-width: 576px) { #wie_v2 .wrapper { padding: 25px; } } @media only screen and (min-width: 768px) { #wie_v2 .wrapper { padding: 30px; } } @media only screen and (min-width: 992px) { #wie_v2 .wrapper { padding: 40px; } } @media only screen and (min-width: 1200px) { #wie_v2 .wrapper { padding: 40px; } } @media only screen and (min-width: 900px) { #wie_v2 .wrapper { grid-template-columns: 4fr 3fr; } } #wie_v2 .wrapper .content { user-select: none; } @media only screen and (max-width: 991px) { } #wie_v2 .wrapper .content ::selection { background: rgba(199, 23, 23, 0.6) !important; } #wie_v2 .wrapper .content *:not(.btn-new) { color: #fff; } #wie_v2 .wrapper .content .cols { display: grid; align-items: start; gap: 2.5em; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } #wie_v2 .wrapper .content .cols .col { width: 100%; } #wie_v2 .wrapper figure { user-select: none; margin-bottom: -4em; aspect-ratio: 2/1; background: #111b1e; } #wie_v2 .wrapper figure img { object-fit: cover; width: 100%; height: 100%; border-radius: 0; } @media only screen and (max-width: 600px) { #wie_v2 .wrapper figure { display: none; } } @media only screen and (min-width: 900px) { #wie_v2 .wrapper figure { aspect-ratio: 1; } } #wie_v2 .wrapper .slider { position: relative; width: 100%; border-radius: clamp(1rem, 4vw, 5rem) 0 0 0; overflow: hidden; } #wie_v2 .wrapper .slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; } #wie_v2 .wrapper .slider img:first-child { display: block; } #canvas-container { position: absolute; z-index: 0; inset: 0; overflow: hidden; border-radius: 0 0 0 clamp(1.5rem, 6vw, 9rem); mix-blend-mode: difference; } .vanta-canvas { filter: sepia(1) saturate(30) blur(20px); opacity: 0.8; } /*--------------------------------------------------------------------------------*/ /* QUOTE */ /*--------------------------------------------------------------------------------*/ .quote { background: #edeeef; font-style: italic; font-size: clamp(1rem, 4vw, 1.5rem); display: block; padding: 25px 25px 25px 50px; border-radius: 50px 30px 30px 0; margin: 2em auto; position: relative; max-width: 800px; } @media only screen and (min-width: 992px) { .quote { padding: 40px 40px 40px 80px; border-radius: 50px 30px 30px 0; } } .quote:before { content: ''; background: #c71717 url(/Assets/_Analyz-it/Images/Site-graphics/quote-icon.svg) center center / 50% no-repeat; width: 80px; aspect-ratio: 1; display: block; border-radius: 50%; color: #fff; position: absolute; left: 0; top: 40px; transform: translateX(-50%); border: 7px solid #fff; } .quote strong { color: #c71717; font-size: 1rem; } /* OBJ */ .hexagon { display: block; --b: 1px; /* adjust to control the border */ --height: 200px; height: var(--height, auto); /* adjust to control the size */ aspect-ratio: cos(30deg); background: #c71717; clip-path: polygon(50% 0, -50% 50%, 50% 100%, 150% 50%, 50% 0, 50% var(--b), calc(100% - var(--b) * sin(60deg)) calc(25% + var(--b) * cos(60deg)), calc(100% - var(--b) * sin(60deg)) calc(75% - var(--b) * cos(60deg)), 50% calc(100% - var(--b)), calc(var(--b) * sin(60deg)) calc(75% - var(--b) * cos(60deg)), calc(var(--b) * sin(60deg)) calc(25% + var(--b) * cos(60deg)), 50% var(--b)); } .star-icon { --height: 200px; height: var(--height, auto); /* adjust to control the size */ display: block; background: url(/Assets/_Analyz-it/Images/NewAssets/ambassadeurs/star-icon.svg) center center /contain no-repeat; aspect-ratio: 1; } /*--------------------------------------------------------------------------------*/ /* ALGEMEEN */ /*--------------------------------------------------------------------------------*/ .parallax-icon { position: fixed; z-index: -1; transition: 1s ease-out; } .parallax-icon__master { --height: 45vw; left: -15vw; bottom: 15vh; } @media only screen and (orientation: landscape) { .parallax-icon__master { --height: 25vw; left: -15vw; bottom: -5vh; } } .parallax-icon__minion1 { --height: 25vw; right: -15vw; top: 35vh; } @media only screen and (orientation: landscape) { .parallax-icon__minion1 { --height: 15vw; right: 5vw; top: 15vh; } } .parallax-icon__minion2 { --height: 5vw; right: 5vw; top: 55vh; } @media only screen and (orientation: landscape) { .parallax-icon__minion2 { --height: 10vw; left: 35vw; top: 45vh; } } .parallax-icon__minion3 { --height: 15vw; left: 15vw; bottom: 15vh; } @media only screen and (orientation: landscape) { .parallax-icon__minion3 { --height: 5vw; left: 30vw; top: 25vh; } } .websites-v2 .parallax-icon, .websites .parallax-icon { background: url(/Assets/_Analyz-it/Images/NewAssets/websites-icon.svg) center center /contain no-repeat; } .websites-v2 .container, .websites .container, .online-marketing-v2 .container, .webapplicaties-v3 .container, .webapplicaties-op-maat-v2 .container, .webapplicaties-op-maat .container, .onze-ambassadeurs .container { max-width: 1280px; margin: 0 auto; position: relative; padding: 0 25px; } @media only screen and (min-width: 576px) { .websites-v2 .container, .websites .container, .online-marketing-v2 .container, .webapplicaties-v3 .container, .webapplicaties-op-maat-v2 .container, .webapplicaties-op-maat .container, .onze-ambassadeurs .container { padding: 0 25px; } } @media only screen and (min-width: 768px) { .websites-v2 .container, .websites .container, .online-marketing-v2 .container, .webapplicaties-v3 .container, .webapplicaties-op-maat-v2 .container, .webapplicaties-op-maat .container, .onze-ambassadeurs .container { padding: 0 30px; } } @media only screen and (min-width: 992px) { .websites-v2 .container, .websites .container, .online-marketing-v2 .container, .webapplicaties-v3 .container, .webapplicaties-op-maat-v2 .container, .webapplicaties-op-maat .container, .onze-ambassadeurs .container { padding: 0 40px; } } @media only screen and (min-width: 1200px) { .websites-v2 .container, .websites .container, .online-marketing-v2 .container, .webapplicaties-v3 .container, .webapplicaties-op-maat-v2 .container, .webapplicaties-op-maat .container, .onze-ambassadeurs .container { padding: 0 40px; } } .websites-v2 a:active:not(.no-scale), .websites a:active:not(.no-scale), .online-marketing-v2 a:active:not(.no-scale), .webapplicaties-v3 a:active:not(.no-scale), .webapplicaties-op-maat-v2 a:active:not(.no-scale), .webapplicaties-op-maat a:active:not(.no-scale), .onze-ambassadeurs a:active:not(.no-scale) { scale: 0.96; transition: 0.1s; } .websites-v2 h1, .websites h1, .online-marketing-v2 h1, .webapplicaties-v3 h1, .webapplicaties-op-maat-v2 h1, .webapplicaties-op-maat h1, .onze-ambassadeurs h1, .websites-v2 h3, .websites h3, .online-marketing-v2 h3, .webapplicaties-v3 h3, .webapplicaties-op-maat-v2 h3, .webapplicaties-op-maat h3, .onze-ambassadeurs h3 { font-weight: 100; } .websites-v2 h2, .websites h2, .online-marketing-v2 h2, .webapplicaties-v3 h2, .webapplicaties-op-maat-v2 h2, .webapplicaties-op-maat h2, .onze-ambassadeurs h2 { font-weight: 700; } .websites-v2 h4, .websites h4, .online-marketing-v2 h4, .webapplicaties-v3 h4, .webapplicaties-op-maat-v2 h4, .webapplicaties-op-maat h4, .onze-ambassadeurs h4, .websites-v2 h5, .websites h5, .online-marketing-v2 h5, .webapplicaties-v3 h5, .webapplicaties-op-maat-v2 h5, .webapplicaties-op-maat h5, .onze-ambassadeurs h5, .websites-v2 h6, .websites h6, .online-marketing-v2 h6, .webapplicaties-v3 h6, .webapplicaties-op-maat-v2 h6, .webapplicaties-op-maat h6, .onze-ambassadeurs h6 { font-weight: 300; } .websites-v2 h1, .websites h1, .online-marketing-v2 h1, .webapplicaties-v3 h1, .webapplicaties-op-maat-v2 h1, .webapplicaties-op-maat h1, .onze-ambassadeurs h1 { text-transform: uppercase; } .websites-v2 h3, .websites h3, .online-marketing-v2 h3, .webapplicaties-v3 h3, .webapplicaties-op-maat-v2 h3, .webapplicaties-op-maat h3, .onze-ambassadeurs h3 { font-size: 120%; } @media only screen and (min-width: 768px) { .websites-v2 h3, .websites h3, .online-marketing-v2 h3, .webapplicaties-v3 h3, .webapplicaties-op-maat-v2 h3, .webapplicaties-op-maat h3, .onze-ambassadeurs h3 { font-size: 150%; } } .websites-v2 h4, .websites h4, .online-marketing-v2 h4, .webapplicaties-v3 h4, .webapplicaties-op-maat-v2 h4, .webapplicaties-op-maat h4, .onze-ambassadeurs h4 { font-size: 115%; } @media only screen and (min-width: 768px) { .websites-v2 h4, .websites h4, .online-marketing-v2 h4, .webapplicaties-v3 h4, .webapplicaties-op-maat-v2 h4, .webapplicaties-op-maat h4, .onze-ambassadeurs h4 { font-size: 125%; } } .websites-v2 strong, .websites strong, .online-marketing-v2 strong, .webapplicaties-v3 strong, .webapplicaties-op-maat-v2 strong, .webapplicaties-op-maat strong, .onze-ambassadeurs strong { font-weight: 900; } @media only screen and (min-width: 1200px) { p, li, ul, ol { font-size: 17px; } } a.btn-primary { display: inline-flex; padding: 12px 20px; line-height: 1; background: #c71717; border: 1px solid #000000; border-radius: 0 10px 10px 10px; text-decoration: none; font-weight: 900; box-shadow: 5px 5px 0 #000000; position: relative; color: #fff; font-size: 1.1em; } a.btn-primary:after { content: ''; position: absolute; inset: -1px -6px -6px -1px; transition: 0.2s; } a.btn-primary:hover { box-shadow: -5px -5px 0 #c71717; background: #000000; transform: translate(5px, 5px); text-decoration: none; color: #fff; } a.btn-primary:hover:after { inset: -7px -1px -1px -7px; } a.btn-new { display: inline-flex; padding: 10px 20px; line-height: 1; background: white; border: 1px solid #c71717; border-radius: 0 10px 10px 10px; text-decoration: none; font-weight: 900; box-shadow: 5px 5px 0 #c71717; user-select: none; position: relative; } a.btn-new.glow { box-shadow: 5px 5px 0 #c71717, 5px 5px 20px rgba(255, 255, 255, 0.5); } a.btn-new.glow:hover { box-shadow: -5px -5px 0 #000000, -5px -5px 20px rgba(255, 255, 255, 0.5); } a.btn-new:after { content: ''; position: absolute; inset: -1px -6px -6px -1px; transition: 0.2s; } a.btn-new:hover { box-shadow: -5px -5px 0 #000000; transform: translate(5px, 5px); text-decoration: none; border-color: #000000; } a.btn-new:hover:after { inset: -7px -1px -1px -7px; } a.btn-alt { text-decoration: none; color: #343434; border: 1px solid #343434; border-radius: 0 6px 6px 6px; padding: 3px 5px; font-size: 75%; display: inline-flex; align-items: center; gap: 5px; background: #fff; } @media only screen and (min-width: 992px) { a.btn-alt { gap: 10px; padding: 5px 10px; } } a.btn-alt:before { content: '+'; color: #c71717; font-size: 2em; line-height: 0; font-weight: 100; } @media only screen and (min-width: 1200px) { a.btn-alt:before { font-size: 2.5em; } } a.btn-alt:hover { border-color: #c71717; background: #c71717; color: #fff; text-decoration: none; } a.btn-alt:hover:before { color: #fff; } /*--------------------------------------------------------------------------------*/ /* PRELOADING IMAGE ON PAGES */ /*--------------------------------------------------------------------------------*/ body.contact::after { position: absolute; width: 0; height: 0; overflow: hidden; z-index: -1; content: url(/Assets/_Analyz-it/Images/Contact/contact-intro.webp); } /*--------------------------------------------------------------------------------*/ /* AANBOD INTRO V3 */ /*--------------------------------------------------------------------------------*/ .intro-v3 { padding: 1em 0; } @media only screen and (min-width: 768px) { .intro-v3 { padding: 2em 0; } } @media only screen and (min-width: 1200px) { .intro-v3 { padding: 3em 0; } } .intro-v3 .container { display: flex; flex-direction: column; gap: 2em; } @media only screen and (min-width: 992px) { .intro-v3 .container { display: grid; grid-template-columns: 2fr 3fr; align-items: center; } } @media only screen and (min-width: 992px) { .intro-v3.ambassadeurs .container { grid-template-columns: 1fr 1fr; } } .intro-v3 .content { position: relative; margin-left: 50px; } @media only screen and (min-width: 1600px) { .intro-v3 .content { margin-left: 0; } } .intro-v3 h1 { color: #343434; font-size: clamp(1.5rem, 0.6383rem + 3.8298vw, 3.75rem); display: flex; align-items: center; gap: 1em; } .intro-v3 h2 { color: #343434; font-size: clamp(1.125rem, 0.8036rem + 1.4286vw, 1.875rem); font-weight: 300; } .intro-v3 h2 strong { color: #c71717; display: block; } .intro-v3.webapp figure { position: relative; width: 100%; } @media only screen and (min-width: 1600px) { .intro-v3.webapp figure { width: 120%; } } .intro-v3.webapp figure img { transform: translateX(2%); } .intro-v3.webapp figure:after { content: ''; display: block; width: 60%; height: 60%; position: absolute; inset: 20% auto auto 0; z-index: -1; background: #c71717; border-radius: 30px; align-content: center; } .intro-v3 .webapp-icon { position: absolute; right: calc(100% + 1ch); width: 50px; height: 50px; background: url(/Assets/_Analyz-it/Images/NewAssets/webapp-icon/webapp-icon.svg) center center /contain no-repeat; animation: name-of-animation 10s infinite; display: flex; align-items: center; justify-content: center; } .intro-v3 .webapp-icon:after { content: ''; display: block; --b: 1px; /* adjust to control the border */ --height: 200px; height: var(--height, auto); /* adjust to control the size */ aspect-ratio: cos(30deg); background: #c71717; clip-path: polygon(50% 0, -50% 50%, 50% 100%, 150% 50%, 50% 0, 50% var(--b), calc(100% - var(--b) * sin(60deg)) calc(25% + var(--b) * cos(60deg)), calc(100% - var(--b) * sin(60deg)) calc(75% - var(--b) * cos(60deg)), 50% calc(100% - var(--b)), calc(var(--b) * sin(60deg)) calc(75% - var(--b) * cos(60deg)), calc(var(--b) * sin(60deg)) calc(25% + var(--b) * cos(60deg)), 50% var(--b)); --height: calc(100% + 8px); position: absolute; } @media only screen and (min-width: 1200px) { .intro-v3 .webapp-icon { width: 100px; height: 100px; } } .intro-v3 .heart-icon { position: absolute; right: calc(100% + 1ch); width: 50px; height: 50px; background: url(/Assets/_Analyz-it/Images/NewAssets/ambassadeurs/ambassadeurs-analyz-it.svg) center center /contain no-repeat; display: flex; align-items: center; justify-content: center; } .intro-v3 .heart-icon:after { content: ''; --height: calc(100% + 8px); position: absolute; } @media only screen and (min-width: 1200px) { .intro-v3 .heart-icon { width: 100px; height: 100px; } } /*--------------------------------------------------------------------------------*/ /* AANBOD INTRO */ /*--------------------------------------------------------------------------------*/ body.webapplicaties-op-maat::after { position: absolute; width: 0; height: 0; overflow: hidden; z-index: -1; content: url(/Assets/_Analyz-it/Images/NewAssets/webapp-icon/webapp-icon.svg) url(/Assets/_Analyz-it/Images/NewAssets/webapp-icon/webapp-icon-fb.svg) url(/Assets/_Analyz-it/Images/NewAssets/webapp-icon/webapp-icon-rt.svg) url(/Assets/_Analyz-it/Images/NewAssets/webapp-icon/webapp-icon-bt.svg) url(/Assets/_Analyz-it/Images/NewAssets/webapp-icon/webapp-icon-lb.svg) url(/Assets/_Analyz-it/Images/NewAssets/webapp-icon/webapp-icon-rb.svg) url(/Assets/_Analyz-it/Images/NewAssets/webapp-icon/webapp-icon-ft.svg) url(/Assets/_Analyz-it/Images/NewAssets/webapp-icon/webapp-icon-lt.svg) url(/Assets/_Analyz-it/Images/NewAssets/development-banner1.webp?v=3) url(/Assets/_Analyz-it/Images/NewAssets/toepassingen/e-commerce-Analyz-it-Oresto.webp) url(/Assets/_Analyz-it/Images/NewAssets/toepassingen/ERP-systemen-Analyz-it-Contactlenzen-Vanschoenwinkel.webp) url(/Assets/_Analyz-it/Images/NewAssets/toepassingen/CRM-systemen-Analyz-it-Pharma-Force.webp) url(/Assets/_Analyz-it/Images/NewAssets/toepassingen/online-databanken-analyz-it-SKP.webp) url(/Assets/_Analyz-it/Images/NewAssets/toepassingen/Mobile-webapps-Analyz-it-Gymna.webp); } @keyframes name-of-animation { 0% { background: url(/Assets/_Analyz-it/Images/NewAssets/webapp-icon/webapp-icon.svg) center center /contain no-repeat; } 5% { background: url(/Assets/_Analyz-it/Images/NewAssets/webapp-icon/webapp-icon.svg) center center /contain no-repeat; } 6% { background: url(/Assets/_Analyz-it/Images/NewAssets/webapp-icon/webapp-icon-fb.svg) center center /contain no-repeat; } 7% { background: url(/Assets/_Analyz-it/Images/NewAssets/webapp-icon/webapp-icon.svg) center center /contain no-repeat; } 41% { background: url(/Assets/_Analyz-it/Images/NewAssets/webapp-icon/webapp-icon.svg) center center /contain no-repeat; } 42% { background: url(/Assets/_Analyz-it/Images/NewAssets/webapp-icon/webapp-icon-rt.svg) center center /contain no-repeat; } 43% { background: url(/Assets/_Analyz-it/Images/NewAssets/webapp-icon/webapp-icon-bt.svg) center center /contain no-repeat; } 44% { background: url(/Assets/_Analyz-it/Images/NewAssets/webapp-icon/webapp-icon-lb.svg) center center /contain no-repeat; } 45% { background: url(/Assets/_Analyz-it/Images/NewAssets/webapp-icon/webapp-icon.svg) center center /contain no-repeat; } 89% { background: url(/Assets/_Analyz-it/Images/NewAssets/webapp-icon/webapp-icon.svg) center center /contain no-repeat; } 90% { background: url(/Assets/_Analyz-it/Images/NewAssets/webapp-icon/webapp-icon-rb.svg) center center /contain no-repeat; } 91% { background: url(/Assets/_Analyz-it/Images/NewAssets/webapp-icon/webapp-icon.svg) center center /contain no-repeat; } 97% { background: url(/Assets/_Analyz-it/Images/NewAssets/webapp-icon/webapp-icon.svg) center center /contain no-repeat; } 98% { background: url(/Assets/_Analyz-it/Images/NewAssets/webapp-icon/webapp-icon-ft.svg) center center /contain no-repeat; } 99% { background: url(/Assets/_Analyz-it/Images/NewAssets/webapp-icon/webapp-icon-lt.svg) center center /contain no-repeat; } 100% { background: url(/Assets/_Analyz-it/Images/NewAssets/webapp-icon/webapp-icon.svg) center center /contain no-repeat; } } .intro { padding: 1em 0; } @media only screen and (min-width: 768px) { .intro { padding: 2em 0; } } @media only screen and (min-width: 1200px) { .intro { padding: 3em 0; } } .intro .container { display: flex; flex-direction: column; } @media only screen and (min-width: 992px) { .intro .container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; } } .intro h1 { color: #343434; } @media only screen and (min-width: 992px) { .intro h1 { grid-column: 1/5; grid-row: 1/2; } } .intro .webapp-icon { position: absolute; left: 0; top: 25px; width: 50px; height: 50px; background: url(/Assets/_Analyz-it/Images/NewAssets/webapp-icon/webapp-icon.svg) center center /contain no-repeat; animation: name-of-animation 10s infinite; } @media only screen and (min-width: 992px) { .intro .webapp-icon { width: 100px; height: 100px; top: 35px; } } .intro .websites-icon { position: absolute; left: 0; top: 0; transform: translateY(50%); width: 50px; height: 50px; background: url(/Assets/_Analyz-it/Images/NewAssets/websites-icon.svg) center center /contain no-repeat; } @media only screen and (min-width: 992px) { .intro .websites-icon { width: 100px; height: 100px; transform: translateY(30%); } } .intro .red-block { background: #c71717; border-radius: 0 50px 50px 0; align-content: center; } @media only screen and (min-width: 992px) { .intro .red-block { border-radius: 0 30px 30px 30px; grid-column: 1/4; grid-row: 2/7; } } @media only screen and (min-width: 1200px) { .intro .red-block { border-radius: 0 30px 50px 50px; grid-column: 1/4; grid-row: 2/7; } } .intro .red-block__content { max-width: 70ch; padding: 25px 50px 37.5px 50px; } @media only screen and (min-width: 576px) { .intro .red-block__content { padding: 25px 50px 50px 50px; } } @media only screen and (min-width: 768px) { .intro .red-block__content { padding: 30px 60px 60px 60px; } } @media only screen and (min-width: 992px) { .intro .red-block__content { padding: 40px 80px 80px 80px; } } @media only screen and (min-width: 1200px) { .intro .red-block__content { padding: 40px 80px; } } .intro .red-block h2 { color: #fff; max-width: 20ch; } .intro .red-block h2 strong { display: block; } .intro .content { padding: 25px 0; } @media only screen and (min-width: 576px) { .intro .content { padding: 50px 25px 50px 50px; } } @media only screen and (min-width: 768px) { .intro .content { padding: 60px 30px 60px 60px; } } @media only screen and (min-width: 992px) { .intro .content { padding: 40px 80px; grid-column: 1/3; grid-row: 7/8; } } .intro .aside { order: 1; margin: 0 0 0 -25px; position: relative; } @media only screen and (min-width: 576px) { .intro .aside { margin: 0 0 0 -25px; } } @media only screen and (min-width: 768px) { .intro .aside { margin: 0 0 0 -30px; } } @media only screen and (min-width: 992px) { .intro .aside { margin: 0; order: initial; grid-column: 3/5; grid-row: 3/8; } } @media only screen and (min-width: 1200px) { } .intro .aside img { border-radius: 0 50px 50px 0; } @media only screen and (min-width: 1200px) { .intro .aside img { border-radius: 50px 50px 50px 0; } } .intro .aside:before { content: ''; border: 3px solid black; border-width: 3px 3px 0 0; border-radius: 0 80px 0 0; width: 60px; height: 60px; display: block; position: absolute; right: -15px; top: -15px; } @media only screen and (min-width: 1200px) { .intro .aside:before { border-radius: 0 80px 0 0; width: 100px; height: 100px; right: -30px; top: -30px; } } /*USP Teksten*/ .aside-voordelen .USPS { margin: 2em 0; display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; padding-left: 25px; } @media only screen and (min-width: 992px) { .aside-voordelen .USPS { margin: 0; } } .aside-voordelen .USP-modals { opacity: 0; pointer-events: none; transition: 0.2s; } .aside-voordelen .USP-modals .USP-modal__btn { width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; text-decoration: none; color: #fff; position: relative; } .aside-voordelen .USP-modals .USP-modal__btn:before { content: ''; border: 1px solid #fff; border-width: 2px 2px 0 0; position: absolute; inset: 0; display: block; rotate: 45deg; border-radius: 3px; } .aside-voordelen .USP-modals .USP-modal__btn.prev:before { scale: -1; } .aside-voordelen .USP-modals.active { position: fixed; inset: 0; z-index: 9001; background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(15px); display: flex; justify-content: center; align-items: center; opacity: 1; pointer-events: all; padding: 25px; } .aside-voordelen .USP-modals .USP-modal { display: none; position: relative; background: #fff; width: 70ch; padding: 40px; border-radius: 30px 30px 0 30px; } .aside-voordelen .USP-modals .USP-modal p { margin: 0; } .aside-voordelen .USP-modals .USP-modal .close-icon { position: absolute; top: -30px; right: 0; width: 24px; height: 24px; display: grid; justify-content: center; align-items: center; grid-template-columns: 1fr; transform: rotateZ(45deg); cursor: pointer; } .aside-voordelen .USP-modals .USP-modal .close-icon span { width: 100%; height: 2px; border-radius: 2px; background: #fff; grid-column: 1/-1; grid-row: 1/-1; pointer-events: none; } .aside-voordelen .USP-modals .USP-modal .close-icon span:last-child { transform: rotateZ(90deg); } .aside-voordelen .USP-modals .USP-modal.active { display: block; } /*--------------------------------------------------------------------------------*/ /* WEBSITES USPS V2 */ /*--------------------------------------------------------------------------------*/ .websites-v2.intro-v2 { margin: 3em auto; } .websites-v2.intro-v2.demonstratie-page { margin: 0; } .websites-v2.intro-v2.demonstratie-page .container { grid-template-columns: 5fr 2fr; } .websites-v2.intro-v2 .container { display: grid; grid-template-columns: 1fr; align-items: center; justify-content: center; padding: 0 25px; } @media only screen and (min-width: 992px) { .websites-v2.intro-v2 .container { grid-template-columns: 3fr 2fr; } } .websites-v2.intro-v2 .container .rolling-banner { padding: 2em calc(25px + 2em) calc(25px + 2em) 2em; background: #edeeef; border-radius: 30px 30px 0 30px; overflow: hidden; } .websites-v2.intro-v2 .container figure { margin: -25px -25px 0 25px; position: relative; z-index: 1; border-radius: 30px 30px 30px 0; overflow: hidden; line-height: 0; } @media only screen and (min-width: 992px) { .websites-v2.intro-v2 .container figure { margin-left: -40px; } } .websites-v2.intro-v2 h1 { font-size: clamp(1em, 1vw, 2em); font-weight: 900; text-transform: uppercase; color: #c71717; margin: 0; } .websites-v2.intro-v2 .kernwaardes { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; } .websites-v2.intro-v2 h2 { grid-row: 1/-1; grid-column: 1/-1; font-size: clamp(2em,3vw,5em); font-weight: 900; text-transform: uppercase; line-height: 1; transition: filter 0.1s 0.2s, transform 1s ease-in-out, scale 0.2s 0.2s ease-in-out; transform-origin: right; } .websites-v2.intro-v2 h2 em { position: relative; font-style: normal; transition: 0.2s 1.5s; -webkit-box-decoration-break: clone; box-decoration-break: clone; display: inline-flex; } .websites-v2.intro-v2 h2 em:after { margin: 0 -10px; content: ''; position: absolute; left: 0; top: 0; z-index: -1; background: #c71717; height: 100%; border-radius: 7px; width: 0; display: block; transition: 0.2s 1.5s; } .websites-v2.intro-v2 h2 em.highlight-animation { color: #fff; } .websites-v2.intro-v2 h2 em.highlight-animation:after { width: calc(100% + 20px); } /*--------------------------------------------------------------------------------*/ /* WEBAPP TOEPASSINGEN */ /*--------------------------------------------------------------------------------*/ .toepassingen { overflow: hidden; } .toepassingen .container { background: #edeeef; border-radius: 50px 0 0 50px; padding: 25px; } .toepassingen .container:before { content: ''; position: absolute; z-index: -1; width: 50vw; top: 0; height: 100%; background: #edeeef; left: 50%; } @media only screen and (min-width: 576px) { .toepassingen .container { padding: 25px; } } @media only screen and (min-width: 768px) { .toepassingen .container { padding: 30px; } } @media only screen and (min-width: 992px) { .toepassingen .container { padding: 40px; } } @media only screen and (min-width: 1200px) { .toepassingen .container { padding: 40px; } } .toepassingen .container p { margin: 0; } .toepassingen__cards { display: grid; gap: 2em 3em; margin-top: 2em; } @media only screen and (min-width: 1200px) { .toepassingen__cards { grid-template-columns: repeat(3, 1fr); } } .toepassingen__cards__card.card__databanken h4:before { background: url(/Assets/_Analyz-it/Images/NewAssets/diensten-icons/Online-databases-icon.svg) center center /contain no-repeat; } .toepassingen__cards__card.card__CRM h4:before { background: url(/Assets/_Analyz-it/Images/NewAssets/diensten-icons/CRM-systemen-icon.svg) center center /contain no-repeat; } .toepassingen__cards__card.card__ERP h4:before { background: url(/Assets/_Analyz-it/Images/NewAssets/diensten-icons/ERP-systemen-icon.svg) center center /contain no-repeat; } .toepassingen__cards__card.card__mobile h4:before { background: url(/Assets/_Analyz-it/Images/NewAssets/diensten-icons/Webapps-icon.svg) center center /contain no-repeat; } .toepassingen__cards__card.card__e-com h4:before { background: url(/Assets/_Analyz-it/Images/NewAssets/diensten-icons/E-commerce-icon.svg) center center /contain no-repeat; } .toepassingen__cards__card.card__ux-ui h4:before { background: url(/Assets/_Analyz-it/Images/NewAssets/diensten-icons/ux-ui-icon.svg) center center /contain no-repeat; } .toepassingen__cards__card.card__CTA { align-self: center; border: 1px solid #c71717; border-radius: 0 30px 30px 30px; padding: 40px; } .toepassingen__cards__card .card__top { position: relative; z-index: 1; transition: 2s; } .toepassingen__cards__card .card__top:before { content: ''; background: #c71717; border-radius: 0 30px 30px 30px; position: absolute; z-index: -1; inset: 0 15% 30% 0; display: block; transition: 4s; } @media only screen and (min-width: 992px) { .toepassingen__cards__card .card__top:before { inset: 0 30% 30% 0; } } .toepassingen__cards__card .card__top .card__title { display: flex; align-items: center; } .toepassingen__cards__card .card__top img { position: relative; pointer-events: none; transition: 2s; transform-origin: bottom center; } .toepassingen__cards__card .card__top:hover { transform: translateY(5px); } .toepassingen__cards__card .card__top:hover img { transform: translateY(-5px) scale(1.02); } .toepassingen__cards__card .card__top:hover:before { background-color: #ff8f1b; } .toepassingen__cards__card .card__top h4 { padding: 12.5px 25px 12.5px 10px; width: 85%; font-size: 120%; color: #fff; margin: 0; display: flex; align-items: center; font-weight: 700; gap: 10px; } @media only screen and (min-width: 992px) { .toepassingen__cards__card .card__top h4 { padding: 15px 30px; width: 70%; } } .toepassingen__cards__card .card__top h4:before { content: ''; width: 60px; min-width: 60px; height: 65px; display: block; filter: invert(1); } .toepassingen__cards__card .card__top a { width: 40px; margin-left: -20px; height: 35px; border: 1px solid #c71717; border-radius: 0 10px 10px 10px; display: flex; background: #fff; align-items: center; justify-content: center; box-shadow: 5px 5px 0 #000000; } .toepassingen__cards__card .card__top a:hover { box-shadow: -5px -5px 0 #c71717; } @media only screen and (min-width: 992px) { .toepassingen__cards__card .card__top a { width: 40px; margin-left: -25px; height: 38px; } } .toepassingen__cards__card .card__top a:after { content: ''; width: 16px; height: 16px; border: 3px solid #c71717; border-width: 0 3px 3px 0; display: block; transform: translateX(-25%) rotateZ(-45deg); } .toepassingen__cards__card .card__top a:before { content: ''; position: absolute; inset: 0; } /*--------------------------------------------------------------------------------*/ /* WEBAPP OVERZICHT */ /*--------------------------------------------------------------------------------*/ .overzicht { background: rgba(255, 255, 255, 0.8); } @media only screen and (min-width: 992px) { .overzicht { background: transparent; } } .overzicht__intro .intro-content { margin: 0 auto; text-align: center; padding: 25px; } .overzicht__intro .intro-content p { margin: 0; } @media only screen and (min-width: 576px) { .overzicht__intro .intro-content { padding: 25px; } } @media only screen and (min-width: 768px) { .overzicht__intro .intro-content { padding: 30px; } } @media only screen and (min-width: 992px) { .overzicht__intro .intro-content { padding: 40px; } } @media only screen and (min-width: 1200px) { .overzicht__intro .intro-content { padding: 40px; } } .overzicht__intro:after { content: ''; width: 1px; height: 30px; background: #c71717; display: block; margin: 0 auto; } @media only screen and (min-width: 1200px) { .overzicht__cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 8px; } } @media only screen and (min-width: 1200px) { .overzicht__cards:before { content: ''; width: calc( 80% + 8px); margin: 0 auto; height: 1px; background: #c71717; display: block; grid-column: 1/-1; grid-row: 1/-1; } .overzicht__cards:after { content: ''; width: calc( 80% + 8px); margin: 0 auto; height: 1px; background: #c7c7c7; display: block; grid-column: 1/-1; } } .overzicht__cards__card { background: rgba(255, 255, 255, 0.8); } @media only screen and (min-width: 1200px) { .overzicht__cards__card { display: grid; grid-template-rows: subgrid; grid-row: 2/5; } } .overzicht__cards__card:before { content: ''; background: #c71717; width: 1px; height: 30px; display: block; margin: 0 auto; grid-row: 1/2; } @media only screen and (min-width: 1200px) { .overzicht__cards__card:after { content: ''; background: #c7c7c7; width: 1px; height: 30px; display: block; margin: 0 auto; grid-row: 3/4; } } .overzicht__cards__card .card-content { text-align: center; border: 1px solid #c7c7c7; border-radius: 30px 30px 0 30px; position: relative; overflow: hidden; grid-row: 2/3; transition: 0.2s; padding: 25px; } @media only screen and (min-width: 576px) { .overzicht__cards__card .card-content { padding: 12.5px 12.5px 25px 12.5px; } } @media only screen and (min-width: 768px) { .overzicht__cards__card .card-content { padding: 15px 15px 30px 15px; } } @media only screen and (min-width: 992px) { .overzicht__cards__card .card-content { padding: 20px 20px 40px 20px; } } @media only screen and (min-width: 1200px) { .overzicht__cards__card .card-content { padding: 20px 20px 40px 20px; } } .overzicht__cards__card .card-content img { border-radius: 0; max-height: 60px; opacity: 0.5; transition: 0.2s; } .overzicht__cards__card .card-content p { margin: 0; } .overzicht__cards__card .card-content a { position: absolute; inset: 0; } .overzicht__cards__card .card-content:active { scale: 0.98; } .overzicht__cards__card .card-content:before { content: '+'; color: #fff; font-size: 40px; line-height: 1; position: absolute; z-index: 1; right: 15px; bottom: 10px; color: #c71717; } .overzicht__cards__card .card-content:after { content: ''; width: 60px; height: 20px; background: #c71717; display: block; position: absolute; right: -10px; bottom: 0; border-radius: 10px; transform: rotateZ(45deg) translateX(100%); } @media only screen and (max-width: 1199px) { .overzicht__cards__card .card-content { border-color: #c71717; } .overzicht__cards__card .card-content:before { color: #fff; } .overzicht__cards__card .card-content:after { transform: rotateZ(45deg) translate(0); border-radius: 30px; height: 40px; } } .overzicht__cards__card .card-content:hover { border-color: #c71717; } .overzicht__cards__card .card-content:hover img { opacity: 1; transform: translateY(-5px); } .overzicht__cards__card .card-content:hover:before { transform: rotateZ(90deg) translate(0); color: #fff; } .overzicht__cards__card .card-content:hover:after { transform: rotateZ(45deg) translate(0); border-radius: 30px; height: 40px; } .overzicht__cards__card .card-content:before, .overzicht__cards__card .card-content:after { transition: 0.2s; } .overzicht__conclusion .conclusion-content { max-width: 60ch; margin: 0 auto; padding: 40px; text-align: center; } .overzicht__conclusion:before { content: ''; width: 1px; height: 30px; background: #c71717; display: block; margin: 0 auto; } @media only screen and (min-width: 1200px) { .overzicht__conclusion:before { background: #c7c7c7; } } /*--------------------------------------------------------------------------------*/ /* UX/UI page */ /*--------------------------------------------------------------------------------*/ .float-wrapper { display: inline-block; animation: floatSubtly 7s ease-in-out infinite; } .ux-ui-result-block .float-wrapper { animation: floatSubtly 7s 1s ease-in-out infinite; } @keyframes floatSubtly { 0% { transform: translateY(0); } 50% { transform: translateY(-6px); } 100% { transform: translateY(0); } } body.ux-ui-webdesign h2, body.ux-ui-front-end-development h2, body.ux-ui-en-front-end-development h2 { font-weight: 300; } body.ux-ui-webdesign .uxui-section, body.ux-ui-front-end-development .uxui-section, body.ux-ui-en-front-end-development .uxui-section { display: grid; gap: 1em; grid-template-columns: 1fr 1fr; padding: 3em 0; align-items: start; } body.ux-ui-webdesign .uxui-section img, body.ux-ui-front-end-development .uxui-section img, body.ux-ui-en-front-end-development .uxui-section img { border-radius: 0; max-width: 50%; } @media only screen and (min-width: 768px) { body.ux-ui-webdesign .uxui-section img, body.ux-ui-front-end-development .uxui-section img, body.ux-ui-en-front-end-development .uxui-section img { max-width: 100%; } } body.ux-ui-webdesign .uxui-section .ux-ui-block, body.ux-ui-front-end-development .uxui-section .ux-ui-block, body.ux-ui-en-front-end-development .uxui-section .ux-ui-block { display: grid; gap: 1em; align-items: start; } @media only screen and (min-width: 768px) { body.ux-ui-webdesign .uxui-section .ux-ui-block, body.ux-ui-front-end-development .uxui-section .ux-ui-block, body.ux-ui-en-front-end-development .uxui-section .ux-ui-block { grid-template-columns: max-content 1fr; } } body.ux-ui-webdesign .uxui-section .ux-ui-block h2, body.ux-ui-front-end-development .uxui-section .ux-ui-block h2, body.ux-ui-en-front-end-development .uxui-section .ux-ui-block h2 { max-width: 10ch; } body.ux-ui-webdesign .uxui-section .ux-ui-block h2 span, body.ux-ui-front-end-development .uxui-section .ux-ui-block h2 span, body.ux-ui-en-front-end-development .uxui-section .ux-ui-block h2 span { color: #c71717; } body.ux-ui-webdesign .uxui-section .ux-ui-result-block, body.ux-ui-front-end-development .uxui-section .ux-ui-result-block, body.ux-ui-en-front-end-development .uxui-section .ux-ui-result-block { grid-column: 1/-1; text-align: center; justify-self: center; max-width: 60ch; } body.ux-ui-webdesign .uxui-section .ux-ui-result-block p, body.ux-ui-front-end-development .uxui-section .ux-ui-result-block p, body.ux-ui-en-front-end-development .uxui-section .ux-ui-result-block p { font-size: 1.2em; margin-top: 1em; } body.ux-ui-webdesign .uxui-section .ux-ui-result-block .lines, body.ux-ui-front-end-development .uxui-section .ux-ui-result-block .lines, body.ux-ui-en-front-end-development .uxui-section .ux-ui-result-block .lines { position: relative; } body.ux-ui-webdesign .uxui-section .ux-ui-result-block .lines:before, body.ux-ui-front-end-development .uxui-section .ux-ui-result-block .lines:before, body.ux-ui-en-front-end-development .uxui-section .ux-ui-result-block .lines:before { content: ''; border: 1px solid #111b1e; border-width: 0 1px 1px 1px; border-radius: 0 0 30px 30px; position: absolute; inset: 0 0 50% 0; z-index: 0; } body.ux-ui-webdesign .uxui-section .ux-ui-result-block .lines img, body.ux-ui-front-end-development .uxui-section .ux-ui-result-block .lines img, body.ux-ui-en-front-end-development .uxui-section .ux-ui-result-block .lines img { position: relative; z-index: 1; filter: drop-shadow(10px 10px 0px black); } body.ux-ui-webdesign section.design-naar-uitvoering, body.ux-ui-front-end-development section.design-naar-uitvoering, body.ux-ui-en-front-end-development section.design-naar-uitvoering { counter-reset: section; padding: 2em 0; } body.ux-ui-webdesign section.design-naar-uitvoering .stappen, body.ux-ui-front-end-development section.design-naar-uitvoering .stappen, body.ux-ui-en-front-end-development section.design-naar-uitvoering .stappen { display: grid; gap: 30px; padding-bottom: 10ch; } body.ux-ui-webdesign section.design-naar-uitvoering .stap.col, body.ux-ui-front-end-development section.design-naar-uitvoering .stap.col, body.ux-ui-en-front-end-development section.design-naar-uitvoering .stap.col { display: grid; grid-template-columns: 1fr; gap: 2em; align-items: center; } @media only screen and (min-width: 768px) { body.ux-ui-webdesign section.design-naar-uitvoering .stap.col, body.ux-ui-front-end-development section.design-naar-uitvoering .stap.col, body.ux-ui-en-front-end-development section.design-naar-uitvoering .stap.col { grid-template-columns: max-content 1fr; } } body.ux-ui-webdesign section.design-naar-uitvoering .stap.col:nth-child(even), body.ux-ui-front-end-development section.design-naar-uitvoering .stap.col:nth-child(even), body.ux-ui-en-front-end-development section.design-naar-uitvoering .stap.col:nth-child(even) { justify-self: end; } body.ux-ui-webdesign section.design-naar-uitvoering .stap.col span, body.ux-ui-front-end-development section.design-naar-uitvoering .stap.col span, body.ux-ui-en-front-end-development section.design-naar-uitvoering .stap.col span { overflow: hidden; background: #edeeef; border-radius: 50%; display: flex; align-items: end; justify-content: end; width: 100%; max-width: 120px; aspect-ratio: 1; color: #fff; } @media only screen and (min-width: 768px) { body.ux-ui-webdesign section.design-naar-uitvoering .stap.col span, body.ux-ui-front-end-development section.design-naar-uitvoering .stap.col span, body.ux-ui-en-front-end-development section.design-naar-uitvoering .stap.col span { max-width: 220px; } } body.ux-ui-webdesign section.design-naar-uitvoering .stap.col span:before, body.ux-ui-front-end-development section.design-naar-uitvoering .stap.col span:before, body.ux-ui-en-front-end-development section.design-naar-uitvoering .stap.col span:before { counter-increment: section; content: counter(section); font-size: 10em; line-height: 1; margin-bottom: -0.25em; filter: drop-shadow(5px 5px 0 #c71717); font-weight: 900; overflow: hidden; } @media only screen and (min-width: 768px) { body.ux-ui-webdesign section.design-naar-uitvoering .stap.col span:before, body.ux-ui-front-end-development section.design-naar-uitvoering .stap.col span:before, body.ux-ui-en-front-end-development section.design-naar-uitvoering .stap.col span:before { font-size: 16em; } } body.ux-ui-webdesign section.design-naar-uitvoering .stap.col h3, body.ux-ui-front-end-development section.design-naar-uitvoering .stap.col h3, body.ux-ui-en-front-end-development section.design-naar-uitvoering .stap.col h3 { margin-top: 0.4em; font-size: clamp(1.125rem, 0.9814rem + 0.6383vw, 1.5rem); } body.ux-ui-webdesign section.design-naar-uitvoering .stap.col .content, body.ux-ui-front-end-development section.design-naar-uitvoering .stap.col .content, body.ux-ui-en-front-end-development section.design-naar-uitvoering .stap.col .content { display: block; } @media only screen and (min-width: 768px) { body.ux-ui-webdesign section.design-naar-uitvoering .stap.col .content, body.ux-ui-front-end-development section.design-naar-uitvoering .stap.col .content, body.ux-ui-en-front-end-development section.design-naar-uitvoering .stap.col .content { max-width: 36ch; } } body.ux-ui-webdesign .uxui-realisaties .realisatie, body.ux-ui-front-end-development .uxui-realisaties .realisatie, body.ux-ui-en-front-end-development .uxui-realisaties .realisatie { display: grid; align-items: start; grid-template-columns: clamp(30px, 100%, 60px) 1fr; } @media only screen and (min-width: 768px) { body.ux-ui-webdesign .uxui-realisaties .realisatie, body.ux-ui-front-end-development .uxui-realisaties .realisatie, body.ux-ui-en-front-end-development .uxui-realisaties .realisatie { grid-template-columns: clamp(80px, 100%, 150px) 1fr; } } body.ux-ui-webdesign .uxui-realisaties .realisatie:nth-child(even), body.ux-ui-front-end-development .uxui-realisaties .realisatie:nth-child(even), body.ux-ui-en-front-end-development .uxui-realisaties .realisatie:nth-child(even) { grid-template-columns: 1fr clamp(30px, 100%, 60px); } @media only screen and (min-width: 768px) { body.ux-ui-webdesign .uxui-realisaties .realisatie:nth-child(even), body.ux-ui-front-end-development .uxui-realisaties .realisatie:nth-child(even), body.ux-ui-en-front-end-development .uxui-realisaties .realisatie:nth-child(even) { grid-template-columns: 1fr clamp(80px, 100%, 150px); } } body.ux-ui-webdesign .uxui-realisaties .realisatie:nth-child(even) .real-logo, body.ux-ui-front-end-development .uxui-realisaties .realisatie:nth-child(even) .real-logo, body.ux-ui-en-front-end-development .uxui-realisaties .realisatie:nth-child(even) .real-logo { grid-column: 2/3; grid-row: 1; } body.ux-ui-webdesign .uxui-realisaties .realisatie:nth-child(even) .real-img, body.ux-ui-front-end-development .uxui-realisaties .realisatie:nth-child(even) .real-img, body.ux-ui-en-front-end-development .uxui-realisaties .realisatie:nth-child(even) .real-img { grid-column: 1/2; grid-row: 1; border-radius: 40px 0 40px 40px; } body.ux-ui-webdesign .uxui-realisaties .realisatie .real-logo, body.ux-ui-front-end-development .uxui-realisaties .realisatie .real-logo, body.ux-ui-en-front-end-development .uxui-realisaties .realisatie .real-logo { border-radius: 0; } body.ux-ui-webdesign .uxui-realisaties .realisatie .real-img, body.ux-ui-front-end-development .uxui-realisaties .realisatie .real-img, body.ux-ui-en-front-end-development .uxui-realisaties .realisatie .real-img { box-shadow: 0 0 50px rgba(17, 27, 30, 0.25); border-radius: 0 25px 40px 40px; transform: translateY(calc(10% + var(--MegaMenu-offset, 0))); } /*--------------------------------------------------------------------------------*/ /* COMPLEX BLOCK */ /*--------------------------------------------------------------------------------*/ .complex-block { overflow: hidden; background: rgba(255, 255, 255, 0.8); } @media only screen and (min-width: 992px) { .complex-block { padding: 4em; background: transparent; } } .complex-block .container { display: grid; grid-template-columns: repeat(8, 1fr); margin: 0 auto; align-items: start; gap: 40px; padding: 0; } .complex-block .circle-wrap { aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.1); display: flex; justify-content: center; align-items: center; text-align: center; position: relative; z-index: 1; max-width: 400px; padding: 25px; margin: 40px; } @media only screen and (min-width: 1200px) { .complex-block .circle-wrap { padding: 40px; max-width: 100%; } } .complex-block .circle-wrap .planet { content: ''; position: absolute; z-index: -1; width: 100%; aspect-ratio: 1; background: url(/Assets/_Analyz-it/Images/NewAssets/circle-part1.svg) center center /contain no-repeat; left: 0; top: 0; scale: 1.16; rotate: -70deg; transition: 4s 0.15s; } .complex-block .circle-wrap .planet:nth-child(2) { rotate: -30deg; background: url(/Assets/_Analyz-it/Images/NewAssets/circle-part2.svg) center center /contain no-repeat; } .complex-block .circle-wrap h3 { margin: 0; } .complex-block .heavy-block { background: #343434; position: relative; align-content: end; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; padding: 25px; } @media only screen and (min-width: 1200px) { .complex-block .heavy-block { padding: 40px; } } .complex-block .heavy-block:before { content: ''; position: absolute; z-index: -1; width: 50vw; top: 0; height: 100%; background: #343434; } .complex-block .heavy-block *:not(.btn-new) { color: #fff; } .complex-block .heavy-block .content h2 { margin: 0; } .complex-block .heavy-block.heavy-info .content:before { content: ''; color: #fff; position: absolute; top: -5%; left: -15vw; background: url(/Assets/_Analyz-it/Images/NewAssets/i-icon.svg) center center no-repeat; aspect-ratio: 1/5; height: 62%; left: -4ch; } @media only screen and (min-width: 992px) { .complex-block .heavy-block.heavy-info .content:before { left: -5vw; height: 150%; } } .complex-block .heavy-block.heavy-question .content:before { content: ''; color: #fff; position: absolute; top: -2%; right: -35vw; background: url(/Assets/_Analyz-it/Images/NewAssets/q-icon.svg) center center no-repeat; aspect-ratio: 2/3; height: 62%; left: -11ch; } @media only screen and (min-width: 992px) { .complex-block .heavy-block.heavy-question .content:before { top: -22%; right: -15vw; height: 135%; } } .complex-block .accentuated-block { background: #c71717; padding: 40px; border-radius: 0 50px 50px 50px; position: relative; } .complex-block .accentuated-block * { color: #fff; } .complex-block .accentuated-block h4 { margin: 0; } .complex-block.complex-left .circle-wrap { grid-column: 1/-1; grid-row: 1/3; } @media only screen and (min-width: 992px) { .complex-block.complex-left .circle-wrap { grid-column: 1/4; grid-row: 1/3; } } .complex-block.complex-left .heavy-block { grid-column: 1/9; grid-row: 2/5; overflow: hidden; } @media only screen and (min-width: 992px) { .complex-block.complex-left .heavy-block { grid-column: 1/7; grid-row: 2/5; border-radius: 0 50px 50px 0; overflow: visible; } .complex-block.complex-left .heavy-block:before { right: 50%; } } .complex-block.complex-left .heavy-block.heavy-info .content:before { left: -4ch; } @media only screen and (min-width: 992px) { .complex-block.complex-left .heavy-block.heavy-info .content:before { left: -5vw; } } .complex-block.complex-left .heavy-block.heavy-question .content:before { left: -11ch; } @media only screen and (min-width: 992px) { .complex-block.complex-left .heavy-block.heavy-question .content:before { left: -15vw; } } .complex-block.complex-left .content { grid-column: 1/9; grid-row: 2/3; } @media only screen and (min-width: 992px) { .complex-block.complex-left .content { grid-column: 3/7; } } .complex-block.complex-left .accentuated-block { grid-column: 1/8; grid-row: 4/6; } @media only screen and (min-width: 992px) { .complex-block.complex-left .accentuated-block { grid-column: 6/9; grid-row: 4/6; } } .complex-block.complex-left .normal-content { grid-column: 1/9; grid-row: 6/7; padding: 0 50px; } @media only screen and (min-width: 576px) { .complex-block.complex-left .normal-content { padding: 0 50px; } } @media only screen and (min-width: 768px) { .complex-block.complex-left .normal-content { padding: 0 60px; } } @media only screen and (min-width: 992px) { .complex-block.complex-left .normal-content { padding: 0 80px; } } @media only screen and (min-width: 1200px) { .complex-block.complex-left .normal-content { grid-column: 3/6; grid-row: 5/6; padding: 0; } } .complex-block.complex-right .circle-wrap { grid-column: 1/-1; grid-row: 1/3; } @media only screen and (min-width: 992px) { .complex-block.complex-right .circle-wrap { grid-column: 6/9; grid-row: 1/3; } } .complex-block.complex-right .heavy-block { grid-column: 1/9; grid-row: 2/5; overflow: hidden; } @media only screen and (min-width: 992px) { .complex-block.complex-right .heavy-block { grid-column: 3/9; grid-row: 2/5; border-radius: 50px 0 0 50px; overflow: visible; } .complex-block.complex-right .heavy-block:before { left: 50%; } } .complex-block.complex-right .heavy-block.heavy-info .content:before { right: -15vw; } @media only screen and (min-width: 992px) { .complex-block.complex-right .heavy-block.heavy-info .content:before { right: -5vw; } } .complex-block.complex-right .heavy-block.heavy-question .content:before { right: -35vw; } @media only screen and (min-width: 992px) { .complex-block.complex-right .heavy-block.heavy-question .content:before { right: -15vw; } } .complex-block.complex-right .content { grid-column: 1/7; grid-row: 2/3; } @media only screen and (min-width: 992px) { .complex-block.complex-right .content { grid-column: 2/6; grid-row: 2/3; text-align: right; } } .complex-block.complex-right .accentuated-block { grid-column: 1/8; grid-row: 4/6; } @media only screen and (min-width: 992px) { .complex-block.complex-right .accentuated-block { grid-column: 1/4; grid-row: 4/6; } } .complex-block.complex-right .normal-content { grid-column: 1/9; grid-row: 6/7; padding: 0 25px; } @media only screen and (min-width: 992px) { .complex-block.complex-right .normal-content { grid-column: 4/8; grid-row: 5/6; text-align: right; padding: 0; } } /*--------------------------------------------------------------------------------*/ /* Custom css Google review */ /*--------------------------------------------------------------------------------*/ .google-review { aspect-ratio: 1; padding: 0 15px; padding-top: 1em; background: url(/Assets/_Analyz-it/Images/NewAssets/ambassadeurs/star-review-bg.svg) center center /contain no-repeat; color: #343434; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; filter: drop-shadow(0 0 40px rgba(0, 0, 0, 0.2)); } .stars { position: relative; font-size: 30px; color: #ccc; /* lege sterren kleur */ user-select: none; display: inline-block; } .stars::before { content: '★★★★★'; letter-spacing: 3px; } .stars::after { content: '★★★★★'; color: #f4b400; /* gele sterren */ position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; width: 0; /* word via JS aangepast */ letter-spacing: 3px; pointer-events: none; } .score-text { margin-top: 8px; font-weight: 600; font-family: Arial, sans-serif; font-size: 16px; color: #202124; } .company-sector { font-size: 75%; } .powered-by { font-size: 75%; opacity: 0.75; } /*--------------------------------------------------------------------------------*/ /* Ambassadeur list review itm */ /*--------------------------------------------------------------------------------*/ .acms-column-volledigebreedte:has(.review-item) { display: block; position: relative; width: 100%; } .acms-column-volledigebreedte:has(.review-item) .controls-row { width: 100%; } .acms-column-volledigebreedte:has(.review-item) .controls-row .module.html { display: flex; } .acms-column-volledigebreedte:has(.review-item) .controls-row:nth-child(even) .module.html { justify-content: end; } @media only screen and (min-width: 768px) { .acms-column-volledigebreedte:has(.review-item) .controls-row { width: 50%; } .acms-column-volledigebreedte:has(.review-item) .controls-row:nth-child(even) .module.html { justify-content: center; } .acms-column-volledigebreedte:has(.review-item) .controls-row .module.html { justify-content: center; } } .module .review-item { position: relative; max-width: max-content; padding: 25px; } @media only screen and (min-width: 992px) { .module .review-item { padding: 40px; } } .module .review-item:before { content: ''; padding: 25px; border-radius: 0 31.25px 31.25px 31.25px; inset: 20% 20% 0 0; position: absolute; z-index: -1; background: #edeeef; } @media only screen and (min-width: 992px) { .module .review-item:before { padding: 40px; border-radius: 0 50px 50px 50px; } } .module .review-item figure { max-width: max-content; position: relative; padding: 25px; border-radius: 31.25px 0 31.25px 31.25px; box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1); background: white; } @media only screen and (min-width: 992px) { .module .review-item figure { padding: 40px; border-radius: 50px 0 50px 50px; } } .module .review-item figure img { border-radius: 0; } .module .review-item figure .klant-logo { position: absolute; max-width: 33%; max-height: 80px; right: 25px; } @media only screen and (min-width: 992px) { .module .review-item figure .klant-logo { right: 40px; } } .module .review-item a.btn-new { transform: translateY(50%); } .module .review-item.cta-item .cta { max-width: 460px; } /*--------------------------------------------------------------------------------*/ /* CLOSING BLOCK */ /*--------------------------------------------------------------------------------*/ .closing-block { overflow: hidden; background: rgba(255, 255, 255, 0.8); } @media only screen and (min-width: 992px) { .closing-block { background: transparent; } } .closing-block .container.grey-bg { position: relative; background: #edeeef; border-radius: 0 50px 50px 0; padding: 25px; } .closing-block .container.grey-bg:before { content: ''; position: absolute; z-index: -1; width: 50vw; top: 0; height: 100%; background: #edeeef; right: 50%; } @media only screen and (min-width: 576px) { .closing-block .container.grey-bg { padding: 25px; } } @media only screen and (min-width: 768px) { .closing-block .container.grey-bg { padding: 30px; } } @media only screen and (min-width: 992px) { .closing-block .container.grey-bg { padding: 40px; } } @media only screen and (min-width: 1200px) { .closing-block .container.grey-bg { padding: 40px; } } .closing-block { counter-reset: section; padding: 3em 0; } .closing-block .stappen { display: grid; grid-template-columns: repeat(1, 1fr); gap: 30px; text-align: left; padding-bottom: 10ch; } @media only screen and (min-width: 1200px) { .closing-block .stappen { grid-template-columns: repeat(5, 1fr); } } .closing-block .col span { overflow: hidden; background: #fff; border-radius: 50%; display: flex; align-items: end; justify-content: end; width: 57%; max-width: 200px; aspect-ratio: 1; color: #edeeef; } .closing-block .col span:before { counter-increment: section; content: counter(section); font-size: 11em; line-height: 1; margin-bottom: -0.15em; filter: drop-shadow(5px 5px 0 #c71717); font-weight: 900; overflow: hidden; } .closing-block .col h3 { margin-top: 0.4em; font-size: clamp(1.125rem, 0.9814rem + 0.6383vw, 1.5rem); } .closing-block .outro { max-width: 60ch; margin-top: -10ch; text-align: center; background: #c71717; border-radius: 50px 50px 0 50px; padding: 25px; } @media only screen and (min-width: 576px) { .closing-block .outro { padding: 25px; } } @media only screen and (min-width: 768px) { .closing-block .outro { padding: 30px; } } @media only screen and (min-width: 992px) { .closing-block .outro { padding: 40px; } } @media only screen and (min-width: 1200px) { .closing-block .outro { padding: 40px; } } @media only screen and (min-width: 1380px) { .closing-block .outro { margin-left: -10ch; } } .closing-block .outro > *:not(.btn-new) { color: #fff; } .closing-block .outro > *:not(.btn-new) h5 p { font-size: 1rem; } /*--------------------------------------------------------------------------------*/ /* REALISATIES SITES */ /*--------------------------------------------------------------------------------*/ .realisaties-websites { padding: 40px 0; } .realisaties-websites .container { display: grid; gap: 4em; } .realisaties-websites h2 { color: #c71717; } .realisaties-websites h2 strong { color: #343434; } .realisaties-websites .accentuated-block { background: #c71717; padding: 25px; border-radius: 0 30px 30px 30px; position: relative; margin-top: -40px; } @media only screen and (min-width: 992px) { .realisaties-websites .accentuated-block { padding: 40px; margin-top: 0; } } .realisaties-websites .accentuated-block * { color: #fff; } .realisaties-websites .accentuated-block h4 { margin: 0; } .realisaties-websites .accentuated-block ul.features { margin: 0; padding: 0; } .realisaties-websites .accentuated-block ul.features li { display: flex; align-items: baseline; gap: 10px; padding: 0; } .realisaties-websites .accentuated-block ul.features li:before { background: url(/Assets/_Analyz-it/Images/NewAssets/checked-icon.svg) center center /contain no-repeat; width: 21px; min-width: 21px; height: 15px; margin: 0; border: none; border-radius: 0; position: static; } .realisaties-websites .grey-block { background: #edeeef; padding: 40px; } .realisaties-websites .real-figure { max-width: 400px; } @media only screen and (min-width: 992px) { .realisaties-websites .real-figure { max-width: 100%; } } .realisaties-websites .real-figure img { box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1); object-fit: cover; height: 100%; object-position: top; aspect-ratio: 0.75; } .realisaties-websites .realisatie { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-areas: "title title title title title title title title" "image image image image image image image image" ". . accent accent accent accent accent accent" "grey grey grey grey grey grey . ."; } @media only screen and (min-width: 992px) { .realisaties-websites .realisatie { grid-template-areas: "title title title title title title title title" "image image image accent accent . . ." "image image image grey grey grey . ." "image image image . . . . ."; } } .realisaties-websites .realisatie h2 { grid-area: title; } .realisaties-websites .realisatie .accentuated-block { grid-area: accent; transform: translate(25px, 25px); } .realisaties-websites .realisatie .grey-block { grid-area: grey; border-radius: 50px 0 30px 50px; } @media only screen and (min-width: 992px) { .realisaties-websites .realisatie .grey-block { border-radius: 0 50px 0 0; } } .realisaties-websites .realisatie .real-figure { grid-area: image; position: relative; } .realisaties-websites .realisatie .real-figure img { border-radius: 30px 30px 0 30px; } .realisaties-websites .realisatie .real-figure span { display: block; width: 40px; height: 50%; transform: translateX(-50%); position: absolute; bottom: 10%; left: 0; z-index: -1; border-radius: 40px; } .realisaties-websites .realisatie:nth-child(even) { grid-template-areas: "title title title title title title title title" "image image image image image image image image" ". . accent accent accent accent accent accent" "grey grey grey grey grey grey . ."; } @media only screen and (min-width: 992px) { .realisaties-websites .realisatie:nth-child(even) { margin-top: -2em; grid-template-areas: ". . . . . title title title" ". . . . . image image image" ". . grey grey grey image image image" ". . . accent accent image image image" ". . . . . image image image"; } } @media only screen and (min-width: 992px) { .realisaties-websites .realisatie:nth-child(even) h2 { text-align: right; } } .realisaties-websites .realisatie:nth-child(even) .grey-block { border-radius: 50px 0 30px 50px; } @media only screen and (min-width: 992px) { .realisaties-websites .realisatie:nth-child(even) .accentuated-block { transform: translate(0, -25px); border-radius: 0 0 0 50px; } } .realisaties-websites .realisatie:nth-child(even) .real-figure span { left: auto; right: 0; transform: translateX(50%); } /*--------------------------------------------------------------------------------*/ /* OVER AIT */ /*--------------------------------------------------------------------------------*/ .over-ait { background: #edeeef; padding: 25px 0; overflow: hidden; } @media only screen and (min-width: 1200px) { .over-ait { background: linear-gradient(transparent 20%, #edeeef 20%, #edeeef 80%, transparent 80%); padding: 40px 0; position: relative; } .over-ait:after { content: ''; background: #edeeef; position: absolute; top: 50%; right: 0; display: block; height: 60%; width: 50vw; transform: translateY(-50%) perspective(25vw) rotatey(-10deg); transform-origin: left; } } .over-ait .container { position: relative; z-index: 1; } @media only screen and (min-width: 1200px) { .over-ait .container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr auto calc(11vw + 40px); } } .over-ait__img { position: relative; z-index: 1; } @media only screen and (min-width: 1200px) { .over-ait__img { grid-column: 1/3; grid-row: 1/-1; right: 0; display: flex; justify-content: end; } } @media only screen and (min-width: 1200px) { .over-ait__img img { max-width: inherit; width: 65vw; } } .over-ait__cards { height: 3em; } @media only screen and (min-width: 768px) { .over-ait__cards { height: auto; } } @media only screen and (min-width: 1200px) { .over-ait__cards { display: grid; align-items: end; grid-column: 3/4; grid-row: 1/2; } } .over-ait__cards__card { position: absolute; transition: filter 0.1s 0.2s, transform 1s ease-in-out, scale 0.2s 0.2s ease-in-out; left: 25px; } @media only screen and (min-width: 768px) { .over-ait__cards__card { left: 50%; } } @media only screen and (min-width: 1200px) { .over-ait__cards__card { left: inherit; } } .over-ait__cards__card h3 { max-width: 17ch; } .over-ait__cta { text-align: center; } @media only screen and (min-width: 768px) { .over-ait__cta { max-width: calc( 50% - 20px); } } @media only screen and (min-width: 1200px) { .over-ait__cta { max-width: inherit; grid-column: 3/4; grid-row: 2/3; text-align: left; } } /*--------------------------------------------------------------------------------*/ /* REALISATIES */ /*--------------------------------------------------------------------------------*/ .module.html section.realisaties { padding-top: 25px; background: rgba(255, 255, 255, 0.8); } @media only screen and (min-width: 576px) { .module.html section.realisaties { padding-top: 25px; } } @media only screen and (min-width: 768px) { .module.html section.realisaties { padding-top: 30px; } } @media only screen and (min-width: 992px) { .module.html section.realisaties { padding-top: 40px; background: transparent; } } @media only screen and (min-width: 1200px) { .module.html section.realisaties { padding: 0; } } .module.html section.realisaties .realisaties__bottom { display: flex; flex-wrap: wrap; justify-content: center; } .module.html section.realisaties .realisaties__cards { display: grid; grid-template-columns: 1fr; gap: 0 60px; } @media only screen and (min-width: 1200px) { .module.html section.realisaties .realisaties__cards { grid-template-columns: repeat(2, 1fr); } } .module.html section.realisaties .realisaties__cards__card { display: grid; grid-template-rows: subgrid; grid-row: span 2; margin-bottom: 2em; } .module.html section.realisaties .realisaties__cards__card .card__quote { display: flex; flex-direction: column; gap: 1em; position: relative; font-size: 105%; margin: 0; border: 1px solid #c7c7c7; background: rgba(255, 255, 255, 0.8); border-radius: 30px 30px 30px 0; padding: 37.5px; } @media only screen and (min-width: 576px) { .module.html section.realisaties .realisaties__cards__card .card__quote { padding: 32.5px 37.5px; } } @media only screen and (min-width: 768px) { .module.html section.realisaties .realisaties__cards__card .card__quote { padding: 39px 45px; } } @media only screen and (min-width: 992px) { .module.html section.realisaties .realisaties__cards__card .card__quote { padding: 52px 60px; font-size: 120%; } } @media only screen and (min-width: 1200px) { .module.html section.realisaties .realisaties__cards__card .card__quote { padding: 52px 60px; } } .module.html section.realisaties .realisaties__cards__card .card__quote:before { content: "\201C"; line-height: 1; font-size: 7em; color: #c71717; min-width: 40px; display: inline-block; font-weight: 900; position: absolute; left: -0.125em; top: -0.125em; } @media only screen and (min-width: 576px) { .module.html section.realisaties .realisaties__cards__card .card__quote:before { font-size: 9em; } } .module.html section.realisaties .realisaties__cards__card .card__quote:after { content: ""; position: absolute; left: -1px; top: 100%; background: #fff; border: 1px solid #c7c7c7; border-width: 0 0 1px 1px; display: block; width: 70px; height: 50px; transform-origin: left bottom; transform: rotate(-45deg) skew(-45deg, 0deg); } .module.html section.realisaties .realisaties__cards__card .card__quote footer { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; } .module.html section.realisaties .realisaties__cards__card .card__quote footer small { color: #c71717; display: block; } .module.html section.realisaties .realisaties__cards__card .card__quote footer small.author { font-weight: 700; } .module.html section.realisaties .realisaties__cards__card .card__quote footer img { max-width: 200px; max-height: 3em; border-radius: 0; } .module.html section.realisaties .realisaties__cards__card .card__quote a { width: 40px; margin-left: -20px; height: 35px; border: 1px solid #c71717; border-radius: 0 10px 10px 10px; display: flex; background: #fff; align-items: center; justify-content: center; box-shadow: 5px 5px 0 #000000; position: absolute; right: 37.5px; bottom: 0; margin-bottom: -17px; } .module.html section.realisaties .realisaties__cards__card .card__quote a:hover { box-shadow: -5px -5px 0 #c71717; transform: translate(5px, 5px); } @media only screen and (min-width: 992px) { .module.html section.realisaties .realisaties__cards__card .card__quote a { width: 55px; margin-left: -28px; height: 50px; } } .module.html section.realisaties .realisaties__cards__card .card__quote a:after { content: ''; width: 16px; height: 16px; border: 3px solid #c71717; border-width: 0 3px 3px 0; display: block; transform: translateX(-25%) rotateZ(-45deg); } .module.html section.realisaties .realisaties__cards__card .card__quote a:before { content: ''; position: absolute; inset: 0; } .module.html section.realisaties .realisaties__cards__card .card__meerwaarde { padding: 25px 37.5px; display: flex; flex-wrap: wrap; align-items: start; justify-content: flex-start; gap: 1em; } @media only screen and (min-width: 576px) { .module.html section.realisaties .realisaties__cards__card .card__meerwaarde { padding: 25px 37.5px; } } @media only screen and (min-width: 768px) { .module.html section.realisaties .realisaties__cards__card .card__meerwaarde { padding: 30px 45px; flex-direction: row-reverse; flex-wrap: nowrap; } } @media only screen and (min-width: 992px) { .module.html section.realisaties .realisaties__cards__card .card__meerwaarde { padding: 40px 60px; } } @media only screen and (min-width: 1200px) { .module.html section.realisaties .realisaties__cards__card .card__meerwaarde { padding: 40px 0 40px 60px; } } .module.html section.realisaties .realisaties__cards__card .card__meerwaarde h2 { font-size: 1.1em; } .module.html section.realisaties .realisaties__cards__card .card__meerwaarde h2 a { text-decoration: none; font-weight: 700; } .module.html section.realisaties .realisaties__cards__card .card__meerwaarde p { margin: 0; } .module.html section.realisaties .realisaties__cards__card .card__meerwaarde .color { color: #c71717; } .module.html section.realisaties .realisaties__cards__card .card__meerwaarde__content { flex: 1 1 auto; } .module.html section.realisaties .realisaties__cards__card .card__meerwaarde__solutions { align-items: start; display: flex; flex-wrap: wrap; flex: 1 0 100%; gap: 4px; } @media only screen and (min-width: 768px) { .module.html section.realisaties .realisaties__cards__card .card__meerwaarde__solutions { flex: 0 1 auto; justify-content: flex-end; } } .module.html section.realisaties .realisaties__cards__card .card__meerwaarde__solutions a { text-decoration: none; color: #343434; border: 1px solid #343434; background: rgba(255, 255, 255, 0.8); border-radius: 7px 0 7px 7px; padding: 5px 10px; font-size: 75%; display: flex; white-space: nowrap; gap: 0.5ch; align-items: center; } .module.html section.realisaties .realisaties__cards__card .card__meerwaarde__solutions a:hover { border-color: #c71717; color: #c71717; } .module.html section.realisaties .realisaties__cards__card .card__meerwaarde__solutions a:before { content: ''; width: 22px; height: 22px; display: block; mix-blend-mode: darken; } .module.html section.realisaties .realisaties__cards__card .card__meerwaarde__solutions a.e-commerce-icon:before { background: url(/Assets/_Analyz-it/Images/NewAssets/diensten-icons/E-commerce-icon.svg) center center /contain no-repeat; } .module.html section.realisaties .realisaties__cards__card .card__meerwaarde__solutions a.erp-systemen-icon:before { background: url(/Assets/_Analyz-it/Images/NewAssets/diensten-icons/ERP-systemen-icon.svg) center center /contain no-repeat; } .module.html section.realisaties .realisaties__cards__card .card__meerwaarde__solutions a.crm-systemen-icon:before { background: url(/Assets/_Analyz-it/Images/NewAssets/diensten-icons/CRM-systemen-icon.svg) center center /contain no-repeat; } .module.html section.realisaties .realisaties__cards__card .card__meerwaarde__solutions a.online-databases-icon:before { background: url(/Assets/_Analyz-it/Images/NewAssets/diensten-icons/Online-databases-icon.svg) center center /contain no-repeat; } .module.html section.realisaties .realisaties__cards__card .card__meerwaarde__solutions a.webapps-icon:before { background: url(/Assets/_Analyz-it/Images/NewAssets/diensten-icons/Webapps-icon.svg) center center /contain no-repeat; } .module.html section.realisaties .realisaties__cards__card .card__meerwaarde__solutions a:after { content: '+'; color: #c71717; font-size: 1.3em; margin-left: 0.5ch; line-height: 1.2; } /*--------------------------------------------------------------------------------*/ /* SECTOREN */ /*---------------------------------------------------------------------------------*/ .webapp.sectoren { padding: 50px 0; } @media only screen and (min-width: 768px) { .webapp.sectoren { padding: 60px 0; } } @media only screen and (min-width: 992px) { .webapp.sectoren { padding: 80px 0; } } .webapp.sectoren .container { padding: 0; display: grid; align-items: center; grid-template-rows: repeat(8, max-content); grid-template-columns: 25px 1fr 25px; } @media only screen and (min-width: 992px) { .webapp.sectoren .container { grid-template-columns: repeat(8, 1fr); grid-template-rows: 40px 1fr 40px; } } .webapp.sectoren .content-box { background: white; box-shadow: 0 0 20px 0 rgba(17, 27, 30, 0.1); padding: 50px; border-radius: 31.25px 31.25px 31.25px 0; position: relative; z-index: 1; grid-column: 2/3; grid-row: 1/4; } .webapp.sectoren .content-box a { font-weight: 700; } @media only screen and (min-width: 992px) { .webapp.sectoren .content-box { grid-column: 1/4; grid-row: 2/3; padding: 60px; border-radius: 50px 50px 50px 0; } } .webapp.sectoren .sectoren-box { background: #f3f3f5 url(/Assets/_Analyz-it/Images/NewAssets/medische-en-technische-sector-webapp-analyz-it.webp) right bottom /130% no-repeat; height: 100%; display: grid; grid-template-rows: subgrid; grid-column: 1/-1; grid-row: 3/9; } @media only screen and (min-width: 992px) { .webapp.sectoren .sectoren-box { background: #f3f3f5 url(/Assets/_Analyz-it/Images/NewAssets/medische-en-technische-sector-webapp-analyz-it.webp) center bottom /100% no-repeat; grid-template-columns: subgrid; border-radius: 50px 50px 0 50px; grid-column: 3/9; grid-row: 1/-1; } } .webapp.sectoren .sectoren-box .sectoren { display: grid; gap: 1em; grid-column: 1/-1; grid-row: 2/-1; grid-template-columns: 1fr 1fr; padding: 25px; padding-bottom: 20%; } @media only screen and (min-width: 992px) { .webapp.sectoren .sectoren-box .sectoren { padding: 0; grid-column: 2/-1; grid-template-columns: 1fr 1fr; } } @media only screen and (min-width: 992px) { .webapp.sectoren .sectoren-box .sector { padding: 50px; } } .webapp.sectoren .sectoren-box .btn-secondary { background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(10px); } .webapp.sectoren .sectoren-box .technische-sector { place-content: start; } .webapp.sectoren .sectoren-box .medische-sector { place-content: end; text-align: right; } .webapp.sectoren .sectoren-box .medische-sector .btn-secondary { text-align: right; } .webapp.sectoren .alles-box { grid-row: -1; grid-column: 1/-1; display: grid; justify-content: end; padding: 25px; } @media only screen and (min-width: 992px) { .webapp.sectoren .alles-box { padding-right: 50px; } } /*--------------------------------------------------------------------------------*/ /* CTA */ /*---------------------------------------------------------------------------------*/ .cta-section { padding: 0 0 50px 0; z-index: 9000; position: relative; background: rgba(255, 255, 255, 0.8); } @media only screen and (min-width: 576px) { .cta-section { padding: 0 0 50px 0; } } @media only screen and (min-width: 768px) { .cta-section { padding: 0 0 60px 0; } } @media only screen and (min-width: 992px) { .cta-section { padding: 0 0 80px 0; background: transparent; } } @media only screen and (min-width: 1200px) { .cta-section { padding: 0 0 80px 0; } } .cta { max-width: 70ch; margin: 0 auto; } .cta a.btn { text-decoration: none; color: #fff; border: 1px solid #fff; border-radius: 10px; padding: 5px 10px; display: inline-flex; align-items: center; margin-top: 1em; } .cta a.btn:hover { background: #fff; color: #c71717; } /*--------------------------------------------------------------------------------*/ /* UITGEBREIDE CREDITS */ /*--------------------------------------------------------------------------------*/ body #credits { background: #111b1e; margin: 0; margin-top: 10vw; border-radius: 0 10vw 0 0; } @media only screen and (min-width: 992px) { body #credits { overflow: visible; margin-top: 95px; } } body #credits .wrapper .module { width: 100%; } body #credits .wrapper .html { order: 2; } body #credits .wrapper .form { order: 1; } body #credits .wrapper .site-credits { order: 3; } body #credits .wrapper h3 { color: #343434; font-size: 100%; } body #credits .nieuwstags { display: none; } body #credits .seotags a { display: inline-block; background: #e0e1e3; text-decoration: none; line-height: 1; } body #credits .seotags a:hover { background: #c71717; } body #credits .wrapper .module.form { padding: 0 25px 0 0; margin-top: -10vw; width: 100%; } @media only screen and (min-width: 992px) { body #credits .wrapper .module.form { width: 100%; margin-top: -50px; padding: 0 40px; } } @media only screen and (min-width: 1200px) { body #credits .wrapper .module.form { padding: 0 40px; } } body #credits .wrapper .module.form > div { background: #c71717; border-radius: 20px 20px 20px 0; padding: 10px 25px 25px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } @media only screen and (min-width: 992px) { body #credits .wrapper .module.form > div { justify-content: center; align-items: center; padding: 25px 25px 10px 25px; } } body #credits .wrapper .module.form > div:before { content: ''; display: block; position: absolute; left: 0; bottom: 0; transform: translateY(99%); width: 0; height: 0; border: 20px solid pink; border-color: #c71717 transparent transparent #c71717; } @media only screen and (min-width: 992px) { body #credits .wrapper .module.form > div:before { left: 40px; } } @media only screen and (min-width: 1200px) { body #credits .wrapper .module.form > div:before { left: 40px; } } body #credits .wrapper .module.form .form-item:first-child { margin: 0; flex: 1 1 100%; } body #credits .wrapper .module.form .form-label.geen-input { text-align: center; } body #credits .wrapper .module.form .form-label.geen-input h3 { color: #fff; font-weight: 700; } body #credits .wrapper .module.form .form-item { flex: 1 1 250px; margin: 0; } body #credits .wrapper .module.form .form-item .form-required { display: none; } body #credits .wrapper .module.form .form-item input { border-color: #fff; color: #fff; } body #credits .wrapper .module.form .form-item input:focus { border-color: #fff; box-shadow: 0 0 0 4px rgba(249, 203, 203, 0.35); } body #credits .wrapper .module.form .form-item input::placeholder { color: rgba(255, 255, 255, 0.35); } body #credits .wrapper .module.form .form-privacy { color: #fff; order: 99; } body #credits .wrapper .module.form .form-privacy a { color: #fff; } @media only screen and (min-width: 992px) { body #credits .wrapper .module.form .form-privacy { width: 100%; justify-content: center; } } body #credits .wrapper .module.form .form-submit { flex: 1 1 250px; text-align: right; margin: 0; position: relative; } body #credits .wrapper .module.form .form-submit:before { content: ''; position: absolute; inset: 0; z-index: 1; } @media only screen and (min-width: 992px) { body #credits .wrapper .module.form .form-submit { font-size: 0; flex: 0 0 auto; } } body #credits .wrapper .module.form .form-submit a { width: 100%; display: flex; align-items: center; gap: 10px; background: transparent; border: 1px solid #fff; border-radius: 8px; padding: 0 20px 0 10px; margin: 0; opacity: 0.5; pointer-events: none; cursor: not-allowed; } @media only screen and (min-width: 992px) { body #credits .wrapper .module.form .form-submit a { padding: 0; gap: 0; } } body #credits .wrapper .module.form .form-submit a:before { content: ''; width: 37px; height: 37px; background: url(/Assets/_Analyz-it/Images/NewAssets/send-icon.svg) center center /66% no-repeat; } @keyframes pulsate-bck { 0% { transform: scale(1); } 50% { transform: scale(0.9); } 100% { transform: scale(1); } } body #credits .wrapper .module.form:has(.form-privacy input:checked) .form-submit:before { display: none; } body #credits .wrapper .module.form:has(.form-privacy input:checked) .form-submit a { opacity: 1; pointer-events: all; cursor: pointer; animation: pulsate-bck 0.5s ease-in-out 2 both; } body #credits .wrapper .module.form:has(.form-privacy input:not(:checked)):has(.form-submit:hover) .form-privacy { animation: pulsate-bck 0.5s ease-in-out 1 both; } body #credits .site-credits { padding-top: 12.5px; padding-bottom: 60px; margin-top: 12.5px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } body #credits .site-credits > div { padding: 5px 0; color: #fff; } body #credits .site-credits a { color: #fff; } body #credits .site-credits .copyright, body #credits .site-credits .contentBy { display: none; } body #credits .site-credits span { color: #fff; } body #credits .site-credits .socials { display: flex; padding-left: 50px; align-items: center; justify-self: end; } body #credits .site-credits .socials a { width: 50px; height: 50px; background: pink; display: block; } body #credits .site-credits .socials a.fb { background: url(/Assets/_Analyz-it/Images/Social/iconFacebook.png) center center /contain no-repeat; } body #credits .site-credits .socials a.li { background: url(/Assets/_Analyz-it/Images/Social/iconLinkedIn.png) center center /contain no-repeat; } body #credits .site-credits .socials a.insta { background: url(/Assets/_Analyz-it/Images/Social/iconInstagram.png) center center /contain no-repeat; } body #credits .site-credits .adresFooterContainer { color: white; } body #credits .site-credits .adresFooterContainer p { margin: 0; } body #credits .site-credits .adresFooterContainer a { color: white; text-decoration: none; } body #credits .site-credits .adresFooterContainer a.mail { text-decoration: underline; } body #credits .site-credits .voorwaardeLoginContainer { display: flex; flex-wrap: wrap; } body #credits .site-credits .voorwaardeLoginContainer .dots:nth-child(2), body #credits .site-credits .voorwaardeLoginContainer .dots:nth-child(4) { display: none; } body #credits .site-credits .voorwaardeLoginContainer .dots { margin: 0 5px; } body #credits .site-credits .voorwaardeLoginContainer .adminLogin { width: 16px; height: 16px; } body #credits .site-credits .voorwaardeLoginContainer .adminLogin .acms-login { font-size: 0; display: block; width: 16px; height: 16px; background: url(/Assets/_Analyz-it/Images/Site-graphics/login-icon.png) center center / contain no-repeat; } body #credits .site-credits .voorwaardeLoginContainer .adminLogin .acms-logout { font-size: 0; display: block; width: 16px; height: 16px; background: url(/Assets/_Analyz-it/Images/Site-graphics/logout-icon.png) center center / contain no-repeat; } @media only screen and (min-width: 576px) { #credits .wrapper .site-credits { margin-top: 12.5px; } } @media only screen and (min-width: 768px) { #credits .wrapper .site-credits { margin-top: 15px; } } @media only screen and (min-width: 992px) { #credits { overflow: hidden; } #credits .wrapper .module { width: 33.333333333%; } #credits .wrapper .module.site-credits { width: 100%; position: relative; font-size: 100%; } #credits .wrapper .module.site-credits p { font-size: 100%; } #credits .wrapper .module.site-credits .adresFooterContainer, #credits .wrapper .module.site-credits .voorwaardeLoginContainer { position: relative; } } @media only screen and (min-width: 1200px) { #credits .wrapper .site-credits { margin-top: 20px; } } /***********************************/ /* realisatie Detail > reviews */ /***********************************/ .realisaties .acms-column-smal .slideshow { background: white; margin: 0 -25px; } .realisaties .acms-column-smal .slideshow .galleria-thumbnails-list { opacity: 0 !important; pointer-events: none !important; } .realisaties .acms-column-smal .slideshow .fotoslideshow-singleImage .singleImage:before { display: none; } .realisaties .acms-column-smal .slideshow .fotoslideshow-singleImage .singleImage img { position: static; transform: none; } @media only screen and (min-width: 576px) { .realisaties .acms-column-smal .slideshow { margin: 0 -25px; } } @media only screen and (min-width: 768px) { .realisaties .acms-column-smal .slideshow { margin: 0 -30px; } } .realisaties .acms-column-smal .slideshow:before, .realisaties .acms-column-smal .slideshow:after { content: ''; height: 25px; width: 100%; display: block; background: #edeeef; } .realisaties .acms-column-smal .slideshow:before { border-radius: 0 0 10px 10px; } .realisaties .acms-column-smal .slideshow:after { border-radius: 10px 10px 0 0; } .realisaties .acms-column-smal .slideshow .contents { margin: 25px 0; box-shadow: 0 0 20px 0 rgba(17, 27, 30, 0.1); border-radius: 10px; overflow: hidden; } .realisaties .acms-column-smal .controls-row:has(.slideshow):nth-last-child(2) .slideshow { margin: 0 -25px -25px; } @media only screen and (min-width: 576px) { .realisaties .acms-column-smal .controls-row:has(.slideshow):nth-last-child(2) .slideshow { margin: 0 -25px -25px; } } @media only screen and (min-width: 768px) { .realisaties .acms-column-smal .controls-row:has(.slideshow):nth-last-child(2) .slideshow { margin: 0 -30px -30px; } } .realisaties .acms-column-smal .controls-row:has(.slideshow):nth-last-child(2) .slideshow:after { display: none; } @keyframes moveInCircle { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } @keyframes moveVertical { 0% { transform: translateY(-50%); } 50% { transform: translateY(50%); } 100% { transform: translateY(-50%); } } @keyframes moveHorizontal { 0% { transform: translateX(-50%) translateY(-10%); } 50% { transform: translateX(50%) translateY(10%); } 100% { transform: translateX(-50%) translateY(-10%); } } #wie_v2 { display: grid; } #wie_v2 svg { position: fixed; top: 0; left: 0; width: 0; height: 0; } #wie_v2 .gradients-container { grid-column: 1/-1; grid-row: 1/-1; overflow: hidden; mix-blend-mode: color-dodge; filter: url(/Assets/_Analyz-it/Styling/#goo); } #wie_v2 .g1 { position: absolute; background: radial-gradient(circle at center, rgba(199, 23, 23, 0.8) 0, rgba(199, 23, 23, 0) 50%) no-repeat; mix-blend-mode: unset; aspect-ratio: 1; height: 80%; top: calc(10%); left: calc(10%); transform-origin: center center; animation: moveVertical 30s ease infinite; opacity: 1; } #wie_v2 .g2 { position: absolute; background: radial-gradient(circle at center, rgba(255, 167, 95, 0.8) 0, rgba(255, 167, 95, 0) 50%) no-repeat; mix-blend-mode: unset; aspect-ratio: 1; height: 80%; top: calc(10%); left: calc(10%); transform-origin: calc(-350%); animation: moveInCircle 20s reverse infinite; opacity: 1; } #wie_v2 .g3 { position: absolute; background: radial-gradient(circle at center, rgba(255, 95, 154, 0.8) 0, rgba(255, 95, 154, 0) 50%) no-repeat; mix-blend-mode: unset; aspect-ratio: 1; height: 80%; top: calc(210%); left: calc(-490%); transform-origin: calc(450%); animation: moveInCircle 40s linear infinite; opacity: 1; } #wie_v2 .g4 { position: absolute; background: radial-gradient(circle at center, rgba(238, 6, 90, 0.8) 0, rgba(238, 6, 90, 0) 50%) no-repeat; mix-blend-mode: unset; aspect-ratio: 1; height: 80%; top: calc(10%); left: calc(10%); transform-origin: calc(-150%); animation: moveHorizontal 40s ease infinite; opacity: 0.7; } #wie_v2 .interactive { position: absolute; background: radial-gradient(circle at center, rgba(255, 33, 162, 0.75) 0, rgba(255, 33, 162, 0) 30%) no-repeat; mix-blend-mode: unset; aspect-ratio: 1; height: 100%; top: -25%; left: 0; opacity: 0.85; transition: 0.3s; } #wie_v2 .interactive { will-change: transform; }