/*doc --- title: Modals name: modals category: Modules --- Open dialog Open dialog with Logo Open dialog without close button ```js_example $(function(){ $("#my-nice-dialog-open").on('click touch', function(e){ e.preventDefault(); $('#my-nice-dialog').modal(); return false; }); $("#with-logo-dialog-open").on('click touch', function(e){ e.preventDefault(); $('#with-logo-dialog').modal(); return false; }); $("#dont-close-dialog-open").on('click touch', function(e){ e.preventDefault(); $('#dont-close-dialog').modal(); return false; }); }); ``` ```html_example ``` ```html_example ``` ```html_example ``` */ .modal--open { overflow: hidden; position: fixed; left: 0; right: 0; } .modal { display: none; overflow: auto; overflow-y: scroll; background-color: rgba(0, 0, 0, 0.3); position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; outline: 0; -webkit-overflow-scrolling: touch; } .modal.fade .modal__dialog { -webkit-transform: translate(0, -25%); -moz-transform: translate(0, -25%); -ms-transform: translate(0, -25%); -o-transform: translate(0, -25%); transform: translate(0, -25%); -webkit-transition: -webkit-transform 0.3s ease-out; -moz-transition: -moz-transform 0.3s ease-out; -o-transition: -o-transform 0.3s ease-out; transition: transform 0.3s ease-out; } .modal.in .modal__dialog { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } .modal__dialog { position: fixed; top: 10px; bottom: 10px; right: 20px; left: 10px; } .modal__content { position: absolute; top: 0; bottom: 0; right: 0; left: 0; background-color: white; border: 1px solid #999999; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 5px; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); background-clip: padding-box; outline: none; } .modal__backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000000; } .modal__backdrop.fade { opacity: 0; filter: alpha(opacity=0); } .modal__backdrop.in { opacity: 0.5; filter: alpha(opacity=50); } .modal__header { padding: 30px; text-align: center; border-bottom: 1px solid #666666; } .btn.modal__close { padding: 0; text-align: center; position: absolute; right: 15px; top: 15px; border-radius: 30px; line-height: 15px; width: 30px; height: 30px; background-color: white; border: 1px solid #00aeef; color: #00aeef; } .modal__close .icon { color: #00aeef; } .modal__close:hover .icon { color: white; } .modal__title { margin: 0; padding-top: 0; } .modal__body { position: relative; padding-top: 30px; padding-bottom: 15px; padding-left: 1.25em; padding-right: 1.25em; overflow: auto; } .modal__body .icon--checkmark { color: #80c342; } .modal__footer { background-color: #eeeeee; padding-top: 20px; padding-bottom: 20px; padding-left: 1.25em; padding-right: 1.25em; text-align: center; position: absolute; left: 0; bottom: 0; width: 100%; border-radius: 0 0 5px 5px; } .modal__link { border-bottom: 0 none; text-decoration: underline; text-align: center; line-height: 2.375em; } @media all and (min-width: 46.25em) { .modal__dialog { width: 700px; margin: 10% auto; } .modal__content { -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); } } .modal__logos { display: block; text-align: center; } .modal__logo { margin-left: 0.625em; margin-right: 0.625em; margin-top: 1.65em; margin-bottom: 0; height: 44px; width: auto; display: inline-block; border: 0 none; } .modal__logo img { height: 44px; width: auto; } .modal__body .js-height, .modal__body [data-mh] { height: auto; min-height: 100px; } @-webkit-viewport { width: device-width; } @-moz-viewport { width: device-width; } @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } @viewport { width: device-width; } @font-face { font-family: "museosanslight"; src: url("../../../clientlibs/kbc/fonts/websites/museo/font/museosans-300-webfont.eot"); src: url("../../../clientlibs/kbc/fonts/websites/museo/font/museosans-300-webfont.eot?#iefix") format("embedded-opentype"), url("../../../clientlibs/kbc/fonts/websites/museo/font/museosans-300-webfont.woff") format("woff"), url("../../../clientlibs/kbc/fonts/websites/museo/font/museosans-300-webfont.ttf") format("truetype"), url("../../../clientlibs/kbc/fonts/websites/museo/font/museosans-300-webfont.svg#museosanslight") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "museosansregular"; src: url("../../../clientlibs/kbc/fonts/websites/museo/font/museosans-500-webfont.eot"); src: url("../../../clientlibs/kbc/fonts/websites/museo/font/museosans-500-webfont.eot?#iefix") format("embedded-opentype"), url("../../../clientlibs/kbc/fonts/websites/museo/font/museosans-500-webfont.woff") format("woff"), url("../../../clientlibs/kbc/fonts/websites/museo/font/museosans-500-webfont.ttf") format("truetype"), url("../../../clientlibs/kbc/fonts/websites/museo/font/museosans-500-webfont.svg#museosansregular") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "museosansbold"; src: url("../../../clientlibs/kbc/fonts/websites/museo/font/museosans-700-webfont.eot"); src: url("../../../clientlibs/kbc/fonts/websites/museo/font/museosans-700-webfont.eot?#iefix") format("embedded-opentype"), url("../../../clientlibs/kbc/fonts/websites/museo/font/museosans-700-webfont.woff") format("woff"), url("../../../clientlibs/kbc/fonts/websites/museo/font/museosans-700-webfont.ttf") format("truetype"), url("../../../clientlibs/kbc/fonts/websites/museo/font/museosans-700-webfont.svg#museosansbold") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "LubalinDemi"; font-weight: normal; font-style: normal; src: url("../../../clientlibs/kbc/fonts/shared/lubalin/font/LubalinDemi.eot"); src: url("../../../clientlibs/kbc/fonts/shared/lubalin/font/LubalinDemi.woff") format("woff"), url("../../../clientlibs/kbc/fonts/shared/lubalin/font/LubalinDemi.ttf") format("truetype"), url("../../../clientlibs/kbc/fonts/shared/lubalin/font/LubalinDemi.svg#LubalinDemi") format("svg"); } @font-face { font-family: "LubalinBook"; font-weight: normal; font-style: normal; src: url("../../../clientlibs/kbc/fonts/shared/lubalin/font/LubalinBook.eot"); src: url("../../../clientlibs/kbc/fonts/shared/lubalin/font/LubalinBook.woff") format("woff"), url("../../../clientlibs/kbc/fonts/shared/lubalin/font/LubalinBook.ttf") format("truetype"), url("../../../clientlibs/kbc/fonts/shared/lubalin/font/LubalinBook.svg#LubalinBook") format("svg"); } @font-face { font-family: "latobold"; src: url("../../../clientlibs/kbc/fonts/shared/lato/font/lato-bold-webfont.eot"); src: url("../../../clientlibs/kbc/fonts/shared/lato/font/lato-bold-webfont.woff") format("woff"), url("../../../clientlibs/kbc/fonts/shared/lato/font/lato-bold-webfont.ttf") format("truetype"), url("../../../clientlibs/kbc/fonts/shared/lato/font/lato-bold-webfont.svg") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "latoregular"; src: url("../../../clientlibs/kbc/fonts/shared/lato/font/lato-regular-webfont.eot"); src: url("../../../clientlibs/kbc/fonts/shared/lato/font/lato-regular-webfont.woff") format("woff"), url("../../../clientlibs/kbc/fonts/shared/lato/font/lato-regular-webfont.ttf") format("truetype"), url("../../../clientlibs/kbc/fonts/shared/lato/font/lato-regular-webfont.svg#latobold") format("svg"); font-weight: normal; font-style: normal; } @charset "UTF-8"; /*! * Font Awesome 4.6.3 by @davegandy - http://fontawesome.io - @fontawesome * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) */ /* FONT PATH * -------------------------- */ @font-face { font-family: "FontAwesome"; src: url("../../../clientlibs/kbc/fonts/shared/fontawesome/font/fontawesome-webfont.v463.eot"); src: url("../../../clientlibs/kbc/fonts/shared/fontawesome/font/fontawesome-webfont.v463.eot#iefix") format("embedded-opentype"), url("../../../clientlibs/kbc/fonts/shared/fontawesome/font/fontawesome-webfont.v463.woff2") format("woff2"), url("../../../clientlibs/kbc/fonts/shared/fontawesome/font/fontawesome-webfont.v463.woff") format("woff"), url("../../../clientlibs/kbc/fonts/shared/fontawesome/font/fontawesome-webfont.v463.ttf") format("truetype"), url("../../../clientlibs/kbc/fonts/shared/fontawesome/font/fontawesome-webfont.v463.svg#fontawesomeregular") format("svg"); font-weight: normal; font-style: normal; } .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* makes the font 33% larger relative to the icon container */ .fa-lg { font-size: 1.33333333em; line-height: 0.75em; vertical-align: -15%; } .fa-2x { font-size: 2em; } .fa-3x { font-size: 3em; } .fa-4x { font-size: 4em; } .fa-5x { font-size: 5em; } .fa-fw { width: 1.28571429em; text-align: center; } .fa-ul { padding-left: 0; margin-left: 2.14285714em; list-style-type: none; } .fa-ul > li { position: relative; } .fa-li { position: absolute; left: -2.14285714em; width: 2.14285714em; top: 0.14285714em; text-align: center; } .fa-li.fa-lg { left: -1.85714286em; } .fa-border { padding: 0.2em 0.25em 0.15em; border: solid 0.08em #eeeeee; border-radius: 0.1em; } .fa-pull-left { float: left; } .fa-pull-right { float: right; } .fa.fa-pull-left { margin-right: 0.3em; } .fa.fa-pull-right { margin-left: 0.3em; } /* Deprecated as of 4.4.0 */ .pull-right { float: right; } .pull-left { float: left; } .fa.pull-left { margin-right: 0.3em; } .fa.pull-right { margin-left: 0.3em; } .fa-spin { -webkit-animation: fa-spin 2s infinite linear; animation: fa-spin 2s infinite linear; } .fa-pulse { -webkit-animation: fa-spin 1s infinite steps(8); animation: fa-spin 1s infinite steps(8); } @-webkit-keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes fa-spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } .fa-rotate-90 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .fa-rotate-180 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .fa-rotate-270 { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .fa-flip-horizontal { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)"; -webkit-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); } .fa-flip-vertical { -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"; -webkit-transform: scale(1, -1); -ms-transform: scale(1, -1); transform: scale(1, -1); } :root .fa-rotate-90, :root .fa-rotate-180, :root .fa-rotate-270, :root .fa-flip-horizontal, :root .fa-flip-vertical { filter: none; } .fa-stack { position: relative; display: inline-block; width: 2em; height: 2em; line-height: 2em; vertical-align: middle; } .fa-stack-1x, .fa-stack-2x { position: absolute; left: 0; width: 100%; text-align: center; } .fa-stack-1x { line-height: inherit; } .fa-stack-2x { font-size: 2em; } .fa-inverse { color: #ffffff; } /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen readers do not read off random characters that represent icons */ .fa-glass:before { content: ""; } .fa-music:before { content: ""; } .fa-search:before { content: ""; } .fa-envelope-o:before { content: ""; } .fa-heart:before { content: ""; } .fa-star:before { content: ""; } .fa-star-o:before { content: ""; } .fa-user:before { content: ""; } .fa-film:before { content: ""; } .fa-th-large:before { content: ""; } .fa-th:before { content: ""; } .fa-th-list:before { content: ""; } .fa-check:before { content: ""; } .fa-remove:before, .fa-close:before, .fa-times:before { content: ""; } .fa-search-plus:before { content: ""; } .fa-search-minus:before { content: ""; } .fa-power-off:before { content: ""; } .fa-signal:before { content: ""; } .fa-gear:before, .fa-cog:before { content: ""; } .fa-trash-o:before { content: ""; } .fa-home:before { content: ""; } .fa-file-o:before { content: ""; } .fa-clock-o:before { content: ""; } .fa-road:before { content: ""; } .fa-download:before { content: ""; } .fa-arrow-circle-o-down:before { content: ""; } .fa-arrow-circle-o-up:before { content: ""; } .fa-inbox:before { content: ""; } .fa-play-circle-o:before { content: ""; } .fa-rotate-right:before, .fa-repeat:before { content: ""; } .fa-refresh:before { content: ""; } .fa-list-alt:before { content: ""; } .fa-lock:before { content: ""; } .fa-flag:before { content: ""; } .fa-headphones:before { content: ""; } .fa-volume-off:before { content: ""; } .fa-volume-down:before { content: ""; } .fa-volume-up:before { content: ""; } .fa-qrcode:before { content: ""; } .fa-barcode:before { content: ""; } .fa-tag:before { content: ""; } .fa-tags:before { content: ""; } .fa-book:before { content: ""; } .fa-bookmark:before { content: ""; } .fa-print:before { content: ""; } .fa-camera:before { content: ""; } .fa-font:before { content: ""; } .fa-bold:before { content: ""; } .fa-italic:before { content: ""; } .fa-text-height:before { content: ""; } .fa-text-width:before { content: ""; } .fa-align-left:before { content: ""; } .fa-align-center:before { content: ""; } .fa-align-right:before { content: ""; } .fa-align-justify:before { content: ""; } .fa-list:before { content: ""; } .fa-dedent:before, .fa-outdent:before { content: ""; } .fa-indent:before { content: ""; } .fa-video-camera:before { content: ""; } .fa-photo:before, .fa-image:before, .fa-picture-o:before { content: ""; } .fa-pencil:before { content: ""; } .fa-map-marker:before { content: ""; } .fa-adjust:before { content: ""; } .fa-tint:before { content: ""; } .fa-edit:before, .fa-pencil-square-o:before { content: ""; } .fa-share-square-o:before { content: ""; } .fa-check-square-o:before { content: ""; } .fa-arrows:before { content: ""; } .fa-step-backward:before { content: ""; } .fa-fast-backward:before { content: ""; } .fa-backward:before { content: ""; } .fa-play:before { content: ""; } .fa-pause:before { content: ""; } .fa-stop:before { content: ""; } .fa-forward:before { content: ""; } .fa-fast-forward:before { content: ""; } .fa-step-forward:before { content: ""; } .fa-eject:before { content: ""; } .fa-chevron-left:before { content: ""; } .fa-chevron-right:before { content: ""; } .fa-plus-circle:before { content: ""; } .fa-minus-circle:before { content: ""; } .fa-times-circle:before { content: ""; } .fa-check-circle:before { content: ""; } .fa-question-circle:before { content: ""; } .fa-info-circle:before { content: ""; } .fa-crosshairs:before { content: ""; } .fa-times-circle-o:before { content: ""; } .fa-check-circle-o:before { content: ""; } .fa-ban:before { content: ""; } .fa-arrow-left:before { content: ""; } .fa-arrow-right:before { content: ""; } .fa-arrow-up:before { content: ""; } .fa-arrow-down:before { content: ""; } .fa-mail-forward:before, .fa-share:before { content: ""; } .fa-expand:before { content: ""; } .fa-compress:before { content: ""; } .fa-plus:before { content: ""; } .fa-minus:before { content: ""; } .fa-asterisk:before { content: ""; } .fa-exclamation-circle:before { content: ""; } .fa-gift:before { content: ""; } .fa-leaf:before { content: ""; } .fa-fire:before { content: ""; } .fa-eye:before { content: ""; } .fa-eye-slash:before { content: ""; } .fa-warning:before, .fa-exclamation-triangle:before { content: ""; } .fa-plane:before { content: ""; } .fa-calendar:before { content: ""; } .fa-random:before { content: ""; } .fa-comment:before { content: ""; } .fa-magnet:before { content: ""; } .fa-chevron-up:before { content: ""; } .fa-chevron-down:before { content: ""; } .fa-retweet:before { content: ""; } .fa-shopping-cart:before { content: ""; } .fa-folder:before { content: ""; } .fa-folder-open:before { content: ""; } .fa-arrows-v:before { content: ""; } .fa-arrows-h:before { content: ""; } .fa-bar-chart-o:before, .fa-bar-chart:before { content: ""; } .fa-twitter-square:before { content: ""; } .fa-facebook-square:before { content: ""; } .fa-camera-retro:before { content: ""; } .fa-key:before { content: ""; } .fa-gears:before, .fa-cogs:before { content: ""; } .fa-comments:before { content: ""; } .fa-thumbs-o-up:before { content: ""; } .fa-thumbs-o-down:before { content: ""; } .fa-star-half:before { content: ""; } .fa-heart-o:before { content: ""; } .fa-sign-out:before { content: ""; } .fa-linkedin-square:before { content: ""; } .fa-thumb-tack:before { content: ""; } .fa-external-link:before { content: ""; } .fa-sign-in:before { content: ""; } .fa-trophy:before { content: ""; } .fa-github-square:before { content: ""; } .fa-upload:before { content: ""; } .fa-lemon-o:before { content: ""; } .fa-phone:before { content: ""; } .fa-square-o:before { content: ""; } .fa-bookmark-o:before { content: ""; } .fa-phone-square:before { content: ""; } .fa-twitter:before { content: ""; } .fa-facebook-f:before, .fa-facebook:before { content: ""; } .fa-github:before { content: ""; } .fa-unlock:before { content: ""; } .fa-credit-card:before { content: ""; } .fa-feed:before, .fa-rss:before { content: ""; } .fa-hdd-o:before { content: ""; } .fa-bullhorn:before { content: ""; } .fa-bell:before { content: ""; } .fa-certificate:before { content: ""; } .fa-hand-o-right:before { content: ""; } .fa-hand-o-left:before { content: ""; } .fa-hand-o-up:before { content: ""; } .fa-hand-o-down:before { content: ""; } .fa-arrow-circle-left:before { content: ""; } .fa-arrow-circle-right:before { content: ""; } .fa-arrow-circle-up:before { content: ""; } .fa-arrow-circle-down:before { content: ""; } .fa-globe:before { content: ""; } .fa-wrench:before { content: ""; } .fa-tasks:before { content: ""; } .fa-filter:before { content: ""; } .fa-briefcase:before { content: ""; } .fa-arrows-alt:before { content: ""; } .fa-group:before, .fa-users:before { content: ""; } .fa-chain:before, .fa-link:before { content: ""; } .fa-cloud:before { content: ""; } .fa-flask:before { content: ""; } .fa-cut:before, .fa-scissors:before { content: ""; } .fa-copy:before, .fa-files-o:before { content: ""; } .fa-paperclip:before { content: ""; } .fa-save:before, .fa-floppy-o:before { content: ""; } .fa-square:before { content: ""; } .fa-navicon:before, .fa-reorder:before, .fa-bars:before { content: ""; } .fa-list-ul:before { content: ""; } .fa-list-ol:before { content: ""; } .fa-strikethrough:before { content: ""; } .fa-underline:before { content: ""; } .fa-table:before { content: ""; } .fa-magic:before { content: ""; } .fa-truck:before { content: ""; } .fa-pinterest:before { content: ""; } .fa-pinterest-square:before { content: ""; } .fa-google-plus-square:before { content: ""; } .fa-google-plus:before { content: ""; } .fa-money:before { content: ""; } .fa-caret-down:before { content: ""; } .fa-caret-up:before { content: ""; } .fa-caret-left:before { content: ""; } .fa-caret-right:before { content: ""; } .fa-columns:before { content: ""; } .fa-unsorted:before, .fa-sort:before { content: ""; } .fa-sort-down:before, .fa-sort-desc:before { content: ""; } .fa-sort-up:before, .fa-sort-asc:before { content: ""; } .fa-envelope:before { content: ""; } .fa-linkedin:before { content: ""; } .fa-rotate-left:before, .fa-undo:before { content: ""; } .fa-legal:before, .fa-gavel:before { content: ""; } .fa-dashboard:before, .fa-tachometer:before { content: ""; } .fa-comment-o:before { content: ""; } .fa-comments-o:before { content: ""; } .fa-flash:before, .fa-bolt:before { content: ""; } .fa-sitemap:before { content: ""; } .fa-umbrella:before { content: ""; } .fa-paste:before, .fa-clipboard:before { content: ""; } .fa-lightbulb-o:before { content: ""; } .fa-exchange:before { content: ""; } .fa-cloud-download:before { content: ""; } .fa-cloud-upload:before { content: ""; } .fa-user-md:before { content: ""; } .fa-stethoscope:before { content: ""; } .fa-suitcase:before { content: ""; } .fa-bell-o:before { content: ""; } .fa-coffee:before { content: ""; } .fa-cutlery:before { content: ""; } .fa-file-text-o:before { content: ""; } .fa-building-o:before { content: ""; } .fa-hospital-o:before { content: ""; } .fa-ambulance:before { content: ""; } .fa-medkit:before { content: ""; } .fa-fighter-jet:before { content: ""; } .fa-beer:before { content: ""; } .fa-h-square:before { content: ""; } .fa-plus-square:before { content: ""; } .fa-angle-double-left:before { content: ""; } .fa-angle-double-right:before { content: ""; } .fa-angle-double-up:before { content: ""; } .fa-angle-double-down:before { content: ""; } .fa-angle-left:before { content: ""; } .fa-angle-right:before { content: ""; } .fa-angle-up:before { content: ""; } .fa-angle-down:before { content: ""; } .fa-desktop:before { content: ""; } .fa-laptop:before { content: ""; } .fa-tablet:before { content: ""; } .fa-mobile-phone:before, .fa-mobile:before { content: ""; } .fa-circle-o:before { content: ""; } .fa-quote-left:before { content: ""; } .fa-quote-right:before { content: ""; } .fa-spinner:before { content: ""; } .fa-circle:before { content: ""; } .fa-mail-reply:before, .fa-reply:before { content: ""; } .fa-github-alt:before { content: ""; } .fa-folder-o:before { content: ""; } .fa-folder-open-o:before { content: ""; } .fa-smile-o:before { content: ""; } .fa-frown-o:before { content: ""; } .fa-meh-o:before { content: ""; } .fa-gamepad:before { content: ""; } .fa-keyboard-o:before { content: ""; } .fa-flag-o:before { content: ""; } .fa-flag-checkered:before { content: ""; } .fa-terminal:before { content: ""; } .fa-code:before { content: ""; } .fa-mail-reply-all:before, .fa-reply-all:before { content: ""; } .fa-star-half-empty:before, .fa-star-half-full:before, .fa-star-half-o:before { content: ""; } .fa-location-arrow:before { content: ""; } .fa-crop:before { content: ""; } .fa-code-fork:before { content: ""; } .fa-unlink:before, .fa-chain-broken:before { content: ""; } .fa-question:before { content: ""; } .fa-info:before { content: ""; } .fa-exclamation:before { content: ""; } .fa-superscript:before { content: ""; } .fa-subscript:before { content: ""; } .fa-eraser:before { content: ""; } .fa-puzzle-piece:before { content: ""; } .fa-microphone:before { content: ""; } .fa-microphone-slash:before { content: ""; } .fa-shield:before { content: ""; } .fa-calendar-o:before { content: ""; } .fa-fire-extinguisher:before { content: ""; } .fa-rocket:before { content: ""; } .fa-maxcdn:before { content: ""; } .fa-chevron-circle-left:before { content: ""; } .fa-chevron-circle-right:before { content: ""; } .fa-chevron-circle-up:before { content: ""; } .fa-chevron-circle-down:before { content: ""; } .fa-html5:before { content: ""; } .fa-css3:before { content: ""; } .fa-anchor:before { content: ""; } .fa-unlock-alt:before { content: ""; } .fa-bullseye:before { content: ""; } .fa-ellipsis-h:before { content: ""; } .fa-ellipsis-v:before { content: ""; } .fa-rss-square:before { content: ""; } .fa-play-circle:before { content: ""; } .fa-ticket:before { content: ""; } .fa-minus-square:before { content: ""; } .fa-minus-square-o:before { content: ""; } .fa-level-up:before { content: ""; } .fa-level-down:before { content: ""; } .fa-check-square:before { content: ""; } .fa-pencil-square:before { content: ""; } .fa-external-link-square:before { content: ""; } .fa-share-square:before { content: ""; } .fa-compass:before { content: ""; } .fa-toggle-down:before, .fa-caret-square-o-down:before { content: ""; } .fa-toggle-up:before, .fa-caret-square-o-up:before { content: ""; } .fa-toggle-right:before, .fa-caret-square-o-right:before { content: ""; } .fa-euro:before, .fa-eur:before { content: ""; } .fa-gbp:before { content: ""; } .fa-dollar:before, .fa-usd:before { content: ""; } .fa-rupee:before, .fa-inr:before { content: ""; } .fa-cny:before, .fa-rmb:before, .fa-yen:before, .fa-jpy:before { content: ""; } .fa-ruble:before, .fa-rouble:before, .fa-rub:before { content: ""; } .fa-won:before, .fa-krw:before { content: ""; } .fa-bitcoin:before, .fa-btc:before { content: ""; } .fa-file:before { content: ""; } .fa-file-text:before { content: ""; } .fa-sort-alpha-asc:before { content: ""; } .fa-sort-alpha-desc:before { content: ""; } .fa-sort-amount-asc:before { content: ""; } .fa-sort-amount-desc:before { content: ""; } .fa-sort-numeric-asc:before { content: ""; } .fa-sort-numeric-desc:before { content: ""; } .fa-thumbs-up:before { content: ""; } .fa-thumbs-down:before { content: ""; } .fa-youtube-square:before { content: ""; } .fa-youtube:before { content: ""; } .fa-xing:before { content: ""; } .fa-xing-square:before { content: ""; } .fa-youtube-play:before { content: ""; } .fa-dropbox:before { content: ""; } .fa-stack-overflow:before { content: ""; } .fa-instagram:before { content: ""; } .fa-flickr:before { content: ""; } .fa-adn:before { content: ""; } .fa-bitbucket:before { content: ""; } .fa-bitbucket-square:before { content: ""; } .fa-tumblr:before { content: ""; } .fa-tumblr-square:before { content: ""; } .fa-long-arrow-down:before { content: ""; } .fa-long-arrow-up:before { content: ""; } .fa-long-arrow-left:before { content: ""; } .fa-long-arrow-right:before { content: ""; } .fa-apple:before { content: ""; } .fa-windows:before { content: ""; } .fa-android:before { content: ""; } .fa-linux:before { content: ""; } .fa-dribbble:before { content: ""; } .fa-skype:before { content: ""; } .fa-foursquare:before { content: ""; } .fa-trello:before { content: ""; } .fa-female:before { content: ""; } .fa-male:before { content: ""; } .fa-gittip:before, .fa-gratipay:before { content: ""; } .fa-sun-o:before { content: ""; } .fa-moon-o:before { content: ""; } .fa-archive:before { content: ""; } .fa-bug:before { content: ""; } .fa-vk:before { content: ""; } .fa-weibo:before { content: ""; } .fa-renren:before { content: ""; } .fa-pagelines:before { content: ""; } .fa-stack-exchange:before { content: ""; } .fa-arrow-circle-o-right:before { content: ""; } .fa-arrow-circle-o-left:before { content: ""; } .fa-toggle-left:before, .fa-caret-square-o-left:before { content: ""; } .fa-dot-circle-o:before { content: ""; } .fa-wheelchair:before { content: ""; } .fa-vimeo-square:before { content: ""; } .fa-turkish-lira:before, .fa-try:before { content: ""; } .fa-plus-square-o:before { content: ""; } .fa-space-shuttle:before { content: ""; } .fa-slack:before { content: ""; } .fa-envelope-square:before { content: ""; } .fa-wordpress:before { content: ""; } .fa-openid:before { content: ""; } .fa-institution:before, .fa-bank:before, .fa-university:before { content: ""; } .fa-mortar-board:before, .fa-graduation-cap:before { content: ""; } .fa-yahoo:before { content: ""; } .fa-google:before { content: ""; } .fa-reddit:before { content: ""; } .fa-reddit-square:before { content: ""; } .fa-stumbleupon-circle:before { content: ""; } .fa-stumbleupon:before { content: ""; } .fa-delicious:before { content: ""; } .fa-digg:before { content: ""; } .fa-pied-piper-pp:before { content: ""; } .fa-pied-piper-alt:before { content: ""; } .fa-drupal:before { content: ""; } .fa-joomla:before { content: ""; } .fa-language:before { content: ""; } .fa-fax:before { content: ""; } .fa-building:before { content: ""; } .fa-child:before { content: ""; } .fa-paw:before { content: ""; } .fa-spoon:before { content: ""; } .fa-cube:before { content: ""; } .fa-cubes:before { content: ""; } .fa-behance:before { content: ""; } .fa-behance-square:before { content: ""; } .fa-steam:before { content: ""; } .fa-steam-square:before { content: ""; } .fa-recycle:before { content: ""; } .fa-automobile:before, .fa-car:before { content: ""; } .fa-cab:before, .fa-taxi:before { content: ""; } .fa-tree:before { content: ""; } .fa-spotify:before { content: ""; } .fa-deviantart:before { content: ""; } .fa-soundcloud:before { content: ""; } .fa-database:before { content: ""; } .fa-file-pdf-o:before { content: ""; } .fa-file-word-o:before { content: ""; } .fa-file-excel-o:before { content: ""; } .fa-file-powerpoint-o:before { content: ""; } .fa-file-photo-o:before, .fa-file-picture-o:before, .fa-file-image-o:before { content: ""; } .fa-file-zip-o:before, .fa-file-archive-o:before { content: ""; } .fa-file-sound-o:before, .fa-file-audio-o:before { content: ""; } .fa-file-movie-o:before, .fa-file-video-o:before { content: ""; } .fa-file-code-o:before { content: ""; } .fa-vine:before { content: ""; } .fa-codepen:before { content: ""; } .fa-jsfiddle:before { content: ""; } .fa-life-bouy:before, .fa-life-buoy:before, .fa-life-saver:before, .fa-support:before, .fa-life-ring:before { content: ""; } .fa-circle-o-notch:before { content: ""; } .fa-ra:before, .fa-resistance:before, .fa-rebel:before { content: ""; } .fa-ge:before, .fa-empire:before { content: ""; } .fa-git-square:before { content: ""; } .fa-git:before { content: ""; } .fa-y-combinator-square:before, .fa-yc-square:before, .fa-hacker-news:before { content: ""; } .fa-tencent-weibo:before { content: ""; } .fa-qq:before { content: ""; } .fa-wechat:before, .fa-weixin:before { content: ""; } .fa-send:before, .fa-paper-plane:before { content: ""; } .fa-send-o:before, .fa-paper-plane-o:before { content: ""; } .fa-history:before { content: ""; } .fa-circle-thin:before { content: ""; } .fa-header:before { content: ""; } .fa-paragraph:before { content: ""; } .fa-sliders:before { content: ""; } .fa-share-alt:before { content: ""; } .fa-share-alt-square:before { content: ""; } .fa-bomb:before { content: ""; } .fa-soccer-ball-o:before, .fa-futbol-o:before { content: ""; } .fa-tty:before { content: ""; } .fa-binoculars:before { content: ""; } .fa-plug:before { content: ""; } .fa-slideshare:before { content: ""; } .fa-twitch:before { content: ""; } .fa-yelp:before { content: ""; } .fa-newspaper-o:before { content: ""; } .fa-wifi:before { content: ""; } .fa-calculator:before { content: ""; } .fa-paypal:before { content: ""; } .fa-google-wallet:before { content: ""; } .fa-cc-visa:before { content: ""; } .fa-cc-mastercard:before { content: ""; } .fa-cc-discover:before { content: ""; } .fa-cc-amex:before { content: ""; } .fa-cc-paypal:before { content: ""; } .fa-cc-stripe:before { content: ""; } .fa-bell-slash:before { content: ""; } .fa-bell-slash-o:before { content: ""; } .fa-trash:before { content: ""; } .fa-copyright:before { content: ""; } .fa-at:before { content: ""; } .fa-eyedropper:before { content: ""; } .fa-paint-brush:before { content: ""; } .fa-birthday-cake:before { content: ""; } .fa-area-chart:before { content: ""; } .fa-pie-chart:before { content: ""; } .fa-line-chart:before { content: ""; } .fa-lastfm:before { content: ""; } .fa-lastfm-square:before { content: ""; } .fa-toggle-off:before { content: ""; } .fa-toggle-on:before { content: ""; } .fa-bicycle:before { content: ""; } .fa-bus:before { content: ""; } .fa-ioxhost:before { content: ""; } .fa-angellist:before { content: ""; } .fa-cc:before { content: ""; } .fa-shekel:before, .fa-sheqel:before, .fa-ils:before { content: ""; } .fa-meanpath:before { content: ""; } .fa-buysellads:before { content: ""; } .fa-connectdevelop:before { content: ""; } .fa-dashcube:before { content: ""; } .fa-forumbee:before { content: ""; } .fa-leanpub:before { content: ""; } .fa-sellsy:before { content: ""; } .fa-shirtsinbulk:before { content: ""; } .fa-simplybuilt:before { content: ""; } .fa-skyatlas:before { content: ""; } .fa-cart-plus:before { content: ""; } .fa-cart-arrow-down:before { content: ""; } .fa-diamond:before { content: ""; } .fa-ship:before { content: ""; } .fa-user-secret:before { content: ""; } .fa-motorcycle:before { content: ""; } .fa-street-view:before { content: ""; } .fa-heartbeat:before { content: ""; } .fa-venus:before { content: ""; } .fa-mars:before { content: ""; } .fa-mercury:before { content: ""; } .fa-intersex:before, .fa-transgender:before { content: ""; } .fa-transgender-alt:before { content: ""; } .fa-venus-double:before { content: ""; } .fa-mars-double:before { content: ""; } .fa-venus-mars:before { content: ""; } .fa-mars-stroke:before { content: ""; } .fa-mars-stroke-v:before { content: ""; } .fa-mars-stroke-h:before { content: ""; } .fa-neuter:before { content: ""; } .fa-genderless:before { content: ""; } .fa-facebook-official:before { content: ""; } .fa-pinterest-p:before { content: ""; } .fa-whatsapp:before { content: ""; } .fa-server:before { content: ""; } .fa-user-plus:before { content: ""; } .fa-user-times:before { content: ""; } .fa-hotel:before, .fa-bed:before { content: ""; } .fa-viacoin:before { content: ""; } .fa-train:before { content: ""; } .fa-subway:before { content: ""; } .fa-medium:before { content: ""; } .fa-yc:before, .fa-y-combinator:before { content: ""; } .fa-optin-monster:before { content: ""; } .fa-opencart:before { content: ""; } .fa-expeditedssl:before { content: ""; } .fa-battery-4:before, .fa-battery-full:before { content: ""; } .fa-battery-3:before, .fa-battery-three-quarters:before { content: ""; } .fa-battery-2:before, .fa-battery-half:before { content: ""; } .fa-battery-1:before, .fa-battery-quarter:before { content: ""; } .fa-battery-0:before, .fa-battery-empty:before { content: ""; } .fa-mouse-pointer:before { content: ""; } .fa-i-cursor:before { content: ""; } .fa-object-group:before { content: ""; } .fa-object-ungroup:before { content: ""; } .fa-sticky-note:before { content: ""; } .fa-sticky-note-o:before { content: ""; } .fa-cc-jcb:before { content: ""; } .fa-cc-diners-club:before { content: ""; } .fa-clone:before { content: ""; } .fa-balance-scale:before { content: ""; } .fa-hourglass-o:before { content: ""; } .fa-hourglass-1:before, .fa-hourglass-start:before { content: ""; } .fa-hourglass-2:before, .fa-hourglass-half:before { content: ""; } .fa-hourglass-3:before, .fa-hourglass-end:before { content: ""; } .fa-hourglass:before { content: ""; } .fa-hand-grab-o:before, .fa-hand-rock-o:before { content: ""; } .fa-hand-stop-o:before, .fa-hand-paper-o:before { content: ""; } .fa-hand-scissors-o:before { content: ""; } .fa-hand-lizard-o:before { content: ""; } .fa-hand-spock-o:before { content: ""; } .fa-hand-pointer-o:before { content: ""; } .fa-hand-peace-o:before { content: ""; } .fa-trademark:before { content: ""; } .fa-registered:before { content: ""; } .fa-creative-commons:before { content: ""; } .fa-gg:before { content: ""; } .fa-gg-circle:before { content: ""; } .fa-tripadvisor:before { content: ""; } .fa-odnoklassniki:before { content: ""; } .fa-odnoklassniki-square:before { content: ""; } .fa-get-pocket:before { content: ""; } .fa-wikipedia-w:before { content: ""; } .fa-safari:before { content: ""; } .fa-chrome:before { content: ""; } .fa-firefox:before { content: ""; } .fa-opera:before { content: ""; } .fa-internet-explorer:before { content: ""; } .fa-tv:before, .fa-television:before { content: ""; } .fa-contao:before { content: ""; } .fa-500px:before { content: ""; } .fa-amazon:before { content: ""; } .fa-calendar-plus-o:before { content: ""; } .fa-calendar-minus-o:before { content: ""; } .fa-calendar-times-o:before { content: ""; } .fa-calendar-check-o:before { content: ""; } .fa-industry:before { content: ""; } .fa-map-pin:before { content: ""; } .fa-map-signs:before { content: ""; } .fa-map-o:before { content: ""; } .fa-map:before { content: ""; } .fa-commenting:before { content: ""; } .fa-commenting-o:before { content: ""; } .fa-houzz:before { content: ""; } .fa-vimeo:before { content: ""; } .fa-black-tie:before { content: ""; } .fa-fonticons:before { content: ""; } .fa-reddit-alien:before { content: ""; } .fa-edge:before { content: ""; } .fa-credit-card-alt:before { content: ""; } .fa-codiepie:before { content: ""; } .fa-modx:before { content: ""; } .fa-fort-awesome:before { content: ""; } .fa-usb:before { content: ""; } .fa-product-hunt:before { content: ""; } .fa-mixcloud:before { content: ""; } .fa-scribd:before { content: ""; } .fa-pause-circle:before { content: ""; } .fa-pause-circle-o:before { content: ""; } .fa-stop-circle:before { content: ""; } .fa-stop-circle-o:before { content: ""; } .fa-shopping-bag:before { content: ""; } .fa-shopping-basket:before { content: ""; } .fa-hashtag:before { content: ""; } .fa-bluetooth:before { content: ""; } .fa-bluetooth-b:before { content: ""; } .fa-percent:before { content: ""; } .fa-gitlab:before { content: ""; } .fa-wpbeginner:before { content: ""; } .fa-wpforms:before { content: ""; } .fa-envira:before { content: ""; } .fa-universal-access:before { content: ""; } .fa-wheelchair-alt:before { content: ""; } .fa-question-circle-o:before { content: ""; } .fa-blind:before { content: ""; } .fa-audio-description:before { content: ""; } .fa-volume-control-phone:before { content: ""; } .fa-braille:before { content: ""; } .fa-assistive-listening-systems:before { content: ""; } .fa-asl-interpreting:before, .fa-american-sign-language-interpreting:before { content: ""; } .fa-deafness:before, .fa-hard-of-hearing:before, .fa-deaf:before { content: ""; } .fa-glide:before { content: ""; } .fa-glide-g:before { content: ""; } .fa-signing:before, .fa-sign-language:before { content: ""; } .fa-low-vision:before { content: ""; } .fa-viadeo:before { content: ""; } .fa-viadeo-square:before { content: ""; } .fa-snapchat:before { content: ""; } .fa-snapchat-ghost:before { content: ""; } .fa-snapchat-square:before { content: ""; } .fa-pied-piper:before { content: ""; } .fa-first-order:before { content: ""; } .fa-yoast:before { content: ""; } .fa-themeisle:before { content: ""; } .fa-google-plus-circle:before, .fa-google-plus-official:before { content: ""; } .fa-fa:before, .fa-font-awesome:before { content: ""; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .sr-only-focusable:active, .sr-only-focusable:focus { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; } /** * Fix for vh on ipad iOS 7. * http://caniuse.com/#feat=viewport-unit-for-ipads */ @media all and (min-width: 61.25em) { .banner[data-component-type=usp-banner] .bp4-grid-8 { width: auto; float: none; } .banner[data-component-type=usp-banner] .bp4-push-left-2 { margin-left: 0; } } .banner.bg-color--white { background-color: #ffffff; } .banner.bg-color--grey { background-color: #f5f5f5; } @media all and (min-width: 46.25em) { .usp-banner { text-align: center; } } .cq-wcm-edit .usp-banner { min-height: 100px; } .usp-banner__title.beta, .usp-banner__title.alpha, .usp-banner__title.gamma { margin-bottom: 1.5em; padding-top: 0; } @media all and (min-width: 61.25em) { .usp-banner__title.beta, .usp-banner__title.alpha, .usp-banner__title.gamma { max-width: 66.66667%; margin-left: auto; margin-right: auto; line-height: 1.44375em; } } @media all and (min-width: 61.25em) { .usp-banner__title.beta { font-size: 2em; } } .usp-banner__items { margin-bottom: 0; } @media all and (min-width: 46.25em) { .usp-banner__items { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } } .usp-banner__item { display: block; } @media all and (min-width: 46.25em) { .usp-banner__item { width: 50%; padding: 0 1em; } } @media all and (min-width: 61.25em) { .usp-banner__item { width: 25%; } } .usp-banner__item__image { height: 70px; margin-bottom: 30px; text-align: center; } .usp-banner__item__image .icon, .usp-banner__item__image .fa, .usp-banner__item__image img { display: inline-block; vertical-align: middle; } .usp-banner__item__image .icon, .usp-banner__item__image .fa { font-size: 70px; } .usp-banner__item__image img { width: auto; height: 100%; border-radius: 0; } @media all and (min-width: 46.25em) { .usp-banner__item__text { max-width: 210px; margin: 0 auto; } } /** * Fix for vh on ipad iOS 7. * http://caniuse.com/#feat=viewport-unit-for-ipads */ .textimage::before, .textimage::after { display: table; content: ""; } .textimage::after { clear: both; } .textimage ul { list-style: disc; } .textimage ol { list-style: decimal; } .textimage ul, .textimage ol { list-style-position: outside !important; padding-left: 1.2em; } .textimage ul li, .textimage ol li { margin-bottom: 6px; } .textimage :last-child { margin-bottom: 0; } .textimage p + ul, .textimage p + ol { margin-top: -1.25em; } .textimage p > br:last-child { margin-bottom: 0; } img, .image { border-radius: 3px; } .textimage { clear: both; margin-bottom: 0.825em; } .textimage .image--wide img { width: 100%; border-radius: 0; } .textimage h3 { padding-top: 0 !important; } .textimage .image--inset img { border-radius: 0; } @media all and (min-width: 46.25em) { .textimage .image--inset img { border-radius: 5px; } } .image { margin-left: -12px; margin-right: -12px; border-radius: 0; } @media all and (min-width: 46.25em) { .image { margin-left: 0; margin-right: 0; border-radius: 3px; } } @media all and (min-width: 61.25em) { .image--inset { width: 66%; margin-top: 8px; } } .image--inset img { border-radius: 5px; width: 100%; } .image--inset figcaption { font-style: italic; color: #7c90a0; padding-top: 0.4125em; padding-bottom: 0.825em; } @media all and (min-width: 61.25em) { .image--inset figcaption { padding-top: 0.4125em; padding-bottom: 1.65em; } } .image--small { width: 25%; } .image--medium { width: 50%; } .image--large { width: 66%; } .image--full { width: 100%; } .image--wide { width: 100%; } .image--wide img { width: 100%; border-radius: 0; } .image--inset--left { padding-left: 0em; padding-right: 0em; float: left; margin: 0 1.65em 1.65em 0; } .image--inset--center { padding-left: 0em; padding-right: 1.5em; float: none; margin-left: auto; margin-right: auto; text-align: center; } .image--inset--center figcaption { text-align: center; display: block; } .image--inset--left + .text ul, .image--inset--left + .text ol { list-style-position: inside !important; } .image--inset--right { padding-left: 0em; padding-right: 0em; float: right; margin: 0 0 1.65em 1.65em; } .image--inset--right figcaption { text-align: right; } .pagelink { padding-top: 0em; padding-bottom: 1.65em; } .textimage figure a { border-bottom: 0; } .media--hide-on-mobile { display: none; } @media all and (min-width: 46.25em) { .media--hide-on-mobile { display: block; } } /** * Fix for vh on ipad iOS 7. * http://caniuse.com/#feat=viewport-unit-for-ipads */ .step-banner__title { text-align: center; word-break: normal; } @media all and (min-width: 46.25em) { .step-banner__title { margin-bottom: 3.3em; } } .step-banner__items { overflow: hidden; } @media all and (min-width: 46.25em) { .step-banner__items { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; } } .step-banner__item { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; padding: 0.625em 0; position: relative; } @media all and (min-width: 46.25em) { .step-banner__item { -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-flex-basis: 0px; -moz-flex-basis: 0px; flex-basis: 0px; -ms-flex-preferred-size: 0px; -webkit-flex-grow: 1; -moz-flex-grow: 1; flex-grow: 1; -ms-flex-positive: 1; padding: 0.625em; } } .step-banner__item::before { content: ""; background-color: #f5f5f5; border: 0.15625em solid #f5f5f5; height: 100%; position: absolute; margin: 0 auto; left: 1.09375em; top: 2.875em; z-index: 0; } .bg-color--grey .step-banner__item::before { background-color: #ffffff; border-color: #ffffff; } @media all and (min-width: 46.25em) { .step-banner__item::before { left: 0; width: 100%; height: auto; top: 3.28125em; } } @media all and (min-width: 46.25em) { .step-banner__item:first-child::before { border-radius: 0.15625em 0 0 0.15625em; } } .step-banner__item:last-child::before { display: none; } @media all and (min-width: 46.25em) { .step-banner__item:last-child::before { display: block; border-radius: 0 0.15625em 0.15625em 0; } } .step-banner__item__circle { border-radius: 50%; background-color: #f5f5f5; color: #00aeef; width: 2.5em; height: 2.5em; z-index: 1; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; -webkit-flex: 0 0 auto; -moz-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } @media all and (min-width: 46.25em) { .step-banner__item__circle { width: 5.625em; height: 5.625em; } } .bg-color--grey .step-banner__item__circle { background-color: #ffffff; } .step-banner__item__stepnr { font-size: 1.5em; font-family: "LubalinDemi"; } @media all and (min-width: 46.25em) { .step-banner__item__stepnr { font-size: 2.5em; } } .step-banner__item__icon { font-size: 1.5em; } @media all and (min-width: 46.25em) { .step-banner__item__icon { font-size: 2em; } } .step-banner__item__text { margin: 0.3125em 0 0 1.25em; line-height: normal; width: 100%; } @media all and (min-width: 46.25em) { .step-banner__item__text { text-align: center; margin: 2.5em 0 0 0; } } /** * Fix for vh on ipad iOS 7. * http://caniuse.com/#feat=viewport-unit-for-ipads */ .btn__sharing--mail, .btn__sharing--linkedin, .btn__sharing--twitter, .btn__sharing--facebook { font-size: 16px; height: 24px; } .btn__sharing--mail, .btn__sharing--linkedin, .btn__sharing--twitter, .btn__sharing--facebook { padding: 0; margin: 0; } .feedback { padding-top: 1.65em; padding-bottom: 1.65em; } @media all and (max-width: 81.24em) { .feedback { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-box-direction: reverse; -moz-box-direction: reverse; box-direction: reverse; -webkit-flex-direction: column-reverse; -moz-flex-direction: column-reverse; flex-direction: column-reverse; -ms-flex-direction: column-reverse; margin-bottom: 48px; } } .useful-feedback { margin: 0 auto; width: auto; } .useful__answer { border: 0; } .useful__answer--positive { color: #009985; margin: 0 24px; } @media all and (max-width: 81.24em) { .useful__answer--positive { margin-left: 0; } } .useful__answer--positive svg { vertical-align: sub; } .useful__answer--negative { color: #01366a; } .useful__answer--negative svg { vertical-align: sub; } .useful__wrapper { padding: 0; } .useful__wrapper p { margin-bottom: 0; } @media all and (max-width: 81.24em) { .useful__wrapper p { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; text-align: center; } } .useful__question { margin: 0; font-size: 16px; line-height: 24px; font-weight: 700; } @media all and (max-width: 81.24em) { .useful__question { border-top: 0; padding-top: 0; margin-bottom: 18px; } } @media all and (max-width: 81.24em) { .useful__answers { padding-left: 0; } } .useful__answer { font-size: 16px; line-height: 24px; font-weight: 700; } .social-feedback { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; -webkit-flex-direction: row; -moz-flex-direction: row; flex-direction: row; -ms-flex-direction: row; -webkit-box-pack: end; -moz-box-pack: end; box-pack: end; -webkit-justify-content: flex-end; -moz-justify-content: flex-end; -ms-justify-content: flex-end; -o-justify-content: flex-end; justify-content: flex-end; -ms-flex-pack: end; } @media all and (max-width: 81.24em) { .social-feedback { float: none; margin: 41px auto; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } } @media all and (min-width: 46.25em) and (max-width: 61.24em) { .social-feedback { -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; } } .social-feedback__sharing__text { font-size: 16px; line-height: 24px; font-weight: 700; line-height: 30px; margin: auto 0; } .social-feedback__sharing__wrapper { margin-left: 0; margin-right: 0; text-align: center; } @media all and (min-width: 46.25em) { .social-feedback__sharing__wrapper { text-align: left; } } .btn__sharing { cursor: pointer; display: inline-block; height: 24px; width: 24px; border: 1px solid #ffffff; background-color: #ffffff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0); } .btn__sharing:hover, .btn__sharing:focus { border: 1px solid white; background-color: white; } .btn__sharing:active { background-color: white; box-shadow: none; } .btn__sharing--facebook { color: #3b5998; } .btn__sharing--twitter { color: #01abee; } .btn__sharing--linkedin { color: #007fb2; } .btn__sharing--mail { color: #7f9ea9; } .btn__sharing--mail svg { vertical-align: middle; } /** * Fix for vh on ipad iOS 7. * http://caniuse.com/#feat=viewport-unit-for-ipads */ .table--responsive__container > table, .table--responsive { margin-bottom: 1.5em; border-left: 0 none; } @media all and (min-width: 46.25em) { .table--responsive__container > table, .table--responsive { font-size: 0.9em; border-left: 1px solid #ddd; } } @media all and (min-width: 61.25em) { .table--responsive__container > table, .table--responsive { font-size: 1em; } } .table--responsive__container > table thead, .table--responsive thead { position: absolute; clip: rect(1px, 1px, 1px, 1px); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden; } @media all and (min-width: 46.25em) { .table--responsive__container > table thead, .table--responsive thead { position: relative; clip: auto; height: auto; width: auto; overflow: auto; } } .table--responsive__container > table thead th:first-of-type, .table--responsive thead th:first-of-type { text-align: left; } .table--responsive__container > table tbody, .table--responsive__container > table tr, .table--responsive__container > table th, .table--responsive__container > table td, .table--responsive tbody, .table--responsive tr, .table--responsive th, .table--responsive td { display: block; padding: 0; text-align: left; white-space: normal; } .table--responsive__container > table th, .table--responsive__container > table td, .table--responsive th, .table--responsive td { padding: 0.5em; vertical-align: middle; border-left: 1px solid #ddd; } @media all and (min-width: 30em) { .table--responsive__container > table th, .table--responsive__container > table td, .table--responsive th, .table--responsive td { padding: 0.75em 0.5em; } } @media all and (min-width: 46.25em) { .table--responsive__container > table th, .table--responsive__container > table td, .table--responsive th, .table--responsive td { display: table-cell; padding: 0.5em; border-left: 0 none; } } @media all and (min-width: 61.25em) { .table--responsive__container > table th, .table--responsive__container > table td, .table--responsive th, .table--responsive td { padding: 0.75em 0.5em; } } @media all and (min-width: 81.25em) { .table--responsive__container > table th, .table--responsive__container > table td, .table--responsive th, .table--responsive td { padding: 0.75em; } } .table--responsive__container > table caption, .table--responsive caption { margin-bottom: 1em; font-size: 1em; font-weight: bold; text-align: center; } @media all and (min-width: 46.25em) { .table--responsive__container > table caption, .table--responsive caption { font-size: 1.5em; } } .table--responsive__container > table tfoot, .table--responsive tfoot { font-size: 0.8em; font-style: italic; } @media all and (min-width: 61.25em) { .table--responsive__container > table tfoot, .table--responsive tfoot { font-size: 0.9em; } } @media all and (min-width: 46.25em) { .table--responsive__container > table thead th, .table--responsive thead th { font-weight: normal; text-align: center; background-color: #ffffff; color: #003665; border-bottom: 5px solid #f99d1c; } .table--responsive__container > table thead th:first-child, .table--responsive thead th:first-child { border-radius: 5px 0 0 0; } .table--responsive__container > table thead th:last-child, .table--responsive thead th:last-child { border-radius: 0 5px 0 0; } .table--responsive__container > table tbody tr:last-child th:first-child, .table--responsive tbody tr:last-child th:first-child { border-radius: 0 0 0 5px; } .table--responsive__container > table tbody tr:last-child td:last-child, .table--responsive tbody tr:last-child td:last-child { border-radius: 0 0 5px 0; } .table--responsive__container > table tr, .table--responsive tr { display: table-row; } } @media all and (min-width: 46.25em) { .table--responsive__container > table tbody, .table--responsive tbody { display: table-row-group; } } .table--responsive__container > table tbody tr, .table--responsive tbody tr { margin-bottom: 0; } @media all and (min-width: 46.25em) { .table--responsive__container > table tbody tr, .table--responsive tbody tr { display: table-row; border-width: 1px; } } .table--responsive__container > table tbody tr:last-of-type, .table--responsive tbody tr:last-of-type { margin-bottom: 0; } .table--responsive__container > table tbody th[scope=row], .table--responsive tbody th[scope=row] { color: #ffffff; border-right: 1px solid #ddd; } @media all and (min-width: 46.25em) { .table--responsive__container > table tbody th[scope=row], .table--responsive tbody th[scope=row] { background-color: #f5f5f5; color: #003665; text-align: left; font-weight: normal; } } .table--responsive__container > table tbody tr:first-child th[scope=row]:first-child, .table--responsive tbody tr:first-child th[scope=row]:first-child { border-radius: 5px 5px 0 0; } .table--responsive__container > table tbody tr:last-child td:last-child, .table--responsive tbody tr:last-child td:last-child { border-radius: 0 0 5px 5px; } @media all and (min-width: 46.25em) { .table--responsive__container > table tbody tr:first-child th[scope=row]:first-child, .table--responsive tbody tr:first-child th[scope=row]:first-child { border-radius: 0; } .table--responsive__container > table tbody tr:last-child td:last-child, .table--responsive tbody tr:last-child td:last-child { border-radius: 0 0 5px 0; } } .table--responsive__container > table tbody td, .table--responsive tbody td { text-align: right; } @media all and (min-width: 46.25em) { .table--responsive__container > table tbody td, .table--responsive tbody td { text-align: center; } } .table--responsive__container > table tbody td[data-type=currency], .table--responsive tbody td[data-type=currency] { text-align: right; } .table--responsive__container > table tbody td[data-title]::before, .table--responsive__container > table tbody th[data-title]::before, .table--responsive tbody td[data-title]::before, .table--responsive tbody th[data-title]::before { content: attr(data-title); float: left; } @media all and (min-width: 46.25em) { .table--responsive__container > table tbody td[data-title]::before, .table--responsive__container > table tbody th[data-title]::before, .table--responsive tbody td[data-title]::before, .table--responsive tbody th[data-title]::before { content: none; } } .table--responsive__container > table tbody td[data-title]::before, .table--responsive tbody td[data-title]::before { font-size: 0.8em; color: #003665; } @media all and (min-width: 30em) { .table--responsive__container > table tbody td[data-title]::before, .table--responsive tbody td[data-title]::before { font-size: 0.9em; } } .table--responsive__container > table tbody th[data-title]::before, .table--responsive tbody th[data-title]::before { margin-right: 5px; } /** * Fix for vh on ipad iOS 7. * http://caniuse.com/#feat=viewport-unit-for-ipads */ .block--news-block__short .block__link::before, .block--news-block__short .block__link::after { display: table; content: ""; } .block--news-block__short .block__link::after { clear: both; } .block--app__header-title, .block--app__header, .block--news-block__short .blog--intro__short, .block--news-block__short .block__link { overflow: hidden; _overflow: visible; zoom: 1; } .block--app__header-title, .block--app__header, .block--news-block__short .blog--intro__short, .block--news-block__short .block__link { width: 10000px; } .block--app__image-container, .block--news-block__short figure { padding-right: 1em; } .block--app__image-container, .block--news-block__short figure, .block--app__header-title, .block--app__header, .block--news-block__short .blog--intro__short, .block--news-block__short .block__link { display: table-cell; vertical-align: top; } .block--app__image-container, .block--app__header-title { vertical-align: middle; } @media all and (max-width: 46.24em) { .grid:last-child > a > .block--grid-block, .grid:last-child > a > .block--news-block__ultra-short { margin-top: 0em; margin-bottom: 1.65em; } .block--a .block__header { display: block; height: auto; width: 5em; min-height: 5em; position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px 0 0 3px; } .block--a .block__title__wrapper, .block--a .block__body { position: relative; display: table; padding: 0; min-height: 5em; padding-left: 1em; margin-left: 5em; top: 0; } .block--a .block__title__wrapper .gamma, .block--a .block__title__wrapper .delta, .block--a .block__body .gamma, .block--a .block__body .delta { display: table-cell; font-size: 1.125em; margin: 0; padding: 0.625em 0.625em 0.625em 0; vertical-align: middle; border-left: 0 none; } .block--a .block__title__wrapper time, .block--a .block__body time { display: block; padding-bottom: 0; } .block--a .block__title__wrapper time + .delta, .block--a .block__body time + .delta { display: block; padding-top: 0; } .block--a .block__title__wrapper .block__body__description, .block--a .block__title__wrapper p, .block--a .block__body .block__body__description, .block--a .block__body p { display: none; } } .block--a.block--title-only { min-height: 4.375em; } .block--a .block__body--title-only { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; margin-left: 0; padding: 0; height: 100%; min-height: 0; padding-left: 0.9375em; padding-right: 0.9375em; padding-top: 0.825em; padding-bottom: 0.825em; } .block--a .block__body--title-only .delta { padding: 0; margin: 0; text-align: left; } .fieldset { border: 0; margin: 0; padding: 0; } .block--grid-block, .block--news-block__ultra-short { font-size: 1em; line-height: 1.65em; margin-bottom: 1.65em; margin-bottom: 1.5em; position: relative; border-radius: 3px; background-color: #ffffff; } @media all and (min-width: 46.25em) { .block--grid-block .delta, .block--news-block__ultra-short .delta { word-wrap: break-word; overflow-wrap: break-word; } } @media all and (min-width: 81.25em) { .site__main--home .block--grid-block, .site__main--home .block--news-block__ultra-short { min-height: 330px; } } .block--grid-block > .beta, .block--news-block__ultra-short > .beta { margin-bottom: 0; padding: 15px; line-height: 1; } a .block--grid-block, a .block--news-block__ultra-short { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; } @media all and (min-width: 46.25em) { a .block--grid-block, a .block--news-block__ultra-short { -webkit-transition: 0.22s ease-in-out; -moz-transition: 0.22s ease-in-out; transition: 0.22s ease-in-out; -webkit-transition-property: color, box-shadow, -webkit-transform; -moz-transition-property: color, box-shadow, -moz-transform; transition-property: color, box-shadow, transform; } a .block--grid-block:hover, a .block--news-block__ultra-short:hover { box-shadow: 1px 1px 3px #b7c2cb; -webkit-transform: translate(-1px, -1px); -moz-transform: translate(-1px, -1px); -ms-transform: translate(-1px, -1px); -o-transform: translate(-1px, -1px); transform: translate(-1px, -1px); } } .block__lower { height: 10.625em; min-height: 10.625em; background-size: cover; background-position: center center; background-repeat: no-repeat; border-radius: 0 0 3px 3px; } @media all and (max-width: 46.24em) { .block__lower { display: block; height: auto; width: 5em; min-height: 5em; position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px 0 0 3px; } } .block__lower span { display: none; } .block__header { height: 10.625em; min-height: 10.625em; background-size: cover; background-position: center center; background-repeat: no-repeat; border-radius: 3px 3px 0 0; } .block__header span { display: none; } .block__header--big { height: 22.5em; min-height: 22.5em; border-radius: 3px; position: relative; } @media all and (min-width: 46.25em) { .block__header--big { height: 100%; } } @media all and (max-width: 29.99em) { .block__header--big { height: 10.625em; min-height: 10.625em; } } .block__header--title-centered { height: 15em; min-height: 15em; } @media all and (min-width: 46.25em) { .block--header-clipped { padding-top: 1.65em; padding-bottom: 0em; } .block--header-clipped .block__header { height: 12.5em; min-height: 12.5em; width: 12.5em; margin: 0 auto 1em auto; border-radius: 50%; position: relative; background-size: cover; background-position: center center; } } .block__title__wrapper { top: 10.625em; position: absolute; display: block; left: 0; right: 0; } @media all and (max-width: 29.99em) { .block__title__wrapper { top: auto; bottom: 0; } } .block__title__wrapper--article { background-color: white; max-width: 85%; } .block__title__wrapper--article .block__title { padding-left: 0.75em; padding-right: 0.75em; background-color: transparent; } .block__title__wrapper--article .block__title__content { padding-left: 0.75em; padding-right: 0.75em; } .block__title { padding-bottom: 0.825em; padding-left: 0.75em; padding-right: 0.75em; background-color: white; max-width: 100%; } @media all and (max-width: 29.99em) { .block__title, .delta { margin-bottom: 0.66em; } } .block__title--highlight { border-left: 5px solid #00aeef; display: block; } .block__body { -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; padding-top: 0em; padding-bottom: 0.165em; padding-left: 0.75em; padding-right: 0.75em; border-top: none; text-align: left; height: auto; border-radius: 0 0 3px 3px; } .block__body p, .block__body .block__body__description { color: #003665; margin-bottom: 1em; } .block__body p ul li, .block__body .block__body__description ul li { position: relative; padding-left: 0.875em; } .block__body p ul li::before, .block__body .block__body__description ul li::before { content: ""; display: block; width: 0.375em; height: 0.375em; position: absolute; top: 0.625em; left: 0; border: 1px solid #00aeef; border-radius: 100%; } .block__body p > p, .block__body p > ul, .block__body .block__body__description > p, .block__body .block__body__description > ul { margin-bottom: 0.5em; } .block__body p > p:last-child, .block__body p > ul:last-child, .block__body .block__body__description > p:last-child, .block__body .block__body__description > ul:last-child { margin-bottom: 0; } @media all and (min-width: 61.25em) { .block__body { min-height: 11.875em; } } @media all and (min-width: 61.25em) { .block__body { min-height: 7.5em; } } .block__body time { font-family: "museosansbold", sans-serif; color: #999; } @media all and (min-width: 46.25em) { .block__body--title-centered { text-align: center; margin-top: 0em; margin-bottom: 1.65em; } } .block__body--title-centered-horizontal { text-align: center; } @media all and (min-width: 46.25em) { .block__body--title-centered-horizontal { padding-top: 1.65em; padding-bottom: 0em; } } @media all and (max-width: 46.24em) { .block--news-block__ultra-short .block__body--title-centered-horizontal { margin: auto 5em; } } .block__author { padding-bottom: 0.825em; } .block__author__name { display: inline-block; margin-right: 0.9375em; vertical-align: top; color: #003665; } .block__author__logo { display: inline-block; padding: 0; vertical-align: middle; width: 3.4375em; margin-left: -4px; } .block__author__logo img { width: 100%; vertical-align: top; } .block--grid-subcat-block .block__header { height: 12.5em; } @media all and (min-width: 61.25em) { .block--grid-subcat-block .block__body { height: 10.625em; } } .block--news-block { margin-top: 0em; margin-bottom: 4.95em; padding-top: 0em; padding-bottom: 1.65em; background-color: #ffffff; position: relative; } .block--news-block .blog--intro__short { padding-left: 0.75em; padding-right: 0.75em; padding-top: 0.825em; padding-bottom: 0em; } @media all and (min-width: 46.25em) { .block--news-block .blog--intro__short { padding-left: 1.5em; padding-right: 1.5em; } } .block--news-block time { margin-top: 0em; margin-bottom: 1.65em; color: #999; position: relative; text-align: center; display: block; } .block--news-block time.date--event { display: inline-block; } .block--news-block time::after { content: ""; position: absolute; border-top: 2px solid #b7c2cb; left: 47.5%; bottom: -5px; width: 5%; height: 0; } .event-organizer { display: inline; color: #999; font-family: "museosansbold", sans-serif; } .block--news-block__short { margin: 0; background-color: #ffffff; border-bottom: 1px solid #b7c2cb; } .block--news-block__short:last-child { border-bottom: 0 none; } @media all and (min-width: 46.25em) { .block--news-block__short { margin-top: 0em; margin-bottom: 1.65em; border-radius: 5px; border: 0 none; } .block--news-block__short:hover { box-shadow: 1px 1px 3px #b7c2cb; -webkit-transform: translate(-1px, -1px); -moz-transform: translate(-1px, -1px); -ms-transform: translate(-1px, -1px); -o-transform: translate(-1px, -1px); transform: translate(-1px, -1px); } } .block--news-block__short .blog--intro__short { padding-left: 0.75em; padding-right: 0.75em; padding-top: 0.825em; padding-bottom: 0em; } @media all and (min-width: 46.25em) { .block--news-block__short .blog--intro__short { padding-left: 1.5em; padding-right: 1.5em; } } .block--news-block__short .blog__description { color: #003665; } .block--news-block__short .title { padding: 0; } .block--news-block__short time { font-size: 75%; margin-top: 0em; margin-bottom: 1.65em; color: #999; } .block--news-block__short time.date--event { display: inline-block; } .block--news-block__short .block__link { position: relative; display: block; border: 0 none; width: auto; } .block--news-block__short figure { margin: 0.625em; height: 4.6875em; width: 4.6875em; background-size: cover; background-position: center center; } @media all and (min-width: 46.25em) { .block--news-block__short figure { position: absolute; margin: 0; width: 30%; height: auto; top: 0; bottom: 0; } } .block--news-block__short .blog--intro__short { padding: 0.625em; } @media all and (max-width: 46.24em) { .block--news-block__short .blog--intro__short { width: auto; } } @media all and (min-width: 46.25em) { .block--news-block__short .blog--intro__short { padding-top: 1.65em; padding-bottom: 1.65em; padding-left: 0.75em; padding-right: 0.75em; padding-left: 33%; padding-left: calc(30% + 1.5em); } } .block--news-block__short .blog__description { display: none; } @media all and (min-width: 46.25em) { .block--news-block__short .blog__description { display: block; } } .block--news-block__short .blog__more-info { border-bottom: 1px solid; display: none; } @media all and (min-width: 46.25em) { .block--news-block__short .blog__more-info { display: inline; } } .block--news-block__ultra-short time { padding-top: 0.825em; padding-bottom: 0em; display: block; } .block--news-block__ultra-short time.date--event { display: inline-block; } .block--news-block__ultra-short h3, .block--news-block__ultra-short .gamma { margin-top: 0em; margin-bottom: 1.65em; } .block--simple-image .block__header { padding: 3em 2em 2em 2em; height: 100%; position: relative; } @media all and (max-width: 29.99em) { .block--simple-image .block__header { padding: 2em 2em 2em 2em; } .block--simple-image .block__header .gamma { padding-top: 0; } } .block--simple-image .gamma, .block--simple-image .delta { text-align: center; color: #ffffff; } .block--simple-image .gamma { font-family: "LubalinBook"; font-weight: 300; font-size: 2.25em; line-height: 1.1em; margin-bottom: 0em; } .block--simple-image .delta { position: absolute; margin: 0; bottom: 2em; left: 0; right: 0; font-family: "LubalinDemi"; font-weight: 700; } @media all and (max-width: 29.99em) { .block--simple-image .delta { position: static; } } .block--simple { background: #f5f5f5; border: 1px solid #b7c2cb; } .block--simple .block__content { padding: 3em 2em 2em 2em; position: relative; height: 100%; } .block--simple .block__body__description, .block--simple .delta, .block--simple .block__cta { font-family: "LubalinBook"; font-weight: 300; } .block--simple .block__body__description { color: #777; } .block--simple .block__cta { background-color: #00aeef; border: 0 none; color: #ffffff; position: absolute; bottom: 2em; left: 2em; right: 2em; padding: 1em; text-align: center; line-height: 120%; border-radius: 3px; } .block--simple .block__cta:hover { background-color: #0089bc; } [data-mh], .js-height { height: 100%; } .block__social__container { height: 3em; } .block__social { border-top: 1px solid #b7c2cb; left: 1.5em; right: 1.5em; bottom: 0; position: absolute; } .block__social::after { content: ""; display: table; clear: both; } .block__social__item { float: left; line-height: 3em; color: #b7c2cb; } .block__social__item .icon, .block__social__item .fa { margin-left: 0em; margin-right: 0.225em; font-size: 1.2em; } .block__social__item + .block__social__item--reactions { float: right; } .block--event { background-position: left top; background-size: cover; border-radius: 5px; position: relative; margin-bottom: 1.65em; padding-top: 1.65em; padding-bottom: 1.65em; } @media all and (min-width: 46.25em) { .block--event { padding-top: 2.475em; padding-bottom: 3.3em; } } .block--event .block__content { margin-left: 0.75em; margin-right: 0.75em; padding-top: 1.65em; padding-bottom: 1.65em; padding-left: 0.75em; padding-right: 0.75em; background-color: #ffffff; border-radius: 3px; } @media all and (min-width: 46.25em) { .block--event .block__content { margin-left: 30%; margin-right: 0.75em; padding-top: 1.65em; padding-bottom: 2.475em; } } .block--event .block__body :last-child { margin-bottom: 0; } .block--event .block__event-label { margin-left: -0.8823529412em; margin-right: 0.75em; } .block__event-info { font-size: 0.85em; } .block__event-label, .block__event-date { display: inline-block; line-height: 1em; } .block__event-label { padding-top: 0.4125em; padding-bottom: 0.33em; padding-left: 0.75em; padding-right: 0.75em; color: #ffffff; } .block__event-label--full { background-color: #ff8800; } .block__event-label--ongoing { background-color: #80c342; } .block__event-label--finished { background-color: #ff8800; } .block__event-date { color: #777; } .page-date { margin-top: 0em; margin-bottom: 1.65em; margin-bottom: calc(1.65em + 5px); color: #999; position: relative; text-align: center; display: block; font-family: "LubalinDemi"; } .page-date--border::after { content: ""; position: absolute; border-top: 2px solid #b7c2cb; left: 47.5%; bottom: -5px; width: 5%; height: 0; } .page-status { margin-top: -1.65em; margin-bottom: 1.65em; margin-top: calc(-1.65em - 2px); text-align: center; } .page-status .block__event-label { margin: 0; padding-top: 0.33em; padding-bottom: 0.33em; padding-left: 1.5em; padding-right: 1.5em; } .news-list__item { display: block; border-bottom: 1px solid #e1e1e1; padding-top: 0.825em; padding-bottom: 0.825em; padding-left: 0.75em; padding-right: 0.75em; -webkit-transition: all 0.22s ease-in-out; -moz-transition: all 0.22s ease-in-out; transition: all 0.22s ease-in-out; } .news-list__item:hover { border-bottom-color: #e1e1e1; box-shadow: 1px 1px 3px #b7c2cb; -webkit-transform: translate(-1px, -1px); -moz-transform: translate(-1px, -1px); -ms-transform: translate(-1px, -1px); -o-transform: translate(-1px, -1px); transform: translate(-1px, -1px); } @media all and (min-width: 61.25em) { .news-list__item--full-size { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; } } .news-list__item__date { float: left; min-width: 3.4375em; font-family: "museosansbold", sans-serif; color: #999; } .news-list__item__title { border: 0 none; display: inline; } .news-list__item__info { display: none; margin: 0; color: #003665; } @media all and (min-width: 61.25em) { .news-list__item__info { display: block; } } .news__show-all { padding-top: 0.825em; padding-bottom: 0.825em; padding-left: 0.75em; padding-right: 0.75em; text-align: right; } @media all and (min-width: 46.25em) { .block--image-tile { min-height: 5.625em; position: relative; } .block__header--image-title { width: 50%; height: 100%; border-radius: 3px 0 0 3px; position: absolute; min-height: 0; left: 0; top: 0; bottom: 0; } .block__body--image-title { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; padding-left: 50%; height: 100%; padding-right: 0; min-height: 0; } .block__body--image-title .delta { padding-left: 0.9375em; padding-right: 0.9375em; padding-top: 0.825em; padding-bottom: 0.825em; margin-bottom: 0; } } .block--app { padding-top: 1.2375em; padding-bottom: 6.6em; padding-left: 1.125em; padding-right: 1.125em; position: relative; } .block--app__header-title { font-size: 1.25em; line-height: 1em; color: #00aeef; } .block--app__image { width: 3em; margin: 0.125em 0; max-width: none; } .block--app__description { margin-top: 1.65em; margin-bottom: 1.65em; } .block--app__description-text { display: block; } .block--app__downloads { position: absolute; padding-top: 0em; padding-bottom: 1.2375em; padding-left: 1.125em; padding-right: 1.125em; left: 0; bottom: 0; right: 0; } .block--app__downloads::after { content: ""; display: table; clear: both; } .block--app__downloads-title { font-size: 0.75em; color: #ccc; margin-top: 0em; margin-bottom: 0em; } .block--app__downloads-link { width: 2.25em; height: 2.25em; line-height: 2em; color: #ffffff; float: left; margin-top: 0.4125em; margin-bottom: 0em; margin-right: 0.375em; text-align: center; border-radius: 4px; background-color: #eee; border-bottom: 0 none; } .block--app__downloads-link:hover, .block--app__downloads-link:focus, .block--app__downloads-link:active { color: #ffffff; background-color: #00aeef; } .block--app__downloads-link .icon, .block--app__downloads-link .fa { font-size: 1.25em; } .block--stock-price { background-color: #003665; } @media all and (max-width: 46.24em) { .block--stock-price .block__body { display: block; margin: auto 1em; padding: auto 1em; text-align: center; } } .block--stock-price .block__lower { display: block; } .stock-price { color: #ffffff; } .stock-price__title { padding-top: 10px; margin-bottom: 30px; } .stock-price__body { display: none; } .stock-price__body__price { font-size: 3rem; line-height: 1; } .stock-price__body__difference { font-size: 1.2rem; margin-bottom: 20px; } .stock-price__body__date { font-size: 0.8rem; } .link-list__item { padding-bottom: 0.825em; padding-left: 0.5625em; padding-right: 0.5625em; background-color: #ffffff; } .link-list__item--item { font-size: 0.9em; margin-bottom: 1em; } .link-list__item--item a { color: #003665; border: none; } .link-list__item--item:last-child { margin-bottom: 0; } .link-list__item__title { color: #00aeef; } .link-list__item__subtitle { font-size: 12px; color: #ccc; margin-bottom: 1em; } @media print { .block--app { display: none; } } /** * Fix for vh on ipad iOS 7. * http://caniuse.com/#feat=viewport-unit-for-ipads */ @media all and (min-width: 40em) { .person__component__container { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -0.75em; margin-right: -0.75em; } } @media all and (min-width: 40em) { .person__component__container--bp3-2cols .person { width: 50%; -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; -webkit-flex: 0 0 auto; -moz-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } } @media all and (min-width: 46.25em) { .person__component__container--bp4-3cols .person { width: 33.33%; -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; -webkit-flex: 0 0 auto; -moz-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } } .person { margin-bottom: 1.65em; width: 100%; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; -webkit-flex-direction: row; -moz-flex-direction: row; flex-direction: row; -ms-flex-direction: row; } @media all and (min-width: 40em) { .person { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; -webkit-flex-direction: row; -moz-flex-direction: row; flex-direction: row; -ms-flex-direction: row; -webkit-box-align: stretch; -moz-box-align: stretch; box-align: stretch; -webkit-align-items: stretch; -moz-align-items: stretch; -ms-align-items: stretch; -o-align-items: stretch; align-items: stretch; -ms-flex-align: stretch; padding-left: 0.75em; padding-right: 0.75em; } } .person__imagecontainer { border-radius: 50%; height: 112px; width: 112px; min-height: 112px; min-width: 112px; background: rgba(0, 0, 0, 0) none no-repeat scroll center center; background-size: cover; margin-left: 0em; margin-right: 0.9975em; } .person__metadata { -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; -webkit-flex: 0 1 auto; -moz-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; word-break: break-word; hyphens: auto; position: relative; margin-top: 20px; width: 55%; } .person__metadata__linkcontainer { margin-top: 0.375em; } .person__metadata__linkcontainer:first-child .btn__sharing { margin-left: auto; } .person__metadata__email { word-break: break-all; } .person__metadata__name { font-size: 16px; line-height: 24px; font-weight: 700; } .person__metadata__jobtitle, .person__metadata__about { font-size: 16px; line-height: 24px; font-weight: 300; font-family: "museosanslight", sans-serif; } .person__metadata__bio, .person__metadata__email, .person__metadata__phone { font-size: 16px; line-height: 24px; font-weight: 500; font-family: "museosanslight", sans-serif; } @media print { .person__imagecontainer, .person__metadata__linkcontainer { display: none; } .person__component__container { page-break-inside: avoid; } } /** * Fix for vh on ipad iOS 7. * http://caniuse.com/#feat=viewport-unit-for-ipads */ .partners__images { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -0.75em; margin-right: -0.75em; -webkit-box-pack: start; -moz-box-pack: start; box-pack: start; -webkit-justify-content: flex-start; -moz-justify-content: flex-start; -ms-justify-content: flex-start; -o-justify-content: flex-start; justify-content: flex-start; -ms-flex-pack: start; } .partners__image { margin-left: 0.75em; margin-right: 0.75em; margin-top: 0em; margin-bottom: 0.825em; } @media all and (min-width: 46.25em) { .partners__image { -webkit-flex-basis: calc(33.3333% - 1.5em); -moz-flex-basis: calc(33.3333% - 1.5em); flex-basis: calc(33.3333% - 1.5em); -ms-flex-preferred-size: calc(33.3333% - 1.5em); } } .partners__image a { display: block; border-bottom: 0 none; } /** * Fix for vh on ipad iOS 7. * http://caniuse.com/#feat=viewport-unit-for-ipads */ .overview-title { margin-bottom: 1.65em; } .overview-title .icon, .overview-title .fa { color: #999; padding-left: 0; padding-bottom: 0.375em; padding-top: 0.2em; font-size: 1.5em; } .overview-title__text { color: #999; } /** * Fix for vh on ipad iOS 7. * http://caniuse.com/#feat=viewport-unit-for-ipads */ .multi-step__component { margin: 0 -0.75em 1em -0.75em; } @media all and (min-width: 46.25em) { .multi-step__component { background-color: #eee; margin-right: 0; margin-left: 0; } } .multi-step__image-banner { background-position: center center; background-color: #003665; background-size: cover; height: 12.5em; } .multi-step__items { padding: 0; } @media all and (min-width: 46.25em) { .multi-step__items { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-top: 1.65em; padding-bottom: 1.65em; padding-left: 0.75em; padding-right: 0.75em; } } .cq-wcm-edit .multi-step__items > :not(.multi-step__item) { display: none; } .multi-step__item { padding-left: 2.25em; padding-right: 2.25em; padding-top: 0.825em; padding-bottom: 1.65em; background-color: #eee; -webkit-transition: background-color 0.3s ease-in; -moz-transition: background-color 0.3s ease-in; transition: background-color 0.3s ease-in; } .multi-step__item .textimage ul { margin-left: 0.625em; margin-top: 1.25em; margin-bottom: 0; } @media all and (min-width: 46.25em) { .multi-step__item { -webkit-flex-grow: 0; -moz-flex-grow: 0; flex-grow: 0; -ms-flex-positive: 0; -webkit-flex-basis: 33.333333%; -moz-flex-basis: 33.333333%; flex-basis: 33.333333%; -ms-flex-preferred-size: 33.333333%; max-width: 33.333333%; background-color: transparent; padding-top: 0.33em; padding-bottom: 0.33em; border-right: 1px solid #b7c2cb; margin-bottom: 2.5em; } .multi-step__item:nth-child(3n) { border-right: 0 none; } } .multi-step__header { display: none; } @media all and (min-width: 46.25em) { .multi-step__header { display: block; background-color: #ffffff; margin: 0 auto 1.25em auto; text-align: center; height: 5em; width: 5em; line-height: 5em; border-radius: 50%; overflow: hidden; } } .multi-step__number { font-family: "LubalinDemi"; font-weight: 300; } .multi-step__image { height: 5em; width: 5em; background-position: center center; background-size: cover; } .multi-step__number, .multi-step__icon { font-size: 2.5em; } .multi-step__title-number { display: inline; } @media all and (min-width: 46.25em) { .multi-step__title-number { display: none; } } .multi-step__open-all { display: none; padding-left: 1.5em; padding-right: 1.5em; padding-top: 0.825em; padding-bottom: 0.825em; cursor: pointer; } .multi-step__open-all a { color: #00aeef; display: inline-block; } .multi-step__open-all .icon { color: #00aeef; border: 1px solid #00aeef; border-radius: 50%; padding: 0.0625em; vertical-align: text-top; margin-right: 0.3125em; } .multi-step__chevron { display: none; } @media all and (max-width: 46.24em) { .multi-step__component--accordion .multi-step__open-all { display: block; } .multi-step__component--accordion .multi-step__chevron { position: absolute; display: block; color: #00aeef; background: #ffffff; height: 2em; width: 2em; top: 1.25em; right: 1em; border-radius: 50%; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .multi-step__component--accordion .multi-step__chevron .icon { line-height: 34px; padding-left: 2px; } .multi-step__component--accordion .multi-step__item { position: relative; background-color: #ffffff; cursor: pointer; margin: 0; padding-left: 1.5em; padding-right: 3.75em; padding-top: 0.825em; padding-bottom: 0.825em; border-bottom: 2px solid #ffffff; -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .multi-step__component--accordion .multi-step__item--closed { background-color: #eee; } .multi-step__component--accordion .multi-step__item--closed .multi-step__content--read-more { display: none; } .multi-step__component--accordion .multi-step__item--closed .multi-step__chevron { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @media print { .multi-step__item { page-break-inside: avoid; } .multi-step__image-banner { display: none; } } @charset "UTF-8"; /** * Fix for vh on ipad iOS 7. * http://caniuse.com/#feat=viewport-unit-for-ipads */ .form__item { position: relative; } .form__item--hidden { display: none; } .form__item__text { position: relative; } .form__item--checkbox label { display: block; } .form__item--checkbox input { -moz-appearance: none; -webkit-appearance: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 1; } .form__item--checkbox input:checked + .form__item__text::after { transform: scale(1); } .form__item--checkbox input:not(:disabled):hover + .form__item__text::before, .form__item--checkbox input:not(:disabled):focus + .form__item__text::before { border-color: #00aeef; } .form__item--checkbox input:disabled { cursor: default; } .form__item--checkbox input:disabled + .form__item__text { color: #beccd8; } .form__item--checkbox .form__item__text { padding-left: 30px; } .form__item--checkbox .form__item__text::before, .form__item--checkbox .form__item__text::after { position: absolute; } .form__item--checkbox .form__item__text::before { content: ""; left: 0; top: 2px; width: 20px; height: 20px; border: solid 1px #beccd8; border-radius: 3px; transition: border-color 0.15s linear; } .form__item--checkbox .form__item__text::after { content: ""; left: 1px; top: 3px; font-family: "iconskbc"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 18px; line-height: 1; color: #00aeef; text-shadow: 0 0 1px; transform: scale(0); transform-origin: center center; transition: transform 0.15s ease-out; } .form__item--checkbox .form__item__text p { margin-bottom: 0; } .multi-product .cta--block__steps { position: relative; padding-bottom: 60px; } .multi-product .cta--block__steps::before, .multi-product .cta--block__steps::after { content: ""; position: absolute; } .multi-product .cta--block__steps::before { left: 0; bottom: 0; width: 100%; height: 60px; background: #f5f5f5; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .multi-product .cta--block__steps::after { position: absolute; left: 50%; bottom: 60px; margin-left: -14px; margin-bottom: -14px; width: 0; height: 0; border-left: 14px inset transparent; border-right: 14px inset transparent; border-top: 14px solid #ffffff; } .multi-product .cta--block__title::after { content: none; } .multi-product .cta--block__description { margin-bottom: 0; padding-bottom: 50px; } .multi-product .cta--block__description:first-child { padding-top: 50px; } .multi-product .cta--block__description .form__item:not(:last-child) { margin-bottom: 20px; } .multi-product .cta--block__button--active { animation: fadeIn 0.15s linear; } @media print { .multi-product { display: none; } } /** * Fix for vh on ipad iOS 7. * http://caniuse.com/#feat=viewport-unit-for-ipads */ /*doc --- title: Load More name: load-more category: Modules --- ```html_example
Show more
``` ```html_example
Show more
``` */ .loadmore { background-color: #ffffff; font-weight: bold; border-radius: 3px; border: 0; overflow: hidden; display: block; text-align: center; font-size: 1em; line-height: 3.3em; margin-bottom: 1.65em; height: 3.3em; clear: both; } .loadmore:hover .loadmore__icon { margin-top: 0; } .loadmore.loadmore--loading { cursor: wait; } .loadmore.loadmore--loading .loadmore__icon, .loadmore.loadmore--loading .loadmore__text { display: none; } .loadmore.loadmore--loading .loadmore__loader { display: block; } .loadmore__loader { display: none; } .loadmore__loader .icon, .loadmore__loader .fa { font-size: 2em; -webkit-animation: rotate360 1.4s infinite linear; -moz-animation: rotate360 1.4s infinite linear; animation: rotate360 1.4s infinite linear; } .loadmore__icon { margin-top: -3.3em; display: block; -webkit-transition: margin-top 0.3s ease-in-out; -moz-transition: margin-top 0.3s ease-in-out; transition: margin-top 0.3s ease-in-out; } .loadmore__text { display: block; } /** * Fix for vh on ipad iOS 7. * http://caniuse.com/#feat=viewport-unit-for-ipads */ /** * Fix for vh on ipad iOS 7. * http://caniuse.com/#feat=viewport-unit-for-ipads */ .header__wrapper--live { min-height: 320px; overflow: hidden; } .header__wrapper--live, .header__wrapper--live ~ .help-assistant--live.help-assistant--side.help-assistant--open { z-index: 3; } @media all and (max-width: 61.24em) { .header__wrapper--live .header__image { filter: blur(4px); } } .header__wrapper--live-placeholder { text-align: center; margin-top: 34%; color: white; } .live-header { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; background: rgba(0, 52, 102, 0.134); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .live-header:not(.live-header--active) { visibility: hidden; } .live-header__content { text-align: center; } .live-header__text { padding: 0 10px; color: #ffffff; line-height: 25px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55); } .live-header__title { position: relative; font-family: "LubalinDemi"; font-weight: 300; font-size: 30px; margin-bottom: 12px; } @media all and (max-width: 29.99em) { .live-header__title { font-size: 26px; } } .live-header__title__text span { display: inline-block; vertical-align: top; } .live-header--active .live-header__title__text span:nth-child(1) { animation-name: fadeIn_start, fadeIn; animation-duration: 0.05s, 0.05s; animation-delay: 0s, 0.05s; } .live-header--active .live-header__title__text span:nth-child(2) { animation-name: fadeIn_start, fadeIn; animation-duration: 0.1s, 0.05s; animation-delay: 0s, 0.1s; } .live-header--active .live-header__title__text span:nth-child(3) { animation-name: fadeIn_start, fadeIn; animation-duration: 0.15s, 0.05s; animation-delay: 0s, 0.15s; } .live-header--active .live-header__title__text span:nth-child(4) { animation-name: fadeIn_start, fadeIn; animation-duration: 0.2s, 0.05s; animation-delay: 0s, 0.2s; } .live-header--active .live-header__title__text span:nth-child(5) { animation-name: fadeIn_start, fadeIn; animation-duration: 0.25s, 0.05s; animation-delay: 0s, 0.25s; } .live-header--active .live-header__title__text span:nth-child(6) { animation-name: fadeIn_start, fadeIn; animation-duration: 0.3s, 0.05s; animation-delay: 0s, 0.3s; } .live-header--active .live-header__title__text span:nth-child(7) { animation-name: fadeIn_start, fadeIn; animation-duration: 0.35s, 0.05s; animation-delay: 0s, 0.35s; } .live-header--active .live-header__title__text span:nth-child(8) { animation-name: fadeIn_start, fadeIn; animation-duration: 0.4s, 0.05s; animation-delay: 0s, 0.4s; } .live-header--active .live-header__title__text span:nth-child(9) { animation-name: fadeIn_start, fadeIn; animation-duration: 0.45s, 0.05s; animation-delay: 0s, 0.45s; } .live-header--active .live-header__title__text span:nth-child(10) { animation-name: fadeIn_start, fadeIn; animation-duration: 0.5s, 0.05s; animation-delay: 0s, 0.5s; } .live-header--active .live-header__title__text span:nth-child(11) { animation-name: fadeIn_start, fadeIn; animation-duration: 0.55s, 0.05s; animation-delay: 0s, 0.55s; } .live-header--active .live-header__title__text span:nth-child(12) { animation-name: fadeIn_start, fadeIn; animation-duration: 0.6s, 0.05s; animation-delay: 0s, 0.6s; } .live-header--active .live-header__title__text span:nth-child(13) { animation-name: fadeIn_start, fadeIn; animation-duration: 0.65s, 0.05s; animation-delay: 0s, 0.65s; } .live-header--active .live-header__title__text span:nth-child(14) { animation-name: fadeIn_start, fadeIn; animation-duration: 0.7s, 0.05s; animation-delay: 0s, 0.7s; } .live-header--active .live-header__title__text span:nth-child(15) { animation-name: fadeIn_start, fadeIn; animation-duration: 0.75s, 0.05s; animation-delay: 0s, 0.75s; } .live-header--active .live-header__title__text span:nth-child(16) { animation-name: fadeIn_start, fadeIn; animation-duration: 0.8s, 0.05s; animation-delay: 0s, 0.8s; } .live-header--active .live-header__title__text span:nth-child(17) { animation-name: fadeIn_start, fadeIn; animation-duration: 0.85s, 0.05s; animation-delay: 0s, 0.85s; } .live-header--active .live-header__title__text span:nth-child(18) { animation-name: fadeIn_start, fadeIn; animation-duration: 0.9s, 0.05s; animation-delay: 0s, 0.9s; } .live-header--active .live-header__title__text span:nth-child(19) { animation-name: fadeIn_start, fadeIn; animation-duration: 0.95s, 0.05s; animation-delay: 0s, 0.95s; } .live-header--active .live-header__title__text span:nth-child(20) { animation-name: fadeIn_start, fadeIn; animation-duration: 1s, 0.05s; animation-delay: 0s, 1s; } .live-header--active .live-header__title__text span:nth-child(21) { animation-name: fadeIn_start, fadeIn; animation-duration: 1.05s, 0.05s; animation-delay: 0s, 1.05s; } .live-header--active .live-header__title__text span:nth-child(22) { animation-name: fadeIn_start, fadeIn; animation-duration: 1.1s, 0.05s; animation-delay: 0s, 1.1s; } .live-header--active .live-header__title__text span:nth-child(23) { animation-name: fadeIn_start, fadeIn; animation-duration: 1.15s, 0.05s; animation-delay: 0s, 1.15s; } .live-header--active .live-header__title__text span:nth-child(24) { animation-name: fadeIn_start, fadeIn; animation-duration: 1.2s, 0.05s; animation-delay: 0s, 1.2s; } .live-header--active .live-header__title__text span:nth-child(25) { animation-name: fadeIn_start, fadeIn; animation-duration: 1.25s, 0.05s; animation-delay: 0s, 1.25s; } .live-header--active .live-header__title__text span:nth-child(26) { animation-name: fadeIn_start, fadeIn; animation-duration: 1.3s, 0.05s; animation-delay: 0s, 1.3s; } .live-header--active .live-header__title__text span:nth-child(27) { animation-name: fadeIn_start, fadeIn; animation-duration: 1.35s, 0.05s; animation-delay: 0s, 1.35s; } .live-header--active .live-header__title__text span:nth-child(28) { animation-name: fadeIn_start, fadeIn; animation-duration: 1.4s, 0.05s; animation-delay: 0s, 1.4s; } .live-header--active .live-header__title__text span:nth-child(29) { animation-name: fadeIn_start, fadeIn; animation-duration: 1.45s, 0.05s; animation-delay: 0s, 1.45s; } .live-header--active .live-header__title__text span:nth-child(30) { animation-name: fadeIn_start, fadeIn; animation-duration: 1.5s, 0.05s; animation-delay: 0s, 1.5s; } .live-header--active .live-header__title__text span:nth-child(31) { animation-name: fadeIn_start, fadeIn; animation-duration: 1.55s, 0.05s; animation-delay: 0s, 1.55s; } .live-header--active .live-header__title__text span:nth-child(32) { animation-name: fadeIn_start, fadeIn; animation-duration: 1.6s, 0.05s; animation-delay: 0s, 1.6s; } .live-header--active .live-header__title__text span:nth-child(33) { animation-name: fadeIn_start, fadeIn; animation-duration: 1.65s, 0.05s; animation-delay: 0s, 1.65s; } .live-header--active .live-header__title__text span:nth-child(34) { animation-name: fadeIn_start, fadeIn; animation-duration: 1.7s, 0.05s; animation-delay: 0s, 1.7s; } .live-header--active .live-header__title__text span:nth-child(35) { animation-name: fadeIn_start, fadeIn; animation-duration: 1.75s, 0.05s; animation-delay: 0s, 1.75s; } .live-header--active .live-header__title__text span:nth-child(36) { animation-name: fadeIn_start, fadeIn; animation-duration: 1.8s, 0.05s; animation-delay: 0s, 1.8s; } .live-header--active .live-header__title__text span:nth-child(37) { animation-name: fadeIn_start, fadeIn; animation-duration: 1.85s, 0.05s; animation-delay: 0s, 1.85s; } .live-header--active .live-header__title__text span:nth-child(38) { animation-name: fadeIn_start, fadeIn; animation-duration: 1.9s, 0.05s; animation-delay: 0s, 1.9s; } .live-header--active .live-header__title__text span:nth-child(39) { animation-name: fadeIn_start, fadeIn; animation-duration: 1.95s, 0.05s; animation-delay: 0s, 1.95s; } .live-header--active .live-header__title__text span:nth-child(40) { animation-name: fadeIn_start, fadeIn; animation-duration: 2s, 0.05s; animation-delay: 0s, 2s; } .live-header--active .live-header__title__text span:nth-child(41) { animation-name: fadeIn_start, fadeIn; animation-duration: 2.05s, 0.05s; animation-delay: 0s, 2.05s; } .live-header--active .live-header__title__text span:nth-child(42) { animation-name: fadeIn_start, fadeIn; animation-duration: 2.1s, 0.05s; animation-delay: 0s, 2.1s; } .live-header--active .live-header__title__text span:nth-child(43) { animation-name: fadeIn_start, fadeIn; animation-duration: 2.15s, 0.05s; animation-delay: 0s, 2.15s; } .live-header--active .live-header__title__text span:nth-child(44) { animation-name: fadeIn_start, fadeIn; animation-duration: 2.2s, 0.05s; animation-delay: 0s, 2.2s; } .live-header--active .live-header__title__text span:nth-child(45) { animation-name: fadeIn_start, fadeIn; animation-duration: 2.25s, 0.05s; animation-delay: 0s, 2.25s; } .live-header--active .live-header__title__text span:nth-child(46) { animation-name: fadeIn_start, fadeIn; animation-duration: 2.3s, 0.05s; animation-delay: 0s, 2.3s; } .live-header--active .live-header__title__text span:nth-child(47) { animation-name: fadeIn_start, fadeIn; animation-duration: 2.35s, 0.05s; animation-delay: 0s, 2.35s; } .live-header--active .live-header__title__text span:nth-child(48) { animation-name: fadeIn_start, fadeIn; animation-duration: 2.4s, 0.05s; animation-delay: 0s, 2.4s; } .live-header--active .live-header__title__text span:nth-child(49) { animation-name: fadeIn_start, fadeIn; animation-duration: 2.45s, 0.05s; animation-delay: 0s, 2.45s; } .live-header--active .live-header__title__text span:nth-child(50) { animation-name: fadeIn_start, fadeIn; animation-duration: 2.5s, 0.05s; animation-delay: 0s, 2.5s; } .live-header--active .live-header__title__text span:nth-child(51) { animation-name: fadeIn_start, fadeIn; animation-duration: 2.55s, 0.05s; animation-delay: 0s, 2.55s; } .live-header--active .live-header__title__text span:nth-child(52) { animation-name: fadeIn_start, fadeIn; animation-duration: 2.6s, 0.05s; animation-delay: 0s, 2.6s; } .live-header--active .live-header__title__text span:nth-child(53) { animation-name: fadeIn_start, fadeIn; animation-duration: 2.65s, 0.05s; animation-delay: 0s, 2.65s; } .live-header--active .live-header__title__text span:nth-child(54) { animation-name: fadeIn_start, fadeIn; animation-duration: 2.7s, 0.05s; animation-delay: 0s, 2.7s; } .live-header--active .live-header__title__text span:nth-child(55) { animation-name: fadeIn_start, fadeIn; animation-duration: 2.75s, 0.05s; animation-delay: 0s, 2.75s; } .live-header--active .live-header__title__text span:nth-child(56) { animation-name: fadeIn_start, fadeIn; animation-duration: 2.8s, 0.05s; animation-delay: 0s, 2.8s; } .live-header--active .live-header__title__text span:nth-child(57) { animation-name: fadeIn_start, fadeIn; animation-duration: 2.85s, 0.05s; animation-delay: 0s, 2.85s; } .live-header--active .live-header__title__text span:nth-child(58) { animation-name: fadeIn_start, fadeIn; animation-duration: 2.9s, 0.05s; animation-delay: 0s, 2.9s; } .live-header--active .live-header__title__text span:nth-child(59) { animation-name: fadeIn_start, fadeIn; animation-duration: 2.95s, 0.05s; animation-delay: 0s, 2.95s; } .live-header--active .live-header__title__text span:nth-child(60) { animation-name: fadeIn_start, fadeIn; animation-duration: 3s, 0.05s; animation-delay: 0s, 3s; } .live-header--active .live-header__title__text span:nth-child(61) { animation-name: fadeIn_start, fadeIn; animation-duration: 3.05s, 0.05s; animation-delay: 0s, 3.05s; } .live-header--active .live-header__title__text span:nth-child(62) { animation-name: fadeIn_start, fadeIn; animation-duration: 3.1s, 0.05s; animation-delay: 0s, 3.1s; } .live-header--active .live-header__title__text span:nth-child(63) { animation-name: fadeIn_start, fadeIn; animation-duration: 3.15s, 0.05s; animation-delay: 0s, 3.15s; } .live-header--active .live-header__title__text span:nth-child(64) { animation-name: fadeIn_start, fadeIn; animation-duration: 3.2s, 0.05s; animation-delay: 0s, 3.2s; } .live-header--active .live-header__title__text span:nth-child(65) { animation-name: fadeIn_start, fadeIn; animation-duration: 3.25s, 0.05s; animation-delay: 0s, 3.25s; } .live-header--active .live-header__title__text span:nth-child(66) { animation-name: fadeIn_start, fadeIn; animation-duration: 3.3s, 0.05s; animation-delay: 0s, 3.3s; } .live-header--active .live-header__title__text span:nth-child(67) { animation-name: fadeIn_start, fadeIn; animation-duration: 3.35s, 0.05s; animation-delay: 0s, 3.35s; } .live-header--active .live-header__title__text span:nth-child(68) { animation-name: fadeIn_start, fadeIn; animation-duration: 3.4s, 0.05s; animation-delay: 0s, 3.4s; } .live-header--active .live-header__title__text span:nth-child(69) { animation-name: fadeIn_start, fadeIn; animation-duration: 3.45s, 0.05s; animation-delay: 0s, 3.45s; } .live-header--active .live-header__title__text span:nth-child(70) { animation-name: fadeIn_start, fadeIn; animation-duration: 3.5s, 0.05s; animation-delay: 0s, 3.5s; } .live-header--active .live-header__title__text span:nth-child(71) { animation-name: fadeIn_start, fadeIn; animation-duration: 3.55s, 0.05s; animation-delay: 0s, 3.55s; } .live-header--active .live-header__title__text span:nth-child(72) { animation-name: fadeIn_start, fadeIn; animation-duration: 3.6s, 0.05s; animation-delay: 0s, 3.6s; } .live-header--active .live-header__title__text span:nth-child(73) { animation-name: fadeIn_start, fadeIn; animation-duration: 3.65s, 0.05s; animation-delay: 0s, 3.65s; } .live-header--active .live-header__title__text span:nth-child(74) { animation-name: fadeIn_start, fadeIn; animation-duration: 3.7s, 0.05s; animation-delay: 0s, 3.7s; } .live-header--active .live-header__title__text span:nth-child(75) { animation-name: fadeIn_start, fadeIn; animation-duration: 3.75s, 0.05s; animation-delay: 0s, 3.75s; } .live-header--active .live-header__title__text span:nth-child(76) { animation-name: fadeIn_start, fadeIn; animation-duration: 3.8s, 0.05s; animation-delay: 0s, 3.8s; } .live-header--active .live-header__title__text span:nth-child(77) { animation-name: fadeIn_start, fadeIn; animation-duration: 3.85s, 0.05s; animation-delay: 0s, 3.85s; } .live-header--active .live-header__title__text span:nth-child(78) { animation-name: fadeIn_start, fadeIn; animation-duration: 3.9s, 0.05s; animation-delay: 0s, 3.9s; } .live-header--active .live-header__title__text span:nth-child(79) { animation-name: fadeIn_start, fadeIn; animation-duration: 3.95s, 0.05s; animation-delay: 0s, 3.95s; } .live-header--active .live-header__title__text span:nth-child(80) { animation-name: fadeIn_start, fadeIn; animation-duration: 4s, 0.05s; animation-delay: 0s, 4s; } .live-header--active .live-header__title__text span:nth-child(81) { animation-name: fadeIn_start, fadeIn; animation-duration: 4.05s, 0.05s; animation-delay: 0s, 4.05s; } .live-header--active .live-header__title__text span:nth-child(82) { animation-name: fadeIn_start, fadeIn; animation-duration: 4.1s, 0.05s; animation-delay: 0s, 4.1s; } .live-header--active .live-header__title__text span:nth-child(83) { animation-name: fadeIn_start, fadeIn; animation-duration: 4.15s, 0.05s; animation-delay: 0s, 4.15s; } .live-header--active .live-header__title__text span:nth-child(84) { animation-name: fadeIn_start, fadeIn; animation-duration: 4.2s, 0.05s; animation-delay: 0s, 4.2s; } .live-header--active .live-header__title__text span:nth-child(85) { animation-name: fadeIn_start, fadeIn; animation-duration: 4.25s, 0.05s; animation-delay: 0s, 4.25s; } .live-header--active .live-header__title__text span:nth-child(86) { animation-name: fadeIn_start, fadeIn; animation-duration: 4.3s, 0.05s; animation-delay: 0s, 4.3s; } .live-header--active .live-header__title__text span:nth-child(87) { animation-name: fadeIn_start, fadeIn; animation-duration: 4.35s, 0.05s; animation-delay: 0s, 4.35s; } .live-header--active .live-header__title__text span:nth-child(88) { animation-name: fadeIn_start, fadeIn; animation-duration: 4.4s, 0.05s; animation-delay: 0s, 4.4s; } .live-header--active .live-header__title__text span:nth-child(89) { animation-name: fadeIn_start, fadeIn; animation-duration: 4.45s, 0.05s; animation-delay: 0s, 4.45s; } .live-header--active .live-header__title__text span:nth-child(90) { animation-name: fadeIn_start, fadeIn; animation-duration: 4.5s, 0.05s; animation-delay: 0s, 4.5s; } .live-header--active .live-header__title__text span:nth-child(91) { animation-name: fadeIn_start, fadeIn; animation-duration: 4.55s, 0.05s; animation-delay: 0s, 4.55s; } .live-header--active .live-header__title__text span:nth-child(92) { animation-name: fadeIn_start, fadeIn; animation-duration: 4.6s, 0.05s; animation-delay: 0s, 4.6s; } .live-header--active .live-header__title__text span:nth-child(93) { animation-name: fadeIn_start, fadeIn; animation-duration: 4.65s, 0.05s; animation-delay: 0s, 4.65s; } .live-header--active .live-header__title__text span:nth-child(94) { animation-name: fadeIn_start, fadeIn; animation-duration: 4.7s, 0.05s; animation-delay: 0s, 4.7s; } .live-header--active .live-header__title__text span:nth-child(95) { animation-name: fadeIn_start, fadeIn; animation-duration: 4.75s, 0.05s; animation-delay: 0s, 4.75s; } .live-header--active .live-header__title__text span:nth-child(96) { animation-name: fadeIn_start, fadeIn; animation-duration: 4.8s, 0.05s; animation-delay: 0s, 4.8s; } .live-header--active .live-header__title__text span:nth-child(97) { animation-name: fadeIn_start, fadeIn; animation-duration: 4.85s, 0.05s; animation-delay: 0s, 4.85s; } .live-header--active .live-header__title__text span:nth-child(98) { animation-name: fadeIn_start, fadeIn; animation-duration: 4.9s, 0.05s; animation-delay: 0s, 4.9s; } .live-header--active .live-header__title__text span:nth-child(99) { animation-name: fadeIn_start, fadeIn; animation-duration: 4.95s, 0.05s; animation-delay: 0s, 4.95s; } .live-header--active .live-header__title__text span:nth-child(100) { animation-name: fadeIn_start, fadeIn; animation-duration: 5s, 0.05s; animation-delay: 0s, 5s; } @keyframes live-header__title__dots-bounce { 0% { transform: scale(1); } 25% { transform: scale(1.5); } 50% { transform: scale(1); } 100% { transform: scale(1); } } .live-header__title__dots { position: absolute; left: 0; bottom: -24px; width: 100%; height: 4px; font-size: 0; transition: opacity 0.5s ease-in-out; } .live-header__title__dots span { display: inline-block; vertical-align: top; width: 4px; height: 4px; border-radius: 50%; background: currentColor; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.55); } .live-header__title__dots span:not(:last-child) { margin-right: 8px; } .live-header__title__dots:not(.live-header__title__dots--active) { opacity: 0; } .live-header__title__dots--active span:nth-child(1) { animation-name: dummy, live-header__title__dots-bounce; animation-duration: 0.1s, 1s; animation-delay: 0s, 0.1s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } .live-header__title__dots--active span:nth-child(2) { animation-name: dummy, live-header__title__dots-bounce; animation-duration: 0.2s, 1s; animation-delay: 0s, 0.2s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } .live-header__title__dots--active span:nth-child(3) { animation-name: dummy, live-header__title__dots-bounce; animation-duration: 0.3s, 1s; animation-delay: 0s, 0.3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } .live-header__subcopy { font-family: "LubalinBook"; font-weight: 600; font-size: 20px; letter-spacing: 1px; } @media all and (max-width: 29.99em) { .live-header__subcopy { font-size: 18px; } } .live-header__subcopy__text { display: none; } [data-live-header-page="0"] .live-header__subcopy__text:nth-child(1) { display: block; } [data-live-header-page="1"] .live-header__subcopy__text:nth-child(2) { display: block; } .live-header__subcopy__text span { display: inline-block; vertical-align: top; } .live-header__subcopy__text .word span { opacity: 0; animation-fill-mode: forwards; } .live-header__subcopy__text:not(.live-header__subcopy__text--show):not(.live-header__subcopy__text--hide) { visibility: hidden; } .live-header__subcopy__text--show .word span { animation-name: fadeIn_start, fadeIn; } .live-header__subcopy__text--hide .word span { animation-name: fadeOut_start, fadeOut; } .live-header__bar { position: relative; display: inline-block; min-width: 280px; max-width: 100%; height: 44px; margin-top: 32px; font-size: 0; line-height: 1; pointer-events: none; border-radius: 44px; background-color: #ffffff; transition: transform 0.5s cubic-bezier(0.22, 1.03, 0.69, 0.97), opacity 0.5s cubic-bezier(0.22, 1.03, 0.69, 0.97); } @media all and (min-width: 61.25em) { .live-header__bar { min-width: 430px; max-width: 100%; height: 50px; } } .live-header__bar:not(.live-header__bar--active) { transform: translateY(-100%); opacity: 0; } .live-header__bar--interactive { pointer-events: auto; } .live-header__bar__circle { position: absolute; left: 0; top: 0; color: #ffffff; } .live-header__bar__circle::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(100% - 6px); height: calc(100% - 6px); border-radius: 50%; background: #003665; transform: translate(-50%, -50%); } .live-header__bar__circle svg { opacity: 0.8; } .live-header__bar__circle svg circle { fill: none; stroke: #00aeef; stroke-width: 4px; stroke-miterlimit: 10; stroke-dasharray: 160px; stroke-dashoffset: 160px; } .live-header__bar--counting .live-header__bar__circle svg circle { will-change: auto; -webkit-transition: stroke-dashoffset 0.25s linear; -moz-transition: stroke-dashoffset 0.25s linear; transition: stroke-dashoffset 0.25s linear; } .live-header__bar__circle, .live-header__bar__circle svg { width: 44px; height: 44px; } @media all and (min-width: 61.25em) { .live-header__bar__circle, .live-header__bar__circle svg { width: 50px; height: 50px; } } .live-header__bar__circle__text { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 0 10px; display: none; justify-content: center; align-items: center; font-family: "LubalinDemi"; font-weight: 300; font-size: 9px; } [data-live-header-page="0"] .live-header__bar__circle__text:nth-child(1) { display: flex; } [data-live-header-page="1"] .live-header__bar__circle__text:nth-child(2) { display: flex; } @media all and (min-width: 61.25em) { .live-header__bar__circle__text { font-size: 11px; } } .live-header__bar__circle__text .icon { font-size: 16px; } @media all and (min-width: 61.25em) { .live-header__bar__circle__text .icon { font-size: 20px; } } .live-header__bar__button, .live-header__bar__input { display: inline-flex; justify-content: center; align-items: center; font-family: "museosansregular", sans-serif; font-size: 13px; line-height: 44px; background: #ffffff; color: #003665; flex-grow: 1; margin: 0; outline: none; } @media all and (min-width: 61.25em) { .live-header__bar__button, .live-header__bar__input { font-size: 16px; } } .live-header__bar__input { -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; padding: 0 10px; border: none; border-radius: 0; } @media all and (min-width: 61.25em) { .live-header__bar__input { padding: 0 20px; } } .live-header__bar__button { border-bottom: none; cursor: pointer; transition: color 0.15s linear; padding-right: 12px; } .live-header__bar__button:hover, .live-header__bar__button:focus { color: #00aeef; } .live-header__bar__button .icon, .live-header__bar__button .fa { font-size: 16px; margin: auto 10px; } @media all and (min-width: 61.25em) { .live-header__bar__button .icon, .live-header__bar__button .fa { font-size: 20px; margin-right: 15px; } } @media all and (min-width: 61.25em) { .live-header__bar__button { padding: 0; } } a.live-header__bar__button { border-right: solid 1px #e7e7e7; } .live-header__bar__button--blue { background: #00aeef; color: #ffffff; font-family: "museosansbold", sans-serif; font-weight: 700; transition: background-color 0.15s linear; } .live-header__bar__button--blue:hover, .live-header__bar__button--blue:focus { background: #0089bc; color: #ffffff; } .live-header__bar__button--last { border-top-right-radius: 22px; border-bottom-right-radius: 22px; border-right: none; } .live-header__bar__button--last:hover { border-color: #e7e7e7; } @media all and (min-width: 61.25em) { .live-header__bar__button--last { border-top-right-radius: 25px; border-bottom-right-radius: 25px; } } .live-header__bar__button--last.live-header__bar__button--blue { border: none; flex-grow: 0; padding: 0 20px; } @media all and (min-width: 61.25em) { .live-header__bar__button--last.live-header__bar__button--blue { padding: 0 30px; } } .live-header__bar__bg { position: absolute; left: 24px; top: 0; display: inline-block; width: 162.95px; height: 44px; } .live-header__bar__bg path { fill: #ffffff; } @media all and (min-width: 61.25em) { .live-header__bar__bg { left: 27px; width: 185.17px; height: 50px; } } .live-header__bar__content { width: 100%; height: 100%; display: none; padding-left: 44px; } @media all and (min-width: 61.25em) { .live-header__bar__content { position: absolute; left: 0; top: 0; } } [data-live-header-page="0"] .live-header__bar__content:nth-child(1) { display: flex; } [data-live-header-page="1"] .live-header__bar__content:nth-child(2) { display: flex; } @media all and (min-width: 61.25em) { .live-header__bar__content { padding-left: 50px; } } .live__titles__wrapper { font-family: LubalinDemi, serif; text-align: center; } .live__title { margin: 0 auto 10px auto; text-align: left; font-size: 40px; min-height: 40px; color: #fff; text-shadow: 0px 1px 12px rgba(0, 0, 0, 0.4); display: inline-block; max-width: 300px; } .live__subtitles { line-height: 1.45em; min-height: 32px; margin: 0 auto 30px auto; display: inline-block; text-align: left; } .live__subtitles .live__subtitle { display: inline-block; font-family: LubalinBook, sans-serif; font-weight: 600; font-size: 28px; color: #fff; text-shadow: 0px 1px 12px rgba(0, 0, 0, 0.4); } .live__subtitles .live__subtitle:first-of-type { margin-right: 10px; } /** * Fix for vh on ipad iOS 7. * http://caniuse.com/#feat=viewport-unit-for-ipads */ .live-button { overflow: visible; margin: 0 0.625em; } @media all and (max-width: 61.24em) { .live-button { min-height: 32px; } } @media all and (min-width: 61.25em) { .live-button { display: inline-block; width: auto; } } .live-button .btn--live { border: none; background: #00aeef; } .live-button .btn--live:hover, .live-button .btn--live:focus { background-color: #1ec2ff; color: #1ec2ff; } .show-on--mobile .live-button, .show-on--tablet .live-button { margin: 0.5em 0; } .live-button__label { top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); display: inline-block; color: inherit; } .live-button__icon { position: absolute; display: inline-block; left: 50%; top: 50%; margin-left: -2.8em; margin-top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #e7e7e7; transition: background-color 0.15s ease-in-out; } @media all and (max-width: 81.24em) { .live-button__icon { margin-top: -4px; } } .live-button--offline .live-button__icon { background: #ff8500; } .live-button--online .live-button__icon { background: #09c141; } .live-button__icon + span { position: relative; z-index: 1; margin: 0 0.5em 0 2em; } @keyframes live-button-bounce { 0% { transform: scale(1) translateY(0); } 12.5% { transform: scale(1.1) translateY(-1px); } 25% { transform: scale(1) translateY(0); } 100% { transform: scale(1) translateY(0); } } @keyframes live-button__icon-animation { 0% { transform: scale(1); } 20% { transform: scale(1); } 25% { transform: scale(1.5); } 30% { transform: scale(1); } 35% { transform: scale(1.2); } 40% { transform: scale(1); } 100% { transform: scale(1); } } @keyframes live-button__shine-animation { 0% { transform: translateX(-100%) scaleY(-1); } 25% { transform: translateX(-100%) scaleY(-1); } 50% { transform: translateX(200%) scaleY(-1); } 100% { transform: translateX(200%) scaleY(-1); } } @keyframes live-button__shine-animation-mobile { 0% { transform: translateX(-100%) scaleY(-1); } 25% { transform: translateX(-100%) scaleY(-1); } 50% { transform: translateX(100vw) scaleY(-1); } 100% { transform: translateX(100vw) scaleY(-1); } } .live-button--animate { z-index: 1; background: #fff; animation: live-button-bounce 5s cubic-bezier(0.22, 1.03, 0.69, 0.97) 4 4s; } @media screen and (prefers-reduced-motion: reduce) { .live-button--animate { animation: none; } } .live-button--animate .live-button__icon { animation: live-button__icon-animation 5s cubic-bezier(0.22, 1.03, 0.69, 0.97) 4 4s; } @media screen and (prefers-reduced-motion: reduce) { .live-button--animate .live-button__icon { animation: none; } } .live-button--animate .live-button__shine { position: absolute; left: -2px; top: -2px; width: calc(100% + 4px); height: calc(100% + 4px); border-radius: 3px; overflow: hidden; } .live-button--animate .live-button__shine::before { content: ""; position: absolute; left: 0; top: 0; width: 96px; height: 100%; transform: translateX(-100%) scaleY(-1); opacity: 0.5; background-color: rgba(0, 54, 100, 0); background-image: -webkit-linear-gradient(-315deg, rgba(0, 54, 100, 0) 20px, #003665 36px, #003665 52px, rgba(0, 54, 100, 0) 68px); background-image: linear-gradient(45deg,rgba(0, 54, 100, 0) 20px, #003665 36px, #003665 52px, rgba(0, 54, 100, 0) 68px); } @media all and (max-width: 61.24em) { .live-button--animate .live-button__shine::before { animation: live-button__shine-animation-mobile 5s linear 4 4s; } } @media all and (min-width: 61.25em) { .live-button--animate .live-button__shine::before { animation: live-button__shine-animation 5s linear 4 4s; } } .live-button--animate .live-button__shine::after { content: ""; position: absolute; left: 4px; top: 4px; width: calc(100% - 8px); height: calc(100% - 8px); border-radius: 2px; background: #fff; } @media screen and (prefers-reduced-motion: reduce) { .live-button--animate .live-button__shine { display: none; } } /** * Fix for vh on ipad iOS 7. * http://caniuse.com/#feat=viewport-unit-for-ipads */ .hero-container { z-index: 1; position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transition: top 0.2s ease-in; -moz-transition: top 0.2s ease-in; transition: top 0.2s ease-in; } .hero-container__edit { top: 20%; width: 70vw; margin: 0 auto; height: 80px; background-color: rgba(0, 54, 101, 0.35); } .hero-container__edit div { height: 80px; } /** * Fix for vh on ipad iOS 7. * http://caniuse.com/#feat=viewport-unit-for-ipads */ @keyframes animated-help-button-pulsate { 0% { opacity: 0; -webkit-transform: scale(0.1, 0.1); -moz-transform: scale(0.1, 0.1); -ms-transform: scale(0.1, 0.1); -o-transform: scale(0.1, 0.1); transform: scale(0.1, 0.1); } 50% { opacity: 1; } 100% { opacity: 0; -webkit-transform: scale(1.2, 1.2); -moz-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); -o-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); } } @keyframes help-assistant__intro__text_before_fadeIn { 0% { visibility: visible; transform: translate(0, 0); } 33.3% { visibility: visible; transform: translate(130px, 0); } 33.31% { visibility: visible; transform: translate(0, 17px); } 66.6% { visibility: visible; transform: translate(130px, 17px); } 66.61% { visibility: visible; transform: translate(0, 34px); } 99.99% { visibility: visible; transform: translate(130px, 34px); } 100% { visibility: hidden; } } @keyframes help-assistant__intro__text_after_fadeIn { 0% { visibility: visible; transform: translateY(17px); } 33.3% { visibility: visible; transform: translateY(17px); } 33.31% { visibility: visible; transform: translateY(34px); } 66.6% { visibility: visible; transform: translateY(34px); } 66.61% { visibility: hidden; } 100% { visibility: hidden; } } @keyframes hideAssistant { 0% { visibility: visible; } 99.99% { visibility: visible; } 100% { visibility: hidden; } } @keyframes showAssistant { 0% { visibility: visible; } 100% { visibility: visible; } } /** * Fix for vh on ipad iOS 7. * http://caniuse.com/#feat=viewport-unit-for-ipads */ .help-assistant--live { position: relative; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .help-assistant--live .help-assistant__content > .help-assistant__button { display: none; } .help-assistant--live.help-assistant--side { position: fixed; right: 16px; bottom: 64px; z-index: auto; width: 0; } @media all and (min-width: 46.25em) { .help-assistant--live.help-assistant--side { position: absolute; right: 4%; bottom: calc(100% - 340px); } } @media all and (min-width: 61.25em) { .help-assistant--live.help-assistant--side { bottom: calc(100% - 400px); } } .help-assistant__content { width: auto; } @media all and (min-width: 46.25em) { .help-assistant--live .help-assistant__content { position: fixed; right: 4%; bottom: calc(100% - 340px); } } @media all and (min-width: 61.25em) { .help-assistant--live .help-assistant__content { bottom: calc(100% - 400px); } } .help-assistant__triggerbutton { position: absolute; right: 0; bottom: 0; width: 62px; height: 62px; padding: 0; border-radius: 50%; background: none; color: #ffffff; border: solid 4px #00aeef; cursor: pointer; overflow: visible; transition: border-color 0.22s ease-in-out, transform 0.22s ease-in-out; } @media screen and (prefers-reduced-motion: reduce) { .help-assistant__triggerbutton { transition: none; } } .help-assistant__triggerbutton[aria-expanded=true] { border-color: rgba(0, 174, 239, 0); transform: scale(0.8) translateX(4px); } @media all and (min-width: 46.25em) { .help-assistant__triggerbutton { bottom: 4px; right: 4px; } .help-assistant__intro:not(.dont-animate) + .help-assistant__content .help-assistant__triggerbutton { opacity: 0; animation-name: fadeIn; animation-duration: 1s; animation-delay: 2.5s; animation-timing-function: cubic-bezier(0.22, 1.03, 0.69, 0.97); animation-fill-mode: forwards; } .help-assistant--shown .help-assistant__intro:not(.dont-animate) + .help-assistant__content .help-assistant__triggerbutton { opacity: 0; animation-name: fadeIn; animation-delay: 0.01s; animation-duration: 0.5s; animation-fill-mode: forwards; } .help-assistant--hidden .help-assistant__intro:not(.dont-animate) + .help-assistant__content .help-assistant__triggerbutton { opacity: 1; animation-name: hideAssistant; animation-duration: 0.5s; animation-fill-mode: forwards; animation-delay: 0.01s; } } @media screen and (prefers-reduced-motion: reduce) and (min-width: 46.25em) { .help-assistant__triggerbutton { transition: none; } .help-assistant__intro:not(.dont-animate) + .help-assistant__content .help-assistant__triggerbutton { animation: none; } } .help-assistant:not(.help-assistant--live) .help-assistant__triggerbutton { display: none; } .help-assistant__triggerbutton__circles, .help-assistant__triggerbutton__cross { position: absolute; left: 50%; top: 50%; } .help-assistant__triggerbutton__circles::before, .help-assistant__triggerbutton__circles::after { position: absolute; content: ""; border-radius: 50%; transform: translate(-50%, -50%) scale(1); } .help-assistant__triggerbutton__circles::before { width: 70px; height: 70px; border: solid 4px rgba(0, 174, 239, 0.5); transition: transform 0.22s ease-in-out, opacity 0.22s ease-in-out; } @media screen and (prefers-reduced-motion: reduce) { .help-assistant__triggerbutton__circles::before { transition: none; } } .help-assistant__triggerbutton[aria-expanded=true] .help-assistant__triggerbutton__circles::before { transform: translate(-50%, -50%) scale(0); opacity: 0; } .help-assistant__triggerbutton__circles::after { width: 54px; height: 54px; background: #003665; } .help-assistant__triggerbutton__cross { transform: rotate(45deg) scale(1); transition: transform 0.5s cubic-bezier(0.22, 1.03, 0.69, 0.97), opacity 0.5s linear; } @media screen and (prefers-reduced-motion: reduce) { .help-assistant__triggerbutton__cross { transition: none; } } .help-assistant__triggerbutton__cross::before, .help-assistant__triggerbutton__cross::after { content: ""; position: absolute; background: #ffffff; } .help-assistant__triggerbutton__cross::before { left: -10px; top: -0.5px; width: 20px; height: 1px; } .help-assistant__triggerbutton__cross::after { left: -0.5px; top: -10px; width: 1px; height: 20px; } .help-assistant__triggerbutton[aria-expanded=false] .help-assistant__triggerbutton__cross { transform: rotate(45deg) scale(0); opacity: 0; } .help-assistant__triggerbutton__content { position: relative; font-size: 0; line-height: 1; z-index: 1; transition: opacity 0.5s ease-in-out; } @media screen and (prefers-reduced-motion: reduce) { .help-assistant__triggerbutton__content { transition: none; } } .help-assistant__triggerbutton[aria-expanded=true] .help-assistant__triggerbutton__content { opacity: 0; } .help-assistant__triggerbutton__icon { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-bottom: 4px; background: #999; } .help-assistant__triggerbutton--online .help-assistant__triggerbutton__icon { background: #09c141; } .help-assistant__triggerbutton--offline .help-assistant__triggerbutton__icon { background: #ff8500; } @media all and (min-width: 46.25em) { .help-assistant__triggerbutton__icon + .help-assistant__triggerbutton__text, .help-assistant__triggerbutton__icon + .help-assistant__triggerbutton__text-icon { padding-bottom: 8px; } } .help-assistant__triggerbutton__text-icon { font-size: 1rem; } .help-assistant__triggerbutton__text { font-family: "LubalinDemi"; font-weight: 300; font-size: 13px; letter-spacing: -0.5px; } @media all and (min-width: 46.25em) { .help-assistant__triggerbutton__text { font-size: 10px; } } .help-assistant__triggerbutton__text__subcopy { font-size: 6.5px; margin-top: 2px; } @media all and (max-width: 46.24em) { .help-assistant__triggerbutton__text__subcopy { display: none; } } .help-assistant--live .help-assistant__menu { width: 13.625em; margin-right: 4px; margin-bottom: 70px; } @media all and (min-width: 61.25em) { .help-assistant--live.help-assistant--side .help-assistant__menu { position: absolute; right: 8px; bottom: 0; } } @media screen and (prefers-reduced-motion: reduce) and (min-width: 46.25em) { .help-assistant--live.help-assistant--side .help-assistant__menu { transition: none; } } .help-assistant--live .help-assistant__menu--visible { display: block; } .help-assistant--live .help-assistant__item { margin: 0 0 10px 0; } .help-assistant--live .help-assistant__item:hover { color: currentColor; } .help-assistant--live .help-assistant__link { width: 100%; justify-content: stretch; color: #003665; } @media all and (min-width: 61.25em) { .help-assistant--live .help-assistant__link { background: none; } } .help-assistant__triggerbutton[aria-expanded=true] + .help-assistant__menu .help-assistant__link { margin-bottom: 0; } .help-assistant--live .help-assistant__text__wrapper { order: 2; flex-grow: 1; } .help-assistant--live.help-assistant--side .help-assistant__text__wrapper { margin-right: 0; white-space: normal; } .help-assistant--live .help-assistant__text { padding-left: 7px; } .help-assistant__intro { position: absolute; right: 0; bottom: 0; width: 240px; } @media all and (max-width: 46.24em) { .help-assistant__intro { display: none; } } .help-assistant:not(.help-assistant--live) .help-assistant__intro, .header__wrapper--home ~ .help-assistant .help-assistant__intro { display: none; } .help-assistant__intro__text { position: relative; display: flex; align-items: center; height: 70px; padding: 0 70px 0 20px; background: #ffffff; color: #003665; border-radius: 35px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16); font-family: "LubalinDemi"; font-weight: 300; font-size: 13px; line-height: 17px; overflow: hidden; } .help-assistant__intro__text::before, .help-assistant__intro__text::after { visibility: hidden; } @media all and (min-width: 46.25em) { .help-assistant__intro__text::before, .help-assistant__intro__text::after { content: ""; position: absolute; left: 20px; top: 9px; width: 150px; background: #ffffff; visibility: visible; } .help-assistant__intro__text::before { height: 17px; animation-name: help-assistant__intro__text_before_fadeIn; animation-duration: 2s; animation-delay: 0.5s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; } .help-assistant__intro__text::after { height: 51px; animation-name: help-assistant__intro__text_after_fadeIn; animation-duration: 2s; animation-delay: 0.5s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; } } @media screen and (prefers-reduced-motion: reduce) and (min-width: 46.25em) { .help-assistant__intro__text::before, .help-assistant__intro__text::after { animation: none; } } .help-assistant__intro__subtext { position: absolute; right: -5%; top: 100%; width: 124%; font-size: 11px; line-height: 18px; color: #00aeef; text-align: center; margin-top: 6px; } .help-assistant__intro__subtext.help-assistant__intro__subtext--hidden { opacity: 0; } .help-assistant__intro__subtext .word { display: inline-block; } .help-assistant__intro__subtext .word .char { opacity: 0; animation-name: fadeIn_start, fadeIn; -webkit-animation-name: fadeIn_start, fadeIn; animation-fill-mode: forwards; } @media screen and (prefers-reduced-motion: reduce) and (min-width: 46.25em) { .help-assistant__intro__subtext { animation: none; } } .help-assistant.dont-animate .help-assistant__content, .help-assistant.dont-animate .help-assistant__triggerbutton { animation: none !important; transition: none !important; } .help-assistant__content { position: relative; z-index: 101; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: end; -moz-box-align: end; box-align: end; -webkit-align-items: flex-end; -moz-align-items: flex-end; -ms-align-items: flex-end; -o-align-items: flex-end; align-items: flex-end; -ms-flex-align: end; } .help-assistant--side .help-assistant__content { -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; transition: opacity 0.5s; } .help-assistant--hidden .help-assistant__content { opacity: 0; animation-name: hideAssistant; animation-duration: 0.5s; animation-fill-mode: forwards; } .help-assistant--shown .help-assistant__content { opacity: 1; animation-name: showAssistant; animation-duration: 0.5s; animation-fill-mode: forwards; } .help-assistant__overlay { background-color: #ffffff; bottom: 0; left: 0; right: 0; position: fixed; height: 0; opacity: 0; z-index: 100; -webkit-transition: opacity 0.22s ease-in-out 0.5s, height 0.01s ease-in-out 0.75s; -moz-transition: opacity 0.22s ease-in-out 0.5s, height 0.01s ease-in-out 0.75s; transition: opacity 0.22s ease-in-out 0.5s, height 0.01s ease-in-out 0.75s; } @media all and (min-width: 61.25em) { .help-assistant__overlay { display: none; } } .help-assistant__menu { margin: 0; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; } .help-assistant__item { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -moz-box-pack: end; box-pack: end; -webkit-justify-content: flex-end; -moz-justify-content: flex-end; -ms-justify-content: flex-end; -o-justify-content: flex-end; justify-content: flex-end; -ms-flex-pack: end; } .help-assistant__item[data-assistant-chat-item], .help-assistant__item[data-assistant-call-item] { display: none !important; } .help-assistant--live .help-assistant__item.help-assistant__item--color-blue { background-color: #003665; color: #ffffff; } .help-assistant--live .help-assistant__item.help-assistant__item--color-blue .help-assistant__link { color: #ffffff; } .help-assistant--live .help-assistant__item.help-assistant__item--color-white { background-color: #ffffff; color: #003665; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16); } .help-assistant--live .help-assistant__item.help-assistant__item--color-white .help-assistant__link { color: #003665; } .help-assistant--live .help-assistant__item.help-assistant__item--color-brown { background-color: #574e49; color: #ffffff; } .help-assistant--live .help-assistant__item.help-assistant__item--color-brown .help-assistant__link { color: #ffffff; } .help-assistant__item > .help-assistant__text__wrapper, .help-assistant__item > .help-assistant__button, .help-assistant__item > img { display: none; } .help-assistant__link { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; color: #003665; border: 0 none; line-height: 38px; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: end; -moz-box-pack: end; box-pack: end; -webkit-justify-content: flex-end; -moz-justify-content: flex-end; -ms-justify-content: flex-end; -o-justify-content: flex-end; justify-content: flex-end; -ms-flex-pack: end; border-radius: 19px; } @media all and (min-width: 61.25em) { .help-assistant__link { background-color: #003665; color: #ffffff; } } .help-assistant__text__wrapper { overflow: hidden; white-space: nowrap; position: relative; height: 38px; } .help-assistant--side .help-assistant__text__wrapper { font-size: 0.85em; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; line-height: initial; margin-left: 12px; } .help-assistant__text { font-family: "museosansregular", sans-serif; padding: 0 15px; } @media all and (min-width: 61.25em) { .help-assistant__text { padding-right: 0; } } .help-assistant--side .help-assistant__text { line-height: 1; } .btn--help-assistant-search { position: absolute; right: 0; top: 0; bottom: 0; line-height: 1em; border-radius: 0 19px 19px 0; } .help-assistant__text--search .input--search { padding: 0; border-radius: 0 19px 19px 0; } .help-assistant__text--search .btn--help-assistant-search { width: 0; opacity: 0; } .help-assistant__link--active .help-assistant__text--search .input--search { padding: 0 6.25em 0 0.75em; width: 31.25em; } .help-assistant__link--active .help-assistant__text--search .btn--help-assistant-search { width: 5.9375em; opacity: 1; } .help-assistant__text--search .input--search, .help-assistant__text--search form { border: 0 none; height: 38px; line-height: 38px; } .help-assistant__text--search .input--search { width: 0; } .help-assistant__text--search form { border-radius: 19px; left: -19px; } .help-assistant__button { position: relative; width: 38px; height: 38px; } .help-assistant__button .fa, .help-assistant__button .icon { display: block; font-size: 1em; } .help-assistant__content > .help-assistant__button { cursor: pointer; } .help-assistant__button-icon { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 21px; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; -webkit-transition: all 0.22s ease-in-out; -moz-transition: all 0.22s ease-in-out; transition: all 0.22s ease-in-out; z-index: 2; } .help-assistant--home .help-assistant__button-icon { background-color: #003665; color: #ffffff; } .help-assistant--side .help-assistant__button-icon { width: 38px; } .help-assistant--home { display: none; } @media all and (min-width: 61.25em) { .help-assistant--home { display: block; } } .help-assistant--home .help-assistant__content { -webkit-box-align: start; -moz-box-align: start; box-align: start; -webkit-align-items: flex-start; -moz-align-items: flex-start; -ms-align-items: flex-start; -o-align-items: flex-start; align-items: flex-start; -ms-flex-align: start; } .help-assistant--home .help-assistant__menu { -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; -webkit-flex-direction: row; -moz-flex-direction: row; flex-direction: row; -ms-flex-direction: row; } .help-assistant--home .help-assistant__item { margin: 0; padding: 8px; } .help-assistant--home .help-assistant__link { background-color: white; color: #003665; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; -webkit-box-direction: reverse; -moz-box-direction: reverse; box-direction: reverse; -webkit-flex-direction: row-reverse; -moz-flex-direction: row-reverse; flex-direction: row-reverse; -ms-flex-direction: row-reverse; } .help-assistant--home .help-assistant__button-icon { top: -1px; right: -1px; bottom: -1px; left: -1px; } .help-assistant--home .help-assistant__link[data-livechat]:hover, .help-assistant--home .help-assistant__link[href]:hover { cursor: pointer; color: #00aeef; } .help-assistant--home .help-assistant__link:hover .help-assistant__button-icon { background-color: #00aeef; } .help-assistant--home .help-assistant__link--active:hover .help-assistant__button-icon { background-color: #003665; } .help-assistant--home .help-assistant__item .help-assistant__text { margin-left: -100%; font-size: 0; padding: 0; background-color: transparent; border-radius: 19px; } .help-assistant--home .help-assistant__link--active .help-assistant__text { margin-left: 0; font-size: 1em; padding: 0 15px; } .help-assistant--home .help-assistant__link--active .help-assistant__text--search { padding: 0; } .help-assistant--home .help-assistant__link { -webkit-transition: margin 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); -moz-transition: margin 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: margin 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .help-assistant--home .input--search, .help-assistant--home .btn--help-assistant-search, .help-assistant--home .help-assistant__text { -webkit-transition-property: margin, font-size, width, padding, opacity; -moz-transition-property: margin, font-size, width, padding, opacity; transition-property: margin, font-size, width, padding, opacity; -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-delay: 0.25s; -moz-transition-delay: 0.25s; transition-delay: 0.25s; -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .help-assistant--home .help-assistant__text--search { -webkit-transition-delay: 0s; -moz-transition-delay: 0s; transition-delay: 0s; } .help-assistant--side { position: fixed; z-index: 1000; bottom: 85px; right: 28px; width: 0; } @media print { .help-assistant--side { display: none; } } @media all and (min-width: 61.25em) { .help-assistant--side { bottom: 100px; } } @media all and (min-width: 61.25em) and (min-height: 680px) { .help-assistant--side { bottom: 50%; } } .help-assistant--side .help-assistant__item .help-assistant__button-circles { display: none; } .help-assistant--side .help-assistant__button--active::after { content: ""; display: block; border-radius: 48px; height: 48px; width: 48px; position: absolute; left: -5px; top: -5px; box-shadow: 0 0 10px rgba(0, 54, 101, 0.5); -webkit-animation: animated-help-button-pulsate 1s ease-out 3s; -moz-animation: animated-help-button-pulsate 1s ease-out 3s; animation: animated-help-button-pulsate 1s ease-out 3s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; animation-iteration-count: infinite; } .help-assistant--side .help-assistant__button--active { margin: 16px 0 0 0; } .help-assistant--side .help-assistant__text__wrapper { margin-right: -100%; white-space: nowrap; } .help-assistant--side .help-assistant__link { margin-bottom: -38px; } .help-assistant--side.help-assistant--open { width: auto; } .help-assistant--side.help-assistant--open .help-assistant__menu { pointer-events: auto; -webkit-transition: width 0.01s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.01s; -moz-transition: width 0.01s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.01s; transition: width 0.01s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.01s; } .help-assistant--side.help-assistant--open .help-assistant__item { padding: 6px 10px; } .help-assistant--side.help-assistant--open .help-assistant__button--active::after { display: none; } .help-assistant--side.help-assistant--open .help-assistant__text__wrapper { margin-right: 0; } .help-assistant--side.help-assistant--open .help-assistant__link { margin-bottom: 0; } .help-assistant--side .help-assistant__item { -webkit-transition: padding 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.3s; -moz-transition: padding 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.3s; transition: padding 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.3s; } .help-assistant--side .help-assistant__item .help-assistant__link { -webkit-transition: margin 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.3s; -moz-transition: margin 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.3s; transition: margin 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.3s; } .help-assistant--side .help-assistant__item .help-assistant__text__wrapper { -webkit-transition: margin 0.5s ease-in-out 0.45s; -moz-transition: margin 0.5s ease-in-out 0.45s; transition: margin 0.5s ease-in-out 0.45s; } .help-assistant--side .help-assistant__menu { display: none; pointer-events: none; -webkit-transition: width 0.01s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s; -moz-transition: width 0.01s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s; transition: width 0.01s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s; } .help-assistant--side .help-assistant__menu--visible { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; } .help-assistant--side .help-assistant__item:nth-last-child(1) { -webkit-transition: padding 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.05s; -moz-transition: padding 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.05s; transition: padding 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.05s; } .help-assistant--side .help-assistant__item:nth-last-child(1) .help-assistant__link { -webkit-transition: margin 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.05s; -moz-transition: margin 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.05s; transition: margin 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.05s; } .help-assistant--side .help-assistant__item:nth-last-child(1) .help-assistant__text__wrapper { -webkit-transition: margin 0.5s ease-in-out 0.2s; -moz-transition: margin 0.5s ease-in-out 0.2s; transition: margin 0.5s ease-in-out 0.2s; } .help-assistant--side .help-assistant__item:nth-last-child(2) { -webkit-transition: padding 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s; -moz-transition: padding 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s; transition: padding 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s; } .help-assistant--side .help-assistant__item:nth-last-child(2) .help-assistant__link { -webkit-transition: margin 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s; -moz-transition: margin 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s; transition: margin 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s; } .help-assistant--side .help-assistant__item:nth-last-child(2) .help-assistant__text__wrapper { -webkit-transition: margin 0.5s ease-in-out 0.25s; -moz-transition: margin 0.5s ease-in-out 0.25s; transition: margin 0.5s ease-in-out 0.25s; } .help-assistant--side .help-assistant__item:nth-last-child(3) { -webkit-transition: padding 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.15s; -moz-transition: padding 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.15s; transition: padding 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.15s; } .help-assistant--side .help-assistant__item:nth-last-child(3) .help-assistant__link { -webkit-transition: margin 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.15s; -moz-transition: margin 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.15s; transition: margin 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.15s; } .help-assistant--side .help-assistant__item:nth-last-child(3) .help-assistant__text__wrapper { -webkit-transition: margin 0.5s ease-in-out 0.3s; -moz-transition: margin 0.5s ease-in-out 0.3s; transition: margin 0.5s ease-in-out 0.3s; } .help-assistant--side .help-assistant__item:nth-last-child(4) { -webkit-transition: padding 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s; -moz-transition: padding 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s; transition: padding 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s; } .help-assistant--side .help-assistant__item:nth-last-child(4) .help-assistant__link { -webkit-transition: margin 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s; -moz-transition: margin 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s; transition: margin 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.2s; } .help-assistant--side .help-assistant__item:nth-last-child(4) .help-assistant__text__wrapper { -webkit-transition: margin 0.5s ease-in-out 0.35s; -moz-transition: margin 0.5s ease-in-out 0.35s; transition: margin 0.5s ease-in-out 0.35s; } .help-assistant--side .help-assistant__item:nth-last-child(5) { -webkit-transition: padding 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.25s; -moz-transition: padding 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.25s; transition: padding 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.25s; } .help-assistant--side .help-assistant__item:nth-last-child(5) .help-assistant__link { -webkit-transition: margin 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.25s; -moz-transition: margin 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.25s; transition: margin 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.25s; } .help-assistant--side .help-assistant__item:nth-last-child(5) .help-assistant__text__wrapper { -webkit-transition: margin 0.5s ease-in-out 0.4s; -moz-transition: margin 0.5s ease-in-out 0.4s; transition: margin 0.5s ease-in-out 0.4s; } .help-assistant--open .help-assistant__overlay { height: 100%; opacity: 0.9; -webkit-transition: opacity 0.22s ease-in-out 0.01s, height 0.01s ease-in-out 0.01s; -moz-transition: opacity 0.22s ease-in-out 0.01s, height 0.01s ease-in-out 0.01s; transition: opacity 0.22s ease-in-out 0.01s, height 0.01s ease-in-out 0.01s; } .help-assistant--open .help-assistant__item { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; } .help-assistant__link:focus { outline: 0 none; } .help-assistant__link[data-livechat]:hover .help-assistant__text, .help-assistant__link[href]:hover .help-assistant__text, .help-assistant__link:hover .help-assistant__button-icon { cursor: pointer; } .help-assistant__button-circles { position: absolute; margin: 0; top: 0; left: 0; right: 0; bottom: 0; } .help-assistant__button-circles::after, .help-assistant__button-circles::before { content: ""; display: block; position: absolute; margin: 0; top: 0; left: 0; right: 0; bottom: 0; border-radius: 100%; -webkit-transition-property: margin; -moz-transition-property: margin; transition-property: margin; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: ease-in-out; -moz-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .help-assistant__button-circles::before { z-index: 2; background-color: #00aeef; -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; transition-delay: 0.4s; } .help-assistant__button--active .help-assistant__button-circles::before, .help-assistant__link--active .help-assistant__button-circles::before { margin: -4px; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; transition-delay: 0.2s; } .help-assistant__button-circles::after { z-index: 1; background-color: #bcedff; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; transition-delay: 0.2s; } .help-assistant__button--active .help-assistant__button-circles::after, .help-assistant__link--active .help-assistant__button-circles::after { margin: -8px; -webkit-transition-delay: 0.4s; -moz-transition-delay: 0.4s; transition-delay: 0.4s; } .help-assistant__menu { overflow: hidden; } .help-assistant__menu .help-assistant__item { position: relative; overflow: hidden; border-radius: 29px; } iframe[name=google_conversion_frame] { height: 0 !important; width: 0 !important; line-height: 0 !important; font-size: 0 !important; margin-top: -13px; float: left; } /** * Fix for vh on ipad iOS 7. * http://caniuse.com/#feat=viewport-unit-for-ipads */ .faq__item--closed .faq__item__content { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .faq { border-top: 1px solid #b7c2cb; border-right: 0 none; border-bottom: 1px solid #b7c2cb; border-left: 0 none; margin-right: -0.75em; margin-left: -0.75em; margin-bottom: 1em; padding-top: 0; padding-bottom: 0; } @media all and (min-width: 46.25em) { .faq { margin-right: 0; margin-left: 0; border-right: 1px solid #b7c2cb; border-left: 1px solid #b7c2cb; border-radius: 5px; overflow: hidden; } } .faq__item { background-color: #ffffff; border-bottom: 1px solid #b7c2cb; -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } :last-child > .faq__item { border-bottom: 0 none; } @media all and (min-width: 46.25em) { .faq__item { border-style: dashed; } } .faq__item__container { padding-top: 0; padding-bottom: 0; } .faq__item__title { position: relative; margin: 0; padding: 1em 3.5em 1em 0.75em; cursor: pointer; } .faq__item__content { padding: 1em 0.75em; } .faq__item__content .textimage .image--inset { margin-right: 0; margin-left: 0; } .faq__item__chevron { display: block; position: absolute; top: 0.8125em; right: 0.75em; color: #00aeef; background: #ffffff; height: 2em; width: 2em; border-radius: 50%; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .faq__item__chevron .icon { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .faq__item--closed { background-color: #eee; } .faq__item--closed .faq__item__chevron { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } @media print { .faq__item--closed .faq__item__content { width: auto; height: auto; position: static; padding: 1em 0.75em; } .faq__item--closed .faq__item__chevron { display: none; } .faq__item__content { page-break-inside: auto; padding: 1em 0.75em; } .faq__item__title { page-break-after: avoid; } } /** * Fix for vh on ipad iOS 7. * http://caniuse.com/#feat=viewport-unit-for-ipads */ .dynamic-title__align--left { text-align: left; } .dynamic-title__align--center { text-align: center; } .dynamic-title__align--right { text-align: right; } /** * Fix for vh on ipad iOS 7. * http://caniuse.com/#feat=viewport-unit-for-ipads */ div[class*=-disclaimer__btn-container] { width: 200px; display: inline-block; } /** * Fix for vh on ipad iOS 7. * http://caniuse.com/#feat=viewport-unit-for-ipads */ @media not print { .customprint { display: none; } } .customprint .logo { width: auto; height: 50px; margin: 20px 0; } @media print { .site__header, .header__wrapper, .footer, .form__submit, .container-environment-marker, .tab--steps__actions, .tab__controls, .help-assistant, .list-container, .socialfeedback, .productbutton, .btn--feedback { display: none; } } @media print and (min-width: 61.25em) { .adaptive--tablet:not(.adaptive--desktop), .show-on--tablet:not(.show-on--desktop) { display: block !important; } } @media print { .adaptive, .show-on { visibility: visible; } } @media print and (min-width: 46.25em) { .bp4-grid-6 { width: 50%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } } @media print { .form--general form .textarea, .form--general form .select, .form--general form .input, .checklist__overview.form--general .textarea, .checklist__overview.form--general .select, .checklist__overview.form--general .input, form.form--general .textarea, form.form--general .select, form.form--general .input { border: solid 1px #b7c2cb; } } @media print { a, .tab--simple > .tab__link, .tab__link__text { text-decoration: none !important; } } @media print { .btn--inlineblock { display: inline-block; width: auto; } } @media print { .js-height { height: auto !important; } } @media print { a[href]::after, img[src]::after { content: none !important; } } @media print { .checklist__item--unchecked .icon--checklist__item, .cookiepolicy__banner--show, #vee24LiveHelpTabPanel > table.v24shadow { display: none !important; } } body.js-print #vee24IntegratedPanel, body.js-print #vee24LiveHelpTabHTML, body.js-print #vee24LiveHelpTabPanel { display: none !important; } @media print { .form__group { page-break-inside: avoid; } } /** * Fix for vh on ipad iOS 7. * http://caniuse.com/#feat=viewport-unit-for-ipads */ .row__cta-buttons::before, .row__cta-buttons::after { display: table; content: ""; } .row__cta-buttons::after { clear: both; } .cta--block { border-radius: 6px; border: 1px solid #beccd8; background-color: white; margin-top: 0em; margin-bottom: 1.65em; } .cta--block--footer-outside { overflow: hidden; margin-bottom: 0; } .cta--block__header { position: relative; padding-top: 1.65em; padding-bottom: 2.475em; padding-left: 0.75em; padding-right: 0.75em; color: #003665; text-align: center; border-radius: 5px 5px 0 0; background-position: right center; background-size: cover; background-color: #f6f6f6; } .cta--block__steps { overflow: hidden; background-color: #f2f2f2; } .cta--block__steps--icons { position: relative; background-color: white; padding-top: 0em; padding-bottom: 0.825em; } div.cta--block__substep { margin-top: 0em; margin-bottom: 0em; padding-top: 1.2375em; padding-bottom: 1.2375em; color: #003665; overflow: hidden; _overflow: visible; zoom: 1; } @media all and (min-width: 61.25em) { div.cta--block__substep:last-child { border-right: 0 none; } } div.cta--block__substep:empty { display: none; } @media all and (min-width: 61.25em) { div.cta--block__substep { overflow: visible; padding-top: 1.65em; padding-bottom: 1.65em; text-align: center; border-right: 2px solid white; border-bottom: 2px solid white; } div.cta--block__substep:empty { display: block; } div.cta--block__substep.bp4-grid-6:nth-of-type(2n+2) { border-right: none; } div.cta--block__substep.bp4-grid-6:nth-last-child(-n+2) { border-bottom: none; } div.cta--block__substep.bp4-grid-4:nth-of-type(3n+3) { border-right: none; } div.cta--block__substep.bp4-grid-4:nth-last-child(-n+3) { border-bottom: none; } } div.cta--block__substep .icon, div.cta--block__substep .fa { display: table-cell; vertical-align: top; padding-right: 0.5em; font-size: 2.625em; line-height: 0.6285714286em; margin-bottom: 0.1571428571em; width: 40px; font-weight: normal; color: #003665; } @media all and (min-width: 61.25em) { div.cta--block__substep .icon, div.cta--block__substep .fa { display: block; width: auto; padding-right: 0; text-align: center; margin: 10px auto; } } div.cta--block__substep .icon--number { display: block; float: left; padding-right: 0; margin-right: 0.5em; font-size: 1.5em; line-height: 0em; margin-bottom: 0.55em; font-family: "LubalinBook"; font-weight: 600; height: 40px; width: 40px; line-height: 35px; text-align: center; border-radius: 50%; border: 2px solid white; background-color: white; } @media all and (min-width: 61.25em) { div.cta--block__substep .icon--number { margin: 0 auto; float: none; } } div.cta--block__substep .cta--text { overflow: hidden; _overflow: visible; zoom: 1; display: table-cell; vertical-align: top; } @media all and (min-width: 61.25em) { div.cta--block__substep .cta--text { overflow: visible; display: block; } } .cta--block__title { margin-top: 1.65em; margin-bottom: 3.3em; color: #00aeef; position: relative; padding-left: 0.75em; padding-right: 0.75em; } @media all and (min-width: 46.25em) { .cta--block__title { padding-left: 3em; padding-right: 3em; } } .cta--block__title::after { content: ""; position: absolute; border-top: 2px solid #00aeef; left: 49%; bottom: -15px; width: 2%; height: 0; } .cta--block__description { margin-top: 0em; margin-bottom: 1.65em; padding-left: 0.75em; padding-right: 0.75em; } @media all and (min-width: 46.25em) { .cta--block__description { padding-left: 3.75em; padding-right: 3.75em; } } .cta--block__input-control { position: relative; } .cta--block__input-field { position: absolute; left: 0; top: 5px; } .cta--block__input-text { margin-left: 25px; } .cta--block__title--margin { margin-top: 1.65em; margin-bottom: 1.65em; } .cta--text { height: auto; } .cta--text__title { display: block; font-weight: bold; } .cta--block__footer { padding-top: 1em; clear: both; text-align: center; background-color: #f2f2f2; } .cta--block__footer > .cta--block__button[data-multi-product-button] { display: none; } .cta--block__footer > .cta--block__button.cta--block__button--active[data-multi-product-button] { display: block; } .cta--block__footer > .btn { border-radius: 0 0 5px 5px; display: block; } .cta--block__footer > .btn .icon--arrow-right-big { margin-left: 0.5em; } @media all and (min-width: 46.25em) { .cta--block__footer > .btn { margin-bottom: -30px; border-radius: 5px; display: inline-block; height: auto; } } .cta--block--footer-outside + .cta--block__footer { padding-top: 0; margin-top: -1.32em; margin-bottom: 1.65em; background-color: transparent; } .row__cta-buttons { margin-top: 3.3em; margin-bottom: 0em; margin-left: -0.75em; margin-right: -0.75em; } .btn--cta { text-align: left; padding-top: 0em; padding-bottom: 0em; margin-top: 0em; margin-bottom: 1.65em; border-radius: 5px; border: none; display: block; } .btn--cta:hover { border: none; } .btn--cta .icon, .btn--cta .fa { padding-left: 0.375em; padding-right: 0.75em; display: inline-block; font-size: 2em; position: relative; font-weight: normal; height: 2em; line-height: 2em; border-right: 2px solid rgba(255, 255, 255, 0.5); } .btn--cta--default { background-color: #f2f2f2; color: #00aeef; } .btn--cta--default:hover { color: #00aeef; background-color: #f6f6f6; } .btn--cta--right { text-align: right; } .btn--cta--right .icon, .btn--cta--right .fa { padding-left: 0.75em; padding-right: 0.375em; border-right: 0; border-left: 2px solid rgba(255, 255, 255, 0.5); } .btn--cta__text { padding-left: 0.75em; padding-right: 0.75em; text-decoration: underline; padding-top: 1em; padding-bottom: 1em; line-height: 2em; } @media print { .cta--block__footer, .btn--cta, .row__cta-buttons { display: none; } .cta--block__substep { page-break-inside: avoid; } .cta--block__header { padding-bottom: 0; page-break-before: avoid; } .cta--block__header .overlay--arrow { display: none; } } /** * Fix for vh on ipad iOS 7. * http://caniuse.com/#feat=viewport-unit-for-ipads */ .banner--content { min-height: 18.75em; } .row > .grid .banner--content > .row > .grid { margin-left: 0em; width: 100%; } @media all and (min-width: 46.25em) { .content-banner__blocks { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; } .content-banner__blocks .content-banner__block { padding-left: 0em; padding-right: 1.5em; } .content-banner__blocks .content-banner__block:first-child { padding-left: 1.5em; padding-right: 1.5em; } } @media all and (min-width: 46.25em) { .content-banner__blocks--reverse { -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; -webkit-box-direction: reverse; -moz-box-direction: reverse; box-direction: reverse; -webkit-flex-direction: row-reverse; -moz-flex-direction: row-reverse; flex-direction: row-reverse; -ms-flex-direction: row-reverse; } .content-banner__blocks--reverse .content-banner__block { padding-left: 1.5em; padding-right: 0em; } .content-banner__blocks--reverse .content-banner__block:first-child { padding-left: 1.5em; padding-right: 1.5em; } } .content-banner__block { text-align: center; } @media all and (min-width: 46.25em) { .content-banner__block { text-align: left; width: 50%; padding-left: 1.5em; padding-right: 0em; } .content-banner__block:first-child { padding-left: 0em; padding-right: 1.5em; } } .content-banner__block .btn--inlineblock { margin-top: 1.65em; } .content-banner__block:first-child { margin-bottom: 1.65em; } @media all and (min-width: 46.25em) { .content-banner__block a:not(.content-banner__page-link) { float: left; } .content-banner__block a:not(.content-banner__page-link):last-of-type:not(.btn) { margin-top: 0.5em; margin-left: 5px; clear: both; } } .content-banner__block a:not(.content-banner__page-link):last-of-type:not(.btn) { color: inherit; border-color: inherit; } .content-banner__title { word-break: normal; padding: 0; } .content-banner--dark-blue { color: #003665; } .content-banner--white { color: #ffffff; } .content-banner__text p:last-child { margin: 0; } .content-banner__page-link { background-color: #ffffff; display: block; position: relative; border-bottom: 1px solid #b7c2cb; padding-top: 0.825em; padding-bottom: 0.825em; padding-left: 1.125em; padding-right: 0.75em; padding-left: 1em; padding-right: 3.75em; margin-top: 0em; margin-bottom: 0em; } .content-banner__page-link:last-child { border: none; } .content-banner__page-link:hover { border-color: #b7c2cb; } .content-banner__page-link .content-banner__page-link-text { margin: 0; padding: 0; } .content-banner__page-link .icon { font-size: 1.5em; padding: 0.5em; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } @media all and (min-width: 46.25em) { .content-banner__page-link { margin-bottom: 1.65em; padding-top: 1.65em; padding-bottom: 1.65em; border: none; border-radius: 2px; } .content-banner__page-link:last-child { margin-bottom: 0; } } @media print { .content-banner__page-link { display: none; } .content-banner__title, .content-banner__text { text-align: left; } } /** * Fix for vh on ipad iOS 7. * http://caniuse.com/#feat=viewport-unit-for-ipads */ .column-control { min-height: 100%; } .column-control .parsys--adaptable { margin-bottom: 0; padding-top: 1.2375em; padding-bottom: 1.2375em; } .column-control .parsys--adaptable[class*=" bg-color--"] { padding-left: 1.125em; padding-right: 1.125em; border-radius: 3px; height: 100%; } .column-control .column { margin-bottom: 1.65em; height: auto; } /** * Fix for vh on ipad iOS 7. * http://caniuse.com/#feat=viewport-unit-for-ipads */ .table__scrollwrapper { position: relative; } .table__container--collapsible { overflow-x: scroll; } .table__container--collapsible .table__heading { display: none; } @media all and (min-width: 46.25em) { .table__container--collapsible .table__heading { display: table-row; } } .table__container--collapsible .table__rowindicator { position: absolute; right: 0; line-height: 20px; margin-right: 8px; transform: rotate(-90deg); } @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { .table__container--collapsible .table__rowindicator { position: static; } } @media all and (min-width: 46.25em) { .table__container--collapsible .table__rowindicator { display: none; } } .table__container--collapsible table { line-height: 20px; } .table__container--collapsible table tbody .table__fixed-column { cursor: pointer; } @media all and (min-width: 46.25em) { .table__container--collapsible table tbody .table__fixed-column { cursor: auto; } } @media all and (max-width: 46.24em) { .table__container--collapsible table .table__fixed-column { background-color: #003665; color: #ffffff; } } .table__container--collapsible table td:not(.table__fixed-column) { display: none; } .table__container--collapsible table td:not(.table__fixed-column)[data-title]:before { content: attr(data-title); display: block; float: left; height: 100%; padding-right: 20px; text-align: left; width: 50%; } @media all and (min-width: 46.25em) { .table__container--collapsible table td:not(.table__fixed-column)[data-title]:before { content: none; } } @media all and (min-width: 46.25em) { .table__container--collapsible table td:not(.table__fixed-column) { display: table-cell; } } .table__container--collapsible table th { position: relative; } .table__container--collapsible table .open { display: block; } @media all and (min-width: 46.25em) { .table__container--collapsible table .open { display: table-row; } } .table__container--collapsible table .open td { display: block; } @media all and (min-width: 46.25em) { .table__container--collapsible table .open td { display: table-cell; } } .table__container--collapsible table .open .table__rowindicator { transform: rotate(90deg); } @media all and (min-width: 46.25em) { .table__container--collapsible table tr:not(.table__heading):nth-child(odd) th:not(.table__fixed-column), .table__container--collapsible table tr:not(.table__heading):nth-child(odd) td { background-color: #fcfcfc; } } .table__container--scrollable table { border-left: 1px solid #e1e1e1; } @media all and (min-width: 46.25em) { .table__container--scrollable table { padding-left: 149px; } } @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { .table__container--scrollable table { padding-left: 0; } } .table__container--scrollable tr:not(.table__heading) { position: relative; } .table__container--scrollable .table__fixed-column { border-top: 0; } @media all and (min-width: 46.25em) { .table__container--scrollable .table__fixed-column { position: absolute; left: 0; width: 150px; z-index: 1; border-left: 1px solid #e1e1e1; } } @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { .table__container--scrollable .table__fixed-column { position: static; } } .table__container--scrollable .table__heading th.table__fixed-column { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; } .table__container--scrollable td, .table__container--scrollable th { min-width: 150px; } .table__container--scrollable caption { position: relative; } /** * Fix for vh on ipad iOS 7. * http://caniuse.com/#feat=viewport-unit-for-ipads */ .carousel__item__text ul { list-style: disc; } .carousel__item__text ol { list-style: decimal; } .carousel__item__text ul, .carousel__item__text ol { list-style-position: outside !important; padding-left: 1.2em; } .carousel__item__text ul li, .carousel__item__text ol li { margin-bottom: 6px; } .carousel__item__text :last-child { margin-bottom: 0; } .carousel__item__text p + ul, .carousel__item__text p + ol { margin-top: -1.25em; } .carousel__item__text p > br:last-child { margin-bottom: 0; } .carousel { margin-bottom: 1.65em; } .carousel__title { text-align: center; word-break: normal; } .carousel__content { height: 18.75em; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; position: relative; } @media all and (max-width: 46.24em) { .carousel__content.grid { padding-left: 0; padding-right: 0; } } @media all and (min-width: 46.25em) { .carousel__content { height: 25em; } } .carousel__items { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-flex-grow: 1; -moz-flex-grow: 1; flex-grow: 1; -ms-flex-positive: 1; overflow: hidden; } .carousel__item { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-flex-basis: 100%; -moz-flex-basis: 100%; flex-basis: 100%; -ms-flex-preferred-size: 100%; -webkit-flex-shrink: 0; -moz-flex-shrink: 0; flex-shrink: 0; -ms-flex-negative: 0; -webkit-flex-grow: 0; -moz-flex-grow: 0; flex-grow: 0; -ms-flex-positive: 0; overflow: hidden; } .carousel__item--animated { transition: margin 0.5s ease-out; } .carousel__item__info { display: none; } @media all and (min-width: 46.25em) { .carousel__item--row { -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; -webkit-flex-direction: row; -moz-flex-direction: row; flex-direction: row; -ms-flex-direction: row; } } .carousel__item__image { background-repeat: no-repeat; background-size: contain; background-position: center center; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-flex-grow: 1; -moz-flex-grow: 1; flex-grow: 1; -ms-flex-positive: 1; } .carousel__item__text { margin-top: 0.825em; margin-bottom: 1.65em; text-align: center; line-height: 1.5em; min-height: 3em; display: block; max-width: 100%; padding: 0 0.75em; } @media all and (min-width: 61.25em) { .carousel__item__text { padding: 0; } } .carousel__item__text p:last-child { margin-bottom: 0; } .carousel__bullets { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; height: 1.875em; } .carousel__bullet { -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; -webkit-flex: 0 0 auto; -moz-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 1.875em; height: 1.875em; position: relative; cursor: pointer; } .carousel__bullet::after { content: ""; position: absolute; top: 0.625em; left: 0.625em; right: 0.625em; bottom: 0.625em; border-radius: 50%; border: 1px solid #00aeef; } .carousel__bullet--current { cursor: auto; } .carousel__bullet--current::after { background-color: #003665; border: none; } .carousel__btn { display: none; } @media all and (min-width: 61.25em) { .carousel__btn { position: absolute; color: #00aeef; font-size: 3em; height: 3.75em; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; cursor: pointer; text-shadow: 2px 2px 5px #ccc; } .carousel__btn[disabled] { cursor: auto; color: #eee; } } .carousel__btn[data-nav=previous] { left: 0; } .carousel__btn[data-nav=next] { right: 0; } .carousel__content--testimonial { height: auto; min-height: 15.625em; padding-left: 0.75em; padding-right: 0.75em; } @media all and (min-width: 46.25em) { .carousel__content--testimonial { padding-left: 3em; padding-right: 3em; } } .carousel__items--testimonial { overflow: hidden; -webkit-box-align: start; -moz-box-align: start; box-align: start; -webkit-align-items: flex-start; -moz-align-items: flex-start; -ms-align-items: flex-start; -o-align-items: flex-start; align-items: flex-start; -ms-flex-align: start; } .carousel__item--testimonial { -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; } @media all and (min-width: 46.25em) { .carousel__item--testimonial { -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; -webkit-box-align: start; -moz-box-align: start; box-align: start; -webkit-align-items: flex-start; -moz-align-items: flex-start; -ms-align-items: flex-start; -o-align-items: flex-start; align-items: flex-start; -ms-flex-align: start; } } @media all and (min-width: 46.25em) { .carousel__item__text.carousel__item__text--testimonial { width: 70%; text-align: left; margin: 0; } } .carousel__item__long-text { display: none; } @media all and (min-width: 46.25em) { .carousel__person { margin-right: 2.5em; } } .carousel__person__text { text-align: center; } .carousel__person__photo { width: 5em; height: 5em; border-radius: 50%; overflow: hidden; margin: 0 auto; background-position: center center; background-size: cover; } @media all and (min-width: 46.25em) { .carousel__person__photo { margin-bottom: 0.625em; } } @media print { .carousel__content { display: none; } } /** * Fix for vh on ipad iOS 7. * http://caniuse.com/#feat=viewport-unit-for-ipads */ .breadcrumb { padding-top: 0.825em; padding-bottom: 0.825em; } .breadcrumb--usp { background-color: whitesmoke; } .crumbs.crumbs { list-style: none; margin: 0; padding: 0; padding-left: 0.375em; padding-right: 0em; padding-left: 0; list-style: none; } .crumbs.crumbs li { float: left; } .crumbs.crumbs::after { content: ""; display: table; clear: both; } .crumbs.crumbs li { font-size: 0.875em; line-height: 1.8857142857em; margin-bottom: 0em; padding-left: 0em; padding-right: 0.1875em; color: #003665; margin-bottom: 0; display: block; white-space: nowrap; } .crumbs.crumbs a { -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; color: #003665; border: none; } .crumbs.crumbs a:hover { border-bottom: 1px solid #0089bc; color: #0089bc; } .crumbs.crumbs .crumb--last { color: #0abcff; } .crumbs.crumbs i { margin-left: 0.1875em; margin-right: 0.1875em; } @media print { .breadcrumb { display: none; } } /** * Fix for vh on ipad iOS 7. * http://caniuse.com/#feat=viewport-unit-for-ipads */ .inline-badge { position: relative; } @media all and (min-width: 46.25em) { .inline-badge { max-width: 1440px; margin: 0 auto; } } .inline-badge__link { display: block; text-decoration: none; transition: none; border: none; } @media all and (min-width: 46.25em) { .inline-badge__link { position: absolute; right: calc(0.75em + 12px); width: 100px; z-index: 1; transform: translateY(-50%); } } .inline-badge__image img { display: block; width: 100%; height: auto; border-radius: 0; } @media all and (min-width: 46.25em) { .inline-badge__image--mobile { display: none; } } @media all and (max-width: 46.24em) { .inline-badge__image--desktop { display: none; } } /** * Fix for vh on ipad iOS 7. * http://caniuse.com/#feat=viewport-unit-for-ipads */ .assets-list__table table tr th { background-color: #f5f5f5; color: #003665; } .assets-list__table table thead th { font-weight: normal; text-align: center; background-color: #fff; color: #003665; border-bottom: 5px solid #f99d1c; } /** * Fix for vh on ipad iOS 7. * http://caniuse.com/#feat=viewport-unit-for-ipads */ .agenda-item__container { background-color: #eee; border-radius: 5px; margin-bottom: 0.625em; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; } @media all and (min-width: 46.25em) { .agenda-item__container { padding: 1.25em 0; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; -webkit-flex-direction: row; -moz-flex-direction: row; flex-direction: row; -ms-flex-direction: row; } } .agenda-item__info { padding: 0.625em 0.75em; } .agenda-item__info::after { content: " "; display: block; border-bottom: 1px solid #b7c2cb; width: 100%; margin: 0.9375em auto 0 auto; } @media all and (min-width: 46.25em) { .agenda-item__info { width: 30%; text-align: right; padding: 0 1.25em 1.25em 1.25em; border-right: 1px solid #b7c2cb; border-bottom: 0 none; } .agenda-item__info::after { display: none; } } .agenda-item__speaker { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; } @media all and (min-width: 46.25em) { .agenda-item__speaker { -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: end; -moz-box-align: end; box-align: end; -webkit-align-items: flex-end; -moz-align-items: flex-end; -ms-align-items: flex-end; -o-align-items: flex-end; align-items: flex-end; -ms-flex-align: end; } } .agenda-item__speaker-info .btn__sharing { margin: 0.3125em; } .agenda-item__speaker-photo { width: 6.25em; height: 6.25em; border-radius: 50%; overflow: hidden; margin-right: 0.625em; background-position: center center; background-size: cover; } @media all and (min-width: 46.25em) { .agenda-item__speaker-photo { margin-bottom: 0.625em; margin-right: 0; } } .agenda-item-detail { padding: 0.625em 0.75em; } .agenda-item-detail > .parsys > :first-child { margin-top: 0; padding-top: 0; } .agenda-item-detail .image--inset { margin-right: 0; margin-left: 0; } .agenda-item-detail .textimage ul { margin-left: 0.9375em; } .agenda-item-detail .textimage :last-child { margin-bottom: 0; } @media all and (min-width: 46.25em) { .agenda-item-detail { width: 70%; padding: 0 1.25em; } } @media print { .agenda-item__speaker-photo { display: none; } } @charset "UTF-8"; @font-face { font-family: "iconskbc"; src: url("../../../clientlibs/kbc/fonts/websites/icons-kbc/font/icons-kbc.v2-23.ttf") format("truetype"), url("../../../clientlibs/kbc/fonts/websites/icons-kbc/font/icons-kbc.v2-23.woff") format("woff"), url("../../../clientlibs/kbc/fonts/websites/icons-kbc/font/icons-kbc.v2-23.svg") format("svg"); font-weight: normal; font-style: normal; } .icon { font-family: "iconskbc"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon--2x { font-size: 2em; } .icon--3x { font-size: 3em; } .icon--right { margin-left: 0.5em; } .icon--paper-clip::before { content: ""; } .icon--monitor::before { content: ""; } .icon--cog::before { content: ""; } .icon--microphone::before { content: ""; } .icon--anchor::before { content: ""; } .icon--loader::before { content: ""; } .icon--plus::before { content: ""; } .icon--menu::before { content: ""; } .icon--message::before { content: ""; } .icon--smartphone2::before { content: ""; } .icon--clock::before { content: ""; } .icon--download::before { content: ""; } .icon--share::before { content: ""; } .icon--speech::before { content: ""; } .icon--sun::before { content: ""; } .icon--arrow::before { content: ""; } .icon--check::before { content: ""; } .icon--globe::before { content: ""; } .icon--location2::before { content: ""; } .icon--phone2::before { content: ""; } .icon--lock::before { content: ""; } .icon--pos-terminal::before { content: ""; } .icon--money-box::before { content: ""; } .icon--card-in-use::before { content: ""; } .icon--house::before { content: ""; } .icon--land::before { content: ""; } .icon--apartment::before { content: ""; } .icon--smartphone::before { content: ""; } .icon--video-camera::before { content: ""; } .icon--keyboard::before { content: ""; } .icon--integrated-webcam::before { content: ""; } .icon--down::before { content: ""; } .icon--forward::before { content: ""; } .icon--media-play::before { content: ""; } .icon--phone1::before { content: ""; } .icon--twitter::before { content: ""; } .icon--phone::before { content: ""; } .icon--update::before { content: ""; } .icon--chat::before { content: ""; } .icon--new::before { content: ""; } .icon--twitter-round-full::before { content: ""; } .icon--mobilebanking::before { content: ""; } .icon--location-full::before { content: ""; } .icon--twitter-full::before { content: ""; } .icon--arrow-right-big::before { content: ""; } .icon--touch::before { content: ""; } .icon--bank::before { content: ""; } .icon--facebook-round::before { content: ""; } .icon--twitter-round::before { content: ""; } .icon--euro::before { content: ""; } .icon--paper-plane::before { content: ""; } .icon--cancel::before { content: ""; } .icon--checkmark::before { content: ""; } .icon--paraplu::before { content: ""; } .icon--facebook-round-full::before { content: ""; } .icon--linkedin::before { content: ""; } .icon--facebook::before { content: ""; } .icon--upload-to-cloud::before { content: ""; } .icon--touch-thin::before { content: ""; } .icon--chat2::before { content: ""; } .icon--arrow-right::before { content: ""; } .icon--arrow-left::before { content: ""; } .icon--arrow-left-big::before { content: ""; } .icon--glogon-arrow-left::before { content: ""; } .icon--glogon-arrow-right::before { content: ""; } .icon--glogon-lock::before { content: ""; } .icon--glogon-touch::before { content: ""; } .icon--glogon-invest::before { content: ""; } .icon--glogon-appstore::before { content: ""; } .icon--share-arrow::before { content: ""; } .icon--videochat::before { content: ""; } .icon--search::before { content: ""; } .icon--phone3::before { content: ""; } .icon--mail::before { content: ""; } .icon--chat3::before { content: ""; } .icon--down-bold::before { content: ""; } .icon--home::before { content: ""; } .icon--payments::before { content: ""; } .icon--savings-full::before { content: ""; } .icon--warning::before { content: ""; } .icon--error::before { content: ""; } .icon--info::before { content: ""; } .icon--contact::before { content: ""; } .icon--car::before { content: ""; } .icon--glogon-autolease::before { content: ""; } .icon--glogon-cbc::before { content: ""; } .icon--glogon-kbc::before { content: ""; } .icon--glogon-invoice-portal::before { content: ""; } .icon--business-dashboard::before { content: ""; } .icon--briefcase::before { content: ""; } .icon--discover::before { content: ""; } .icon--prepaid-card::before { content: ""; } .icon--credit-card::before { content: ""; } .icon--mobile::before { content: ""; } .icon--tablet-pc-phone::before { content: ""; } .icon--tablet-pc::before { content: ""; } .icon--accounts::before { content: ""; } .icon--insurances-truck::before { content: ""; } .icon--insurances-vehicle-boat::before { content: ""; } .icon--insurances-vehicle-bike::before { content: ""; } .icon--insurances-vehicle-motorcycle::before { content: ""; } .icon--header-live-help::before { content: ""; } .icon--download2::before { content: ""; } .icon--callback::before { content: ""; } .icon--callback-fill::before { content: ""; } .icon--idea::before { content: ""; } .icon--expertise::before { content: ""; } .icon--devices::before { content: ""; } .icon--chart::before { content: ""; } .icon--at::before { content: ""; } .icon--document::before { content: ""; } .icon--insurances-umbrella::before { content: ""; } .icon--online::before { content: ""; } .icon--steps::before { content: ""; } .icon--attention::before { content: ""; } .icon--spotify::before { content: ""; } .icon--youtube::before { content: ""; } .icon--play-squared::before { content: ""; } .icon--instagram::before { content: ""; } .icon--snapchat::before { content: ""; } .icon--safety::before { content: ""; color: #ee7079; } .icon--pay::before { content: ""; color: #ee7079; } .icon--budgethacks::before { content: ""; color: #ee7079; } .icon--mobility::before { content: ""; color: #ee7079; } .icon--live::before { content: ""; color: #ee7079; } .icon--travel::before { content: ""; color: #ee7079; } .icon--work::before { content: ""; color: #ee7079; } @charset "UTF-8"; /** * Fix for vh on ipad iOS 7. * http://caniuse.com/#feat=viewport-unit-for-ipads */ .parsys::before, .notification::before, a.page-link::before, .row--banners::before, .row::before, .pagination--centered::before, .parsys::after, .notification::after, a.page-link::after, .row--banners::after, .row::after, .pagination--centered::after { display: table; content: ""; } .parsys::after, .notification::after, a.page-link::after, .row--banners::after, .row::after, .pagination--centered::after { clear: both; } .screen-reader-only { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .page__title, .alpha, .beta, .textimage h2, .gamma, .textimage h3, .delta, .textimage h4 { -ms-word-break: break-all; word-break: break-all; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; } .btn { border-radius: 5px; position: relative; display: block; width: 100%; text-align: center; padding: 0; margin: 0; overflow: hidden; font-family: "museosansregular", sans-serif; font-weight: 600; cursor: pointer; text-decoration: none; transition: all 0.22s ease-in-out; transition-property: background, color, border; -webkit-appearance: none; -webkit-font-smoothing: antialiased; } .btn:hover, .btn:visited { text-decoration: none; } .alert-box.soft, .alert-box.error { margin-bottom: 1.65em; position: relative; padding: 0.875em 1.3125em; border-radius: 3px; } .alert-box.soft a:hover, .alert-box.error a:hover, .alert-box.soft a:active, .alert-box.error a:active, .alert-box.soft a:focus, .alert-box.error a:focus { text-decoration: none; } .alert-box.soft .close, .alert-box.error .close { position: absolute; top: 0.825em; right: 0.825em; display: block; line-height: 1; border: none; } .alert-box.soft p, .alert-box.error p { padding-top: 0.825em; padding-bottom: 0em; margin-top: 0em; margin-bottom: 0.825em; } .pagination--centered { width: 100%; overflow: hidden; } .pagination--centered ul { margin: 1.65em 0; } .pagination--centered ul li { float: left; } .pagination--centered a, .pagination--centered span { display: block; float: left; } .btn { border: 1px solid #00aeef; background-color: #00aeef; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0); padding-left: 0.75em; padding-right: 0.75em; font-size: 1em; margin-bottom: 0; padding-top: 0.5em; padding-bottom: 0.5em; line-height: 1.5em; outline: none; color: white; } .btn:hover, .btn:focus { border: 1px solid #1ec2ff; background-color: #1ec2ff; } .btn:active { background-color: #1ec2ff; box-shadow: none; } .btn:hover { color: white; } .btn:focus, .btn:active { color: white; } .btn:disabled { border-color: #eee; background: #eee; color: #999; cursor: not-allowed; } .btn .fa { margin-left: 10px; } .btn--secondary { border: 1px solid #003665; background-color: #003665; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0); } .btn--secondary:hover, .btn--secondary:focus { border: 1px solid #004f93; background-color: #004f93; } .btn--secondary:active { background-color: #004f93; box-shadow: none; } .btn--confirm { border: 1px solid #80c342; background-color: #80c342; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0); } .btn--confirm:hover, .btn--confirm:focus { border: 1px solid #97ce65; background-color: #97ce65; } .btn--confirm:active { background-color: #97ce65; box-shadow: none; } .btn--simple { border: 1px solid #eee; background-color: #eee; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0); color: #003665; } .btn--simple:hover, .btn--simple:focus { border: 1px solid white; background-color: white; } .btn--simple:active { background-color: white; box-shadow: none; } .btn--simple:active, .btn--simple:focus, .btn--simple:hover { background-color: #f5f5f5; color: #003665; } .btn--cancel { border: 1px solid #b2b4b6; background-color: #b2b4b6; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0); } .btn--cancel:hover, .btn--cancel:focus { border: 1px solid #cacbcc; background-color: #cacbcc; } .btn--cancel:active { background-color: #cacbcc; box-shadow: none; } .btn--add { border: 1px solid #91bd69; background-color: #91bd69; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0); padding-left: 0.625em; padding-right: 0.625em; height: 1.875em; line-height: 1.5625em; text-align: center; display: inline-block; } .btn--add:hover, .btn--add:focus { border: 1px solid #a8cb89; background-color: #a8cb89; } .btn--add:active { background-color: #a8cb89; box-shadow: none; } .btn--search, .btn--contact, .btn--touch { border-radius: 3px; } .btn--live, .btn--toggle { padding-top: 0em; padding-bottom: 0em; border-radius: 3px; font-size: 90%; height: 2.2em; line-height: 2.2em; background-color: white; color: #00aeef; border: 1px solid #00aeef; } .btn--live:hover, .btn--toggle:hover, .btn--live:active, .btn--toggle:active, .btn--live:focus, .btn--toggle:focus { background-color: white; color: #0089bc; border-color: #0089bc; } .btn--toggle { margin-top: 0em; margin-bottom: 0.825em; } .btn--toggle--on { background-color: #00aeef; color: white; } .btn--toggle--on:hover { background-color: #00aeef; color: white; } .media, .media__body { overflow: hidden; _overflow: visible; zoom: 1; } .media__body { width: 10000px; } .media__left { padding-right: 1em; } .media__right { padding-left: 1em; } .media__left, .media__right, .media__body { display: table-cell; vertical-align: top; } .media__middle { vertical-align: middle; } .media__bottom { vertical-align: bottom; } th, td, html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; background: transparent; } article, aside, figure, footer, header, hgroup, nav, section, main { display: block; } /* Grid Classes --------------------------------------- */ .row { margin: 0 auto; max-width: 1440px; } @media all and (min-width: 46.25em) { .row { padding-left: 0.75em; padding-right: 0.75em; } } .row .row { margin-left: -0.75em; margin-right: -0.75em; padding-left: 0; padding-right: 0; } .grid-1 { width: 100%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .grid-2 { width: 100%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .grid-3 { width: 100%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .grid-4 { width: 100%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .grid-5 { width: 100%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .grid-6 { width: 100%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .grid-7 { width: 100%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .grid-8 { width: 100%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .grid-9 { width: 100%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .grid-10 { width: 100%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .grid-11 { width: 100%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .push-left-0 { margin-left: 0%; } .push-right-0 { margin-right: 0%; } .pull-left-0 { left: 0%; } .push-left-1 { margin-left: 8.3333333333%; } .push-right-1 { margin-right: 8.3333333333%; } .pull-left-1 { left: -8.3333333333%; } .push-left-2 { margin-left: 16.6666666667%; } .push-right-2 { margin-right: 16.6666666667%; } .pull-left-2 { left: -16.6666666667%; } .push-left-3 { margin-left: 25%; } .push-right-3 { margin-right: 25%; } .pull-left-3 { left: -25%; } .push-left-4 { margin-left: 33.3333333333%; } .push-right-4 { margin-right: 33.3333333333%; } .pull-left-4 { left: -33.3333333333%; } .push-left-5 { margin-left: 41.6666666667%; } .push-right-5 { margin-right: 41.6666666667%; } .pull-left-5 { left: -41.6666666667%; } .push-left-6 { margin-left: 50%; } .push-right-6 { margin-right: 50%; } .pull-left-6 { left: -50%; } .push-left-7 { margin-left: 58.3333333333%; } .push-right-7 { margin-right: 58.3333333333%; } .pull-left-7 { left: -58.3333333333%; } .push-left-8 { margin-left: 66.6666666667%; } .push-right-8 { margin-right: 66.6666666667%; } .pull-left-8 { left: -66.6666666667%; } .push-left-9 { margin-left: 75%; } .push-right-9 { margin-right: 75%; } .pull-left-9 { left: -75%; } .push-left-10 { margin-left: 83.3333333333%; } .push-right-10 { margin-right: 83.3333333333%; } .pull-left-10 { left: -83.3333333333%; } .push-left-11 { margin-left: 91.6666666667%; } .push-right-11 { margin-right: 91.6666666667%; } .pull-left-11 { left: -91.6666666667%; } .grid, .grid-12 { clear: both; padding-left: 12px; padding-right: 12px; } @media all and (min-width: 30em) { .bp2-grid-1 { width: 8.3333333333%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp2-grid-2 { width: 16.6666666667%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp2-grid-3 { width: 25%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp2-grid-4 { width: 33.3333333333%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp2-grid-5 { width: 41.6666666667%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp2-grid-6 { width: 50%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp2-grid-7 { width: 58.3333333333%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp2-grid-8 { width: 66.6666666667%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp2-grid-9 { width: 75%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp2-grid-10 { width: 83.3333333333%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp2-grid-11 { width: 91.6666666667%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp2-push-left-0 { margin-left: 0%; } .bp2-push-right-0 { margin-right: 0%; } .bp2-pull-left-0 { left: 0%; } .bp2-push-left-1 { margin-left: 8.3333333333%; } .bp2-push-right-1 { margin-right: 8.3333333333%; } .bp2-pull-left-1 { left: -8.3333333333%; } .bp2-push-left-2 { margin-left: 16.6666666667%; } .bp2-push-right-2 { margin-right: 16.6666666667%; } .bp2-pull-left-2 { left: -16.6666666667%; } .bp2-push-left-3 { margin-left: 25%; } .bp2-push-right-3 { margin-right: 25%; } .bp2-pull-left-3 { left: -25%; } .bp2-push-left-4 { margin-left: 33.3333333333%; } .bp2-push-right-4 { margin-right: 33.3333333333%; } .bp2-pull-left-4 { left: -33.3333333333%; } .bp2-push-left-5 { margin-left: 41.6666666667%; } .bp2-push-right-5 { margin-right: 41.6666666667%; } .bp2-pull-left-5 { left: -41.6666666667%; } .bp2-push-left-6 { margin-left: 50%; } .bp2-push-right-6 { margin-right: 50%; } .bp2-pull-left-6 { left: -50%; } .bp2-push-left-7 { margin-left: 58.3333333333%; } .bp2-push-right-7 { margin-right: 58.3333333333%; } .bp2-pull-left-7 { left: -58.3333333333%; } .bp2-push-left-8 { margin-left: 66.6666666667%; } .bp2-push-right-8 { margin-right: 66.6666666667%; } .bp2-pull-left-8 { left: -66.6666666667%; } .bp2-push-left-9 { margin-left: 75%; } .bp2-push-right-9 { margin-right: 75%; } .bp2-pull-left-9 { left: -75%; } .bp2-push-left-10 { margin-left: 83.3333333333%; } .bp2-push-right-10 { margin-right: 83.3333333333%; } .bp2-pull-left-10 { left: -83.3333333333%; } .bp2-push-left-11 { margin-left: 91.6666666667%; } .bp2-push-right-11 { margin-right: 91.6666666667%; } .bp2-pull-left-11 { left: -91.6666666667%; } } @media all and (min-width: 46.25em) { .bp3-grid-1 { width: 8.3333333333%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp3-grid-2 { width: 16.6666666667%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp3-grid-3 { width: 25%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp3-grid-4 { width: 33.3333333333%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp3-grid-5 { width: 41.6666666667%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp3-grid-6 { width: 50%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp3-grid-7 { width: 58.3333333333%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp3-grid-8 { width: 66.6666666667%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp3-grid-9 { width: 75%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp3-grid-10 { width: 83.3333333333%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp3-grid-11 { width: 91.6666666667%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp3-push-left-0 { margin-left: 0%; } .bp3-push-right-0 { margin-right: 0%; } .bp3-pull-left-0 { left: 0%; } .bp3-push-left-1 { margin-left: 8.3333333333%; } .bp3-push-right-1 { margin-right: 8.3333333333%; } .bp3-pull-left-1 { left: -8.3333333333%; } .bp3-push-left-2 { margin-left: 16.6666666667%; } .bp3-push-right-2 { margin-right: 16.6666666667%; } .bp3-pull-left-2 { left: -16.6666666667%; } .bp3-push-left-3 { margin-left: 25%; } .bp3-push-right-3 { margin-right: 25%; } .bp3-pull-left-3 { left: -25%; } .bp3-push-left-4 { margin-left: 33.3333333333%; } .bp3-push-right-4 { margin-right: 33.3333333333%; } .bp3-pull-left-4 { left: -33.3333333333%; } .bp3-push-left-5 { margin-left: 41.6666666667%; } .bp3-push-right-5 { margin-right: 41.6666666667%; } .bp3-pull-left-5 { left: -41.6666666667%; } .bp3-push-left-6 { margin-left: 50%; } .bp3-push-right-6 { margin-right: 50%; } .bp3-pull-left-6 { left: -50%; } .bp3-push-left-7 { margin-left: 58.3333333333%; } .bp3-push-right-7 { margin-right: 58.3333333333%; } .bp3-pull-left-7 { left: -58.3333333333%; } .bp3-push-left-8 { margin-left: 66.6666666667%; } .bp3-push-right-8 { margin-right: 66.6666666667%; } .bp3-pull-left-8 { left: -66.6666666667%; } .bp3-push-left-9 { margin-left: 75%; } .bp3-push-right-9 { margin-right: 75%; } .bp3-pull-left-9 { left: -75%; } .bp3-push-left-10 { margin-left: 83.3333333333%; } .bp3-push-right-10 { margin-right: 83.3333333333%; } .bp3-pull-left-10 { left: -83.3333333333%; } .bp3-push-left-11 { margin-left: 91.6666666667%; } .bp3-push-right-11 { margin-right: 91.6666666667%; } .bp3-pull-left-11 { left: -91.6666666667%; } } @media all and (min-width: 61.25em) { .bp4-grid-1 { width: 8.3333333333%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp4-grid-2 { width: 16.6666666667%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp4-grid-3 { width: 25%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp4-grid-4 { width: 33.3333333333%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp4-grid-5 { width: 41.6666666667%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp4-grid-6 { width: 50%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp4-grid-7 { width: 58.3333333333%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp4-grid-8 { width: 66.6666666667%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp4-grid-9 { width: 75%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp4-grid-10 { width: 83.3333333333%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp4-grid-11 { width: 91.6666666667%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp4-push-left-0 { margin-left: 0%; } .bp4-push-right-0 { margin-right: 0%; } .bp4-pull-left-0 { left: 0%; } .bp4-push-left-1 { margin-left: 8.3333333333%; } .bp4-push-right-1 { margin-right: 8.3333333333%; } .bp4-pull-left-1 { left: -8.3333333333%; } .bp4-push-left-2 { margin-left: 16.6666666667%; } .bp4-push-right-2 { margin-right: 16.6666666667%; } .bp4-pull-left-2 { left: -16.6666666667%; } .bp4-push-left-3 { margin-left: 25%; } .bp4-push-right-3 { margin-right: 25%; } .bp4-pull-left-3 { left: -25%; } .bp4-push-left-4 { margin-left: 33.3333333333%; } .bp4-push-right-4 { margin-right: 33.3333333333%; } .bp4-pull-left-4 { left: -33.3333333333%; } .bp4-push-left-5 { margin-left: 41.6666666667%; } .bp4-push-right-5 { margin-right: 41.6666666667%; } .bp4-pull-left-5 { left: -41.6666666667%; } .bp4-push-left-6 { margin-left: 50%; } .bp4-push-right-6 { margin-right: 50%; } .bp4-pull-left-6 { left: -50%; } .bp4-push-left-7 { margin-left: 58.3333333333%; } .bp4-push-right-7 { margin-right: 58.3333333333%; } .bp4-pull-left-7 { left: -58.3333333333%; } .bp4-push-left-8 { margin-left: 66.6666666667%; } .bp4-push-right-8 { margin-right: 66.6666666667%; } .bp4-pull-left-8 { left: -66.6666666667%; } .bp4-push-left-9 { margin-left: 75%; } .bp4-push-right-9 { margin-right: 75%; } .bp4-pull-left-9 { left: -75%; } .bp4-push-left-10 { margin-left: 83.3333333333%; } .bp4-push-right-10 { margin-right: 83.3333333333%; } .bp4-pull-left-10 { left: -83.3333333333%; } .bp4-push-left-11 { margin-left: 91.6666666667%; } .bp4-push-right-11 { margin-right: 91.6666666667%; } .bp4-pull-left-11 { left: -91.6666666667%; } } @media all and (min-width: 81.25em) { .bp5-grid-1 { width: 8.3333333333%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp5-grid-2 { width: 16.6666666667%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp5-grid-3 { width: 25%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp5-grid-4 { width: 33.3333333333%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp5-grid-5 { width: 41.6666666667%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp5-grid-6 { width: 50%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp5-grid-7 { width: 58.3333333333%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp5-grid-8 { width: 66.6666666667%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp5-grid-9 { width: 75%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp5-grid-10 { width: 83.3333333333%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp5-grid-11 { width: 91.6666666667%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } .bp5-push-left-0 { margin-left: 0%; } .bp5-push-right-0 { margin-right: 0%; } .bp5-pull-left-0 { left: 0%; } .bp5-push-left-1 { margin-left: 8.3333333333%; } .bp5-push-right-1 { margin-right: 8.3333333333%; } .bp5-pull-left-1 { left: -8.3333333333%; } .bp5-push-left-2 { margin-left: 16.6666666667%; } .bp5-push-right-2 { margin-right: 16.6666666667%; } .bp5-pull-left-2 { left: -16.6666666667%; } .bp5-push-left-3 { margin-left: 25%; } .bp5-push-right-3 { margin-right: 25%; } .bp5-pull-left-3 { left: -25%; } .bp5-push-left-4 { margin-left: 33.3333333333%; } .bp5-push-right-4 { margin-right: 33.3333333333%; } .bp5-pull-left-4 { left: -33.3333333333%; } .bp5-push-left-5 { margin-left: 41.6666666667%; } .bp5-push-right-5 { margin-right: 41.6666666667%; } .bp5-pull-left-5 { left: -41.6666666667%; } .bp5-push-left-6 { margin-left: 50%; } .bp5-push-right-6 { margin-right: 50%; } .bp5-pull-left-6 { left: -50%; } .bp5-push-left-7 { margin-left: 58.3333333333%; } .bp5-push-right-7 { margin-right: 58.3333333333%; } .bp5-pull-left-7 { left: -58.3333333333%; } .bp5-push-left-8 { margin-left: 66.6666666667%; } .bp5-push-right-8 { margin-right: 66.6666666667%; } .bp5-pull-left-8 { left: -66.6666666667%; } .bp5-push-left-9 { margin-left: 75%; } .bp5-push-right-9 { margin-right: 75%; } .bp5-pull-left-9 { left: -75%; } .bp5-push-left-10 { margin-left: 83.3333333333%; } .bp5-push-right-10 { margin-right: 83.3333333333%; } .bp5-pull-left-10 { left: -83.3333333333%; } .bp5-push-left-11 { margin-left: 91.6666666667%; } .bp5-push-right-11 { margin-right: 91.6666666667%; } .bp5-pull-left-11 { left: -91.6666666667%; } } @media print { .parsys > .row > .grid:only-child { margin-left: 0%; margin-right: 0%; left: 0%; width: 100%; } } .l-center { text-align: center; } .l-left { text-align: left; } .l-right { text-align: right; } @media all and (min-width: 30em) { .bp2-l-center { text-align: center; } .bp2-l-left { text-align: left; } .bp2-l-right { text-align: right; } } @media all and (min-width: 46.25em) { .bp3-l-center { text-align: center; } .bp3-l-left { text-align: left; } .bp3-l-right { text-align: right; } } .f-left { float: left; } .f-right { float: right; } .grid--min-height { min-height: 1px; } .visible-bp1-block, .visible-bp1-inline, .visible-bp1-inline-block, .visible-bp2-block, .visible-bp2-inline, .visible-bp3-inline-block, .visible-bp3-block, .visible-bp3-inline, .visible-bp3-inline-block, .visible-bp4-block, .visible-bp4-inline, .visible-bp4-inline-block, .visible-bp5-block, .visible-bp5-inline, .visible-bp5-inline-block { display: none !important; } @media (max-width: 479px) { .visible-bp1 { display: block !important; } table.visible-bp1 { display: table !important; } tr.visible-bp1 { display: table-row !important; } th.visible-bp1, td.visible-bp1 { display: table-cell !important; } } @media (max-width: 479px) { .visible-bp1-block { display: block !important; } } @media (max-width: 479px) { .visible-bp1-inline { display: inline !important; } } @media (max-width: 479px) { .visible-bp1-inline-block { display: inline-block !important; } } @media (min-width: 480px) and (max-width: 979px) { .visible-bp2 { display: block !important; } table.visible-bp2 { display: table !important; } tr.visible-bp2 { display: table-row !important; } th.visible-bp2, td.visible-bp2 { display: table-cell !important; } } @media (min-width: 480px) and (max-width: 739px) { .visible-bp2-block { display: block !important; } } @media (min-width: 480px) and (max-width: 739px) { .visible-bp2-inline { display: inline !important; } } @media (min-width: 480px) and (max-width: 739px) { .visible-bp2-inline-block { display: inline-block !important; } } @media (min-width: 740px) and (max-width: 979px) { .visible-bp3 { display: block !important; } table.visible-bp3 { display: table !important; } tr.visible-bp3 { display: table-row !important; } th.visible-bp3, td.visible-bp3 { display: table-cell !important; } } @media (min-width: 740px) and (max-width: 979px) { .visible-bp3-block { display: block !important; } } @media (min-width: 740px) and (max-width: 979px) { .visible-bp3-inline { display: inline !important; } } @media (min-width: 740px) and (max-width: 979px) { .visible-bp3-inline-block { display: inline-block !important; } } @media (min-width: 980px) { .visible-bp4 { display: block !important; } table.visible-bp4 { display: table !important; } tr.visible-bp4 { display: table-row !important; } th.visible-bp4, td.visible-bp4 { display: table-cell !important; } } @media (min-width: 980px) { .visible-bp4-block { display: block !important; } } @media (min-width: 980px) { .visible-bp4-inline { display: inline !important; } } @media (min-width: 980px) { .visible-bp4-inline-block { display: inline-block !important; } } @media (max-width: 479px) { .hidden-bp1 { display: none !important; } } @media (min-width: 480px) and (max-width: 739px) { .hidden-bp2 { display: none !important; } } @media (min-width: 740px) and (max-width: 979px) { .hidden-bp3 { display: none !important; } } @media (min-width: 980px) { .hidden-bp4 { display: none !important; } } /*! Animate.css - http://daneden.me/animate Licensed under the MIT license - http://opensource.org/licenses/MIT Copyright (c) 2014 Daniel Eden */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @keyframes fadeIn_start { 0% { opacity: 0; } 100% { opacity: 0; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @keyframes fadeInLeftSmall { 0% { opacity: 0; -webkit-transform: translate3d(-5%, 0, 0); transform: translate3d(-5%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeftSmall { -webkit-animation-name: fadeInLeftSmall; animation-name: fadeInLeftSmall; } @keyframes fadeOut_start { 0% { opacity: 1; } 100% { opacity: 1; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @keyframes slideInLeft { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); visibility: visible; } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @keyframes slideInRight { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); visibility: visible; } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { visibility: hidden; -webkit-transform: translateX(-100%); transform: translateX(-100%); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @keyframes slideOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 100% { visibility: hidden; -webkit-transform: translateX(100%); transform: translateX(100%); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } /**/ @keyframes rotate360 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .rotate360 { -webkit-animation-name: rotate360; animation-name: rotate360; } .btn--color-primary { border: 1px solid #009985; background-color: #009985; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0); } .btn--color-primary:hover, .btn--color-primary:focus { border: 1px solid #00c7ad; background-color: #00c7ad; } .btn--color-primary:active { background-color: #00c7ad; box-shadow: none; } .btn--color-secondary { border: 1px solid #00aeef; background-color: #00aeef; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0); } .btn--color-secondary:hover, .btn--color-secondary:focus { border: 1px solid #1ec2ff; background-color: #1ec2ff; } .btn--color-secondary:active { background-color: #1ec2ff; box-shadow: none; } .btn--color-success { border: 1px solid #80c342; background-color: #80c342; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0); } .btn--color-success:hover, .btn--color-success:focus { border: 1px solid #97ce65; background-color: #97ce65; } .btn--color-success:active { background-color: #97ce65; box-shadow: none; } .btn--color-danger { border: 1px solid #ee7079; background-color: #ee7079; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0); } .btn--color-danger:hover, .btn--color-danger:focus { border: 1px solid #f3999f; background-color: #f3999f; } .btn--color-danger:active { background-color: #f3999f; box-shadow: none; } .btn--color-dark { border: 1px solid #003665; background-color: #003665; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0); } .btn--color-dark:hover, .btn--color-dark:focus { border: 1px solid #004f93; background-color: #004f93; } .btn--color-dark:active { background-color: #004f93; box-shadow: none; } .btn--search .icon { font-size: 1.2em; font-weight: bold; line-height: inherit; margin-right: 10px; } @media all and (min-width: 61.25em) { .btn--search .icon { font-size: 1.4em; margin-right: 0; } } @media all and (min-width: 61.25em) { .btn--search { color: #003665; background: none; border: 0 none; } .btn--search:focus, .btn--search:active, .btn--search:hover { background: none; border: 0 none; color: #00aeef; } } .btn--contact .icon { margin-right: 10px; } @media all and (min-width: 61.25em) { .btn--contact .icon { margin-right: 0; } } .btn--touch { float: right; margin-top: 0.825em; display: inline-block; width: 6.25em; } .btn--touch span { display: none; } .btn--touch .icon--touch, .btn--touch .icon--glogon-touch, .btn--touch .icon--touch-thin { font-size: 2.2em; line-height: 1; font-weight: 500; } @media all and (min-width: 61.25em) { .btn--touch { float: none; width: auto; margin-top: 0; } .btn--touch span { display: inline; } .btn--touch .icon, .btn--touch .fa { margin-right: 5px; } .btn--touch .icon--touch, .btn--touch .icon--glogon-touch, .btn--touch .icon--touch-thin { float: left; margin-top: 3px; margin-right: 7px; } } .btn--toggle__container { margin-top: 0em; margin-bottom: 0.825em; text-align: center; } .btn--toggle__container .btn--toggle { overflow: visible; white-space: nowrap; } @media all and (min-width: 46.25em) { .btn--toggle__container .btn--toggle { margin-left: 0.3em; margin-right: 0.3em; display: inline-block; width: auto; } } .btn--touch .icon--touch, .btn--touch .icon--glogon-touch, .btn--touch .icon--touch-thin { font-size: 2.2em; line-height: 1; font-weight: 500; } @media all and (min-width: 30em) { .btn--touch { width: auto; } .btn--touch .icon, .btn--touch .fa { margin-right: 5px; } .btn--touch .icon--touch, .btn--touch .icon--glogon-touch, .btn--touch .icon--touch-thin { float: left; margin-top: 3px; margin-right: 7px; } } .homebanking-button--mobile .btn--touch.btn { height: 3em; width: 3em; border-radius: 50%; margin-top: 0.5em; padding: 0; position: relative; } .homebanking-button--mobile .btn--touch.btn .icon { margin: 0; position: absolute; left: 0; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .homebanking-button--mobile .btn--touch.btn .icon--mobilebanking { font-weight: 900; } .scroll-button, .header__scroll__button { width: 50px; height: 50px; border-radius: 50%; position: absolute; left: 0; right: 0; top: -25px; margin: auto; background-color: #ffffff; z-index: 1; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -moz-box-pack: center; box-pack: center; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-pack: center; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; } .scroll-button:hover, .header__scroll__button:hover { cursor: pointer; } .scroll-button--bottom { bottom: -25px; top: auto; } .scroll-button__icon, .header__scroll__button__icon { color: #00aeef; font-size: small; } .scroll-button__icon.icon, .icon.header__scroll__button__icon { font-weight: bold; } @media all and (min-width: 46.25em) { .btn--inlineblock { display: inline-block; width: auto; } .btn--small { font-size: 0.6875em; line-height: 2.4em; height: 2.4em; margin-bottom: 0em; line-height: 1.875em; height: 1.875em; } .btn--thin { line-height: 1.875em; height: 1.875em; } } .btn--disabled { background-color: #beccd8; border-color: #beccd8; } /*doc --- title: Media Embedding name: media-embedding category: Modules --- Responsive media embedding, like an iframe ```html_example
``` */ .media-embed { width: 100%; height: 0; padding-bottom: 62.5%; position: relative; overflow: hidden; margin-bottom: 2.475em; } .media-embed iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .bG--muted { background-color: #f5f5f5; } .tag--title { padding-left: 0.375em; padding-right: 0.375em; padding-top: 0.2475em; padding-bottom: 0.2475em; box-shadow: 1px 1px 3px #b7c2cb; font-size: 75%; background-color: white; color: #00aeef; position: relative; top: -2px; } .tag--title a { border: 0 none; } .tag--title span { color: #00aeef; font-size: 75%; position: relative; top: 2px; } .bT { border-top: 1px solid #b7c2cb; } .bT--big { border-top: 2px solid #b7c2cb; } .bT--huge { border-top: 3px solid #b7c2cb; } .bB--big { border-bottom: 2px solid #b7c2cb; } .nB { border: 0 none !important; } .padding { padding-top: 1.65em; padding-bottom: 1.65em; } .padding--top { padding-top: 1.65em; } .padding--bottom { padding-bottom: 1.65em; } .padding--big { padding-top: 1.65em; padding-bottom: 1.65em; } @media all and (min-width: 46.25em) { .padding--big { padding-top: 3.3em; padding-bottom: 3.3em; } } .padding--top--mini { padding-top: 0.4125em; } .padding--top--small { padding-top: 1.2375em; } .padding--top--big { padding-top: 1.65em; } @media all and (min-width: 46.25em) { .padding--top--big { padding-top: 3.3em; } } @media all and (max-width: 29.99em) { .padding--top--big { padding-top: 0; } } .padding--bottom--big { padding-bottom: 1.65em; } @media all and (min-width: 46.25em) { .padding--bottom--big { padding-bottom: 3.3em; } } .padding--huge { padding-top: 1.65em; padding-bottom: 1.65em; } @media all and (min-width: 46.25em) { .padding--huge { padding-top: 4.125em; padding-bottom: 4.125em; } } .padding--top--huge { padding-top: 1.65em; } @media all and (min-width: 46.25em) { .padding--top--huge { padding-top: 4.125em; } } .padding--bottom--huge { padding-bottom: 1.65em; } @media all and (min-width: 46.25em) { .padding--bottom--huge { padding-bottom: 4.125em; } } .padding--top--massive { padding-top: 1.65em; } @media all and (min-width: 46.25em) { .padding--top--massive { padding-top: 10%; } } @media all and (min-width: 61.25em) { .padding--top--massive { padding-top: 17%; } } .padding--left { padding-left: 3px; padding-right: 0px; } .padding--right { padding-left: 0px; padding-right: 3px; } .padding--right--big { padding-left: 0px; padding-right: 12px; } .padding--left-right { padding-left: 3px; padding-right: 3px; } .padding--em-left-right { padding-left: 0.75em; padding-right: 0.75em; } .margin-top { margin-top: 1.65em; } .margin-top--big { margin-top: 3.3em; } .margin-top--medium { margin-top: 2.475em; } .margin-bottom { margin-bottom: 1.65em; } .margin-bottom--big { margin-bottom: 3.3em; } @media all and (min-width: 61.25em) { .offset { padding-top: 4.62em; } } @media all and (min-width: 61.25em) { .top-spacer { padding-top: 4.62em; } } .hN.hN { padding-top: 0; margin-top: 0; padding-bottom: 0; margin-bottom: 0; } .hT.hT { padding-top: 0; margin-top: 0; } .hB.hB { padding-bottom: 0; margin-bottom: 0; } .pB.pB { padding-bottom: 0; } /* Placeholders --------------------------------------- */ /* Input elements --------------------------------------- */ .input--file, .input--text, .input--email, .input--password, .input--search, .input--tel, .input--url, .input--number, .input--date, .input--month, .input--week, .input--time, .input--datetime, .input--datetime-local, .select, .select[multiple], .textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 1em; line-height: 1.65em; height: 1.65em; margin-bottom: 1.65em; padding-left: 6px; padding-right: 6px; background-color: white; border: 2px solid #d5dbe0; color: #5e5e5e; font-family: "museosansregular", sans-serif; margin: 0; border-radius: 5px; width: 100%; height: 2.625em; outline: none; display: block; -webkit-appearance: none; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; } .input--file:focus, .input--text:focus, .input--email:focus, .input--password:focus, .input--search:focus, .input--tel:focus, .input--url:focus, .input--number:focus, .input--date:focus, .input--month:focus, .input--week:focus, .input--time:focus, .input--datetime:focus, .input--datetime-local:focus, .select:focus, .select[multiple]:focus, .textarea:focus { border-width: 2px; color: #00aeef; outline-color: #0a69e7; border-color: #00aeef; } .textarea { overflow: auto; } .input--search { border-color: #b7c2cb; height: 2.625em; line-height: 2.625em; } .input--calculated { color: #00aeef; } .select { padding-top: 0.5em; padding-bottom: 0.5em; -webkit-appearance: menulist; } .textarea { padding-top: 0.4125em; padding-bottom: 0.4125em; height: auto; } .input__group { position: relative; display: table; border-collapse: separate; } .input__group input:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .input__group__btn { position: relative; white-space: nowrap; width: 1%; vertical-align: middle; display: table-cell; } .input__group__btn:last-child > .btn { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; } .input__group__btn > .btn { position: relative; } .input[readonly] { background-color: white !important; cursor: text !important; } .btn--file { position: relative; overflow: hidden; } .btn--file .input--file { position: absolute; top: 0; right: 0; min-width: 100%; min-height: 100%; font-size: 100px; text-align: right; filter: alpha(opacity=0); opacity: 0; outline: none; background: white; cursor: inherit; display: block; } form .bp4-grid-6 + .bp4-grid-6 { clear: none; } form .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 { clear: both; } form .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 { clear: none; } form .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 { clear: both; } form .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 { clear: none; } form .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 { clear: both; } form .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 { clear: none; } form .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 { clear: both; } form .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 { clear: none; } form .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 { clear: both; } form .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 { clear: none; } form .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 { clear: both; } form .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 { clear: none; } form .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 { clear: both; } form .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 { clear: none; } form .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 { clear: both; } form .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 { clear: none; } form .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 { clear: both; } form .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 { clear: none; } form .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 + .bp4-grid-6 { clear: both; } form .bp4-grid-12 { clear: both; } .legend, .label { display: block; width: 100%; cursor: pointer; clear: right; font-size: 1.125em; line-height: 1.4666666667em; margin-bottom: 0em; } .legend.is-nested, .label.is-nested { margin-top: 0em; margin-bottom: 1.65em; } .label__tooltip { display: block; float: right; text-align: center; color: #00aeef; border: 1px solid #00aeef; border-radius: 1.25em; width: 1.25em; height: 1.25em; line-height: 1.25em; } .legend .label__tooltip, .label__tooltip--legend { float: none; margin-left: 10px; display: inline-block; } .label--mandatory::after { content: " *"; } .form__group .input, .form__group .label { vertical-align: middle; width: auto; display: inline-block; } .form__group .input.input--radio, .form__group .input.input--checkbox { vertical-align: top; height: auto; margin-top: 0.5em; } .form__group .input { margin-right: 0.5em; } .form__group label { margin-right: 1.25em; } .form__group .input--checkbox + .label { max-width: calc(100% - 30px); margin-right: 0; } .form__group .label--checkbox { display: block; margin-right: 0; } .form__group .label--radio { vertical-align: top; } .form__group__item { display: inline-block; } .form__group--list { clear: both; } .form__group--list .label { line-height: 1.25em; height: auto; padding-left: 25px; display: block; } .form__group--list .input[type=checkbox], .form__group--list .input[type=radio] { width: 15px; margin-top: 5px; float: left; } .form__group--list .form__group__item { display: block; } .input--error { border-color: #c41442 !important; margin-bottom: 0 !important; } .input__error-message { color: #c41442; display: block; text-align: left; margin-top: 0em; margin-bottom: 0.825em; } .input__error-message::empty { display: none; } .input__extra-text { font-size: 0.75em; display: block; text-align: left; margin-top: -1.1em; margin-bottom: 1.1em; } .input__extra-text::empty { display: none; } .input__extra-text--checkbox, .input__extra-text--radio { margin-top: 0; } .input--checkbox + div, .input--radio + div { display: inline-block; vertical-align: top; max-width: calc(100% - 30px); } .form--general form, .checklist__overview.form--general, form.form--general { clear: both; border: 1px solid #b7c2cb; background-color: #f5f5f5; padding-top: 3.3em; padding-bottom: 1.65em; margin-top: 0em; margin-bottom: 2.475em; margin-left: -0.75em; margin-right: -0.75em; padding-left: 20px; padding-right: 20px; border-left: 0 none; border-right: 0 none; } .form--general form::after, .checklist__overview.form--general::after, form.form--general::after { content: ""; display: table; clear: both; } @media all and (min-width: 46.25em) { .form--general form, .checklist__overview.form--general, form.form--general { margin-left: 0em; margin-right: 0em; border-radius: 5px; padding-left: 50px; padding-right: 50px; padding-bottom: 0; border-left: 1px solid #b7c2cb; border-right: 1px solid #b7c2cb; } } .form--general form .textarea, .form--general form .select, .form--general form .input, .checklist__overview.form--general .textarea, .checklist__overview.form--general .select, .checklist__overview.form--general .input, form.form--general .textarea, form.form--general .select, form.form--general .input { border-color: #ffffff; margin-top: 0em; margin-bottom: 0.825em; } .form--general form .textarea:focus, .form--general form .select:focus, .form--general form .input:focus, .checklist__overview.form--general .textarea:focus, .checklist__overview.form--general .select:focus, .checklist__overview.form--general .input:focus, form.form--general .textarea:focus, form.form--general .select:focus, form.form--general .input:focus { border-color: #00aeef; } .form--general form label, .checklist__overview.form--general label, form.form--general label { margin-top: 0em; margin-bottom: 0.33em; } .form--general form .input__group, .checklist__overview.form--general .input__group, form.form--general .input__group { margin-top: 0em; margin-bottom: 1.65em; } .form--general form .input__group > input, .checklist__overview.form--general .input__group > input, form.form--general .input__group > input { margin-top: 0em; margin-bottom: 0em; } .form--general form .btn--file, .checklist__overview.form--general .btn--file, form.form--general .btn--file { height: 2.625em; } .form--general form .fieldset, .checklist__overview.form--general .fieldset, form.form--general .fieldset { position: relative; clear: both; margin-left: -20px; margin-right: -20px; margin-top: 0em; margin-bottom: 3.3em; } .form--general form .fieldset .title, .form--general form .fieldset .legend, .checklist__overview.form--general .fieldset .title, .checklist__overview.form--general .fieldset .legend, form.form--general .fieldset .title, form.form--general .fieldset .legend { font-weight: bold; margin-top: 0em; margin-bottom: 1.65em; display: block; text-align: center; position: relative; } @media all and (min-width: 46.25em) { .form--general form .fieldset .title, .form--general form .fieldset .legend, .checklist__overview.form--general .fieldset .title, .checklist__overview.form--general .fieldset .legend, form.form--general .fieldset .title, form.form--general .fieldset .legend { text-align: left; } } .form--general form .fieldset .title .number, .form--general form .fieldset .legend .number, .checklist__overview.form--general .fieldset .title .number, .checklist__overview.form--general .fieldset .legend .number, form.form--general .fieldset .title .number, form.form--general .fieldset .legend .number { font-family: "LubalinBook"; font-weight: 600; text-align: center; font-size: 1.2em; background: #ffffff; display: inline-block; width: 35px; height: 35px; line-height: 35px; border-radius: 35px; border: 1px solid #b7c2cb; margin-left: 0em; margin-right: 0.375em; } @media all and (min-width: 46.25em) { .form--general form .fieldset .title .number, .form--general form .fieldset .legend .number, .checklist__overview.form--general .fieldset .title .number, .checklist__overview.form--general .fieldset .legend .number, form.form--general .fieldset .title .number, form.form--general .fieldset .legend .number { font-size: 1.5em; display: block; position: absolute; left: -55px; top: -11px; width: 45px; height: 45px; line-height: 45px; border-radius: 45px; } } .form--general form .fieldset .title--disabled, .form--general form .fieldset .legend--disabled, .checklist__overview.form--general .fieldset .title--disabled, .checklist__overview.form--general .fieldset .legend--disabled, form.form--general .fieldset .title--disabled, form.form--general .fieldset .legend--disabled { color: #666; } .form--general form .fieldset .label__tooltip--legend, .checklist__overview.form--general .fieldset .label__tooltip--legend, form.form--general .fieldset .label__tooltip--legend { float: none; margin-left: 10px; display: inline-block; } .form--general form .fieldset > .title, .form--general form .fieldset > .legend, .form--general form .fieldset > p, .form--general form .fieldset > div, .checklist__overview.form--general .fieldset > .title, .checklist__overview.form--general .fieldset > .legend, .checklist__overview.form--general .fieldset > p, .checklist__overview.form--general .fieldset > div, form.form--general .fieldset > .title, form.form--general .fieldset > .legend, form.form--general .fieldset > p, form.form--general .fieldset > div { padding-left: 20px; padding-right: 20px; } .form--general form .fieldset > div.parsys, .checklist__overview.form--general .fieldset > div.parsys, form.form--general .fieldset > div.parsys { margin-left: -12px; margin-right: -12px; } .form--general form .fieldset > div.parsys > .textimage, .checklist__overview.form--general .fieldset > div.parsys > .textimage, form.form--general .fieldset > div.parsys > .textimage { padding-left: 20px; padding-right: 20px; } .form--general form .form__submit, .checklist__overview.form--general .form__submit, form.form--general .form__submit { clear: both; text-align: center; margin-left: -0.75em; margin-right: -0.75em; } @media all and (min-width: 46.25em) { .form--general form .form__submit, .checklist__overview.form--general .form__submit, form.form--general .form__submit { margin-left: 0em; margin-right: 0em; margin-bottom: -1.3125em; } } .form--general form .form__submit .btn, .checklist__overview.form--general .form__submit .btn, form.form--general .form__submit .btn { margin-bottom: 0; } @media all and (max-width: 46.24em) { .form--general form .form__submit .btn:not(:last-child), .checklist__overview.form--general .form__submit .btn:not(:last-child), form.form--general .form__submit .btn:not(:last-child) { margin-bottom: 1em; } } @media all and (min-width: 46.25em) { .form--general form .form__submit .btn:not(:last-child), .checklist__overview.form--general .form__submit .btn:not(:last-child), form.form--general .form__submit .btn:not(:last-child) { margin-right: 1em; } } @media print { .form-container, .form:not(.form--printable) { display: none; } } .banner { background-size: cover; position: relative; margin-top: 1.65em; margin-bottom: 1.65em; padding-top: 1.65em; padding-bottom: 1.65em; } @media all and (min-width: 46.25em) { .banner { min-height: 18.75em; padding-top: 2.475em; padding-bottom: 2.475em; } } @media all and (max-width: 29.99em) { .banner { margin-top: 0; } } .grid .banner { border-radius: 3px; } @media print { .banner .btn { display: none; } } .row--banners { margin-left: -0.75em; margin-right: -0.75em; } .banner--full-width { background-position: right center; display: block; border-bottom: 0 none; } .banner--full-width .banner-caption { font-size: 1.75em; line-height: 1.1785714286em; margin-bottom: 0.9428571429em; font-family: "LubalinBook"; font-weight: 600; padding-top: 0; } @media all and (min-width: 61.25em) { .banner--full-width .banner-caption { font-size: 2.25em; line-height: 1.1em; margin-bottom: 0.7333333333em; } } @media all and (min-width: 81.25em) { .banner--full-width .banner-caption { font-size: 3em; line-height: 1.1em; margin-bottom: 0.55em; } } .banner--full-width .banner-caption--primary { color: #003665; } .banner--full-width .banner-caption--secondary { color: #ffffff; } .banner--scroll-top { margin-top: 3.3em; } .banner--scroll-bottom { margin-bottom: 3.3em; } .banner--padding { padding-left: 1.5em; padding-right: 1.5em; } /*doc --- title: Page Link Component name: page-link-component category: Patterns --- ```html_example

Gaat u veel van deze betalende opties gebruiken per maand?
Dan kunt u de KBC-Plusrekening overwegen als handig alternatief.

``` */ .island { padding-top: 1.2375em; padding-bottom: 1.2375em; padding-left: 1.125em; padding-right: 1.125em; margin-top: 0em; margin-bottom: 1.65em; background: #eee; border: 1px solid #dadada; position: relative; border-radius: 5px; } .island .title { padding-top: 0; margin-bottom: 0.3125em; } .island figure { width: 100%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; margin-top: 0em; margin-bottom: 1.65em; } .island .text { width: 100%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } @media all and (min-width: 46.25em) { .island figure { width: 33.3333333333%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 0px; margin-top: 0em; margin-bottom: 0em; } .island .text { width: 66.6666666667%; clear: none; float: left; position: relative; padding-left: 12px; padding-right: 12px; } } .island p:last-child, .island ul:last-child, .island ol:last-child { margin-bottom: 0; } .island ul, .island ol { margin-left: 2em; } .island ul { list-style: disc; } .island ol { list-style: decimal; } @media print { .island { page-break-inside: avoid; } } .island__beta { padding-top: 1.65em; padding-bottom: 0em; padding-left: 0.75em; padding-right: 0.75em; margin-top: 0em; margin-bottom: 0.825em; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; background: #f5f5f5; position: relative; border-radius: 3px; overflow: hidden; } .island__beta:hover { background: #eee; } .island__gamma { padding-top: 1.65em; padding-bottom: 1.65em; background-color: #91bd69; color: #ffffff; border: 0 none; } .island__gamma a { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; color: white !important; border-bottom: 1px solid rgba(255, 255, 255, 0.75); position: relative; } .island__gamma a:hover { border-color: #ffffff; } .island__delta { padding-left: 0.75em; padding-right: 0.75em; margin-left: -0.75em; margin-right: -0.75em; padding-top: 1.2375em; padding-bottom: 1.2375em; background-color: #f5f5f5; border-top: 1px solid #b7c2cb; } .island__jota { background-color: #00aeef; color: #ffffff; } .island__jota .input, .island__jota .textarea { border: 0 none; } .island__sober { background-color: transparent; border-width: 2px; } .island--header { padding-left: 0.75em; padding-right: 0.75em; margin-left: -0.75em; margin-right: -0.75em; margin-top: -1.65em; margin-bottom: -1.65em; padding-top: 0.825em; padding-bottom: 0.825em; background-color: #eee; font-weight: 600; } .island__attachments ul { margin-left: 0.9375em; margin-right: 0em; margin-bottom: 0; } .island__icon .icon, .island__icon .fa { font-size: 2em; width: 100%; text-align: center; display: none; font-weight: normal; position: relative; top: 5px; } @media all and (min-width: 61.25em) { .island__icon .icon, .island__icon .fa { display: block; } } .page-link__image, .page-link__icon { position: absolute; top: 24px; height: 144px; width: 144px; border-radius: 16px; } .page-link { margin: 30px auto 60px auto; display: block; position: relative; border-bottom: none; } @media all and (max-width: 31.3125em) { .page-link { min-height: 276px; max-width: 500px; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; } } .page-link__icon { text-align: center; padding: 32px 0; background-color: #f3f8fa; } .page-link__icon svg { height: 80px; width: 80px; } @media all and (max-width: 31.3125em) { .page-link__icon svg { height: 67px; width: 67px; } } .page-link__icon--default-color svg path[fill=none], .page-link__icon--default-color svg circle[fill=none], .page-link__icon--default-color svg rect[fill=none], .page-link__icon--default-color svg polyline[fill=none], .page-link__icon--default-color svg ellipse[fill=none], .page-link__icon--default-color svg line[fill=none], .page-link__icon--default-color svg polyline[fill=none] { stroke: #00aeef; fill: none; } .page-link__icon--default-color svg path, .page-link__icon--default-color svg circle, .page-link__icon--default-color svg rect, .page-link__icon--default-color svg polygon, .page-link__icon--default-color svg ellipse, .page-link__icon--default-color svg line, .page-link__icon--default-color svg polyline { stroke: #00aeef; fill: #00aeef; } @media all and (max-width: 31.3125em) { .page-link__icon { position: relative; top: 0; right: 0; bottom: 0; left: 0; width: 120px; height: 120px; padding: 27px 0; margin-bottom: -60px; z-index: 0; } } .page-link__image { object-fit: cover; } @media all and (max-width: 31.3125em) { .page-link__image { position: relative; top: 0; right: 0; bottom: 0; left: 0; width: 120px; height: 120px; /* The design requires to have one component halfway over the other */ margin-bottom: -67px; z-index: 0; } } .page-link__image--background { width: 120px; height: 120px; border-radius: 16px; margin-bottom: -67px; position: relative; top: 0; z-index: 0; background-size: cover; background-position: center; } @media all and (min-width: 31.3125em) { .page-link__image--background { position: absolute; top: 24px; height: 144px; width: 144px; margin-bottom: 0; } } .page-link__image--background span { display: none; } .page-link__wrapper { box-shadow: 0 4px 16px #0036651A; border-radius: 8px; padding: 27px 24px 27px 94px; margin-left: 72px; min-height: 192px; } @media all and (max-width: 31.3125em) { .page-link__wrapper { padding: 87px 0 24px 0; text-align: center; min-height: 276px; max-width: 500px; margin-left: 0; } } .page-link__wrapper__title { font-size: 18px; line-height: 24px; font-weight: 700; margin-bottom: 16px; } @media all and (max-width: 31.3125em) { .page-link__wrapper__title { margin-top: 0; } } @media all and (min-width: 81.25em) { .page-link__wrapper__content { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; -webkit-flex-direction: row; -moz-flex-direction: row; flex-direction: row; -ms-flex-direction: row; -webkit-box-pack: justify; -moz-box-pack: justify; box-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -ms-flex-pack: justify; } } @media all and (max-width: 31.3125em) { .page-link__wrapper__content { padding: 0 24px; } } .page-link__wrapper__content__description { margin-bottom: 20px; font-size: 16px; line-height: 24px; font-weight: 300; font-family: "museosanslight", sans-serif; } @media all and (max-width: 31.3125em) { .page-link__wrapper__content__description { margin-top: 20px; } } .page-link__wrapper__content__cta { font-size: 16px; line-height: 24px; font-weight: 700; display: inline-block; border: 2px solid #ffffff; border-radius: 100px; padding: 10px 24px; white-space: nowrap; margin: 0 auto; } @media all and (min-width: 31.25em) { .page-link__wrapper__content__cta { margin: 0; } } @media all and (min-width: 81.25em) { .page-link__wrapper__content__cta { margin-left: 24px; max-height: 40px; line-height: 16px; } } .page-link__wrapper__content__cta:hover { outline: unset; color: #ffffff; border-color: #ffffff; } .page-link__wrapper--primary { color: #003665; background-color: #ffffff; } .page-link__wrapper--primary .page-link__wrapper__title { color: #00aeef; } .page-link__wrapper--primary .page-link__wrapper__content__cta { color: #ffffff; border-color: #ffffff; background-color: #009985; } .page-link__wrapper--secondary { color: #ffffff; background-color: #009985; } .page-link__wrapper--secondary .page-link__wrapper__content__cta { color: #009985; border-color: #009985; background-color: #ffffff; } .alert-box.error { border-color: #960f32; background-color: #c41442; color: #FFF; } .alert-box.error a { color: #FFF; } .alert-box.soft { border-color: #960f32; background-color: #c41442; color: #FFF; text-align: center; background-color: #f5f5f5; color: #003665; border-radius: 0; } .alert-box.soft a { color: #FFF; } /*doc --- title: Pagination name: pagination category: Patterns --- ```html_example ``` */ .pagination { list-style: none; margin: 0; padding: 0; padding-top: 0.825em; padding-bottom: 0.825em; margin-top: 0em; margin-bottom: 1.65em; padding-left: 0.375em; padding-right: 0.375em; overflow: hidden; } .pagination li { float: left; } .pagination li { margin-right: 1em; } .pagination .lbl { display: none; } .pagination .current { font-weight: 600; font-family: "LubalinDemi"; } .pagination.pagination ul { list-style: none; } .pagination--centered li { margin: 0 0.5em; } .pagination--centered .inner { float: left; position: relative; left: 50%; } .pagination--centered ul { overflow: hidden; position: relative; left: -50%; } @media all and (min-width: 46.25em) { .pagination .lbl { display: inline; } } .pagination a, .pagination span { border: none; display: block; padding: 0 10px; } .pagination a > span, .pagination span > span { padding: 0; } .pagination span { color: #003665; } .pagination .current { font-weight: 600; font-family: "LubalinDemi"; } .fontsize__1 { font-size: 1px; } .aem__fontsize__1 { font-size: 1px; } .fontsize__2 { font-size: 2px; } .aem__fontsize__2 { font-size: 2px; } .fontsize__3 { font-size: 3px; } .aem__fontsize__3 { font-size: 3px; } .fontsize__4 { font-size: 4px; } .aem__fontsize__4 { font-size: 4px; } .fontsize__5 { font-size: 5px; } .aem__fontsize__5 { font-size: 5px; } .fontsize__6 { font-size: 6px; } .aem__fontsize__6 { font-size: 6px; } .fontsize__7 { font-size: 7px; } .aem__fontsize__7 { font-size: 7px; } .fontsize__8 { font-size: 8px; } .aem__fontsize__8 { font-size: 8px; } .fontsize__9 { font-size: 9px; } .aem__fontsize__9 { font-size: 9px; } .fontsize__10 { font-size: 10px; } .aem__fontsize__10 { font-size: 10px; } .fontsize__11 { font-size: 11px; } .aem__fontsize__11 { font-size: 11px; } .fontsize__12 { font-size: 12px; } .aem__fontsize__12 { font-size: 12px; } .fontsize__13 { font-size: 13px; } .aem__fontsize__13 { font-size: 13px; } .fontsize__14 { font-size: 14px; } .aem__fontsize__14 { font-size: 14px; } .fontsize__15 { font-size: 15px; } .aem__fontsize__15 { font-size: 15px; } .fontsize__16 { font-size: 16px; } .aem__fontsize__16 { font-size: 16px; } .fontsize__17 { font-size: 17px; } .aem__fontsize__17 { font-size: 17px; } .fontsize__18 { font-size: 18px; } .aem__fontsize__18 { font-size: 18px; } .fontsize__19 { font-size: 19px; } .aem__fontsize__19 { font-size: 19px; } .fontsize__20 { font-size: 20px; } .aem__fontsize__20 { font-size: 20px; } .fontsize__21 { font-size: 21px; } .aem__fontsize__21 { font-size: 21px; } .fontsize__22 { font-size: 22px; } .aem__fontsize__22 { font-size: 22px; } .fontsize__23 { font-size: 23px; } .aem__fontsize__23 { font-size: 23px; } .fontsize__24 { font-size: 24px; } .aem__fontsize__24 { font-size: 24px; } @media all and (max-width: 61.24em) { .overflow-hidden--mobile { overflow: hidden; } } a.page-link { display: block; border-radius: 5px; border: 1px solid #b7c2cb; border-color: #b7c2cb; position: relative; background-color: #eee; } .page-link { margin-top: 0em; margin-bottom: 1.65em; } @media print { .page-link { display: none; } } a.page-link:focus, a.page-link:active, a.page-link:hover { box-shadow: 1px 1px 3px #ccc; -webkit-transform: translate(-1px, -1px); -moz-transform: translate(-1px, -1px); -ms-transform: translate(-1px, -1px); -o-transform: translate(-1px, -1px); transform: translate(-1px, -1px); } .page-link__wrapper { padding-top: 0.825em; padding-bottom: 0.825em; padding-left: 0.75em; padding-right: 0.75em; } .page-link__wrapper > p:last-child { margin-bottom: 0; } @media all and (min-width: 46.25em) { .page-link__wrapper { float: right; width: 67%; } } .page-link__wrapper__title { font-size: 1.25em; line-height: 1.32em; margin-bottom: 0.66em; color: #00aeef; } .page-link__wrapper__content__description { color: #003665; } .page-link__image { border-radius: 0 0 5px 5px; display: block; height: 12.5em; background-size: cover; background-position: center center; background-repeat: no-repeat; } .page-link__image span { display: none; } @media all and (min-width: 46.25em) { .page-link__image { border-radius: 5px 0 0 5px; float: left; width: 33%; height: auto; position: absolute; top: 0; bottom: 0; } } *, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { -webkit-overflow-scrolling: touch; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font: 500 100%/1.65 "museosansregular", sans-serif; } body { color: #003665; background: #f2f4f6; } ::-moz-selection { background-color: #444; color: #eaeaea; text-shadow: none; } ::selection { background-color: #444; color: #eaeaea; text-shadow: none; } hr { border: 1px solid #dddddd; border-width: 1px 0 0; clear: both; margin: 0 0 1.65em; } img { vertical-align: top; border: 0; } .alpha, .beta, .textimage h2, .gamma, .textimage h3, .delta, .textimage h4, .epsilon, .zeta { margin: 0; } @media all and (min-width: 46.25em) { .alpha, .beta, .textimage h2, .gamma, .textimage h3, .delta, .textimage h4 { -ms-word-break: normal; word-break: normal; } } .alpha { font-size: 1.875em; line-height: 1.32em; margin-bottom: 0.88em; padding-top: 0.88em; } @media all and (min-width: 46.25em) { .alpha { font-size: 2.25em; line-height: 1.1em; margin-bottom: 0.7333333333em; padding-top: 0.7333333333em; } } .beta, .textimage h2 { font-size: 1.25em; line-height: 1.716em; margin-bottom: 0.99em; padding-top: 0.99em; } @media all and (min-width: 46.25em) { .beta, .textimage h2 { font-size: 1.5em; line-height: 1.43em; margin-bottom: 0.825em; padding-top: 0.825em; } } .gamma, .textimage h3 { font-size: 1.25em; line-height: 1.32em; margin-bottom: 0.66em; padding-top: 0.66em; } .delta, .textimage h4 { font-size: 1.125em; line-height: 1.4666666667em; margin-bottom: 0.3666666667em; padding-top: 0.7333333333em; } .epsilon, .zeta { font-size: 1.125em; line-height: 1.9066666667em; margin-bottom: 0.7333333333em; padding-top: 0.7333333333em; font-family: "museosansregular", sans-serif; font-weight: 600; } .alpha, .beta, .textimage h2 { font-family: "LubalinBook"; font-weight: 600; } .gamma, .textimage h3, .delta, .textimage h4 { font-family: "LubalinDemi"; font-weight: 300; } .content .alpha, .content .beta, .content .textimage h2, .textimage .content h2 { font-family: "LubalinDemi"; font-weight: 300; } .content .gamma, .content .textimage h3, .textimage .content h3, .content .delta, .content .textimage h4, .textimage .content h4 { font-family: "museosansregular", sans-serif; font-weight: 600; } .content .textimage h2 { font-family: "LubalinDemi"; font-weight: 300; } .content .textimage h3, .content .textimage h4 { font-family: "museosansregular", sans-serif; font-weight: 600; } p, ol, ul, dl, table, address, pre, .content iframe { font-size: 1em; line-height: 1.65em; margin-bottom: 1.65em; } small { font-size: 0.8125em; line-height: 1.2184615385em; margin-bottom: 2.0307692308em; display: inline-block; } ul, ol { list-style: none; } blockquote { padding-top: 1.65em; padding-bottom: 0em; margin-top: 0em; margin-bottom: 1.65em; padding-left: 0.75em; padding-right: 0.75em; font-family: "museosansregular", sans-serif; font-style: italic; border-left: 3px solid #ccc; color: #666; overflow: hidden; } table { text-align: left; width: 100%; font-family: "museosansregular", sans-serif; border-spacing: 0; border-collapse: collapse; border-top: 1px solid #e1e1e1; border-left: 1px solid #e1e1e1; } caption { font-family: "museosansregular", sans-serif; font-weight: 600; text-align: center; text-transform: uppercase; padding-bottom: 0.825em; margin-bottom: 0.825em; } td, th { display: block; padding: 0.5em 1em; border-bottom: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1; } th { border-right: 1px solid #e1e1e1; vertical-align: middle; } img { max-width: 100%; } video[poster] { object-fit: cover; -o-object-fit: cover; } em { color: #00aeef; font-style: normal; } sup { font-size: 0.75em; vertical-align: super; margin-left: 1px; line-height: 1; } sub { font-size: 0.75em; vertical-align: sub; margin-left: 1px; } /*doc --- title: Links name: links parent: typography --- Basic links `...` `NOTE` Do NOT use the html below, this is just for illustrative purpose. Just use `...` for links. ```html_examples Link
Link - hovered
Link - focused
Link - visited ``` Link within a heading ```html_example

Goto link

Goto link

Goto link

Goto link

``` */ a { -webkit-transition: all 0.22s ease-in-out; -moz-transition: all 0.22s ease-in-out; transition: all 0.22s ease-in-out; text-decoration: none; color: #00aeef; border-bottom: 1px solid rgba(0, 174, 239, 0.35); /*&:visited { color: $color-alpha-link-visited; border-color: $color-alpha-link-visited; }*/ } a[href] { cursor: pointer; } a:hover { color: #0089bc; border-color: #0089bc; } a:focus { outline: thin dotted; color: #0089bc; } a:hover, a:active { outline: 0; } .alpha a, .beta a, .textimage h2 a, .gamma a, .textimage h3 a, .delta a, .textimage h4 a { border-bottom: 2px solid rgba(0, 174, 239, 0.35); } .icon, .fa { font-weight: 600; vertical-align: middle; line-height: 1; } .icon--large { font-size: 2em; line-height: 1.5em; } .icon--medium { font-size: 1.5em; line-height: 1.5em; } .icon--small { font-size: 0.75em; line-height: 0.5em; } .icon--inverseX { -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); } .icon--inverseY { -webkit-transform: scaleY(-1); -moz-transform: scaleY(-1); -ms-transform: scaleY(-1); -o-transform: scaleY(-1); transform: scaleY(-1); } .icon--highlighted { color: #00aeef; } @media print { * { background: transparent !important; color: black !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; } @page { margin: 1cm; } h2, h3 { orphans: 3; widows: 3; page-break-after: avoid; } p { orphans: 3; widows: 3; } pre, blockquote { border: 1px solid #ccc; page-break-inside: avoid; } abbr[title]::after { content: " (" attr(title) ")"; } a, a:visited { text-decoration: underline; } a[href]::after { content: " (" attr(href) ")"; } a[href^="javascript:"]::after, a[href^="#"]::after { content: ""; } img { max-width: 100% !important; page-break-inside: avoid; } thead { display: table-header-group; } tr { page-break-inside: avoid; } } table { border-radius: 5px; border-collapse: separate; } table th { background-color: #003665; color: white; } table td, table th { width: auto; padding: 0.75em; } table td p, table th p { margin-bottom: 0; } table td { background-color: white; } @media all and (min-width: 46.25em) { td, th { display: table-cell; } } .table--striped__container > table, .table--striped { border: 1px solid #e1e1e1; border-collapse: separate; border-radius: 5px; } .table--striped__container > table tr th, .table--striped tr th { color: #001b32; } .table--striped__container > table tr td, .table--striped tr td { font-weight: 600; border: none; } @media all and (min-width: 46.25em) { .table--striped__container > table tr td, .table--striped tr td { font-weight: normal; } } .table--striped__container > table tr td:first-child, .table--striped tr td:first-child { padding-bottom: 0; font-weight: normal; color: #001b32; } @media all and (min-width: 46.25em) { .table--striped__container > table tr td:first-child, .table--striped tr td:first-child { padding-left: 0.75em; padding-right: 0.75em; padding-top: 0.4125em; padding-bottom: 0.4125em; } } .table--striped__container > table tr td:last-child, .table--striped tr td:last-child { border-bottom: 1px solid #e1e1e1; } @media all and (min-width: 46.25em) { .table--striped__container > table tr td:last-child, .table--striped tr td:last-child { border-bottom: none; } } .table--striped__container > table tr:nth-child(odd) td, .table--striped__container > table tr:nth-child(odd) th, .table--striped tr:nth-child(odd) td, .table--striped tr:nth-child(odd) th { background-color: #f5f5f5; } .table--striped__container > table tr:first-child :first-child, .table--striped tr:first-child :first-child { border-radius: 5px 5px 0 0; } @media all and (min-width: 46.25em) { .table--striped__container > table tr:first-child :first-child, .table--striped tr:first-child :first-child { border-radius: 5px 0 0 0; } .table--striped__container > table tr:first-child :last-child, .table--striped tr:first-child :last-child { border-radius: 0 5px 0 0; } } .table--striped__container > table tr:last-child td:last-child, .table--striped tr:last-child td:last-child { border-radius: 0 0 5px 5px; } @media all and (min-width: 46.25em) { .table--striped__container > table tr:last-child td:first-child, .table--striped tr:last-child td:first-child { border-radius: 0 0 0 5px; } .table--striped__container > table tr:last-child td:last-child, .table--striped tr:last-child td:last-child { border-radius: 0 0 5px 0; } } .table--blocked__container > table td, .table--blocked__container > table th, .table--blocked td, .table--blocked th { display: block; } .table--blocked__container > table td:empty, .table--blocked__container > table th:empty, .table--blocked td:empty, .table--blocked th:empty { display: none; } @media all and (min-width: 46.25em) { .table--blocked__container > table td, .table--blocked__container > table th, .table--blocked td, .table--blocked th { display: table-cell; } .table--blocked__container > table td:empty, .table--blocked__container > table th:empty, .table--blocked td:empty, .table--blocked th:empty { display: table-cell; } } @media all and (min-width: 61.25em) { .table--wide__container > table, .table--wide { width: 120%; margin-left: -10%; margin-right: -10%; } } form .table--striped__container > table, form .table--striped { border: 1px solid #ddd; } form .table--blocked__container tr th, form .table--fixed__container tr th, form .table--striped__container > table tr th, form .table--striped tr th { font-weight: 700; background: #ffffff; border-bottom: 1px solid #ddd; } form .table--striped__container > table tr td, form .table--striped__container > table tr th, form .table--striped tr td, form .table--striped tr th { background-color: whitesmoke; } form .table--striped__container > table tr:nth-child(odd) td, form .table--striped__container > table tr:nth-child(odd) th, form .table--striped tr:nth-child(odd) td, form .table--striped tr:nth-child(odd) th { background-color: #ffffff; } form .table--striped__container > table tr td, form .table--striped tr td, form .table--striped__container > table tr td:last-child, form .table--striped tr td:last-child { border-bottom: 1px solid #ddd; } form .table--striped__container > table tr:last-child td, form .table--striped tr:last-child td { border-bottom: 0; } .table--fixed__container > table, .table--fixed { table-layout: fixed; } table ul, table ol { padding-left: 1em; padding-top: 0.5em; padding-bottom: 0.5em; margin-bottom: 0; } table li { padding-left: 0.5em; } table ol { list-style-type: decimal; padding-left: 1em; } table ul { list-style-type: disc; padding-left: 1.3em; } .page__title__wrapper { position: relative; } .search__wrapper__mobile__container { margin-top: 0.1875em; } @media print { .search__wrapper__mobile__container { display: none; } } .search__wrapper { width: 100%; overflow: hidden; display: block; box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.1); z-index: 5; } .search__wrapper form { position: relative; } @media all and (min-width: 61.25em) { .search__wrapper { display: inline-block; box-shadow: none; z-index: 0; background-color: rgba(255, 255, 255, 0.5); border-radius: 4px; padding: 8px; margin-top: 8px; width: 50%; } } @media all and (min-width: 81.25em) { .search__wrapper { width: 34%; } } .search__wrapper .search__input { font-size: 1em; line-height: 1.65em; margin-bottom: 0em; border: 0; width: 100%; line-height: 3.125em; height: 3.125em; border-radius: 0; padding-left: 2.8125em; } @media all and (min-width: 61.25em) { .search__wrapper .search__input { padding-left: 0.75em; padding-right: 0em; padding-right: 5em; line-height: 2.5em; height: 2.5em; } } .search__wrapper button { display: block; width: 2.8125em; padding: 0; text-align: center; position: absolute; border-radius: 0; border: 0 none; height: 3.125em; left: 0; top: 0; background-color: transparent; } .search__wrapper button .icon--search { color: #003665; font-weight: 900; font-size: 1.2em; } @media all and (min-width: 61.25em) { .search__wrapper button { border: 1px solid #00aeef; background-color: #00aeef; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0); height: 2.5em; right: 0; left: auto; width: 4.375em; color: white; } .search__wrapper button:hover, .search__wrapper button:focus { border: 1px solid #1ec2ff; background-color: #1ec2ff; } .search__wrapper button:active { background-color: #1ec2ff; box-shadow: none; } .search__wrapper button .icon--search { color: white; font-size: 1.5em; } } .search__wrapper span { color: white; } .search__wrapper__container { text-align: center; max-width: 100%; position: absolute; left: 0; right: 0; top: 90px; -webkit-transition: top 0.2s ease-in; -moz-transition: top 0.2s ease-in; transition: top 0.2s ease-in; } @media all and (min-width: 81.25em) { .search__wrapper__container { top: 105px; } } @media all and (min-width: 81.25em) { .header--sticky .search__wrapper__container { top: 75px; } } .header__wrapper--home .search__wrapper__container { text-align: center; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } @media all and (min-width: 61.25em) { .header__wrapper--home .search__wrapper__container { text-align: left; top: 10px; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } } @media all and (min-width: 81.25em) { .header__wrapper--home .search__wrapper__container { top: 31px; } } @media all and (min-width: 103.75em) { .header__wrapper--home .search__wrapper__container { top: 100px; } } .header__wrapper--home .search__header { color: #ffffff; font-family: "LubalinDemi"; margin-left: 0; line-height: 1.45em; min-height: 4.0625em; } @media all and (min-width: 61.25em) { .header__wrapper--home .search__header { margin-left: 3.875em; } } @media all and (min-width: 81.25em) { .header__wrapper--home .search__header { margin-left: 5.1875em; } } @media all and (min-width: 103.75em) { .header__wrapper--home .search__header { margin-left: 0; } } .header__wrapper--home .search__header__titles { margin-bottom: 0.625em; font-size: 1.5em; } @media all and (min-width: 81.25em) { .header__wrapper--home .search__header__titles { font-size: 1.75em; } } @media all and (min-width: 103.75em) { .header__wrapper--home .search__header__titles { font-size: 2em; } } .header__wrapper--home .search__header__titles h2 { line-height: 1.45em; font-size: 1.5em; font-weight: 300; } .header__wrapper--home .search__header__titles h3 { font-weight: 300; } .header__wrapper--home .search__wrapper { display: inline-block; margin-right: 5px; margin-left: 62px; background: none; } @media all and (min-width: 61.25em) { .header__wrapper--home .search__wrapper { font-size: 1em; padding-left: 0em; padding-right: 0em; padding-top: 0; margin-top: 0; width: 30%; max-width: 18.85em; } } @media all and (min-width: 81.25em) { .header__wrapper--home .search__wrapper { margin-left: 83px; max-width: 22em; } } @media all and (min-width: 103.75em) { .header__wrapper--home .search__wrapper { margin-left: 0; max-width: 25em; } } .header__wrapper--home .search__wrapper .search__input { color: #003665; } @media all and (min-width: 61.25em) { .header__wrapper--home .search__wrapper .search__input { border-radius: 0.21875em; padding-left: 0.9375em; padding-right: 5em; line-height: 2.5em; height: 2.5em; } } .header__wrapper--home .search__wrapper button { width: 2.03125em; height: 2.5em; border: none; background-color: #00aeef; border-radius: 0 0.21875em 0.21875em 0; } .header__wrapper--home .search__wrapper button:hover { background-color: #1ec2ff; } @media all and (min-width: 61.25em) { .header__wrapper--home .search__wrapper button { width: 4.0625em; right: 0; } .header__wrapper--home .search__wrapper button .icon, .header__wrapper--home .search__wrapper button .fa { color: #ffffff; font-size: 1em; vertical-align: text-bottom; } } /*doc --- title: Search Result name: search-results category: Modules --- */ /*doc --- title: Page name: 1-search-results-page parent: search-results --- Search result for page results ```html_example

Sparen voor uw (klein)kind

Geef uw kind of kleinkind een steuntje in de rug met de KBC-Groeispaarrekening. Open hier deze spaarrekening online.

``` */ /*doc --- title: Office name: 2-search-results-office parent: search-results --- Search result for office results ```html_example

KBC Bank Gent Martelaarslaan

Martelaarslaan 134 - 9000 Gent
T.+ 32 9 269 86 20

``` */ .search__suggestion { margin-top: 10px; font-weight: bold; } .search__result { margin-top: 1.65em; margin-bottom: 1.65em; } .search__result .delta, .search__result .textimage h4, .textimage .search__result h4 { padding-top: 0; } .search__result figure a { display: block; text-align: center; text-decoration: none; border: none; color: #003665; } .search__result figure a .icon, .search__result figure a .fa { font-weight: 300; font-size: 5em; } /*doc --- title: Brand (Logo) name: brand category: Modules --- The image for the logo is not add to the CSS. Within the HTML it can easily be changed or configured using variables. ```html_example
``` */ .brand__row { padding-left: 0em; padding-right: 0em; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; box-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -ms-flex-pack: justify; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-box-lines: multiple; -moz-box-lines: multiple; box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media all and (min-width: 81.25em) { .brand__row { padding-top: 0; } } @media all and (min-width: 61.25em) { .brand__row { padding-left: 0.5625em; padding-right: 0.5625em; } } .brand__row .grid { font-size: 0.8em; width: 100%; } @media all and (min-width: 81.25em) { .brand__row .grid { font-size: 1em; } } @media all and (min-width: 61.25em) { .brand__row .grid { display: inline-block; width: auto; } } .brand__row .grid.brand__grid { -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; -webkit-flex-basis: auto; -moz-flex-basis: auto; flex-basis: auto; -ms-flex-preferred-size: auto; float: right; } @media all and (max-width: 61.24em) { .brand__row .grid.brand__grid { float: none; padding-left: 0em; padding-right: 0em; } } @media all and (min-width: 61.25em) { .brand__row__container { height: 3.75em; } } .brand__row .logo, .row--brand--static .logo { font-size: 0.8em; padding-top: 0.56em; padding-bottom: 0.4125em; margin: 0; height: 5em; line-height: 16.875em; width: 4em; float: left; overflow: hidden; position: relative; z-index: 5; } .brand__row .logo a, .row--brand--static .logo a { height: 3.5em; display: block; width: 100%; border: 0 none; background-position: left top; background-repeat: no-repeat; background-color: transparent; background-size: contain; } @media all and (min-width: 81.25em) { .brand__row .logo a, .row--brand--static .logo a { height: 2.4em; } } @media all and (min-width: 81.25em) { .brand__row .logo, .row--brand--static .logo { font-size: 1.05em; padding-top: 0.5em; height: 3.75em; width: 3em; } } .row--brand--static .logo { margin-bottom: -5em; } @media all and (min-width: 81.25em) { :target::before { content: ""; display: block; height: 3.75em; /* fixed header height*/ margin: -3.75em 0 0; /* negative fixed header height */ } } @media all and (min-width: 61.25em) { .page__title__wrapper { position: relative; top: 50%; -webkit-transform: translateY(-30%); -moz-transform: translateY(-30%); -ms-transform: translateY(-30%); -o-transform: translateY(-30%); transform: translateY(-30%); } } .page__title__wrapper--usp { position: initial; top: auto; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } .page__title__wrapper--left { text-align: left; } .page__title__wrapper--centered { text-align: center; } .page__title__wrapper--right { text-align: right; } .page__title__wrapper--primary .page__title, .page__title__wrapper--primary .page__sub-title { text-shadow: none; color: #003665; } .page__title__wrapper--secondary .page__title, .page__title__wrapper--secondary .page__sub-title { text-shadow: none; color: #ffffff; } .hidden--publish { display: none; } .default-padding { padding-left: 1.125em; padding-right: 1.125em; } .island { position: initial; } blockquote { color: #00aeef; font-size: 1.25em; padding: 1.5em; } blockquote i, blockquote .icon, blockquote .fa { float: left; font-size: 35px !important; } blockquote p { margin-bottom: 0.5em; margin-left: 50px; font-family: "LubalinBook"; font-weight: 600; } blockquote footer { border: 0; padding: 0; background-color: #eee; } blockquote cite { font-style: normal; font-weight: bold; font-size: 0.75em; color: #003665; margin-left: 50px; } .list-container { background-color: transparent; padding-top: 1.65em; padding-bottom: 0em; } @media all and (max-width: 29.99em) { .list-container { padding-top: 0; } } .list-container--cyan { background-color: #00aeef; } .list-container--white { background-color: #ffffff; } .list-container--darkblue { background-color: #003665; } .list-container--faint-gray { background-color: #f5f5f5; } .list-container--light-gray { background-color: #e7e7e7; } .list-container--blue-gray { background-color: #b7c2cb; } .table--hours .table-row--active td:first-child, .table--hours__container .table-row--active td:first-child { font-weight: bold; border-left: 5px solid #00aeef; } .table--hours .table-row--active td, .table--hours__container .table-row--active td { font-weight: bold; } .pull-right { float: right; } .pull-left { float: left; } .pull-center { clear: both; float: none; text-align: center; display: block; } .pull-right.clear-after + *::before, .pull-left.clear-after + *::before { display: table; content: ""; clear: both; } .header--mobilesticky .brand__row__container { position: fixed; top: -100%; left: 0; right: 0; background-color: #ffffff; -webkit-transition: top 0.2s ease-in-out; -moz-transition: top 0.2s ease-in-out; transition: top 0.2s ease-in-out; } .header--mobilesticky .brand__row__container--top { top: 0; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); } .site__header .nav--main .btn { margin-bottom: 5px; } .site__header .nav--main .btn:last-of-type { margin-bottom: 0; } .site__header__buttons { -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; transition: all 0.2s ease-in; margin-left: 1.125em; margin-right: 0.75em; } .site__header--homepage[data-scroll-search-button] .site__header__buttons .btn--search { display: none; } .nav--main .site__header__buttons a { padding-top: 0; } .site__header__buttons .btn .icon, .site__header__buttons .btn .fa { vertical-align: inherit; } @media all and (min-width: 61.25em) { .site__header__buttons { margin-top: 1.2375em; margin-bottom: 0em; margin-left: 0.75em; margin-right: 0em; padding-left: 0em; padding-right: 0em; float: right; } .site__header__buttons .btn, .site__header__buttons span { font-weight: 600; } .site__header__buttons .btn { padding-left: 0.75em; padding-right: 0.75em; vertical-align: top; } .site__header__buttons .homebanking-button-placeholder .btn { vertical-align: inherit; } .site__header__buttons .btn--contact .icon, .site__header__buttons .btn--search .fa { font-size: 1em; line-height: 3em; float: left; margin-right: 10px; margin-top: -0.5em; } } @media all and (min-width: 81.25em) { .site__header__buttons { margin-top: 0.8125em; } } .header__wrapper--hide-on-mobile { display: none; } @media all and (min-width: 46.25em) { .header__wrapper--hide-on-mobile { display: block; } } .site__header { width: 100%; padding-top: 0em; padding-bottom: 0em; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; transition: all 0.2s ease-in; position: relative; z-index: 100; background-color: #ffffff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); } @media all and (min-width: 61.25em) { .site__header { box-shadow: none; top: 0; left: 0; height: auto; } .site__header nav { -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } } @media all and (min-width: 61.25em) { .site__header.site__header--transparent { background: transparent; } } @media all and (min-width: 81.25em) { .site__header.site__header--transparent .header--sticky .site__header { -webkit-transition: all 0.3s linear 0.3s; -moz-transition: all 0.3s linear 0.3s; transition: all 0.3s linear 0.3s; -webkit-transition-property: box-shadow, background; -moz-transition-property: box-shadow, background; transition-property: box-shadow, background; } .header--sticky .site__header .brand__row__container { background-color: #ffffff; box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); height: 3.75em; position: fixed; left: 0; right: 0; top: 0; } .header--sticky .site__header nav { margin-bottom: 0; } .header--sticky .site__header .site__header__buttons { margin-top: 0.8125em; margin-bottom: 0; } .header--sticky .site__header .nav--language { margin-top: 0.8125em; margin-bottom: 0; } } .site__header .btn { font-size: 90%; height: 2.2em; line-height: 2.2em; padding-top: 0em; padding-bottom: 0em; } .header__wrapper { position: relative; } .header__container { left: 0; right: 0; top: 0; } .header__wrapper, .header__container { min-height: 12em; height: calc(25vh - 90px); } @media all and (max-width: 29.99em) { .header__wrapper, .header__container { min-height: 8em; } } @media all and (min-width: 61.25em) { .header__wrapper, .header__container { min-height: 15.625em; height: calc(40vh - 90px); } .page__title__wrapper--usp { padding-top: 0em; padding-bottom: 3.3em; } .header__wrapper--usp .page__title { margin-top: 1.65em; margin-bottom: 0em; } .header__wrapper.header__wrapper--usp, .header__wrapper.header__wrapper--usp .header__container { height: auto; position: relative; } .header__wrapper.header__wrapper--home, .header__wrapper.header__wrapper--home .header__container { min-height: 25em; height: calc(85vh - 90px); } .header__wrapper.header__wrapper--search, .header__wrapper.header__wrapper--search .header__container { min-height: 18.75em; height: calc(50vh - 90px); } .header__wrapper.header__wrapper--small, .header__wrapper.header__wrapper--small .header__container { min-height: 15.625em; height: calc(40vh - 90px); } .header__wrapper.header__wrapper--medium, .header__wrapper.header__wrapper--medium .header__container { min-height: 21.875em; height: calc(60vh - 90px); } .header__wrapper.header__wrapper--large, .header__wrapper.header__wrapper--large .header__container { min-height: 25em; height: calc(80vh - 90px); } .header__wrapper.header__wrapper--full, .header__wrapper.header__wrapper--full .header__container { min-height: 28.125em; height: calc(100vh - 90px); } } @media all and (min-width: 81.25em) { .header__wrapper.header__wrapper--home, .header__wrapper.header__wrapper--home .header__container { height: calc(90vh - 90px); } } .header__wrapper--home .page__title, .header__wrapper--search .page__title { font-family: "LubalinBook"; font-weight: 600; } .header__image { background-repeat: no-repeat; background-size: cover; position: absolute; left: 0; right: 0; bottom: 0; top: 0; } .header__image--left { background-position: left top; } .header__image--center { background-position: center top; } .header__image--right { background-position: right top; } .header__image--with-hero-video { background: none !important; } .header__image--vertical-top { background-position-y: top; } .header__image--vertical-center { background-position-y: center; } .header__image--vertical-bottom { background-position-y: bottom; } .header__image--horizontal-left { background-position-x: left; } .header__image--horizontal-center { background-position-x: center; } .header__image--horizontal-right { background-position-x: right; } .page__title, .page__sub-title { display: block; font-family: "LubalinDemi"; font-weight: 300; color: #003665; text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.5); } .page__title { margin-top: 0.9375em; font-size: 1.6875em; line-height: 1.7111111111em; margin-bottom: 0em; padding-top: 0em; padding-bottom: 0em; } @media all and (min-width: 46.25em) { .page__title { -ms-word-break: normal; word-break: normal; font-size: 2em; line-height: 1.44375em; margin-bottom: 0em; } } @media all and (min-width: 61.25em) { .page__title { margin-top: 0.625em; font-size: 2.625em; line-height: 1.2571428571em; margin-bottom: 0em; padding-top: 0.6285714286em; padding-top: 0em; padding-bottom: 0em; } } @media all and (max-width: 29.99em) { .page__title { margin-top: 0; font-size: 1.5em; line-height: 1.87em; margin-bottom: 0em; } } .page__sub-title { font-size: 1.0625em; line-height: 1.5529411765em; margin-bottom: 1.5529411765em; } @media all and (min-width: 46.25em) { .page__sub-title { font-size: 1.25em; line-height: 1.32em; margin-bottom: 1.32em; } } .site__main { padding-top: 0; position: relative; background-color: #ffffff; } .site__main--colored { background: #f5f5f5; } @media all and (min-width: 46.25em) { .page__no-header { margin-top: 3.125em; box-shadow: none; } } .header__buttons { position: absolute; background: none; bottom: 0; left: 0; right: 0; display: none; max-height: 2.5em; z-index: 1; } .header__buttons .header__buttons__container { margin: 0; background-color: #f5f5f5; border: none; height: 2.5em; } @media all and (min-width: 61.25em) { .header__buttons { display: block; } } .header__scroll__button { top: -21px; } .site-switch { margin-left: -0.625em; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; } .site-switch__item { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; position: relative; left: 0; padding: 0 0.625em; } .site-switch__item + .site-switch__item::before { border: 1px solid #ffffff; content: ""; height: 0.625em; margin: 0; left: -1px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); position: absolute; } .site-switch__item.js-dropdown { display: none; } @media all and (min-width: 61.25em) { .site-switch__item.js-dropdown { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; } } .site-switch__item.is-open { z-index: 100; position: relative; } .site-switch__item.is-open .site-switch__list { display: block; } .site-switch__item.is-open .js-dropdown-trigger .icon--down::before { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .top-navigation__container .site-switch__item--current { color: #00aeef; } .site-switch__link.js-dropdown-trigger { white-space: nowrap; position: relative; border-bottom: 0; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; text-align: center; } .site-switch__link.js-dropdown-trigger:focus { outline: 0 none; } .site-switch__link.js-dropdown-trigger .icon--down { display: inline-block; font-size: 6px; margin-left: 0.625em; } .site-switch__link.js-dropdown-trigger .icon--down::before { display: block; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: -webkit-transform 0.3s ease-in-out; -moz-transition: -moz-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; } .site-switch__list { display: none; position: absolute; left: 0; top: 100%; min-width: 100%; padding: 0; margin: 0; background: #003665; border-radius: 0 0 2px 2px; min-width: 9.0625em; } .site-switch__list a { display: block; text-decoration: none; border: 0 none; padding: 0 0.75em 0.3125em 0.75em; } .site-switch__list li { white-space: nowrap; } .site-switch__list li + li a { padding-top: 0.3125em; } .site-switch__list li + li::before { content: " "; display: block; margin: 0 0.75em; border-top: 1px solid rgba(255, 255, 255, 0.2); } .site-switch__mobile__container { display: block; text-align: center; } @media all and (min-width: 61.25em) { .site-switch__mobile__container { display: none; } } .site-switch__mobile { border: 0 none; padding: 0.625em; line-height: 1em; display: block; } .site-switch__trigger .site-switch--current { display: none; } @media all and (min-width: 70em) { .site-switch__trigger .site-switch--current { display: block; overflow: hidden; text-overflow: ellipsis; } } .site-switch__trigger { width: auto; } .site-switch__trigger.js-dropdown-trigger { padding-right: 30px; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; } .site-switch__trigger.js-dropdown-trigger:focus { color: #ffffff; } .site-switch__trigger.js-dropdown-trigger::after { display: none; } .site-switch__trigger.js-dropdown-trigger:hover { color: #009bd6; } .top-navigation__container { background-color: #003665; color: #ffffff; } .top-navigation__container a { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; color: #ffffff; border-bottom: 0 none; } .top-navigation__container a:hover { color: #009bd6; } .top-navigation { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; box-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -ms-flex-pack: justify; -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; -webkit-flex: 1 1 100%; -moz-flex: 1 1 100%; -ms-flex: 1 1 100%; flex: 1 1 100%; font-size: 0.75em; height: 2.5em; padding: 0; } .top-navigation__dropdown { background-color: #003665; } .top-navigation__items { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; } .top-navigation__links { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; } .top-navigation__link { line-height: 1.5em; text-align: center; width: auto; height: auto; border-bottom: 0 none; transition: none; color: #ffffff; font-size: 1.3em; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; } .top-navigation__link span { display: none; } @media all and (min-width: 61.25em) { .top-navigation__link { font-size: 1em; margin-right: 1.25em; } .top-navigation__link span { display: block; } } @media all and (min-width: 81.25em) { .top-navigation__link { margin-right: 2.1875em; } } .top-navigation__link .icon, .top-navigation__link .fa { font-size: 1em; font-weight: 700; margin-left: 0.5em; margin-right: 0.5em; } @media all and (min-width: 61.25em) { .top-navigation__link .icon, .top-navigation__link .fa { margin-left: 0; } } .modal__language { padding-left: 0.75em; padding-right: 0.75em; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -moz-box-pack: end; box-pack: end; -webkit-justify-content: flex-end; -moz-justify-content: flex-end; -ms-justify-content: flex-end; -o-justify-content: flex-end; justify-content: flex-end; -ms-flex-pack: end; } .modal__language .nav--language, .nav--main__menu-site-nav .nav--language { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; position: relative; display: block; text-align: center; } .modal__language .nav--language__list, .nav--main__menu-site-nav .nav--language__list { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; margin-bottom: 0; } .modal__language .nav--language__list-item a, .nav--main__menu-site-nav .nav--language__list-item a { display: block; border: 0 none; } .modal__language .nav--language__list-item span, .nav--main__menu-site-nav .nav--language__list-item span { display: block; padding: 0.625em; line-height: 1; } .modal__language .nav--language__list-item + .nav--language__list-item span, .nav--main__menu-site-nav .nav--language__list-item + .nav--language__list-item span { position: relative; } .modal__language .nav--language__list-item + .nav--language__list-item span::before, .nav--main__menu-site-nav .nav--language__list-item + .nav--language__list-item span::before { content: ""; display: block; border: 1px solid #003665; position: absolute; left: -1px; top: 0.625em; bottom: 0.625em; } .nav--language--dropdown { margin-right: -0.625em; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; } .nav--language--dropdown .nav--language.is-open { z-index: 1; position: relative; } .nav--language--dropdown .nav--language.is-open .nav--language__list { display: block; } .nav--language--dropdown .nav--language.is-open .js-dropdown-trigger .icon--down::before { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .nav--language--dropdown .nav--language__list-item.js-dropdown-trigger { white-space: nowrap; position: relative; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; text-align: center; text-decoration: none; border: 0 none; padding: 0.3125em 0.75em; cursor: pointer; } .nav--language--dropdown .nav--language__list-item.js-dropdown-trigger:focus { outline: 0 none; } .nav--language--dropdown .nav--language__list-item.js-dropdown-trigger .icon--down { display: inline-block; font-size: 6px; margin-left: 0.625em; } .nav--language--dropdown .nav--language__list-item.js-dropdown-trigger .icon--down::before { display: block; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: -webkit-transform 0.3s ease-in-out; -moz-transition: -moz-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; } .nav--language--dropdown .nav--language__list { display: none; position: absolute; left: 0; top: 100%; padding: 0; margin: 0; background: #003665; border-radius: 0 0 2px 2px; } .nav--language--dropdown .nav--language__list a { display: block; text-decoration: none; border: 0 none; padding: 0.3125em 0.75em; } .nav--language--dropdown .nav--language__list li { white-space: nowrap; } .nav--language--dropdown .nav--language__list li + li::before { content: " "; display: block; margin: 0 0.75em; border-top: 1px solid rgba(255, 255, 255, 0.2); } /*doc --- title: Autocomplete name: autocomplete category: Modules --- ```html_example ``` */ .autosuggest.ui-menu { box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.3); border-radius: 0 0 3px 3px; overflow: hidden; background-color: white; z-index: 1; } .autosuggest.ui-menu li.ui-menu-item > a, .autosuggest.ui-menu li.ui-menu-item > .submit-tags-anchor { -webkit-transition: all 0.22s ease-in-out; -moz-transition: all 0.22s ease-in-out; transition: all 0.22s ease-in-out; padding-left: 1.125em; padding-right: 1.125em; display: block; line-height: 2.2; color: #444; text-decoration: none; border: none; } .autosuggest.ui-menu li.ui-menu-item > a:hover, .autosuggest.ui-menu li.ui-menu-item > .submit-tags-anchor:hover { cursor: pointer; color: white; background-color: #00aeef; } .autosuggest.ui-menu li.ui-menu-item > .submit-tags-anchor { font-size: 0.8em; line-height: 3; font-weight: bold; padding-top: 0.33em; padding-bottom: 0em; text-transform: uppercase; display: block; text-align: center; color: #00aeef; } .autosuggest.ui-menu > li.ui-state-focus > a.submit-tags-anchor, .autosuggest.ui-menu > li.ui-state-focus > a.ui-menu-item { cursor: pointer; color: white; background-color: #00aeef; } .autosuggest.ui-menu .ui-menu-item { padding: 0; } .autosuggest.ui-menu .ui-state-focus, .autosuggest.ui-menu .ui-state-active { margin: 0; } .autosuggest.ui-menu .autosuggest-questions.ui-menu-item { cursor: default; padding-left: 0em; padding-right: 0em; } .autosuggest.ui-menu .autosuggest-questions.ui-menu-item .tags-wrapper { position: relative; padding-left: 1.125em; padding-right: 1.125em; padding-top: 0em; padding-bottom: 0.825em; margin-top: 0em; margin-bottom: 0em; background-color: #eee; } .autosuggest.ui-menu .autosuggest-questions.ui-menu-item .tags-wrapper .nested-list-item { margin-top: 0.33em; margin-bottom: 0.33em; } .autosuggest.ui-menu .autosuggest-questions.ui-menu-item .tags-wrapper::after { z-index: 1; content: ""; position: absolute; top: 100%; left: 50%; margin-left: -7px; width: 0; height: 0; border-top: solid 7px #eee; border-left: solid 7px transparent; border-right: solid 7px transparent; } .ui-helper-hidden-accessible { display: none; } /*doc --- title: Juridical text name: juridical-text category: Modules --- ```html_example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vel augue sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam ac pretium neque. Vestibulum suscipit dictum accumsan. Curabitur consequat diam in justo porttitor posuere. Maecenas ultricies gravida enim ut tincidunt. Vestibulum scelerisque dui at eros consectetur, vel mattis enim tincidunt. In at est eu tortor sodales venenatis quis eu magna. Link.be

``` */ .muted { font-size: 13px; line-height: 1.65; color: #777; } .muted a { color: #777; border-color: #777; } .juridical-text { padding-top: 10px; padding-bottom: 10px; } ul.list--zebra, .content ul.list--zebra { list-style: none; padding: 0; font-size: 0.9em; } ul.list--zebra .row, .content ul.list--zebra .row { margin: 0; } ul.list--zebra li, .content ul.list--zebra li { padding: 10px; } ul.list--zebra li:nth-child(odd), .content ul.list--zebra li:nth-child(odd) { background-color: #f5f5f5; border-radius: 5px; } .richtext__ul--checkmarks ul { position: relative; } .richtext__ul--checkmarks ul li { margin-left: 20px; } .richtext__ul--checkmarks ul li::before { font-family: "iconskbc"; font-weight: 900; content: ""; margin-left: -20px; margin-right: 5px; position: absolute; } /*doc --- title: Live chat button name: livechat-button category: Modules --- ```html_example ``` */ .btn-container--livechat--left { margin-right: 2.5em; } .btn-container--livechat--right { margin-left: 2.5em; } .btn.btn--livechat { border-color: #80c342; background-color: #80c342; font-weight: normal; text-align: left; margin-bottom: 10px; width: auto; display: inline-block; position: relative; padding-right: 2.25em; } .btn.btn--livechat .icon--2x { position: absolute; right: 0.25em; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } @media print { .livechatbutton { display: none; } } .nav--main { clear: both; display: none; border-top: 1px solid #f5f5f5; font-size: 1.2em; } @media all and (min-width: 61.25em) { .nav--main { margin-top: 0em; margin-bottom: 0em; font-size: 1em; float: right; clear: none; border: none; display: block; height: 60px; } } @media all and (max-width: 61.24em) { .nav--main__actions { padding-left: 0.5625em; padding-right: 0.5625em; margin-top: 0.75em; } } .nav--main__list { margin-top: 0em; margin-bottom: 0em; } @media all and (min-width: 61.25em) { .nav--main__list { height: 100%; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; } .nav--main__list .nav--main__list-item:hover .nav__submenu { color: #003665; } .nav--main__list .nav--main__list-item:hover .nav__submenu-container { -webkit-transition: visibility 0.01s 0.01s; -moz-transition: visibility 0.01s 0.01s; transition: visibility 0.01s 0.01s; visibility: visible; } } .nav--main__list-item { display: block; } .nav--main__list-item:last-child a { border: none; } .nav--main__list-item a { padding-left: 0.75em; padding-right: 0em; padding-top: 1.2375em; padding-bottom: 1.2375em; line-height: 2em; color: #003665; font-weight: 600; display: block; border: none; } @media all and (min-width: 61.25em) { .nav--main__list-item a { margin-top: 0em; margin-bottom: 0em; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; height: 100%; border-bottom: none; padding: 0; } } @media all and (min-width: 61.25em) { .nav--main__list-item a:hover, .nav--main__list-item .selected { background-color: transparent; } } @media all and (min-width: 61.25em) { .nav--main__list-item { padding-left: 0.5625em; padding-right: 0.5625em; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; height: 100%; } .nav--main__list-item:last-child { padding-right: 0; } .nav--main__list-item:hover .nav--main__dropdown svg path { stroke: currentColor; } } .nav__submenu { margin: 0; padding: 0; } @media all and (min-width: 61.25em) { .nav__submenu { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 24px 24px; max-width: 1440px; margin: 0 auto; } } .nav__submenu-container { width: 100%; display: none; } @media all and (min-width: 61.25em) { .nav__submenu-container { -webkit-transition: visibility 0.375s 0.01s; -moz-transition: visibility 0.375s 0.01s; transition: visibility 0.375s 0.01s; display: block; position: absolute; top: 90px; left: 0; width: 100%; visibility: hidden; background-color: #ffffff; border-top: 1px solid rgba(0, 54, 101, 0.1); box-shadow: 4px 8px 16px -16px rgba(0, 54, 101, 0.16); } .header--sticky .nav__submenu-container { top: 60px; } } .nav__submenu__menu-item { padding-top: 0em; padding-bottom: 0em; margin: 0; background-color: #f2f4f6; border-bottom: 1px solid #e7e7e7; } .nav__submenu__menu-item a { padding-top: 0.825em; padding-bottom: 0.825em; } @media all and (min-width: 61.25em) { .nav__submenu__menu-item { display: block; flex-basis: 30%; margin: 16px 0; padding: 0; background-color: transparent; border: none; } .nav__submenu__menu-item a { display: inline-block; padding: 0; transition: none; } } .nav--main__item-wrapper { width: 100%; border-bottom: 1px solid #eee; } .nav--main__item-wrapper:hover { background-color: #f5f5f5; } @media all and (min-width: 61.25em) { .nav--main__item-wrapper:hover { background-color: transparent; } } .nav--main__list--multilevel .nav--main__item-wrapper { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -moz-box-align: stretch; box-align: stretch; -webkit-align-items: stretch; -moz-align-items: stretch; -ms-align-items: stretch; -o-align-items: stretch; align-items: stretch; -ms-flex-align: stretch; -webkit-box-pack: justify; -moz-box-pack: justify; box-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -ms-flex-pack: justify; } .nav--main__list--multilevel .nav--main__item-wrapper:hover, .nav--main__list--multilevel .nav--main__item-wrapper.selected { background-color: transparent; } @media all and (min-width: 61.25em) { .nav--main__item-wrapper { padding-left: 0.5625em; padding-right: 0.5625em; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; border: none; } } .nav--main__dropdown { padding-top: 1.2375em; padding-bottom: 1.2375em; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -moz-box-pack: end; box-pack: end; -webkit-justify-content: flex-end; -moz-justify-content: flex-end; -ms-justify-content: flex-end; -o-justify-content: flex-end; justify-content: flex-end; -ms-flex-pack: end; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; -webkit-flex-grow: 1; -moz-flex-grow: 1; flex-grow: 1; -ms-flex-positive: 1; } .nav--main__dropdown svg { margin-left: 2px; fill: none; stroke: #00aeef; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5px; width: 10px; height: 10px; margin-right: 12px; vertical-align: middle; transform: rotate(-90deg); transform-origin: 50% 65%; } .nav--main__dropdown:hover { cursor: pointer; } .nav--main__dropdown.active svg { transform: rotate(0deg); } @media all and (min-width: 61.25em) { .nav--main__dropdown { padding: 0; width: auto; color: currentColor; display: block; } .nav--main__dropdown svg { margin-right: 0; stroke: currentColor; transform: rotate(0deg); } .nav--main__list-item:hover .nav--main__dropdown svg { cursor: pointer; stroke: currentColor; transform: rotate(180deg); } } @media all and (min-width: 61.25em) and (max-width: 81.24em) { .nav--main__dropdown svg { width: 8px; height: 11px; } } .nav--filters { padding-top: 1.65em; padding-bottom: 1.65em; background-color: white; border-bottom: 0; } @media all and (min-width: 61.25em) { .nav--filters { margin-top: 1.65em; margin: 0; padding: 0; } } .nav--filters .grid, .nav--filters .grid-12, .nav--filters .row { padding-left: 0; padding-right: 0; } @media all and (min-width: 61.25em) { .nav--filters .grid, .nav--filters .grid-12, .nav--filters .row { padding-left: 0.75em; padding-right: 0.75em; } } .nav--filters ul { list-style: none; margin: 0; padding: 0; } @media all and (min-width: 61.25em) { .nav--filters ul { text-align: center; } .nav--filters ul li { float: left; } } .nav--filters ul li { padding-left: 0.75em; padding-right: 0em; margin-left: 0em; margin-right: 0.75em; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; margin-bottom: 0; border-left: 6px solid white; } @media all and (min-width: 61.25em) { .nav--filters ul li { padding-left: 0em; padding-right: 0em; margin-left: 0.75em; margin-right: 0.75em; border-left: 0 none; float: none; display: inline-block; margin-left: 1.5em; margin-right: 1.5em; text-align: center; } .nav--filters ul li:first-child { margin-left: 0; } .nav--filters ul li:last-child { margin-right: 0; } } .nav--filters ul li a { color: #003665; } .nav--filters ul li:hover a { color: #00aeef; } .nav--filters ul li.selected { border-color: #00aeef; color: #00aeef; } .nav--filters ul li.selected a, .nav--filters ul li.selected span { color: #00aeef; } @media all and (min-width: 61.25em) { .nav--filters ul li.selected { border-bottom: 6px solid #00aeef; } } .nav--filters .selected span, .nav--filters a { padding-top: 0.4125em; padding-bottom: 0.4125em; padding-left: 0.375em; padding-right: 0.375em; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; width: 100%; height: 100%; display: block; border-bottom: 0 none; font-weight: 600; } @media all and (min-width: 61.25em) { .nav--filters .selected span, .nav--filters a { padding-top: 1.65em; padding-bottom: 1.65em; padding-left: 0em; padding-right: 0em; } } .nav--filters a:hover { border-bottom: 0 none; } .nav--main__other { text-align: center; padding-bottom: 1.25em; } .nav--main__menu-site-nav { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -moz-box-pack: justify; box-pack: justify; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; -o-justify-content: space-between; justify-content: space-between; -ms-flex-pack: justify; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; height: 4.375em; padding: 0; } .nav--trigger { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -moz-box-align: center; box-align: center; -webkit-align-items: center; -moz-align-items: center; -ms-align-items: center; -o-align-items: center; align-items: center; -ms-flex-align: center; font-size: 1.3em; padding-bottom: 0.4125em; padding-top: 0.6em; margin-left: 0.5em; text-align: right; font-weight: 600; height: 100%; float: right; } .nav--trigger .icon { font-size: 1.2em; font-weight: bolder; width: 25px; } .nav--trigger .icon--cancel { display: none; color: #00aeef; } .nav--trigger.active .icon--cancel { display: inline; } .nav--trigger.active .icon--menu { display: none; } @media all and (min-width: 61.25em) { .nav--trigger { display: none; } } .nav--trigger:hover { cursor: pointer; } /*doc --- title: Notifications name: notifications category: Modules --- ```html_example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pharetara erat id turpis finibus in vulputate lorem congue. Duis laoreet tortor a quam egestas, at finibus ipsum fringilia. In et leo pellentesque, molestie eliut ut.

``` */ .notification { padding-top: 0.825em; padding-bottom: 0.825em; background-color: #ffffff; } .notification p:last-child { margin-bottom: 0; } .notification table { width: 90%; color: #444; margin: 1em 5%; } .notification table th { background: #ffffff; color: #444; } .notification table th, .notification table td { padding: 0 0.5em; } .notification--warning, .notification--info, .notification--error { color: #ffffff; } .notification--warning a, .notification--info a, .notification--error a { color: #ffffff; } .notification--warning a:hover, .notification--info a:hover, .notification--error a:hover { opacity: 0.8; } .notification--warning .l-center .grid .icon, .notification--warning .l-center .grid .fa, .notification--info .l-center .grid .icon, .notification--info .l-center .grid .fa, .notification--error .l-center .grid .icon, .notification--error .l-center .grid .fa { display: inline; margin-right: 10px; } .notification--warning .l-center .grid .icon + p, .notification--warning .l-center .grid .icon + div, .notification--warning .l-center .grid .fa + p, .notification--warning .l-center .grid .fa + div, .notification--info .l-center .grid .icon + p, .notification--info .l-center .grid .icon + div, .notification--info .l-center .grid .fa + p, .notification--info .l-center .grid .fa + div, .notification--error .l-center .grid .icon + p, .notification--error .l-center .grid .icon + div, .notification--error .l-center .grid .fa + p, .notification--error .l-center .grid .fa + div { display: inline; } .notification--warning { background-color: #003665; } .notification--info { background-color: #003665; } .notification--error { background-color: #c41442; } .header--sticky .notification__container { position: absolute; left: 0; right: 0; z-index: 2; } .overlay--arrow { height: 0; border-bottom: 0.825em solid white; width: 50%; position: absolute; bottom: 0; } .overlay--arrow.overlay--arrow__secondary { border-bottom: 0.825em solid #f2f2f2; } .overlay--arrow__right { border-left: 12px solid transparent; right: 0; } .overlay--arrow__left { border-right: 12px solid transparent; left: 0; } .usp__items--columns { background-color: #f5f5f5; } .usp__content--columns { padding-top: 1.65em; padding-bottom: 1.65em; } @media screen and (min-width: 61.25em) { .usp__content--columns { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } } .usp__item--columns { color: #003665; } .usp__item--columns + .usp__item { margin-top: 2.475em; } @media screen and (min-width: 61.25em) { .usp__item--columns { margin-top: 0em; margin-bottom: 0em; padding-left: 1.5em; padding-right: 0.75em; padding-top: 0.825em; padding-bottom: 1.65em; border-left: 1px solid #ccc; width: 33.33%; } .usp__item--columns + .usp__item { margin-top: 0; } .usp__item--columns:nth-child(3n+1) { border-left: 0 none; } } .usp__item--columns p { margin-bottom: 0; } .usp__title { padding-top: 0em; padding-bottom: 0.4125em; } .usp__title .icon--checkmark { display: inline-block; margin-right: 0.375em; font-weight: 700; } .usp__actions { text-align: center; } @media all and (min-width: 61.25em) { .usp__actions { text-align: left; } } .usp__actions .usp__link { display: inline-block; margin: 0.5em; vertical-align: top; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; color: rgba(0, 54, 101, 0.75); border-bottom: 1px solid rgba(0, 54, 101, 0.75); position: relative; } .usp__actions .usp__link:active, .usp__actions .usp__link:focus, .usp__actions .usp__link:hover { color: #003665; border-color: #003665; } .usp__actions a { margin-top: -20px; margin-bottom: 20px; } @media print { .usp__actions { display: none; } } .usp__actions--columns .usp__link { margin: 0; } .appstore { padding: 0.5em 0; margin-bottom: 1.5em; border-top: 1px solid #b7c2cb; border-bottom: 1px solid #b7c2cb; } .appstore .gamma, .appstore .textimage h3, .textimage .appstore h3 { padding-top: 0; } @media all and (min-width: 46.25em) { .appstore p:last-child { margin-bottom: 0; } } .appstore-link__container { display: block; -webkit-justify-content: space-between; justify-content: space-between; } @media all and (min-width: 46.25em) { .appstore-link__container { display: -webkit-flex; display: flex; -webkit-justify-content: flex-end; justify-content: flex-end; } } .appstore-link { width: 100%; display: inline-block; border-bottom: 0; } @media all and (min-width: 46.25em) { .appstore-link { width: 32%; } } .appstore-image { display: block; width: 80%; height: auto; max-width: 250px; margin: auto; border-radius: 5px; } @media all and (min-width: 46.25em) { .appstore-image { width: 95%; margin: auto; max-width: 100%; } } @media print { .appstore { display: none; } } /*****************\ #Branch locator \*****************/ .cta-offices { position: relative; } @media print { .cta-offices { display: none; } } @media all and (min-width: 61.25em) { .cta-offices__text__container { padding-right: 0; } } .cta-offices__text { background-color: #00aeef; padding: 20px 30px; border-radius: 5px; color: #ffffff; } @media all and (min-width: 61.25em) { .cta-offices__text { border-radius: 5px 0 0 5px; } } .cta-offices__image { margin-right: 12px; padding-left: 0; display: none; border-radius: 0 5px 5px 0; background-size: cover; min-height: 134px; position: absolute; top: 0; bottom: 0; right: 0; } @media all and (min-width: 61.25em) { .cta-offices__image { display: block; } } .branch__locator__search__wrapper { display: none; } @media all and (min-width: 61.25em) { .branch__locator__search__wrapper { position: absolute; top: 50%; left: 18%; display: block; width: 64%; height: 4.1875em; border-radius: 5px; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } } @media all and (min-width: 81.25em) { .branch__locator__search__wrapper { width: 50%; left: 25%; } } .branch__locator__search__wrapper .search__input { width: 100%; margin-bottom: 0; padding-left: 1em; padding-right: 6em; border: 0; font-size: 1em; line-height: 1.65em; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; } @media all and (min-width: 61.25em) { .branch__locator__search__wrapper .search__input { width: 100%; line-height: 1.5625em; height: 4.1875em; } } .branch__locator__search__wrapper .search__button { position: absolute; top: 0; right: 0; display: block; width: 3em; height: 3em; padding: 0; border-radius: 0; text-align: center; color: #ffffff; } @media all and (min-width: 61.25em) { .branch__locator__search__wrapper .search__button { width: 5.625em; height: 4.1875em; line-height: 2em; margin-bottom: 0; } .branch__locator__search__wrapper .search__button .icon, .branch__locator__search__wrapper .search__button .fa { font-size: 2em; } } /*doc --- title: Feedback button name: feedback-button category: Modules --- ```html_example Feedback ``` */ .btn--feedback { z-index: 1000; position: fixed; bottom: 0; right: 3%; border: 1px solid #80c342; background-color: #80c342; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0); color: white; border-radius: 5px 5px 0 0; width: auto; height: auto; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); } .btn--feedback .icon, .btn--feedback .fa { margin-bottom: -10px; font-size: 1.5em; line-height: 1.5; display: none; } @media all and (min-width: 46.25em) { .btn--feedback .icon, .btn--feedback .fa { display: block; } } .btn--feedback:hover, .btn--feedback:focus { border: 1px solid #97ce65; background-color: #97ce65; } .btn--feedback:active { background-color: #97ce65; box-shadow: none; } .support { padding-top: 0.825em; padding-bottom: 0.825em; margin-top: 0em; margin-bottom: 1.65em; text-align: center; border: 1px solid #80c342; border-radius: 5px; color: #80c342; } @media all and (min-width: 46.25em) { .support { padding-top: 0.825em; padding-bottom: 0em; } } @media all and (min-width: 81.25em) { .support { padding-top: 0em; padding-bottom: 0em; } } .support__title { text-align: center; } @media all and (min-width: 81.25em) { .support__title { display: inline-block; line-height: 5; vertical-align: top; text-align: left; margin: 0; margin-left: 0.6em; margin-right: 0.9em; padding-top: 0em; padding-bottom: 0em; } } .support__item { color: #80c342; border: none; } .support__item { text-align: center; text-decoration: none; display: inline-block; padding-left: 0.9em; padding-right: 0.9em; padding-top: 1.65em; padding-bottom: 0em; padding-bottom: 20px; cursor: pointer; } .support__item .icon, .support__item .fa { font-weight: 300; display: block; } .support__item:active, .support__item:focus, .support__item:hover { color: #80c342; padding-bottom: 16px; border-bottom: 4px solid #80c342; } .support__item__text { font-size: 0.8em; } .parsys--no-results { padding-top: 1.65em; padding-bottom: 1.65em; } .bg-color--white { background-color: #ffffff; } .bg-color--grey { background-color: #f5f5f5; } .bg-color--bg-light { background-color: #f3f8fa; } .text-video__read-more { font-size: 14px; line-height: 20px; font-weight: 300; font-family: "museosanslight", sans-serif; color: rgba(0, 54, 101, 0.7); padding-bottom: 12px; display: none; } .text-video--full .text-video__read-more { display: block; } .text-video--full .text-video__read-more--hide { display: none; } @media all and (min-width: 46.25em) { .text-video--full .text-video__read-more--hide { display: block; } } /*doc --- title: Footer name: 3-footer category: Modules --- The `footer` is generic for each page, also this tag mustn't be used more than once within the `body` tag. Use the grid system within the `footer` and use `h4` tags as headings. ```html_example ``` */ .footer { margin-top: 0em; margin-bottom: 0em; padding-top: 1.65em; padding-bottom: 0.825em; background-color: white; position: relative; border-top: 1px solid #b7c2cb; -webkit-transform: translateZ(0); } .footer .delta, .footer .textimage h4, .textimage .footer h4 { font-family: "LubalinBook"; font-weight: 600; color: #003665; margin-bottom: 0; } .footer li { padding-top: 0.2475em; padding-bottom: 0.2475em; } .footer .icon, .footer .fa { color: #00aeef; } .footer .icon.media__left, .footer .fa.media__left { margin-right: 0; padding-right: 0.3125em; } .footer .footer__loan-warning { border: 0; } .footer .footer__navigation { border-top: 1px solid #b7c2cb; } .footer__loan-warning { font-size: 2.25em; line-height: 1.1em; margin-bottom: 0.3666666667em; color: #999; } .nav--footer ul { margin-top: 0.75em; margin-bottom: 0.5em; } .nav--footer ul li { float: left; } .nav--footer ul::after { content: ""; display: table; clear: both; } .nav--footer li { padding-left: 0em; padding-right: 0.75em; } .nav--footer a { -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; color: #999; border: none; } .nav--footer a:hover { border-bottom: 1px solid #999; color: #666; } .footer--logo a { text-align: center; padding-top: 0.33em; padding-bottom: 1.32em; margin-top: 0.825em; margin-bottom: 0.825em; margin-left: 0em; margin-right: 0.375em; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; transition: all 0.2s ease-out; display: block; height: 100%; background-color: transparent; border-radius: 5px; border: none; float: left; width: 25%; } .footer--logo a:hover { background-color: #e3e8eb; } img, .image { border-radius: 0; } .textimage .image--wide img { border-radius: 0; } .textimage .image--inset img { border-radius: 0; } @media all and (min-width: 46.25em) { .textimage .image--inset img { border-radius: 0; } } @media all and (min-width: 46.25em) { .image { border-radius: 0; } } .image--inset img { border-radius: 0; } .text ul li { list-style: none; } .text ul li::before { color: #00aeef; content: "•"; font-size: 1.2em; padding-right: 0.5em; } table { border-radius: 0; } table th { background-color: #003665; color: white; } .table--striped__container > table, .table--striped { border-radius: 0; } .table--striped__container > table tr th, .table--striped tr th { color: #e6e6e6; background-color: #003665; } .table--striped__container > table tr:nth-child(odd) th, .table--striped tr:nth-child(odd) th { background-color: #003665; } .table--striped__container > table tr:first-child :first-child, .table--striped tr:first-child :first-child { border-radius: 0; } @media all and (min-width: 46.25em) { .table--striped__container > table tr:first-child :first-child, .table--striped tr:first-child :first-child { border-radius: 0; } .table--striped__container > table tr:first-child :last-child, .table--striped tr:first-child :last-child { border-radius: 0; } } .table--striped__container > table tr:last-child td:last-child, .table--striped tr:last-child td:last-child { border-radius: 0; } @media all and (min-width: 46.25em) { .table--striped__container > table tr:last-child td:first-child, .table--striped tr:last-child td:first-child { border-radius: 0; } .table--striped__container > table tr:last-child td:last-child, .table--striped tr:last-child td:last-child { border-radius: 0; } } form .table--blocked__container tr th, form .table--fixed__container tr th, form .table--striped__container > table tr th, form .table--striped__container > table tr:nth-child(odd) th { background-color: #003665; } .footer .btn__sharing .icon, .footer .btn__sharing .fa { color: #ffffff; } .nav--main__list-item .nav--main__item-wrapper a { font-family: "museosansbold", sans-serif; } @media all and (min-width: 40em) { .person__component__container { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -moz-box-lines: multiple; box-lines: multiple; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -0.75em; margin-right: -0.75em; } } @media all and (min-width: 40em) { .person__component__container--bp3-2cols .person { width: 50%; -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; -webkit-flex: 0 0 auto; -moz-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } } @media all and (min-width: 46.25em) { .person__component__container--bp4-3cols .person { width: 33.33%; -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; -webkit-flex: 0 0 auto; -moz-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } } .person { margin-bottom: 1.65em; width: 100%; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; } @media all and (min-width: 40em) { .person { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; -webkit-flex-direction: row; -moz-flex-direction: row; flex-direction: row; -ms-flex-direction: row; -webkit-box-align: stretch; -moz-box-align: stretch; box-align: stretch; -webkit-align-items: stretch; -moz-align-items: stretch; -ms-align-items: stretch; -o-align-items: stretch; align-items: stretch; -ms-flex-align: stretch; padding-left: 0.75em; padding-right: 0.75em; } } .person__imagecontainer { border-radius: 50%; height: 8.75em; width: 8.75em; min-height: 8.75em; min-width: 8.75em; background: rgba(0, 0, 0, 0) none no-repeat scroll center center; background-size: cover; } @media all and (min-width: 40em) { .person__imagecontainer { height: 5em; width: 5em; min-height: 5em; min-width: 5em; margin-left: 0em; margin-right: 0.5625em; } } @media all and (min-width: 61.25em) { .person__imagecontainer { height: 6.25em; width: 6.25em; min-height: 6.25em; min-width: 6.25em; } } .person__metadata { -webkit-box-flex: 0; -moz-box-flex: 0; box-flex: 0; -webkit-flex: 0 1 auto; -moz-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; } .person__metadata__linkcontainer { margin-top: 0.375em; } .person__metadata__linkcontainer:first-child .btn__sharing { margin-left: auto; } .person__metadata__email { word-break: break-all; } .person__metadata__name, .person__metadata__jobtitle, .person__metadata__about, .person__metadata__bio, .person__metadata__email, .person__metadata__phone { font-size: inherit; line-height: inherit; font-weight: inherit; font-family: inherit; } .sharing__wrapper, .social-feedback__sharing__wrapper { margin-top: 0em; margin-bottom: 0.825em; padding-top: 1.65em; padding-bottom: 1.65em; text-align: left; } @media all and (max-width: 46.24em) { .sharing__wrapper, .social-feedback__sharing__wrapper { padding-top: 0em; padding-bottom: 0em; text-align: center; } } .feedback { padding-top: 0; padding-bottom: 0; } @media all and (max-width: 61.24em) { .feedback { display: -webkit-box; display: -moz-box; display: box; display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -moz-flex-direction: column; flex-direction: column; -ms-flex-direction: column; margin-bottom: 0; } } .btn__sharing { cursor: pointer; padding-left: 0em; padding-right: 0em; padding-top: 0em; padding-bottom: 0em; margin-left: 0.1875em; margin-right: 0.1875em; margin-top: 0em; margin-bottom: 0.825em; display: inline-block; font-size: 1em; color: #ffffff; border: 0 none; text-align: center; border-radius: 1.125em; height: 2.25em; width: 2.25em; line-height: 2.25em; } @media all and (min-width: 46.25em) { .btn__sharing { margin-left: 0.375em; margin-right: 0em; } } .btn__sharing:hover { border: 0 none; } .btn__sharing .icon, .btn__sharing .fa { color: #ffffff; height: auto; padding: 0; display: block; line-height: 2.25em; } .btn__sharing:last-child { margin-right: 0; } .btn__sharing--facebook { border: 1px solid #3b5998; background-color: #3b5998; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0); color: #ffffff; } .btn__sharing--facebook:hover, .btn__sharing--facebook:focus { border: 1px solid #496db8; background-color: #496db8; } .btn__sharing--facebook:active { background-color: #496db8; box-shadow: none; } .btn__sharing--twitter { border: 1px solid #00aced; background-color: #00aced; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0); color: #ffffff; } .btn__sharing--twitter:hover, .btn__sharing--twitter:focus { border: 1px solid #1cc1ff; background-color: #1cc1ff; } .btn__sharing--twitter:active { background-color: #1cc1ff; box-shadow: none; } .btn__sharing--mail { border: 1px solid #7f9ea9; background-color: #7f9ea9; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0); color: #ffffff; } .btn__sharing--mail:hover, .btn__sharing--mail:focus { border: 1px solid #9ab3bb; background-color: #9ab3bb; } .btn__sharing--mail:active { background-color: #9ab3bb; box-shadow: none; } .btn__sharing--linkedin { border: 1px solid #007fb2; background-color: #007fb2; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0); color: #ffffff; } .btn__sharing--linkedin:hover, .btn__sharing--linkedin:focus { border: 1px solid #00a0e0; background-color: #00a0e0; } .btn__sharing--linkedin:active { background-color: #00a0e0; box-shadow: none; } .btn__sharing--youtube { border: 1px solid #f61c0d; background-color: #f61c0d; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0); color: #ffffff; } .btn__sharing--youtube:hover, .btn__sharing--youtube:focus { border: 1px solid #f84639; background-color: #f84639; } .btn__sharing--youtube:active { background-color: #f84639; box-shadow: none; } .btn__sharing__text { padding-left: 0.75em; padding-right: 0.75em; display: inline-block; } .sharing__wrapper--footer, .sharing__wrapper--header { display: block; float: left; margin: 0; padding: 0; } .sharing__wrapper--footer::after, .sharing__wrapper--header::after { content: ""; display: table; clear: both; } .sharing__wrapper--footer .sharing__text, .sharing__wrapper--header .sharing__text { font-size: 14px; line-height: 20px; font-weight: 300; margin: 7px 14px 7px 0; display: inline-block; line-height: 2.25em; vertical-align: top; } .sharing__wrapper--footer .sharing__buttons, .sharing__wrapper--header .sharing__buttons { display: inline-block; } .sharing__wrapper--footer .sharing__buttons::after, .sharing__wrapper--header .sharing__buttons::after { content: ""; display: table; clear: both; } .sharing__wrapper--footer .btn__sharing, .sharing__wrapper--header .btn__sharing { display: block; float: left; margin: 7px; } .sharing__wrapper--footer .btn__sharing:last-child, .sharing__wrapper--header .btn__sharing:last-child { margin-right: 0; } @media all and (min-width: 46.25em) { .sharing__wrapper--footer, .sharing__wrapper--header { float: right; } } .sharing__wrapper--footer { padding-top: 5px; } .useful__wrapper { text-align: center; -webkit-transition: color 0.5s ease-in-out; -moz-transition: color 0.5s ease-in-out; transition: color 0.5s ease-in-out; } @media all and (min-width: 46.25em) { .useful__wrapper { padding-top: 1.95em; padding-bottom: 1.65em; } .useful__wrapper p { text-align: left; } } .useful__answers { display: inline-block; } .useful__question, .useful__answer { line-height: 2.1875em; } .useful__question { margin-top: 3.3em; margin-bottom: 0em; padding-top: 0.825em; padding-bottom: 0em; border-top: 1px solid #ccc; display: block; } @media all and (min-width: 46.25em) { .useful__question { padding-left: 0em; padding-right: 0.75em; margin-top: 0em; margin-bottom: 0em; padding-top: 0em; padding-bottom: 0em; border-top: 0 none; display: inline-block; } } .useful__answer { padding-left: 0.375em; padding-right: 0.375em; border-radius: 3px; border: 0 none; display: inline-block; } @media all and (min-width: 46.25em) { .useful__answer { padding-left: 0em; padding-right: 0.75em; } } .useful__answer.useful__answer--positive { color: #91bd69; } .useful__answer.useful__answer--positive:hover { color: #5e853b; } .useful__answer.useful__answer--negative { color: #999; } .useful__answer.useful__answer--negative:hover { color: #666; } .icon--social.icon--checkmark { color: #91bd69; } .icon--social.icon--cancel { color: #999; } .useful__wrapper--disabled .useful__answer.useful__answer--negative, .useful__wrapper--disabled .useful__answer.useful__answer--positive, .useful__wrapper--disabled .useful__answer:hover.useful__answer--negative, .useful__wrapper--disabled .useful__answer:hover.useful__answer--positive { color: #ccc; cursor: text; } .useful__wrapper--disabled .icon--social, .useful__wrapper--disabled .useful__question { color: #ccc; } @media print { * { background: transparent !important; color: black !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; } @page { margin: 1cm; } h2, h3 { orphans: 3; widows: 3; page-break-after: avoid; } p { orphans: 3; widows: 3; } pre, blockquote { border: 1px solid #ccc; page-break-inside: avoid; } abbr[title]::after { content: " (" attr(title) ")"; } a, a:visited { text-decoration: underline; } a[href]::after { content: " (" attr(href) ")"; } a[href^="javascript:"]::after, a[href^="#"]::after { content: ""; } img { max-width: 100% !important; page-break-inside: avoid; } thead { display: table-header-group; } tr { page-break-inside: avoid; } }