/* --------------------------------------------------------------------------------------------------------- */ /* -- Root ------------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------- */ :root {--FontA: Guardian, Helvetica Neue, Helvetica, sans-serif !important; --FontB: BentonSans, Helvetica Neue, Helvetica, sans-serif !important; --Sz5: calc(var(--Sz0) * 6); --Sz4: calc(var(--Sz0) * 5); --Sz3: calc(var(--Sz0) * 4); --Sz2: calc(var(--Sz0) * 3); --Sz1: calc(var(--Sz0) * 2); --Sz0: 20px; --Sz01: calc(var(--Sz0) / 2); --Sz02: calc(var(--Sz0) / 3); --Sz03: calc(var(--Sz0) / 4); --Sz04: calc(var(--Sz0) / 5); --Sz05: calc(var(--Sz0) / 6); --Sz06: calc(var(--Sz0) / 7); --Sz07: calc(var(--Sz0) / 8); --Sz08: calc(var(--Sz0) / 9); --Sz09: calc(var(--Sz0) / 10); --LightBlue: #006fcf; --BrSmall: 0.25rem; --BrBig: 0.75rem; --BoxShadow: 0px 10px 30px rgba(0, 0, 0, 0.25); --SmallBoxShadow: 0px 0px 40px rgba(0, 0, 0, 0.1); --NoBoxShadow: 0px 0px 0px rgba(0, 0, 0, 0); --an1: all 300ms ease-in-out; --an2: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);} /* --------------------------------------------------------------------------------------------------------- */ /* -- Reset ------------------------------------------------------------------------------------------------ */ /* --------------------------------------------------------------------------------------------------------- */ .container-fluid a, .container-fluid a:active, .container-fluid a:focus, .container-fluid button, .container-fluid button:focus, .container-fluid button:active, .container-fluid .btn, .container-fluid .btn:focus, .container-fluid .btn:active:focus, .container-fluid .btn.active:focus, .container-fluid .btn.focus, .container-fluid .btn.focus:active, .container-fluid .btn.active.focus {outline: none; outline: 0;} input::-moz-focus-inner {border: 0;} @media only screen and (max-width: 767px) {.container-fluid {width: 100vw; overflow: hidden;}} /* --------------------------------------------------------------------------------------------------------- */ /* -- Label ------------------------------------------------------------------------------------------------ */ /* --------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) {.container-fluid .label .container .row {padding-bottom: calc(var(--Sz1) + var(--Sz01)) !important;}} /* --------------------------------------------------------------------------------------------------------- */ /* -- Spacer ----------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------- */ .Sz4Top {padding-top: var(--Sz4) !important;} .Sz3Top {padding-top: var(--Sz3) !important;} .Sz2Top {padding-top: var(--Sz2) !important;} .Sz1Top {padding-top: var(--Sz1) !important;} .Sz0Top {padding-top: var(--Sz0) !important;} .Sz01Top {padding-top: var(--Sz01) !important;} .Sz02Top {padding-top: var(--Sz02) !important;} .Sz03Top {padding-top: var(--Sz03) !important;} .Sz04Top {padding-top: var(--Sz04) !important;} .Sz05Top {padding-top: var(--Sz05) !important;} .Sz06Top {padding-top: var(--Sz06) !important;} .Sz07Top {padding-top: var(--Sz07) !important;} .Sz08Top {padding-top: var(--Sz08) !important;} .Sz09Top {padding-top: var(--Sz09) !important;} .Sz4Bottom {padding-bottom: var(--Sz4) !important;} .Sz3Bottom {padding-bottom: var(--Sz3) !important;} .Sz2Bottom {padding-bottom: var(--Sz2) !important;} .Sz1Bottom {padding-bottom: var(--Sz1) !important;} .Sz0Bottom {padding-bottom: var(--Sz0) !important;} .Sz01Bottom {padding-bottom: var(--Sz01) !important;} .Sz02Bottom {padding-bottom: var(--Sz02) !important;} .Sz03Bottom {padding-bottom: var(--Sz03) !important;} .Sz04Bottom {padding-bottom: var(--Sz04) !important;} .Sz05Bottom {padding-bottom: var(--Sz05) !important;} .Sz06Bottom {padding-bottom: var(--Sz06) !important;} .Sz07Bottom {padding-bottom: var(--Sz07) !important;} .Sz08Bottom {padding-bottom: var(--Sz08) !important;} .Sz09Bottom {padding-bottom: var(--Sz09) !important;} /* --------------------------------------------------------------------------------------------------------- */ /* -- Modal ------------------------------------------------------------------------------------------------ */ /* --------------------------------------------------------------------------------------------------------- */ .container-fluid .ModalCustom {background: rgba(0, 23, 90, 0.8); position: fixed !important; top: 0px !important; left: 0 !important; z-index: 9999996 !important; width: 100vw; height: 100vh !important; display: flex; justify-content: center; align-items: center;} .container-fluid .ModalCustom .ModalCloseBtn {width: 48px; height: 48px; position: fixed; top: var(--Sz1); right: var(--Sz1); cursor: pointer; transform: scale(1); transition: var(--an1); z-index: 2; color: transparent !important;} .container-fluid .ModalCustom .ModalCloseBtn:hover {transform: scale(1.2);} .container-fluid .ModalCustom .ModalBackgroundBtn {width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; background: black; cursor: pointer; z-index: 1; transition: var(--an1); opacity: 0;} .container-fluid .ModalCustom .ModalBackgroundBtn:hover {opacity: 0.3;} .container-fluid .ModalCustom .ModalBackgroundBtn p {display: none;} .container-fluid .ModalContent {background-color: white; box-shadow: var(--BoxShadow); border-radius: var(--BrSmall); width: 90%; height: 70vh; margin: 0 auto; overflow: scroll; overflow-x: hidden; z-index: 2;} .container-fluid .ModalContent .container {padding-left: 0px; padding-right: 0px; position: relative; left: 10px;} .container-fluid .ModalContent .container .row:first-child {padding: 0 !important; margin: 0 !important;} .container-fluid .ModalContent .container .row .col-md-12.margin-0-tb:first-child {padding: 0 !important; margin: 0 !important;} /* -- Modal - animatie ------------------------------------------------------------------------------------- */ body {overflow: initial;} body.Open {width: 100vw; height: 100vh; overflow: hidden;} .container-fluid .ModalCustom {opacity: 0 !important; transition: var(--an1); pointer-events: none;} .container-fluid .ModalCustom.Open {opacity: 1 !important; pointer-events: all;} .container-fluid .ModalCustom .ModalContent {transition: var(--an2); opacity: 0 !important; transform: translateY(100px);} .container-fluid .ModalCustom.Open .ModalContent {opacity: 1 !important; transform: translateY(0px);} /* -- Modal - content -------------------------------------------------------------------------------------- */ .container-fluid .ModalContent .BannerA .richtext {position: relative; top: 0px; left: 35px; width: 140%;} .container-fluid .ModalContent .intro {padding: calc(var(--Sz0) + var(--Sz05)) var(--Sz2) calc(var(--Sz1) - var(--Sz04)) calc(var(--Sz2) - var(--Sz01));} .container-fluid .ModalContent .intro .container .row .richtext {width: 100% !important;} .container-fluid .ModalContent .TextPlaat {width: 100%;} .container-fluid .ModalContent .TextPlaat .container {left: 0px;} .container-fluid .ModalContent .TextPlaat .row.pad-3-t.pad-3-b {padding: 0 var(--Sz1) var(--Sz2) var(--Sz1) !important;} .container-fluid .ModalContent .TextPlaat .richtext {padding: 0 !important; padding-left: 20px !important;} .container-fluid .ModalContent .TextPlaat.TxPl .richtext {padding-left: 0px !important;} /* --------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) {.container-fluid .ModalContent {width: 100%; height: 80vh; left: 2vw;} .container-fluid .ModalContent .intro {padding: var(--Sz0);} .container-fluid .ModalContent .TextPlaat .row.pad-3-t.pad-3-b {padding: 0!important;} .container-fluid .ModalContent .TextPlaat .row.pad-3-t.pad-3-b .col-md-6 {margin-bottom: var(--Sz0) !important;} .container-fluid .ModalContent .TextPlaat.PlTx .col-md-6 .image {margin-bottom: var(--Sz0) !important;} .container-fluid .ModalContent .TextPlaat.TxPl .col-md-6 .image {margin-bottom: var(--Sz0) !important; margin-top: var(--Sz1) !important;}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) {.container-fluid .ModalContent {width: 100%; height: 70vh; left: 1.5vw;} .container-fluid .ModalContent .TextPlaat .row.pad-3-t.pad-3-b .col-md-6 {flex: 0 0 100% !important; max-width: 100% !important; margin-bottom: var(--Sz1) !important;} .container-fluid .ModalContent .TextPlaat .row.pad-3-t.pad-3-b .col-md-6:last-child {right: 10px !important; margin-bottom: 0 !important;} .container-fluid .ModalContent .TextPlaat.PlTx .col-md-6:first-child {padding-left: 0 !important;} .container-fluid .ModalContent .TextPlaat.PlTx .col-md-6 .image {margin-bottom: var(--Sz1) !important;} .container-fluid .ModalContent .TextPlaat.TxPl .col-md-6 .image {margin-bottom: var(--Sz1) !important; margin-top: calc(0px - var(--Sz1)) !important;} .container-fluid .ModalContent .TextPlaat.TxPl .col-md-6:first-child {order: 2 !important;} .container-fluid .ModalContent .TextPlaat.TxPl .col-md-6:Last-child {order: 1 !important;}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1024px) and (max-width: 1279px) {.container-fluid .ModalContent {width: 100%; height: 70vh; left: 1vw;}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1280px) {} /* --------------------------------------------------------------------------------------------------------- */ /* -- Site Area Navigation --------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------- */ .container-fluid .siteareanav, .container-fluid .siteareanav .san-wrapper {border: 0px solid transparent !important; box-shadow: var(--BoxShadow); position: relative;}.container-fluid .siteareanav ul.nav-menu li {position: relative; top: 3px !important;} .container-fluid .siteareanav ul.nav-menu li::before {content: ""; color: transparent; display: none; width: 0px; margin-left: 0px; font-size: 0px;} /* --------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) {.container-fluid .siteareanav nav {background-color: var(--LightBlue);} .container-fluid .siteareanav nav .padding-1-tb.margin-2-lr {padding: var(--Sz01) 0!important; margin: 0 var(--Sz01)!important;} .container-fluid .siteareanav nav .san-dropdown.nav-dropdown {background-color: white; border: 1px solid white; border-radius: var(--BrSmall); color: var(--LightBlue);}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) {} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1024px) and (max-width: 1279px) {} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1280px) {} /* --------------------------------------------------------------------------------------------------------- */ /* -- Country Language Selection --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------- */ .container-fluid .custom-country-dropdown {min-width: 200px !important;} .container-fluid .custom-country-dropdown .custom-select-container {padding: var(--Sz02) var(--Sz0) !important; height: auto !important; cursor: pointer; box-shadow: var(--NoBoxShadow) !important; transition: var(--an1) !important;} .container-fluid .custom-country-dropdown .custom-select-container:hover {background-color: white; box-shadow: var(--BoxShadow) !important; border: solid 0.0625rem #c8c9c7 !important;} .container-fluid .custom-country-dropdown .custom-select-container span.selectedcountry {color: white; transition: var(--an1);} .container-fluid .custom-country-dropdown .custom-select-container:hover span.selectedcountry {color: var(--LightBlue);} .container-fluid .custom-country-dropdown .custom-select-container.countryfocus {border-bottom: solid 0.0625rem #c8c9c7 !important; box-shadow: var(--BoxShadow) !important;} .container-fluid .custom-country-dropdown .custom-select-container.countryfocus span.selectedcountry {color: var(--LightBlue)} .container-fluid .custom-country-dropdown .custom-select-container .down-arrow-icn.glyph.glyph-sm.dls-glyph-down.dls-white::before {color: white; transform: rotate(0deg); transition: var(--an1);} .container-fluid .custom-country-dropdown .custom-select-container:hover .down-arrow-icn.glyph.glyph-sm.dls-glyph-down.dls-white::before, .container-fluid .custom-country-dropdown .custom-select-container.countryfocus .down-arrow-icn.glyph.glyph-sm.dls-glyph-down.dls-black::before{color: var(--LightBlue); transform: rotate(180deg);} .container-fluid .dropdown-list {padding: var(--Sz02) var(--Sz0) !important;} /* --------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 448px) {.container-fluid .custom-country-dropdown {position: relative; z-index: 2; top: calc(0px - var(--Sz1) - var(--Sz03)); right: calc(0px - var(--Sz1) + var(--Sz01));} .container-fluid .custom-country-dropdown .custom-select-container { padding: 0 var(--Sz0) !important;}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 448px) and (max-width: 767px) {.container-fluid .custom-country-dropdown {position: relative; z-index: 2; top: calc(0px - var(--Sz0) - var(--Sz09)); right: calc(0px - var(--Sz0) - var(--Sz01));} .container-fluid .custom-country-dropdown .custom-select-container {padding: 0 var(--Sz0) !important;} } /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) {} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1024px) and (max-width: 1279px) {} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1280px) {} /* --------------------------------------------------------------------------------------------------------- */ /* -- Breadcrumbs ------------------------------------------------------------------------------------------ */ /* --------------------------------------------------------------------------------------------------------- */ .container-fluid .breadcrumb ol.breadcrumb li::before {display: none;} .container-fluid .breadcrumb ol.breadcrumb li::after {top: -1px; position: relative;} .container-fluid .breadcrumb ol.breadcrumb, .container-fluid .breadcrumb ol.breadcrumb li a {font-size: 14px !important;} /* --------------------------------------------------------------------------------------------------------- */ /* -- Header ----------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------- */ .container-fluid .Hero-custom {margin-bottom: var(--Sz4); position: relative;} .container-fluid .Hero-custom .hidden-md-down::before {content: ""; position: absolute; left: 0; width: 100%; height: 100%; background: rgb(0, 0, 0); background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);} .container-fluid .Hero-custom .card-img-tint.card-img-hero-tint.dls-black-bg {background-color: transparent !important;} .container-fluid .Hero-custom .row {padding-top: 0 !important; padding-bottom: 0 !important;} .container-fluid .Hero-custom .row .col-md-6:first-child {padding-top: var(--Sz4) !important; padding-bottom: var(--Sz3) !important;} .container-fluid .Hero-custom .row .col-md-6:last-child {display: flex; align-items: flex-end; justify-content: right;} .container-fluid .Hero-custom .row .col-md-6:last-child .image {margin-bottom: 0 !important; position: relative; z-index: 10; transform: translateY(calc(0px + var(--Sz2))) translateX(var(--Sz0));} .container-fluid .Hero-custom .row .col-md-6:last-child .image .pad img {border-radius: 20px !important;} .container-fluid .Hero-custom .row .col-md-6:first-child .button.parbase {margin-top: var(--Sz1);} /* --------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) {.container-fluid .Hero-custom .row .col-md-6:last-child {justify-content: left;} .container-fluid .Hero-custom .row .col-md-6:last-child div:first-child {width: 100% !important;} .container-fluid .Hero-custom .row .col-md-6:last-child .image {transform: translateY(calc(0px + var(--Sz1))) translateX(0);} .container-fluid .Hero-custom .row .col-md-6:first-child {margin-top: var(--Sz1) !important; margin-bottom: calc(0px - var(--Sz1)) !important;} .container-fluid .Hero-custom .row .col-md-6:first-child .button.parbase {margin: var(--Sz04) 0px 0px 0px !important;} .container-fluid .Hero-custom .card-img-tint.card-img-hero-tint.dls-black-bg {opacity: 1 !important; background: rgb(0, 0, 0) !important; background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.6) 100%) !important;} .container-fluid .Hero-custom .row .col-md-6:last-child .image .pad img {border-radius: 3vw !important;}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) {.container-fluid .Hero-custom .row .col-md-6 {flex: 0 0 100%; max-width: 100%;} .container-fluid .Hero-custom .row .col-md-6:first-child {margin-bottom: calc(0px - var(--Sz4)) !important;} .container-fluid .Hero-custom .row .col-md-6:last-child {justify-content: left; padding: 0 !important;} .container-fluid .Hero-custom .row .col-md-6:last-child .image {transform: translateY(calc(0px + var(--Sz2))) translateX(0);} .container-fluid .Hero-custom .card-img-tint.card-img-hero-tint.dls-black-bg {opacity: 1 !important; background: rgb(0, 0, 0) !important; background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.6) 100%) !important;} } /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1024px) and (max-width: 1279px) {} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1280px) {} /* --------------------------------------------------------------------------------------------------------- */ /* -- Hero ------------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------- */ .container-fluid .hero {width: 100%; padding: 0px; position: relative;} .container-fluid .hero .hero {width: 100%; padding: 0px var(--Sz4);} .container-fluid .hero .pad-responsive-extra-lr {max-width: 1200px !important; width: 100% !important; margin: 0 !important; padding: 0 !important;} .container-fluid .hero .pad-responsive-extra-lr .col-md-6 {padding: var(--Sz4) 0;} .container-fluid .hero h2 {font-size: 19px !important; line-height: 1.5 !important; font-family: var(--FontB);} .container-fluid .hero h2:first-of-type {margin-bottom: var(--Sz3);} .container-fluid .hero a.dls-white {color: #FFF !important; text-decoration: none;} .container-fluid .hero a.dls-white:hover {color: #FFF !important; opacity: 0.8; text-decoration: none;} .container-fluid .hero a.dls-white::after {content: ""; width: 18px; height: 14px;background-image: url("https://www.americanexpress.com/content/dam/amex/nl/assets/bubl/img/ArrowWitRight.svg"); display: inline-block; background-size: contain; background-position: center center; background-repeat: no-repeat; margin-left: var(--Sz02);transition: var(--an2); position: relative; top: 2px;} .container-fluid .hero a.dls-white:hover::after {background-image: url("https://www.americanexpress.com/content/dam/amex/nl/assets/bubl/img/ArrowWitRight.svg"); margin-left: var(--Sz01);} /* --------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) {.container-fluid .hero .hero {padding: 0px calc(var(--Sz0) + var(--Sz02)); text-align: left;} .container-fluid .hero .pad-responsive-extra-lr .col-md-6 {padding: calc(var(--Sz0) + var(--Sz02)) 0 0 0;} .container-fluid .hero h2.body-3 {margin-bottom: var(--Sz0);}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) {.container-fluid .hero .pad-responsive-extra-lr .col-md-6 {padding-bottom: var(--Sz1);} .container-fluid .hero .col-md-6 {flex: 0 0 100%; max-width: 100%;} .container-fluid .hero h2.body-3 {margin-bottom: var(--Sz2);}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1024px) and (max-width: 1279px) {} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1280px) {} /* --------------------------------------------------------------------------------------------------------- */ /* -- Hero Carousel ---------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------- */ .container-fluid .hero-carousel-outer {min-height: auto !important;} .container-fluid .hero-carousel-outer .hero-bg-height {height: 100% !important;} .container-fluid .carousel ul.carousel-inner {list-style: none !important; padding: 0 !important; margin: 0 !important;} .container-fluid .carousel ul.carousel-inner li::before {content: ""; color: transparent; display: none; width: 0px; margin-left: 0px; font-size: 0px;} .container-fluid .carousel .row.fluid {max-width: 1200px !important; width: 100% !important; margin: 0 !important; padding: var(--Sz3) 0 !important;} .container-fluid .carousel h1, .container-fluid .carousel h2 {font-size: 62px !important; line-height: 60px !important; -webkit-font-smoothing: antialiased !important; font-style: normal !important; font-family: var(--FontA); padding: 0 !important; margin: 0 0 var(--Sz0) 0 !important;} .container-fluid .carousel h3 {font-size: 19px !important; line-height: 1.5 !important; font-family: var(--FontB);} .container-fluid .carousel .col-md-8.stack {padding: var(--Sz2) 0; flex: 0 0 50%; max-width: 50%; transform: translateX(var(--Sz1));} .container-fluid .carousel .margin-3-t {margin-top: var(--Sz2) !important;} .container-fluid .carousel .carousel-controls ol.carousel-indicators {list-style: none; border-radius: var(--BrSmall); padding: var(--Sz01); bottom: var(--Sz0);} .container-fluid .carousel .carousel-controls ol.carousel-indicators li::before {display: none;} .container-fluid .carousel .carousel-controls ol.carousel-indicators li button {outline: none !important; outline: 0 !important; border-style: none !important;} .container-fluid .carousel .carousel-controls .carousel-control {right: var(--Sz1); border-radius: 200%; transform: scale(0.8) translateY(-50px); transition: var(--an2);} .container-fluid .carousel .carousel-controls .carousel-control::before {position: relative; left: 2px; outline: none !important; outline: 0 !important; border-style: none !important;} .container-fluid .carousel .carousel-controls .carousel-control:hover {transform: scale(1.0) translateY(-40px);} .container-fluid .carousel .carousel-controls .carousel-control:first-child {left: var(--Sz1);} .container-fluid .carousel .carousel-controls .carousel-control:first-child::before {position: relative; left: -2px;} .container-fluid .carousel .carousel-controls .carousel-control {transform: translateY(-10px) !important;} .container-fluid .carousel .carousel-controls .carousel-control:first-child {left: calc(var(--Sz0) + var(--Sz01)); position: relative;} .container-fluid .carousel .carousel-controls .carousel-control {right: calc(var(--Sz0) + var(--Sz01)); position: relative;} .container-fluid .carousel .carousel-controls ol.carousel-indicators {background-color: rgba(0,0,0,.5); border-radius: var(--BrSmall); padding: var(--Sz01) var(--Sz1); bottom: var(--Sz0);} /* --------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) {.container-fluid .carousel .row.fluid {padding: 0!important;} .container-fluid .carousel .col-md-8.stack {padding: var(--Sz1) var(--Sz2); padding-bottom: var(--Sz3); flex: 0 0 100%; max-width: 100%; transform: translateX(0);} .container-fluid .carousel h1, .container-fluid .carousel h2 {font-size: 50px !important; line-height: 50px !important;} .container-fluid .carousel .margin-3-t { margin-top: var(--Sz1) !important;} .container-fluid .hero-carousel .carousel-controls button.carousel-control {transform: translateY(-10px) !important;} .container-fluid .hero-carousel .carousel-controls ol.carousel-indicators {position: relative; top: 0px;}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) {.container-fluid .carousel .col-md-8.stack {padding: var(--Sz1) var(--Sz2); padding-bottom: var(--Sz3); flex: 0 0 100%; max-width: 100%; transform: translateX(0);}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1024px) and (max-width: 1279px) {} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1280px) {} /* --------------------------------------------------------------------------------------------------------- */ /* -- Typography ------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------- */ .container-fluid h1, .container-fluid h2, .container-fluid h3, .container-fluid h4, .container-fluid h5, .container-fluid h6 {font-weight: 400 !important; margin-bottom: var(--Sz0);} .container-fluid h1, .container-fluid h2, .container-fluid h3 {font-family: var(--FontA);} .container-fluid h4, .container-fluid h5, .container-fluid h6 { font-family: var(--FontB); margin-bottom: var(--Sz02) !important;} .container-fluid h1 {font-size: 62px !important; line-height: 1.2 !important; -webkit-font-smoothing: antialiased !important; font-style: normal !important;} .container-fluid h2 {font-size: 48px !important; line-height: 1.2 !important; -webkit-font-smoothing: antialiased !important; font-style: normal !important;} .container-fluid h3 {font-size: 37px !important; line-height: 1.2 !important; -webkit-font-smoothing: antialiased !important; font-style: normal !important;} .container-fluid h3.h3Small {font-size: 28px !important; line-height: 1.2 !important; -webkit-font-smoothing: antialiased !important; font-style: normal !important;} .container-fluid h4 {font-size: 28px !important; line-height: 1.2 !important; -webkit-font-smoothing: antialiased !important; font-style: normal !important;} .container-fluid h5 {font-size: 21px !important; line-height: 1.2 !important; -webkit-font-smoothing: antialiased !important; font-style: normal !important;} .container-fluid h6 {font-size: 14px !important; line-height: 1.2 !important; -webkit-font-smoothing: antialiased !important; font-style: normal !important;} .container-fluid p, .container-fluid ul, .container-fluid ol {font-size: 17px !important; line-height: 1.7 !important; font-weight: 400; font-family: var(--FontB); margin-bottom: var(--Sz0); -webkit-font-smoothing: antialiased !important; font-style: normal !important;} .container-fluid p.Large, .container-fluid ul.Large, .container-fluid ol.Large {font-size: 21px !important; -webkit-font-smoothing: antialiased !important; font-style: normal !important;} .container-fluid p.Small, .container-fluid ul.Small, .container-fluid ol.Small {font-size: 14px !important; -webkit-font-smoothing: antialiased !important; font-style: normal !important;} .container-fluid strong, .container-fluid b {font-size: 900 !important; -webkit-font-smoothing: antialiased !important; font-style: normal !important;} .container-fluid ul {list-style: none;} .container-fluid ul li {position: relative;} .container-fluid ul li::before {position: absolute; content: "\25AA"; color: var(--LightBlue);} .container-fluid ul li::before {left: -19px;} .container-fluid ul.Large li::before {left: -22px;} .container-fluid ul.Small li::before {left: -16px;} .container-fluid ol {counter-reset: li; list-style: none;} .container-fluid ol li {counter-increment: li; position: relative;} .container-fluid ol li::before {position: absolute; content: counter(li); color: var(--LightBlue); transform: scale(0.7); transform-origin: left bottom;} .container-fluid ol li::before {left: -17px; top: -3px;} .container-fluid ol.Large li::before {left: -20px;} .container-fluid ol.Small li::before {left: -15px;} .container-fluid ul.Check li {position: relative; padding-left: var(--Sz03);} .container-fluid ul.Check li::before {position: absolute; content: ""; background-image: url("https://www.americanexpress.com/content/dam/amex/nl/assets/bubl/img/CheckBlue1Big.svg"); background-position: center center; background-size: contain; background-repeat: no-repeat; transform: scale(0.8);} .container-fluid ul.Check li::before {width: 17px; height: 17px; left: -20px; top: 5px;} .container-fluid ul.Check.Large li::before {width: 21px; height: 21px; left: -25px; top: 6px;} .container-fluid ul.Check.Small li::before {width: 14px; height: 14px; left: -17px; top: 4px;} .container-fluid ul.Dark li::before, .container-fluid ol.Dark li::before {color: white;} .container-fluid ul.Dark li, .container-fluid ol.Dark li {color: white;} .container-fluid ul.Check.Dark li::before {background-image: url("https://www.americanexpress.com/content/dam/amex/nl/assets/bubl/img/CheckWitBig.svg");} /* --------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) {.container-fluid h1 {font-size: 50px !important;} .container-fluid h2 {font-size: 40px !important;} .container-fluid h3 {font-size: 30px !important;} .container-fluid h4 {font-size: 20px !important;} .container-fluid h5 {font-size: 18px !important;} .container-fluid h6 {font-size: 12px !important;} .container-fluid p {font-size: 14px !important;} .container-fluid p.Large {font-size: 18px !important;} .container-fluid p.Small {font-size: 12px !important;}} /* --------------------------------------------------------------------------------------------------------- */ /* -- Grid Layouts ----------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------- */ .container-fluid .grid .container .row .col-md-3, .container-fluid .grid .container .row .col-md-4, .container-fluid .grid .container .row .col-md-6, .container-fluid .grid .container .row .col-md-12 {padding: 0 var(--Sz0); position: relative;} .container-fluid .grid .container .row .col-md-3:first-child, .container-fluid .grid .container .row .col-md-4:first-child, .container-fluid .grid .container .row .col-md-6:first-child, .container-fluid .grid .container .row .col-md-12:first-child {left: calc(0px - var(--Sz0) + var(--Sz01));} .container-fluid .grid .container .row .col-md-3:nth-child(2) {left: calc(0px - var(--Sz04));} .container-fluid .grid .container .row .col-md-3:nth-child(3) {right: calc(0px - var(--Sz04));} .container-fluid .grid .container .row .col-md-3:last-child, .container-fluid .grid .container .row .col-md-4:last-child, .container-fluid .grid .container .row .col-md-6:last-child {right: calc(0px - var(--Sz0) + var(--Sz01));} .container-fluid .grid .container .row .col-md-3 .image, .container-fluid .grid .container .row .col-md-4 .image, .container-fluid .grid .container .row .col-md-6 .image {margin-bottom: var(--Sz1);} .container-fluid .grid .container .row .col-md-3 .image .pad, .container-fluid .grid .container .row .col-md-4 .image .pad, .container-fluid .grid .container .row .col-md-6 .image .pad {margin: 0 !important; padding: 0 !important;} .container-fluid .grid .container .row .col-md-3 .image .pad img, .container-fluid .grid .container .row .col-md-4 .image .pad img, .container-fluid .grid .container .row .col-md-6 .image .pad img {box-shadow: var(--BoxShadow); border-radius: var(--BrSmall); overflow: hidden; min-width: 100% !important; width: 100% !important; max-width: 100% !important;} .container-fluid .grid .no-shadow .container .row .col-md-3 .image .pad img, .container-fluid .grid .no-shadow .container .row .col-md-4 .image .pad img, .container-fluid .grid .no-shadow .container .row .col-md-6 .image .pad img {box-shadow: var(--NoBoxShadow);} .container-fluid .grid .container .row .col-md-3 .richtext h6 {font-size: 10px !important;} .container-fluid .grid .container .row .col-md-3 .richtext h3 {font-size: 25px !important; line-height: 25px !important;} .container-fluid .grid .container .row .col-md-3 .richtext p {font-size: 11px !important;} .container-fluid .grid .intro .container .row .richtext {width: 75%; margin-top: var(--Sz1);} .container-fluid .grid .boxCenter .container .row .richtext {margin: var(--Sz1) auto 0 auto; text-align: center;} .container-fluid .grid .intro .container .row .richtext h3 {font-size: 45px !important; line-height: 45px !important;} .container-fluid .grid .intro .container .row .richtext p {font-size: 19px !important; line-height: 1.5 !important;} .container-fluid .grid .TextPlaat .container .row .col-md-6:first-child {display: flex; align-items: center;} .container-fluid .grid .TextPlaat .container .row .col-md-6 .richtext {padding: 0 var(--Sz2);} .container-fluid .grid .TxPl .container .row .col-md-6 .richtext {padding-left: 0;} .container-fluid .grid .TxPl .container .row .col-md-6 .richtext p:last-child, .container-fluid .grid .PlTx .container .row .col-md-6 .richtext p:last-child {margin-bottom: 0;} .container-fluid .grid .PlTx .container .row .col-md-6 .richtext {padding-right: 0;} .container-fluid .grid .TextPlaat .container .row .col-md-6 .image {margin-bottom: 0px;} .container-fluid .grid .PlTx .container .row .col-md-6:first-child {order: 2;} .container-fluid .grid .PlTx .container .row .col-md-6:last-child {order: 1; position: relative; left: calc(0px - var(--Sz01));} /* --------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) {.container-fluid .grid .container .row .col-md-3, .container-fluid .grid .container .row .col-md-4, .container-fluid .grid .container .row .col-md-6 {padding: 0 var(--Sz0) var(--Sz0) var(--Sz0) !important; left: 0 !important;} .container-fluid .grid .container .row .col-md-12 {padding: 0 calc(var(--Sz1) - var(--Sz01)) !important;} .container-fluid .grid .container .row .col-md-3:last-child, .container-fluid .grid .container .row .col-md-4:last-child, .container-fluid .grid .container .row .col-md-6:last-child {padding-bottom: 0px !important; margin-bottom: calc(0px - var(--Sz0)) !important;} .container-fluid .grid .PlTx .container .row .col-md-6:first-child, .container-fluid .grid .TxPl .container .row .col-md-6:first-child {order: 2;} .container-fluid .grid .PlTx .container .row .col-md-6:last-child, .container-fluid .grid .TxPl .container .row .col-md-6:last-child {order: 1; left: 0 !important;} .container-fluid .grid .TextPlaat .container .row .col-md-6 .richtext {padding: 0 !important;} .container-fluid .grid .TextPlaat .container .row .col-md-6 .image {margin-bottom: calc(var(--Sz0) + var(--Sz0) + var(--Sz01));} .container-fluid .grid .TextPlaat, .container-fluid .grid .container .row .col-md-12 {margin-bottom: -50px !important;} .container-fluid .grid .intro .container .row .richtext {width: 100%; margin-top: 0;} .container-fluid .grid .intro .container .row .richtext h3 {font-size: 40px !important; line-height: 40px !important;} .container-fluid .grid .intro .container .row .richtext p {font-size: 18px !important; line-height: 1.5 !important;} .container-fluid .grid .boxCenter .container .row .richtext {text-align: left;}} /* --------------------------------------------------------------------------------------------------------- */ /* -- LIST B ----------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------- */ .container-fluid .grid .ListB .container .row .col-md-4 {padding: 0 var(--Sz04); position: relative;} .container-fluid .grid .ListB .container .row .col-md-4 .thumb {padding: var(--Sz0) var(--Sz0) var(--Sz09) var(--Sz0); position: relative; border-radius: var(--BrSmall);} .container-fluid .grid .ListB .container .row .col-md-4 .thumb.block-hover {background: white; cursor: pointer; box-shadow: var(--NoBoxShadow); transform: scale(1); transition: var(--an1); z-index: 0;} .container-fluid .grid .ListB .container .row .col-md-4 .thumb.block-hover:hover {box-shadow: var(--BoxShadow); transform: scale(1.1); color: var(--LightBlue); z-index: 10;} .container-fluid .grid .ListB .thumb h4.display-block {font-size: 19px !important; color: var(--LightBlue) !important; line-height: 24px !important; font-family: var(--FontA); display: flex !important; justify-content: flex-start !important; align-items: center;} .container-fluid .grid .ListB .thumb h4.display-block .icon {margin-right: var(--Sz01); width: 50px; height: auto;} .container-fluid .grid .ListB .thumb p {padding-left: calc(60px + var(--Sz01)); font-size: 14px !important;} /* --------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) {.container-fluid .grid .ListB .container .row {margin-bottom: var(--Sz0) !important;} .container-fluid .grid .ListB .container .row .col-md-4 {margin-bottom: -10px !important; position: relative;} .container-fluid .grid .ListB .container .row .col-md-4::after {content: ""; display: block; width: 100% !important; height: 1px; background: #dddddd!important; margin-bottom: var(--Sz01);} .container-fluid .grid .ListB .thumb h4.display-block {align-items: flex-start;} .container-fluid .grid .ListB .container .row .col-md-4 .thumb {padding: 0px !important;} .container-fluid .grid .ListB .container .row .col-md-4 .thumb.block-hover {box-shadow: var(--NoBoxShadow); transform: scale(1); transition: none;} .container-fluid .grid .ListB .container .row .col-md-4 .thumb.block-hover:hover {box-shadow: var(--NoBoxShadow); transform: scale(1); transition: none;}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) {.container-fluid .grid .ListB .thumb h4.display-block {flex-wrap: wrap; position: relative; left: -10px;} .container-fluid .grid .ListB .thumb h4.display-block .icon {margin-right: 0px; position: relative; left: 10px; margin-bottom: var(--Sz01);} .container-fluid .grid .ListB .thumb p {padding-left: 0px;}} /* --------------------------------------------------------------------------------------------------------- */ /* -- LIST C ----------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------- */ .container-fluid .ListC {background: var(--LightBlue); color: white; padding: var(--Sz01) 0; box-shadow: var(--BoxShadow); position: relative; z-index: 2;} .container-fluid .ListC .container .row.pad-3-t.pad-3-b {padding: 0px !important;} .container-fluid .ListC .container .row.pad-3-t.pad-3-b ul.list-links-inline {display: flex; justify-content: center; align-items: center; align-content: center; margin-bottom: 0px !important; padding: var(--Sz0);} .container-fluid .ListC .container .row.pad-3-t.pad-3-b ul.list-links-inline li::before {content: "" !important;} .container-fluid .ListC .container .row.pad-3-t.pad-3-b ul.list-links-inline li a {color: white;} .container-fluid .ListC .container .row.pad-3-t.pad-3-b ul.list-links-inline li a .icon {position: relative; top: -2px;} /* --------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) {.container-fluid .ListC .container .row.pad-3-t.pad-3-b ul.list-links-inline {margin-bottom: var(--Sz1) !important; padding: var(--Sz0); flex-wrap: wrap;} .container-fluid .ListC .container .row .col-md-12:first-child {left: 0px !important;} .container-fluid .ListC .container .row.pad-3-t.pad-3-b ul.list-links-inline li {margin-bottom: var(--Sz0);} .container-fluid .ListC .container .row.pad-3-t.pad-3-b ul.list-links-inline li a {font-size: 13px;}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1280px) {.container-fluid .ListC .container .row.pad-3-t.pad-3-b ul.list-links-inline {margin-bottom: 0 !important; padding: var(--Sz0); flex-wrap: wrap;}} /* --------------------------------------------------------------------------------------------------------- */ /* -- LIST D ----------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------- */ .container-fluid .ListD .image {margin-bottom: var(--Sz0) !important;} .container-fluid .ListD .image a {border-radius: var(--BrBig); box-shadow: var(--BoxShadow); display: flex; transition: var(--an1); transform: scale(1);} .container-fluid .ListD .image a:hover {transform: scale(1.1);} .container-fluid .grid .ListD .container .row .col-md-3 .richtext h4 {color: #006fcf; font-size: 17px !important; font-family: var(--FontA); margin-bottom: 0 !important;} .container-fluid .grid .ListD .container .row .col-md-3 .richtext p {color: grey; font-size: 14px !important;} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1280px) {.container-fluid .ListD .col-md-3 {flex: 0 0 50%; max-width: 50%;} .container-fluid .ListD .col-md-3:nth-child(3), .container-fluid .ListD .col-md-3:nth-child(4) {transform: translateX(-14px) translateY(30px);}} /* --------------------------------------------------------------------------------------------------------- */ /* -- LIST E ----------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------- */ .container-fluid .ListE h2 {color: var(--LightBlue); font-size: 37px !important; line-height: 34px !important; margin-bottom: var(--Sz02) !important; padding-left: 50px; position: relative;} .container-fluid .ListE h2 span.pad-1-l {padding: 0 !important;} .container-fluid .ListE h2 span.icon.icon-lg::before {color: var(--LightBlue) !important; font-size: 37px !important; position: absolute; top: -1px; left: 0px;} .container-fluid .ListE p {padding-left: 50px;} /* --------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) {.container-fluid .ListE h2 {font-size: 27px !important; line-height: 24px !important; margin-bottom: var(--Sz01) !important; padding-left: 40px;} .container-fluid .ListE h2 span.icon.icon-lg::before {font-size: 27px !important;} .container-fluid .ListE p {padding-left: 40px;}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) {.container-fluid .ListE h2 {font-size: 32px !important; line-height: 29px !important; margin-bottom: var(--Sz01) !important; padding-left: 45px;} .container-fluid .ListE h2 span.icon.icon-lg::before {font-size: 32px !important;} .container-fluid .ListE p {padding-left: 45px;}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1024px) and (max-width: 1279px) {} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1280px) {} /* --------------------------------------------------------------------------------------------------------- */ /* -- Rounded Corner Card ---------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------- */ .container-fluid .roundedcorner-card .card.card-rounded {background: white; border-radius: var(--BrSmall) !important; cursor: pointer; box-shadow: var(--SmallBoxShadow); padding: var(--Sz0) !important; transition: var(--an2); transform: scale(1.0) translateY(0); border: 1px transparent solid;} .container-fluid .roundedcorner-card .card.card-rounded:hover {box-shadow: var(--BoxShadow); border: 1px white solid; transform: scale(1.1) translateY(calc(0px - var(--Sz0)));} .container-fluid .roundedcorner-card .card.card-rounded p.heading-4 {margin: 0; padding: 0; font-size: 22px !important; color: var(--LightBlue) !important; line-height: 24px !important; font-family: var(--FontA); margin-bottom: var(--Sz04);} .container-fluid .roundedcorner-card .card.card-rounded p.body-1 {font-size: 14px !important; line-height: 1.5 !important;} .container-fluid .roundedcorner-card .card.card-rounded ul.list-links-inline-separator {margin-bottom: calc(0px - var(--Sz01)) !important;font-size: 14px !important;} .container-fluid .roundedcorner-card .card.card-rounded ul.list-links-inline-separator li:not(:last-child):after {color: rgb(238, 238, 238);content: "|"; font-size: 1.1rem; font-weight: 100; margin-left: 0.625rem; margin-right: 0.4rem;} .container-fluid .roundedcorner-card .card.card-rounded ul.list-links-inline-separator li::before {display: none;} /* --------------------------------------------------------------------------------------------------------- */ /* -- BUTTONS ---------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------- */ .container-fluid a { color: #006fcf; text-decoration: none;} .container-fluid a:hover { color: #00175a; text-decoration: none;} .container-fluid a.btn-text::after, .container-fluid a.btn-text-white::after {content: ""; width: 18px; height: 14px;background-image: url("https://www.americanexpress.com/content/dam/amex/nl/assets/bubl/img/ArrowBlue1Right.svg"); display: inline-block; background-size: contain; background-position: center center; background-repeat: no-repeat; margin-left: var(--Sz02);transition: var(--an2); position: relative; top: 2px;} .container-fluid a.btn-text:hover::after, .container-fluid a.btn-text-white:hover::after {background-image: url("https://www.americanexpress.com/content/dam/amex/nl/assets/bubl/img/ArrowBlue2Right.svg"); margin-left: var(--Sz01);} .container-fluid a.btn-text-white { color: #fff; opacity: 1;} .container-fluid a.btn-text-white:hover { color: #fff; opacity: 0.8;} .container-fluid a.btn-text-white::after, .container-fluid a.btn-text-white:hover::after {background-image: url("https://www.americanexpress.com/content/dam/amex/nl/assets/bubl/img/ArrowWitRight.svg");} .container-fluid .btn {font-weight: 400; font-family: var(--FontB); font-size: 17px; min-width: 10px !important; max-width: initial !important; -webkit-font-smoothing: antialiased !important; font-style: normal !important;} .container-fluid .btn::after {display: none;} .container-fluid .btn {color: #fff; background-color: #006fcf; border: 2px solid #006fcf;} .container-fluid .btn:hover {color: #006fcf; background-color: transparent; border: 2px solid #006fcf;} .container-fluid .btn-white {color: #006fcf; background-color: #fff; border: 2px solid #fff;} .container-fluid .btn-white:hover {color: #fff; background-color: transparent; border: 2px solid #fff;} .container-fluid .btn-primary {color: #fff; background: #006fcf;} .container-fluid .btn-primary:hover {color: #fff; background: #00175a!important;} .container-fluid .btn-secondary {color: #006fcf; background-color: transparent; border: 2px solid #006fcf !important;} .container-fluid .btn-secondary:hover {color: #fff; background-color: #006fcf; border: 2px solid #006fcf !important;}.container-fluid .btn-white-secondary {color: #fff; background-color: transparent; border: 2px solid #fff !important;} .container-fluid .btn-white-secondary:hover {color: #006fcf; background-color: #fff !important; border: 2px solid #fff !important;} .container-fluid .btn-tertiary {color: #006fcf; background-color: transparent; border: 2px solid transparent !important;} .container-fluid .btn-tertiary:hover {color: #006fcf; background-color: rgba(0, 0, 0, 0.1); border: 2px solid transparent !important;} .container-fluid .button {display: flex;} .container-fluid .grid .TextPlaat .container .row .col-md-6 .button {margin-top: var(--Sz01) !important;} .container-fluid .grid .TextPlaat.PlTx .container .row .col-md-6 .button:first-child {padding: 0 var(--Sz2);} .container-fluid .Hero-custom .btn:hover, .container-fluid .hero-carousel .btn:hover, .container-fluid .list-carousel .btn:hover, .container-fluid .App .btn:hover {color: #006fcf; background-color: #fff; border: 2px solid #fff;} .container-fluid .ButtonStack {display: flex;} .container-fluid .ButtonStack a:last-child {margin-left: var(--Sz01);} /* --------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) {.container-fluid .btn {font-size: 14px;} .container-fluid .grid .TextPlaat.PlTx .container .row .col-md-6 .button:first-child {padding: 0;}} /* --------------------------------------------------------------------------------------------------------- */ /* -- Carousel --------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------- */ .container-fluid .list-carousel ul.carousel-inner li.hero {padding: var(--Sz4);} .container-fluid .list-carousel ul.carousel-inner li.hero h2 {width: 80%; margin: 0 auto !important; padding-bottom: var(--Sz0)!important; font-size: 48px !important; line-height: 45px !important; -webkit-font-smoothing: antialiased !important; font-style: normal !important;} .container-fluid .list-carousel ul.carousel-inner li.hero h3 {width: 80%; margin: 0 auto !important;} .container-fluid .list-carousel ul.carousel-inner li.hero .margin-3-t {margin-top: var(--Sz1) !important; } .container-fluid .list-carousel .carousel-controls .carousel-control {transform: translateY(-10px) !important;} .container-fluid .list-carousel .carousel-controls .carousel-control:first-child {left: calc(var(--Sz0) + var(--Sz01)); position: relative;} .container-fluid .list-carousel .carousel-controls .carousel-control {right: calc(var(--Sz0) + var(--Sz01)); position: relative;} .container-fluid .list-carousel .carousel-controls ol.carousel-indicators {background-color: rgba(0,0,0,.5); border-radius: var(--BrSmall); padding: var(--Sz01) var(--Sz1); bottom: var(--Sz0);} /* --------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) {.container-fluid .list-carousel ul.carousel-inner li.hero {padding: var(--Sz1); padding-bottom: var(--Sz4);} .container-fluid .list-carousel ul.carousel-inner li.hero h2 {width: 100%; font-size: 30px !important; line-height: 30px !important;} .container-fluid .list-carousel ul.carousel-inner li.hero h3 {width: 100%; font-size: 16px !important;}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) {} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1024px) and (max-width: 1279px) {} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1280px) {} /* --------------------------------------------------------------------------------------------------------- */ /* -- BANNER A --------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------- */ .container-fluid .BannerA {position: relative;} .container-fluid .BannerA::before {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(0, 111, 207); background: linear-gradient(90deg, rgba(0, 111, 207, 1) 0%, rgba(0, 111, 207, 0) 100%); z-index: 1;} .container-fluid .BannerA .richtext.parbase {position: relative; z-index: 2;} .container-fluid .BannerA .col-md-6.margin-0-tb {padding: var(--Sz2) 0 var(--Sz2) var(--Sz0) !important;} .container-fluid .BannerA h3 {font-size: 60px !important; line-height: 60px !important;} /* --------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) {.container-fluid .BannerA::before {background: rgb(0, 111, 207); background: linear-gradient(90deg, rgba(0, 111, 207, 1) 0%, rgba(0, 111, 207, 0.2) 100%);} .container-fluid .BannerA h3 {font-size: 30px !important; line-height: 30px !important;} .container-fluid .BannerA .row .col-md-6.margin-0-tb {margin-bottom: -20px !important; padding-bottom: 0 !important;}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) {.container-fluid .BannerA::before {background: rgb(0, 111, 207); background: linear-gradient(90deg, rgba(0, 111, 207, 1) 0%, rgba(0, 111, 207, 0.2) 100%);} .container-fluid .BannerA .col-md-6 {flex: 0 0 80%; max-width: 80%;} .container-fluid .BannerA .col-md-6:last-child {display: none;}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1024px) and (max-width: 1279px) {} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1280px) {} /* --------------------------------------------------------------------------------------------------------- */ /* -- BANNER B --------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------- */ .container-fluid .BannerB {position: relative; border-radius: var(--BrSmall); box-shadow: var(--BoxShadow); overflow: hidden;} .container-fluid .BannerB::before {content: ''; position: absolute; z-index: 1; background: rgb(0, 111, 207); background: linear-gradient(90deg, rgba(0, 111, 207, 1) 0%, rgba(0, 111, 207, 0) 100%); left: 0; top: 0; width: 100%; height: 100%;} .container-fluid .BannerB .richtext.parbase {position: relative; z-index: 2;} .container-fluid .BannerB .col-md-6.margin-0-tb {padding: var(--Sz1) 0 var(--Sz0) var(--Sz3) !important;} .container-fluid .BannerB h3 {font-size: 60px !important; line-height: 60px !important;} /* --------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) {.container-fluid .BannerB {width: calc(100% + 22px); margin-bottom: var(--Sz2);} .container-fluid .BannerB::before {background: linear-gradient(90deg, rgba(0, 111, 207, 1) 0%, rgba(0, 111, 207, 0.2) 100%);} .container-fluid .BannerB h3 {font-size: 30px !important; line-height: 30px !important;} .container-fluid .BannerB .row .col-md-6.margin-0-tb {margin-bottom: -20px !important; padding-bottom: 0 !important;}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) {.container-fluid .BannerB::before {background: rgb(0, 111, 207); background: linear-gradient(90deg, rgba(0, 111, 207, 1) 0%, rgba(0, 111, 207, 0.2) 100%);} .container-fluid .BannerB .col-md-6 {flex: 0 0 80%; max-width: 80%;} .container-fluid .BannerB .col-md-6:last-child {display: none;}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1024px) and (max-width: 1279px) {} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1280px) {} /* --------------------------------------------------------------------------------------------------------- */ /* -- Multi-Card Carousel ---------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------- */ .container-fluid .carousel-multi-card {margin: 0 !important;} .container-fluid .carousel-multi-card ul.carousel-inner li.carousel-item {background-color: white !important; padding: var(--Sz2) var(--Sz5) var(--Sz4) var(--Sz5);} .container-fluid .carousel-multi-card ul.carousel-inner li.carousel-item .card {box-shadow: var(--SmallBoxShadow);} .container-fluid .carousel-multi-card ul.carousel-inner li.carousel-item .card:hover {transform: scale(1.15);} .container-fluid .carousel-multi-card ul.carousel-inner li.carousel-item .card .pad-2 {padding: var(--Sz0) !important; margin-bottom: calc( 0px - var(--Sz0) );} .container-fluid .carousel-multi-card ul.carousel-inner li.carousel-item .card .pad-2 p.heading-3 {margin: 0; padding: 0; font-size: 22px !important; line-height: 24px !important; font-family: var(--FontA); margin-bottom: var(--Sz04);} .container-fluid .carousel-multi-card ul.carousel-inner li.carousel-item .card .pad-2 p.body-1 {font-size: 14px !important; line-height: 1.5 !important;} /* --------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) {.container-fluid .carousel-multi-card {width: 100vw !important; overflow: hidden;} .container-fluid .carousel-multi-card ul.carousel-inner li.carousel-item {padding: var(--Sz0) var(--Sz1) var(--Sz1) var(--Sz1); overflow: hidden;} .container-fluid .carousel-multi-card ul.carousel-inner li.carousel-item .row.flex-no-wrap {width: 60%; position: relative; left: -24px;} .container-fluid .carousel-multi-card ul.carousel-inner li.carousel-item .card img.fluid {width: 100%; height: 150px; object-fit: cover;} .container-fluid .carousel-multi-card ul.carousel-inner li.carousel-item .pad-2 p.pad-1-b.heading-3 {font-size: 14px !important; line-height: 1.3 !important; text-align: left; margin-bottom: -10px !important;} .container-fluid .carousel-multi-card ul.carousel-inner li.carousel-item .pad-2 p.body-1.dls-black {font-size: 12px !important; line-height: 1.3 !important; text-align: left;} .container-fluid .carousel-multi-card .carousel-controls {position: relative; bottom: -30px;} .container-fluid .carousel-multi-card .carousel-controls ol.carousel-indicators {position: relative; top: -29px;}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) {} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1024px) and (max-width: 1279px) {} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1280px) {} /* --------------------------------------------------------------------------------------------------------- */ /* -- Offer ------------------------------------------------------------------------------------------------ */ /* --------------------------------------------------------------------------------------------------------- */ .container-fluid .card {background-color: white; border-radius: var(--BrSmall); overflow: hidden; box-shadow: var(--NoBoxShadow); transition: var(--an2); cursor: pointer; transform: scale(1.0); z-index: 1;} .container-fluid .card:hover {box-shadow: var(--BoxShadow); transform: scale(1.1); z-index: 5;} .container-fluid .card .pad .heading-4.offer-header {margin-bottom: var(--Sz01) !important;} .container-fluid .card .pad .heading-4.offer-header p {font-size: 19px !important; color: var(--LightBlue) !important; line-height: 24px !important; font-family: var(--FontA);} .container-fluid .card .pad .body-1.offer-desc {margin-bottom: var(--Sz0) !important;} .container-fluid .card .pad .body-1.offer-desc p {font-size: 14px !important; line-height: 1.5 !important;} .container-fluid .card .pad .margin-b {margin: 0 0 0 0 !important;} /* --------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) {} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) {.container-fluid .card .pad a.btn {font-size: 14px; padding: 10px !important;}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1024px) and (max-width: 1279px) {} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1280px) {} /* --------------------------------------------------------------------------------------------------------- */ /* -- Showcase Card ---------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------- */ .container-fluid .showcase-card {position: relative; z-index: 1; border-radius: var(--BrSmall) !important; overflow: hidden; box-shadow: var(--NoBoxShadow); transition: var(--an2); transform: scale(1);} .container-fluid .showcase-card:hover {z-index: 3; box-shadow: var(--BoxShadow); transform: scale(1.1);} .container-fluid .showcase-card .card.card-relative.pad-responsive {padding: var(--Sz1) !important;} .container-fluid .showcase-card .heading-3 {font-size: 28px !important; line-height: 28px !important; font-family: var(--FontA); -webkit-font-smoothing: antialiased !important; font-style: normal !important;} .container-fluid .showcase-card .body-1 {font-size: 14px !important; -webkit-font-smoothing: antialiased !important; font-style: normal !important;} .container-fluid .showcase-card .stack-1 {padding: 0 !important; margin: 0 !important;} .container-fluid .showcase-card .stack-1 a.btn.btn-block.margin-auto-lr {width: 100% !important; max-width: 100% !important; min-width: 100% !important; margin: 0 !important;} /* --------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) {} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) {.container-fluid .showcase-card .card.card-relative.pad-responsive {padding: var(--Sz0) !important;} .container-fluid .showcase-card .heading-3 {font-size: 22px !important; line-height: 22px !important;} .container-fluid .showcase-card a.btn {font-size: 14px; padding: 10px !important;}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1024px) and (max-width: 1279px) {} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1280px) {} /* --------------------------------------------------------------------------------------------------------- */ /* -- Video ------------------------------------------------------------------------------------------------ */ /* --------------------------------------------------------------------------------------------------------- */ .container-fluid .video.parbase {border-radius: var(--BrSmall); overflow: hidden; box-shadow: var(--BoxShadow);} .container-fluid .video.parbase .col-sm-12 {margin: 0; padding: 0;} /* --------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) {.container-fluid .video.parbase {width: calc(100% + 22px) !important; margin-bottom: 50px !important;}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) {} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1024px) and (max-width: 1279px) {} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1280px) {} /* --------------------------------------------------------------------------------------------------------- */ /* -- Collapsible Panel ------------------------------------------------------------------------------------ */ /* --------------------------------------------------------------------------------------------------------- */ .container-fluid .collapsible-panel .border.bordered {border: 1px solid #ebeeee; border-bottom: 0px solid transparent;} .container-fluid .collapsible-panel:first-child .border.bordered {border-top-left-radius: var(--BrSmall); border-top-right-radius: var(--BrSmall); overflow: hidden;} .container-fluid .collapsible-panel:last-child .border.bordered {border-bottom-left-radius: var(--BrSmall); border-bottom-right-radius: var(--BrSmall); border-bottom: 1px solid #ebeeee; overflow: hidden;}.container-fluid .collapsible[aria-expanded="true"] {background-color: var(--LightBlue); color: whitesmoke;} .container-fluid .collapsible[aria-expanded="true"] .icon, .container-fluid .collapsible[aria-expanded="true"] .collapsible-caret {color: whitesmoke;} .container-fluid .collapsible-panel .border.bordered h3 {margin-bottom: 0; font-family: var(--FontB); font-size: 16px !important; font-weight: 300 !important;} .container-fluid .collapsible-panel .border.bordered h3 .accordion-content {background: #f1f7fc !important;} .container-fluid .collapsible-panel .border.bordered h3 .accordion-content p {font-size: 14px !important; font-weight: 400 !important;} .container-fluid .collapsible-panel .border.bordered h3 .accordion-content:last-child p {margin-bottom: 0; padding-bottom: 0;} /* --------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) {.container-fluid .collapsible-panel .border.bordered h3 .accordion-content:last-child p{margin-bottom: var(--Sz2);} } /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) {} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1024px) and (max-width: 1279px) {} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1280px) {} /* --------------------------------------------------------------------------------------------------------- */ /* -- SPECIAL F -------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------- */ .container-fluid .SpecialF .row {transform: scale(0.85);} .container-fluid .SpecialF .row .col-md-6:first-child {display: flex; align-items: center; order: 2;} .container-fluid .SpecialF .col-md-6:first-child h3 {margin-bottom: var(--Sz1) !important;} .container-fluid .SpecialF .row .col-md-6:first-child p {display: none;} .container-fluid .SpecialF .row .col-md-6:last-child {padding: 0 !important; padding-right: var(--Sz3) !important; order: 1;} .container-fluid .SpecialF .row .col-md-6:last-child .image {margin: 0 !important;} .container-fluid .SpecialF .row .col-md-6:last-child .image img {width: 100%; max-width: 100%; min-width: 100%; box-shadow: var(--BoxShadow); border-radius: 25px;} .container-fluid .SpecialF .col-md-6:first-child ul.list-links-inline {margin-bottom: 0 !important;} .container-fluid .SpecialF .col-md-6:first-child ul.list-links-inline li {margin-right: var(--Sz0);} .container-fluid .SpecialF .col-md-6:first-child ul.list-links-inline li::before {content: ""; color: transparent; display: none; width: 0px; margin-left: 0px; font-size: 0px;} .container-fluid .SpecialF .col-md-6:first-child .icon {color: var(--LightBlue); transform: scale(0.6); position: relative; left: -10px; top: -1px;} .container-fluid .SpecialF .col-md-6:first-child a.btn-text {display: inline-block; height: 52px !important; padding: 10px 0; position: relative; top: -21px;} /* --------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) {.container-fluid .SpecialF .row {transform: scale(1); margin-bottom: -100px;} .container-fluid .SpecialF .row .col-md-6:first-child {padding-top: var(--Sz1) !important;} .container-fluid .SpecialF .row .col-md-6:last-child {margin-top: var(--Sz0) !important;} .container-fluid .SpecialF .row .col-md-6:last-child .image img {width: calc(100% + 40px) !important; max-width: calc(100% + 40px) !important; min-width: calc(100% + 40px) !important; border-radius: 5%; position: relative; left: 20px; top: -20px;} .container-fluid .SpecialF .col-md-6:first-child ul.list-links-inline li {margin-bottom: var(--Sz1);}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) {.container-fluid .SpecialF .row {transform: scale(1);} .container-fluid .SpecialF .row .col-md-6:last-child .image img {border-radius: 5%;} .container-fluid .SpecialF .row .col-md-6:first-child {padding-left: 0 !important;} .container-fluid .SpecialF .col-md-6:first-child h3 {font-size: 30px !important; line-height: 1.1 !important; }} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1024px) and (max-width: 1279px) {} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1280px) {} /* --------------------------------------------------------------------------------------------------------- */ /* -- Tabs ------------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------- */ .container-fluid .tabscomp {box-shadow: var(--BoxShadow); border-radius: var(--BrSmall); margin-top: var(--Sz1); margin-bottom: var(--Sz1); overflow: hidden; border: 1px solid #E0E0E0;} .container-fluid .tabscomp .tabs.border {border-radius: var(--BrSmall); border: 0px solid #ecedee;} .container-fluid .tabscomp .tab-menu .tab-link {color: #006fcf; display: flex; align-items: center; justify-content: center; flex: 1; flex-direction: column; padding: 1.25rem; position: relative; text-align: center; border-right: 1px solid #E0E0E0; transition: var(--an1); background-color: #EEF5FB;} .container-fluid .tabscomp .tab-menu .tab-link::before {content: ""; position: absolute; width: 100%; height: 50%; background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); left: 0; bottom: 0; z-index: 2; opacity: 0.05;} .container-fluid .tabscomp .tab-menu .tab-link[aria-selected=true] {background: #fff; color: #00175a; pointer-events: auto; z-index: 1; border-top-left-radius: var(--BrSmall); border-top-right-radius: var(--BrSmall); border-top: 3px #00175a solid !important; margin-bottom: -2px; box-shadow: var(--SmallBoxShadow);} .container-fluid .tabscomp .tab-menu .tab-link[aria-selected=true]::before {content: ""; height: 40px; background: white; bottom: -40px; opacity: 1;} .container-fluid .tabscomp .tab-content {border-top: 1px solid #E0E0E0; padding: var(--Sz1) !important; padding-bottom: var(--Sz01) !important; border-bottom-left-radius: var(--BrSmall); border-bottom-right-radius: var(--BrSmall);} /* --------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) {.container-fluid .tabscomp {margin-top: 0; margin-bottom: var(--Sz2); width: calc(100% + 20px);} .container-fluid .tabscomp .tab-menu {z-index: 1 !important; position: relative; top: 0px; overflow: initial;} .container-fluid .tabscomp .tab-menu .tab-link {padding: var(--Sz0); font-size: 12px !important; line-height: 16px !important;} .container-fluid .tabscomp .tab-menu .tab-link[aria-selected=true] {z-index: 99; position: relative;} .container-fluid .tabscomp .tab-menu .tab-link[aria-selected=true]::before {content: ""; position: absolute; left: 0; bottom: -30px; height: 35px; background: white;} .container-fluid .tabscomp .tab-content {position: relative !important; z-index: 0 !important;}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) {.container-fluid .tabscomp {margin-top: 0; margin-bottom: var(--Sz2); width: calc(100% + 20px);} .container-fluid .tabscomp .tab-menu {z-index: 1 !important; position: relative; top: 0px; overflow: initial;} .container-fluid .tabscomp .tab-menu .tab-link[aria-selected=true] {z-index: 99; position: relative;} .container-fluid .tabscomp .tab-menu .tab-link[aria-selected=true]::before {content: ""; position: absolute; left: 0; bottom: -30px; height: 35px; background: white;} .container-fluid .tabscomp .tab-content {position: relative !important; z-index: 0 !important;}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1024px) and (max-width: 1279px) {} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1280px) {} /* --------------------------------------------------------------------------------------------------------- */ /* -- Banner C --------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------- */ .container-fluid .BannerC {background: rgb(194, 219, 243); background: linear-gradient(0deg, rgba(194, 219, 243, 1) 0%, rgba(255, 255, 255, 1) 100%);} .container-fluid .BannerC .row {width: 100%; max-width: 500px; text-align: center; padding: var(--Sz3) 0; margin: 0 auto;} .container-fluid .BannerC .row .richtext {padding: 0 var(--Sz0);} .container-fluid .BannerC .row .image {margin: var(--Sz1) auto; box-shadow: var(--BoxShadow); border-radius: 20px;} .container-fluid .BannerC .row .button {display: flex; justify-content: center;} .container-fluid .BannerC .row .button .btn {margin-bottom: var(--Sz0) !important;} /* --------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) {.container-fluid .BannerC .row {padding: var(--Sz1) 0 var(--Sz2) 0;} .container-fluid .BannerC .container .row .col-md-12:first-child {left: 0 !important;}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) {.container-fluid .BannerC .container .row .col-md-12:first-child {left: 0 !important;}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1024px) and (max-width: 1279px) {} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1280px) {} /* --------------------------------------------------------------------------------------------------------- */ /* -- App -------------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------- */ .container-fluid .App {margin: var(--Sz2) 0; position: relative;} .container-fluid .App::before {content: ""; position: absolute; background: white; width: 100%; height: var(--Sz4); z-index: 1; top: -1px; left: 0; pointer-events: none;} .container-fluid .App::after {content: ""; position: absolute; background: rgb(0, 0, 0); background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); width: 100%; height: 50%; opacity: 0.8; z-index: 3; left: 0; bottom: 0; pointer-events: none;} .container-fluid .App .container .row .col-md-6:first-child {display: flex; align-items: flex-end; position: relative; z-index: 2;} .container-fluid .App .container .row .col-md-6 .image {margin: 0 auto !important; width: 80%;} .container-fluid .App .container .row .col-md-6:last-child {display: flex; align-items: center; position: relative; z-index: 4;} .container-fluid .App .container .row .col-md-6:last-child .richtext {margin-top: var(--Sz4);} .container-fluid .App ul.list-links-inline {margin-bottom: calc(0px - var(--Sz0)) !important; margin-top: var(--Sz1);} .container-fluid .App ul.list-links-inline li {margin-bottom: var(--Sz0) !important;} .container-fluid .App ul.list-links-inline li::before {content: "";}.container-fluid .App ul.list-links-inline li .btn a:hover {color: var(--LightBlue) !important;} /* --------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) {.container-fluid .App::before {display: none;} .container-fluid .App .container .row .col-md-6:first-child {order: 2;} .container-fluid .App .container .row .col-md-6:last-child {order: 1; text-align: center;} .container-fluid .App .container .row .col-md-6:last-child .richtext {margin: 0; padding: var(--Sz2) var(--Sz1) var(--Sz1) var(--Sz1);}.container-fluid .App {overflow: hidden; width: 100vw;} .container-fluid .App .container .row .col-md-6 .richtext.parbase {padding: var(--Sz1) 0; transform: translateX(0);} .container-fluid .App .container .row .col-md-6 .image.parbase {padding: var(--Sz0) 0 0 0; transform: translateX(0) translateY(80px) scale(1.3);} .container-fluid .App::after {height: 30%;}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) {.container-fluid .App::before {display: none;} .container-fluid .App .container .row .col-md-6 .image {width: 100%;} .container-fluid .App .container .row .col-md-6:last-child .richtext {margin: 0; padding: var(--Sz1) 0;} .container-fluid .App {width: 100vw; overflow: hidden;} .container-fluid .App .container .row .col-md-6 .image.parbase {transform: translateX(-15px) translateY(-40px) scale(1.2);}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1024px) and (max-width: 1279px) {.container-fluid .App .container .row .col-md-6 .image {width: 100%;} .container-fluid .App .container .row .col-md-6:last-child .richtext {padding: var(--Sz1) 0;}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1280px) {} /* --------------------------------------------------------------------------------------------------------- */ /* -- Trends & Insights ------------------------------------------------------------------------------------ */ /* --------------------------------------------------------------------------------------------------------- */ .container-fluid .TrendsInsights {margin: var(--Sz1) 0; position: relative; z-index: 2;} .container-fluid .TrendsInsights .row {position: relative; padding: 0 var(--Sz0);} .container-fluid .TrendsInsights .row::after {content: ""; background: white; width: calc(66.66% - var(--Sz0) - var(--Sz02) - 1px); height: 100%; position: absolute; right: calc(var(--Sz01) + 1px); top: 0px; z-index: 1; box-shadow: var(--BoxShadow); border-radius: var(--BrSmall);} .container-fluid .TrendsInsights .col-md-4.margin-0-tb {display: flex; align-items: stretch; width: 33.33%; padding: 0px !important; position: relative; z-index: 2;} .container-fluid .TrendsInsights .col-md-4.margin-0-tb div:not([class]) {width: 100% !important; height: 100% !important;} .container-fluid .TrendsInsights .col-md-4.margin-0-tb .richtext {padding: var(--Sz0) var(--Sz2) var(--Sz0) 0;} .container-fluid .TrendsInsights .col-md-4.margin-0-tb .richtext p:last-child {margin-bottom: 0px !important;} .container-fluid .TrendsInsights .col-md-4.margin-0-tb .showcase-card {width: 100% !important; height: 100% !important;} .container-fluid .TrendsInsights .col-md-4.margin-0-tb .showcase-card, .container-fluid .TrendsInsights .col-md-4.margin-0-tb .showcase-card:hover {position: relative; z-index: 1; border-radius: var(--BrSmall) !important; overflow: hidden; box-shadow: var(--NoBoxShadow); transition: var(--an2); transform: scale(1);} .container-fluid .TrendsInsights .col-md-4.margin-0-tb:nth-child(2) .showcase-card {position: relative; left: var(--Sz01); border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; overflow: hidden;} .container-fluid .TrendsInsights .col-md-4.margin-0-tb:nth-child(2) .showcase-card .card { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; transition: var(--an1);} .container-fluid .TrendsInsights .col-md-4.margin-0-tb:nth-child(3) .showcase-card {border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; overflow: hidden;} .container-fluid .TrendsInsights .col-md-4.margin-0-tb:nth-child(3) .showcase-card .card { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; transition: var(--an1);} .container-fluid .TrendsInsights .col-md-4.margin-0-tb .showcase-card p.heading-3 {font-family: var(--FontA) !important;} /* --------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) {.container-fluid .TrendsInsights .row {margin: 0 !important; padding: 0 !important;} .container-fluid .TrendsInsights .row::after {display: none;} .container-fluid .TrendsInsights .col-md-4.margin-0-tb .richtext {padding: 0;} .container-fluid .TrendsInsights .col-md-4.margin-0-tb:nth-child(2) .showcase-card {left: 0; top: var(--Sz0);} .container-fluid .TrendsInsights .col-md-4.margin-0-tb:nth-child(2) .showcase-card .card { border-top-left-radius: var(--BrSmall) !important; border-top-right-radius: var(--BrSmall) !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; transition: none;} .container-fluid .TrendsInsights .col-md-4.margin-0-tb:nth-child(3) .showcase-card .card {border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-bottom-left-radius: var(--BrSmall) !important; border-bottom-right-radius: var(--BrSmall) !important; transition: none;}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) {.container-fluid .TrendsInsights .col-md-4.margin-0-tb:nth-child(1) {display: flex !important; align-self: center !important;} .container-fluid .TrendsInsights .col-md-4.margin-0-tb .richtext {padding: 0; padding-right: var(--Sz0);} .container-fluid .TrendsInsights .col-md-4.margin-0-tb .richtext h3 {font-size: 22px !important; line-height: 25px !important;} .container-fluid .TrendsInsights .col-md-4.margin-0-tb .richtext p {font-size: 12px !important;} .container-fluid .TrendsInsights .col-md-4.margin-0-tb:nth-child(2) .showcase-card .card { border-top-left-radius: var(--BrSmall) !important; border-top-right-radius: 0 !important; border-bottom-left-radius: var(--BrSmall) !important; border-bottom-right-radius: 0 !important; transition: none;} .container-fluid .TrendsInsights .col-md-4.margin-0-tb:nth-child(3) .showcase-card .card {border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: var(--BrSmall) !important; transition: none;}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1024px) and (max-width: 1279px) {} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1280px) {} /* --------------------------------------------------------------------------------------------------------- */ /* -- Hero D ----------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------- */ .container-fluid .HeroD {padding: var(--Sz4) 0 0 0; margin-bottom: var(--Sz3); position: relative;} .container-fluid .HeroD::before {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0.8; background: rgb(0, 0, 0); background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); z-index: 2;} .container-fluid .HeroD .richtext:first-child {width: 50% !important; margin: 0 auto !important; position: relative; z-index: 2;} .container-fluid .HeroD ul.list-links-inline {margin-bottom: calc(0px - 55px); position: relative; z-index: 2;} .container-fluid .HeroD ul.list-links-inline li::before {content: "";} .container-fluid .HeroD ul.list-links-inline li button {width: 120px; height: 110px; transform: scale(1); transition: var(--an2); box-shadow: var(--BoxShadow); position: relative; z-index: 1; white-space: normal; padding: var(--Sz01) !important; font-size: 12px; line-height: 1.1; border: 0px solid transparent !important; background-color: #fff;} .container-fluid .HeroD ul.list-links-inline li button:hover {transform: scale(1.3); box-shadow: var(--BoxShadow); z-index: 2; background-color: #fff;} .container-fluid .HeroD ul.list-links-inline li button::before {transform: scale(0.7) translateY(-7px);} /* --------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) {.container-fluid .HeroD {padding: var(--Sz1) 0 0 0; margin-bottom: var(--Sz3);} .container-fluid .HeroD::before {opacity: 0.7; background: rgb(0, 0, 0); background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 100%); z-index: 2;} .container-fluid .HeroD .container .row .col-md-12:first-child {left: 0 !important;} .container-fluid .HeroD .richtext:first-child {width: 100% !important;} .container-fluid .HeroD ul.list-links-inline {left: 6px; margin-bottom: calc(0px - 10px);} .container-fluid .HeroD ul.list-links-inline li {margin-bottom: 15px;} .container-fluid .HeroD ul.list-links-inline li button {width: 100px !important; height: 100px;}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) {.container-fluid .HeroD {padding: var(--Sz1) 0 0 0; margin-bottom: var(--Sz3);} .container-fluid .HeroD .container .row .col-md-12:first-child {left: 0 !important;} .container-fluid .HeroD .richtext:first-child {width: 80% !important; margin-bottom: var(--Sz1) !important;} .container-fluid .HeroD ul.list-links-inline li {margin-bottom: 15px; }} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1024px) and (max-width: 1279px) {} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1280px) {} /* --------------------------------------------------------------------------------------------------------- */ /* -- List F ----------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------- */ .container-fluid .ListF {padding: var(--Sz3) 0;} .container-fluid .ListF ul.list-links-inline {margin-bottom: var(--Sz1);} .container-fluid .ListF ul.list-links-inline li::before {content: "";} .container-fluid .ListF ul.list-links-inline li button {width: 120px; height: 110px; transform: scale(1); transition: var(--an2); box-shadow: var(--NoBoxShadow); position: relative; z-index: 1; white-space: normal; padding: var(--Sz01) !important; font-size: 12px; line-height: 1.1; border: 0px solid transparent !important; background-color: #fff;} .container-fluid .ListF ul.list-links-inline li button:hover {transform: scale(1.3); box-shadow: var(--BoxShadow); z-index: 2; background-color: #fff;} .container-fluid .ListF ul.list-links-inline li button::before {transform: scale(0.7) translateY(-7px);} /* --------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) {.container-fluid .ListF {padding: var(--Sz1) 0 !important;} .container-fluid .ListF .container .row .col-md-12:first-child {left: 0 !important;} .container-fluid .ListF ul.list-links-inline {margin-top: var(--Sz1); position: relative; left: 5px;} .container-fluid .ListF ul.list-links-inline li {margin-bottom: 15px;}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) {.container-fluid .ListF {padding: var(--Sz3) 0 var(--Sz1) 0 !important;} .container-fluid .ListF .container .row .col-md-12:first-child {left: 0 !important;} .container-fluid .ListF ul.list-links-inline {margin-top: var(--Sz1); position: relative; left: 5px;} .container-fluid .ListF ul.list-links-inline li {margin-bottom: 15px;}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1024px) and (max-width: 1279px) {.container-fluid .ListF ul.list-links-inline {margin-top: var(--Sz1);} .container-fluid .ListF .container .row .col-md-12:first-child {left: 0 !important;}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1280px) {} /* --------------------------------------------------------------------------------------------------------- */ /* -- Footer ----------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------- */ .container-fluid .FooterA .container .row .col-md-12 .richtext p, .container-fluid .FooterB .container .row .col-md-12 .richtext p, .container-fluid .FooterC .container .row .col-md-12 .richtext p {display: flex; margin: 0 !important; padding: 0 !important; justify-content: flex-end; align-items: center;} .container-fluid .FooterB .container .row .col-md-12 .richtext p, .container-fluid .FooterC .container .row .col-md-12 .richtext p {justify-content: flex-start;} .container-fluid .FooterA img.tagline, .container-fluid .FooterB img.tagline, .container-fluid .FooterC img.tagline {height: var(--Sz0) !important; width: auto !important; margin-right: var(--Sz01);} .container-fluid .FooterB img.tagline,.container-fluid .FooterC img.tagline {margin-right: 0; margin-left: var(--Sz01);} .container-fluid .FooterA img.logo, .container-fluid .FooterB img.logo, .container-fluid .FooterC img.logo {height: var(--Sz1) !important; width: auto !important;} /* --------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) {.container-fluid .FooterA, .container-fluid .FooterB, .container-fluid .FooterC {height: 60px;} .container-fluid .FooterA .container .row .col-md-12, .container-fluid .FooterB .container .row .col-md-12, .container-fluid .FooterC .container .row .col-md-12 {padding: 0 var(--Sz04)!important;} .container-fluid .FooterA .container .row .col-md-12:first-child, .container-fluid .FooterB .container .row .col-md-12:first-child, .container-fluid .FooterC .container .row .col-md-12:first-child {left: 0 !important;}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) {} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1024px) and (max-width: 1279px) {} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1280px) {} /* --------------------------------------------------------------------------------------------------------- */ /* -- Shopbar ---------------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------- */ .container-fluid .ShopBar {position: fixed !important; left: 0; bottom: 0; z-index: 9999 !important; width: 100vw; background-color: white; box-shadow: var(--BoxShadow); transition: top 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);} .container-fluid .ShopBar .container .row.pad-3-t.pad-3-b {padding: var(--Sz0) 0 !important;} .container-fluid .ShopBar .container .col-md-12 div {display: flex !important; justify-content: flex-start !important; align-items: center; position: relative;} .container-fluid .ShopBar .richtext.parbase {margin-left: var(--Sz0);} .container-fluid .ShopBar .richtext.parbase p {margin-bottom: 0 !important; font-size: 14px !important; line-height: 1.2 !important;} .container-fluid .ShopBar .richtext.parbase p b {display: block; color: var(--LightBlue);} .container-fluid .ShopBar .image.parbase .CardArt img {width: auto !important; height: var(--Sz2) !important;box-shadow: var(--BoxShadow);} .container-fluid .ShopBar .button.parbase {position: absolute !important; top: 5px !important; right: -19px !important;} .container-fluid .ShopBar .button.parbase a.margin-1-b {margin-bottom: 0 !important;} /* --------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) {.container-fluid .ShopBar {height: 80px;} .container-fluid .ShopBar .richtext.parbase {opacity: 0;} .container-fluid .ShopBar .image.parbase .CardArt img {position: relative; left: -7px; height: 45px !important;} .container-fluid .ShopBar .button.parbase {top: 0px !important; right: -29px !important;} .container-fluid .ShopBar .button.parbase a.btn.btncomp.display-block.margin-1-b.margin-auto-r {padding: 0 !important; padding-top: 8px !important; height: 44px; width: 200px !important;}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) {} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1024px) and (max-width: 1279px) {} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1280px) {} /* --------------------------------------------------------------------------------------------------------- */ /* -- Drie stappen ----------------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------- */ .container-fluid .grid .ListB.Stappen .container .row .col-md-4 .thumb {position: relative;} .container-fluid .grid .ListB.Stappen .container .row .col-md-4 .thumb span.icon {opacity: 0;} .container-fluid .grid .ListB.Stappen .container .row .col-md-4 .thumb::before {position: absolute; top: 20px; left: 20px; content: "01"; width: calc(var(--Sz1) + var(--Sz02)); height: calc(var(--Sz1) + var(--Sz02)); display: flex; justify-content: center; align-items: center; border-radius: 100px; border: 3px solid var(--LightBlue); color: var(--LightBlue); font-weight: 900;} .container-fluid .grid .ListB.Stappen .container .row .col-md-4:nth-child(2) .thumb::before {content: "02";} .container-fluid .grid .ListB.Stappen .container .row .col-md-4:nth-child(3) .thumb::before {content: "03";} /* --------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) {.container-fluid .grid .ListB.Stappen .container .row .col-md-4 .thumb::before {top: 0px; left: 0px;}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) {} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1024px) and (max-width: 1279px) {} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1280px) {} /* --------------------------------------------------------------------------------------------------------- */ /* -- Modal - content hackz -------------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------------------------------------- */ .container-fluid .ModalContent .BannerHeight {min-height: 250px !important;} .container-fluid .ModalContent .row.pad-3-t.pad-3-b {padding: 0 var(--Sz1) !important; transform: translateX(-10px);} .container-fluid .ModalContent .TextPlaat .row.pad-3-t.pad-3-b {transform: translateX(0px);} .container-fluid .ModalContent .row.pad-3-t.pad-3-b .col-md-12.margin-0-tb .richtext.parbase {padding-left: calc(var(--Sz1) - var(--Sz02) - var(--Sz02));} .container-fluid .ModalContent .intro {padding-left: 0px !important; padding-right: 0px !important;} .container-fluid .ModalContent .intro .icon {padding-right: 15px !important;} /* --------------------------------------------------------------------------------------------------------- */ @media only screen and (max-width: 767px) {.container-fluid .ModalContent .BannerHeight {min-height: 150px !important;} .container-fluid .ModalContent .row.pad-3-t.pad-3-b {padding: var(--Sz02) var(--Sz04) 0 var(--Sz04) !important; margin-bottom: calc(0px - var(--Sz02)) !important;}} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1023px) {} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1024px) and (max-width: 1279px) {} /* --------------------------------------------------------------------------------------------------------- */ @media (min-width: 1280px) {}