#hero-section-wrapper.video { position: relative; background-color: var(--pg-color-ink); display: flex; padding: 80px 0 0 0; } #hero-section-wrapper video { height: auto; } #hero-section-wrapper.video .hero-content-wrapper { position: absolute; top: 50%; left: 48px; transform: translateY(-50%); display: flex; justify-content: space-between; max-width: 650px; z-index: 1; } #hero-section-wrapper.video h1 { color: var(--pg-color-surface); font-weight: 500; text-transform: none; font-size: 101px; } @media (max-width: 992px) { #hero-section-wrapper.video h1 { font-size: 67px; } } @media (max-width: 767px) { #hero-section-wrapper.video h1 { font-size: 48px; } } @media (max-width: 420px) { #hero-section-wrapper.video h1 { font-size: 36px; } } #hero-section-wrapper.video h1 p { color: var(--pg-color-surface); margin: 0; } #hero-section-wrapper.video .subtitle { color: var(--pg-color-surface); padding-bottom: 0; } #hero-section-wrapper { position: relative; background-color: var(--pg-color-ink); display: flex; padding: 160px 0 80px 0; } #hero-section-wrapper.video:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgb(16,16,16); background: -moz-linear-gradient(90deg, rgba(16,16,16,0.5) 0%, rgba(16,16,16,0.4) 40%, rgba(16,16,16,0) 100%); background: -webkit-linear-gradient(90deg, rgba(16,16,16,0.5) 0%, rgba(16,16,16,0.4) 40%, rgba(16,16,16,0) 100%); background: linear-gradient(90deg, rgba(16,16,16,0.5) 0%, rgba(16,16,16,0.4) 40%, rgba(16,16,16,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="var(--pg-color-ink)",endColorstr="var(--pg-color-ink)",GradientType=1); z-index: 0; } #hero-section-wrapper .hero-content-wrapper { display: flex; justify-content: space-between; } #hero-section-wrapper .hero-content { position: relative; z-index: 1; flex: 1; } #hero-section-wrapper .hero-image { flex: 1; } #hero-section-wrapper .hero-image img { display: block; margin-left: auto; max-width: 400px; } #hero-section-wrapper .eyebrow-text { font-size: 21px; font-weight: 500; color: var(--pg-color-surface); margin-bottom: 30px; text-transform: uppercase; } #hero-section-wrapper h1 { font-size: 101px; font-weight: 500; line-height: 90%; color: var(--pg-color-surface); margin: 0 0 30px 0; transition: 0.1s linear all; text-transform: none; } @media (max-width: 992px) { #hero-section-wrapper h1 { font-size: 67px; } } @media (max-width: 767px) { #hero-section-wrapper h1 { font-size: 48px; } } @media (max-width: 420px) { #hero-section-wrapper h1 { font-size: 36px; } } #hero-section-wrapper h1 strong { color: var(--pg-color-accent); font-weight: 500; text-transform: none; } #hero-section-wrapper h1 p { color: var(--pg-color-surface); margin: 0; } #hero-section-wrapper .subtitle { font-size: 22px; color: var(--pg-color-surface); padding-bottom: 30px; margin-bottom: 0; line-height: 36px; font-weight: 400; } #hero-section-wrapper hr { max-width: 700px; height: 2px; background-color: var(--pg-orange); border: 0; padding: 0; margin: 24px 0; opacity: 1; } #hero-section-wrapper .button-row { display: inline-block; padding: 0; } #hero-section-wrapper .secondary-button { color: var(--pg-on-surface, var(--pg-color-surface)); } #stats-section-wrapper { padding: 60px 0; background-color: #E5E6E7; } #stats-section-wrapper .stat-image-content { width: 50px; margin-right: 20px; } #stats-section-wrapper .stat-image-content img { display: block; width: 100%; height: auto; } #stats-section-wrapper p { line-height: 140%; } #stats-section-wrapper p.value { font-size: 52px; font-weight: 700; margin: 0; color: var(--pg-orange); line-height: 80%; } #stats-section-wrapper p.what { font-size: 21px; font-weight: 700; margin: 0; color: var(--pg-color-surface); } #stats-section-wrapper p.per { font-size: 16px; font-weight: 400; margin: 0; color: var(--pg-color-surface); } #main-content-section-wrapper { color: var(--pg-color-surface); padding: 60px 0; } #main-content-section-wrapper p { text-align: center; font-size: 21px; font-weight: 300; margin-bottom: 0; } #wearables { padding: 100px 0; background-color: var(--pg-color-ink); } #wearables h2.title { text-align: center; color: var(--pg-color-surface); font-weight: 500; text-transform: none; font-size: 67px; } @media (max-width: 992px) { #wearables h2.title { font-size: 48px; } } @media (max-width: 767px) { #wearables h2.title { font-size: 36px; } } @media (max-width: 420px) { #wearables h2.title { font-size: 32px; } } #wearables #tabs .tab { width: 200px; background-color: var(--pg-color-ink); border-radius: 15px; padding: 12px 26px; cursor: pointer; position: relative; z-index: 5; font-size: 16px; font-weight: 500; color: var(--pg-color-surface); display: flex; align-items: center; justify-content: center; transition: 0.1s linear all; } #wearables .tabs-content-navigation { background-color: var(--pg-color-ink); display: flex; justify-content: center; width: max-content; margin: 60px auto; border-radius: 15px; overflow: hidden; } #wearables #tabs .tab:last-of-type { margin-right: 0; } #wearables #tabs .tab:hover { background-color: var(--pg-orange); color: var(--pg-color-surface); font-weight: 500; } #wearables #tabs .whiteborder { background-color: var(--pg-orange); color: var(--pg-color-surface); font-weight: 500; } #wearables #tabs.wearable-scanners-overview .tabs-content video { max-height: 600px; } #wearables #tabs .tab-content-holder { padding: 0; } #wearables #tabs .product-image { display: block; max-width: 440px; height: auto; margin: 0 auto; } #wearables #tabs .tab-content-holder h3 { color: var(--pg-color-surface); font-size: 36px; font-weight: 500; text-transform: none; } @media (max-width: 992px) { #wearables #tabs .tab-content-holder h3 { font-size: 32px; } } @media (max-width: 767px) { #wearables #tabs .tab-content-holder h3 { font-size: 28px; } } @media (max-width: 420px) { #wearables #tabs .tab-content-holder h3 { font-size: 24px; } } #wearables #tabs .tab-content-holder h4 { color: var(--pg-orange); font-size: 28px; font-weight: 500; text-transform: none; margin-bottom: 24px; } @media (max-width: 767px) { #wearables #tabs .tab-content-holder h4 { font-size: 24px; } } @media (max-width: 420px) { #wearables #tabs .tab-content-holder h4 { font-size: 24px; } } #wearables #tabs .tab-content-holder strong { color: var(--pg-orange); font-weight: 400; } #wearables #tabs .tab-content-holder p, #wearables #tabs .tab-content-holder li { font-size: 21px; font-weight: 300; color: var(--pg-color-surface); margin-bottom: 24px; } #wearables #tabs .tab-content-holder a { font-size: 24px; font-weight: 400; text-decoration: none; color: var(--pg-orange); } #wearables #tabs .hide { display: none; } #wearables #tabs .show { display: block; } #compare-section-wrapper { padding: 120px 0; } #compare-section-wrapper h2 { text-align: center; color: var(--pg-color-surface); font-weight: 500; text-transform: none; font-size: 67px; } @media (max-width: 992px) { #compare-section-wrapper h2 { font-size: 48px; } } @media (max-width: 767px) { #compare-section-wrapper h2 { font-size: 36px; } } @media (max-width: 420px) { #compare-section-wrapper h2 { font-size: 32px; } } #compare-section-wrapper table { width: 100%; background: transparent; border-collapse: separate; border-spacing: 18px 0; } #compare-section-wrapper table tr { background: transparent; } #compare-section-wrapper tr th { background-color: var(--pg-color-ink); vertical-align: middle; position: relative; height: 110px; font-size: 24px; font-weight: 700; color: var(--pg-color-surface); text-transform: none; letter-spacing: normal; } #compare-section-wrapper .absolute-head-image tr th img { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); } #compare-section-wrapper tr th.avia-desc-col { padding-left: 55px; min-width: 250px; } #compare-section-wrapper tr th.avia-desc-col img { position: absolute; left: 0; top: 50%; transform: translateY(-50%); } #compare-section-wrapper tr:first-of-type th { border-top-left-radius: 4px; border-top-right-radius: 4px; border: 0; } #compare-section-wrapper tr:first-of-type th img { max-width: 70px; } #compare-section-wrapper tr td { position: relative; background-color: var(--pg-color-ink); padding: 15px 0; border-top: 0; border-right: 0; border-left: 0; border-bottom: 5px dotted var(--pg-color-gray-light); margin-right: 20px; color: var(--pg-color-muted); font-size: 16px; font-weight: 400; letter-spacing: normal; vertical-align: top; } #compare-section-wrapper tr td i { font-style: italic; } #compare-section-wrapper tr td hr { width: 80px; height: 6px; background-color: var(--pg-color-ink); opacity: 0.8; border-radius: 4px; position: absolute; margin: 0; top: 50%; left: 50%; transform: translate(-50%,-50%); } #compare-section-wrapper tr:first-of-type th:first-of-type, #compare-section-wrapper tr:last-of-type th, #compare-section-wrapper tr:last-of-type td { border-bottom: 0 !important; } #compare-section-wrapper .type-2 tr td hr { position: static; transform: none; margin: 12px auto 10px; } #compare-section-wrapper p.device-name { font-size: 24px; font-weight: 600; color: var(--pg-color-surface); margin: 0; line-height: 120%; } #compare-section-wrapper p.column-title { font-size: 22px; font-weight: 600; color: var(--pg-color-muted); margin: 0; line-height: 120%; } #compare-section-wrapper span.column-title { display: inline-block; color: var(--pg-color-muted); font-weight: 600; margin: 0 0 20px 0; } #compare-section-wrapper .compare-device-table { display: flex; margin: 0 0 50px 0; padding: 25px; border-radius: 25px; } #compare-section-wrapper .compare-device-table .col { display: flex; flex: 2; flex-wrap: wrap; align-items: center; padding: 0 25px; } #compare-section-wrapper .compare-device-table .col.images { flex: 1; padding: 0 25px 0 0; border-right: 0; } #compare-section-wrapper .compare-device-table .col:last-of-type { border-right: 0 !important; } #compare-section-wrapper .compare-device-table img { display: block; max-width: 80px; width: 100%; height: auto; } #compare-section-wrapper .compare-device-table p { color: var(--pg-color-surface); margin-bottom: 8px; } #compare-section-wrapper .compare-device-table p strong { color: var(--pg-orange); } #compare-section-wrapper .compare-device-table.mark-display { border: 2px solid var(--pg-orange); } #compare-section-wrapper .compare-device-table.mark-display .col { border-right: 2px dotted var(--pg-orange); } #compare-section-wrapper .compare-device-table.mark-2 { background-color: var(--pg-color-ink); margin: 0 0 0 0; padding: 25px 25px 0 25px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } #compare-section-wrapper .compare-device-table.mark-2 .col { padding: 0 25px 25px 25px; border-right: 2px dotted var(--pg-orange); border-bottom: 2px dotted var(--pg-orange); } #compare-section-wrapper .compare-device-table.mark-2 .col.images { padding: 0 25px 25px 0; } #compare-section-wrapper .compare-device-table.mark-3 { background-color: var(--pg-color-ink); padding: 0 25px 25px 25px; border-top-left-radius: 0; border-top-right-radius: 0; } #compare-section-wrapper .compare-device-table.mark-3 .col { padding: 25px 25px 0 25px; border-right: 2px dotted var(--pg-orange); } #compare-section-wrapper .compare-device-table.mark-3 .col.images { padding: 25px 25px 0px 0; } #compare-section-wrapper .compare-device-table.mark-basic { background-color: var(--pg-color-ink); } #compare-section-wrapper .compare-device-table.mark-basic .col { border-right: 2px dotted var(--pg-color-muted); } #compare-section-wrapper .compare-device-table.mark-basic p strong { color: var(--pg-orange); } #compare-section-wrapper .compare-device-table.leo { background-color: var(--pg-color-ink); margin: 0; } #compare-section-wrapper .compare-device-table.leo .col { border-right: 2px dotted var(--pg-orange); } #compare-section-wrapper .compare-device-table.leo p strong { color: var(--pg-orange); } @media only screen and (max-width: 1280px) { #hero-section-wrapper.video { min-height: 600px; background-color: var(--pg-color-ink); } #hero-section-wrapper video { display: none; } #hero-section-wrapper .container { position: static !important; transform: none !important; display: flex; align-items: center; } #hero-section-wrapper.video .hero-content-wrapper { position: static; transform: none; } #wearables #tabs.wearable-scanners-overview .tab { width: 170px; } #wearables #tabs.wearable-scanners-overview .product-image { max-width: 80%; } } @media only screen and (max-width: 1200px) { #compare-section-wrapper table { display: block; overflow-x: auto; white-space: nowrap; } } @media only screen and (max-width: 992px) { #hero-section-wrapper { padding: 120px 0 0 0; } #hero-section-wrapper.video { padding: 80px 0 0 0; } #hero-section-wrapper .hero-image { display: none; } #wearables #tabs.wearable-scanners-overview .tabs-content video { margin-top: 0; } #wearables #tabs.wearable-scanners-overview .tab { display: block; text-align: center; padding: 12px; margin: 0 auto; } #compare-section-wrapper { overflow: hidden; } #compare-section-wrapper .compare-device-table { overflow-y: scroll; } #compare-section-wrapper .compare-device-table .col { min-width: 210px; padding: 0 15px; } #compare-section-wrapper .compare-device-table { width: 100%; } #compare-section-wrapper .compare-device-table .col.images p { display: block; width: 100%; } #compare-section-wrapper .compare-device-table .column-title { display: block; } } @media only screen and (max-width: 768px) { #wearables { padding: 60px 0; } #wearables.overview { padding: 0; } #wearables .tabs-content-navigation { background-color: transparent; display: block; width: 100%; padding: 60px 0; } #wearables #tabs .tab { width: 100%; padding: 12px 6px; } #wearables #tabs .tab-content-holder { padding: 0; } #wearables #tabs .tab-image-holder { display: block; max-width: 400px; height: auto; margin: 0 0 30px 0; } #wearables #tabs.wearable-scanners-overview .tabContent { padding: 0 0 60px 0; } #wearables #tabs.wearable-scanners-overview .product-image { max-width: 250px; padding: 0 15px; margin: 0 auto 24px; } #wearables #tabs.wearable-scanners-overview .tabs-content video { display: block; max-width: 300px; height: auto; margin: 0 auto 30px; } #wearables #tabs.wearable-scanners-overview .tab-content-holder { text-align: center; margin: 0 auto; } #compare-section-wrapper { padding: 60px 0; } #compare-section-wrapper table { border-spacing: 0; } #compare-section-wrapper tr td { padding: 15px 15px 15px 0; } } @media only screen and (max-width: 576px) { #hero-section-wrapper.video .hero-content-wrapper { position: static; transform: none; background: var(--pg-color-ink); padding: 36px 18px; } #hero-section-wrapper video { display: none; } #stats-section-wrapper .stat-content { text-align: center; width: 200px; } #stats-section-wrapper p.per { max-width: 200px; } #stats-section-wrapper .justify-content-start { justify-content: center !important; } }