.basicBanner .bannerImg { top: 28px; } @media (min-width: 992px) { .basicBanner .bannerImg { display: block; top: 70px; right: 0; width: 424px; height: 260px; } } @media (min-width: 1200px) { .basicBanner .bannerImg { top: 70px; right: 0; width: 541px; height: 332px; } } @media (min-width: 1300px) { .basicBanner .bannerImg { top: 60px; right: 0; width: 565px; height: 347px; } } .basicSwiper .SwiperContent { padding: 0 100px; } .basicSwiper .ant-carousel .slick-prev { position: absolute; top: 50%; } .basicSwiper .ant-carousel .slick-next { position: absolute; top: 50%; } .basicBanner h2, .basicBanner .h2 { width: 615px; } #BarcodeReaderOverview h2 { font-size: 36px; font-family: Oswald-Light; text-align: center; } /* Spanish banner */ .basicBanner.ESBanner { height: 580px; } /* Spanish video container */ .dbrVideo.ESVideo .strengthLine { height: fit-content; padding-bottom: 20px; } /* Spanish */ .basicStrength .strengthLine .disc .orangeAngelList.ESList li { min-width: 156px; margin: 0 0 10px 0; } i.supportIcon { background-size: cover; background: url(../../images/icons/dbr_overview_package.png) no-repeat; display: inline-block; width: 45px; height: 45px; } #dbrOverviewDesktop i.supportIcon { background-image: url(../../images/icons/dbr_overview_package_white.png) !important; } i.c { background-position-y: -35px; } i.c { background-position-y: -35px; } i.cplus { background-position-y: -80px; position: relative; top: 3px; } i.net { background-position-y: -124px; height: 39px; width: 52px; } i.python { background-position-y: -162px; } i.java { background-position-y: -205px; height: 48px; } i.js { background-position-y: 8px; } i.android { background-position-y: -248px; height: 42px; width: 52px; } i.ios { background-position-y: -287px; } i.icon-desktop { background: url(../../images/icons/desktop-computer-1.png) no-repeat center; } i.icon-web { background: url(../../images/icons/network-browser.png) no-repeat center; } i.icon-mobile { background: url(../../images/icons/mobile-phone-1.png) no-repeat center; } i.icon-cordova { background: url(../../images/banner/DBR/cordova.png) no-repeat center; } .whitePlayBtn.orange { width: 50%; padding-bottom: 50%; background: #fe8e146b; } .whitePlayBtn.orange::after { border-top: 30px solid transparent; border-left: 50px solid white; border-bottom: 30px solid transparent; } .f24 { font-size: 24px !important; } .icon-arrow-left { position: absolute; width: 36px; height: 100%; background: url(../../images/icons/arrow-grey-left.png) no-repeat center center; background-size: contain; top: 0px; left: -50px; } .icon-arrow-right { position: absolute; width: 36px; height: 100%; background: url(../../images/icons/arrow-grey-right.png) no-repeat center center; background-size: contain; top: 0px; right: -50px; } .mb55 { margin-bottom: 55px; } .basicPowerful .powerfulList a.router-link { z-index: 1; } a, a:visited, a:active, a:focus { color: #FE8E14; } a.action-button:hover { color: #fe8e14 } .whitePlayBtn { top: 50%; left: 50%; transform: translate(-50%,-50%); border: 2px solid #fe8e14; background: #fe8e1440; } .whitePlayBtn::after { border-left-color: #fe8e14; } .mt200 { margin-top: 200px; } /*#BarcodeReaderOverview .basicFeature .featureBox .featureBoxTop.fb1 { background: url(../../images/banner/DBR/DBR_Featured_1.png) no-repeat; background-size: cover; } #BarcodeReaderOverview .basicFeature .featureBox .featureBoxTop.fb2 { background: url(../../images/banner/DBR/DBR_Featured_2.png) no-repeat; background-size: cover; } #BarcodeReaderOverview .basicFeature .featureBox .featureBoxTop.fb3 { background: url(../../images/banner/DBR/DBR_Featured_3.png) no-repeat; background-size: cover; }*/ #BarcodeReaderOverview .basicFeature .featureBox .featureBoxTop { padding-top: 0; position: relative; } #BarcodeReaderOverview .basicFeature .featureBox .featureBoxTop .featureImg { width: 100%; height: 100%; display: block; } #BarcodeReaderOverview .basicFeature .featureBox .featureBoxTop .featureInnerImg { width: 100%; height: 100%; } #BarcodeReaderOverview .basicFeature .featureBox .featureBoxTop .featureTag { position: absolute; top: 20px; left: 0px; z-index: 1; } #BarcodeReaderOverview .dbrFeaturesContent i { background: url(../../images/icons/dbr-overview-features.png) no-repeat center; height: 75px; width: 75px; display: inline-block; } #BarcodeReaderOverview .dbrFeaturesContent tr:first-child td:nth-child(1) .icon i { background-position-y: 20px; } #BarcodeReaderOverview .dbrFeaturesContent tr:first-child td:nth-child(2) .icon i { background-position-y: -52px; } #BarcodeReaderOverview .dbrFeaturesContent tr:first-child td:nth-child(3) .icon i { background-position-y: -126px; } #BarcodeReaderOverview .dbrFeaturesContent tr:first-child td:nth-child(4) .icon i { background-position-y: -194px; } #BarcodeReaderOverview .dbrFeaturesContent tr:last-child td:nth-child(1) .icon i { background-position-y: -272px; } #BarcodeReaderOverview .dbrFeaturesContent tr:last-child td:nth-child(2) .icon i { background-position-y: -344px; } #BarcodeReaderOverview .dbrFeaturesContent tr:last-child td:nth-child(3) .icon i { background-position-y: -425px; } #BarcodeReaderOverview .dbrFeaturesContent tr:last-child td:nth-child(4) .icon i { background-position-y: -505px; } .dbrOverviewPowerful .powerfulList li span.icon i { width: 75px; height: 75px; background-size: unset !important; } .dbrOverviewPowerful .powerfulList li:nth-child(1) span.icon i { background: url(../../images/icons/shipment-barcode.png) no-repeat center; } .dbrOverviewPowerful .powerfulList li:nth-child(2) span.icon i { background: url(../../images/icons/composition-horizontal.png) no-repeat center; } .dbrOverviewPowerful .powerfulList li:nth-child(3) span.icon i { background: url(../../images/icons/barcode-search.png) no-repeat center; } #dbrOverviewDesktop.dbrOverviewOther .dbrOverviewReliable i { display: inline-block; } i.icon-cog-approved { background: url(../../images/icons/cog-approved.png) no-repeat center; } i.icon-puzzle { background: url(../../images/icons/module-puzzle.svg) no-repeat center; } i.icon-barcode { background: url(../../images/icons/barcodes.png) no-repeat center; } i.icon-trophy { background: url(../../images/icons/dbr-desktop/icon-industry-leading-speed-1.svg) no-repeat center; } i.icon-large-volumes { background: url(../../images/icons/dbr-desktop/icon-industry-leading-speed-2.svg) no-repeat center; } #dbrOverviewDesktop .dbrFeaturesContent i.icon-img { height: 75px; width: 75px; display: inline-block; } #BarcodeReaderOverview i.dbr-white-logo { width: 415px; height: 57px; } #BarcodeReaderOverview i.dbr-white-logo.ES-logo { background: url(../../images/dynamsoft-logos/ES_DBR_logo.svg) no-repeat left; background-size: contain; } #dbrOverviewDesktop .dbrFeaturesContent tr:first-child td:nth-child(1) .icon i { background: url(../../images/icons/dbr-desktop/icon-batch-barcode.svg) no-repeat center; } #dbrOverviewDesktop .dbrFeaturesContent tr:first-child td:nth-child(2) .icon i { background: url(../../images/icons/cloud-data-transfer.png) no-repeat center; } #dbrOverviewDesktop .dbrFeaturesContent tr:first-child td:nth-child(3) .icon i { background: url(../../images/icons/dbr-desktop/icon-error-info.svg) no-repeat center; } #dbrOverviewDesktop .dbrFeaturesContent tr:nth-child(2) td:nth-child(1) .icon i { background: url(../../images/icons/dbr-desktop/icon-image-processing.svg) no-repeat center; } #dbrOverviewDesktop .dbrFeaturesContent tr:nth-child(2) td:nth-child(2) .icon i { background: url(../../images/icons/dbr-desktop/icon-comfiguration.svg) no-repeat center; } #dbrOverviewDesktop .dbrFeaturesContent tr:nth-child(2) td:nth-child(3) .icon i { background: url(../../images/icons/dbr-desktop/icon-text-filtering.svg) no-repeat center; } #dbrOverviewDesktop .basicFeature .featureBox .featureBoxTop.fb1 { background: url(../../images/banner/DBR/DBR_desktop_1.png) no-repeat; background-size: cover; } #dbrOverviewDesktop .basicFeature .featureBox .featureBoxTop.fb2 { background: url(../../images/banner/DBR/DBR_desktop_2.png) no-repeat; background-size: cover; } #dbrOverviewDesktop .basicFeature .featureBox .featureBoxTop.fb3 { background: url(../../images/banner/DBR/DBR_desktop_3.png) no-repeat; background-size: cover; } i.icon-programming-browser { background: url(../../images/icons/programming-browser.png) no-repeat center; } i.icon-mobile-qr { background: url(../../images/icons/mobile-qr-code.png) no-repeat center; } i.icon-double-barcode { background: url(../../images/icons/double-barcode.png) no-repeat center; } #dbrOverviewWeb .basicFeature .featureBox .featureBoxTop.fb1 { background: url(../../images/banner/DBR/DBR-web-1.png) no-repeat; background-size: cover; } #dbrOverviewWeb .basicFeature .featureBox .featureBoxTop.fb2 { background: url(../../images/banner/DBR/DBR-web-2.png) no-repeat; background-size: cover; } #dbrOverviewWeb .basicFeature .featureBox .featureBoxTop.fb3 { background: url(../../images/banner/DBR/DBR-web-3.png) no-repeat; background-size: cover; } i.icon-focus-frame { background: url(../../images/icons/focus-frame-target.png) no-repeat center; } i.icon-gauge-board { background: url(../../images/icons/gauge.svg) no-repeat center; } i.icon-sdk { background: url(../../images/icons/sdk.svg) no-repeat center; } i.icon-hand-star { background: url(../../images/icons/hand-star.svg) no-repeat center; } i.icon-gauge { background: url(../../images/icons/gauge-dashboard.png) no-repeat center; } #dbrOverviewMobile .basicBanner .intro { width: 600px; line-height: 34px; font-size: 24px; } #dbrOverviewMobile .basicBanner .downloadBtn { padding: 0px 40px; height: 56px; line-height: 48px; font-size: 24px; } #dbrOverviewMobile .dbrFeaturesContent .icon i { background: url(../../images/icons/dbr-overview-features.png) no-repeat center; height: 75px; width: 75px; display: inline-block; } #dbrOverviewMobile .dbrFeaturesContent tr:first-child td:nth-child(1) .icon i { background: url('../../images/icons/dbr mobile/icon-barcodes.svg') no-repeat center; background-size: 40px; } #dbrOverviewMobile .dbrFeaturesContent tr:first-child td:nth-child(2) .icon i { background: url('../../images/icons/dbr mobile/icon-cloud-platforms.svg') no-repeat center; } #dbrOverviewMobile .dbrFeaturesContent tr:first-child td:nth-child(3) .icon i { background: url(../../images/icons/shipment-barcode.png) no-repeat center; background-size: 37px 37px; } #dbrOverviewMobile .dbrFeaturesContent tr:last-child td:nth-child(1) .icon i { background: url('../../images/icons/dbr mobile/icon-scan-from-video.svg') no-repeat center; } #dbrOverviewMobile .dbrFeaturesContent tr:last-child td:nth-child(2) .icon i { background: url(../../images/icons/rotate-angle.png) no-repeat center; background-size: 29px 29px; } #dbrOverviewMobile .dbrFeaturesContent tr:last-child td:nth-child(3) .icon i { background: url('../../images/icons/dbr mobile/icon-no-quiet-zone.svg') no-repeat center; background-size: 42px; } #dbrOverviewMobile .platformIcon.ios { background: url(../../images/icons/ios-icon.png) no-repeat center; height: 76px; width: 76px; background-color: white; display: inline-block; } #dbrOverviewMobile .platformIcon.android { background: url(../../images/icons/android.png) no-repeat center; height: 76px; width: 76px; background-color: white; display: inline-block; } #dbrOverviewMobile .basicFeature .featureBox .featureBoxTop.fb1 { background: url(../../images/banner/DBR/DBR-mobile-1.png) no-repeat; background-size: cover; } #dbrOverviewMobile .basicFeature .featureBox .featureBoxTop.fb2 { background: url(../../images/banner/DBR/dbr_banner1.jpg) no-repeat; background-size: cover; } #dbrOverviewMobile .basicFeature .featureBox .featureBoxTop.fb3 { background: url(../../images/banner/DBR/dbr-mobile-3.png) no-repeat; background-size: cover; } #dbrOverviewMobile .dbrMobilePlatforms, #dbrOverviewDesktop .dbrMobilePlatforms { background: #000000; height: auto; padding: 21px 0; } #dbrOverviewMobile .dbrMobilePlatforms label, #dbrOverviewDesktop .dbrMobilePlatforms label { vertical-align: top; color: #FFFFFF; font-size: 16px; line-height: 36px; margin-bottom: 0; margin-right: 100px; } #dbrOverviewMobile .dbrMobilePlatforms .platformList, #dbrOverviewDesktop .dbrMobilePlatforms .platformList { display: inline-block; margin: 0; padding: 0; } #dbrOverviewMobile .dbrMobilePlatforms .platformList li, #dbrOverviewDesktop .dbrMobilePlatforms .platformList li { display: inline-block; margin-right: 60px; } #dbrOverviewMobile .dbrMobilePlatforms .platformList li:last-child, #dbrOverviewDesktop .dbrMobilePlatforms .platformList li:last-child { margin-right: 0; } #dbrOverviewMobile .dbrMobilePlatforms .platformList li img.hover { display: none; } #dbrOverviewMobile .dbrMobilePlatforms .platformList li a:hover img.hover { display: inline-block; } #dbrOverviewMobile .dbrMobilePlatforms .platformList li a:hover img.noHover { display: none; } #dbrOverviewDesktop .dbrMobilePlatforms .platformList li a:hover .changeAll { fill: #FE8E14 !important; stroke: #FE8E14 !important; } #dbrOverviewDesktop .dbrMobilePlatforms .platformList li a:hover .onlyChangeStroke { stroke: #FE8E14 !important; } #dbrOverviewDesktop .dbrMobilePlatforms .platformList li a:hover .onlyChangeFill { fill: #FE8E14 !important; } #dbrOverviewDesktop .dbrMobilePlatforms .platformList li i.supportIcon { background-image: url(../../images/icons/dbr_overview_package_white.png) !important; } #dbrOverviewDesktop .dbrMobilePlatforms .platformList li i.c { background-position-y: -35px; } #BarcodeReaderOverview .basicPowerful p:last-child { margin-bottom: 35px; } i.google-play-badge { background: url(../../images/icons/Google-play.svg) no-repeat center; background-size: contain; height: 66px; width: 222px; display: inline-block; } i.app-store-badge { background: url(../../images/icons/apple-store.svg) no-repeat center; background-size: contain; height: 66px; width: 200px; display: inline-block; } .basicReliable .functionBox { padding: 0px 49px 49px 60px; height: 330px; min-height: 330px; } .basicReliable .functionBox .icon { width: 80px; height: 80px; border: 2px solid #39393B; background: #FFFFFF; display: inline-block; position: relative; left: unset; top: unset; margin-top: -40px; margin-bottom: 20px; } .basicReliable .functionBox .icon i { display: inline-block; width: 80px; height: 80px; top: 50%; background-size: unset !important; position: absolute; left: 50%; transform: translate(-50%,-50%); } p.supportIconWrapper { display: table; vertical-align: middle; height: 95px; min-height: 95px !important; } p.supportIconWrapper > span { display: table-cell; /*width: 52px;*/ /*padding-right: 17px;*/ text-align: center; font-size: 16px; } p.supportIconWrapper > span span { display: block; color: #606060; } .applicationItem:first-child p.supportIconWrapper > span span { width: 80%; margin: 0 auto; } .applicationItem:nth-child(2) p.supportIconWrapper > span { font-size: 14px; } .applicationItem:nth-child(2) p.supportIconWrapper > span:not(:last-child) { padding-right: 10px; } .dbrOverviewFeatures .dbrFeaturesContent { background: #323234; padding: 0px 150px; padding-bottom: 70px; } .dbrOverviewFeatures table { position: relative; top: -42px; } .dbrOverviewFeatures table td { height: auto; width: 381px; vertical-align: top; padding-bottom: 20px; padding-right: 70px; } .dbrOverviewFeatures table td:last-child { padding-right: 0px; } .dbrOverviewFeatures table td p { color: #FFFFFF; font-size: 24px; margin-top: 25px; line-height: 34px; } .dbrOverviewFeatures table .icon { display: inline-block; height: 80px; width: 80px; background-color: white; border: 2px solid #323234; } .actionRight { position: absolute; right: 0px; top: -50px; } #dbrOverviewMobile .actionRight { position: absolute; right: 0px; top: unset !important; bottom: 0px; } .actionRight img { width: 587px; } .actionRight i.artwork { height: 48px; width: 37px; display: inline-block; position: absolute; left: 50%; transform: translateX(-50%); margin-top: 20px; } .dbrOverviewSymbology .dbrSymbologyCol { vertical-align: top; } .dbrOverviewSymbology .dbrSymbologyCol dt { font-size: 20px; line-height: 40px; font-family: 'Oswald-Regular'; font-weight: normal; margin-top: 30px; } .dbrOverviewSymbology .dbrSymbologyCol dd { font-size: 18px; line-height: 30px; } .dbrOverviewSymbology .dbrSymbologyCol dd p { margin-bottom: 0px; } dt { position: relative; } dt:before { content: "\A"; border-style: solid; border-width: 6px 10px 6px 0; border-color: transparent #fe8e14 transparent transparent; position: absolute; transform: rotate( 180deg ); left: -18px; top: 14px; } .dbrOverviewSymbology .barcode-swiper-wrapper { margin: auto; margin-bottom: 80px; } .barcode-img { height: 190px; margin-right: 50px; } .basicPowerful .powerfulList li { width: 383px; height: 354px; } .basicPowerful .powerfulList li:first-child { height: 286px; width: 834px; } .basicPowerful .powerfulList li:last-child { margin-left: 68px; } .basicPowerful p.disc { line-height: 26px; font-size: 18px; } .basicPowerful p.f20 { font-size: 20px; line-height: 40px; } .basicPowerful .powerfulList li span.icon { left: 58px; } .basicPowerful .powerfulLeft p { margin-top: 30px; } a.featureBox { display: block; } .featureBox p:last-child { color: #FE8E14 !important; } .basicFeature .featureBox .featureBoxBottom { height: 340px; background: #F5F5F5; padding: 47px 20px 40px 44px; } /* Spanish features */ .basicFeature .featureBox.ESFeature .featureBoxBottom { height: 400px; } .basicFeature .featureBox.ESFeature .featureBoxBottom .title { min-height: 80px; } .basicCustomers .swiper-container { height: 50px; overflow: hidden; } #BarcodeReaderOverview .dbrOverviewCompanys .customer-stories { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: center; } #BarcodeReaderOverview .dbrOverviewCompanys .customer-logos { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } #BarcodeReaderOverview .dbrOverviewCompanys .customer-logos li { position: relative; display: inline-block; opacity: 1; vertical-align: middle; margin-right: 0; } #BarcodeReaderOverview .dbrOverviewCompanys .company-logos { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; } i.german-red-cross.colored { width: 13.2rem; } .dbrOverviewPlatform h2 { margin-bottom: 60px; } .dbrOverviewPlatform table { margin-bottom: 50px !important; } /* desktop */ .contentHeader a { font-size: 24px; height: 70px !important; line-height: 70px !important; width: auto; padding: 0 55px !important; margin: 0 40px; } .dbrOverviewOther .basicReliable .functionBox { height: 266px; width: 516px; max-width: 516px; padding: 0px 39px 49px 60px; min-height: 270px; } #dbrOverviewDesktop .basicReliable .functionBox { padding: 0px 39px 49px 50px; min-height: 290px; } .dbrOverviewOther .dbrOverviewFeatures .dbrFeaturesContent { padding: 0px 90px; } /*#dbrOverviewDesktop .dbrOverviewFeatures table td p { font-size: 18px; margin-top: 25px; line-height: 30px; }*/ #dbrOverviewDesktop .dbrOverviewFeatures table td { height: 205px; width: 451px; vertical-align: top; padding-bottom: 20px; padding-right: 20px; } #dbrOverviewDesktop .dbrOverviewFeatures table tr:last-child td:last-child { height: 155px; } .dbrOverviewOther .dbrOverviewFeatures table .supportIcon { margin-right: 20px; } #dbrOverviewDesktop .leftFeatures { padding-right: 40px; } /* mobile */ #dbrOverviewMobile.dbrOverviewOther .basicReliable .functionBox { height: 336px; padding: 0px 33px 46px 40px; min-height: 270px; } #dbrOverviewMobile .actionLeft img { display: inline-block; } #dbrOverviewMobile .actionLeft span.actionText { display: inline-block; width: calc(100% - 130px); color: white; } #dbrOverviewMobile .iconWrapper { height: 100%; width: 100px; } #dbrOverviewMobile .actionLeft p.badge img { width: 199px; } /*#dbrOverviewMobile .actionLeft p.badge { line-height: 59px; }*/ #dbrOverviewMobile .actionRight img { width: 317px; margin-top: -17px; } #dbrOverviewMobile .actionRight { position: absolute; right: 120px; } #dbrOverviewMobile.dbrOverviewOther .basicReliable .functionBox { margin: 0 0; } #dbrOverviewMobile .dbrOverviewPlatform { background-color: #323234; height: auto; padding: 70px 80px; } #dbrOverviewMobile .dbrOverviewPlatform p { color: white; font-size: 16px; } #dbrOverviewMobile .dbrOverviewPlatform .platformList { display: grid; grid-template-columns: 7fr 6fr 10fr; grid-gap: 30px 140px; } #dbrOverviewMobile .dbrOverviewPlatform .platformName { display: flex; align-items: center; } #dbrOverviewMobile .dbrOverviewPlatform .platformName p { font-size: 18px; margin: 0 10px; display: inline; } #dbrOverviewMobile .dbrOverviewPlatform .platformName img.hover { display: none; } #dbrOverviewMobile .dbrOverviewPlatform a.platformName:hover p { color: #fe8e14; } #dbrOverviewMobile .dbrOverviewPlatform a.platformName:hover img { display: none; } #dbrOverviewMobile .dbrOverviewPlatform a.platformName:hover img.hover { display: block; } #dbrOverviewMobile .dbrOverviewPlatform .platform ul { padding-left: 20px; } #dbrOverviewMobile .dbrOverviewPlatform .platform ul li { list-style: disc; } #dbrOverviewMobile .dbrOverviewPlatform .platform ul li::marker { display: inline; } #dbrOverviewMobile .dbrOverviewPlatform .platform ul li::marker { color: white; font-size: 14px; } #dbrOverviewMobile .dbrOverviewPlatform .platform .npm { display: flex; align-items: center; cursor: pointer; margin-top: 10px; font-size: 16px; background-color: white; padding: 10px 20px; border-radius: 5px; } #dbrOverviewMobile .dbrOverviewPlatform .platform .npm:hover { background: #f6eade; } #dbrOverviewMobile .dbrOverviewPlatform .platform .npm svg { height: 16px; width: 16px; fill: #a1a1a1; } #dbrOverviewMobile .dbrOverviewPlatform .platform .npm p { word-break: break-all; margin: 0; color: #323234; font-size: 14px; font-family: monospace; } #dbrOverviewMobile .dbrOverviewPlatform .platform .npm .fa-copy { color: #a1a1a1; margin-left: auto; } /* web */ #dbrOverviewWeb .basicReliable .functionBox { height: 336px; } #dbrOverviewWeb .basicReliable .functionBox { margin: 0 0; } #dbrOverviewWeb .dbrOverviewPlatform td { color: white; width: 25%; vertical-align: middle; } #dbrOverviewWeb .dbrOverviewPlatform span { display: inline-block; padding-left: 10px; font-size: 16px; line-height: 26px; position: absolute; top: 50%; transform: translateY(-50%); } #dbrOverviewWeb .featuresContainer { height: auto; margin: 0 0; } #dbrOverviewWeb .featuresContainer { background-color: #323234; } #dbrOverviewWeb .featuresContainer .featureItem { position: relative; padding: 60px 75px; padding-right: 0; } #dbrOverviewWeb .featuresContainer .featureItem:nth-child(-n+3) { margin-bottom: 40px; } #dbrOverviewWeb .featuresContainer .icon { position: absolute; width: 75px; height: 75px; border: 2px solid #323233; background-color: white; left: 75px; top: 0; transform: translateY(-50%) } #dbrOverviewWeb .featuresContainer .featureItem h3, .featureItem p { color: white; } #dbrOverviewWeb .featuresContainer .featureItem h3 { font-size: 24px; } #dbrOverviewWeb .featuresContainer .featureItem p { font-size: 16px; margin-top: 20px; width: 90%; } #dbrOverviewWeb .contentHeader a { width: 280px !important; height: 60px !important; font-size: 20px !important; line-height: 60px !important; padding: 0 0 !important; } #dbrOverviewWeb .dbrOverviewAction .actionLeft a:last-child { margin-left: 35px; border: 2px solid #fff; background: #fe8e14; color: white; line-height: 64px; } span.icon { position: relative; } span.icon i { width: 75px; height: 75px; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .icon-setting-browser { background: url(../../images/icons/setting-browser.svg) no-repeat center center } .icon-built-in-camera { background: url(../../images/icons/built-in-camera.svg) no-repeat center center } .icon-layout { background: url(../../images/icons/layout.svg) no-repeat center center } .icon-linear-qr { background: url(../../images/icons/linear-qr-code.svg) no-repeat center center } .icon-half-qr { background: url(../../images/icons/half-qr.svg) no-repeat center center } .icon-decode-video { background: url(../../images/icons/decode-video.svg) no-repeat center center } #dbrOverviewWeb .featureBox p:last-child { position: absolute; bottom: 30px; } .dbrOverviewOther .h2 { font-size: 40px; line-height: 60px; } /* other */ /*.swiper-button-next:after, .swiper-button-prev:after { display: none; }*/ .basicCustomers .customerPrevArrow, .basicCustomers .customerNextArrow { margin-top: unset !important; } .swiper-wrapper { display: table; } .barcode-swiper-container .swiper-slide { width: auto; display: table-cell; vertical-align: middle; float: none !important; text-align: center; } .logoDivider { display: inline-block; height: 60px; border-right: #DDDDDD 2px solid; } .dbrOverviewSwiper { position: relative; } .dbrOverviewSwiper .slide-left { width: 1020px; height: auto; text-align: left; padding-left: 90px; } .dbrOverviewSwiper .slide-left .personWords { font-size: 2.4rem; line-height: 4rem; padding-left: 5rem; position: relative; color: #323234; } .dbrOverviewSwiper .slide-left .personWords .preQuote { display: inline-block; width: 3.9rem; height: 16.2rem; background: url('../../images/icons/pre_quote.png') no-repeat; background-size: contain; position: absolute; top: -4.5rem; left: 0rem; } .dbrOverviewSwiper .personName { font-size: 20px; line-height: 28px; padding-left: 50px; color: #323234; } .dbrOverviewSwiper .slide-right { width: auto; padding-right: 90px; } .dbrOverviewSwiper .slide-right div { position: relative; width: 41.8rem; height: 28.3rem; background: #F5F5F5; } .dbrOverviewSwiper div.LockheadMartin { background: url('../../images/banner/LockheedMartin.png') #F5F5F5 no-repeat center center; } .dbrOverviewSwiper div.IBM { background: url('../../images/banner/IBM.png') #F5F5F5 no-repeat center center; } .dbrOverviewSwiper div.GermanRedCross { background: url('../../images/banner/GermanRedCross.png') #F5F5F5 no-repeat center center; } .dbrOverviewSwiper div.Siemens { background: url('../../images/company/caseStudyImage/siemens-logo.png') #F5F5F5 no-repeat center center; } .dbrOverviewSwiper div.Avision { background: url('../../images/banner/Avision.png') #F5F5F5 no-repeat center center; } .dbrOverviewSwiper div.Ticketswap { background: url('../../images/banner/Ticket.png') #F5F5F5 no-repeat center center; } .dbrOverviewSwiper .slick-slide .slide-right div i { position: absolute; left: 19.1rem; top: -3rem; width: 4.4rem; height: 5.7rem; } .index-swiper-container { overflow: hidden; font-size: 0px; } .dbrOverviewSwiper .custom-slick-arrow { width: 30px; height: 100%; display: inline-block; position: absolute; top: 0px; } .dbrOverviewSwiper .custom-slick-arrow:before { display: none; } .dbrOverviewSwiper .custom-slick-arrow:hover { opacity: 0.5; } .swiper-pagination-bullet { display: inline-block; width: 13px; height: 13px; border-radius: 50%; background: #555; margin: 0 5px; opacity: 0.8; border: 1px solid #6AC4BB; cursor: pointer; bottom: -8px; } .swiper-pagination-bullet-active { background: #6AC4BB; } .dbrOverviewSwiper .index-slick-prev { left: 30px; z-index: 10; } .dbrOverviewSwiper .index-slick-next { right: 30px; z-index: 10; } .basicSwiper i.arrow-left { display: inline-block; width: 30px; height: 100%; background: url(../../images/icons/arrow-left.png) no-repeat center center; background-size: contain; } .basicSwiper i.arrow-right { display: inline-block; width: 30px; height: 100%; background: url(../../images/icons/arrow-right.png) no-repeat center center; background-size: contain; } .slide-block { display: table; height: 100%; } .dbrOverviewSwiper .swiper-slide .slide-left { display: table-cell; vertical-align: middle; height: 100%; float: none; } .slide-right.hide-sm.hide-md { display: table-cell; vertical-align: middle; height: 100%; float: none; padding-right: unset; padding-left: 40px; } .orangeAngelList li { position: relative; font-size: 18px; line-height: 30px; margin-bottom: 5px; } .orangeAngelList li:before { content: "\A"; border-style: solid; border-width: 6px 10px 6px 0; border-color: transparent #fe8e14 transparent transparent; position: absolute; transform: rotate( 180deg ); left: -18px; top: 10px; } .orangeAngelList.inlineBlockList li { display: inline-block; margin-right: 34px; } .orangeAngelList.inlineBlockList li:nth-child(5n) { margin-right: 0; } .whitePlayBtn { top: 50%; left: 50%; transform: translate(-50%,-50%); border: 2px solid #fe8e14; background: #fe8e1440; } .whitePlayBtn:hover { background-color: #fe8e1470; } .dbrVideo .switchItem { display: none; } .dbrVideo .switchItem.on { display: block; } .dbrVideo .strengthLine .strengthImg { position: relative } .dbrVideo .switchIcons { padding-left: 0; text-align: center; position: absolute; width: 100%; z-index: 1; top: -35px; } .dbrVideo .switchIcons .graylink { display: inline-block; vertical-align: top; border-bottom: 0; color: #AAAAAA; text-decoration: none !important; font-size: 16px; line-height: 37px; } .dbrVideo .switchIcons .graylink.on { opacity: 0; cursor: default } .dbrVideo .switchIcons .switchCircle { position: relative; display: inline-block; cursor: pointer; margin: 0px; width: 170px; height: 50px; border-radius: 0; background: #CCCCCC; vertical-align: top; margin-top: 10px; color: #fff; font-size: 20px; line-height: 50px; } .dbrVideo .switchIcons .switchCircle:nth-child(2) { margin-right: 0; } .dbrVideo .switchIcons .switchCircle.on { background: #323234; } /*.dbrVideo .switchIcons .switchCircle.on:after { content: ""; position: absolute; bottom: -16px; left: 78px; z-index: 1; display: inline-block; width: 0; height: 0; border-width: 8px; border-style: solid; border-color: #323234 transparent transparent transparent; }*/ .dbrOverviewMobile .dbrOverviewAction p { font-size: 18px; line-height: 26px; width: 100%; } .dbrOverviewMobile .dbrOverviewAction p.badge { margin: 70px 0 30px 0; } .dbrOverviewMobile .dbrOverviewAction p.googlePlay { display: flex; align-items: center; flex-wrap: wrap; } .plan4 { display: none !important; } .applicationItem { background: #F5F5F5; padding: 20px 20px 0 20px; display: inline-block; vertical-align: top; width: 500px; height: 200px; } .applicationItem a { display: flex; flex-direction: column; } .applicationItem:last-child { margin-right: 0; } .applicationItem p.supportIconWrapper { margin-bottom: 0; margin-top: 10px; width: 100%; } .applicationItem:not(:first-child) p.supportIconWrapper { margin-top: 20px; } .applicationItem .name { font-size: 28px; display: inline-block; width: 100%; vertical-align: middle; color: #323234; padding: 0; margin: 0; margin-right: 25px; text-align: center; } .applicationItem i.icon-flutter { background: url(../../images/icons/flutter.PNG) center center no-repeat; background-size: 85%; filter: opacity(0.7); background-position: 0 6px; } .applicationItem i.icon-react { background: url(../../images/icons/react-native.PNG) center center no-repeat; background-size: 95%; filter: opacity(0.7); background-position: 0 4px; } .applicationItem i.icon-xamarin { background: url(../../images/icons/xamarin.png) center center no-repeat; background-size: 95%; background-position: 0 7px; } /* Spanish name */ .applicationItem .name.ESName { max-width: 137px; } .applicationItem .platform { display: block; overflow: auto; } .applicationItem:last-child .platform { display: block; overflow: auto; width: 88%; margin: 0 auto; } .whyDBR { } .whyDBR .row { background-color: #F5F5F5; height: 740px; } .whyDBR .leftSection { height: 100%; padding: 150px 90px; } .whyDBR .leftSection i.icon-ISO { display: block; width: 193px; height: 193px; background: url("../../images/icons/ISO.webp") no-repeat center; background-size: contain; } .whyDBR .rightSection { display: flex; align-items: center; } .whyDBR .rightSection .featuresList { height: 526px; width: 878px; background-color: #306877; } .whyDBR .rightSection .featuresList ul { width: 100%; height: 100%; padding: 64px 96px; display: flex; flex-direction: column; justify-content: space-around; } .whyDBR .rightSection .featuresList ul li { font-size: 18px; color: white; position: relative; } .whyDBR .rightSection .featuresList ul li::after { content: "\A"; border-style: solid; border-width: 6px 15px 6px 0; border-color: transparent #fe8e14 transparent transparent; position: absolute; transform: rotate( 180deg ); left: -29px; top: 8px; } #dbrOverviewMobile .basicReliable .functionList { margin-top: 0; } #dbrOverviewDesktop .basicReliable .functionList { margin-top: 0; } #dbrOverviewWeb .basicReliable .functionList { margin-top: 0; } #dbrOverviewWeb .basicReliable .functionList div:nth-child(2) .functionBox { margin: 0 auto; } #dbrOverviewWeb .basicReliable .functionList div:nth-child(3) .functionBox { float: right; } #dbrOverviewMobile .basicReliable .functionList div:nth-child(2) .functionBox { margin: 0 auto; } #dbrOverviewMobile .basicReliable .functionList div:nth-child(3) .functionBox { float: right; } /* dbr overview new style 2022/08/29 */ #BarcodeReaderOverview .dbrOverviewVideos .dbrVideoContainer { display: flex; justify-content: space-between; width: 100%; } #BarcodeReaderOverview .dbrOverviewVideos .dbrVideoContainer .dbrVideoBox { height: 100%; width: 500px; background-color: #F5F5F5; } #BarcodeReaderOverview .dbrOverviewVideos .dbrVideoContainer .dbrVideoBox .videoThumbnail { height: 250px; position: relative; cursor: pointer; } #BarcodeReaderOverview .dbrOverviewVideos .dbrVideoContainer .dbrVideoBox .videoThumbnail:hover .whitePlayBtn { background: #fe8e1470; } #BarcodeReaderOverview .dbrOverviewVideos .dbrVideoContainer .dbrVideoBox .videoThumbnail::before { content: ""; position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); top: 0; left: 0; } #BarcodeReaderOverview .dbrOverviewVideos .dbrVideoContainer .dbrVideoBox .videoThumbnail .whitePlayBtn::after { border-top: 28px solid transparent; border-left: 45px solid #fe8e14; border-bottom: 28px solid transparent; } #BarcodeReaderOverview .dbrOverviewVideos .dbrVideoContainer .dbrVideoBox:first-child .videoThumbnail { background: url(../../images/banner/DBR/dbr_overview.jpg) no-repeat center; background-size: cover; } #BarcodeReaderOverview .dbrOverviewVideos .dbrVideoContainer .dbrVideoBox:nth-child(2) .videoThumbnail { background: url(../../images/banner/DBR/dbr_overview_2.jpg) no-repeat center; background-size: cover; } #BarcodeReaderOverview .dbrOverviewVideos .dbrVideoContainer .dbrVideoBox:last-child .videoThumbnail { background: url(../../images/banner/DBR/reading_rate.webp) no-repeat center; background-size: cover; } #BarcodeReaderOverview .dbrOverviewVideos .dbrVideoContainer .dbrVideoBox .videoDesc { width: 100%; padding: 35px; height: 390px; position: relative; transition: all .3s; } #BarcodeReaderOverview .dbrOverviewVideos .dbrVideoContainer .dbrVideoBox .videoDesc p { font-size: 16px; line-height: 26px; } #BarcodeReaderOverview .dbrOverviewVideos .dbrVideoContainer .dbrVideoBox .videoDesc h3.videoTitle { font-size: 24px; font-family: Oswald-Regular; margin-bottom: 25px; } #BarcodeReaderOverview .dbrOverviewVideos .dbrVideoContainer .dbrVideoBox .videoDesc ul { margin: 0 0 14px 0; } /*#BarcodeReaderOverview .dbrOverviewVideos .dbrVideoContainer .dbrVideoBox:nth-child(2) .videoDesc { padding-right: 10px; }*/ #BarcodeReaderOverview .dbrOverviewVideos .dbrVideoContainer .dbrVideoBox:nth-child(2) .videoDesc ul { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0; } #BarcodeReaderOverview .dbrOverviewVideos .dbrVideoContainer .dbrVideoBox:nth-child(2) .videoDesc ul li { width: 50%; } #BarcodeReaderOverview .dbrOverviewVideos .dbrVideoContainer .dbrVideoBox .videoDesc ul li { font-size: 14px; font-family: OpenSans-SemiBold; position: relative; margin-bottom: 8px; padding-left: 24px; } #BarcodeReaderOverview .dbrOverviewVideos .dbrVideoContainer .dbrVideoBox .videoDesc ul li::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fe8e14; /*border-style: solid; border-width: 6px 14px 6px 0; border-color: transparent #fe8e14 transparent transparent;*/ position: absolute; transform: rotate( 180deg ); left: 0; top: 7px; } /* 2022/11/03 */ .videoDesc__inner { width: 100%; height: 100%; overflow: hidden; } .videoDesc__arrow { cursor: pointer; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 29px; height: 22px; background: url(../../images/icons/dbr/arrow-down.svg) no-repeat center; background-size: contain; transition: .3s; } .videoDesc__arrow--expanded { transform: translateX(-50%) rotate(180deg); } #BarcodeReaderOverview .dbrDemo .dbrDemoContainer { height: fit-content; display: flex; flex-wrap: wrap; justify-content: space-between; } #BarcodeReaderOverview .dbrDemo .dbrDemoContainer .dbrDemoBox { height: fit-content; /*min-height: 400px;*/ width: 500px; background-color: #F5F5F5; margin: 50px 0 0 0; } #BarcodeReaderOverview .dbrDemo .dbrDemoContainer .dbrDemoBox .bg { height: 300px; width: 100%; } #BarcodeReaderOverview .dbrDemo .dbrDemoContainer .dbrDemoBox:first-child .bg { background: url(../../images/banner/DBR/client-side-online-demo.png) no-repeat center; background-size: cover; } #BarcodeReaderOverview .dbrDemo .dbrDemoContainer .dbrDemoBox:nth-child(2) .bg { background: url(../../images/banner/DBR/mobile-app.png) no-repeat center; background-size: cover; } #BarcodeReaderOverview .dbrDemo .dbrDemoContainer .dbrDemoBox:last-child .bg { background: url(../../images/banner/DBR/server-side-dbr-demo.png) no-repeat center; background-size: cover; } #BarcodeReaderOverview .dbrDemo .dbrDemoContainer .dbrDemoBox .link { padding: 0 30px; height: 105px; display: flex; flex-direction: column; justify-content: center; } #BarcodeReaderOverview .dbrDemo .dbrDemoContainer .dbrDemoBox .link p { font-size: 20px; font-family: Oswald-Regular; } #BarcodeReaderOverview .dbrDemo .dbrDemoContainer .dbrDemoBox .link a { font-size: 20px; font-family: Oswald-Regular; } #BarcodeReaderOverview .exploreSolution { background: #306877; color: #FFFFFF; padding: 75px 0; } #BarcodeReaderOverview .exploreSolution .solution__title { color: #FFFFFF; margin-bottom: 20px; } #BarcodeReaderOverview .exploreSolution .solution__desc { font-size: 22px; line-height: 36px; margin-bottom: 72px; padding: 0 195px; text-align: center; } #BarcodeReaderOverview .exploreSolution .solution__list { text-align: center; } #BarcodeReaderOverview .exploreSolution .solution__list li { display: inline-block; } #BarcodeReaderOverview .exploreSolution .solution__list li:nth-child(2) { margin: 0 264px; } #BarcodeReaderOverview .exploreSolution .solution__list li .solution__list-banner { width: 200px; height: 200px; background: #FFFFFF; /*border: 2px solid #323234;*/ } #BarcodeReaderOverview .exploreSolution .solution__list li .solution__list-banner.icon-vin:after { display: block; content: ""; width: 100%; height: 100%; background: url(../../images/banner/DBR/icon-vin.svg) center center no-repeat; } #BarcodeReaderOverview .exploreSolution .solution__list li .solution__list-banner.icon-scan-count:after { display: block; content: ""; width: 100%; height: 100%; background: url(../../images/banner/DBR/icon-scan-count.svg) center center no-repeat; } #BarcodeReaderOverview .exploreSolution .solution__list li .solution__list-banner.icon-driver-license:after { display: block; content: ""; width: 100%; height: 100%; background: url(../../images/banner/DBR/icon-driver-license.svg) center center no-repeat; } #BarcodeReaderOverview .exploreSolution .solution__list li .solution__list-desc { color: #FFFFFF; font-size: 18px; line-height: 36px; margin-top: 10px; } #BarcodeReaderOverview .exploreSolution .solution__list li a:hover .solution__list-desc { color: #FE8E14 } .dbrOverviewDownload .no-login-footer .formTip { font-size: 14px; color: #CCCCCC; } .dbrOverviewDownload .no-login-footer .formTip a { border: none; background-color: transparent; color: #fe8e14; line-height: unset; display: inline; } .dbrOverviewDownload .no-login-footer .formTip a:hover { transform: none; box-shadow: none; } .customTooltip .arrow { display: none; } .customTooltip .tooltip-inner { box-shadow: 0px 3px 6px #00000029; background-color: white; font-family: OpenSans-Regular; font-size: 18px; padding: 28px; width: fit-content; max-width: 550px; color: black; opacity: 1; border: 1px solid #EEEEEE; } .customTooltip .tooltip-inner p { margin: 0; } /* 2022/09/06 Frank dbr web explore more */ .dbrExploreMore { margin-top: 140px; } .dbrExploreMore .col-12 p:first-child { font-size: 30px; font-family: Oswald-Regular; text-align: center; } .dbrExploreMore .exploreContainer { margin-top: 80px; display: flex; justify-content: space-between; flex-wrap: wrap; } .dbrExploreMore .exploreContainer > a { display: block; width: 350px; height: 394px; background-color: #306877; position: relative; padding: 55px 50px; margin: 0 0 30px 0; transition: ease-in-out .2s all; } .dbrExploreMore .exploreContainer > a:hover { box-shadow: -8px 8px 0 0 #000; transform: translate(8px,-8px); } .dbrExploreMore .exploreContainer > a i { display: block; width: 90px; height: 90px; position: absolute; right: 0; bottom: 0; z-index: 1; } .dbrExploreMore .exploreContainer > a:first-child i { background: url(../../images/icons/dbr-js/icon-online-demo.svg) no-repeat; } .dbrExploreMore .exploreContainer > a:nth-child(2) i { background: url(../../images/icons/dbr-js/icon-download.svg) no-repeat; } .dbrExploreMore .exploreContainer > a:nth-child(3) i { background: url(../../images/icons/dbr-js/icon-sample.svg) no-repeat; } .dbrExploreMore .exploreContainer > a:last-child i { background: url(../../images/icons/dbr-js/icon-guide.svg) no-repeat; } .dbrExploreMore .exploreContainer > a p:nth-child(2) { font-size: 28px; font-family: Oswald-Regular; color: white; margin: 0 0; text-align: left; } .dbrExploreMore .exploreContainer > a p:last-child { font-size: 18px; color: white; margin: 20px 0 0 0; text-align: left; width: 83%; line-height: 34px; } .dbrExploreMore .exploreContainer > a::after { content: ''; position: absolute; right: 0; bottom: 0; border: 120px solid #27555F; border-top-color: transparent; border-left-color: transparent; border-right-width: 97px; border-left-width: 97px; } .dbrExploreMore .exploreContainer > a::before { content: ''; position: absolute; right: 0; bottom: 0; border: 30px solid #173E47; border-top-color: transparent; border-left-color: transparent; border-right-width: 23px; border-left-width: 23px; z-index: 1; } #BarcodeReaderOverview .basicBanner:not(.ESBanner) { height: 460px; } #BarcodeReaderOverview .basicBanner .container { height: 100%; } #BarcodeReaderOverview .basicBanner .container .row { height: 100%; } #BarcodeReaderOverview .basicBanner .bannerContent { height: 100%; width: 100%; display: flex; justify-content: space-around; align-items: center; } #BarcodeReaderOverview .basicBanner .bannerContent .desc { width: 713px; } #BarcodeReaderOverview .basicBanner .bannerContent .desc h1 { font-size: 40px; color: white; font-family: Oswald-Light; margin-bottom: 21px; } #BarcodeReaderOverview .basicBanner .bannerContent .desc p { font-size: 16px; color: white; } #BarcodeReaderOverview .basicBanner .bannerContent .desc p:not(:last-child) { margin-bottom: 17px; } #BarcodeReaderOverview .basicBanner .bannerContent .desc ul { padding-left: 19px; } #BarcodeReaderOverview .basicBanner .bannerContent .desc ul li { font-size: 16px; color: white; list-style: disc; margin-bottom: 15px; } .store-badge { display: flex; justify-content: center; } .store-badge i { width: 151px; height: 43px; } .store-badge i.google-play-badge { margin-left: 15px; } /* dbr overview new style 2022/11/03 */ /* dbr overview banner using BEM */ #BarcodeReaderOverview .dbrOverviewBanner:not(.ESBanner) { margin-top: 78px; } #BarcodeReaderOverview .dbrOverviewBanner .innerBanner { display: flex; justify-content: space-between; flex-wrap: wrap; } .innerBanner__left { width: 55%; } .innerBanner__right { width: 45%; display: flex; justify-content: flex-end; align-items: center; } .innerBanner__head { font-size: 40px; font-family: Oswald-Light; line-height: 60px; } .innerBanner__desc { margin-top: 21px; line-height: 32px; font-size: 18px; } a.btns__download-btn:hover { color: #fe8e14; } .btns__online-demo-btn { position: relative; } .innerBanner__btns .btns__online-demo-btn:hover { transform: none; box-shadow: none; } .online-demo-btn__text { display: flex; align-items: center; justify-content: center; pointer-events: none; } .online-demo-btn__text::after { content: ""; display: block; margin-left: 17px; border: 4.5px solid transparent; border-top-color: white; border-bottom-width: 0px; border-top-width: 9px; transition: .3s; } .online-demo-btn__text--expanded::after { transform: rotate(180deg); } .online-demo-btn__drop-menu { display: none; position: absolute; left: 0; width: 100%; padding-top: 5px; z-index: 1; text-align: left; } a.online-demo-link { width: 100%; display: block; height: var(--online-demo-btn-height); line-height: var(--online-demo-btn-height); background-color: #f5f5f5; color: black; font-size: 18px; font-family: Oswald-Regular; cursor: pointer; padding: 0 0 0 27px; } a.online-demo-link:first-child { border-bottom: 1px solid #ddd; } a.online-demo-link:hover { background-color: #ddd; } .innerBanner__feature-list { width: 509px; height: 231px; border: 1px solid #ddd; margin-right: 50px; font-size: 18px; display: flex; justify-content: center; align-items: center; } .innerBanner__feature-list ul { width: fit-content; } .innerBanner__feature-list ul li { line-height: 32px; } .innerBanner__feature-list ul li:last-child { margin-top: 15px; } .innerBanner__feature-list ul li:not(:last-child) { padding-left: 32px; position: relative; } .innerBanner__feature-list ul li:not(:last-child)::before { content: ""; display: inline-block; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 16px; height: 13px; background: url(../../images/icons/dbr/tick.svg) no-repeat center; background-size: contain; } /* end of dbr overview banner using BEM */ /* dbr overview A/B test for banner 2022/12/19 */ /* dbr overview banner Frank 20240621 */ .dbrOverviewBannerA { background-color: #323234; padding: 80px 0; position: relative; } .dbrOverviewBannerA .innerBanner { width: 900px; } .dbrOverviewBannerA .innerBanner__head { font-family: Oswald-Regular; } .dbrOverviewBannerA .innerBanner__desc { font-size: 20px; letter-spacing: .6px; } .dbrOverviewBannerA .bannerImg { width: 602px; height: 369px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: 1; } .dbrOverviewBannerA .bannerImg img { width: 100%; height: auto; } .dbrOverviewBannerA a.online-demo-link { background-color: white; border: 1px solid #ddd; } .dbrOverviewBannerA a.online-demo-link:first-child { border-bottom: none; } .dbrOverviewBannerA a.online-demo-link:hover { background-color: #ddd; } .dbrOverviewBannerA.dbrOverviewBannerFeatures { height: auto; padding: 0 0; background-color: #EFEFEF; } .dbrOverviewBannerFeatures ul { display: flex; height: 110px; flex-wrap: wrap; width: 60%; align-content: center; } .dbrOverviewBannerFeatures ul li { font-size: 16px; position: relative; padding-left: 34px; flex: 50%; margin-bottom: 15px; } .dbrOverviewBannerFeatures ul li:nth-child(n+3) { margin-bottom: 0; } .dbrOverviewBannerFeatures ul li::before { content: ""; width: 19px; height: 19px; border-radius: 50%; display: inline-block; position: absolute; top: 51%; left: 0; transform: translateY(-50%); background: url(../../images/DCV/orange-tick.svg) no-repeat center center; vertical-align: middle; } .dbrOverviewBannerA.dbrOverviewBannerB { background-color: #323234; display: none; } .dbrOverviewBannerA.dbrOverviewBannerB .innerBanner__head, .dbrOverviewBannerA.dbrOverviewBannerB .innerBanner__desc { color: white; } .dbrOverviewBannerA.dbrOverviewBannerB .btns__download-btn:hover { box-shadow: -8px 8px 0 0 #fff; } .dbrOverviewBannerB.dbrOverviewBannerFeatures { margin-top: 50px; display: none; } #BarcodeReaderOverview .dbrOverviewBannerB.dbrOverviewBannerFeatures h2 { margin-bottom: 20px; } .dbrOverviewBannerB.dbrOverviewBannerFeatures .main { width: 60%; margin: 0 auto; } .dbrOverviewBannerB.dbrOverviewBannerFeatures .main ul { width: 80%; margin: 0 auto; justify-content: space-between; } .dbrOverviewBannerB.dbrOverviewBannerFeatures .main ul li { flex: unset; } .dbrOverviewBannerB.dbrOverviewBannerFeatures .main ul li:nth-child(2n) { width: 40%; } .dbrOverviewBannerB.dbrOverviewBannerFeatures .main ul li:nth-child(2n - 1) { width: 50%; } /* end of dbr overview A/B test for banner 2022/12/19 */ /* overview banner Frank 20240621 */ .dbrOverviewBannerA .innerBanner_features { display: grid; grid-template-columns: 3fr 4fr; grid-gap: 14px 40px; width: 750px; max-width: 100%; } .dbrOverviewBannerA .innerBanner_features li { display: flex; align-items: center; } .dbrOverviewBannerA .innerBanner_features li p { color: white; font-size: 16px; margin: 0; line-height: 22px; } .dbrOverviewBannerA .innerBanner_features li::before { content: ""; margin-right: 10px; width: 20px; height: 20px; display: block; background: url(../../images/icons/tick-circle.svg) no-repeat center center; background-size: contain; } #dwtOverviewFeature { margin-bottom: 140px; } li.phone { background: url(../../images/icons/dbr/Phone.svg) no-repeat center; background-size: contain; } li.email { background: url(../../images/icons/dbr/email.svg) no-repeat center; background-size: contain; } li.live-chat { background: url(../../images/icons/dbr/live-chat-circle.svg) no-repeat center; background-size: contain; } li.screen-share { background: url(../../images/icons/dbr/screen-share-meeting.svg) no-repeat center; background-size: contain; } /* new platforms style */ .platforms { display: flex; justify-content: space-between; } .platforms__item { --platform-item-width: 500px; } .platform__intro { width: var(--platform-item-width); height: 200px; background: #F5F5F5; padding: 34px 20px; position: relative; transition: ease-in-out .2s all; } .platform__intro:hover { box-shadow: -8px 8px 0 0 #000; transform: translate(8px,-8px); } .platform__intro > a { width: 100%; height: 100%; top: 0; left: 0; z-index: 2; display: block; position: absolute; } .platform__app { width: var(--platform-item-width); height: 110px; background: #F5F5F5; margin-top: 10px; } .platform__title { font-size: 28px; font-family: Oswald-Regular; text-align: center; } .platform__icon-list { display: flex; justify-content: space-between; margin-top: 22px; flex-wrap: wrap; } .platform__icon { display: flex; flex-direction: column; align-items: center; } .platform__icon i { width: 100%; height: 34px; display: block; } .platform__icon p { margin: 10px 0 0 0; font-size: 16px; color: #606060; line-height: 24px; } .platform__icon p span { font-style: italic; } .platforms__item:first-child .platform__icon-list { margin-top: 16px; } .platforms__item:nth-child(2) .platform__icon p { font-size: 14px; } .platforms__item:last-child .platform__icon-list { padding: 0 70px; } .platform__app { padding: 22px 40px; } .app__title, .app__link { font-size: 20px; line-height: 30px; font-family: Oswald-Regular; } .app__link { margin-top: 8px; } .app__badge { display: flex; justify-content: center; align-items: center; height: 100%; } .app-store-badge { display: block; background: url(../../images/icons/app-store.svg) no-repeat center; width: 150px; height: 45px; background-size: contain; margin-right: 24px; } .google-store-badge { display: block; background: url(../../images/icons/Google-play.svg) no-repeat center; width: 150px; height: 45px; background-size: contain; } .platform__icon.icon-js p { width: 80%; } .platform__icon.icon-js i { background: url(../../images/icons/dbr/js.svg) center no-repeat; background-size: contain; } .platform__icon.icon-android { width: 52px; } .platform__icon.icon-android i { background: url(../../images/icons/dbr/android.svg) center no-repeat; background-size: contain; width: 90%; } .platform__icon.icon-ios { width: 48px; } .platform__icon.icon-ios i { background: url(../../images/icons/dbr/iOS.svg) center no-repeat; background-size: contain; } .platform__icon.icon-react { width: 85px; } .platform__icon.icon-react i { background: url('../../images/icons/dbr/React Native.svg') center no-repeat; background-size: contain; } .platform__icon.icon-flutter { width: 43px; } .platform__icon.icon-flutter i { background: url('../../images/icons/dbr/Flutter.svg') center no-repeat; background-size: contain; } .platform__icon.icon-xamarin { width: 99px; } .platform__icon.icon-xamarin i { background: url('../../images/icons/dbr/Xamarin.Forms.svg') center no-repeat; background-size: contain; } .platform__icon.icon-cordova { width: 55px; } .platform__icon.icon-cordova i { background: url('../../images/icons/dbr/Cordova.svg') center no-repeat; background-size: contain; } .platform__icon.icon-c { width: 40px; } .platform__icon.icon-c i { background: url('../../images/icons/dbr/C.svg') center no-repeat; background-size: contain; } .platform__icon.icon-cpp { width: 40px; } .platform__icon.icon-cpp i { background: url('../../images/icons/dbr/cpp.svg') center no-repeat; background-size: contain; } .platform__icon.icon-dotnet { width: 43px; } .platform__icon.icon-dotnet i { background: url('../../images/icons/dbr/dotnet.svg') center no-repeat; background-size: contain; } .platform__icon.icon-py { width: 49px; } .platform__icon.icon-py i { background: url('../../images/icons/dbr/python.svg') center no-repeat; background-size: contain; } .platform__icon.icon-java { width: 40px; } .platform__icon.icon-java i { background: url('../../images/icons/dbr/java.svg') center no-repeat; background-size: contain; } /* end of dbr overview new style 2022/11/03 */ #BarcodeReaderOverview .supportedSymbologies { margin: 0; } /* dbr js frameworks */ #dbrOverviewWeb .dbrJsFrameworks { margin-top: 100px; } #dbrOverviewWeb .dbrJsFrameworks__main { width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; } #dbrOverviewWeb .dbrJsFrameworks__item { transition: ease-in-out 0.3s all; height: 170px; width: 140px; background-color: #F5F5F5; display: flex; align-items: center; flex-direction: column; justify-content: center; } #dbrOverviewWeb .dbrJsFrameworks__item:hover { box-shadow: -8px 8px 0 0 black; transform: translate(8px,-8px); } #dbrOverviewWeb .dbrJsFrameworks__icon { height: 95px; display: flex; align-items: center; } #dbrOverviewWeb .dbrJsFrameworks__name { display: inline-block; font-size: 16px; text-align: center; margin-top: 12px; color: black; } /* dbr js features */ .dbrJsFeatures .features__wrapper { display: grid; grid-gap: 60px; grid-template-columns: repeat(3, 1fr); } .dbrJsFeatures .features__wrapper > div { background-color: #F5F5F5; } .dbrJsFeatures .features__wrapper > a { display: block; color: inherit; transition: all 0.3s; } .dbrJsFeatures .features__wrapper > a:hover { transform: translate(8px, -8px); box-shadow: -8px 8px 0 0 black; } .dbrJsFeatures .features__wrapper .feature_image img { max-width: 100%; object-fit: cover; } .dbrJsFeatures .features__wrapper .feature_detail { background-color: #F5F5F5; height: 200px; padding: 29px 35px 0 35px; } .dbrJsFeatures .features__wrapper .feature_detail p { font-size: 16px; } /* find out more */ .more { height: auto; display: flex; justify-content: space-between; margin-bottom: 80px; } .more h3 { width: 296px; } .more .resources { display: grid; grid-template-columns: 244px 244px 521px; grid-template-rows: 232px; grid-column-gap: 54px; } .more .resources div { background-color: #F5F5F5; padding: 10px 0; } .more .resources div p { font-size: 20px; font-family: Oswald-Regular; margin: 0; line-height: 36px; height: 36px; border-left: 2px solid #fe8e14; padding-left: 21px; } .more .resources div ul { margin-top: 22px; padding: 0 23px; } .more .resources div ul li { display: flex; align-items: center; } .more .resources div ul li:not(:last-child) { margin-bottom: 15px; } .more .resources div ul li picture { height: 60px; width: 100px; margin-right: 20px; position: relative; cursor: pointer; } .more .resources div ul li picture:hover::before { border-color: #fe8e14; } .more .resources div ul li picture:hover::after { border-left-color: #fe8e14; } .more .resources div ul li picture::before { content: ""; display: block; position: absolute; width: 27px; height: 27px; border-radius: 50%; border: 2px solid white; top: 50%; left: 50%; transform: translate(-50%, -50%); } .more .resources div ul li picture::after { content: ""; display: block; position: absolute; border-width: 5px 0px 5px 8px; border-style: solid; border-color: transparent transparent transparent white; top: 50%; left: 50%; transform: translate(-33%, -50%); } .more .resources div ul li picture img { height: 100%; width: 100%; object-fit: cover; } .more .resources div ul li a { font-size: 16px; color: #323234; flex: 1; } .more .resources div ul li a:hover { color: #fe8e14; } .dbrOverviewOther .basicBanner .bannerImg img { object-fit: contain; } .dbrOverviewOther .basicBanner .btns { display: inline-grid; grid-template-columns: auto auto; grid-gap: 10px 40px; } .dbrOverviewOther .basicBanner .btns a { margin: 0 } .dbrOverviewOther .basicBanner .intro { width: 40%; max-width: 600px; } #dbrOverviewWeb .basicCaseStudy .caseStudyList { grid-template-columns: minmax(50px, 165px) 12.8em 6.2em 18em; } #dbrOverviewDesktop .basicCaseStudy .caseStudyList { grid-template-columns: auto 14em 11.9em 11em 11.9em 10.4em 14.9em 21.3em 16.1em; } #dbrOverviewMobile .basicCaseStudy .caseStudyList { grid-template-columns: auto 18.4em 6.7em 18.1em 13.6em 19.2em 5.5em; } #dbrOverviewMobile .basicCaseStudy .caseStudyList, #dbrOverviewDesktop .basicCaseStudy .caseStudyList { grid-gap: 0; justify-content: space-between; } #dbrOverviewWeb .supportedSymbologies { margin-bottom: 0; } #dbrOverviewWeb .dbrBarcodes { height: 300px; width: 100%; background-color: #323234; } #dbrOverviewWeb .dbrBarcodes .barcodeContainer { height: 100%; align-items: center; grid-gap: 84px; padding: 0 85px; width: 100%; margin: 0 auto; max-width: 1920px; display: grid; grid-template-columns: repeat(6, 192px) 60px; } #dbrOverviewWeb .dbrBarcodes .barcodeContainer a { height: 188px; color: white; } #dbrOverviewWeb .dbrBarcodes .barcodeContainer a:last-child { line-height: 188px; font-size: 24px; font-family: Oswald-Regular; } #dbrOverviewWeb .dbrBarcodes .barcodeContainer a:hover { color: #fe8e14; } #dbrOverviewWeb .dbrBarcodes .barcodeContainer img { height: 126px; width: 100%; object-fit: cover; } #dbrOverviewWeb .dbrBarcodes .barcodeContainer p { margin: 18px 0 0 0; font-size: 16px; line-height: 22px; } .dbrOverviewSwiper { margin-bottom: 120px; } #BarcodeReaderOverview .dbrPlatformsContainer { background-color: #000000; } #BarcodeReaderOverview .dbrPlatformsContainer .dbrPlatforms { display: flex; height: 80px; color: white; align-items: center; flex-wrap: wrap; } #BarcodeReaderOverview .dbrPlatformsContainer .dbrPlatforms p { margin: 0; } #BarcodeReaderOverview .dbrPlatformsContainer .dbrPlatforms a { display: grid; padding: 0 55px; height: 100%; position: relative; align-items: center; grid-gap: 0 60px; } #BarcodeReaderOverview .dbrPlatformsContainer .dbrPlatforms a:nth-child(3) { grid-template-columns: repeat(5, auto); } #BarcodeReaderOverview .dbrPlatformsContainer .dbrPlatforms a:nth-child(4) { grid-template-columns: repeat(6, auto); } #BarcodeReaderOverview .dbrPlatformsContainer .dbrPlatforms a:not(:last-child)::after { content: ''; display: block; height: 27px; width: 0; border: 1px solid #666666; position: absolute; right: 0; } #BarcodeReaderOverview .dbrPlatformsContainer .dbrPlatforms a:hover { box-shadow: inset 0 2px 0 0 #fe9e14; } #BarcodeReaderOverview .dbrPlatformsContainer .dbrPlatforms a:hover svg *[stroke='#AAA' i] { stroke: white; } #BarcodeReaderOverview .dbrPlatformsContainer .dbrPlatforms a:hover svg *[fill='#AAA' i] { fill: white; } #dbrOverviewMobile .dbrOverviewAction .actionLeft { display: inline-block; width: 630px; margin-left: 50px; padding: 80px 0; } #dbrOverviewMobile .dbrOverviewAction .actionLeft i.app-store-badge { background: url(../../images/icons/apple-store.svg) no-repeat center; background-size: contain; height: 46px; width: 140px; display: inline-block; } #dbrOverviewMobile .dbrOverviewAction .actionLeft i.google-play-badge { background: url(../../images/icons/Google-play.svg) no-repeat center; background-size: contain; height: 46px; width: 160px; display: inline-block; } #dbrOverviewMobile .dbrOverviewAction .actionLeft .btnDownload { margin-left: 30px; vertical-align: top; line-height: 46px; } #dbrOverviewMobile .dbrOverviewAction .actionLeft p { margin-top: 16px; margin-bottom: 40px; } #dbrOverviewMobile .dbrOverviewAction .actionRight { display: inline-block; width: 460px; height: 330px; position: static; margin-left: 185px; vertical-align: bottom; } #dbrOverviewMobile .dbrOverviewAction .actionRight .phoneStyleDiv { position: relative; width: 100%; height: 100%; background: rgba(256, 256, 256, .2); border-top-left-radius: 60px; border-top-right-radius: 60px; padding: 96px 70px 0; } #dbrOverviewMobile .dbrOverviewAction .actionRight .phoneStyleDiv:before { content: ""; width: 174px; height: 10px; background: #FE8E14; border-radius: 5px; position: absolute; top: 27px; left: 144px; } #dbrOverviewMobile .dbrOverviewAction .actionRight .phoneStyleDiv > p { font-size: 16px; line-height: 24px; text-align: center; color: #FFFFFF; } #dbrOverviewMobile .dbrOverviewAction .actionRight .barcodeList { display: flex; justify-content: center; } #dbrOverviewMobile .dbrOverviewAction .actionRight .barcode { margin: 24px 25px 0; } #dbrOverviewMobile .dbrOverviewAction .actionRight .barcode img { width: 88px; height: 88px; margin-top: 0; } #dbrOverviewMobile .dbrOverviewAction .actionRight .barcode p { color: #FFFFFF; text-align: center; margin-top: 10px; } .dbrOverviewFeatures table td p.title { color: #FFFFFF; font-size: 20px; line-height: 36px; margin-top: 20px; text-align: left; } .dbrOverviewFeatures table td p.desc { color: #FFFFFF; font-size: 16px; line-height: 26px; margin-top: 15px; text-align: left; } #dbrOverviewDesktop .basicBanner .bannerImg { width: 620px; height: 420px; } #dbrOverviewDesktop .basicBanner .bannerImg .bannerSwiper { width: 100%; height: 100%; } #dbrOverviewDesktop .basicBanner .bannerImg .bannerSwiper .swiper-wrapper { height: 380px; } #dbrOverviewDesktop .basicBanner .bannerImg .bannerSwiper .swiper-wrapper .swiper-slide { background: #272525; } #dbrOverviewDesktop .basicBanner .bannerImg .bannerSwiper .swiper-wrapper img { width: 100%; height: 100%; } #dbrOverviewDesktop .basicBanner .bannerImg .bannerSwiper .swiper-pagination { text-align: center; margin-top: 10px; } #dbrOverviewDesktop .basicBanner .bannerImg .bannerSwiper .swiper-pagination-bullet { width: 10px; height: 10px; background: #000000; border: 0; } #dbrOverviewDesktop .basicBanner .bannerImg .bannerSwiper .swiper-pagination-bullet-active { background: #AAAAAA; } #dbrOverviewMobile .no-login-footer .row > div:first-child img, #dbrOverviewDesktop .no-login-footer .row > div:first-child img { width: auto; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table tr td, #dbrOverviewDesktop .dbrOverviewFeatures .dbrFeaturesContent table tr td { padding-bottom: 90px; } #dbrOverviewDesktop .dbrOverviewFeatures .dbrFeaturesContent table tr td:first-child { padding-right: 110px; } #dbrOverviewDesktop .dbrOverviewFeatures .dbrFeaturesContent table tr td:nth-child(2) { padding-right: 130px; } #dbrOverviewDesktop .dbrOverviewFeatures .dbrFeaturesContent table tr td:nth-child(3) { width: 355px; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table tr:last-child td, #dbrOverviewDesktop .dbrOverviewFeatures .dbrFeaturesContent table tr:last-child td { padding-bottom: 0; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table { margin: auto; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table tr td { width: 480px; height: auto; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table tr td:nth-child(3) { width: 305px; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table tr td:nth-child(1) p { width: 240px; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table tr td:nth-child(2) p { width: 300px; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table tr td:nth-child(3) p { width: 100%; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table tr:last-child td:nth-child(1) p { width: 300px; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table tr:last-child td:nth-child(2) p { width: 220px; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table tr:last-child td:nth-child(3) p { width: 220px; } /* new DBR overview style */ #BarcodeReaderOverview .dbr-banner { background-color: #323234; padding-bottom: 40px; } #BarcodeReaderOverview .dbr-banner h1 + p { font-size: 24px; } #BarcodeReaderOverview .dbr-banner .btn-in-banner .btns__online-demo-btn { transform: none; box-shadow: none; } #BarcodeReaderOverview .dbr-banner .featureList { display: grid; align-items: center; justify-content: center; grid-gap: 10px 65px; grid-template-columns: repeat(3, auto); color: #AAAAAA; } #BarcodeReaderOverview .dbr-banner .featureList p::before { content: ""; display: inline-block; width: 16px; height: 13px; background: url(../../images/icons/dbr/tick.svg) center no-repeat; background-size: contain; margin-right: 8px; } #BarcodeReaderOverview .dbr-platforms { display: grid; grid-gap: 30px; grid-template-columns: repeat(3, 1fr); } #BarcodeReaderOverview .dbr-platforms p { color: #323234; margin-bottom: 0; } #BarcodeReaderOverview .dbr-platforms > a { display: block; background-color: #F5F5F5; border: 1px solid #D9D9D9; padding: 25px 30px 25px 40px; } #BarcodeReaderOverview .dbr-platforms > a > div { display: flex; margin-top: 45px; align-items: center; gap: 15px; padding-right: 20px; } #BarcodeReaderOverview .dbr-platforms p.title { font-size: 24px; font-family: 'Oswald-Regular'; } #BarcodeReaderOverview .dbr-platforms > a:hover p:last-child { color: #fe8e14; } #BarcodeReaderOverview .dbr-platforms > a:hover p:last-child::after { transform: translate(calc(100% + 10px), -50%); } #BarcodeReaderOverview .dbr-platforms p:last-child { font-size: 16px; margin-left: auto; position: relative; } #BarcodeReaderOverview .dbr-platforms p:last-child::after { content: ""; position: absolute; display: inline-block; width: 14px; height: 9px; background: url(../../images/homepage/orange-arrow.svg) center no-repeat; background-size: contain; top: 50%; right: 0; transform: translate(calc(100% + 5px), -50%); transition: all .2s ease; } .customers-stories { padding: 0 100px; display: flex; align-items: center; gap: 20px 30px; justify-content: space-around; flex-wrap: wrap; } .customers-stories img { object-fit: contain; filter: grayscale(1); } .customers-stories img:hover { filter: grayscale(0); } #dynamsoft-header #mdHeader { background-color: #323232; } #dynamsoft-header #mdHeader #mdMenu > li > a { color: white; } #cp-header .header-visitor a:link, .header-visitor a:visited, .header-visitor a:hover { color: white; } #overall-header .ds-logo { display: block; background: url(../../images/dynamsoft-logos/logo-dynamsoft-white.svg) no-repeat 0; } #cp-header .action-buttons a:hover { box-shadow: -4px 4px 0 0 white; } #cp-header .userbox .user-profile { background-color: #000000; } /* media query */ @media (min-width: 768px) { .dbrVideo .switchIcons .switchCircle:nth-child(2) { width: fit-content; padding: 0 20px; } } @media (min-width: 992px) { .alert-primary.countryAlert .container { max-width: calc(100% - 40px); } } @media (min-width: 1200px) { .dbrOverviewOther .basicBanner { background: #323234; height: 480px; } .whyDBR .rightSection .featuresList { height: 635px; width: 600px; } .whyDBR .rightSection .featuresList ul { padding: 35px 96px; } /* Spanish why */ .whyDBR.ESDBR .leftSection { padding: 100px 90px; } .dbrOverviewPowerful.basicPowerful { height: 538px; } .basicPowerful .powerfulLeft { padding-top: 30px; } .alert-primary.countryAlert .container { max-width: calc(100% - 100px); } } @media (min-width: 1680px) { /* new DBR overview style */ #BarcodeReaderOverview .dbr-banner h1 { font-size: 48px; } #BarcodeReaderOverview .dbr-banner p { margin-bottom: 0; } .dbrOverviewFeatures table { position: relative; top: -42px; margin: auto; } .dbrOverviewPowerful.basicPowerful { height: 558px; } .basicPowerful .powerfulLeft { padding-top: 80px; } .alert-primary.countryAlert .container { max-width: 1640px } .dbrOverviewOther .basicBanner { background: #323234; height: 480px; } .dbrOverviewOther .basicBanner .bannerImg { width: 620px; height: 380px; top: 50px; } /* Spanish swiper */ .basicSwiper.ESSwiper .index-swiper-container { height: 330px; } .basicSwiper.ESSwiper i.arrow-left, .basicSwiper.ESSwiper i.arrow-right { height: 85%; } #BarcodeReaderOverview .container { max-width: 1630px; } .dbrVideo .videoContainer { height: 570px; } .dbrVideo .strengthLine { height: 566px; padding-top: 30px; } .dbrVideo .strengthLine.bgLeft { background-size: 95%; } .dbrVideo .switchIcons { background-size: 95%; } .dbrVideo .strengthLine .strengthImg { width: 736px; height: 408px; margin-top: 60px; margin-left: 0px; } .dbrVideo .strengthLine .disc { width: 655px; margin-left: 120px; } p.subp { font-size: 16px; } /*.swiper-slide, .swiper-wrapper { max-height: 300px !important; }*/ .dbr-overview .dbrOverviewReliable .disc { padding: 0 280px; } #dbrOverviewDesktop .basicBanner .bannerImg { right: 160px; } } @media (max-width: 1920px) { #dbrOverviewWeb .dbrBarcodes .barcodeContainer { grid-gap: 0; justify-content: space-between; } } @media (max-width: 1679px) { /* new DBR overview style */ #BarcodeReaderOverview .dbr-banner .featureList { grid-gap: 10px 25px; } #BarcodeReaderOverview .dbr-platforms > a { padding: 25px; } #BarcodeReaderOverview .dbr-platforms > a > div { gap: 10px; } .customers-worldwide { justify-content: center; padding: 0 80px; } #BarcodeReaderOverview .dbrPlatformsContainer .container { max-width: calc(100% - 100px); } #BarcodeReaderOverview .dbrPlatformsContainer .dbrPlatforms a { grid-gap: 10px; padding: 0 30px; } #BarcodeReaderOverview .dbrPlatformsContainer .dbrPlatforms a:nth-child(3) { flex: 1; } #BarcodeReaderOverview .dbrPlatformsContainer .dbrPlatforms a:nth-child(4) { flex: 1; } #dbrOverviewMobile .dbrOverviewPlatform { padding: 40px 60px; height: auto; } #dbrOverviewMobile .dbrOverviewPlatform .platformList { grid-gap: 40px 45px; } #dbrOverviewMobile .dbrOverviewPlatform .platform .npm p { font-size: 12px; } #dbrOverviewMobile .basicBanner .intro { width: 540px; line-height: 34px; font-size: 22px; } #dbrOverviewMobile .basicBanner .downloadBtn { padding: 0px 40px; height: 56px; line-height: 48px; font-size: 22px; } #dbrOverviewMobile .dbrMobilePlatforms label, #dbrOverviewDesktop .dbrMobilePlatforms label { font-size: 16px; line-height: 36px; margin-right: 80px; } #dbrOverviewMobile .dbrMobilePlatforms .platformList li, #dbrOverviewDesktop .dbrMobilePlatforms .platformList li { margin-right: 50px; } #dbrOverviewMobile .dbrMobilePlatforms .platformList li:last-child, #dbrOverviewDesktop .dbrMobilePlatforms .platformList li:last-child { margin-right: 0; } #dbrOverviewWeb .dbrBarcodes .barcodeContainer { grid-template-columns: repeat(6, 170px) 60px; } #dbrOverviewMobile .basicCaseStudy .caseStudyList { font-size: 7px; } #dbrOverviewDesktop .basicCaseStudy .caseStudyList { font-size: 7px; } #dbrOverviewDesktop .basicCaseStudy .caseStudyList p { font-size: 16px; } #dbrOverviewMobile .phoneApps { height: 80px; } .dbrJsFeatures .features__wrapper .feature_image img { height: 200px; } #BarcodeReaderOverview .dbrOverviewVideos .dbrVideoContainer .dbrVideoBox .videoDesc { height: 550px; } .more { flex-direction: column; align-items: center; } .more h3 { width: 100%; margin-bottom: 30px; text-align: center; } #dbrOverviewWeb .featuresContainer .featureItem { padding: 60px 40px; } #dbrOverviewWeb .featuresContainer .icon { left: 40px; } .dbrExploreMore .exploreContainer > a { width: 300px; padding: 40px; } #dbrOverviewWeb .dbrJsFrameworks__item { width: 120px; } /* dbr overview A/B test for banner 2022/12/19 */ .dbrOverviewBannerA { height: auto; padding: 70px 0; } .dbrOverviewBannerA .container { max-width: calc(100% - 100px); } .dbrOverviewBannerA .innerBanner { width: 870px; } .dbrOverviewBannerA .innerBanner__desc { font-size: 18px; letter-spacing: 0; } .dbrOverviewBannerFeatures ul { width: 58%; } .dbrOverviewBannerB.dbrOverviewBannerFeatures .main { width: 80%; } .dbrOverviewBannerB.dbrOverviewBannerFeatures .main ul { width: 90%; } /* end of dbr overview A/B test for banner 2022/12/19 */ #BarcodeReaderOverview h2 { font-size: 32px; } /* dbr overview new style 2022/11/03 */ /* dbr overview banner using BEM */ #BarcodeReaderOverview .dbrOverviewBanner { margin-top: 50px; } .innerBanner__head { font-size: 36px; line-height: 46px; } .innerBanner__feature-list { margin: 0 0; width: 90%; } /* end of dbr overview banner using BEM */ .store-badge i { width: 130px; height: 43px; } /* new platforms style */ .platforms__item { width: 32%; } .platform__intro { width: 100%; } .platform__app { width: 100%; padding: 22px; } .platform__intro { padding: 20px; height: 240px; } .platform__title { font-size: 20px; } .platforms__item:first-child .platform__icon-list { margin-top: 35px; } .platforms__item:nth-child(2) .platform__icon-list .platform__icon { width: 33%; } .platforms__item:nth-child(2) .platform__icon-list .platform__icon:nth-child(n+4) { margin-top: 10px; } .platforms__item:last-child .platform__icon-list { padding: 0 0; margin-top: 60px } .app__title, .app__link { font-size: 18px; } /* end of dbr overview new style 2022/11/03 */ /**/ #BarcodeReaderOverview .basicBanner .bannerContent .desc h1 { font-size: 34px; } /* dbr overview new style 2022/08/29 */ #BarcodeReaderOverview .dbrOverviewVideos .dbrVideoContainer .dbrVideoBox { width: 32%; } #BarcodeReaderOverview .dbrOverviewVideos .dbrVideoContainer .dbrVideoBox .videoDesc { padding: 20px; } #BarcodeReaderOverview .dbrOverviewVideos .dbrVideoContainer .dbrVideoBox:nth-child(2) .videoDesc ul li { width: 100%; } #BarcodeReaderOverview .dbrDemo .dbrDemoContainer .dbrDemoBox { width: 32%; } #BarcodeReaderOverview .dbrDemo .dbrDemoContainer .dbrDemoBox .link p { font-size: 18px; } #BarcodeReaderOverview .dbrDemo .dbrDemoContainer .dbrDemoBox .link a { font-size: 16px; } #BarcodeReaderOverview .whyChooseDbr { margin-top: 100px; } #BarcodeReaderOverview .whyChooseDbr .reasons > div { width: 32%; height: 275px; padding: 30px; } #BarcodeReaderOverview .whyChooseDbr .reasons div p:first-child { font-size: 22px; } #BarcodeReaderOverview .whyChooseDbr .reasons > div:nth-child(2) > div img:first-child { width: 65px; } #BarcodeReaderOverview .whyChooseDbr .reasons > div:nth-child(2) > div img:nth-child(2) { width: 80px; } /* Spanish banner */ .basicBanner.ESBanner { height: 460px; } /* Spanish feature */ .basicFeature .featureBox.ESFeature .featureBoxBottom { height: auto; } .f24 { font-size: 20px !important; } .f18 { font-size: 16px !important; } .logoDivider { height: 50px; } .actionRight img { width: 497px; } .actionRight { top: -50px; } .basicPowerful p.disc { line-height: 22px; font-size: 16px; } .dbrOverviewPlatform h2 { margin-bottom: 48px; } #BarcodeReaderOverview i.dbr-white-logo { width: 332px; height: 45.6px; } .dbrOverviewPlatform table { margin-bottom: 40px !important; } .whitePlayBtn.orange::after { border-top: 20px solid transparent; border-left: 35px solid white; border-bottom: 20px solid transparent; } html { font-size: 8px; } .basicSwiper .swiper-slide .slide-left { width: 650px; padding-left: 60px; } .powerfulList li a:last-child { position: absolute; bottom: 30px; } .basicSwiper .swiper-slide .slide-left .personWords { font-size: 16px; line-height: 30px; } .dbrOverviewSwiper .slide-right { width: auto; padding-right: 60px; } .dbrOverviewSwiper .slide-right div { width: 328px; height: 224px; } .basicReliable.dbrOverviewReliable .functionBox { padding: 0px 19px 49px 40px; height: 290px; min-height: 290px; } p.supportIconWrapper > span { padding-right: 7px; } .dbrOverviewFeatures .dbrFeaturesContent { padding: 0px 70px; padding-bottom: 50px; } .dbrOverviewFeatures table td { height: 215px; width: 381px; vertical-align: top; padding-bottom: 20px; padding-right: 25px; } .dbrOverviewFeatures table td p { font-size: 18px; margin-top: 14px; line-height: 25px; } .basicPowerful .powerfulList li { width: 340px; height: 266px; padding: 44px 34px 24px; } .basicPowerful .powerfulList li:first-child { height: 286px; width: 708px; } .basicPowerful .powerfulList li:last-child { margin-left: 28px; } .basicFeature .featureBox .featureBoxBottom { padding: 37px 24px 40px 24px; height: 290px; } .basicFeature .featureBox .featureBoxBottom .cnt { min-height: 140px; } .featureBoxBottom .pt40 { padding-top: 0px; } .dbr-overview .dbrOverviewReliable .disc { padding: 0 140px; } /* desktop */ .dbrOverviewOther .basicReliable .functionBox { height: 286px; width: 356px; } #dbrOverviewDesktop .basicReliable .functionBox { padding: 0px 39px 49px 40px; height: 300px; min-height: 300px; } .dbrOverviewOther .dbrOverviewFeatures .dbrFeaturesContent { padding: 0px 50px; } /*#dbrOverviewDesktop .dbrOverviewFeatures table td p, #dbrOverviewMobile .dbrOverviewFeatures table td p { font-size: 16px; margin-top: 15px; line-height: 28px; }*/ #dbrOverviewDesktop .featureBoxBottom .cnt { min-height: 100px; } #dbrOverviewDesktop .featureBoxBottom .pt25 { padding-top: 0px; } /* web */ #dbrOverviewWeb .basicReliable .functionBox { height: 316px; } #dbrOverviewWeb .featuresContainer { margin: 0; height: auto; } #dbrOverviewWeb .dbrOverviewAction .actionLeft a:last-child { margin: 20px 0 0 20px; line-height: 51px; } /* mobile */ /* dbr mobile */ #dbrOverviewMobile .actionRight { position: absolute; right: 0px; } #dbrOverviewMobile .actionRight img { width: 278px; margin-top: -17px; } #dbrOverviewMobile .actionLeft p.badge img { width: 159px; } #dbrOverviewMobile .basicFeature .featureBox .featureBoxBottom { height: 350px; } #dbrOverviewMobile .featureBox p:last-child { position: absolute; bottom: 32px; } .barcode-img { height: 160px; margin-right: 50px; } .icon-arrow-right { width: 28px; } .icon-arrow-left { width: 28px; } .orangeAngelList li { font-size: 14px; line-height: 20px; } .orangeAngelList li:before { border-width: 4px 10px 4px 0; left: -15px; top: 7px; } .dbrVideo .strengthLine { height: 430px; } .dbrVideo .strengthLine.bgLeft { background-size: 95%; } .dbrVideo .videoContainer { height: 430px; } .dbrVideo .switchIcons { padding-bottom: 30px; padding-left: 0; text-align: center; } .dbrVideo .switchIcons .graylink { font-size: 16px; line-height: 37px; } .dbrVideo .switchIcons .switchCircle { font-size: 18px } .dbrVideo .switchIcons .switchCircle:nth-child(2) { margin-right: 0; } .dbrVideo .switchIcons { } .dbrVideo .strengthLine .strengthImg { width: 510px; height: 283px; margin-top: 58px; margin-left: 0px; } .dbrVideo .strengthLine .disc { width: 510px; margin-left: 53px; } .dbrOverviewMobile .dbrOverviewAction p { font-size: 18px; line-height: 26px; width: 100% } p.subp { font-size: 14px; } /*.swiper-slide, .swiper-wrapper { max-height: 280px !important; }*/ .applicationItem { padding: 15px 20px; min-width: 48%; min-height: unset; } .applicationItem:last-child { margin: 40px 0 0 0; } .applicationItem p.supportIconWrapper { margin-bottom: 0; margin-top: 10px; } .applicationItem .name { /* max-width: 175px;*/ margin-right: 16px; } /* Spanish name */ .applicationItem .name.ESName { max-width: 118px; } .orangeAngelList.inlineBlockList li { margin-right: 7px; } .store-badge { display: flex; justify-content: center; flex-wrap: wrap; } #BarcodeReaderOverview .exploreSolution { padding: 75px 0; } #BarcodeReaderOverview .exploreSolution .solution__title { margin-bottom: 20px; } #BarcodeReaderOverview .exploreSolution .solution__desc { font-size: 20px; line-height: 30px; margin-bottom: 68px; padding: 0 5px; } #BarcodeReaderOverview .exploreSolution .solution__list li:nth-child(2) { margin: 0 180px; } #BarcodeReaderOverview .exploreSolution .solution__list li .solution__list-banner { width: 200px; height: 200px; } #BarcodeReaderOverview .exploreSolution .solution__list li .solution__list-desc { font-size: 18px; line-height: 36px; } #dbrOverviewMobile .dbrOverviewAction .actionLeft { display: inline-block; width: 540px; margin-left: 50px; padding: 80px 0; } #dbrOverviewMobile .dbrOverviewAction .actionLeft .btnDownload { margin-left: 30px; vertical-align: top; line-height: 46px; } #dbrOverviewMobile .dbrOverviewAction .actionLeft p { margin-top: 16px; margin-bottom: 40px; } #dbrOverviewMobile .dbrOverviewAction .actionRight { display: inline-block; width: 460px; height: 330px; position: static; margin-left: 185px; vertical-align: bottom; } #dbrOverviewMobile .dbrOverviewAction .actionRight .phoneStyleDiv { position: relative; width: 100%; height: 100%; background: rgba(256, 256, 256, .2); border-top-left-radius: 60px; border-top-right-radius: 60px; padding: 96px 70px 0; } #dbrOverviewMobile .dbrOverviewAction .actionRight .phoneStyleDiv:before { content: ""; width: 174px; height: 10px; background: #FE8E14; border-radius: 5px; position: absolute; top: 27px; left: 144px; } #dbrOverviewMobile .dbrOverviewAction .actionRight .phoneStyleDiv > p { font-size: 16px; line-height: 24px; text-align: center; color: #FFFFFF; } #dbrOverviewMobile .dbrOverviewAction .actionRight .barcodeList { display: flex; justify-content: center; } #dbrOverviewMobile .dbrOverviewAction .actionRight .barcode { margin: 24px 25px 0; } #dbrOverviewMobile .dbrOverviewAction .actionRight .barcode p { color: #FFFFFF; text-align: center; margin-top: 10px; } #dbrOverviewMobile table td p.title, #dbrOverviewDesktop table td p.title { font-size: 18px; } #dbrOverviewMobile table td p.desc, #dbrOverviewDesktop table td p.desc { font-size: 14px; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table tr td, #dbrOverviewDesktop .dbrOverviewFeatures .dbrFeaturesContent table tr td { padding-bottom: 60px; } #dbrOverviewDesktop .dbrOverviewFeatures .dbrFeaturesContent table tr td:first-child { padding-right: 65px; } #dbrOverviewDesktop .dbrOverviewFeatures .dbrFeaturesContent table tr td:nth-child(2) { padding-right: 100px; } #dbrOverviewDesktop .dbrOverviewFeatures .dbrFeaturesContent table tr td:nth-child(3) { width: 355px; padding-right: 0; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table tr:last-child td, #dbrOverviewDesktop .dbrOverviewFeatures .dbrFeaturesContent table tr:last-child td { padding-bottom: 0; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table tr td { width: 380px; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table tr td:nth-child(3) { width: 270px; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table tr td:nth-child(1) p { width: 240px; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table tr td:nth-child(2) p { width: 300px; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table tr td:nth-child(3) p { width: 100%; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table tr:last-child td:nth-child(1) p { width: 250px; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table tr:last-child td:nth-child(2) p { width: 220px; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table tr:last-child td:nth-child(3) p { width: 220px; } } @media (max-width: 1499px) { .dbrOverviewBannerA .bannerImg { width: 450px; height: 277px; } } @media (max-width: 1399px) { /* new DBR overview style */ #BarcodeReaderOverview .dbr-banner h1 + p, #BarcodeReaderOverview .dbr-platforms p.title { font-size: 20px; } #BarcodeReaderOverview .dbrPlatformsContainer .dbrPlatforms a svg { transform: scale(.8); } #BarcodeReaderOverview .dbrPlatformsContainer .dbrPlatforms a { padding: 0 30px; } #dbrOverviewMobile .dbrOverviewPlatform { padding: 40px 35px; } #dbrOverviewMobile .dbrOverviewPlatform .platformList { grid-gap: 40px 45px; } #dbrOverviewMobile .dbrOverviewPlatform .platform .npm p { font-size: 11px; } #dbrOverviewWeb .dbrBarcodes { height: auto; padding: 40px 0 20px 0; } #dbrOverviewWeb .dbrBarcodes .barcodeContainer { grid-template-columns: repeat(5, 170px); grid-gap: 20px; } #dbrOverviewWeb .dbrBarcodes .barcodeContainer a:last-child { line-height: 126px; text-align: center; } #BarcodeReaderOverview .dbr-banner .featureList p { font-size: 14px; } .dbrJsFeatures .features__wrapper { grid-gap: 35px; } .dbrJsFeatures .features__wrapper .feature_detail { padding: 25px; height: auto; } .dbrExploreMore .exploreContainer > a { width: 265px; padding: 30px; } #dbrOverviewWeb .dbrJsFrameworks__main { display: grid; grid-template-columns: repeat(auto-fit, 115px); } #dbrOverviewWeb .dbrJsFrameworks__item { width: auto; } #dbrOverviewMobile .basicBanner .intro { width: 470px; line-height: 34px; font-size: 20px; } #dbrOverviewMobile .basicBanner .downloadBtn { padding: 0px 40px; height: 56px; line-height: 48px; font-size: 20px; } #dbrOverviewMobile .dbrOverviewAction .actionLeft { display: inline-block; width: 540px; margin-left: 50px; padding: 80px 0; } #dbrOverviewMobile .dbrOverviewAction .actionLeft .btnDownload { margin-left: 30px; vertical-align: top; line-height: 46px; } #dbrOverviewMobile .dbrOverviewAction .actionLeft p { margin-top: 16px; margin-bottom: 40px; } #dbrOverviewMobile .dbrOverviewAction .actionRight { display: inline-block; width: 460px; height: 330px; position: static; margin-left: 40px; vertical-align: bottom; } #dbrOverviewMobile .dbrOverviewAction .actionRight .phoneStyleDiv { position: relative; width: 100%; height: 100%; background: rgba(256, 256, 256, .2); border-top-left-radius: 60px; border-top-right-radius: 60px; padding: 96px 70px 0; } #dbrOverviewMobile .dbrOverviewAction .actionRight .phoneStyleDiv:before { content: ""; width: 174px; height: 10px; background: #FE8E14; border-radius: 5px; position: absolute; top: 27px; left: 144px; } #dbrOverviewMobile .dbrOverviewAction .actionRight .phoneStyleDiv > p { font-size: 16px; line-height: 24px; text-align: center; color: #FFFFFF; } #dbrOverviewMobile .dbrOverviewAction .actionRight .barcodeList { display: flex; justify-content: center; } #dbrOverviewMobile .dbrOverviewAction .actionRight .barcode { margin: 24px 25px 0; } #dbrOverviewMobile .dbrOverviewAction .actionRight .barcode p { color: #FFFFFF; text-align: center; margin-top: 10px; } .dbrOverviewFeatures table td p.title { color: #FFFFFF; font-size: 18px; line-height: 34px; margin-top: 20px; text-align: left; } .dbrOverviewFeatures table td p.desc { color: #FFFFFF; font-size: 14px; line-height: 24px; margin-top: 15px; text-align: left; } #dbrOverviewDesktop .basicBanner .bannerImg { width: 565px; height: 367px; } #dbrOverviewDesktop .basicBanner .bannerImg .bannerSwiper .swiper-wrapper { height: 347px; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table tr td { width: 320px; } } @media (max-width: 1299px) { .dbrOverviewBannerA .bannerImg { width: 325px; height: 200px; } } @media (max-width: 1199px) { /* new DBR overview style */ #BarcodeReaderOverview .dbr-platforms { grid-gap: 15px; } #BarcodeReaderOverview .dbr-platforms p:last-child { font-size: 14px; } #BarcodeReaderOverview .dbr-platforms > a { padding: 20px; } #BarcodeReaderOverview .dbr-platforms > a > div { gap: 5px; } #BarcodeReaderOverview .dbrOverviewCompanys .customer-logos { gap: 0; } #BarcodeReaderOverview .dbrPlatformsContainer .container { max-width: calc(100% - 40px); } #BarcodeReaderOverview .dbrPlatformsContainer .dbrPlatforms a { padding: 0 20px; } .dbrOverviewBannerA .bannerImg { display: none; } #dbrOverviewMobile .dbrOverviewPlatform .platformList { grid-template-columns: 1fr 1fr; grid-gap: 40px; } #dbrOverviewMobile .dbrOverviewPlatform .platformList .platform:last-child { grid-column: 1 / 3; } #dbrOverviewMobile .dbrOverviewPlatform .platform .npm p { font-size: 16px; } #dbrOverviewWeb .dbrBarcodes .barcodeContainer { grid-template-columns: repeat(auto-fit, 180px); grid-gap: 20px; } #dbrOverviewMobile .basicCaseStudy .caseStudyList { font-size: 6px; } #dbrOverviewDesktop .basicCaseStudy .caseStudyList { font-size: 6px; } .dbrOverviewOther .basicBanner .btns { grid-gap: 10px 20px; } .dbrOverviewOther .basicBanner .intro { width: 55%; } .dbrJsFeatures .features__wrapper { grid-template-columns: repeat(2, 1fr); } #BarcodeReaderOverview .dbrOverviewVideos .dbrVideoContainer .dbrVideoBox .videoDesc { height: 570px; } .more .resources { grid-template-columns: 250px 250px 440px; grid-column-gap: 20px; grid-template-rows: auto; } .more .resources div { padding-bottom: 15px; } #dbrOverviewWeb .dbrJsFrameworks__item { margin-bottom: 15px; } #dbrOverviewWeb .dbrJsFrameworks__main { display: grid; grid-template-columns: repeat(auto-fit, 140px); } /* dbr overview A/B test for banner 2022/12/19 */ .dbrOverviewBannerA { height: auto; padding: 70px 0; } .dbrOverviewBannerA .container { max-width: calc(100% - 40px); } .dbrOverviewBannerA .innerBanner { width: 100%; } .dbrOverviewBannerA .innerBanner__desc { font-size: 16px; line-height: 24px; } .dbrOverviewBannerA .bannerImg { width: 410px; height: 270px; } .dbrOverviewBannerB.dbrOverviewBannerFeatures .main { width: 100%; } .dbrOverviewBannerB.dbrOverviewBannerFeatures .main ul { width: 100%; } /* end of dbr overview A/B test for banner 2022/12/19 */ #BarcodeReaderOverview h2 { font-size: 28px; } /* dbr overview new style 2022/11/03 */ /* dbr overview banner using BEM */ #BarcodeReaderOverview .dbrOverviewBanner .innerBanner { flex-direction: column; } .innerBanner__left, .innerBanner__right { width: 100%; } .innerBanner__right { justify-content: flex-start; margin-top: 20px; } .innerBanner__feature-list { width: 100%; } .innerBanner__feature-list ul { width: 90%; } /* end of dbr overview banner using BEM */ .store-badge i { width: 110px; height: 43px; } #BarcodeReaderOverview .whyChooseDbr { margin-top: 80px; } /* new platforms style */ .platforms__item:first-child .platform__icon-list { margin-top: 28px; } .platforms__item:last-child .platform__icon-list { margin-top: 40px; } .platform__app { padding: 20px; } .app__title, .app__link { font-size: 16px; line-height: 22px; } /* end of dbr overview new style 2022/11/03 */ /**/ #BarcodeReaderOverview .basicBanner .bannerContent .desc { width: 600px; } /* 2022/09/06 Frank dbr web explore more */ .dbrExploreMore .exploreContainer > a { width: 47%; } /* dbr overview new style 2022/08/29 */ #BarcodeReaderOverview .dbrOverviewVideos { margin-top: 80px; } #BarcodeReaderOverview .dbrOverviewVideos .dbrVideoContainer .dbrVideoBox .videoDesc { padding: 18px; } #BarcodeReaderOverview .dbrOverviewVideos .dbrVideoContainer .dbrVideoBox .videoDesc p.videoTitle { margin: 0 0 18px 0; font-size: 20px; } #BarcodeReaderOverview .whyChooseDbr .reasons > div { padding: 20px; height: 285px; } #BarcodeReaderOverview .whyChooseDbr .reasons div p:first-child { font-size: 18px; } #BarcodeReaderOverview .whyChooseDbr .reasons > div > div img { width: 30%; } /* Spanish swiper */ .basicSwiper.ESSwiper .index-swiper-container { height: 320px; } /* Spanish feature */ .basicFeature .featureBox.ESFeature .featureBoxBottom .cnt { min-height: 180px; } .whyDBR .row { height: 983px; } .whyDBR .container { max-width: 1200px; } .whyDBR .leftSection { height: auto; padding: 100px 0 60px 0; } .whyDBR .leftSection .leftContent { display: flex; width: 878px; margin: 0 auto; } .whyDBR .leftSection .leftContent i.icon-ISO { margin-top: 0; margin-left: 96px; } .whyDBR .leftSection .leftContent .whyDesc { height: auto; width: 50%; } .whyDBR .rightSection { padding-bottom: 100px; } .whyDBR .rightSection .featuresList { margin: 0 auto; } .logoDivider { height: 40px; } .basicPowerful .powerfulList li span.icon i { display: inline-block; width: 30px; height: 30px; background-size: contain !important; } .powerfulList li a:last-child { position: absolute; bottom: 30px; } .basicCustomers .customer-logos li i.company-logo { transform: scale(.8); } .slide-block { height: 100%; display: block; } .dbrOverviewSwiper .swiper-slide .slide-left { width: 570px; display: table-cell; vertical-align: middle; height: 100%; float: none; } .slide-right.hide-sm.hide-md { display: table-cell; vertical-align: middle; height: 100%; float: none; padding-right: unset; padding-left: 40px; } .dbrOverviewSwiper .slide-right div { zoom: 0.8; } .basicReliable.dbrOverviewReliable .functionBox { padding: 0px 19px 49px 20px; } .functionList > div:last-child { margin-top: 60px; } .dbrOverviewFeatures { width: 100%; max-width: 100%; } .basicPowerful .powerfulLeft { padding-left: 0px; padding-top: 0px; text-align: center; } .basicPowerful .powerfulList { padding-top: 0; margin-top: 15rem; text-align: center; } .basicPowerful .powerfulList li { width: 340px; height: 274px; padding: 34px 24px 14px; } .basicPowerful .powerfulList li:first-child { height: 236px; } .basicPowerful .powerfulList li span.icon { left: 24px; } .basicPowerful p.disc { line-height: 23px; font-size: 16px; } #dwtOverviewFeature { padding: 0px; } #dwtOverviewFeature .featureBoxBottom p:last-child { padding: 0px; } .basicFeature .featureBox .featureBoxBottom .cnt { min-height: 120px; } .basicFeature .featureBox .featureBoxBottom .pt40 { font-size: 20px; } .dbr-overview .dbrOverviewReliable .disc { padding: 0 45px; } /* desktop */ .dbrOverviewOther .basicReliable .functionBox { height: 286px; width: 446px; } #dbrOverviewDesktop .basicReliable .functionBox { height: 286px; width: 100%; } .dbrOverviewOther .basicReliable .functionBox p { min-height: 80px; } #dbrOverviewDesktop .featureBoxBottom .cnt { min-height: 120px; } #dbrOverviewDesktop .featureBoxBottom .f24 { font-size: 18px !important; } /* web */ #dbrOverviewWeb .dbrOverviewPlatform td { display: inline-block; width: 50% !important; margin-top: 20px; position: relative; } #dbrOverviewWeb .featureBox p:last-child { font-size: 20px !important; } #dbrOverviewWeb .basicFeature .featureBox .featureBoxBottom { height: 330px; } #dbrOverviewWeb .featuresContainer { height: 1000px; } #dbrOverviewWeb .dbrOverviewAction .actionLeft a:last-child { margin: 20px 0 0 0; line-height: 51px; } #dbrOverviewWeb .basicReliable .functionList div .functionBox { margin: 0 0 !important; float: none !important; } #dbrOverviewMobile .basicReliable .functionList div .functionBox { margin: 0 0 !important; float: none !important; } /* mobile */ #dbrOverviewMobile .actionRight { position: absolute; right: 10px; } #dbrOverviewMobile .featureBox p:last-child { font-size: 20px !important; bottom: 22px; } .orangeAngelList li { font-size: 14px; line-height: 20px; } .orangeAngelList li:before { border-width: 4px 10px 4px 0; left: -15px; top: 7px; } .dbrVideo .strengthLine { height: 450px; } .dbrVideo .strengthLine.bgLeft { background-size: 95%; } .dbrVideo .videoContainer { height: 450px; } .dbrVideo .switchIcons { padding-bottom: 30px; padding-left: 0; text-align: center; } .dbrVideo .switchIcons .graylink { font-size: 14px; line-height: 37px; } .dbrVideo .switchIcons .switchCircle { font-size: 16px; } .dbrVideo .switchIcons .switchCircle:nth-child(2) { margin-right: 0; } .dbrVideo .strengthLine .strengthImg { width: 420px; height: 234px; margin-top: 84px; margin-left: 0px; } .dbrVideo .strengthLine .disc { width: 480px; margin-left: 20px; } .dbrOverviewMobile .dbrOverviewAction p { font-size: 16px; line-height: 24px; width: 100%; } #dbrOverviewMobile .actionLeft p.badge { margin-top: 20px; } /*.swiper-slide, .swiper-wrapper { max-height: 280px !important; }*/ .applicationItem { width: 100%; margin: 30px 0 0 0; } .applicationItem:last-child { margin-right: 0; margin-top: 30px; } .applicationItem p.supportIconWrapper { margin-bottom: 0; margin-top: 10px; } .applicationItem .name { /*max-width: 175px; margin-right: 16px;*/ font-size: 20px; } /* footer no login */ .dbrOverviewDownload .no-login-footer .row img { max-width: 85%; } .dbrOverviewDownload .no-login-footer .row > div:first-child p:last-child { font-size: 32px; line-height: 45px; } #BarcodeReaderOverview .exploreSolution { padding: 60px 0; } #BarcodeReaderOverview .exploreSolution .solution__title { margin-bottom: 20px; } #BarcodeReaderOverview .exploreSolution .solution__desc { font-size: 18px; line-height: 30px; margin-bottom: 68px; padding: 0 118px; } #BarcodeReaderOverview .exploreSolution .solution__list li:nth-child(2) { margin: 0 80px; } #BarcodeReaderOverview .exploreSolution .solution__list li .solution__list-banner { width: 200px; height: 200px; } #BarcodeReaderOverview .exploreSolution .solution__list li .solution__list-desc { font-size: 18px; line-height: 36px; } #dbrOverviewMobile .basicBanner .intro { width: 400px; line-height: 30px; font-size: 18px; } #dbrOverviewMobile .basicBanner .downloadBtn { padding: 0px 40px; height: 56px; line-height: 48px; font-size: 20px; } #dbrOverviewMobile .dbrMobilePlatforms label, #dbrOverviewDesktop .dbrMobilePlatforms label { margin-right: 60px; } #dbrOverviewMobile .dbrMobilePlatforms .platformList li, #dbrOverviewDesktop .dbrMobilePlatforms .platformList li { margin-right: 40px; } #dbrOverviewMobile .dbrMobilePlatforms .platformList li:last-child, #dbrOverviewDesktop .dbrMobilePlatforms .platformList li:last-child { margin-right: 0; } #dbrOverviewMobile .dbrOverviewAction .actionLeft { display: inline-block; width: 524px; margin-left: 0px; padding: 80px 0; } #dbrOverviewMobile .dbrOverviewAction .actionLeft .btnDownload { margin-left: 30px; vertical-align: top; line-height: 46px; } #dbrOverviewMobile .dbrOverviewAction .actionLeft p { margin-top: 16px; margin-bottom: 40px; } #dbrOverviewMobile .dbrOverviewAction .actionRight { display: inline-block; width: 355px; height: 330px; position: static; margin-left: 40px; vertical-align: bottom; } #dbrOverviewMobile .dbrOverviewAction .actionRight .phoneStyleDiv { border-top-left-radius: 50px; border-top-right-radius: 50px; padding: 86px 20px 0; } #dbrOverviewMobile .dbrOverviewAction .actionRight .phoneStyleDiv:before { content: ""; width: 174px; height: 10px; background: #FE8E14; border-radius: 5px; position: absolute; top: 27px; left: 94px; } #dbrOverviewMobile .dbrOverviewAction .actionRight .phoneStyleDiv > p { font-size: 16px; line-height: 24px; text-align: center; color: #FFFFFF; } #dbrOverviewMobile .dbrOverviewAction .actionRight .barcodeList { display: flex; justify-content: center; } #dbrOverviewMobile .dbrOverviewAction .actionRight .barcode { margin: 24px 25px 0; } #dbrOverviewMobile .dbrOverviewAction .actionRight .barcode p { color: #FFFFFF; text-align: center; margin-top: 10px; } #dbrOverviewDesktop .basicBanner .bannerImg { width: 424px; height: 280px; } #dbrOverviewDesktop .basicBanner .bannerImg .bannerSwiper .swiper-wrapper { height: 260px; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table tr td, #dbrOverviewDesktop .dbrOverviewFeatures .dbrFeaturesContent table tr td { padding-bottom: 60px; } #dbrOverviewDesktop .dbrOverviewFeatures .dbrFeaturesContent table tr td:first-child { padding-right: 20px; } #dbrOverviewDesktop .dbrOverviewFeatures .dbrFeaturesContent table tr td:nth-child(2) { padding-right: 20px; } #dbrOverviewDesktop .dbrOverviewFeatures .dbrFeaturesContent table tr td:nth-child(3) { width: 451px; padding-right: 20px; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table tr:last-child td, #dbrOverviewDesktop .dbrOverviewFeatures .dbrFeaturesContent table tr:last-child td { padding-bottom: 0; } } @media (max-width: 1199px) and (min-width: 992px) { #BarcodeReaderOverview .whyChooseDbr .reasons > div:nth-child(2) > div:nth-child(2) { display: grid; justify-content: unset; align-items: unset; } #BarcodeReaderOverview .whyChooseDbr .reasons > div:nth-child(2) > div:nth-child(2) img { grid-column: 1 / 1; grid-row: 1 / 1; } #BarcodeReaderOverview .whyChooseDbr .reasons > div:nth-child(2) > div:nth-child(2) img:nth-child(2) { margin-top: 90px } #BarcodeReaderOverview .whyChooseDbr .reasons > div:nth-child(2) > div:nth-child(2) p { grid-column: 2 / 2; grid-row: 1 / 2; width: 70%; margin-left: 30px; } } @media (max-width: 991px) { #BarcodeReaderOverview .dbr-banner .featureList { grid-template-columns: repeat(1, auto); } /* new DBR overview style */ #BarcodeReaderOverview .dbr-banner h1 + p, #BarcodeReaderOverview .dbr-platforms p.title { font-size: 18px; } #BarcodeReaderOverview .dbr-platforms { grid-template-columns: 1fr; } #BarcodeReaderOverview .dbr-platforms > a > div { gap: 15px; flex-wrap: wrap; } .customers-worldwide { justify-content: center; padding: 0 30px; } #BarcodeReaderOverview .dbrPlatformsContainer .container { max-width: 720px; } #BarcodeReaderOverview .dbrPlatformsContainer .dbrPlatforms p { display: none; } #BarcodeReaderOverview .dbrPlatformsContainer .dbrPlatforms { height: auto; padding: 20px 0; gap: 10px 0; } .dbrOverviewBannerA .innerBanner_features { grid-template-columns: 1fr; } #dbrOverviewMobile .dbrOverviewPlatform .platform .npm p { font-size: 12px; } #dbrOverviewMobile .dbrOverviewPlatform { padding: 20px; } #dbrOverviewMobile .dbrOverviewPlatform .platformList { grid-template-columns: 1fr; } #dbrOverviewMobile .dbrOverviewPlatform .platformList .platform:last-child { grid-column: auto; } #dbrOverviewWeb .dbrBarcodes .barcodeContainer { grid-template-columns: repeat(4, 1fr); } #dbrOverviewMobile .basicCaseStudy { display: none; } #dbrOverviewDesktop .basicCaseStudy { display: none; } #dbrOverviewMobile .basicCaseStudySwiper { display: block; } #dbrOverviewDesktop .basicCaseStudySwiper { display: block; } #dbrOverviewWeb .basicCaseStudy .caseStudyList { font-size: 6px; } .dbrOverviewOther .basicBanner { height: auto; padding: 20px 0 30px 0; } .dbrOverviewOther .basicBanner .intro { width: 100%; } #BarcodeReaderOverview .dbrOverviewVideos .dbrVideoContainer .dbrVideoBox .videoDesc { height: auto; } .more .resources { grid-template-columns: 49% 49%; grid-gap: 20px; } .more .resources div:last-child { grid-column: 1 / 3; } /* dbr overview A/B test for banner 2022/12/19 */ .dbrOverviewBannerA { padding: 50px 0; } .dbrOverviewBannerA .container { max-width: 720px; } .dbrOverviewBannerA .innerBanner { width: 100%; } .dbrOverviewBannerA.dbrOverviewBannerFeatures { padding: 20px 0; } .dbrOverviewBannerFeatures ul { height: auto; } .dbrOverviewBannerFeatures ul li { flex: 100%; } .dbrOverviewBannerFeatures ul li:not(:last-child) { margin-bottom: 10px; } /* end of dbr overview A/B test for banner 2022/12/19 */ /* dbr overview new style 2022/11/03 */ /* dbr overview banner using BEM */ #BarcodeReaderOverview .dbrOverviewBanner { margin-top: 25px; } .innerBanner__head { font-size: 32px; } /* end of dbr overview banner using BEM */ .store-badge i { width: 151px; height: 43px; } .whyChooseDbr ul li { width: 27px; } #BarcodeReaderOverview .whyChooseDbr { margin-top: 90px; } /* new platforms style */ .platforms { flex-wrap: wrap; } .platform__icon.icon-js p { width: 100%; } .platforms__item:first-child { width: 49%; } .platforms__item:last-child { width: 49%; order: 2; } .platforms__item:not(:nth-child(2)) .platform__intro { height: 210px; } .platforms__item:not(:nth-child(2)) .platform__app { height: auto; } .platforms__item:nth-child(2) { width: 100%; order: 3; margin-top: 20px; } .platforms__item:nth-child(2) .platform__intro { height: 165px } .platforms__item:nth-child(2) .platform__icon-list .platform__icon { width: 15%; } .platforms__item:nth-child(2) .platform__icon-list .platform__icon:nth-child(n+4) { margin-top: 0; } /* end of dbr overview new style 2022/11/03 */ /**/ .videoDesc__arrow { bottom: 12px; } #BarcodeReaderOverview .basicBanner:not(.ESBanner) { height: auto; padding: 30px 0; } #BarcodeReaderOverview .basicBanner .bannerContent { flex-direction: column; align-items: flex-start; } #BarcodeReaderOverview .basicBanner .bannerContent .desc { width: 100%; } #BarcodeReaderOverview .basicBanner .bannerContent .desc h1 { font-size: 32px; } /* dbr overview new style 2022/08/29 */ #BarcodeReaderOverview .dbrOverviewVideos .dbrVideoContainer .dbrVideoBox .videoThumbnail { height: 350px; } #BarcodeReaderOverview .dbrOverviewVideos { margin-top: 50px; } #BarcodeReaderOverview .dbrOverviewVideos .dbrVideoContainer { flex-direction: column; height: fit-content; } #BarcodeReaderOverview .dbrOverviewVideos .dbrVideoContainer .dbrVideoBox { width: 100%; margin: 0 0 50px 0; } #BarcodeReaderOverview .dbrOverviewVideos .dbrVideoContainer .dbrVideoBox:nth-child(2) .videoDesc ul li { width: 40%; } #BarcodeReaderOverview .dbrDemo .dbrDemoContainer { justify-content: center; } #BarcodeReaderOverview .dbrDemo .dbrDemoContainer .dbrDemoBox { width: 100%; } #BarcodeReaderOverview .whyChooseDbr .reasons { justify-content: center; } #BarcodeReaderOverview .whyChooseDbr .reasons > div { padding: 30px; height: fit-content; width: 500px; margin-bottom: 40px; } /* Spanish swiper */ .basicSwiper.ESSwiper .index-swiper-container { height: auto; } /* Spanish feature */ .basicFeature .featureBox.ESFeature .featureBoxBottom .title, .basicFeature .featureBox.ESFeature .featureBoxBottom .cnt { min-height: unset; } .whyDBR .leftSection { padding-bottom: 0; height: 130px; } .whyDBR .leftSection .leftContent { width: 90%; } .whyDBR .rightSection { padding: 0; } .whyDBR .rightSection .featuresList { width: 90%; } .basicCustomers .swiper-slide { display: table-cell; vertical-align: middle; float: none !important; text-align: center; } .basicCustomers .swiper-slide i.company-logo { opacity: .6; height: 100%; background-size: contain; background-position: center; margin-right: 40px; background-repeat: no-repeat; } .barcode-img { height: 120px; margin-right: 20px; } .basicSwiper.dbrOverviewSwiper { margin-top: 80px; } .basicSwiper .swiper-slide { height: auto; } .dbrOverviewSwiper .slide-left { min-height: 340px; width: 100%; } /* Spanish video container */ .dbrVideo.ESVideo .strengthLine { padding-bottom: 0; } .basicSwiper .swiper-slide .slide-right { width: 100%; padding-top: 40px; } .dbrOverviewSwiper .swiper-slide .slide-left { width: 100%; padding: 0px; } .basicCustomers .swiper-slide i.company-logo { opacity: .6; } .dbrOverviewSwiper .slide-left { width: 100%; } .dbrOverviewSwiper .slide-right { width: auto; margin: auto; float: none; display: inline-block; padding-bottom: 50px; padding-right: 0px; } .dbrOverviewSwiper .slide-right div { margin: auto; } .dbrOverviewSwiper .slide-right.hide-md { display: none; } .dbrOverviewSwiper .custom-slick-arrow { display: none; } #homePage .indexProduct .productBox { position: relative; width: 100%; height: 370px; padding: 54px 50px; margin: 0 auto; margin-bottom: 180px; } .basicSwiper .swiper-slide .slide-left .personWords .preQuote, .basicSwiper .swiper-slide .slide-right { zoom: 0.8; } .basicSwiper .swiper-slide .slide-left .personWords { height: auto; display: block; font-size: 14px; line-height: 24px; padding-left: 30px; position: relative; color: #323234; } .basicSwiper .swiper-slide .personName { font-size: 14px; line-height: 22px; } .slide-block { height: auto; display: block; } .index-pagination { position: absolute; z-index: 20; width: 100%; text-align: center; bottom: -20px; } .basicPowerful .powerfulList li { width: 46%; } .basicPowerful .powerfulList li:first-child { width: 96%; } .basicFeature .featureBox .featureBoxBottom { height: auto; } #dbrOverviewWeb .basicFeature .featureBox .featureBoxBottom { height: 280px; } .basicFeature .featureBox .featureBoxBottom .cnt { min-height: unset; } .dbrOverviewFeatures .dbrFeaturesContent { padding: 10px; } .dbrOverviewFeatures table td { height: 165px; } .dbrOverviewFeatures table td p { font-size: 16px; margin-top: 5px; line-height: 20px; } .dbrOverviewFeatures table .icon { zoom: 0.7; } .dbr-overview .dbrOverviewReliable .disc { padding: 0 0px; } /* desktop */ .dbrOverviewOther .contentHeader a { height: 50px !important; line-height: 50px !important; padding: 0 35px !important; margin: 10px 40px; } .dbrOverviewOther .basicReliable .functionBox { width: 100%; } #dbrOverviewDesktop .dbrOverviewFeatures table td { width: 33%; height: auto; } #dbrOverviewDesktop .dbrOverviewFeatures table tr:last-child td:last-child { height: auto; width: 100%; } /* web */ .orangeAngelList li { font-size: 14px; line-height: 20px; } .orangeAngelList li:before { border-width: 4px 10px 4px 0; left: -15px; top: 7px; } .dbrVideo .strengthLine { height: auto; } .dbrVideo .strengthLine.bgLeft { background-size: 100%; } .dbrVideo { background: #f5f5f5; } .dbrVideo .videoContainer { height: 760px; } .dbrVideo .switchIcons { padding-bottom: 30px; padding-left: 0; text-align: center; } .dbrVideo .switchIcons .graylink { font-size: 16px; line-height: 37px; display: none; } .dbrVideo .switchIcons .graylink.on { display: none } .dbrVideo .switchIcons .switchCircle { font-size: 16px; } .dbrVideo .switchIcons .switchCircle:nth-child(2) { margin-right: 0; } #dbrOverviewWeb .featuresContainer { height: 1200px; } #dbrOverviewWeb .featuresContainer .featureItem { padding: 60px 50px; } #dbrOverviewWeb .featuresContainer .featureItem h3, .featureItem p { width: 100% !important; } #dbrOverviewWeb .featuresContainer .featureItem span.icon { left: 50px; } .dbrVideo .strengthLine .strengthImg { width: 80%; height: auto; margin-top: 0; padding-top: 60px; margin-left: auto; margin-right: auto; display: block; margin-bottom: 0; } .dbrVideo .strengthLine .disc { width: 80%; margin-left: auto; margin-right: auto; display: block; padding-bottom: 20px; } p.subp { font-size: 14px; } /*.swiper-slide, .swiper-wrapper { max-height: 300px !important; }*/ .applicationItem { /*padding: 5px 16px; margin-right: 20px;*/ width: 100%; margin-top: 30px; } /*.applicationItem:nth-child(2) { margin-top: 30px; }*/ .applicationItem:last-child { margin-right: 0; margin-top: 30px; } .applicationItem p.supportIconWrapper { margin-bottom: 0; margin-top: 10px; } .applicationItem .name { /*max-width: 175px; margin-right: 16px;*/ font-size: 18px; } #dbrOverviewWeb .dbrOverviewAction .actionLeft a:last-child { margin: 0 0 0 20px; } .basicCustomers .swiper-slide { width: auto; } #BarcodeReaderOverview .exploreSolution { padding: 60px 0; } #BarcodeReaderOverview .exploreSolution .solution__title { margin-bottom: 20px; } #BarcodeReaderOverview .exploreSolution .solution__desc { font-size: 16px; line-height: 26px; margin-bottom: 60px; padding: 0; } #BarcodeReaderOverview .exploreSolution .solution__list li:nth-child(2) { margin: 0 80px; } #BarcodeReaderOverview .exploreSolution .solution__list li .solution__list-banner { width: 150px; height: 150px; margin: 0 auto; } #BarcodeReaderOverview .exploreSolution .solution__list li .solution__list-banner.icon-vin:after { display: block; content: ""; width: 100%; height: 100%; background: url(../../images/banner/DBR/icon-vin.svg) center center no-repeat; background-size: 80%; } #BarcodeReaderOverview .exploreSolution .solution__list li .solution__list-banner.icon-scan-count:after { display: block; content: ""; width: 100%; height: 100%; background: url(../../images/banner/DBR/icon-scan-count.svg) center center no-repeat; background-size: 80%; } #BarcodeReaderOverview .exploreSolution .solution__list li .solution__list-banner.icon-driver-license:after { display: block; content: ""; width: 100%; height: 100%; background: url(../../images/banner/DBR/icon-driver-license.svg) center center no-repeat; background-size: 80%; } #BarcodeReaderOverview .exploreSolution .solution__list li .solution__list-desc { font-size: 16px; line-height: 26px; } #dbrOverviewMobile .dbrMobilePlatforms, #dbrOverviewDesktop .dbrMobilePlatforms { padding: 16px 0; } #dbrOverviewMobile .dbrMobilePlatforms label, #dbrOverviewDesktop .dbrMobilePlatforms label { font-size: 14px; margin-right: 40px; } #dbrOverviewMobile .dbrMobilePlatforms .platformList li, #dbrOverviewDesktop .dbrMobilePlatforms .platformList li { margin-right: 30px; } #dbrOverviewMobile .dbrMobilePlatforms .platformList li:last-child, #dbrOverviewDesktop .dbrMobilePlatforms .platformList li:last-child { margin-right: 0; } #dbrOverviewMobile .dbrOverviewAction .actionLeft { display: inline-block; width: 100%; margin-left: 0px; padding: 80px 0 40px 0; } #dbrOverviewMobile .dbrOverviewAction .actionRight { display: block; width: 355px; height: 330px; position: static; margin-left: 40px; vertical-align: bottom; margin: 0 auto; } .dbrOverviewFeatures table td p.title { color: #FFFFFF; font-size: 16px; line-height: 26px; margin-top: 20px; } .dbrOverviewFeatures table td p.desc { color: #FFFFFF; font-size: 14px; line-height: 24px; margin-top: 10px; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table tr td, #dbrOverviewDesktop .dbrOverviewFeatures .dbrFeaturesContent table tr td { padding-bottom: 40px; padding-left: 30px; } #dbrOverviewDesktop .dbrOverviewFeatures table tr:first-child td:first-child { padding-left: 30px; padding-bottom: 40px; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table tr:last-child td, #dbrOverviewDesktop .dbrOverviewFeatures .dbrFeaturesContent table tr:last-child td { padding-bottom: 40px; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table tr td { width: 270px; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table tr td:nth-child(3) { width: 270px; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table tr td:nth-child(1) p { width: 100%; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table tr td:nth-child(2) p { width: 100%; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table tr td:nth-child(3) p { width: 100%; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table tr:last-child td:nth-child(1) p { width: 100%; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table tr:last-child td:nth-child(2) p { width: 100%; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table tr:last-child td:nth-child(3) p { width: 100%; } } @media (max-width: 767px) { #BarcodeReaderOverview .dbr-banner { padding-bottom: 20px; } #BarcodeReaderOverview .dbr-banner .featureList { grid-template-columns: repeat(1, auto); margin-top: 20px; grid-gap: 5px; } #BarcodeReaderOverview .dbr-banner .featureList p { margin-bottom: 0; } #BarcodeReaderOverview .dbrPlatformsContainer .container { max-width: 570px; } #dbrOverviewWeb .dbrBarcodes .barcodeContainer { grid-template-columns: repeat(2, 1fr); padding: 0 30px; } #dbrOverviewWeb .dbrBarcodes .barcodeContainer a:last-child { height: auto; text-align: left; line-height: 50px; } #dbrOverviewMobile .phoneApps { grid-gap: 0 10px; } .basicReliable .functionList > div:nth-child(2) { margin-top: 60px; } .dbrJsFeatures .features__wrapper { grid-template-columns: repeat(1, 1fr); } /* dbr overview A/B test for banner 2022/12/19 */ .dbrOverviewBannerA .container { max-width: 570px; } .dbrOverviewBannerB.dbrOverviewBannerFeatures .main ul li:nth-child(2n - 1) { width: 100%; } .dbrOverviewBannerB.dbrOverviewBannerFeatures .main ul li:nth-child(2n) { width: 100%; } /* end of dbr overview A/B test for banner 2022/12/19 */ /* dbr overview new style 2022/11/03 */ /* dbr overview banner using BEM */ .innerBanner__head { font-size: 28px; } /* end of dbr overview banner using BEM */ /* new platforms style */ .platforms__item:first-child { width: 100%; } .platforms__item:last-child { width: 100%; margin-top: 20px; } .platforms .platforms__item .platform__intro { height: auto; } .platforms__item:nth-child(2) .platform__icon-list .platform__icon { width: 33%; } .platforms__item:nth-child(2) .platform__icon-list .platform__icon:nth-child(n+4) { margin-top: 10px; } /* end of dbr overview new style 2022/11/03 */ /**/ #BarcodeReaderOverview .basicBanner .bannerContent .desc h1 { font-size: 26px; } /* 2022/09/06 Frank dbr web explore more */ .dbrExploreMore .exploreContainer > a { width: 100%; } /* dbr overview new style 2022/08/29 */ #BarcodeReaderOverview .dbrOverviewVideos .dbrVideoContainer .dbrVideoBox:nth-child(2) .videoDesc ul li { width: 50%; } /* Spanish banner */ .basicBanner.ESBanner { height: auto; } .whyDBR .container { padding: 0; } .whyDBR .leftSection .leftContent .whyDesc { width: 60%; } .whyDBR .leftSection .leftContent i.icon-ISO { margin-left: 35px; } .whyDBR .rightSection .featuresList ul li { font-size: 16px; } .barcode-img { height: 100px; margin-right: 10px; } #BarcodeReaderOverview .row, .dbrOverviewOther .row { margin: 0px; } .basicSwiper .swiper-slide { width: 540px; } .basicSwiper .ant-carousel .slick-track { width: 3800px; } .basicSwiper .ant-carousel .slick-list { min-height: 490px; } .dbrOverviewSwiper { margin-top: 200px; } .dbrOverviewSwiper .swiper-slide .slide-right { margin-bottom: 20px; padding: 0px; } .dbrOverviewSwiper .swiper-slide .slide-left { height: auto; width: 100%; float: none; margin-top: 60px; } .basicSwiper .ant-carousel .slick-dots li button { border: none; font-size: 0px; } .basicSwiper.dbrOverviewSwiper { margin-top: 60px; } .dbrOverviewFeatures table td { display: inline-block; width: 50%; height: auto; } .f24 { font-size: 16px !important; } .basicReliable.dbrOverviewReliable .functionBox, #dbrOverviewDesktop .basicReliable .functionBox { height: auto; padding: 0px 19px 20px 20px; min-height: unset; } p.supportIconWrapper { height: 80px; min-height: 80px !important; } p.supportIconWrapper > span { /*display: inline-block;*/ } .basicCustomers .swiper-slide i.company-logo { zoom: 0.7; } .dbrOverviewSymbology .dbrSymbologyCol { width: 100%; } .basicSwiper .SwiperContent { padding: 0; } .basicSwiper .ant-carousel .slick-dots li { display: inline-block; } .basicSwiper .ant-carousel .slick-dots { text-align: center; } .basicPowerful .powerfulList li { width: 100%; height: auto; margin-left: 0px !important; } .basicPowerful .powerfulList li:first-child { width: 100%; height: auto; } .basicPowerful .powerfulLeft { padding: 0px; } .basicSwiper .swiper-slide .slide-left { height: auto; margin-top: 50px; } .powerfulList li a:last-child { position: relative; bottom: 0px; } .dbrOverviewOther .contentHeader a { padding: 0px 22px !important; } .dbrOverviewFeatures table { top: 0px; } /* desktop */ .basicStrength .strengthLine.bgLeft { background-size: 100%; } .dbrOverviewFeatures table { width: 100%; margin: 40px 0; } #dbrOverviewDesktop .dbrOverviewFeatures table tr:first-child td:first-child { width: 100%; padding: 0px; } #dbrOverviewDesktop .leftFeatures { padding: 50px 20px; } #dbrOverviewDesktop i.supportIcon { zoom: 0.8; } .dbrOverviewOther .dbrOverviewFeatures .dbrFeaturesContent { padding: 0; } #dbrOverviewDesktop .dbrOverviewFeatures table td { height: auto; display: block; width: 100%; } /* web */ #dbrOverviewWeb .dbrOverviewPlatform td { display: block; width: 100% !important; } .dbrVideo .videoContainer { height: 740px; } .dbrVideo .strengthLine .strengthImg { width: 90%; margin-top: 0; padding-top: 30px; } .dbrVideo .strengthLine .disc { width: 90%; } #dbrOverviewMobile .actionLeft span.actionText { width: 100%; max-width: calc(100% - 130px); } .dbrVideo, .dbrOverviewSymbology { margin-top: 60px !important; } .dbrVideo .strengthLine .disc { margin-top: 30px; } .dbrVideo .strengthLine .disc p.pt20 { padding-top: 10px; } .dbrVideo .strengthLine .disc ul li { margin-bottom: 5px; } .dbrVideo .strengthLine .disc ul li:last-child { margin-bottom: 0; } .dbrOverviewAction .ptb80 { padding-top: 40px; padding-bottom: 40px; } .dbrOverviewSymbology { padding-top: 30px; } .dbrOverviewPowerful { padding-top: 50px; padding-bottom: 50px; } .dbrOverviewSymbology p.mt50 { margin-top: 20px; } .swiper-slide, .swiper-wrapper { max-height: none !important; } .applicationItem { width: 100%; margin-top: 30px; /*padding: 5px 16px; margin-right: 20px; */ min-width: unset; height: fit-content; } .applicationItem:nth-child(2) { margin-top: 30px; } .applicationItem:last-child { margin-right: 0; margin-top: 30px; } .applicationItem p.supportIconWrapper { margin-bottom: 0; margin-top: 10px; } /*.applicationItem .name { max-width: 148px; margin-right: 16px; }*/ .dbrVideo .switchIcons { padding-bottom: 0px; padding-left: 0; text-align: center; background: #f5f5f5; width: 100%; left: 0; padding-top: 30px; margin-top: 0; position: static; } .dbrVideo .switchIcons .switchCircle { width: 16px; height: 16px; border-radius: 50%; font-size: 14px; } .dbrVideo .switchIcons .switchCircle span { display: none; } .dbrVideo .switchIcons .switchCircle:nth-child(2) { margin-right: 0; } #dbrOverviewWeb .featuresContainer { height: 1850px; margin: 0 15px; } #dbrOverviewWeb .dbrOverviewAction .actionLeft a:last-child { margin: 0 0 0 10px; } /* mobile */ #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent { margin: 20px 0; padding: 10px; } #dbrOverviewMobile .dbrOverviewFeatures table tr td { padding: 0 0 20px 0; } #dbrOverviewMobile .dbrOverviewFeatures table p { font-size: 14px !important; width: 90%; margin: 0 auto; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent p { padding: 0 0; } #dbrOverviewMobile .basicFeature .featureBox .featureBoxBottom { height: 300px; } /*.dbrVideo .switchIcons .switchCircle.on:after { display: none; left: 97px; }*/ #BarcodeReaderOverview .exploreSolution { padding: 60px 0; } #BarcodeReaderOverview .exploreSolution .solution__title { margin-bottom: 20px; } #BarcodeReaderOverview .exploreSolution .solution__desc { font-size: 16px; line-height: 26px; margin-bottom: 40px; padding: 0; } #BarcodeReaderOverview .exploreSolution .solution__list li:nth-child(2) { margin: 0 10px; } #BarcodeReaderOverview .exploreSolution .solution__list li .solution__list-banner { width: 140px; height: 140px; margin: 0 auto; } #BarcodeReaderOverview .exploreSolution .solution__list li .solution__list-desc { font-size: 14px; line-height: 26px; } #dbrOverviewMobile .basicBanner .downloadBtn { padding: 0px 20px; height: 56px; line-height: 52px; font-size: 18px; text-align: center; } #dbrOverviewMobile .dbrOverviewAction .actionLeft { display: inline-block; width: 100%; margin-left: 0px; padding: 80px 0 40px 0; } #dbrOverviewMobile .dbrOverviewAction .actionLeft p br { display: none; } #dbrOverviewMobile .dbrOverviewAction .actionLeft .btnDownload { display: block; width: 135px; margin: 0px 0 0 0 !important; } #dbrOverviewMobile .dbrOverviewAction .actionRight { display: block; width: 355px; height: 330px; position: static; margin-left: 40px; vertical-align: bottom; margin: 0 auto; } #dbrOverviewDesktop .dbrOverviewFeatures .dbrFeaturesContent table tr td { padding-bottom: 40px; padding-left: 30px; } #dbrOverviewDesktop .dbrOverviewFeatures table tr:first-child td:first-child { padding-left: 30px; padding-bottom: 40px; } #dbrOverviewDesktop .dbrOverviewFeatures .dbrFeaturesContent table tr:last-child td { padding-bottom: 40px; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table tr td { width: 100%; } #dbrOverviewMobile .dbrOverviewFeatures .dbrFeaturesContent table tr td:nth-child(3) { width: 100%; } } @media (max-width: 575px) { #BarcodeReaderOverview .dbr-banner h1 + p, #BarcodeReaderOverview .dbr-platforms p.title { font-size: 16px; } #BarcodeReaderOverview h1 { font-size: 22px; line-height: 1.5; margin: 20px auto; } #BarcodeReaderOverview .dbr-banner .col-12 { padding: 0; } #BarcodeReaderOverview .dbr-banner .d-btn-wrap { --column-gap: 15px; } #BarcodeReaderOverview .dbr-banner .d-btn-wrap .d-btn { padding: 0 15px; font-size: 16px; } #BarcodeReaderOverview .dbrPlatformsContainer { display: none; } .dbrOverviewOther .basicBanner .btns { grid-template-columns: repeat(auto-fill, 190px); display: grid; } #dbrOverviewWeb .basicCaseStudy .caseStudyList { grid-template-columns: 2fr 1fr 2fr; } #dbrOverviewWeb .basicCaseStudy .caseStudyList p { display: none; } #dbrOverviewMobile .phoneApps { grid-template-columns: 1fr 1fr; padding: 0; background-color: transparent; height: 40px; margin-bottom: 15px; } #BarcodeReaderOverview h2 { font-size: 24px; } /* dbr overview new style 2022/11/03 */ /* dbr overview banner using BEM */ .innerBanner__feature-list { height: auto; padding: 20px 0; } /* end of dbr overview banner using BEM */ .whyChooseDbr ul li { width: 20px; } /* new platforms style */ .platforms__item:last-child .platform__icon-list .platform__icon { width: 25%; } .platforms__item:last-child .platform__icon-list .platform__icon i { max-width: 43px; } .platforms__item:nth-child(2) .platform__icon-list .platform__icon { width: 50%; } .platforms__item:nth-child(2) .platform__icon-list .platform__icon:nth-child(n+2) { margin-top: 10px; } .platform__icon.icon-java { margin-top: 10px; } /* end of dbr overview new style 2022/11/03 */ /**/ /* dbr overview new style 2022/08/29 */ #BarcodeReaderOverview .dbrOverviewVideos .dbrVideoContainer .dbrVideoBox:nth-child(2) .videoDesc ul li { width: 100%; } /* Spanish swiper */ .basicSwiper.ESSwiper .index-swiper-container { height: auto; } .whyDBR { margin-top: 0px; } .whyDBR .row { height: 910px; } /* Spanish why */ .whyDBR.ESDBR .row { height: 960px; } .whyDBR .rightSection { align-items: flex-end; } .whyDBR .rightSection .featuresList { height: 660px; width: 100%; } .whyDBR .rightSection .featuresList ul { padding: 35px 70px; } .whyDBR .leftSection { padding: 0; margin-top: 40px; } .whyDBR .leftSection .leftContent .whyDesc { width: 100%; } .whyDBR .leftSection .leftContent .whyDesc { margin-bottom: 30px; } .whyDBR .leftSection .leftContent i.icon-ISO { display: none; } .basicFeature .featureMain { margin-bottom: 0px; } #BarcodeReaderOverview .basicPowerful p:last-child { padding: 0 30px; text-align: start; } .icon-arrow-right { width: 18px; right: -10px; } .icon-arrow-left { width: 18px; left: -10px; } .action-button { font-size: 16px; } .dbr-overview .basicBanner { height: auto; padding: 20px 5px 20px; } .dbr-overview .basicBanner a { font-size: 14px; } .basicSwiper .swiper-slide { height: auto !important; } /* .basicSwiper .swiper-slide .index-link { height: 100%; display: inline-block; }*/ .slide-block { min-height: 300px; display: block; } .basicSwiper.dbrOverviewSwiper { padding: 0px; } .basicSwiper .swiper-slide { vertical-align: middle; display: table-cell; float: none; } .basicPowerful { margin-top: 100px; padding: 50px 3px; height: auto; font-size: 14px; line-height: 20px; } .basicPowerful p.disc { line-height: 18px; font-size: 14px; } .dbrVideo .strengthLine { padding: 0 20px } .dbrVideo .strengthLine .strengthImg { width: 100%; } .dbrVideo .strengthLine .disc { width: 100%; } #dbrOverviewMobile .actionLeft p.badge .btnDownload { } #dbrOverviewMobile .actionLeft span.actionText { width: 100%; max-width: 100%; margin-top: 10px; } #dbrOverviewWeb .dbrOverviewAction .actionLeft a:last-child { margin: 20px 0 0 0; } #dbrOverviewWeb .featuresContainer { height: auto; } .contentHeader { padding: 10px 20px; } .contentHeader p:first-of-type { width: 100% !important; } #dbrOverviewWeb .contentHeader a { width: 220px !important; } #dbrOverviewWeb .basicReliable .functionBox { height: auto; } .dbrWebFeatures h3 { width: 92%; margin: 0 auto; } #dbrOverviewWeb .featuresContainer .featureItem { padding: 60px 20px; margin: 0; } #dbrOverviewWeb .featuresContainer .featureItem span.icon { left: 20px; } #dbrOverviewWeb .featuresContainer .featureItem h3 { font-size: 20px; } .dbrOverviewSymbology { padding: 0; margin: 0 !important; } .dbrOverviewSymbology h2 { margin: 40px auto; } .basicReliable .functionBox .icon, .basicReliable .functionBox .icon i { width: 70px; height: 70px; } .dbrOverviewOther .h2 { font-size: 30px; } #dbrOverviewMobile.dbrOverviewOther .basicReliable .functionBox { padding: 0 20px; height: auto; } .actionLeft i { width: 160px; } #dbrOverviewMobile .dbrOverviewFeatures { margin: 10px 0 0 0; } #dbrOverviewMobile .dbrOverviewFeatures h2 { font-size: 24px !important; width: 100%; margin: 30px 0; } #dbrOverviewMobile .dbrOverviewFeatures table tr td { display: block; width: 100%; } #dbrOverviewMobile .basicFeature .featureBox .featureBoxBottom { height: 300px; } /* footer no login */ .dbrOverviewDownload .no-login-footer .row .registerForm { padding: 30px; } .dbrOverviewDownload .no-login-footer .row .registerForm .basicForm .submit .d-btn { max-width: 100%; padding: 0 10px; } #BarcodeReaderOverview .dbrDemo .dbrDemoContainer .dbrDemoBox .link { height: auto; min-height: 105px; padding: 10px 30px; } #BarcodeReaderOverview .exploreSolution .solution__desc { font-size: 14px; line-height: 24px; margin-bottom: 40px; padding: 0; } #BarcodeReaderOverview .exploreSolution .solution__list { text-align: center; } #BarcodeReaderOverview .exploreSolution .solution__list li { margin: 0 30px 20px; } #BarcodeReaderOverview .exploreSolution .solution__list li:nth-child(2) { margin: 0 30px 20px; } #BarcodeReaderOverview .exploreSolution .solution__list li:last-child { margin-bottom: 0; } } @media (max-width: 412px) { .dbrOverviewMobile .dbrOverviewAction p.barcode { display: flex; align-items: flex-start; } #dbrOverviewMobile .actionLeft span.actionText { padding: 0 0 !important; flex: 100% !important; margin-left: 20px; } } @media (max-width: 400px) { #BarcodeReaderOverview .dbr-banner .d-btn-wrap { width: 100%; } #BarcodeReaderOverview .dbr-banner .featureList p { font-size: 13px; } }