@charset "UTF-8"; /* ========================================================================== iDrive2GO — hoofdstylesheet Importvolgorde volgt de cascade van het origineel: basis → header → homepage → footer → responsive → overrides (customizer) ========================================================================== */ /* ========================================================================== Fonts — iDrive2GO 'Plus Jakarta Sans' (300–900) en 'Kalam' worden geladen via Google Fonts in page.master (). Hier zijn geen @font-face-declaraties nodig. ========================================================================== */ /* ========================================================================== iDrive2GO — design tokens Overgenomen van https://www.idrive2go-theorie.nl/ (thema "idrivetogo") ========================================================================== */ ::selection { background: #F67A00; color: white; } ::-moz-selection { background: #F67A00; color: white; } /* --- Basis (port van thema-basisregels) ----------------------------------- */ html.modal-open { overflow: hidden; } html.modal-open body { overflow: hidden; } body { margin: 0px; padding: 0px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 16px; color: #000; background: white; } body a { text-decoration: none; } body h2 { font-size: 40px; margin: 0px; letter-spacing: -0.5px; line-height: 50px; margin-bottom: 35px; } body h2 span { color: #F67A00; } *, ::after, ::before { box-sizing: border-box; } :focus { outline: none !important; } img { vertical-align: middle; } .img-fluid { max-width: 100%; } button { appearance: none; -moz-appearance: none; -webkit-appearance: none; } .w-100 { width: 100% !important; } .hidden { display: none !important; opacity: 0; } /* --- Wrappers (origineel: .wrapper / .wrapper-sm) -------------------------- */ .wrapper { max-width: 90%; margin: 0px auto; } .wrapper-sm { max-width: 63%; margin: 0px auto; } /* --- Primaire knop --------------------------------------------------------- */ .button-reg { background-color: #F67A00; border-radius: 7px 7px 18px 7px; color: white; font-weight: 500; padding: 12px 25px; transition: 0.25s; border: none; cursor: pointer; font-family: "Plus Jakarta Sans", sans-serif; } .button-reg:hover { border-radius: 7px; } /* --- Slick (globale override origineel) ------------------------------------ */ .slick-dots li button:before { font-size: 16px !important; } /* --- Generieke infra (behouden uit basisproject) --------------------------- */ .loading-div { position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; z-index: 999; opacity: 0; visibility: hidden; } .loading-div:after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: #000; opacity: 0.6; } .loading-div .circle { line-height: 20px; text-align: center; margin-top: 10px; color: white; } .loading-div .circle .fa { font-size: 16px; bottom: -10px; position: relative; margin-right: 8px; animation-name: blink; animation-duration: 1s; animation-iteration-count: infinite; animation-fill-mode: both; } .loading-div .circle .fa:nth-child(1) { animation-delay: 0.2s; } .loading-div .circle .fa:nth-child(2) { animation-delay: 0.4s; } .loading-div .circle .fa:nth-child(3) { animation-delay: 0.6s; } .loading-div .inner { color: #fff; position: absolute; left: 50%; top: 50%; text-align: center; width: calc(100% - 30px); font-size: 25px; transform: translate(-50%, -50%); z-index: 999; } .loading-div .inner b { font-weight: 500; } .loading-div.activeloader { opacity: 1; visibility: visible; } .modal-account { position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 999; background: rgba(0, 0, 0, 0.46); opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out; display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; overflow-y: auto; } .modal-account.active { opacity: 1; visibility: visible; } .modal-account .content { margin: 1.75rem auto; background: #fff; border-radius: 10px; padding: 75px 50px; text-align: center; max-width: 800px; width: 100%; position: relative; } .modal-account .content .fas { position: absolute; top: 22px; right: 22px; z-index: 5; line-height: 44px; width: 44px; background: #F67A00; border-radius: 50%; cursor: pointer; text-align: center; color: #fff; } .modal-account .content .btn-default { background-color: #F67A00; border-radius: 7px 7px 18px 7px; color: white; font-weight: 500; padding: 12px 25px; transition: 0.25s; border: none; cursor: pointer; font-family: "Plus Jakarta Sans", sans-serif; } .modal-account .content .btn-default:hover { border-radius: 7px; } .modal-account .content .btn-default { margin: 15px auto 0; display: table; } .popup.Cookies { position: fixed; bottom: 0; left: 0; width: 100%; background: white; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); padding: 15px 0; z-index: 9999; } .popup.Cookies .cookies-img { font-size: 24px; color: #F67A00; } .popup.Cookies p { margin: 0; } .popup.Cookies .btn-default { background-color: #F67A00; border-radius: 7px 7px 18px 7px; color: white; font-weight: 500; padding: 12px 25px; transition: 0.25s; border: none; cursor: pointer; font-family: "Plus Jakarta Sans", sans-serif; } .popup.Cookies .btn-default:hover { border-radius: 7px; } .popup.Cookies .btn-default { display: inline-block; } .alert { position: relative; padding: 0.75rem 1.25rem; margin-bottom: 1rem; font-size: 14px; border: 1px solid transparent; } .alert.alert-danger { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; } .alert.alert-succes { color: #155724; background-color: #d4edda; border-color: #c3e6cb; } /* Foutpagina's (Errors/) */ .errors { height: 100vh; width: 100vw; position: relative; } .errors .content { width: 800px; max-width: calc(100% - 30px); position: absolute; top: 50%; left: 50%; text-align: center; transform: translate(-50%, -50%); border-radius: 5px; padding: 35px 0; } .errors .content h4 { font-size: 35px; font-weight: bold; margin-bottom: 20px; } .errors .content .btn-default { background-color: #F67A00; border-radius: 7px 7px 18px 7px; color: white; font-weight: 500; padding: 12px 25px; transition: 0.25s; border: none; cursor: pointer; font-family: "Plus Jakarta Sans", sans-serif; } .errors .content .btn-default:hover { border-radius: 7px; } .errors .content .btn-default { margin: 20px auto 0 !important; display: table; } .errors .content p { margin: 0; } @keyframes blink { 0% { bottom: -10px; } 50% { bottom: 0px; } 100% { bottom: -10px; } } @keyframes rotating { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* NB: het origineel verwijst naar "animation: myfirst" zonder de keyframes te definiëren — de raket animeert daar dus niet. Bewust niet toegevoegd. */ /* --- Componenten & pagina's ------------------------------------------------ */ /* ========================================================================== Header — iDrive2GO Pixel-perfecte port van idrive2go-theorie.nl (thema "idrivetogo" + Max Mega Menu). Zelfde ids/classes als het origineel zodat de geporte regels 1-op-1 toepasbaar zijn. ========================================================================== */ /* --- Top-bar (blauwe mededelingsbalk) ------------------------------------- Staat in de markup maar is — net als op het origineel — verborgen via _overrides.scss (#top-bar { display: none; }). */ #top-bar { background-color: #0047FF; padding: 13px 0; } #top-bar .content article p { color: white; margin: 0px; font-weight: 400; font-size: 14px; letter-spacing: 0.5px; text-align: center; } #top-bar .content article p strong { font-weight: 600; } #top-bar .content article p i { color: #2EC4B6; font-weight: unset; font-size: 16px; margin-right: 5px; } /* --- Header ---------------------------------------------------------------- */ header { padding: 25px 0; background-color: white; } header .wrapper { max-width: 1900px; width: 100%; padding: 0px 15px; } header nav .content { display: flex; align-items: center; justify-content: space-between; } header nav .content article.left { display: flex; align-items: center; } header nav .content article.left .logo { display: block; width: 250px; } header nav .content article.right ul { margin: 0px; padding: 0px; display: flex; } header nav .content article.right ul li { list-style-type: none; margin-left: 30px; } header nav .content article.right ul li a { color: black; font-weight: 600; } header nav .content article.right ul li a:hover { border-bottom: 1.5px solid #F67A00; } header nav .content article.right ul li.active { border-bottom: 1.5px solid #F67A00; } /* --- Mega menu (port van Max Mega Menu-gedrag) ----------------------------- Markup volgt het origineel: #mega-menu-wrap-menu-1 > .mega-menu-toggle + ul#mega-menu-menu-1 JS zet .mega-menu-open op de toggle en .mega-toggle-on op li's. */ #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 { margin: 0; padding: 0; list-style: none; } #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 li.mega-menu-item { list-style: none; position: relative; } #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 a.mega-menu-link { color: black; text-decoration: none; display: block; } #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 span.mega-indicator { display: inline-block; margin-left: 6px; } #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 span.mega-indicator:after { content: "\f078"; /* chevron-down (origineel: dashicons-pijl) */ font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10px; position: relative; top: -1px; } #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 { /* Aanmelden-knop in het menu */ } #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 li.mega-aanmelden > a.mega-menu-link { background-color: #F67A00; border-radius: 7px 7px 18px 7px; color: white; font-weight: 500; padding: 12px 25px; transition: 0.25s; border: none; cursor: pointer; font-family: "Plus Jakarta Sans", sans-serif; } #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 li.mega-aanmelden > a.mega-menu-link:hover { border-radius: 7px; } #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 li.mega-aanmelden > a.mega-menu-link { color: white; font-weight: 500; font-size: 14.5px; } #mega-menu-wrap-menu-1 { /* Hamburger-toggle (Max Mega Menu "slider"-animatie) */ } #mega-menu-wrap-menu-1 .mega-menu-toggle { display: none; z-index: 1; cursor: pointer; background: transparent; border-radius: 2px; line-height: 40px; height: 40px; text-align: left; user-select: none; -webkit-tap-highlight-color: transparent; outline: none; white-space: nowrap; } #mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-blocks-left, #mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-blocks-center, #mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-blocks-right { display: flex; flex-basis: 33.33%; } #mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-blocks-right { justify-content: flex-end; align-items: center; } #mega-menu-wrap-menu-1 .mega-menu-toggle button.mega-toggle-animated { padding: 0; display: inline-block; cursor: pointer; transition-property: opacity, filter; transition-duration: 0.15s; transition-timing-function: linear; font: inherit; color: inherit; text-transform: none; background-color: transparent; border: 0; margin: 0; overflow: visible; } #mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-animated-box { width: 40px; height: 24px; display: inline-block; position: relative; outline: 0; } #mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-animated-inner { display: block; top: 2px; margin-top: -2px; } #mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-animated-inner, #mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-animated-inner::before, #mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-animated-inner::after { width: 40px; height: 4px; background-color: black; border-radius: 4px; position: absolute; transition-property: transform; transition-duration: 0.15s; transition-timing-function: ease; } #mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-animated-inner::before, #mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-animated-inner::after { content: ""; display: block; } #mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-animated-inner::before { top: 10px; transition-property: transform, opacity; transition-timing-function: ease; transition-duration: 0.15s; } #mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-animated-inner::after { top: 20px; } #mega-menu-wrap-menu-1 .mega-menu-toggle { /* Open-status: hamburger → kruis */ } #mega-menu-wrap-menu-1 .mega-menu-toggle.mega-menu-open .mega-toggle-animated-inner { transform: translate3d(0, 10px, 0) rotate(45deg); } #mega-menu-wrap-menu-1 .mega-menu-toggle.mega-menu-open .mega-toggle-animated-inner::before { transform: rotate(-45deg) translate3d(-5.71429px, -6px, 0); opacity: 0; } #mega-menu-wrap-menu-1 .mega-menu-toggle.mega-menu-open .mega-toggle-animated-inner::after { transform: translate3d(0, -20px, 0) rotate(-90deg); } /* --- Desktop-menu (> 1300px) ---------------------------------------------- */ @media only screen and (min-width: 1301px) { #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 { display: flex; align-items: center; } #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 > li.mega-menu-item { display: inline-block; } #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link { display: inline-block; font-size: 16px; font-weight: 600; margin-left: 30px; line-height: 27px; border-bottom: 1.5px solid transparent; } #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link:hover { border-bottom: 1.5px solid #F67A00; } #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link { border-bottom: 1.5px solid #F67A00; } #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 > li.mega-menu-item.mega-aanmelden > a.mega-menu-link { padding: 12px 25px; line-height: normal; border-bottom: none; } #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 > li.mega-menu-item.mega-aanmelden > a.mega-menu-link:hover { border-bottom: none; } #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 { /* Flyout-submenu (Tarieven → Webshop, Contact → Vacatures) */ } #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 li.mega-menu-flyout ul.mega-sub-menu { position: absolute; top: 100%; left: 30px; width: 250px; margin: 0; padding: 0; background-color: white; z-index: 999; visibility: hidden; opacity: 0; transform: translateY(10px); /* fade_up-effect origineel */ transition: opacity 200ms ease-in-out, transform 200ms ease-in-out, visibility 200ms; } #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item { display: block; } #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link { display: block; font-size: 14px; font-weight: 400; color: black; padding: 0 10px; line-height: 35px; background-color: white; } #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover { border-bottom: none; } #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 li.mega-menu-flyout:hover > ul.mega-sub-menu, #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 li.mega-menu-flyout:focus-within > ul.mega-sub-menu { visibility: visible; opacity: 1; transform: translate(0, 0); } } /* --- Mobiel menu (≤ 1300px): off-canvas vanaf rechts ----------------------- */ @media only screen and (max-width: 1300px) { #mega-menu-wrap-menu-1 .mega-menu-toggle { display: flex; } #mega-menu-wrap-menu-1 .mega-menu-toggle + ul#mega-menu-menu-1 { background: white; position: fixed; display: block; width: 300px; max-width: 90%; height: 100vh; max-height: 100vh; top: 0; right: -300px; box-sizing: border-box; transition: left 200ms ease-in-out, right 200ms ease-in-out; overflow: auto; z-index: 9999999999; overscroll-behavior: contain; padding: 40px !important; } #mega-menu-wrap-menu-1 .mega-menu-toggle.mega-menu-open + ul#mega-menu-menu-1 { right: 0; } #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 > li.mega-menu-item { display: list-item; margin: 0; clear: both; border: 0; } #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link { border-radius: 0; border: 0; margin: 0; line-height: 40px; height: 40px; padding: 0 10px; background: transparent; text-align: left; color: black; font-size: 14.5px; } #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 > li.mega-menu-item.mega-toggle-on > a.mega-menu-link { color: #0047FF; background: black; } #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 > li.mega-menu-item.mega-aanmelden > a.mega-menu-link { color: white; background-color: #F67A00; height: auto; line-height: 40px; padding: 0 10px; } #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 li.mega-menu-item > ul.mega-sub-menu { display: none; visibility: visible; opacity: 1; position: static; width: 100%; float: left; margin: 0; padding: 0; border: 0; border-radius: 0; list-style: none; } #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 li.mega-menu-item > ul.mega-sub-menu li.mega-menu-item a.mega-menu-link { line-height: 40px; height: 40px; padding: 0 10px 0 20px; font-size: 14.5px; display: block; } #mega-menu-wrap-menu-1 ul#mega-menu-menu-1 li.mega-menu-item.mega-toggle-on > ul.mega-sub-menu { display: block; } } /* ========================================================================== Homepage (default.aspx) — iDrive2GO Pixel-perfecte port van de homepage-secties van idrive2go-theorie.nl. Volgorde van secties = volgorde op de pagina: hero / hero-mb / pakketten / content-section (hoe werkt het) / volgende-slaagt / landkaart (mobiel) / voordelen / geslaagden / content-section.rev.last / partners / blogs / slaging-tooltip ========================================================================== */ #hero-mb { display: none; } #hero-mb .content article select#frmPakket, #hero-mb .content article select#frmLocatie { font-family: "Plus Jakarta Sans" !important; } #hero-mb .content article button#frmSubmit { background-color: #0047FF !important; padding: 10px 20px; font-family: "Plus Jakarta Sans" !important; border: 1px solid white; color: white !important; font-weight: 600; font-size: 15px; border-radius: 7px 7px 18px 7px; transition: 0.15s; } #hero-mb .content article button#frmSubmit:hover { border-radius: 7px; background-color: white; color: black; } #hero { border-radius: 50px; background-image: url("/Resources/img/hero-home.png"); background-size: cover; background-repeat: no-repeat; background-position: right 0px bottom 67%; position: relative; } #hero .overlay { /* background: linear-gradient(89.64deg, rgba(246, 122, 0, 0.98) 0.32%, rgba(246, 122, 0, 0) 99.72%); */ /* background: linear-gradient(89.64deg, #f67a0033 0.32%, rgb(0 0 0 / 0%) 99.72%); */ /* background: #0047FF; */ background: linear-gradient(100.37deg, rgba(0, 0, 0, 0.4) -3.45%, transparent); border-radius: 50px; padding: 100px 0; } #hero .overlay::before { content: ""; height: 99%; width: 70%; background-color: #BACDFF; position: absolute; top: 10px; left: -18px; border-radius: 50px; transform: rotate(-3deg); z-index: -9; } #hero .content { display: flex; justify-content: space-between; align-items: flex-end; } #hero .content article.left { flex: 0 0 40%; } #hero .content article.left h1 { color: white; margin: 0px; font-size: 45px; line-height: 50px; font-weight: 900; margin-bottom: 25px; text-shadow: 0px 3px 0px rgba(0, 0, 0, 0.2); } #hero .content article.left h1 span { /* color: #0047FF; */ color: white; font-style: italic; } #hero .content article.left p { color: white; line-height: 25px; max-width: 80%; text-shadow: 0px 3px 0px rgba(0, 0, 0, 0.2); font-size: 19px; font-weight: 500; } #hero .content article.left p span { color: #0047FF; font-weight: 600; } #hero .content .right { position: relative; top: 0; right: 43%; } #hero .content article.right .old-price { position: relative; top: -50px; right: -40px; background-color: white; width: 120px; height: 120px; border-radius: 50%; color: #0047FF; display: inline-flex; align-items: center; justify-content: center; } #hero .content article.right .old-price h4 { font-size: 15px; margin: 0px; font-weight: 400; color: black; } #hero .content article.right .old-price h3 { font-size: 20px; font-weight: 600; margin: 0px; position: relative; } #hero .content article.right .old-price h3:after { content: ""; display: block; width: 100%; height: 50%; position: absolute; top: 0; left: 0; border-bottom: 2px solid; } #hero .content article.right .new-price { position: relative; z-index: 9999; /* background-color: #F67A00; */ background-color: #0047FF; width: 220px; height: 220px; border-radius: 50%; color: white; display: inline-flex; align-items: center; justify-content: center; } #hero .content article.right .new-price h4 { font-size: 18px; margin: 0px; font-weight: 400; position: relative; left: 35px; } #hero .content article.right .new-price h3 { font-size: 54px; font-weight: 600; margin: 0px; text-align: center; } #wrapper-pakketten { max-width: 80%; margin: 0px auto; } #pakketten .content .active .punten { margin-bottom: 25px; } #pakketten .content .punten { padding: 0px; margin: 25px 0 45px 0; } #pakketten .content .punten li.cross:before { content: "\f00d"; font-family: "Font Awesome 6 Free"; font-weight: bold; color: red; position: absolute; top: 1px; left: 2px; } #pakketten .content .punten li:before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: bold; color: #2EC4B6; position: absolute; top: 2px; left: 0px; } #pakketten .content .active.pakket .punten li:before { color: white; } #pakketten .content .punten li { position: relative; list-style: none; font-size: 15px; margin: 7px 0; line-height: 24px; color: #000000; padding-left: 22px; } #pakketten .content .active.pakket .punten li { color: white !important; } #pakketten .content .punten li:before { position: absolute; top: 1px; } #pakketten .content { display: flex; justify-content: space-between; align-items: flex-start; background-color: white; padding: 20px; border-radius: 30px; position: relative; top: -60px; } #pakketten .content .active { border: unset !important; background-color: #F67A00 !important; outline: 18px solid white; top: -64px; filter: unset !important; } #pakketten .content .active .scooter-wrapper { display: flex; align-items: center; position: absolute; top: 12px; right: 12px; width: unset !important; } #pakketten .content .active .scooter-icon { position: relative !important; top: unset !important; right: unset !important; } #pakketten .content .active .plus { color: white; font-weight: 700; margin: 0 7px; } #pakketten .content .active .populair { background-color: white; color: #0047FF; padding: 7px 14px; border-radius: 50px; font-weight: 800; font-size: 13px; margin-bottom: 20px; display: inline-block; } #pakketten .content .active .title, #pakketten .content .active h3, #pakketten .content .active .desc, #pakketten .content .active h3 span { color: white !important; } #pakketten .content .active .button-reg { background-color: white; color: black; font-weight: 600; margin-top: 15px; display: inline-block !important; width: 100%; } #pakketten .content .pakket { flex: 0 0 24%; position: relative; border: 2px solid #0047FF; padding: 20px; border-radius: 15px; filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); background-color: white; } #pakketten .content .pakket .scooter-icon { position: absolute; top: 12px; right: 12px; width: 27px; } #pakketten .content .pakket .title { color: black; font-weight: 800; margin: 0px; font-size: 23px; height: 70px; } #pakketten .content .pakket h3 { font-size: 34px; margin: 10px 0px; display: flex; align-items: center; } #pakketten .content .pakket h3 span { color: #000000; font-size: 11.5px; font-weight: 500; max-width: 50%; margin-left: 10px; } #pakketten .content .pakket .desc { color: #000000; font-size: 15px; display: none; } #pakketten .content .pakket .button-reg { display: block; text-align: center; } #pakketten .content .pakket .button-reg.sec { background-color: #0047FF; color: white; margin-top: 0px; } .content-section.first { padding-top: 0; padding-bottom: 60px; } .content-section.first .content .img-wrapper, .content-section.first .content article .img-wrapper .img { max-height: 555px; min-height: 555px; } .content-section.first h2 { text-align: center; margin-bottom: 50px; } .content-section .content article .landkaart-lg img { width: 90%; } .content-section { padding: 100px 0; } .content-section .content { display: flex; justify-content: space-between; align-items: center; } .content-section .content article { flex: 0 0 47%; } .content-section .content article iframe { width: 100% !important; } .content-section .content article.right { text-align: center; } .content-section .content article h2, .content-section .content article h3, .content-section .content article h4, .content-section .content article h5, .content-section .content article h6, .content-section .content article p, .content-section .content article ul li { text-align: left; } .content-section .content article .img-wrapper { padding: 0px; max-height: 500px; max-width: 100%; position: relative; } .content-section .content article .img-wrapper .img { display: block; object-fit: cover; min-width: 100%; min-height: 500px; width: auto; height: auto; max-width: 100%; max-height: 500px; z-index: 999; border-radius: 50px; } .content-section .content article .img-wrapper::before { content: ""; height: 100%; width: 100%; background-color: rgba(246, 122, 0, 0.831372549); position: absolute; top: 20px; left: -30px; border-radius: 50px; transform: rotate(-3deg); z-index: -9; } .content-section.rev .content article .img-wrapper::before { content: ""; height: 100%; width: 100%; background-color: rgba(246, 122, 0, 0.831372549); position: absolute; top: 20px; left: unset; right: -30px; border-radius: 50px; transform: rotate(3deg); z-index: -9; } .content-section .content article .img-wrapper .rect-blue-rot { position: absolute; bottom: -25px; left: -25px; z-index: -9 !important; } .content-section .content article p { color: #000000; line-height: 25px; } .content-section .content article p a { color: #F67A00; font-weight: 600; } .content-section .content article p a:hover { text-decoration: underline; } .content-section .content article ul { padding-left: 20px; } .content-section .content article ul li { margin: 7px 0; line-height: 25px; color: #000000; } .content-section .content article .button-reg.spec { display: inline-block; margin-top: 20px; } .content-section .content .right ul.steps { padding: 0px; } .content-section .content .right ul.steps li { list-style: none; display: flex; align-items: flex-start; margin-bottom: 20px; } .content-section .content .right ul.steps li span { min-width: 37px; min-height: 37px; display: flex; align-items: center; justify-content: center; border: 1.5px solid #DFDFDF; color: #F67A00; font-weight: 800; border-radius: 5px; position: relative; top: -3px; } .content-section .content .right ul.steps li span i { font-size: 20px; } .content-section .content .right ul.steps li .content-right { margin-left: 10px; } .content-section .content .right ul.steps li .content-right .step-title { margin: 0px; color: black; text-align: left; } .content-section .content .right ul.steps li .content-right .step-desc { font-weight: 400; line-height: 25px; color: #000000; font-size: 15px; text-align: left; } .content-section.rev .content { flex-direction: row-reverse; } .content-section.rev .content article .img-wrapper .img { border-radius: 50px; } .content-section.rev .content article .rect-blue-rot { left: unset; right: -25px; transform: rotate(15deg); } #voordelen { padding: 50px 0; } #voordelen .wrapper-sm { text-align: center; } #voordelen h2 { width: 30%; display: block; text-align: center; margin: 0px auto; line-height: 35px; } #voordelen h2 .raket { position: relative; top: 12px; margin-left: 15px; transition: 0.25s; animation: myfirst 5s 2; animation-direction: alternate; } #voordelen .intro { width: 40%; display: block; text-align: center; margin: 0px auto; color: #000000; line-height: 25px; margin-top: 20px; } #voordelen .content { margin-top: 70px; display: flex; justify-content: space-between; align-items: flex-start; } #voordelen .content article { flex: 0 0 23%; text-align: center; } #voordelen .content article img { width: 40px; display: block; margin: 0px auto; } #voordelen .content article p { color: black; font-weight: 700; line-height: 25px; } #voordelen .content article p span { color: #F67A00; } #voordelen .button-reg { margin-top: 40px; display: inline-block; } #geslaagden .content article .button-reg.mb { display: none; } #geslaagden { margin: 100px 0; background-image: url("/Resources/img/geslaagden-bg.png"); background-size: cover; background-repeat: no-repeat; background-position: center; border-radius: 30px; position: relative; } #geslaagden .rect { height: 120px; width: 85%; left: 10%; background-color: #D4E0FF; border-radius: 30px; position: absolute; top: -40px; transform: rotate(-1.5deg); z-index: -9; } #geslaagden .wrapper { max-width: 70%; } #geslaagden .overlay { background: linear-gradient(89.64deg, rgba(246, 122, 0, 0.5803921569) 0.32%, rgba(246, 122, 0, 0.51) 99.72%); padding: 110px 0; border-radius: 30px; } #geslaagden .content { display: flex; justify-content: space-between; width: 100%; } #geslaagden .content .slick-dots { bottom: -40px !important; } #geslaagden .slick-active button:before { opacity: 1 !important; } #geslaagden .slick-dots li button:before { /* color: #0047FF !important; */ color: white !important; } #geslaagden .content article { flex: 0 0 40%; } #geslaagden .content article h2 { color: white; font-size: 40px; line-height: 51px; position: relative; font-weight: 600; margin: 0px; text-shadow: 0px 3px 0px rgba(0, 0, 0, 0.2); } #geslaagden .content article h2 .confetti { position: absolute; right: -49px; top: -48px; } #geslaagden .content article p { color: white; line-height: 25px; margin: 25px 0 50px 0; font-weight: 300; font-size: 18px; /* text-shadow: 0px 3px 0px rgb(0 0 0 / 20%); */ font-weight: 600; } #geslaagden .content article .button-reg { background-color: #0047FF; color: white; padding: 15px 28px; font-size: 17px; } #geslaagden .content .right { display: flex; justify-content: space-between; position: absolute; width: 35%; right: 15%; top: -80px; } #geslaagden .content .right .content { display: block; } #geslaagden .content .right .persoon { flex: 0 0 48%; padding: 0px; max-height: 400px; max-width: 100%; position: relative; overflow: hidden; border-radius: 20px; margin: 0 10px; } #geslaagden .content .right .persoon .persoon-img { display: block; object-fit: cover; min-width: 100%; min-height: 400px; width: auto; height: auto; max-width: 100%; max-height: 400px; } #geslaagden .content .right .persoon .scooter-wrapper { position: absolute; top: 20px; left: 20px; width: 45px; height: 45px; background-color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; } #geslaagden .content .right .persoon .scooter-wrapper img { width: 25px; } #geslaagden .content .right .persoon .name-card { background-color: white; z-index: 999; position: absolute; bottom: 10px; width: 80%; text-align: center; padding: 10px 0; border-radius: 50px; left: 50%; -webkit-transform: translate(-50%); transform: translate(-50%); } .volgende-slaagt { background-color: #F2F6FF; padding: 100px 0; border-radius: 30px; } .volgende-slaagt .wrapper { max-width: 70%; } .volgende-slaagt .content { display: flex; justify-content: space-between; align-items: center; } .volgende-slaagt .content .left, .volgende-slaagt .content article { flex: 0 0 47%; } .volgende-slaagt .content .left { text-align: center; } .volgende-slaagt .content .left h2 img { width: 40px; position: relative; top: 8px; } .volgende-slaagt .content .left h2 { margin-bottom: 35px; text-align: left; } .volgende-slaagt .content .left p { line-height: 25px; font-weight: 500; text-align: left; } .volgende-slaagt .content .left .button-reg { margin-top: 25px; display: inline-block; } .volgende-slaagt .content article h2 { font-size: 35px; line-height: 40px; position: relative; font-weight: 700; margin: 0px; } .volgende-slaagt .content article iframe { width: 100%; height: 400px; border-radius: 25px; } #partners { padding: 100px 0 40px 0; } #partners .wrapper { max-width: 65%; } #partners .content { width: 100%; } #partners h3 { font-size: 29px; font-weight: 700; margin: 0 0 45px 0; text-align: center; } #partners .gallery .gallery-item img { margin: 0px auto; height: auto; width: 50%; filter: grayscale(1); opacity: 0.5; transition: 0.25s; } #partners .gallery .gallery-item img:hover { opacity: 1; filter: unset; } #partners figure.gallery-item { margin: 0px !important; } #blogs { padding: 100px 0; text-align: center; } #blogs .button-reg { display: inline-block; margin-top: 30px; } #blogs .wrapper { max-width: 60%; } #blogs .content { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } #blogs .wrapper .content .img-wrapper { overflow: hidden; padding: 0px; max-height: 200px; min-height: 200px; max-width: 100%; position: relative; border-radius: 20px; } #blogs .wrapper .content .img-wrapper img { display: block; object-fit: cover; min-width: 100%; max-width: 100%; min-height: 200px; max-height: 200px; width: auto; height: auto; } #blogs .content .blog:hover h4 { color: #F67A00 !important; } #blogs .content .blog .img-wrapper .blog-categories { position: absolute; top: 20px; left: 20px; } #blogs .content .blog .img-wrapper .blog-categories span { background-color: #f67a00; color: white; font-weight: 600; padding: 6px 12px; margin-right: 5px; border-radius: 5px 5px 14px 5px; font-size: 13px; } #blogs .wrapper .content .card h4 { color: black; font-size: 17px; transition: 0.2s; text-align: left; } #blogs .wrapper .content .card p { color: #000000; line-height: 25px; text-align: left; } #landkaart { display: none; } #landkaart .content article img { width: 80%; display: block; margin: 0px auto; } #landkaart h2 { text-align: center; } #slaging-container, .slaging-container { position: relative; width: 40px; z-index: 9999; } /* Links in punten-lijsten (origineel: inline styles; hier via CSS zodat de tekstblokken kaal blijven voor TinyMCE-literals) */ #pakketten .content .punten li a { text-decoration: underline; color: inherit; } /* Gecentreerd artikel in "Ook bij jou in de buurt" (origineel: inline style) */ .content-section.rev.last .content article.center-article { text-align: center; } .slaging { display: flex; align-items: center; } .slaging i { margin-left: 5px; cursor: pointer; } .slaging-content { /* display: block !important; */ width: 230px; bottom: 30px; left: -102px; position: absolute; border-radius: 10px; padding: 6px 9px; z-index: 999; background-color: #1d2327; font-size: 15px; line-height: 23px; color: white; font-weight: 500; } .slaging-content:after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; /* Adjust depending on the size of the triangle */ border-width: 5px; border-style: solid; border-color: #1d2327 transparent transparent transparent; } /* -------------------------------------------------------------------------- Aanmeldformulier in mobiele hero (visuele replica van het origineel; submit is in fase 1 nog niet functioneel) -------------------------------------------------------------------------- */ #hero-mb .content article .form-field { padding: 10px 1px; } #hero-mb .content article .form-field select, #hero-mb .content article .form-field input[type=tel] { display: block; width: 100%; max-width: 100%; height: 38px; padding: 6px 10px; border: 1px solid #cccccc; border-radius: 2px; background-color: white; color: #333333; font-size: 16px; line-height: 1.3; font-family: "Plus Jakarta Sans", sans-serif; -webkit-appearance: none; appearance: none; } #hero-mb .content article .form-field input[type=tel] { padding-left: 51px; } /* Telefoon-veld met landvlag (visuele replica intl-tel-input) */ #hero-mb .content article .phone-wrap { position: relative; } #hero-mb .content article .phone-wrap .flag { position: absolute; top: 0; left: 0; width: 45px; height: 38px; display: flex; align-items: center; justify-content: center; gap: 4px; } #hero-mb .content article .phone-wrap .flag img { width: 20px; display: block; } #hero-mb .content article .phone-wrap .flag:after { content: ""; display: inline-block; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #555; } #hero-mb .content article .form-submit { padding: 10px 0 0 0; } /* ========================================================================== Scooter theorie (scooter-theorie.aspx) — iDrive2GO Pixel-perfecte port van /online-scooter-theoriecursus/. Secties: hero-lp / content-section.rev.pakket / shortcode+pakketten.two / usp-bar / text-section / content-section (stappen) / text-with-sidebar (Partners-sectie komt uit default.scss; header/footer uit components.) ========================================================================== */ #pakketten.two .content { justify-content: center; } #pakketten.two .content .pakket { margin: 0 15px; } #pakketten.two .content .pakket:nth-of-type(2) { order: unset; } #pakketten.two .content .pakket:nth-child(1), #pakketten.two .content .pakket:nth-child(2) { height: unset; } #text-section { padding: 50px 0; } #text-section .button-reg { display: inline-block; margin-top: 20px; } #text-section .content { display: flex; justify-content: space-between; align-items: flex-start; } #text-section .content article { flex: 0 0 47%; } #text-section .content article h3 a { font-weight: 600; color: #F67A00; } #text-section .content article h3 a:hover { text-decoration: underline; } #text-section .content article p { line-height: 25px; color: #000000; } #text-section .content article p a { color: #F67A00; font-weight: 600; } #text-section .content article ul li { line-height: 25px; color: #000000; } #hero-lp { border-radius: 50px; background-image: url("/Resources/img/hero-theorie.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center 40%; position: relative; background-color: white; } #hero-lp .overlay { /* background: linear-gradient(89.64deg, rgba(246, 122, 0, 0.98) 0.32%, rgba(246, 122, 0, 0) 99.72%); */ /* background: linear-gradient(89.64deg, #f67a0033 0.32%, rgb(0 0 0 / 0%) 99.72%); */ /* background: linear-gradient(100.37deg, rgba(0, 0, 0, 0.4) -3.45%, transparent); */ background: linear-gradient(100.37deg, rgb(246, 122, 0) -3.45%, rgba(247, 133, 22, 0)) !important; border-radius: 50px; padding: 60px 0; } #hero-lp .overlay::before { content: ""; height: 99%; width: 70%; background-color: #BACDFF; position: absolute; top: 10px; left: -6px; border-radius: 50px; transform: rotate(-3deg); z-index: -9; } #hero-lp .content { display: flex; justify-content: space-between; align-items: flex-end; } #hero-lp .content article.left { flex: 0 0 55%; } #hero-lp .content article.left h1 { color: white; margin: 0px; font-size: 45px; line-height: 50px; font-weight: 900; margin-bottom: 25px; text-shadow: 0px 3px 0px rgba(0, 0, 0, 0.2); } #hero-lp .content article.left h1 span { color: #0047FF; font-style: italic; } #hero-lp .content article.left p { color: white; font-weight: 500; line-height: 25px; max-width: 80%; font-size: 18px; text-shadow: 0px 3px 0px rgba(0, 0, 0, 0.2); } #hero-lp .content article.left p span { color: white; font-weight: 600; } #hero-lp .content article.right .old-price { position: relative; top: -50px; right: -40px; background-color: #0047FF; width: 120px; height: 120px; border-radius: 50%; color: white; display: inline-flex; align-items: center; justify-content: center; } #hero-lp .content article.right .old-price h4 { font-size: 15px; margin: 0px; font-weight: 400; } #hero-lp .content article.right .old-price h3 { font-size: 30px; font-weight: 600; margin: 0px; position: relative; } #hero-lp .content article.right .old-price h3:after { content: ""; display: block; width: 100%; height: 50%; position: absolute; top: 0; left: 0; border-bottom: 2px solid; } #hero-lp .content article.right .new-price { position: relative; z-index: 9999; background-color: #F67A00; width: 180px; height: 180px; border-radius: 50%; color: white; display: inline-flex; align-items: center; justify-content: center; } #hero-lp .content article.right .new-price h4 { font-size: 18px; margin: 0px; font-weight: 400; } #hero-lp .content article.right .new-price h3 { font-size: 50px; font-weight: 600; margin: 0px; } #usp-bar { margin: 100px 0 30px 0; padding: 50px 0; background-color: #F2F6FF; border-radius: 30px; } #usp-bar .wrapper { max-width: 70%; } #usp-bar .content { display: flex; align-items: flex-start; justify-content: space-between; } #usp-bar .content article { flex: 0 0 23%; text-align: center; } #usp-bar .content article i { color: #F67A00; font-size: 30px; display: block; text-align: center; } #usp-bar .content article h4 { font-weight: 800; margin: 12px 0 15px 0; } #usp-bar .content article h4 span { color: #F67A00; } #usp-bar .content article p { color: #000000; line-height: 25px; display: none; } #text-with-sidebar { padding: 50px 0 100px 0; } #text-with-sidebar .wrapper { max-width: 63%; margin: 0px auto; } #text-with-sidebar .content article img { width: 100%; height: auto; } #text-with-sidebar .content .left h2 { font-size: 28px; margin-bottom: 10px; } #text-with-sidebar .content { display: flex; justify-content: space-between; align-items: flex-start; } #text-with-sidebar .content .left { flex: 0 0 58%; } #text-with-sidebar .content .left h3 { font-weight: 700; letter-spacing: -0.3px; } #text-with-sidebar .content .left p { color: #000000; line-height: 25px; } #text-with-sidebar .content .left ul li { margin: 7px 0; line-height: 25px; } #text-with-sidebar .content .left img { border-radius: 20px; } #text-with-sidebar .content .right { flex: 0 0 35%; position: sticky; top: 100px; } #text-with-sidebar .content .right .info-bar { background-color: #FEF2E3; position: relative; padding: 30px; border-radius: 25px; } #text-with-sidebar .content .right .info-bar h3 { margin: 0 0 20px 0; font-size: 22px; } #text-with-sidebar .content .right .info-bar ul { padding: 0px; margin: 35px 0; } #text-with-sidebar .content .right .info-bar ul li { margin: 15px 0; list-style: none; position: relative; padding-left: 20px; color: #000000; font-weight: 600; } #text-with-sidebar .content .right .info-bar ul li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: bold; color: #2EC4B6; position: absolute; top: 3px; left: 0px; } #text-with-sidebar .content .right .socials { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; margin-top: 50px; } #text-with-sidebar .content .right .socials a { display: flex; align-items: center; color: black; font-weight: 600; transition: 0.25s; } #text-with-sidebar .content .right .socials a:hover { color: #F67A00; } #text-with-sidebar .content .right .socials a img { margin-right: 10px; width: 25px; } #text-with-sidebar .content .right .socials a:nth-child(2) { justify-content: end; } #text-with-sidebar .content .right .button-reg { display: inline-block; margin-top: 0px; } .content-section.pakket .content { align-items: flex-start; } @media only screen and (max-width: 600px) { #pakketten.two { margin-top: 50px; } #text-section .content { flex-wrap: wrap; } #text-section .content article { flex: 0 0 100%; } #hero-lp { border-radius: 30px; } #hero-lp .overlay { padding: 50px 0; border-radius: 30px; } #hero-lp .overlay::before { content: ""; height: 99%; width: 70%; background-color: #BACDFF; position: absolute; top: 10px; left: -6px; border-radius: 50px; transform: rotate(-3deg); z-index: -9; } #hero-lp .overlay::before { content: none; } #hero-lp .wrapper { max-width: 90%; } #hero-lp .content { flex-wrap: wrap; } #hero-lp .content article.left { flex: 0 0 100%; } #hero-lp .content article.left h1 { font-size: 33px; line-height: 36px; } #hero-lp .content article.left p { max-width: unset; } #hero-lp .content article.right { display: none; } #usp-bar { padding: 25px; margin: 65px 0 0 0; } #usp-bar .wrapper { max-width: 90%; } } @media screen and (min-width: 601px) and (max-width: 767px) { #text-section .content { flex-wrap: wrap; } #text-section .content article { flex: 0 0 100%; } #hero-lp { border-radius: 30px; } #hero-lp .overlay { padding: 50px 0; border-radius: 30px; } #hero-lp .overlay::before { content: none; } #hero-lp .wrapper { max-width: 80%; } #hero-lp .content { flex-wrap: wrap; } #hero-lp .content article.left { flex: 0 0 100%; } #hero-lp .content article.left h1 { font-size: 33px; line-height: 36px; } #hero-lp .content article.left p { max-width: unset; font-size: 15px; } #hero-lp .content article.right { display: none; } #usp-bar { padding: 25px; margin: 65px 0 0 0; } #usp-bar .wrapper { max-width: 90%; } } @media screen and (min-width: 768px) and (max-width: 991px) { #text-section .content { flex-wrap: wrap; } #text-section .content article { flex: 0 0 47%; } #hero-lp { border-radius: 30px; } #hero-lp .overlay { padding: 50px 0; border-radius: 30px; } #hero-lp .overlay::before { content: none; } #hero-lp .wrapper { max-width: 80%; } #hero-lp .content { flex-wrap: wrap; } #hero-lp .content article.left { flex: 0 0 100%; } #hero-lp .content article.left h1 { font-size: 33px; line-height: 36px; } #hero-lp .content article.left p { max-width: unset; font-size: 15px; } #hero-lp .content article.right { display: none; } #usp-bar { padding: 25px; margin: 65px 0 0 0; } #usp-bar .wrapper { max-width: 90%; } } @media screen and (min-width: 992px) and (max-width: 1199px) { #pakketten.two .content { margin-top: 100px; display: flex !important; } #pakketten.two .content .pakket { flex: 0 0 30%; } #text-section { padding-top: 100px; } #text-section .content { flex-wrap: wrap; } #text-section .content article { flex: 0 0 48%; } #hero-lp .overlay { padding: 50px 0; } #hero-lp .wrapper { max-width: 80%; } #hero-lp .content { flex-wrap: wrap; } #hero-lp .content article.left { flex: 0 0 80%; } #hero-lp .content article.left h1 { font-size: 37px; line-height: 42px; } #hero-lp .content article.left p { max-width: 90%; } #hero-lp .content article.right { display: none; } #usp-bar { padding: 25px; margin: 65px 0 0 0; } #usp-bar .wrapper { max-width: 85%; } .content-section.pakket { padding-top: 80px; } } @media screen and (min-width: 1200px) and (max-width: 1600px) { #pakketten.two .content { display: flex; margin-top: 100px; } #text-section { padding-top: 100px; } #text-section .content { flex-wrap: wrap; } #text-section .content article { flex: 0 0 48%; } #hero-lp .overlay { padding: 50px 0; } #hero-lp .wrapper { max-width: 80%; } #hero-lp .content { flex-wrap: wrap; } #hero-lp .content article.left { flex: 0 0 60%; } #hero-lp .content article.left h1 { font-size: 39px; line-height: 45px; } #hero-lp .content article.left p { max-width: 90%; } #hero-lp .content article.right { display: none; } .content-section.pakket { padding-top: 80px; } } /* -------------------------------------------------------------------------- Template-specifieke regels (origineel: body-class page-template-landings-pagina-B, gezet via scooter-theorie.aspx.vb) -------------------------------------------------------------------------- */ /* Herstel: basisregel voor het sidebar-vormpje */ #text-with-sidebar .content .right .info-bar .single-post-sqr { z-index: -9; top: -21px; right: -30px; position: absolute; } .page-template-landings-pagina-B #pakketten .pakket-title-top { font-weight: 700; font-size: 29px; text-align: center; margin-bottom: 100px; margin-top: 0px; margin-left: auto; margin-right: auto; max-width: 40%; } .page-template-landings-pagina-B #pakketten .content { top: unset; background: unset; padding-bottom: 100px; } .page-template-landings-pagina-B #text-section { padding-top: 90px; text-align: center; } .page-template-landings-pagina-B #text-section h2, .page-template-landings-pagina-B #text-section .content article { text-align: left; } .page-template-landings-pagina-B #text-section .button-reg { display: inline-block; margin-top: 30px; } .page-template-landings-pagina-B #usp-bar { margin-top: 0px; } .page-template-landings-pagina-B .content-section .content .pakket { flex: 0 0 24%; position: relative; border: 2px solid #0047FF; padding: 20px; border-radius: 15px; filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); background-color: white; width: 60%; position: absolute; right: 0; top: -200px; } .page-template-landings-pagina-B .content-section .content .pakket .scooter-icon { position: absolute; top: 12px; right: 12px; width: 27px; } .page-template-landings-pagina-B .content-section .content .pakket .title { color: black; font-weight: 800; margin: 0px; font-size: 18px; height: 44px; } .page-template-landings-pagina-B .content-section .content .pakket h3 { font-size: 34px; margin: 10px 0px; display: flex; align-items: center; } .page-template-landings-pagina-B .content-section .content .pakket h3 span { color: #000000; font-size: 11.5px; font-weight: 500; max-width: 50%; margin-left: 10px; } .page-template-landings-pagina-B .content-section .content .pakket .desc { color: #000000; font-size: 15px; } .page-template-landings-pagina-B .content-section .content .pakket .button-reg { display: block; } .page-template-landings-pagina-B .content-section .content .punten { padding: 0px; margin: 25px 0 45px 0; } .page-template-landings-pagina-B .content-section .content .punten li { position: relative; list-style: none; font-size: 15px; margin: 7px 0; line-height: 24px; color: #000000; padding-left: 22px; } .page-template-landings-pagina-B .content-section .content .punten li:before { position: absolute; top: 1px; } .page-template-landings-pagina-B .content-section .content .punten li:before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: bold; color: #2EC4B6; position: absolute; top: 2px; left: 0px; } .page-template-landings-pagina-B .content-section .content article { position: relative; } @media only screen and (max-width: 600px) { .page-template-landings-pagina-B #pakketten .pakket-title-top { margin-bottom: 50px; max-width: unset; font-size: 25px; } .page-template-landings-pagina-B #pakketten .content { padding-bottom: 50px !important; } .page-template-landings-pagina-B #pakketten.two .content .pakket { margin: 0px; } .page-template-landings-pagina-B #pakketten .content { padding: 0px; } .page-template-landings-pagina-B #partners { padding: 50px 0; } .page-template-landings-pagina-A #text-with-sidebar .wrapper, .page-template-landings-pagina-B #text-with-sidebar .wrapper, .page-template-landings-pagina-C #text-with-sidebar .wrapper { max-width: 90%; } .page-template-landings-pagina-A #text-with-sidebar .content, .page-template-landings-pagina-B #text-with-sidebar .content, .page-template-landings-pagina-C #text-with-sidebar .content { flex-wrap: wrap; } .page-template-landings-pagina-A #text-with-sidebar .content .left, .page-template-landings-pagina-A #text-with-sidebar .content .right, .page-template-landings-pagina-B #text-with-sidebar .content .left, .page-template-landings-pagina-B #text-with-sidebar .content .right, .page-template-landings-pagina-C #text-with-sidebar .content .left, .page-template-landings-pagina-C #text-with-sidebar .content .right { flex: 0 0 100%; } .page-template-landings-pagina-A #text-with-sidebar .content .right, .page-template-landings-pagina-B #text-with-sidebar .content .right, .page-template-landings-pagina-C #text-with-sidebar .content .right { position: unset; top: unset; margin-top: 45px; } .page-template-landings-pagina-A #text-with-sidebar, .page-template-landings-pagina-B #text-with-sidebar, .page-template-landings-pagina-C #text-with-sidebar { padding: 0px; } .page-template-landings-pagina-B .content-section .content .pakket { position: unset; margin-top: 40px; width: 100%; } .page-template-landings-pagina-B #usp-bar { margin-top: 55px; } .page-template-landings-pagina-B #text-section { padding-top: 50px; padding-bottom: 0px; } .landings-pagina-B #text-with-sidebar { padding: 50px 0 0 0 !important; } .landings-pagina-B #partners { padding: 10px 0 50px 0; } .page-template-landings-pagina-B #text-with-sidebar { padding: 60px 0; } } @media screen and (min-width: 601px) and (max-width: 767px) { .page-template-landings-pagina-B #pakketten .pakket-title-top { margin-bottom: 50px; font-size: 25px; max-width: unset; } .page-template-landings-pagina-B #pakketten .content { padding-bottom: 50px !important; } .page-template-landings-pagina-B #pakketten.two .content .pakket { margin: 0px; } .page-template-landings-pagina-A #text-with-sidebar .wrapper, .page-template-landings-pagina-B #text-with-sidebar .wrapper, .page-template-landings-pagina-C #text-with-sidebar .wrapper { max-width: 80%; } .page-template-landings-pagina-A #text-with-sidebar .content, .page-template-landings-pagina-B #text-with-sidebar .content, .page-template-landings-pagina-C #text-with-sidebar .content { flex-wrap: wrap; } .page-template-landings-pagina-A #text-with-sidebar .content .left, .page-template-landings-pagina-A #text-with-sidebar .content .right, .page-template-landings-pagina-B #text-with-sidebar .content .left, .page-template-landings-pagina-B #text-with-sidebar .content .right, .page-template-landings-pagina-C #text-with-sidebar .content .left, .page-template-landings-pagina-C #text-with-sidebar .content .right { flex: 0 0 100%; } .page-template-landings-pagina-A #text-with-sidebar .content .right, .page-template-landings-pagina-B #text-with-sidebar .content .right, .page-template-landings-pagina-C #text-with-sidebar .content .right { position: unset; top: unset; margin-top: 45px; } .page-template-landings-pagina-A #text-with-sidebar, .page-template-landings-pagina-B #text-with-sidebar, .page-template-landings-pagina-C #text-with-sidebar { padding: 0px 0 35px 0; } .page-template-landings-pagina-A #text-with-sidebar .content .right .info-bar .single-post-sqr, .page-template-landings-pagina-B #text-with-sidebar .content .right .info-bar .single-post-sqr, .page-template-landings-pagina-C #text-with-sidebar .content .right .info-bar .single-post-sqr { top: -27px; width: 75%; } .page-template-landings-pagina-B .content-section .content .pakket { position: unset; width: 70%; margin: 50px auto 0 auto; display: block; } .page-template-landings-pagina-B #usp-bar { margin-top: 55px; } .page-template-landings-pagina-B #text-section { padding-top: 50px; } .page-template-landings-pagina-B #text-with-sidebar { padding: 50px 0 0 0 !important; } .page-template-landings-pagina-B #partners { padding: 10px 0 50px 0 !important; } } @media screen and (min-width: 768px) and (max-width: 991px) { .page-template-landings-pagina-B #pakketten .pakket-title-top { margin-bottom: 40px; max-width: unset; font-size: 25px; } .page-template-landings-pagina-B #pakketten .content { padding-bottom: 60px !important; } .page-template-landings-pagina-A #text-with-sidebar .wrapper, .page-template-landings-pagina-B #text-with-sidebar .wrapper, .page-template-landings-pagina-C #text-with-sidebar .wrapper { max-width: 80%; } .page-template-landings-pagina-A #text-with-sidebar .content, .page-template-landings-pagina-B #text-with-sidebar .content, .page-template-landings-pagina-C #text-with-sidebar .content { flex-wrap: wrap; } .page-template-landings-pagina-A #text-with-sidebar .content .left, .page-template-landings-pagina-B #text-with-sidebar .content .left, .page-template-landings-pagina-C #text-with-sidebar .content .left { flex: 0 0 100%; } .page-template-landings-pagina-A #text-with-sidebar .content .right, .page-template-landings-pagina-B #text-with-sidebar .content .right, .page-template-landings-pagina-C #text-with-sidebar .content .right { flex: 0 0 60%; } .page-template-landings-pagina-A #text-with-sidebar .content .right, .page-template-landings-pagina-B #text-with-sidebar .content .right, .page-template-landings-pagina-C #text-with-sidebar .content .right { position: unset; top: unset; margin-top: 45px; } .page-template-landings-pagina-A #text-with-sidebar, .page-template-landings-pagina-B #text-with-sidebar, .page-template-landings-pagina-C #text-with-sidebar { padding: 0px 0 50px 0; } .page-template-landings-pagina-A #text-with-sidebar .content .left img, .page-template-landings-pagina-B #text-with-sidebar .content .left img, .page-template-landings-pagina-C #text-with-sidebar .content .left img { width: 60%; } .page-template-landings-pagina-A #text-with-sidebar .content .right .info-bar .single-post-sqr, .page-template-landings-pagina-B #text-with-sidebar .content .right .info-bar .single-post-sqr, .page-template-landings-pagina-C #text-with-sidebar .content .right .info-bar .single-post-sqr { top: -27px; width: 75%; } .page-template-landings-pagina-B .content-section .content .pakket { position: unset; width: 70%; margin: 70px auto 0 auto; display: block; } .page-template-landings-pagina-B #usp-bar { margin-top: 70px; } .page-template-landings-pagina-B #text-section { padding-top: 70px; } .page-template-landings-pagina-B #text-with-sidebar { padding: 50px 0 0 0 !important; } .page-template-landings-pagina-B #partners { padding: 25px 0 70px 0 !important; } } @media screen and (min-width: 992px) and (max-width: 1199px) { .page-template-landings-pagina-A #text-with-sidebar .wrapper, .page-template-landings-pagina-B #text-with-sidebar .wrapper, .page-template-landings-pagina-C #text-with-sidebar .wrapper { max-width: 76%; } .page-template-landings-pagina-A #text-with-sidebar .content .right .info-bar, .page-template-landings-pagina-B #text-with-sidebar .content .right .info-bar, .page-template-landings-pagina-C #text-with-sidebar .content .right .info-bar { padding: 23px; } .page-template-landings-pagina-A #text-with-sidebar .content .right .info-bar ul li, .page-template-landings-pagina-B #text-with-sidebar .content .right .info-bar ul li, .page-template-landings-pagina-C #text-with-sidebar .content .right .info-bar ul li { font-size: 14px; } .page-template-landings-pagina-A #text-with-sidebar .content .right .socials, .page-template-landings-pagina-B #text-with-sidebar .content .right .socials, .page-template-landings-pagina-C #text-with-sidebar .content .right .socials { grid-template-columns: repeat(1, minmax(0, 1fr)); grid-gap: 20px; } .page-template-landings-pagina-A #text-with-sidebar .content .right .socials a:nth-child(2), .page-template-landings-pagina-B #text-with-sidebar .content .right .socials a:nth-child(2), .page-template-landings-pagina-C #text-with-sidebar .content .right .socials a:nth-child(2) { justify-content: unset; } .page-template-landings-pagina-B #hero-lp .content article.left { flex: 0 0 55%; } .page-template-landings-pagina-B .content-section .content .pakket { width: 90%; } .page-template-landings-pagina-B #usp-bar { margin-top: 70px; } .page-template-landings-pagina-B #text-section { padding-top: 70px; } .page-template-landings-pagina-B #text-with-sidebar { padding: 90px 0 70px 0 !important; } .page-template-landings-pagina-B #partners { padding: 25px 0 70px 0 !important; } } @media screen and (min-width: 1200px) and (max-width: 1600px) { .page-template-landings-pagina-B #pakketten .pakket-title-top { margin-bottom: 50px; margin-top: 70px; } .page-template-landings-pagina-B #pakketten .content { padding-bottom: 50px !important; } .page-template-landings-pagina-A #text-with-sidebar .wrapper, .page-template-landings-pagina-B #text-with-sidebar .wrapper, .page-template-landings-pagina-C #text-with-sidebar .wrapper { max-width: 65%; } .page-template-landings-pagina-A #text-with-sidebar, .page-template-landings-pagina-B #text-with-sidebar, .page-template-landings-pagina-C #text-with-sidebar { padding: 10px 0 50px 0; } .page-template-landings-pagina-A #text-with-sidebar .content .right .info-bar, .page-template-landings-pagina-B #text-with-sidebar .content .right .info-bar, .page-template-landings-pagina-C #text-with-sidebar .content .right .info-bar { padding: 23px; } .page-template-landings-pagina-A #text-with-sidebar .content .right .info-bar ul li, .page-template-landings-pagina-B #text-with-sidebar .content .right .info-bar ul li, .page-template-landings-pagina-C #text-with-sidebar .content .right .info-bar ul li { font-size: 14px; } .page-template-landings-pagina-A #text-with-sidebar .content .right .socials, .page-template-landings-pagina-B #text-with-sidebar .content .right .socials, .page-template-landings-pagina-C #text-with-sidebar .content .right .socials { grid-template-columns: repeat(1, minmax(0, 1fr)); grid-gap: 20px; } .page-template-landings-pagina-A #text-with-sidebar .content .right .socials a:nth-child(2), .page-template-landings-pagina-B #text-with-sidebar .content .right .socials a:nth-child(2), .page-template-landings-pagina-C #text-with-sidebar .content .right .socials a:nth-child(2) { justify-content: unset; } .page-template-landings-pagina-B #hero-lp .content article.left { flex: 0 0 55%; } .page-template-landings-pagina-B .content-section .content .pakket { width: 90%; } .page-template-landings-pagina-B #usp-bar { margin-top: 70px; } .page-template-landings-pagina-B #text-section { padding-top: 70px; } .page-template-landings-pagina-B #text-with-sidebar { padding: 90px 0 70px 0 !important; } .page-template-landings-pagina-B #partners { padding: 25px 0 70px 0 !important; } } /* ========================================================================== Scooter praktijk (scooter-praktijk.aspx) — iDrive2GO Pixel-perfecte port van /scooter-praktijk/. Gebruikt hetzelfde template als scooter-theorie (landings-pagina-B); alle sectie-styling staat in pages/scooter-theorie.scss. Hier alleen de paginaspecifieke regels (origineel: .page-id-12745) onder de semantische body-class .page-scooter-praktijk. ========================================================================== */ /* Video in de introsectie (origineel: WordPress mediaelement-player; hier een lichte native