/* ========================================================================== RESET & BASE STYLES ========================================================================== */ /* Modified Meyer Reset */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } table { border-collapse: collapse; border-spacing: 0; } th { font-weight: normal; text-align: left; } ul { list-style-type: none; } button { background: transparent; border: none; } * { outline: none; animation-fill-mode: both !important; -webkit-animation-fill-mode: both !important; max-width: 100%; } /* ========================================================================== FONTS ========================================================================== */ @font-face { font-family: FF-MinionPro-Regular; src: url("../fonts/MinionPro-Regular.otf"); } @font-face { font-family: FF-BentonSans-Black; src: url("../fonts/Benton Sans Black-d040.otf"); } @font-face { font-family: FF-BentonSans-Regular; src: url("../fonts/Benton Sans Regular-e212.otf"); } @font-face { font-family: FF-BentonSans-Bold; src: url("../fonts/Benton_Sans-Bold.otf"); font-weight: bold; } /* ========================================================================== CSS VARIABLES ========================================================================== */ :root { --orange: #ea5b1a; --white: #FFFFFF; --blue: #00008C; --lblue: #0045f0; --green: #00a950; --bblue: #0033a1; --lightblue: #7f99d0; --aqua: #007bc1; } .aqua { color: var(--aqua)!important; } /* ========================================================================== ANIMATIONS ========================================================================== */ @keyframes slideInRight { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-100%); } to { opacity: 1; transform: translateX(0); } } @keyframes slideDown { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .animate-slide-right { opacity: 0; animation: slideInRight 0.8s ease-out forwards; } .animate-slide-left { opacity: 0; animation: slideInLeft 0.8s ease-out forwards; } .animate-slide-left.visible { opacity: 0; animation: slideInLeft 0.8s ease-out forwards; } .animate-slide-down.visible { opacity: 0; animation: slideDown 0.8s ease-out forwards; } .animate-fade-in { opacity: 0; animation: fadeIn 0.6s ease-out forwards; } .animate-fade-in-scroll { opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease-out, transform 0.4s ease-out; } .animate-fade-in-scroll.visible { opacity: 1; transform: translateY(0); } .animate-delay-1 { animation-delay: 0.3s; } .animate-delay-2 { animation-delay: 0.6s; } .animate-delay-3 { animation-delay: 0.9s; } .animate-delay-4 { animation-delay: 1.2s; } .animate-delay-5 { animation-delay: 1.5s; } .animate-delay-6 { animation-delay: 1.8s; } /* ========================================================================== HOVER EFFECTS ========================================================================== */ .zoom-hover { overflow: hidden; cursor: pointer; } .zoom-hover img { transition: transform 0.8s ease-out; display: block; width: 100%; height: auto; } .zoom-hover:hover img { transform: scale(1.1); } .zoom-hover-slight { overflow: hidden; cursor: pointer; } .zoom-hover-slight img { transition: transform 0.8s ease-out; display: block; width: 100%; height: auto; } .zoom-hover-slight:hover img { transform: scale(1.05); } .zoom-hover-large { overflow: hidden; cursor: pointer; } .zoom-hover-large img { transition: transform 0.8s ease-out; display: block; width: 100%; height: auto; } .zoom-hover-large:hover img { transform: scale(1.15); } /* ========================================================================== BASE ELEMENTS ========================================================================== */ html, body, #container-wrap, #container { height: 100%; scroll-behavior: smooth; } body { font-family: FF-BentonSans-Regular, Arial; line-height: 1; letter-spacing: -0.25px; overscroll-behavior: contain; overflow-x: hidden; } #container:not([style*="zoom"]) { -webkit-text-size-adjust: none; } #container-wrap { position: absolute; top: 0; left: 0; min-height: 100%; width: 100%; background-color: transparent; z-index: 0; } #container { min-height: 100%; width: 100%; background-color: transparent; z-index: 0; } b { font-weight: bold; } i { font-style: italic; } a { color: inherit; text-decoration: inherit; } img { display: block; width: 100%; height: auto; max-width: 100%; } input, select, textarea { font-size: inherit; } p:first-child { margin-top: inherit !important; } p a { text-decoration: underline; color: var(--bblue); font-family: FF-BentonSans-Bold, BentonSans, Arial; } sup { vertical-align: super; font-size: 10px; } [data-onclick], [onclick], [onrollover], [data-fixed-action], [aria-details], button, .flipwrap { cursor: pointer; pointer-events: auto; } .padbottom { padding-bottom: 30px; } .showmobi { display: none!important; } main { overflow: hidden; } /* ========================================================================== TYPOGRAPHY ========================================================================== */ h2 { font-weight: bold; font-family: FF-BentonSans-Bold, BentonSans, Arial; font-size: 16px; line-height: 1.1; color: #000; text-transform: uppercase; text-align: left; } p { font-family: FF-BentonSans-Regular,"Benton Sans", Arial, serif; font-size: 16px; line-height: 24px; color: #000; text-indent: 15px; text-align: left; } .lastp { margin-bottom: 15px; } p.intro { font-size: 20px; line-height: 30px; text-indent: 0; } p.heading { font-weight: bold; font-family: FF-BentonSans-Bold,"Benton Sans",serif; font-size: 24px; line-height: 30px; color: #0033a1; text-align: center; text-indent: 0; margin: 20px 0; } p strong, cite strong { font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-weight: bold; } .upper { text-transform: uppercase; } p.pbig { font-size: 18px; font-family: FF-BentonSans-Bold, BentonSans, Arial; color: var(--bblue); } blockquote p { font-family: FF-BentonSans-Regular,"Benton Sans", Arial, serif; font-size: 24px; line-height: 36px; color: #000; text-decoration: underline; text-decoration-color: currentcolor; text-align: left; } blockquote footer { max-width: 260px; line-height: 24px; padding-bottom: 20px; } blockquote footer cite { font-family: FF-BentonSans-Regular,"Benton Sans", Arial, serif; border: none; font-size: 16px; line-height: 24px; color: #000; letter-spacing: -0.005em; text-align: left; } blockquote.alt p { font-family: FF-BentonSans-Regular,"Benton Sans", Arial, serif; font-size: 24px; line-height: 36px; color: #FFF; text-decoration: underline; text-decoration-color: currentcolor; text-align: left; } blockquote.alt footer { max-width: 260px; line-height: 24px; padding-top: 15px; border-bottom: 0!important; } blockquote.alt footer cite { font-family: FF-BentonSans-Regular,"Benton Sans", Arial, serif; border: none; font-size: 17px; line-height: 24px; color: #FFF; letter-spacing: -0.005em; text-align: left; text-shadow: 0px 1px 14px #000; } blockquote.floatquote { position: absolute; top: 100px; left: 40px; width: 30%; } svg { font-family: FF-BentonSans-Regular,"Benton Sans", Arial, serif; } .scroller div p.lastp, .scroller div span.title.lastp { margin-bottom: 0; } /* VIDEOBOX */ .video-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); overflow-y: auto; } .video-modal-content { position: relative; margin: auto; width: 80%; max-width: 900px; top: 50%; transform: translateY(-50%); } .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-close { color: #fff; position: absolute; top: -40px; right: 0; font-size: 35px; font-weight: bold; cursor: pointer; z-index: 1; } .video-close:hover { color: #ccc; } #p14 .videobox { flex: 1; margin-top: -80px; } #p14 .video-text { flex: 1; } /* ========================================================================== LISTS ========================================================================== */ .page ol { list-style-position: outside; margin-left: 1em; } .page .singleline li { text-indent: inherit; padding: 0; } .page ol > li > *, .page ul > li > * { text-indent: initial; padding-left: initial; } /* ========================================================================== SCALING & VIEWPORT MODES ========================================================================== */ body[class^='scaled-none'], body[class*=' scaled-none'] { overflow: auto; } body[class^='scaled-width'], body[class*=' scaled-width'] { overflow-x: hidden; } body[class^='scaled-height'], body[class*=' scaled-height'] { overflow-y: hidden; } body[class^='scaled-best'], body[class*=' scaled-best'] { overflow: hidden; } body[class^='scaled-best'][data-page-mode^='c'], body[class*=' scaled-best'][data-page-mode^='c'] { overflow: auto; } body[class^='scaled-width'][data-page-mode^='csh'], body[class*=' scaled-width'][data-page-mode^='csh'] { overflow-x: auto; } body[class^='scaled-height'][data-page-mode^='csv'], body[class*=' scaled-height'][data-page-mode^='csv'] { overflow-y: auto; } body[data-scaled-to='w'] #container { height: auto; min-height: auto; } body[data-scaled-to='w'][data-page-mode^='cs'] #container { position: absolute; } body[data-scaled-to='w'][data-page-mode^='csv'] .pages { padding: 0; } body.zoomed:not([class*='scaled-']) #container { position: absolute; } body[class*='scaled-'] .pages.paper-vertical { margin: 0; } body[class^='zoomed'], body[class*=' zoomed'] { overflow-x: auto; overflow-y: auto; } body[data-scaled-to] .anythingSlider-in5, body[data-scaled-to] #container > .page { padding: 0; margin: 0; } body[data-scaled-to] #in5footer { position: fixed; bottom: 0; } html.ios body[class*='scaled-'] #container { position: absolute; top: 0; left: 0; } body.tall-page { overflow-y: auto; } .liquid .page.tall-page { height: auto; } body[data-scaled-to="h"] .paper-vertical:after { display: none; } body[data-scaled-to='h'] .paper-horizontal { margin: 0; } body[data-scaled-to='h'] .paper-horizontal .page { margin-top: 0; } .nopad { padding: 0 !important; } /* ========================================================================== PAGE LAYOUT ========================================================================== */ nav.hide-skip { display: none; visibility: hidden; } .paper-vertical:after { position: relative; content: ' '; display: block; height: 50px; clear: both; } .indent0 { text-indent: 0; } .paddingtop30 { padding-top: 30px; } .paddingtop50 { padding-top: 50px; } .linebordertop { border-top: 10px solid var(--orange); padding-top: 20px; } .backtotop { font-family: FF-BentonSans-Regular,"Benton Sans", Arial, serif; font-size: 9.3px; line-height: 10.3px; color: #7f7f7f; text-align: right; } .pagetag { font-weight: bold; font-family: FF-BentonSans-Bold, BentonSans, Arial; font-size: 18px; line-height: 30px; color: #ea5b1a; letter-spacing: 0.050em; text-align: right; position: absolute; right: 100px; top: 60px; z-index: 99999; } body.blue .pagetag strong { color: #007bc1; } .marginbottom40 { margin-bottom: 40px; } figure.imgright { display: flex; width: 100%; justify-content: flex-end; margin-top: -200px; } figure.imgright img { max-width: 75%; } img.blackborder { border-bottom: 12px solid black; } img.orangeborder { border-top: 12px solid var(--orange); } #p09 .pagetag strong { color: white; } /* ========================================================================== ARTICLE LAYOUT ========================================================================== */ .article-body { max-width: 1030px; margin: 0 auto; position: relative; } .columns { display: flex; gap: 5%; } .columns section { flex: 1; padding: 40px 0 0; box-sizing: border-box; } .fullwidth { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; max-width: none; } .fullwidth img { width: 100%; height: 100%; object-fit: cover; display: block; } .wideheader { margin-left: -53px; } .wideheader img { width: 105%; max-width: 105%; } .widewidth { padding: 50px 80px; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; } .widewidth .half { width: 60%; margin-left: 40%; } aside.pullquote { display: flex; gap: 40px; } aside.pullquote figure { width: 58%; } aside.pullquote blockquote { width: 42%; } header.split { display: flex; gap: 60px; } header.split > div { flex: 1; padding: 0; position: relative; } header.split .text { width: 40%; } header.split .pic { width: 60%; } .fullcolumns { display: flex; gap: 50px; position: relative; align-items: end; margin-bottom: 0; } .fullcolumns section { flex: 1; padding: 0; position: relative; } .fullcolumns .width40 { width: 40%; flex: none; align-items: end; display: flex; flex-direction: column; } .fullcolumns .width60 { width: 60%; flex: none; } header.split ~ * .columns, header.split ~ .columns { padding-bottom: 0; } header.split ~ * .columns section, header.split ~ .columns section { padding: 0; } #p24 .columns { padding-bottom: 0; } #p28 .columns, #p25 .columns { gap: 50px } #p24 .article-body, #p25 .article-body, #p28 .article-body { padding-top: 100px; } #p24 h1 span { text-transform: none; } .columns section.width40 { flex: 43% 0 0; } .columns section.width60 { flex: 52% 0 0; } .columns section.width35 { width: 35%; } .columns section.width70 { width: 70%; } #p13 .columns section.width35 { justify-content: center; display: flex; flex-direction: column; } #row1, #row2, #row3 { align-items: unset; gap: 4%; padding: 0; } #row1 { padding-top: 50px; } #row2 { padding-top: 10px; } #row3 { padding-top: 10px; } #row1 .width60, #row3 .width60 { width: 56%; } /* ========================================================================== HEADINGS ========================================================================== */ hgroup h1 { font-family: FF-BentonSans-Regular,"Benton Sans", Arial, serif; font-size: 52px; color: #000; letter-spacing: -0.010em; text-transform: uppercase; text-align: left; line-height: 1em !important; } hgroup h1 span { display: inline-block; line-height: 1.2; padding-left: 20px; } hgroup h1 span.big { font-weight: bold; font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-size: 90px; color: #000; text-transform: none; letter-spacing: 0.010em; text-align: left; } /* ========================================================================== FOOTER COMPONENTS ========================================================================== */ .article-footer { position: relative; padding-top: 20px; border-top: 1px solid #000; max-width: 1030px; margin: 40px auto 0; } .back-to-top { position: absolute; top: -15px; right: 0; background-color: #fff; padding: 0 10px; text-decoration: none; color: var(--blue); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; display: flex; flex-direction: column; align-items: center; line-height: 1.2; } .back-to-top span { font-family: FF-BentonSans-Regular,"Benton Sans", Arial, serif; font-size: 9.3px; line-height: 10.3px; color: var(--blue); text-align: center; font-weight: 100; } .back-to-top:hover { color: #001a33; } .back-to-top svg { width: 30px; height: 30px; stroke: currentColor; stroke-width: 2; fill: none; margin-top: 2px; } .rating-section { display: block; } .rating-text { font-size: 14px; font-weight: 200; text-transform: uppercase; margin: 0; font-family: FF-BentonSans-Regular,"Benton Sans", Arial, serif; line-height: 19.2px; color: #000; text-align: left; text-indent: 0; padding-bottom: 5px; } .star-rating { display: flex; gap: 8px; align-items: center; } .star-button { background: none; border: none; padding: 0; cursor: pointer; transition: transform 0.2s ease; font-size: 26px; color: var(--blue); } .star-button .checked { display: none; } .star-button.selected .checked { display: block; } .star-button.selected .init { display: none; } /* ========================================================================== NAVIGATION COMPONENTS ========================================================================== */ .nav-container { position: fixed; bottom: 0; right: 0; z-index: 1000; } .nav-buttons { display: flex; flex-direction: column; align-items: flex-end; } .nav-button { width: 50px; height: 50px; background-color: #00008C; color: var(--white); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; position: relative; } #homeBtn.nav-button { padding: 0; } .nav-button:hover { background-color: var(--white); color: var(--blue); } .nav-button svg { width: 24px; height: 24px; fill: white; stroke: white; } .home-icon { stroke-width: 2; fill: none; } .menu-icon { fill: none; stroke-width: 2; } .menu-icon line { transition: all 0.3s ease; } .nav-button.active .menu-icon .line1 { transform: rotate(45deg) translate(5px, 5px); } .nav-button.active .menu-icon .line2 { opacity: 0; } .nav-button.active .menu-icon .line3 { transform: rotate(-45deg) translate(7px, -6px); } .popup-menu { position: fixed; top: 0; left: -395px; width: 395px; height: 96%; background-color: #ededed; box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2); overflow-y: auto; transition: left 0.3s ease; z-index: 999; } .popup-menu.active { left: 0; } .menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 998; } .menu-overlay.active { opacity: 1; visibility: visible; } .menu-item { display: flex; align-items: center; text-decoration: none; color: var(--blue); font-family: FF-BentonSans-Regular; transition: background-color 0.2s ease; border-bottom: 1px solid var(--blue); padding-right: 20px; } .menu-item:hover, .menu-item.current { background-color: #00008C; color: white; } .menu-item-thumbnail { width: 115px; height: 87px; object-fit: cover; margin-right: 15px; flex-shrink: 0; } .menu-item:hover .menu-item-thumbnail, .menu-item.current .menu-item-thumbnail { border-color: white; } .menu-item-content { flex: 1; min-width: 0; } .menu-item-title { font-size: 14px; font-weight: 500; margin-bottom: 4px; line-height: 1.3; } .menu-item-meta { font-size: 11px; color: #0000CD; font-weight: 500; } .menu-item:hover .menu-item-meta, .menu-item.current .menu-item-meta { color: rgba(255, 255, 255, 0.9); } .popup-menu::-webkit-scrollbar { width: 6px; } .popup-menu::-webkit-scrollbar-track { background: #f1f1f1; } .popup-menu::-webkit-scrollbar-thumb { background: #00008C; border-radius: 3px; } .popup-menu::-webkit-scrollbar-thumb:hover { background: #000066; } .desktop-only { display: flex; } .mobile-visible { display: flex; } /* ========================================================================== PAGE NAVIGATION (PREV/NEXT BUTTONS) ========================================================================== */ nav[role="navigation"][aria-label="Page navigation"] { position: absolute; left: -9999px; } .page-navigation { position: fixed; top: 50%; transform: translateY(-50%); width: 100%; pointer-events: none; z-index: 9999999; } .page-nav-btn { position: absolute; width: 56px; height: 56px; background-color: var(--blue); /* display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; pointer-events: all; */ color: var(--white); } .page-nav-btn:hover { color: var(--lblue); } .page-nav-btn svg { font-size: 26px; } /* .page-nav-btn i { color: white; font-size: 24px; transition: color 0.3s ease; } .page-nav-btn:hover i { color: #00008C; } .page-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; } */ .page-nav-prev { left: 0; } .page-nav-next { right: 0; } /* ========================================================================== SOCIAL SHARE ========================================================================== */ /* .social-share-container { position: absolute; right: -100px; top: 90px; transform: translateY(-50%); z-index: 100; display: flex; flex-direction: column; gap: 12px; } */ .social-share-container { z-index: 100; display: flex; flex-direction: row; gap: 12px; margin-top: 10px; margin-bottom: 30px; } .social-btn { width: 45px; height: 45px; border-radius: 50%; background-color: #FFF; border: 2px solid var(--blue); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; position: relative; } .social-btn:hover { background-color: #00008C; transform: scale(1.08); color: #FFF; } .social-btn i, .social-btn svg { color: var(--white); font-size: 26px; transition: color 0.3s ease; } .social-btn:hover i { color: var(--white); } .checkmark-btn { background-color: #00008C; display: flex; color: var(--white); cursor: pointer; } .share-trigger-btn { background-color: #00008C; color: var(--white); } /* .share-options { position: absolute; top: 60px; left: 0; display: flex; flex-direction: column; gap: 10px; opacity: 0; visibility: hidden; transform: translateY(-20px); transition: all 0.3s ease; background-color: white; padding: 12px 0; border-radius: 25px; } */ .share-options { position: relative; top: auto; left: auto; display: flex; flex-direction: row; gap: 10px; opacity: 0; visibility: hidden; transition: all 0.3s ease; background-color: white; padding: 0; border-radius: 25px; margin-left: 10px; } .share-options.active { opacity: 1; visibility: visible; transform: translateY(0); } .share-option-btn { width: 45px; height: 45px; border-radius: 50%; background-color: var(--white); border: 1px solid var(--blue); color: var(--blue); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; text-decoration: none; } .share-option-btn:hover { background-color: var(--blue); color: var(--white); transform: scale(1.1); } .share-option-btn i { color: var(--blue); font-size: 18px; } .share-wrapper { position: relative; display: flex; align-items: center; } .social-share-container.right-social .share-wrapper { width: 100%; justify-content: flex-end; } .social-share-container.right-social .share-wrapper .share-options { position: absolute; right: 55px; margin-right: 12px; } .guguhead .social-share-container.right-social .share-wrapper { padding-right: 10px; } .social-share-container.right-social { position: relative; } #whatsappShare svg { height: 1.2em; color: var(--blue); fill: var(--blue); } #whatsappShare:hover svg { fill: white; } #p32 .social-share-container { margin-top: 80px; } #p32 .social-share-container.mobi { margin-top: 40px; } /* ========================================================================== COLOR THEMES ========================================================================== */ .green { color: var(--green); } .orange blockquote footer { border-bottom: 10px solid var(--orange); } .orange blockquote p { text-decoration-color: var(--orange); -webkit-text-decoration-color: var(--orange); } .orange .pagetag { color: var(--orange); z-index: 9999; } .blue blockquote footer { border-bottom: 10px solid var(--blue); } .blue blockquote p { text-decoration-color: var(--blue); -webkit-text-decoration-color: var(--blue); } .blue .pagetag { z-index: 999; } .green blockquote footer { border-bottom: 10px solid var(--green); } .green blockquote p { text-decoration-color: var(--green); -webkit-text-decoration-color: var(--green); } .green .pagetag { color: var(--green); z-index: 999; } #p14.green .pagetag { color: white!important; } #p16.green .pagetag { color: white!important; } .bblue .pagetag { color: var(--lightblue); z-index: 999; } .black .pagetag { color: var(--black); z-index: 999; right: 50px; } .quotebox { padding: 100px 30px 10px; margin: 30px 0; position: relative; overflow: hidden; } .quotebox.quotedown { padding: 30px 10px 30px 100px; } .quotebox p.lastp { margin-bottom: 20px; } .quotebox.qorange { background: var(--orange); } .quotebox.qorange p { color: var(--white); } .quotebox.qblue { background: var(--aqua); } .quotebox.qblue p { color: var(--white); } .quotebox.qgreen { background: var(--green); } .quotebox.qgreen p { color: var(--white); } .quotebox { padding: 80px 30px 10px; margin: 30px 0 50px; position: relative; overflow: hidden; z-index: 9; } .quotebox.down .arrow-svg { position: absolute; top: 0; left: 0; right: auto; width: 100%; height: 80px; } .quotebox .arrow-svg { position: absolute; top: 0; left: 0; right: auto; height: 100%; width: 80px; } .quotebox.horizontal .arrow-svg { height: 80px; width: 100%; } .quoteboksie { margin: 40px 0; } .quoteboksie p { font-weight: bold; font-size: 24px; line-height: 38px; color: #000; text-decoration: underline; text-decoration-color: currentcolor; text-decoration-color: #ea5b1a; -webkit-text-decoration-color: #ea5b1a; text-align: left; } .quoteboksie span { border-bottom: 8px solid var(--orange); display: block; padding-top: 18px; max-width: 50%; } .quoteboksie.aqua p { text-decoration: underline; text-decoration-color: currentcolor; text-decoration-color: var(--aqua); -webkit-text-decoration-color: var(--aqua); } .quoteboksie.green p { text-decoration: underline; text-decoration-color: currentcolor; text-decoration-color: var(--green); -webkit-text-decoration-color: var(--green); } .quoteboksie.aqua span { border-bottom: 8px solid var(--aqua); } .quoteboksie.green span { border-bottom: 8px solid var(--aqua); } .introbox { } .introbox hr { margin: 20px 0; padding: 0; border: none; border-bottom: 1px solid #000; } .introbox hr.half { width: 33%; } .introbox hr.right { margin-left: 67%; } .introbox .time { } p.time { font-family: FF-BentonSans-Regular,"Benton Sans", Arial, serif; font-size: 20px; line-height: 30px; color: #000; text-align: left; text-indent: 0; margin: 20px 0; } .bigtext { padding-top: 40px; } .bigtext p { font-size: 23px; line-height: 1.3; } #p08 .scroller div span.title { text-transform: uppercase; } #p08 .scroller > div { min-height: 250px; } #p08 .share-options { background: none; } #p13 .quotebox .arrow-svg { object-fit: contain; } #p14 hgroup h1 span.line1 { padding-left: 0; font-size: 103.3px; line-height: 1; color: #000; letter-spacing: -0.020em; } #p14 hgroup h1 span.line2 { padding-left: 0; font-weight: bold; font-family: FF-BentonSans-Bold,"Benton Sans",serif; font-size: 103.3px; line-height: 1; color: #000; letter-spacing: -0.020em; } #p14 hgroup { margin-bottom: 30px; } #p14 .up1, #p14 .up2 { padding-top: 0; } #p14 .up3 .quoteboksie { margin-top: 0; } #p14 .fullwidth { margin-top: -100px; position: relative;z-index: -1; } #p14 .up1 { padding: 40px; margin-top: -200px; background: white; } #p14 .up2 .quotebox { margin-top: -40px } #p14 .nogap { gap: 0; } /* ========================================================================== PAGE SPECIFIC STYLES ========================================================================== */ header.split { } header.split hgroup { margin-bottom: 20px; } header.split .text { justify-content: flex-end; display: flex; padding-top: 100px; } header.split .line1 { font-size: 52px; line-height: 1em; color: #000; text-align: left; padding-left: 0; } header.split .line2 { font-weight: bold; font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-size: 85px; line-height: 1em; color: #000; letter-spacing: -0.010em; padding-left: 0; } header.split .line3 { font-size: 52px; line-height: 1em; color: #000; text-align: left; padding-left: 0; } header.split .introbox hr { margin: 15px 0 25px; } .toplayer { position: relative; z-index: 999; } .bluetextbox { background: var(--bblue); padding: 40px; } .bluetextbox p { color: var(--white); } .arrow-blue { margin-right: calc(-50vw + 50%); max-width: 50vw; padding-top: 44px; padding-left: 45px; } .arrow-white { position: absolute; left: 100%; width: calc(50vw - 50%); margin: 0; top: 0; } .arrow-white img { width: 100%; display: block; } #p21 header { position: relative; } #p21 .widewidth { padding: 0 80px; } #p21 .widewidth .half { display: flex; align-items: center; height: 100%; } #p21 .widewidth hgroup { padding-top: 100px; } #p21 .widewidth span { padding: 0; } #p21 .widewidth span.line1 { display: block; font-weight: bold; font-family: FF-BentonSans-Bold,"Benton Sans",serif; font-size: 65px; line-height: 1; color: #fff; text-transform: uppercase; text-align: center; } #p21 .widewidth span.line2 { display: block; font-weight: 900; font-family: FF-BentonSans-Black,"Benton Sans",serif; font-size: 160px; line-height: 140px; color: #fff; text-transform: uppercase; text-align: center; } #p21 .quotebox { margin-top: -40px; padding-bottom: 0; } #p21 .social-share-container { padding-bottom: 0; margin-bottom: 0; } #p21 .colimgoverflow .text { padding-bottom: 0!important; } #p21 .col60 section { padding-top: 0!important; } #p21 .numquote { padding-top: 30px; } #p21 .colimgoverflow section.text { padding-top: 0; } #p21 h1 { text-shadow: 0px 1px 14px rgba(0, 0, 0, .5); } #p22 { background: var(--bblue); } #p22 .article-body { position: unset; } #p22 .bluecentertext { color: white; width: fit-content; margin: 80px auto 50px; position: relative; } #p22 .bluecentertext h1 { text-align: right; font-size: 140px; font-family: FF-BentonSans-Bold,"Benton Sans",serif; line-height: .9; } #p22 .bluecentertext h2 { font-weight: bold; font-family: FF-BentonSans-Bold,"Benton Sans",serif; font-size: 28px; line-height: 34px; color: #fff; letter-spacing: 0.020em; text-transform: uppercase; text-align: left; margin: 50px 0; } #p22 .bluecentertext h3 { font-size: 22px; line-height: 32px; color: #fff; text-align: left; } #p22 .bluecentertext h3 strong { font-weight: bold; font-family: FF-BentonSans-Bold,"Benton Sans",serif; font-size: 22px; line-height: 32px; color: #fff; text-align: left; } #p23 .columns { gap: 50px; } #p23 hgroup { margin: 40px 0 50px; } #p23 hgroup h1 { text-align: right; font-weight: bold; font-family: FF-BentonSans-Bold,"Benton Sans",serif; font-size: 60px; line-height: 1.1!important; color: #000; text-decoration: underline; text-decoration-color: currentcolor; text-decoration-color: #0033a1; -webkit-text-decoration-color: #0033a1; text-transform: uppercase; } #p23 .introbox p { text-align: right; } #p23 .introbox { padding-left: 100px } #p23 .pullright { position: relative; right: -95px; } #p26 .columns { gap: 25px; } #p26 hgroup { margin: 40px 0 50px; } #p26 hgroup h1 { text-align: right; font-weight: bold; font-family: FF-BentonSans-Bold,"Benton Sans",serif; font-size: 58px; line-height: 1.1!important; color: #000; text-decoration: underline; text-decoration-color: currentcolor; text-decoration-color: #0033a1; -webkit-text-decoration-color: #0033a1; text-transform: uppercase; } #p26 .introbox p { text-align: right; } #p26 .pullright { position: relative; right: -95px; } #p26 .toplayer { margin-top: 86px; } #p26 .arrow-blue-right { right: -25px; } #p26 .toplayer { flex: 57% 0 0; } #p27 #scrollhere.columns { padding-bottom: 30px; } #p27 hgroup { margin: 40px 0 50px; } #p27 hgroup h1 { font-weight: bold; font-family: FF-BentonSans-Bold,"Benton Sans",serif; font-size: 60px; line-height: 1.1!important; color: #000; text-decoration: underline; text-decoration-color: currentcolor; text-decoration-color: #0033a1; -webkit-text-decoration-color: #0033a1; text-transform: uppercase; } #p26 .splitbox { position: relative; flex: 40% 0 0; } .arrow-blue-right { margin-left: calc(-50vw + 50%); max-width: 50vw; max-width: 50vw; right: -50px; position: absolute; bottom: 0; } #p24 .mid { display: flex; align-items: center; } #p24 hgroup h1 span { font-weight: bold; font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-size: 60px; line-height: 70px; color: #000; text-decoration: underline; text-decoration-color: currentcolor; text-decoration-color: #0033a1; letter-spacing: -0.25px; } #p28 hgroup, #p25 hgroup { padding-bottom: 20px; } #p28 hgroup h1 span, #p25 hgroup h1 span { font-weight: bold; font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-size: 60px; line-height: 70px; color: #000; text-decoration: underline; text-decoration-color: currentcolor; text-decoration-color: #0033a1; letter-spacing: -0.25px; text-align: right; padding: 0; } #p28 .introbox p, #p25 .introbox p { text-align: right; } #p28 .introbox hr, #p25 .introbox hr { margin-left: 67%; } #p28 section.bottom, #p25 section.bottom { display: flex; justify-content: flex-end; flex-direction: column; } #p29 { } #p29 header { position: relative; min-height: 700px; height: fit-content; width: auto; overflow: hidden; object-fit: cover; } #p29 header img { height: 100%; } #p29 header hgroup { position: absolute; max-width: 1030px; margin: 0 auto; left: 10%; top: 20%; } #p29 header .line1 { font-size: 72px; line-height: 1em; color: #fff; letter-spacing: 0.010em; text-transform: uppercase; text-align: left; } #p29 header .line2 { font-weight: bold; font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-size: 108.6px; line-height: 1em; color: #fff; text-align: left; } #p29 header .line3 { font-size: 72px; line-height: 1em; color: #fff; letter-spacing: 0.010em; text-transform: uppercase; text-align: right; position: absolute; bottom: -60px; right: 27px; } #p29 .bottombigbox { position: relative; margin-top: 30px; } #p29 .bottombigbox .half { position: absolute; right: 0; top: 0; width: 50%; display: flex; height: 100%; align-items: center; } #p29 .quotebox.qorange { margin-top: -150px; } .scrollbox { border: 10px solid var(--orange); border-right: 0; padding: 40px; background: white; max-width: 64%; position: relative; } #p29 .scrollbox { padding: 40px 60px 40px 40px ; } #p29 .article-footer { padding-bottom: 30px; margin-top: 100px; } .scrollbox .scrollhead { font-weight: bold; font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-size: 34px; line-height: 1em; color: #ea5b1a; text-transform: uppercase; text-align: left; } .scroller { padding-top: 20px; } .scroller > div { min-height: 360px; box-sizing: border-box; flex-direction: column; } .scroller div span.num { padding: 0 0 20px 0; font-size: 80.6px; color: #000; text-align: left; line-height: 1em; display: block; } .scroller div span.title { font-weight: bold; font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-size: 22px; line-height: 1.2; color: #ea5b1a; letter-spacing: 0.010em; margin-bottom: 15px; display: block; text-align: left; text-transform: uppercase; } .scrollnav { font-weight: bold; margin-top: 20px; font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-size: 18px; line-height: 1em; color: #000; text-align: center; position: relative; } .scrollnav span { top: -6px; display: inline-block; margin: 0 10px; position: relative; } .scrollnav a { color: var(--blue); display: inline-block; } .scrollnav a svg { height: 30px; } .scroller .slide { position: relative; } .scrollbox.fullscroll { border: 10px solid var(--bblue); border-right: 0; width: 100%; max-width: 100%; box-sizing: border-box; position: relative; } .scrollbox.fullscroll .scrollhead { color: var(--bblue); } .scrollbox.fullscroll .slide figure { margin-bottom: 30px; } .scrollbox.fullscroll .slide img { max-width: 65%; } .scrollbox.fullscroll .slide p a { color: var(--bblue); font-weight: bold; font-family: FF-BentonSans-Bold, "Benton Sans", serif; } .scrollbox.fullscroll figure.arrowscroll { position: absolute; top: 93px; right: 50px; width: 100px; } .orange .scrollbox.fullscroll { border-color: var(--orange); } .orange .scrollbox.fullscroll .scrollhead { color: var(--orange); } .orange .scroller div span.title { color: var(--orange); } .scrollbox.bluescroll { background: var(--bblue); margin-bottom: 50px; display: block; padding: 25px; border: none; } .scrollbox.bluescroll .scroller { padding: 0; } .scrollbox.bluescroll .slide p { color: white; } .scrollbox.bluescroll .slide { display: flex; flex-direction: inherit; min-height: 0; } .scrollbox.bluescroll .slide figure { padding: 0; margin: 0; width: 50%; } .scrollbox.bluescroll .slide .slidetext { width: 50%; text-align: center; display: flex; justify-content: center; flex-direction: column; align-items: center; } .scrollbox.bluescroll .slide .slidetext p { text-align: center; } .scrollbox.bluescroll .slide img { max-width: 100%; } .scrollbox.bluescroll .scrollnav { color: #FFF; } .scrollbox.bluescroll .scrollnav path { color: white; } .scrollbox.noborderbox { border: none; padding: 0; margin-top: 110px; } .scrollbox.noborderbox .slide img { max-width: 100%; } .scrollbox figcaption { position: absolute; bottom: 0; left: 0; max-width: 90%; box-sizing: border-box; background: #000; color: #FFF; font-size: 12px; line-height: 1.2; padding: 10px; } .scrollbox.fullscroll figure.arrowscroll { position: absolute; top: 93px; right: 50px; width: 100px; opacity: 0; } .scrollbox.aqua { border: none; background: #efefef; padding: 30px; border-bottom: 8px solid var(--aqua); max-width: 100%; } .scrollbox.aqua .scrollhead { color: var(--aqua); } .scroller div span.title { color: var(--aqua); font-size: 16px; } .scrollbox.green { border: none; background: #efefef; padding: 30px; border-bottom: 8px solid var(--green); max-width: 100%; } .scrollbox.green .scrollhead { color: var(--green); } .scrollbox.green .scroller div span.title { color: var(--green); font-size: 16px; } .scrollbox.green .slide { min-height: 240px; } .stat-callout { margin-top: 50px; } .stat-callout .stat-number { color: var(--aqua); font-size: 126px; font-weight: bold; font-family: FF-BentonSans-Bold,"Benton Sans",serif; padding-right: 15px; } .stat-callout p.stat-text { color: var(--aqua); font-weight: bold; font-family: FF-BentonSans-Bold,"Benton Sans",serif; font-size: 26px; line-height: 1.2; } .stat-callout p.stat-source { font-size: 12px; line-height: 10px; margin-top: 10px; } .stat-callout .stat { display: flex; } .videobox { position: relative; padding-bottom: 0; } .videobox .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 60px; width: 60px; margin: auto; } #p19 .videobox { padding-bottom: 30px; } #p21 .article-body { max-width: 1030px; margin: 0 auto; position: relative; overflow: visible; } .colimgoverflow { gap: 60px; display: flex; align-items: center; position: relative; } .colimgoverflow section.text { flex: 0 0 calc(70% - 30px); padding: 80px 0 30px; } .colimgoverflow section.img { position: absolute; height: 100%; left: calc(70% + 30px); right: calc(-1 * ((100vw - 1030px) / 2)); top: 0; background: url('../images/21-2.png') center center; background-size: 100%; } .col60 { display: flex; gap: 50px; } .col60 > section:first-child { flex: 0 0 calc(45% - 25px); } .col60 > section:last-child { flex: 0 0 calc(55% - 25px); } .numquote { border-bottom: 10px solid var(--orange); display: flex; margin-bottom: 50px; align-items: center; } .numquote span.num { font-weight: bold; font-family: FF-BentonSans-Bold,"Benton Sans",serif; font-size: 110px; line-height: 1.1; padding-right: 10px; color: #ea5b1a; display: block; text-align: left; } .numquote span.text { font-family: FF-BentonSans-Regular,"Benton Sans", Arial, serif; font-size: 20.7px; display: block; line-height: 1.1; color: #000; letter-spacing: 0.010em; text-transform: uppercase; text-align: left; } .numquote span.text strong { font-weight: bold; font-family: FF-BentonSans-Bold,"Benton Sans",serif; font-size: 35.2px; line-height: 1; color: #000; letter-spacing: 0.010em; display: inline-block; text-transform: uppercase; text-align: left; } .overflowbox { position: absolute; right: calc(5% ); left: calc(-1 * ((100vw - 1030px) / 2)); top: -80px; } @keyframes slideInFromTop { from { transform: translateY(-200px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .scrollbox.fullscroll figure.arrowscroll.slide-in { animation: slideInFromTop 0.6s ease-out forwards; } .scrollbox.fullscroll figure.arrowscroll.fade-out { animation: fadeOut 0.4s ease-out forwards; } #p04 blockquote { margin: 50px 0; } body#p30 { background: url('../images/30-1.jpg'); background-attachment: fixed; background-size: cover;} #p30 header { max-width: 1030px; margin: 0 50px 0 auto; position: relative; text-align: center; } #p30 h1 { padding-left: 0; } #p30 h1 .line1 { line-height: 1em !important; width: 100%; text-align: center; display: block; font-size: 65px; color: #ea5b1a; text-transform: uppercase; } #p30 h1 .line2 { font-weight: bold; font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-size: 122.3px; color: #000; letter-spacing: -0.005em; text-align: center; line-height: 1em !important; width: 100%; text-transform: none; display: block; margin: 20px 0; } #p30 main { padding-bottom: 30px; max-width: 90%; background: white; top: 150px; position: relative; padding-top: 60px; } #p30 .pagetag { color: white; } #p30 .article-body { max-width: 1030px; margin: 0 50px 0 auto; position: relative; } #p31 header { display: flex; overflow: hidden; } #p31 header figure { width: 52%; } #p31 hgroup h1 span.big { font-size: 85px; } #p31 hgroup h1 span { font-size: 50px; } #p31 header section { width: 48%; position: relative; display: flex; justify-content: flex-end; flex-direction: column; padding-top: 54px } #p31 header section hgroup { position: relative; } #p31 header section hgroup h1 { background: var(--white); padding-bottom: 20px; padding-right: 20px; position: absolute; left: -100px; bottom: 0; } #p31 header section .bottombits { padding: 20px 20px 0; max-width: 80%; position: relative; } #p31 header section hr { border: none; border-top: 1px solid #717171; margin: 20px 0; max-width: 60%; } #p31 .oneup { gap: 0; flex: none; } #p31 .oneup section { flex: none; padding: 30px; width: 45%; } #p31 .oneup section.up { position: relative; background: #FFF; padding: 0; width: 55%; } #p31 .upcontent { position: absolute; bottom: 0; padding: 30px; background: #FFF; } #p31 #scrollhere { padding-bottom: 40px; } #p31 .social-share-container { margin-bottom: 0; } .statsbox { background: var(--orange); padding: 40px; width: 100%; box-sizing: border-box; } .statsbox span.stathead { font-weight: bold; font-family: FF-BentonSans-Bold,"Benton Sans",serif; font-size: 30px; line-height: 1.2; color: #fff; letter-spacing: 0.020em; display: block; margin-bottom: 30px; text-transform: uppercase; text-align: left; } .statsbox .num { font-weight: bold; font-family: FF-BentonSans-Bold,"Benton Sans",serif; font-size: 57.1px; line-height: 1.2; color: #fff; letter-spacing: 0.005em; display: block; text-align: left; } .statsbox .label { font-family: FF-BentonSans-Regular,"Benton Sans", Arial, serif; font-size: 19px; display: block; line-height: 1.2; color: #fff; text-transform: uppercase; text-align: left; } .statsbox hr { border: 0; border-bottom: 1px solid white; margin: 15px 0; width: 50%; } #p32 main { padding-bottom: 0; } #p33 .quotebox { margin-top: -215px; } #p33 .quoteboksie { margin: 40px 0; } #p34 hgroup { padding-bottom: 70px; } #p34 hgroup h1 span { padding: 0; } #p34 hgroup h1 span.line1 { font-family: FF-BentonSans-Regular,"Benton Sans", Arial, serif; font-size: 75px; line-height: 1.1; color: #000; text-transform: uppercase; text-align: left; } #p34 hgroup h1 span.line2 { font-weight: bold; font-family: FF-BentonSans-Bold,"Benton Sans",serif; font-size: 100px; line-height: 1.1; color: #000; letter-spacing: -0.020em; text-transform: none; text-align: left; } #p34 header { margin-bottom: 50px; } #p34 header.split { gap: 0; align-items: flex-end; } #p34 header.split .text { padding-top: 0; flex-basis: 65%; } #p34 header.split .pic { padding-top: 0; flex-basis: 35%; } #p34 .quotebox .arrow-svg { height: 80px; width: 100%; } #p34 .quotebox.qorange { margin-bottom: 0; } #block-1 { padding-bottom: 40px; } #block-1 .stat-number, #block-5 .stat-number { font-family: FF-BentonSans-Regular,"Benton Sans",serif; font-size: 103.9px; line-height: 95.9px; color: #007bc1; letter-spacing: 0.020em; text-align: center; } #p32 #block-1 .stat-number, #p32 #block-5 .stat-number { color: var(--orange); font-size: 64px; font-weight: bold; font-family: FF-BentonSans-Bold,"Benton Sans",serif; line-height: 1.2; } #p32 #block-5 .stat-number { text-align: left; } #p32 #block-5 { border-top: none; border-bottom: 10px solid black; padding-bottom: 40px; margin-bottom: 40px; } #block-1 .stat-label, #block-5 .stat-label { font-size: 28px; color: var(--orange); text-align: center; line-height: 1.1; text-transform: uppercase; } #block-1 .stat-label { padding-bottom: 30px; border-bottom: 15px solid black; width: fit-content; margin: 0 auto; } #block-2 { padding-bottom: 50px; padding-top: 60px; } #block-2 .stat-number { font-size: 210px; line-height: 1; letter-spacing: -0.020em; text-align: center; } #block-2 .stat-label { text-align: center; font-size: 26px; line-height: 1.2; } #block-3 { position: absolute; top: 23%; left: 50%; background: var(--white); } #block-3 .stat-number, #block-6 .stat-number { font-weight: bold; font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-size: 119px; line-height: 1; letter-spacing: 0.010em; text-align: left; } #block-3 .stat-number { position: absolute; left: -223px; background: white; padding: 15px; box-sizing: border-box; } #block-3 .stat-label { padding: 15px 20px; font-size: 38px; line-height: 46px; text-decoration: underline; text-decoration-color: currentcolor; text-decoration-color: #ea5b1a; -webkit-text-decoration-color: #ea5b1a; text-align: left; } #block-3 .stat-label strong { font-weight: bold; font-family: FF-BentonSans-Bold, "Benton Sans", serif; } #block-4 h1 { padding: 40px 40px 0; } #block-4 h1 span { font-weight: bold; font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-size: 64px; line-height: 60px; color: #000; letter-spacing: 0.010em; text-transform: uppercase; margin-bottom: 16px; text-align: left; } #block-4 { position: relative; margin-top: 40px; } #block-4 .orangebox { border: 20px solid var(--orange); border-right: 0; position: absolute; left: 0; height: 100%; width: 186px; } #block-5 { width: fit-content; border-top: 10px solid black; padding-top: 30px; } #block-5 { width: 100%; } #block-5 .stat-number { text-align: center; margin-bottom: 10px; } #block-5 .stat-label { text-align: left; } #block-6 { width: fit-content; } #block-6 .stat-number { font-size: 108px; text-align: center; } #block-6 .stat-label { border: none; font-size: 28px; line-height: 36px; text-align: center; } .img50 { max-width: 50%; height: auto; } #block-4.firstblock { display: none; } #block-5 .stat-description { font-family: FF-BentonSans-Regular,"Benton Sans",serif; font-size: 28px; line-height: 36px; color: #007bc1; text-transform: uppercase; text-align: center; } #block-5 .source { text-align: center; } .borderbx figure { border-left: 1px solid #000; border-top: 1px solid #000; padding-top: 30px; padding-left: 30px; } .borderbx span { display: block; text-align: center; font-size: 14px; margin-top: 30px; } #block-4 .bluebox { border: 20px solid #007bc1; border-right: 0; position: absolute; left: 0; height: 100%; width: 186px; } #block-4 .greenbox { border: 20px solid var(--green); border-right: 0; position: absolute; left: 0; height: 100%; width: 186px; } #block-4 .source { padding-left: 39px; } .borderbx { display: flex; flex-direction: column; } .borderbx h4 { background: #005fab; color: white; text-transform: uppercase; font-weight: bold; font-family: FF-BentonSans-Bold, BentonSans, Arial; font-size: 24px; line-height: 30px; color: #fff; text-transform: uppercase; text-align: center; } .mobionly { display: none; } .sectionpage { height: 100vh; width: 100vw; display: grid; grid-template-columns: 1fr 5fr; gap: 0; overflow: hidden; position: relative; } .sectionpage img { display: block; width: 100%; height: auto; } .sectionpage main { padding: 0; margin: 0; } .sectionpage .content { position: relative; } #p20 .sectionpage .title { background: #FFF url('../images/20-1.png'); background-size: cover; background-position: right center; } #p20 .sectionpage { background: url('../images/20-2.jpg'); background-size: cover; background-position: center; position: relative; } #p20 blockquote.alt footer cite strong { text-transform: uppercase; } #p20 blockquote.alt footer cite { text-transform: none; } #p12 .sectionpage .title { background: #FFF url('../images/12-1.png'); background-size: cover; background-position: right center; } #p12 .sectionpage { background: url('../images/12-2.jpg'); background-size: cover; background-position: center; position: relative; } #p06 .sectionpage .title { background: #FFF url('../images/6-1.png'); background-size: cover; background-position: right center; } #p06 .sectionpage { background: url('../images/6-2.jpg'); background-size: cover; background-position: center; position: relative; } #p02 .sectionpage { background: #FFF url('../images/2-1.jpg'); background-size: cover; background-position: bottom right; } #p02 .sectionpage .topcorner { position: absolute; top: 0; left: 0; width: 40%; height: auto; } #p02 .sectionpage .text { position: absolute; top: 0; bottom: 0; left: 10%; width: 40%; height: auto; margin: auto 0; } #p19 hgroup { position: absolute; left: 100px; bottom: 50px; } #p19 hgroup h1 { color: white; line-height: 1.3; } #p19 hgroup h1 span { display: block; line-height: 1.3; } #p19 hgroup h1 span.line2 { font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-size: 80px; } #p19 .pagetag { color: white; } #p02 main, #p06 main, #p12 main, #p20 main { padding: 0; } #p05 { } .guguhead { display: flex; margin-top: 120px; flex-direction: row-reverse;} .guguhead .wideleft { justify-content: flex-end; position: relative; width: 31%; } .guguhead .wideleft img { height: 50%; width: auto; position: absolute; top: 25%; right: -60px; } .guguhead .wideleft .introbox { position: absolute; right: 0; bottom: 0; width: 100%; } .guguhead .social-share-container { margin-bottom: 0; left: 10px; } .guguhead .wideright { width: 65%; height: fit-content; } .guguhead .wideright img { height: auto; } #p05 { } #p05 .signature { padding-left: 20%; } #p05 blockquote { margin-bottom: 40px; } #p05 .introbox { padding-right: 10px; } #p05 .introbox p { text-align: right; margin: 0; } .emaillink { margin-top: 50px; display: block; } .emaillink img { width: 53px !important; height: 32px !important; margin-bottom: 5px; } p.bblue { color: var(--bblue); } .nobottom { padding-bottom: 0; } img.sigpic { max-width: 42%; } .signature { padding-left: 40%; } .signature.right { } /* ========================================================================== PAGE 01 SPECIFIC STYLES - Front Cover ========================================================================== */ /* ========================================================================== PAGE 03 SPECIFIC STYLES - Contents Page ========================================================================== */ #p03.contents { background-color: #FFFFFF; } #p03 .contents-page { max-width: 1400px; margin: 0 auto; padding: 80px 60px 0; } #p03 .contents-title { font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-size: 90px; font-weight: 900; text-align: center; color: #000000; margin-bottom: 60px; letter-spacing: 0.02em; } #p03 .contents-regulars { text-align: center; margin-bottom: 50px; } #p03 .contents-regulars h2 { font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-size: 48px; font-weight: bold; color: #000000; margin-bottom: 40px; text-transform: uppercase; text-align: center; display: block; line-height: 1.1; } #p03 .regulars-list { display: flex; justify-content: center; gap: 100px; flex-wrap: wrap; } #p03 .regular-item { font-size: 16px; font-family: FF-BentonSans-Bold,"Benton Sans",serif; display: flex; flex-direction: column; text-align: left; text-decoration: none; color: #0033a1; transition: opacity 0.3s ease; } #p03 .regular-item:hover span { opacity: 0.9; color: #000; } #p03 .regular-title { font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-size: 18px; font-weight: bold; color: #0033a1; margin-bottom: 5px; line-height: 1.3; } #p03 .regular-title span { font-size: 16px; } #p03 .regular-time { font-family: FF-BentonSans-Regular, "Benton Sans", serif; font-size: 13px; color: #0033a1; } #p03 .contents-section { display: flex; margin-bottom: 40px; min-height: 500px; } #p03 .section-image { width: 50%; position: relative; overflow: hidden; } #p03 .section-image img { width: 100%; height: 100%; object-fit: cover; } #p03 .section-content { width: 50%; padding: 50px 60px; box-sizing: border-box; } #p03 .growth-section { display: block; background: #487cbd; } #p03 .growth-section .section-content { width: 100%; display: flex; gap: 40px; } #p03 .growth-section .blocks { background-color: #487cbd; width: 100%; display: flex; } #p03 .growth-section .blocks .section-image { width: 50%; } #p03 .growth-section .blocks .section-heading { padding: 30px; text-align: right; width: 50%; box-sizing: border-box; } #p03 .prosperity-section { display: block; background: var(--orange); } #p03 .prosperity-section .section-content { width: 100%; display: flex; gap: 40px; } #p03 .prosperity-section .blocks { background-color: #ea5b1a; width: 100%; display: flex; } #p03 .prosperity-section .blocks .section-image { width: 50%; } #p03 .prosperity-section .blocks .section-heading { padding: 30px; text-align: right; width: 50%; box-sizing: border-box; } #p03 .prosperity-section .section-content { } #p03 .section-content hr { border: 0; border-bottom: 1px solid white; padding: 0; margin: 25px 0; } #p03 .section-heading { font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-size: 42px; font-weight: bold; color: #FFFFFF; margin-bottom: 40px; letter-spacing: 0.02em; line-height: 1.1; } #p03 .content-item { margin: 0; justify-content: space-between; display: flex; flex-direction: column; } #p03 .content-item span.time { font-family: FF-BentonSans-Bold, "Benton Sans", serif; color: #FFF; margin-top: 20px; display: block; font-size: 16px;} #p03 .content-item h3 { font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-size: 18px; font-weight: bold; line-height: 1.3; margin-bottom: 15px; } #p03 .content-item a { color: #FFFFFF; text-decoration: none; transition: opacity 0.3s ease; } #p03 .content-item a:hover, #p03 .content-item span.time a:hover { opacity: 0.5; } #p03 .content-item p { font-family: FF-BentonSans-Regular, "Benton Sans", serif; font-size: 14px; line-height: 1.5; color: #FFFFFF; margin-bottom: 5px; text-indent: 0; } #p03 .item-time { font-family: FF-BentonSans-Regular, "Benton Sans", serif; font-size: 12px; color: #FFFFFF; display: block; } #p03 .growth-section .section-content { background-color: #487cbd; } #p03 .sustainability-section .section-content { background-color: #2b9543; } #p03 .prosperity-section .section-content { background-color: #EA5B1A; display: grid; grid-template-columns: repeat(4, 1fr); } #p03 .special-insert h3 a { text-decoration: underline; } #p03 .footer-disclaimer { font-family: FF-BentonSans-Regular, "Benton Sans", serif; font-size: 12px; line-height: 16px; color: #000; margin-bottom: 15px; text-indent: 0; } #p03 .footer-disclaimer.lastp { margin-bottom: 0; } #p03 .footer-disclaimer a { color: #0033a1; text-decoration: underline; font-family: FF-BentonSans-Regular, "Benton Sans", serif; } #p03 .footer-logos { border-top: 2px solid #000; display: flex; justify-content: space-between; align-items: center; margin-top: 40px; padding: 20px 50px 20px 0; } #p03 .footer-logo-sb { max-width: 280px; } #p03 .footer-logo-zs { max-width: 180px; } #p03 .content-item:hover a, #p03 .content-item a:hover h3, #p03 .content-item a:hover span.time, #p03 .content-item a:hover p { color: #000; opacity: .9; } #p03 .article-footer { max-width: 1030px; } /* ========================================================================== PAGE 07 SPECIFIC STYLES - B20 Article with Scroll Box ========================================================================== */ #p04 .introbox { margin-top: 20px; } #p07 hgroup h1 { margin: 40px 0; font-family: FF-BentonSans-Regular,"Benton Sans", Arial, serif; font-size: 70px; line-height: 72px; color: #000; text-transform: uppercase; position: relative; text-align: left; } #p07 hgroup h1 span { padding-left: 0; } #p07 hgroup h1 span.big { font-size: 220px; margin: 0; padding: 0; line-height: .8; vertical-align: top; display: inline; } #p07 .introbox { max-width: 365px; } #p07 .scroller > div { min-height: 600px; } #p07 .article-body { max-width: 1030px; margin: 0 auto; margin-top: 0px; position: relative; padding: 30px; margin-top: -300px; background: white; box-sizing: border-box; } /* ========================================================================== PAGE 08 SPECIFIC STYLES - Execution Over Ambition with Wood Header ========================================================================== */ #p08 { background: url('../images/8-1.jpg'); background-repeat: no-repeat; } #p08 .article-body { background: #FFF; padding: 40px; } #p08 header { max-width: 1030px; margin: 0 auto; padding-top: 180px; } #p08 header h1 { color: white; } #p08 header h1 span { padding-left: 0; } #p08 header h1 .line1 { font-family: FF-BentonSans-Regular,"Benton Sans", Arial, serif; font-size: 75.3px; line-height: 1; text-transform: uppercase; } #p08 header h1 .line2 { font-weight: bold; font-family: FF-BentonSans-Bold,"Benton Sans",serif; font-size: 139.8px; line-height: 1; text-transform: uppercase; } #p08 header p { color: white; } #p08 .quotebox { margin-bottom: 0; } #p08 .pagetag strong { color: #FFF; } #p08 hr { border-color: white; } #p08 { } #p08 .fullwidth .stdwidth { width: 1110px; margin: 0 auto; gap: 0; } #p08 .fullwidth .stdwidth section:first-child { background: #FFF; padding: 0 40px; } #p08 .quoteboksie { margin-top: 0; } #p08 .columns section.width40 { display: flex; align-items: flex-end; } #p08 .article-footer { background: white; max-width: 1110px; padding: 40px 40px 30px; box-sizing: border-box; } .btalign { align-items: flex-end; } #p08 .fullwidth { background: url('../images/8-combo.png'); background-repeat: repeat; background-size: auto; background-position: top right; background-size: 50%; background-repeat: no-repeat; } #p08 .fullwidth .fullwidth { background: url('../images/8-4.jpg'); background-repeat: repeat; background-size: auto; background-position: top left; background-size: 25%; background-repeat: no-repeat; } #p08 .fullwidth .btalign { display: flex; align-items: flex-end; padding: 0 40px; background: white; flex-direction: column; } #p08 .fullwidth .columns section.width40 { flex: 40% 0 0; } #p08 .fullwidth.whitebox { background: #FFF; } #p08 .fullwidth.whitebox { background: #FFF; } #p08 .fullwidth.whitebox .article-body .columns section { padding-top: 0; } #p08 .fullwidth.whitebox .article-body { padding-top: 0; padding-bottom: 0; } #p08 footer { } .stat-box { margin: 40px 0; border-bottom: 8px solid var(--aqua); padding-bottom: 10px; width: fit-content; padding-right: 50px; } .stat-box .stat-big { font-weight: bold; font-family: FF-BentonSans-Bold, BentonSans, Arial; font-size: 76px; color: var(--aqua); letter-spacing: 0.010em; line-height: 1; } .stat-box .stat-label { font-weight: bold; font-family: FF-BentonSans-Bold, BentonSans, Arial; font-size: 20.9px; line-height: 1; letter-spacing: -0.010em; } .columns section.width52 { flex: 52% 0 0; } .article-body.secondr { padding-bottom: 0; } .secondr .columns { gap: 34px; } .aqua.scrollbox .scrollhead { font-size: 24px; line-height: 30px; display: block; margin-bottom: 20px; } .aqua.scrollbox .slide { display: flex; gap: 15px; flex-direction: row; } .aqua.scrollbox .slide span p { text-transform: none; font-weight: normal; letter-spacing: normal; } .green.scrollbox .scrollhead { font-size: 24px; line-height: 30px; display: block; margin-bottom: 20px; } .green.scrollbox .slide { display: flex; gap: 15px; flex-direction: row; } .green.scrollbox .slide span p { text-transform: none; font-weight: normal; letter-spacing: normal; } #p09 .scroller > div { min-height: 260px; } #p09 .scrollbox { margin-bottom: 30px; } #p09 .quoteboksie { padding-top: 0; max-width: 75%; } #p09 .columns section { padding-top: 0; } #p09 h1 span { padding: 0; } #p09 h1 .line1 { font-size: 70px; color: #FFF; line-height: 1; display: block; } #p09 h1 .line2 { font-weight: bold; font-family: FF-BentonSans-Bold,"Benton Sans",serif; font-size: 100px; line-height: 1; color: white; } #p09 h1 .ampersand { color: var(--blue); font-size: 100px; color: var(--aqua); } #p09 header { max-width: 1030px; margin: 0 auto; padding-top: 180px; } /* ========================================================================== PAGE 09 SPECIFIC STYLES - Look Beyond Bricks & Mortar ========================================================================== */ #p09 .falls-header { position: relative; width: 100%; min-height: 500px; overflow: hidden; margin-bottom: 40px; } #p09 .falls-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } #p09 .falls-background img { width: 100%; height: 100%; object-fit: cover; } #p09 .falls-overlay { position: relative; z-index: 1; min-height: 500px; display: flex; align-items: flex-start; } #p09 .falls-content { max-width: 600px; } #p09 footer { padding-bottom: 30px; } #p09 .intro { color: var(--white); } /* ========================================================================== PAGE 11 SPECIFIC STYLES - Make It Bankable ========================================================================== */ #p11 { } #p11 .headerposition { position: absolute; top: 25%; margin: 0 auto; width: 100%; } #p11 .headerwrap { position: relative; height: 80vh; min-height: 500px; } #p11 .headerwrap header { max-width: 1030px; margin: 0 auto 30px; position: relative; } #p11 .headerwrap .columns { max-width: 1030px; margin: 0 auto; position: relative; align-items: flex-end; } #p11 .headerwrap .quotebox { margin-bottom: 0; } #p11 .headerwrap { color: white; margin-bottom: 40px; } #p11 .headerwrap p, #p11 .headerwrap h1 { color: white; text-shadow: 2px 2px 12px rgba(0,0,0,.3); } #p11 .headerwrap h1 span { padding-left: 0; } #p11 .headerwrap h1 .line1 { font-family: FF-BentonSans-Regular,"Benton Sans", Arial, serif; font-size: 99.2px; line-height: 1; color: #fff; text-transform: uppercase; display: block; } #p11 .headerwrap h1 .line2 { font-weight: bold; font-family: FF-BentonSans-Bold,"Benton Sans",serif; font-size: 143.2px; line-height: 1; color: #fff; margin-left: 20%; text-transform: uppercase; text-align: left; } #p11 p.intro { max-width: 100%; margin-bottom: 15px; margin-bottom: 15px; } #p11 .columns { gap: 30px; } #p11 .stat-box { border-bottom: 0; padding-top: 50px; } #p11 .stat-box .stat-big { font-size: 124.3px; line-height: 1; text-align: center; margin-bottom: 15px; display: block; } #p11 .stat-box .stat-label { max-width: 80%; margin: 0 auto; letter-spacing: 0.010em; text-align: center; font-size: 30.4px; line-height: 1.2; letter-spacing: 0.010em; margin-bottom: 15px; } #p11 .stat-box .stat-text { max-width: 80%; margin: 0 auto; text-align: center; font-size: 25.3px; line-height: 1.2; margin-bottom: 15px; } #p11 .stat-box .stat-cite { padding-top: 20px; text-align: center; font-size: 14px; } #p11 .stat-box span.border { max-width: 80%; margin: 0 auto; display: block; border-bottom: 8px solid var(--aqua); padding-bottom: 15px; display: block; } #p11 .columns section { padding: 0; } #p11 .quotebox.qblue { margin-top: 0; } #p11 .article-footer { padding-bottom: 30px; } .introbox.white hr { border-color: white; } .introbox.white .share-options { background: transparent; } /* ========================================================================== PAGE 13 SPECIFIC STYLES - Sustainability Conversations ========================================================================== */ #p13 { } #p13 .headerposition { position: absolute; bottom: 0; margin: 0 auto; width: 100%; padding: 0 50px; box-sizing: border-box; } #p13 .headerwrap { position: relative; } #p13 .headerwrap header { max-width: 1030px; margin: 0 auto 30px; position: relative; } #p13 .headerwrap .columns { max-width: 1030px; margin: 0 auto; position: relative; align-items: flex-end; } #p13 .headerwrap .quotebox { margin-bottom: 0; } #p13 .headerwrap { color: white; margin-bottom: 40px; } #p13 .headerwrap p, #p13 .headerwrap h1 { color: white; text-shadow: 2px 2px 12px rgba(0,0,0,.3); } #p13 .headerwrap h1 span { padding-left: 0; } #p13 .headerwrap h1 .line1 { font-family: FF-BentonSans-Regular,"Benton Sans", Arial, serif; font-size: 91px; line-height: 1; color: #fff; text-transform: uppercase; } #p13 .headerwrap h1 .line2 { font-weight: bold; font-family: FF-BentonSans-Bold,"Benton Sans",serif; font-size: 130px; line-height: 1; color: #fff; text-align: left; text-transform: none; } #p13 .headerwrap p.intro { margin-bottom: 30px; } #p13 .columns { gap: 30px; } #p13 .stat-box { border-bottom: 0; padding-top: 50px; } #p13 .stat-box .stat-big { font-family: FF-BentonSans-Bold,"Benton Sans",serif; font-size: 124.3px; line-height: 1; text-align: center; margin-bottom: 15px; display: block; } #p13 .stat-box .stat-label { max-width: 80%; margin: 0 auto; letter-spacing: 0.010em; text-align: center; font-size: 30.4px; line-height: 1.2; letter-spacing: 0.010em; margin-bottom: 15px; } #p13 .stat-box .stat-text { max-width: 80%; margin: 0 auto; text-align: center; font-size: 25.3px; line-height: 1.2; margin-bottom: 15px; } #p13 .stat-box .stat-cite { padding-top: 20px; text-align: center; font-size: 14px; } #p13 .stat-box span.border { max-width: 80%; margin: 0 auto; display: block; border-bottom: 8px solid var(--aqua); padding-bottom: 15px; display: block; } .bigstatsbox { border-bottom: 0; padding-top: 50px; } .bigstatsbox .stat-big { font-family: FF-BentonSans-Bold,"Benton Sans",serif; font-size: 130px; line-height: 1; text-align: center; margin-bottom: 15px; display: block; } .bigstatsbox .stat-label { max-width: 80%; margin: 0 auto; letter-spacing: 0.010em; text-align: center; font-size: 30.4px; line-height: 1.2; letter-spacing: 0.010em; margin-bottom: 15px; } .bigstatsbox .stat-text { max-width: 80%; margin: 0 auto; text-align: center; font-size: 25.3px; line-height: 1.2; margin-bottom: 15px; } .bigstatsbox .stat-cite { padding-top: 20px; text-align: center; font-size: 14px; } .bigstatsbox span.border { max-width: 80%; margin: 0 auto; display: block; border-bottom: 8px solid var(--aqua); padding-bottom: 15px; display: block; } .green .bigstatsbox { color: var(--green); text-align: left; } .bigstatsbox .stat-big { text-align: left; width: 100%; } .green .bigstatsbox .stat-text { color: var(--green); text-align: left; max-width: 100%; } .green .bigstatsbox span.border { border-color: var(--green); max-width: 100%; } #p13 .columns section { padding: 0; } #p13 section.width30 { flex: 3% 0 0; } #p13 section.width70 { flex: 70% 0 0 } #p13 .pagetag { color: var(--white); } /* ========================================================================== PAGE 14 SPECIFIC STYLES - A Tale of Two Countries ========================================================================== */ #p14 .port-header { position: relative; width: 100%; min-height: 550px; overflow: hidden; margin-bottom: 60px; } #p14 .port-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } #p14 .port-background img { width: 100%; height: 100%; object-fit: cover; } #p14 .port-overlay { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; padding: 80px; min-height: 550px; } /* White box */ #p14 .port-whitebox { background-color: #FFFFFF; padding: 50px; max-width: 500px; } #p14 .port-whitebox hgroup h1 span { display: block; color: #000000; font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-weight: bold; line-height: 1.1; } #p14 .port-whitebox h1 .line1 { font-size: 48px; text-transform: uppercase; margin-bottom: 5px; } #p14 .port-whitebox h1 .line2 { font-size: 48px; text-transform: uppercase; margin-bottom: 5px; } #p14 .port-whitebox h1 .line3 { font-size: 48px; text-transform: uppercase; margin-bottom: 30px; } #p14 .port-intro { font-family: FF-BentonSans-Regular, "Benton Sans", serif; font-size: 15px; line-height: 23px; color: #000000; margin-bottom: 20px; text-indent: 0; } #p14 .port-time { font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-size: 13px; color: #000000; text-indent: 0; margin-bottom: 0; } /* Port key box */ #p14 .port-keybox { background-color: #00A950; padding: 30px; max-width: 400px; align-self: flex-end; } #p14 .port-keybox .keybox-title { font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-size: 14px; font-weight: bold; color: #FFFFFF; margin-bottom: 15px; text-indent: 0; } #p14 .port-keybox p { font-family: FF-BentonSans-Regular, "Benton Sans", serif; font-size: 13px; line-height: 20px; color: #FFFFFF; margin-bottom: 10px; text-indent: 0; } #p14 .port-keybox p:last-child { margin-bottom: 0; } #p14 .port-keybox p strong { font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-weight: bold; } /* Stat boxes */ #p14 .stat-box-money { background-color: #00A950; padding: 40px; text-align: center; margin: 40px 0; } #p14 .stat-big-green { display: block; font-family: FF-BentonSans-Black, "Benton Sans", serif; font-size: 100px; font-weight: 900; color: #FFFFFF; line-height: 1; margin-bottom: 20px; } #p14 .stat-label-green { font-family: FF-BentonSans-Regular, "Benton Sans", serif; font-size: 16px; color: #FFFFFF; line-height: 1.4; text-indent: 0; margin-bottom: 0; } #p14 .stat-box-percentage { background-color: #FFFFFF; border: 3px solid #00A950; padding: 40px; text-align: center; margin: 40px 0; } #p14 .stat-box-percentage .stat-big-green { color: #00A950; } #p14 .stat-box-percentage .stat-label-green { color: #000000; } #p14 .stat-box-percentage .stat-label-green strong { font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-weight: bold; } #p14 .stat-source-small { font-family: FF-BentonSans-Regular, "Benton Sans", serif; font-size: 11px; color: #666666; text-indent: 0; margin-top: 15px; } /* Full width image */ #p14 .full-width-image { margin: 60px 0; } #p14 .full-width-image figure { margin: 0; } #p14 .full-width-image img { width: 100%; height: auto; display: block; } /* Quote box green */ #p14 .quote-box-green { background-color: #FFFFFF; border-left: 5px solid #00A950; padding: 30px; margin: 40px 0; } #p14 .quote-box-green p { font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-size: 20px; line-height: 30px; color: #000000; text-indent: 0; margin-bottom: 0; } /* Green subhead */ #p14 .green-subhead { font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-size: 18px; font-weight: bold; color: #00A950; line-height: 1.4; margin-bottom: 30px; } /* Video section */ #p14 .green-video-section { background-color: #00A950; padding: 40px; margin: 100px 0 0; display: flex; gap: 40px; align-items: center; } #p14 .video-container { flex: 1; position: relative; margin-top: -80px; } #p14 .video-container img { width: 100%; height: auto; display: block; } #p14 .play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: none; border: none; cursor: pointer; color: #FFFFFF; font-size: 80px; transition: opacity 0.3s ease; } #p14 .play-button:hover { opacity: 0.8; } #p14 .video-text { flex: 1; color: #FFFFFF; } #p14 .video-text h3 { font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-size: 24px; font-weight: bold; color: #FFFFFF; margin-bottom: 20px; text-transform: uppercase; } #p14 .video-text p { font-family: FF-BentonSans-Regular, "Benton Sans", serif; font-size: 15px; line-height: 23px; color: #FFFFFF; text-indent: 0; margin-bottom: 0; } #p14 .statsbox { background: none; max-width: 80%; margin: 0 auto; padding: 0; } #p14 .num { color: var(--green); text-align: center; } #p14 .label { color: black; text-transform: none; text-align: center; font-size: 17px; } #p14 .stat1 { border-bottom: 1px solid black; padding-bottom: 25px; margin-bottom: 25px; } #p14 .stat2 { border-bottom: 10px solid black; padding-bottom: 25px; margin-bottom: 25px; } #p14 .stat-source { font-size: 12px; text-align: center; } #p14 .columns.split64 { display: flex; } #p14 .columns.split64 { gap: 5%; } #p14 .columns.split64 .up3 { flex: 55% 0 0; } #p14 .columns.split64 .up4 { flex: 40% 0 0; } #p14 .columns.split64 { margin-bottom: 80px; } /* ========================================================================== PAGE 15 SPECIFIC STYLES - Business & Commercial Ad ========================================================================== */ #p15 main { overflow: visible; } #p15.adpage { } #p15 .tea-ad-page { position: relative; width: 100vw; } #p15 .tea-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } #p15 .tea-background img { width: 100%; height: 100%; object-fit: cover; } #p15 .tea-overlay { position: relative; z-index: 1; height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding: 60px 80px; box-sizing: border-box; } #p15 .tea-logo { max-width: 300px; align-self: flex-start; } #p15 .tea-logo img { width: 100%; height: auto; } #p15 .tea-content { text-align: center; max-width: 1200px; margin: 50px auto 0; } #p15 .tea-headline-1 { font-size: 40px; font-weight: bold; color: #FFFFFF; text-transform: uppercase; line-height: 1.2; margin-bottom: 40px; text-shadow: 0 2px 15px rgba(0, 0, 0, 0.5); } #p15 .tea-cup-image { max-width: 500px; margin: 0 auto 40px; } #p15 .tea-cup-image img { width: 100%; height: auto; filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.3)); } #p15 .tea-headline-2 { font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-size: 40px; font-weight: bold; color: #FFFFFF; text-transform: uppercase; line-height: 1.2; margin-bottom: 40px; text-shadow: 0 2px 15px rgba(0, 0, 0, 0.5); text-align: center; } #p15 .tea-body { font-family: FF-BentonSans-Regular, "Benton Sans", serif; font-size: 18px; line-height: 28px; color: #FFFFFF; max-width: 1000px; margin: 0 auto 40px; text-indent: 0; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4); text-align: center; } #p15 .tea-cta-button { display: inline-flex; align-items: center; gap: 12px; background-color: #0080c5; color: #FFFFFF; font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-size: 18px; font-weight: bold; padding: 10px 30px; text-decoration: none; transition: background-color 0.3s ease; margin-bottom: 50px; } #p15 .tea-cta-button:hover { background-color: #007BA3; } #p15 .tea-cta-button i { font-size: 20px; } #p15 .tea-disclaimer { align-self: center; max-width: 1200px; } #p15 .tea-disclaimer p { font-family: FF-BentonSans-Regular, "Benton Sans", serif; font-size: 11px; line-height: 16px; color: #FFFFFF; text-align: center; text-indent: 0; margin-bottom: 20px; opacity: 0.9; } /* ========================================================================== PAGE 16 SPECIFIC STYLES - Food Security ========================================================================== */ #p16 .cornfield-header { position: relative; width: 100%; min-height: 500px; overflow: hidden; margin-bottom: 60px; } #p16 .cornfield-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } #p16 .cornfield-background img { width: 100%; height: 100%; object-fit: cover; } #p16 .cornfield-overlay { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; padding: 80px; min-height: 500px; } #p16 .cornfield-content { max-width: 50%; padding-right: 40px; } #p16 .cornfield-content hgroup h1 span { display: block; color: #FFFFFF; font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-weight: bold; line-height: 1.1; text-shadow: 0 2px 15px rgba(0, 0, 0, 0.5); } #p16 .cornfield-content h1 .line1, #p16 .cornfield-content h1 .line3, #p16 .cornfield-content h1 .line4 { font-size: 40px; text-transform: uppercase; margin-bottom: 5px; } #p16 .cornfield-content h1 .line2 { font-size: 72px; font-weight: normal; font-family: FF-BentonSans-Regular, "Benton Sans", serif; text-transform: lowercase; margin-bottom: 5px; } /* Cornfield key box */ #p16 .cornfield-keybox { background-color: #00A950; padding: 30px; max-width: 400px; align-self: flex-end; position: relative; } #p16 .cornfield-keybox::after { content: ''; position: absolute; bottom: -40px; right: 30px; width: 0; height: 0; border-left: 40px solid transparent; border-right: 0 solid transparent; border-top: 40px solid #00A950; } #p16 .cornfield-keybox .keybox-title { font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-size: 14px; font-weight: bold; color: #FFFFFF; margin-bottom: 15px; text-indent: 0; } #p16 .cornfield-keybox p { font-family: FF-BentonSans-Regular, "Benton Sans", serif; font-size: 13px; line-height: 20px; color: #FFFFFF; margin-bottom: 10px; text-indent: 0; } #p16 .cornfield-keybox p:last-child { margin-bottom: 0; } #p16 .cornfield-keybox p strong { font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-weight: bold; } /* Intro text */ #p16 .intro-text { font-family: FF-BentonSans-Regular, "Benton Sans", serif; font-size: 18px; line-height: 27px; color: #000000; margin-bottom: 30px; text-indent: 0; } /* Suggestions box */ #p16 .suggestions-box { background-color: #FFFFFF; border: 3px solid #00A950; padding: 40px; margin: 40px 0; } #p16 .suggestions-box h3 { font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-size: 28px; font-weight: bold; color: #00A950; margin-bottom: 20px; text-transform: uppercase; line-height: 1.2; } #p16 .suggestions-intro { font-family: FF-BentonSans-Regular, "Benton Sans", serif; font-size: 15px; line-height: 23px; color: #000000; margin-bottom: 30px; text-indent: 0; } /* Scrollbox green */ #p16 .scrollbox-green { background-color: transparent; padding: 0; margin: 0; } #p16 .scrollbox-green .scroller > div { display: flex; gap: 30px; align-items: flex-start; padding: 0; background-color: transparent; border: none; min-height: auto; } #p16 .scrollbox-green .slide-content { flex: 1; display: flex; gap: 20px; align-items: flex-start; } #p16 .num-green { font-family: FF-BentonSans-Black, "Benton Sans", serif; font-size: 80px; font-weight: 900; color: #00A950; line-height: 1; flex-shrink: 0; } #p16 .slide-text h4 { font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-size: 16px; font-weight: bold; color: #00A950; margin-bottom: 12px; text-transform: uppercase; } #p16 .slide-text p { font-family: FF-BentonSans-Regular, "Benton Sans", serif; font-size: 14px; line-height: 22px; color: #000000; text-indent: 0; margin-bottom: 0; } #p16 .slide-image { flex: 0 0 300px; } #p16 .slide-image img { width: 100%; height: auto; } /* Scrollnav green */ #p16 .scrollnav-green { display: flex; align-items: center; justify-content: center; gap: 20px; padding-top: 30px; margin-top: 30px; border-top: 2px solid #00A950; } #p16 .scrollnav-green span { font-family: FF-BentonSans-Regular, "Benton Sans", serif; font-size: 13px; color: #00A950; text-transform: uppercase; letter-spacing: 0.05em; } #p16 .scrollnav-green a { width: 40px; height: 40px; background-color: #00A950; color: #FFFFFF; display: flex; align-items: center; justify-content: center; border-radius: 50%; text-decoration: none; transition: background-color 0.3s ease; } #p16 .scrollnav-green a:hover { background-color: #008040; } #p16 .scrollnav-green a i { font-size: 20px; color: #FFFFFF; } #p16 .headerposition { position: absolute; bottom: 40px; left: 0; right: 0; max-width: 1030px; margin: 0 auto; } #p16 .headerposition span { color: white; display: block; padding-left: 0; } #p16 .headerposition span.line1 { font-size: 70px; line-height: 1.1; } #p16 .headerposition span.line2 { font-size: 130px; line-height: 1.1; text-transform: none; font-family: FF-BentonSans-Bold, "Benton Sans", serif; } #p16 #first section { padding-top: 0; } #p16 #first section .quotebox { margin-top: 0; } #p16 .introbox { padding-top: 40px; } #p16 #scrollhere section { padding-top: 0; } #p16 #first, #p16 #first section { padding-bottom: 0; } /* ========================================================================== PAGE 18 SPECIFIC STYLES - G20 Food Systems ========================================================================== */ #p18 .g20-header { position: relative; width: 100%; min-height: 450px; overflow: hidden; margin-bottom: 0; } #p18 .g20-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; } #p18 .g20-background img { width: 100%; height: 100%; object-fit: cover; } #p18 .g20-overlay { position: relative; z-index: 1; display: flex; align-items: center; padding: 80px; min-height: 450px; } #p18 .g20-content hgroup h1 span { display: block; font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-weight: bold; line-height: 1; padding-left: 0; } #p18 .g20-content h1 .line1 { font-size: 88px; color: #FFFFFF; text-transform: uppercase; margin-bottom: 5px; } #p18 .g20-content h1 .line2 { font-size: 160px; color: #FFFF; text-transform: uppercase; margin-bottom: 5px; } /* Intro section */ #p18 .intro-section { display: flex; gap: 40px; background-color: #FFFFFF; padding: 50px 80px; margin-bottom: 60px; } #p18 .intro-text-box { flex: 1; } #p18 .intro-text-box p { font-family: FF-BentonSans-Regular, "Benton Sans", serif; font-size: 16px; line-height: 24px; color: #000000; text-indent: 0; margin-bottom: 0; } #p18 .intro-keybox-green { background-color: #00A950; padding: 30px; flex: 0 0 400px; } #p18 .intro-keybox-green .keybox-title { font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-size: 14px; font-weight: bold; color: #FFFFFF; margin-bottom: 15px; text-indent: 0; } #p18 .intro-keybox-green p { font-family: FF-BentonSans-Regular, "Benton Sans", serif; font-size: 13px; line-height: 20px; color: #FFFFFF; margin-bottom: 10px; text-indent: 0; } #p18 .intro-keybox-green p:last-child { margin-bottom: 0; } #p18 .intro-keybox-green p strong { font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-weight: bold; } #p18 .fullwidth img { border-bottom: 12px solid var(--green); } /* Side image large */ #p18 .side-image-large { margin: 40px 0; } #p18 .side-image-large img { width: 100%; height: auto; } /* Stat callout 25% */ #p18 .stat-callout-25 { display: flex; gap: 40px; align-items: center; background-color: #FFFFFF; margin: 60px 0; } #p18 .stat-25-number { font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-size: 170px; font-weight: 900; color: #00A950; line-height: 1; flex-shrink: 0; } #p18 .stat-25-number span { font-size: 120px; } #p18 .stat-25-text { flex: 1; } #p18 .stat-25-text p {font-size: 28px; line-height: 36px; color: #000; letter-spacing: 0.010em; text-align: left; text-indent: 0; } #p18 .stat-25-text p strong { font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-weight: bold; color: #00A950; } #p18 #first section { padding-top: 0; } #p18 #first .quotebox { margin-top: 0; } #p18 .introbox { padding-top: 40px; } /* ========================================================================== PAGE 35 SPECIFIC STYLES - Carbon Credits Article ========================================================================== */ #p35 { background: url('../images/35-2.jpg'); background-position: center right; background-position: center right; background-size: 600px; background-repeat: no-repeat; background-position: right -200%; } #p35 .article-body { padding: 0 40px 0; background: #FFF; } #p35 .heading { margin-top: 150px; margin-bottom: 50px; } #p35 hgroup h1 { text-align: center; line-height: 1.2; font-size: 64px; } #p35 hgroup h1 span.big { color: var(--orange); padding-left: 0; text-align: center; } #p35 .imgblock { position: relative; } #p35 .imgblock .text { background: #FFF; position: absolute; padding: 30px 30px 0; left: 0; bottom: 0; width: 50%; } #p35 .quotebox { margin-bottom: 0; } #p35 .social-share-container { margin-bottom: 30px; } #p35 .widewidth { position: relative; } /* ========================================================================== PAGE 36 SPECIFIC STYLES - Q&A with Stephen Barnes ========================================================================== */ #p36 { position: relative; } #p36 h1 span.line1 { border-top: 10px solid black; padding-top: 20px; padding-left: 0; font-family: FF-BentonSans-Regular,"Benton Sans", Arial, serif; font-size: 45px; line-height: 1em; color: #0033a1; letter-spacing: 0.010em; text-transform: uppercase; margin-bottom: 16px; text-align: left; } #p36 h1 span.line2 { padding-left: 0; font-weight: bold; font-family: FF-BentonSans-Bold,"Benton Sans",serif; font-size: 65px; line-height: 1em; color: #0033a1; text-transform: uppercase; margin-bottom: 18px; text-align: left; } #p36 #part1 { } #p36 #part1.columns { gap: 10px; margin-bottom: 20px; } #p36 .columns section { padding-top: 0; } #p36 .columns section:first-child { flex: 40% 0 0; } #p36 #part1.columns section { padding: 0; box-sizing: border-box; justify-content: flex-end; display: flex; flex-direction: column; } #p36 .social-share-container { margin-bottom: 0; } #p36 .introbox { margin-left: 16%; padding-top: 10px; } /* ========================================================================== PAGE 37 SPECIFIC STYLES - Standard Bank CIB Advertisement ========================================================================== */ #p37 { } #p37 .fullpage-ad { /* position: relative; */ } #p37 .ad-logo { max-width: 360px; /* position: absolute; top: 60px; left: 220px; */ z-index: 9; } /* #p37 .ad-content { position: absolute; bottom: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 60px 220px; box-sizing: border-box; } */ #p37 .ad-text { max-width: 1000px; color: #FFFFFF; margin: 0 auto; } #p37 .ad-text h1 { font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-size: 68px; line-height: 1.1; color: #FFFFFF; margin-bottom: 30px; font-weight: bold; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); } #p37 .ad-text p.ad-body { font-size: 14px; line-height: 1.4; color: #FFFFFF; margin-bottom: 30px; text-indent: 0; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); letter-spacing: 0.020em; } #p37 .ad-text p.ad-link { color: #FFF; font-size: 14px; line-height: 1.2; margin-bottom: 20px; text-indent: 0; } #p37 .ad-text p.ad-link a { font-family: FF-BentonSans-Regular, "Benton Sans", serif; color: #FFFFFF; text-decoration: none; padding-bottom: 2px; transition: opacity 0.3s ease; } #p37 .ad-text p.ad-link a:hover { opacity: 0.8; } #p37 .ad-text p.ad-disclaimer { font-family: FF-BentonSans-Regular, "Benton Sans", serif; font-size: 11px; line-height: 16px; color: #FFFFFF; opacity: 0.9; text-indent: 0; margin-bottom: 0; } #p37 { background: url('../images/37-1.png'); background-size: cover; background-position: bottom center; background-repeat: no-repeat; background-attachment: fixed; overflow: visible; } #p37 main { overflow: scroll; } #p37 { overflow: scroll; } #p37 .ad-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background-position: center bottom; background-size: cover; display: none!important; } #p37 .ad-content { position: relative; z-index: 1; bottom: auto; display: flex; flex-direction: column; justify-content: space-between; padding: 200px 0 50px; padding-bottom: 60px; box-sizing: border-box; } #p37 .ad-logo { max-width: 260px; position: relative; } #p37 .ad-overlay { width: 1030px; margin: 50px auto 0; max-width: 100%; padding: 0 50px; box-sizing: border-box; } /* ========================================================================== PAGE 38 SPECIFIC STYLES - Back Cover ========================================================================== */ #p38.backcover { background-color: #0033a1; overflow: hidden; } #p38 .backcover-page { position: relative; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #0033a1; } #p38 .backcover-content { position: relative; max-width: 1100px; padding: 100px 140px; text-align: center; } #p38 .corner-bracket { position: absolute; width: 70px; height: 70px; border: 12px solid #FFFFFF; } #p38 .corner-top-left { top: 70px; left: 70px; border-right: none; border-bottom: none; } #p38 .corner-bottom-right { bottom: 70px; right: 70px; border-left: none; border-top: none; } #p38 .backcover-text { position: relative; z-index: 1; } #p38 .backcover-text h1 { margin-bottom: 40px; } #p38 .backcover-text h1 span { display: block; color: #FFFFFF; font-family: FF-BentonSans-Regular, "Benton Sans", serif; text-align: center; } #p38 .backcover-text h1 .line1, #p38 .backcover-text h1 .line2 { font-size: 56px; line-height: 1.2; font-weight: normal; } #p38 .backcover-text h1 .line3 { font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-size: 80px; line-height: 1.2; font-weight: bold; margin-top: 10px; } #p38 .backcover-text p.backcover-body { font-family: FF-BentonSans-Regular, "Benton Sans", serif; font-size: 32px; line-height: 1.2; color: #FFFFFF; margin-bottom: 40px; text-indent: 0; text-align: center; } #p38 .backcover-text p span{ color: #FFFFFF; text-decoration: none; transition: opacity 0.3s ease; } #p38 .backcover-text p.backcover-link a:hover { opacity: 0.8; } #p03 .back-to-top { top: auto; bottom: 60px } #p03 .article-footer { border-top: 0;margin-top: 0; padding-top: 0; } .desktop { display: block!important; } .mobi { display: none!important; } #p13 .desktop { display: flex!important; } #p13 .mobi { display: none!important; } #p19 .article-footer, #p32 .article-footer, #p14 .article-footer, #p16 .article-footer, #p35 .article-footer { margin-bottom: 30px; } #p04 .wideheader { padding-top: 100px; } #p10 .article-body { max-width: 1030px; padding-top: 100px; } #p17 .article-body { max-width: 1030px; padding-top: 100px; } #p10 .fullcolumns { gap: 4%; width: 100%; display: flex; flex: none; } #p10 .fullwidth .width60 { flex: 54% 0 0; } #p10 .fullwidth .width40 { flex: 42% 0 0; } #p10 #row2.desktop { display: flex!important; } #p10 .fullcolumns .width60 { width: 56%; } #p10 .article-footer { padding-bottom: 30px; } #block-2 { } #block-2 .stat-card { } #block-2 .stat-card { } #block-2 .card-title { font-weight: bold; font-family: FF-BentonSans-Bold, BentonSans, Arial; font-size: 25px; line-height: 30px; color: #005fab; letter-spacing: 0.010em; text-align: center; margin-bottom: 10px; } #block-2 .stat-row { display: flex; border-bottom: 1px solid #333; position: relative; padding: 10px 30px; } #block-2 .stat-row.blue { color: #307dba; border: none; } #block-2 .year-label { color: #307dba; font-size: 17px; transform: rotate(-90deg); position: absolute; left: -11px; top: 34px; } #block-2 .stat-row.blue .year-label { top: 30px; line-height: 1px; left: -16px; } #block-2 .stat-value { font-family: FF-BentonSans-Regular,"Benton Sans", Arial, serif; font-size: 53px; line-height: 1em; color: #000; letter-spacing: 0.040em; text-align: left; } #block-2 .source { font-size: 14px; line-height: 20px; color: #000; text-align: center; border: none; } #p17 #block-4.firstblock { display: flex; margin: 0; position: absolute; bottom: 50px; right: 0; } #p17 #block-4 h1 { padding-right: 0 } #p17 #block-5 { border-top: 20px solid black; margin-top: 80px; } #p17 #block-7 { margin-top: 80px; } #p17 #row3 { margin-top: 70px; } #p17 #block-2 { text-align: left; margin-top: -73px; } #p17 #block-2 .stat-number { text-align: left; font-weight: bold; font-family: FF-BentonSans-Bold,"Benton Sans",serif; font-size: 177px; line-height: 1; color: #00af43; text-align: left; } #p17 #block-2 .stat-number-smaller { text-align: left; font-weight: bold; font-family: FF-BentonSans-Bold,"Benton Sans",serif; font-size: 108px; line-height: 1; color: #00af43; text-align: left; } #p17 #block-2 .stat-description { text-align: left; font-family: FF-BentonSans-Regular,"Benton Sans",serif; font-size: 19px; line-height: 28px; color: #000; letter-spacing: 0.010em; text-align: left; } #p17 #block-2 .stat-text { text-align: left; font-weight: bold; font-family: FF-BentonSans-Bold,"Benton Sans",serif; font-size: 23px; line-height: 28px; color: #000; letter-spacing: 0.010em; text-transform: uppercase; text-align: left; } #p17 #block-2 .source { text-align: left; font-family: FF-BentonSans-Regular,"Benton Sans",serif; font-size: 14px; line-height: 19px; color: #000; text-align: left; } #p17 #block-2 .accent-bar { border-top: 10px solid black; } #p17 #block-7 { text-align: center; } #p17 #block-7 .stat-number { text-align: center; font-weight: bold; font-family: FF-BentonSans-Bold,"Benton Sans",serif; font-size: 125px; line-height: 1; color: #00af43; } #p17 #block-7 .stat-number-smaller { text-align: center; font-weight: bold; font-family: FF-BentonSans-Bold,"Benton Sans",serif; font-size: 108px; line-height: 1; color: #00af43; } #p17 #block-7 .stat-description { text-align: center; font-family: FF-BentonSans-Regular,"Benton Sans",serif; font-size: 19px; line-height: 28px; color: var(--green); letter-spacing: 0.010em; } #p17 #block-7 .stat-text { text-align: center; font-weight: bold; font-family: FF-BentonSans-Bold,"Benton Sans",serif; font-size: 23px; line-height: 28px; color: #000; letter-spacing: 0.010em; text-transform: uppercase; } #p17 #block-7 .source { text-align: center; font-family: FF-BentonSans-Regular,"Benton Sans",serif; font-size: 14px; line-height: 19px; padding: 10px 0; color: #000; } #p17 #block-7 .accent-bar { border-top: 16px solid black; } #p17 .borderbx span { text-align: right; padding: 0; margin: 0; } #p17 .borderbx figure { padding: 0; border: none; } #p17 #block-5 { text-align: center; } #p17 #block-5 .stat-number { text-align: center; font-size: 125px; line-height: 1; color: #000; } #p17 #block-5 .stat-number-smaller { text-align: center; font-weight: bold; font-family: FF-BentonSans-Bold,"Benton Sans",serif; font-size: 108px; line-height: 1; color: #000; } #p17 #block-5 .stat-description { text-align: center; font-family: FF-BentonSans-Regular,"Benton Sans",serif; font-size: 19px; line-height: 28px; color: #000; letter-spacing: 0.010em; } #p17 #block-5 .stat-text { text-align: center; font-weight: bold; font-family: FF-BentonSans-Bold,"Benton Sans",serif; font-size: 23px; line-height: 28px; color: #000; letter-spacing: 0.010em; text-transform: uppercase; } #p17 #block-5 .source { text-align: center; font-family: FF-BentonSans-Regular,"Benton Sans",serif; font-size: 14px; line-height: 19px; padding: 10px 0; color: #000; } #p17 #block-5 .accent-bar { border-top: 20px solid black; } #p17 .borderbx figure { padding: 0; border: none; } #p17 section.heading span { font-weight: bold; font-family: FF-BentonSans-Bold,"Benton Sans",serif; font-size: 35px; line-height: 1.1; padding-bottom: 12px; padding-left: 53px; color: #000; display: block; letter-spacing: 0.010em; text-transform: uppercase; text-align: left; } #p17 section.heading span.source { text-transform: none; font-family: FF-BentonSans-Regular,"Benton Sans", Arial, serif; font-size: 14px; text-align: left ; font-weight: normal; } #row3 { gap: 0; } #p17 #row { display: flex; } #p17 .width25 { flex: 22% 0 0; } #p17 .width50 { flex: 50% 0 0; } .tablet { display: none!important; } #p34 figure.tablet { display: block!important; } #p34 .article-footer { padding-bottom: 30px; } #p36 .article-footer { padding-bottom: 30px; } #p32 #block-5 { padding-top: 50px; } /* ========================================================================== RESPONSIVE - TABLET (max-width: 810px) ========================================================================== */ @media screen and (min-width: 1180px) and (max-width: 1200px) { /* Your CSS here */ hgroup h1 span.big { line-height: 1.1; } hgroup h1 span.big { font-size: 70px; line-height: 1.2; } #block-4 h1 span { font-size: 60px } } @media (max-width: 1270px) { #p30 .article-body { margin: 0 60px 0; } #p21 .widewidth span.line2 { font-size: 130px; } } @media (max-width: 1185px) { hgroup h1 span.big { font-size: 70px; line-height: 1.2; } #block-4 h1 span { font-size: 60px; line-height: 64px; } #block-4 h1 span { bottom: 50px; } #p17 #block-4.firstblock { width: 60%; } #block-4 h1 br { display: none; } #p21 .widewidth .half { margin-left: 30%; width: 70%; } } @media (max-width: 1080px) { .article-body { max-width: 90%; padding: 0 50px; } h2 { font-size: 15px; line-height: 22px; } p { font-size: 15px; line-height: 22px; } blockquote p { font-size: 22px; line-height: 32px; } blockquote footer cite { font-size: 15px; line-height: 22px; } hgroup h1 { font-size: 44px; } hgroup h1 span.big { font-size: 75px; } hgroup h1 span { padding-left: 15px; display: block; padding-left: 0; } .pagetag { font-size: 16px; right: 50px; top: 50px; } #p31 header { flex-direction: column; } #p31 header figure { width: 100%; } #p31 header section { width: 100%; box-sizing: border-box; } #p31 header section hgroup h1 { position: static; left: auto; bottom: auto; padding: 20px; } #p31 header section .bottombits { max-width: auto; width: 100%; padding: 20px; box-sizing: border-box; } header section { padding: 30px 20px; } .bottombits { padding: 20px 0; } .time { font-size: 13px; } .columns { gap: 60px; padding-bottom: 40px; } .columns section { padding: 30px 0; } #p31 .columns.fullmobile, .columns.fullmobile { display: block; } #p31 .columns.fullmobile section, .columns.fullmobile section { position: relative; width: 100%; } #p31 .upcontent { position: relative; } aside.pullquote { gap: 30px; flex-direction: column; } aside.pullquote figure { width: 100%; } aside.pullquote blockquote { width: 100%; padding-bottom: 30px; } .article-footer { margin: 40px 50px; } .back-to-top { font-size: 11px; } .back-to-top i { font-size: 22px; } .rating-section { gap: 12px; padding: 0; } .rating-text { font-size: 13px; } .star-button i { font-size: 28px; } .nav-button { width: 40px; height: 40px; } .nav-button svg { width: 18px; height: 18px; } .popup-menu { width: 300px; } .menu-item-thumbnail { width: 80px; height: 61px; } .menu-item-title { font-size: 13.5px; } .menu-item-meta { font-size: 10.5px; } .social-share-container { margin-bottom: 10px; } .social-btn { width: 45px; height: 45px; } .social-btn i { font-size: 22px; } .share-wrapper { margin-bottom: 10px; } .share-option-btn { width: 38px; height: 38px; } .share-option-btn i { font-size: 17px; } button.page-nav-btn { width: 40px; height: 40px; } .page-nav-btn i { font-size: 22px; } .checkmark-btn { display: none; } #p32 { } .fullcolumns { padding: 0 50px; box-sizing: border-box; margin-bottom: 0; align-items: center; } #block-3 { left: 0; background: transparent; } #block-3 .stat-label { background: white; max-width: 80%; font-size: 30px; line-height: 1.2; } #block-5 .stat-label br, #block-6 .stat-label br, #block-2 .stat-label br, #block-1 .stat-label br, #block-3 .stat-label br, #block-4 h1 br { display: none; } #block-3 .stat-number { background: white; position: relative; left: auto; width: fit-content; font-size: 100px; } #block-4 h1 { max-width: 85%; } #block-4 h1 span { font-size: 50px; line-height: 1.2; } #block-6 .stat-number { font-size: 80px; } #block-2 .stat-number { font-size: 120px; } .width60 .img50 { max-width: 80%; } #block-1 .stat-label, #block-5 .stat-label { font-size: 20px; line-height: 1.2; } .social-btn { width: 40px; height: 40px; } .social-btn i { font-size: 18px; } .share-options.active { transform: translateX(0); } .share-option-btn { width: 36px; height: 36px; } .share-option-btn i { font-size: 16px; } #p30 h1 .line1 { font-size: 60px; } #p30 h1 .line2 { font-size: 100px; } #p29 header .line2 { font-size: 95px; } #p32 #block-3 { left: 0; top: 0; } #block-3 .stat-label { box-sizing: border-box; } /* header.split ~ * .article-body, header.split ~ .article-body { padding: 0; } */ header.split { gap: 60px; } .guguhead .wideleft img { top: 10%; } #p08 header .btalign, #p08 .fullwidth .stdwidth { padding-bottom: 0; } #p08 header .btalign section { padding-bottom: 0; } #p08 header { padding: 180px 50px 0; } #p08 .secondr .columns { padding-bottom: 0; } #p08 .fullwidth.whitebox .article-body .columns section { padding-bottom: 0; } #p10 .article-body { padding: 0 50px ; } #p10 .article-footer { padding-bottom: 40px; } #p17 #block-4.firstblock { max-width: 60%; } } @media screen and (max-width: 1400px) { #p37 .ad-text h1 { font-size: 56px; } #p37 .ad-logo { max-width: 360px; } #p15 .tea-overlay { padding: 50px 60px; } #p15 .tea-headline-1, #p15 .tea-headline-2 { font-size: 30px; } #p15 .tea-cup-image { max-width: 400px; } #p15 .tea-body { font-size: 16px; line-height: 26px; } } @media screen and (max-width: 1200px) { #p16 .cornfield-overlay { padding: 60px; } #p16 .cornfield-content h1 .line1, #p16 .cornfield-content h1 .line3, #p16 .cornfield-content h1 .line4 { font-size: 34px; } #p16 .cornfield-content h1 .line2 { font-size: 60px; } #p16 .cornfield-keybox { max-width: 350px; } #p16 .suggestions-box { padding: 30px; } #p16 .num-green { font-size: 64px; } #p18 .g20-overlay { padding: 60px; } #p18 .g20-content h1 .line1, #p18 .g20-content h1 .line3, #p18 .g20-content h1 .line4, #p18 .g20-content h1 .line5 { font-size: 38px; } #p18 .g20-content h1 .line2 { font-size: 120px; } #p18 .intro-section { padding: 40px 60px; } #p18 .intro-keybox-green { flex: 0 0 350px; } #p18 .stat-25-number { font-size: 120px; } #p35 .keybox { left: 20px; bottom: 20px; padding: 25px 30px; max-width: 380px; } #p35 .keybox p { font-size: 14px; line-height: 20px; } #p36 .columns.nobottom section.bottom::before { font-size: 300px; left: -60px; top: -90px; } #p37 .ad-content { padding: 250px 0 50px 0; } #p37 .ad-text h1 { font-size: 48px; } #p38 .backcover-content { padding: 60px; } #p38 .corner-bracket { width: 100px; height: 100px; border-width: 6px; } #p38 .corner-top-left { top: 60px; left: 60px; } #p38 .corner-bottom-right { bottom: 60px; right: 60px; } #p38 .backcover-text h1 .line1, #p38 .backcover-text h1 .line2 { font-size: 48px; } #p38 .backcover-text h1 .line3 { font-size: 68px; } #p38 .backcover-text p.backcover-body { font-size: 18px; line-height: 30px; } #p38 .backcover-text p.backcover-link { font-size: 22px; } #p03 .contents-page { padding: 60px 40px 40px; } #p03 .contents-title { font-size: 56px; } #p03 .section-heading { font-size: 40px; } #p03 .section-content { padding: 40px 50px; } #p07 .scroller .num { font-size: 60px; } #p07 .scroller .title { font-size: 18px; } #p07 .stat-number { font-size: 80px; } #p08 .wood-overlay { padding: 60px; } #p08 .wood-content h1 .line2 { font-size: 56px; } #p08 .wood-keybox { max-width: 350px; } #p09 .falls-overlay { padding: 60px; } #p14 .port-overlay { padding: 60px; } #p14 .port-whitebox { padding: 40px; max-width: 450px; } #p14 .port-whitebox h1 .line1, #p14 .port-whitebox h1 .line2, #p14 .port-whitebox h1 .line3 { font-size: 40px; } #p14 .port-keybox { max-width: 350px; } #p11 .headerwrap header { padding: 0 50px 0; } #p11 .headerwrap .columns { padding: 0 50px 0; } #p11 .headerwrap h1 .line1 { font-size: 80px; } #p11 .headerwrap h1 .line2 { font-size: 90px; } #p13 .headerwrap h1 .line1 { font-size: 60px; } #p13 .headerwrap h1 .line2 { font-size: 90px; } } @media screen and (max-width: 1024px) { #block-2 .stat-value { font-size: 30px; line-height: 1; } #block-2 .stat-row { padding: 25px 30px; } #p10 .fullcolumns { margin-bottom: 0; } #block-2 .year-label { font-size: 13px; } #block-2 .fullcolumns { margin-bottom: 0; } #p15 .tea-overlay { padding: 40px 50px; } #p15 .tea-logo { max-width: 280px; } #p15 .tea-headline-1, #p15 .tea-headline-2 { font-size: 34px; } #p15 .tea-cup-image { max-width: 350px; margin-bottom: 30px; } #p15 .tea-body { font-size: 15px; line-height: 24px; } #p15 .tea-cta-button { font-size: 16px; padding: 12px 30px; } #p29 .article-footer { margin-top: 120px; } #p29 #scrollhere section:first-child { padding-top: 0; } #p07 hgroup h1 span.big { right: 0; } #p13 section.width70 { flex: 1; } #p13 section.width70 { flex: 1; } #p16 #first, #p16 #first section, #p16 #scrollhere section, #p16 #scrollhere .columns, #p16 #scrollhere { padding-bottom: 0; } .video-modal-content { width: 95%; top: 40%; } .video-close { top: -35px; right: 5px; font-size: 30px; } #p16 .headerposition { padding: 50px; } #p16 .headerposition span.line1 { font-size: 60px; } #p16 .headerposition span.line2 { font-size: 110px; } #p18 #first .columns { padding-bottom: 0; } #p18 #first section { padding: 0; } #p18 #first .columns.padbottom { padding-bottom: 40px; } #p32 .width60 .img50 { max-width: 50%; } #p35 { background: none; } #p35 .widewidth { padding: 0; } #p35 hgroup h1 span.big { text-align: center; } #p35 #scrollhere .columns { padding-bottom: 0; } #p07 .columns section.width40 { flex: 1; } #p07 .columns section.width60 { flex: 1; } #p07 .article-body { padding: 0 50px; } #p07 .article-body { margin-top: 0; } #p08 .fullwidth .stdwidth section:first-child { padding: 0 50px; } #block-5 .stat-number { font-size: 70px; line-height: 1.1; } #block-5 .stat-description { font-size: 22px; line-height: 26px; } #block-2 .card-title { font-size: 17px; line-height: 24px; } .green .bigstatsbox { max-width: 385px; } #p13 .quoteboksie { max-width: 385px; } #row2 section.mobi { display: flex!important; } #p10 #row2.fullcolumns .width40 { margin-top: 0; } #p10 #row2.fullcolumns .width60 { margin-bottom: 80px; } #row1 { display: block; } #p17 #block-4.firstblock { position: relative; display: block; max-width: 60%; } #p17 #row1 section.width40 { position: absolute; bottom: 0; right: 0; } #p17 #block-2 { padding: 0; margin-top: 0; } #p17 #block-7 .stat-number, #p17 #block-5 .stat-number { font-size: 90px; } #p21 .widewidth .half { width: 80%; margin-left: 10%; } #p21 .overflowbox { display: none; } #p21 section { flex: 1; } #p21 .colimgoverflow section.img { display: none; } #p32 #block-5 { padding-top: 50px; } } @media screen and (max-width: 900px) { #p16 .cornfield-header { min-height: auto; } #p16 .cornfield-overlay { flex-direction: column; padding: 40px; } #p16 .cornfield-content { max-width: 100%; padding-right: 0; margin-bottom: 30px; } #p16 .cornfield-content h1 .line1, #p16 .cornfield-content h1 .line3, #p16 .cornfield-content h1 .line4 { font-size: 28px; } #p16 .cornfield-content h1 .line2 { font-size: 48px; } #p16 .cornfield-keybox { max-width: 100%; align-self: flex-start; } #p16 .cornfield-keybox::after { right: auto; left: 30px; } #p16 .scrollbox-green .scroller > div { flex-direction: column; } #p16 .slide-image { flex: 1; max-width: 100%; } #p18 .g20-header { min-height: auto; } #p18 .g20-overlay { padding: 40px; } #p18 .g20-content h1 .line1, #p18 .g20-content h1 .line3, #p18 .g20-content h1 .line4, #p18 .g20-content h1 .line5 { font-size: 32px; } #p18 .g20-content h1 .line2 { font-size: 100px; } #p18 .intro-section { flex-direction: column; padding: 40px; } #p18 .intro-keybox-green { flex: 1; } #p18 .stat-callout-25 { flex-direction: column; padding: 40px; text-align: center; } #p18 .stat-25-number { font-size: 100px; } #p18 .stat-callout-25 { margin: 0; padding-bottom: 0; } #p36 .columns.nobottom section.bottom::before { font-size: 200px; left: -30px; top: -60px; } #p35 header.split { flex-direction: column; } #p35 header.split .text, #p35 header.split .pic { width: 100%; } #p35 .keybox { position: relative; left: 0; bottom: 0; max-width: 100%; margin-top: -50px; margin-left: 20px; margin-right: 20px; } #p37 .ad-text h1 { font-size: 36px; margin-bottom: 20px; } #p37 .ad-text p.ad-body { margin-bottom: 10px; } #p37 .ad-text p.ad-link { font-size: 16px; margin-bottom: 10px; } #p37 .ad-logo { max-width: 280px; } #p37 .ad-text p.ad-disclaimer { font-size: 10px; line-height: 14px; } #p38 .backcover-content { padding: 50px 40px; } #p38 .corner-bracket { width: 80px; height: 80px; border-width: 5px; } #p38 .corner-top-left { top: 50px; left: 40px; } #p38 .corner-bottom-right { bottom: 50px; right: 40px; } #p38 .backcover-text h1 .line1, #p38 .backcover-text h1 .line2 { font-size: 40px; } #p38 .backcover-text h1 .line3 { font-size: 56px; } #p38 .backcover-text p.backcover-body { font-size: 17px; line-height: 28px; } #p38 .backcover-text p.backcover-link { font-size: 20px; } #p07 .scrollbox { padding: 30px 20px; } #p07 .scroller > div { padding: 20px; min-height: 250px; } #p07 .scroller .num { font-size: 48px; } #p07 .scroller .title { font-size: 16px; } #p07 .scroller p { font-size: 14px; line-height: 22px; } #p07 .stat-callout { padding: 30px 20px; } #p07 .stat-number { font-size: 64px; } #p07 .stat-text { font-size: 16px; } #p03 .contents-page { padding: 40px 30px 30px; } #p03 .contents-title { font-size: 48px; margin-bottom: 40px; } #p03 .regulars-list { gap: 30px; } #p03 .contents-section { flex-direction: column; } #p03 .section-image { width: 100%; height: 250px; } #p03 .section-content { width: 100%; padding: 30px 40px; } #p03 .section-heading { font-size: 36px; margin-bottom: 30px; } #p03 .content-item { margin-bottom: 25px; } #p03 .footer-logos { flex-direction: row; gap: 20px; align-items: flex-start; padding: 20px 0 20px 0; } #p08 .wood-header { min-height: auto; } #p08 .wood-overlay { flex-direction: column; padding: 40px; } #p08 .wood-content { max-width: 100%; padding-right: 0; margin-bottom: 30px; } #p08 .wood-content h1 .line1, #p08 .wood-content h1 .line3 { font-size: 28px; } #p08 .wood-content h1 .line2 { font-size: 48px; } #p08 .wood-keybox { max-width: 100%; align-self: flex-start; } #p08 .wood-keybox::after { right: auto; left: 30px; } #p08 .stat-big { font-size: 72px; } #p14 .port-header { min-height: auto; } #p14 .port-overlay { flex-direction: column; padding: 40px; } #p14 .port-whitebox { max-width: 100%; margin-bottom: 30px; } #p14 .port-whitebox h1 .line1, #p14 .port-whitebox h1 .line2, #p14 .port-whitebox h1 .line3 { font-size: 36px; } #p14 .port-keybox { max-width: 100%; align-self: flex-start; } #p14 .green-video-section { flex-direction: column; padding: 40px; } #p14 .play-button { font-size: 60px; } .bigtext { padding: 10px 0; } #p04 .mobi { display: block!important; } #p04 .desktop { display: none!important; } #p04 .mobi { } #addedbox { max-width: 80%; } #p03 .growth-section .blocks { display: block; } #p03 .growth-section .blocks .section-image { width: 100%; height: auto; } #p03 .growth-section .section-content { display: block; } #p03 .prosperity-section .blocks { display: block; } #p03 .prosperity-section .blocks .section-image { width: 100%; height: auto; } #p03 .prosperity-section .section-content { display: block; } #p03 .content-item { margin-bottom: 25px; border-bottom: 1px solid white; padding-bottom: 30px; } #p03 .section-content hr { display: none; } #p03 .section-heading { margin-bottom: 0!important; text-align: left!important; width: 100%!important; padding-top: 30px; } #p03 .sustainability-section .section-content { padding: 0 30px 0 30px; } #p03 .sustainability-section .section-heading { padding-bottom: 30px } #p03 .section-content { padding: 0 30px 0 30px; } #p03 .content-item h3 { padding-top: 10px; } #p26 .toplayer { margin-top: 0; } .tablet { display: block!important; } #p08 .desktop { display: none!important; } #p08 .fullcolumns .width40 { width: 48%; } #p08 .fullcolumns .width60 { width: 48%; } #p08 .fullcolumns { gap: 4%; padding: 0; } .green .bigstatsbox .stat-text { text-align: center; } #p13 .bigstatsbox { padding-bottom: 40px; max-width: 65%; margin: 0 auto; } #p19 #scrollhere .scrollbox { margin-top: 30px; } #p37 .ad-content { bottom: auto; top: 300px; } #p37 #main-content { overflow: visible; } #p07 .desktop { display: none!important; } #p07 .mobi { display: block!important; } #p21 .widewidth span.line2 { font-size: 100px; } #p21 .widewidth span.line1 { font-size: 50px; } #p21 .widewidth .half { margin-left: 10%; width: 80%; } #p32 .width60 .img50 { max-width: 70%; } } @media screen and (max-width: 850px) { #p07 .second { padding-top: 10px; } #p36 .columns.nobottom section.bottom::before { font-size: 150px; left: -20px; top: -40px; } .article-body { max-width: 100%; padding: 0 50px; } .columns.oneup { display: block; } #p31 .oneup section { width: 100%; padding: 20px 0 0; } #p31 .oneup section.up { width: 100%; padding: 20px 0 0; } #p31 .upcontent { position: relative; padding: 0; } h2 { font-size: 14px; line-height: 20px; } p { font-size: 14px; line-height: 20px; text-indent: 10px; } blockquote footer { max-width: 100%; width: fit-content;} hgroup h1 { font-size: 32px !important; } hgroup h1 span.big { font-size: 50px !important; } hgroup h1 span { line-height: 1.2; padding-left: 0; } .pagetag { font-size: 14px; right: 20px; top: 30px; } #p31 header { flex-direction: column !important; display: block !important; } #p31 header figure { width: 100% !important; margin-bottom: 20px; } #p31 header section { width: 100% !important; display: block !important; position: static !important; box-sizing: border-box; padding: 0 50px; } #p31 header section hgroup { position: static !important; } #p31 header section hgroup h1 { position: static !important; left: auto !important; bottom: auto !important; padding: 0 !important; background: transparent !important; } #p31 header section .bottombits { max-width: 100% !important; padding: 0 !important; } #p24 hgroup h1 { margin-bottom: 30px } #p07 hgroup h1 { font-size: 50px!important; } #p07 hgroup h1 span.big { font-size: 80px!important; } header section .bottombits p { font-size: 14px !important; line-height: 20px !important; } header section { padding: 20px 50px; } .bottombits { padding: 15px 0; } .time { font-size: 12px; } .linebordertop { border-top-width: 6px; padding-top: 12px; } .columns { flex-direction: column !important; gap: 0 !important; padding-bottom: 30px; } .columns section { padding: 0; } .columns.oneup { flex-direction: column !important; } aside.pullquote { flex-direction: column !important; gap: 20px; padding: 0; } aside.pullquote figure { width: 100% !important; } aside.pullquote blockquote { width: 100% !important; } .fullwidth { width: calc(100vw - 30px); left: 50%; margin-left: calc(-50vw + 15px); margin-right: calc(-50vw + 15px); } .back-to-top { position: relative; font-size: 10px; right: 0; left: 0; margin: 20px auto 0; top: auto; margin: 0 0 20px 0; padding-bottom: 30px; bottom: 0!important; } .back-to-top i { font-size: 20px; } .rating-section { flex-direction: column; align-items: flex-start; gap: 10px; } .rating-text { font-size: 12px; } .star-button i { font-size: 20px; } .nav-button i { font-size: 20px; } .popup-menu { width: 90%; max-width: 320px; } .menu-item.desktop-only { display: none !important; } .menu-item.mobile-visible { display: flex !important; } .menu-item-thumbnail { margin-right: 12px; } .menu-item-title { font-size: 13px; } .menu-item-meta { font-size: 10px; } .checkmark-btn { display: none !important; } #block-4 h1 span { font-size: 40px; } #p30 .article-body { margin: 0; } #p30 h1 .line1 { font-size: 27px; } #p30 h1 .line2 {font-size: 60px; margin: 10px 0; } body#p30 { background: none; } #p30 header { margin: 0; } #p30 main { top: 0; max-width: 100%; } .quoteboksie { margin: 0 50px 40px; } .quoteboksie p { font-size: 16px; line-height: 24px; } p.intro { font-size: 14px; line-height: 20px; } .mobionly { display: block; } #p29 header { min-height: 0; margin-bottom: 40px; } #p29 header .line1 { font-size: 55px; } #p29 header .line2 { font-size: 70px; } #p29 header .line3 { font-size: 55px; } #p29 .quotebox.qorange { margin-top: 0; } #p29 .bottombigbox .half { position: relative; width: 100%; } .quotebox { width: 80%; margin: 30px auto; box-sizing: border-box; } #p29 .desktop.quotebox { display: none!important; } #p29 .mobi.quotebox { display: block!important; margin-left: 0; } .scrollbox { width: 100%; margin-top: -100px; } header.split { flex-direction: column-reverse; } header.split > div { flex: unset; } header.split .pic { width: 100%; max-height: 50vh; overflow: hidden; } header.split .text { box-sizing: border-box; background: white; z-index: 999; position: relative; padding: 0 50px; width: 100%; } .splitbox .article-body { } header.split .line2 { font-size: 70px; } header.split .line1, header.split .line3 { font-size: 40px; } #p33 .quotebox { margin-top: 0; } .splitbox .article-footer { padding: 30px 0 0 0; margin: 40px 50px 30px; background: #FFF; } #p35 .article-footer { margin: 40px 50px 30px; } .sectionpage { height: 100vh; width: 100vw; display: block; } .sectionpage img { display: block; width: 100%; height: auto; } .sectionpage blockquote { width: auto; padding: 0 50px; } .sectionpage blockquote.floatquote { top: 100px; left: 0; } .sectionpage blockquote.alt p { font-size: 20px; line-height: 1.2; } .sectionpage blockquote.alt footer cite { font-size: 14px; line-height: 1.2; } #p20 .sectionpage .title { background: #FFF url('../images/20-1-mobi.png'); background-size: cover; background-position: right center; } #p20 .sectionpage { background: url('../images/20-2-mobi.png'); background-size: cover; background-position: center; position: relative; height: 100vh; } #p12 .sectionpage .title { background: #FFF url('../images/12-1-mobi.png'); background-size: cover; background-position: right center; } #p12 .sectionpage { background: url('../images/12-2-mobi.png'); background-size: cover; background-position: center; position: relative; height: 100vh; } #p06 .sectionpage .title { background: #FFF url('../images/6-1-mobi.png'); background-size: cover; background-position: right center; } #p06 .sectionpage { background: url('../images/6-2-mobi.png'); background-size: cover; background-position: center; position: relative; height: 100vh; } #p02 .sectionpage { background: #FFF url('../images/2-1.jpg'); background-size: cover; background-position: bottom right; } #p02 .sectionpage .topcorner { position: absolute; top: 0; left: 0; width: 80%; height: auto; } #p02 .sectionpage .text { position: absolute; top: 32%; left: 15%; width: 80%; height: auto; margin: 0; } .showmobi { display: block!important; } body.bblue .article-body { padding-top: 50px; } .wideheader { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; max-width: none; } figure.imgright { width: 50%; justify-content: start; z-index: 9999; position: relative; } .scrollbox.fullscroll { margin-top: 0; } #p05 .guguhead { margin-bottom: 50px; } #p05 .scrollbox.fullscroll { max-width: 80%; } .guguhead .wideleft img { top: 10%; } img.sigpic { max-width: 32%; margin-left: 0; } #p05 .signature { padding-left: 0; margin: 15px 0; } .widewidth { padding: 30px 50px; } #p19head { margin-bottom: 40px; } #p19 hgroup h1 span { font-size: 34px; line-height: 1.2; } #p19 hgroup h1 span.line2 { font-size: 40px; line-height: 1; } #p19 hgroup { left: 50px; bottom: 20px; } .arrow-blue { max-width: 100%; padding: 0; position: relative; z-index: 1; } .arrow-blue-right { max-width: 100%; padding: 0; right: 0; position: absolute; bottom: auto; z-index: -1; } #p26 .arrow-blue-right { right: 0; } #p23 .pullright { right: auto; width: 50%; } #p23 .splitbox { display: flex; gap: 30px; } #p23 .splitbox > div { flex: 1; } #p23 .introbox { padding-left: 0; } #p23 hgroup { margin: 31px 0 10px; text-align: left; } #p23 hgroup h1 { text-align: left; } #p23 .introbox p { text-align: left; } #p23 .splitbox { padding: 0; } #p23 .columns { padding: 0; } #p23 .columns section { padding: 0; } #p26 .pullright { right: auto; width: 50%; } #p26 .splitbox { display: flex; gap: 30px; } #p26 .splitbox > div { flex: 1; } #p26 .introbox { padding-left: 0; position: relative; } #p26 hgroup { margin: 31px 0 10px; text-align: left; } #p26 hgroup h1 { text-align: left; } #p26 .introbox p { text-align: left; } #p26 .splitbox { padding: 0; } #p26 .columns { padding: 0; } #p26 .columns section { padding: 0; } #p27 .pullright { right: auto; width: 50%; } #p27 .splitbox { display: flex; gap: 30px; } #p27 .splitbox > div { flex: 1; } #p27 .introbox { padding-left: 0; } #p27 hgroup { margin: 31px 0 10px; text-align: left; } #p27 hgroup h1 { text-align: left; } #p27 .introbox p { text-align: left; } #p27 .splitbox { padding: 0; } #p27 .columns { padding: 0; } #p27 .columns section { padding: 0; } hr.right.half { margin-left: 0; } #p27 .columns { flex-direction: row!important; gap: 50px!important; } #p27 #scrollhere { padding-bottom: 50px; } #p21 .widewidth .half { width: 80%; margin: 0 auto; } #p21 .widewidth span.line1 { font-size: 45px; } #p21 .widewidth span.line2 { font-size: 90px; line-height: 1; } #p21 header { margin-bottom: 50px; } #p21 .quotebox { margin: 0; margin: 30px 0; } .colimgoverflow section.img { display: none; } .colimgoverflow section.text { padding: 40px 0 0; } .colimgoverflow { display: block; } .overflowbox { display: none; } #p36 .introbox { margin-left: 0; } #p35 { background: none; } #p35 .imgblock .text { position: relative; left: 0; box-sizing: border-box; width: 80%; margin: 0 auto; margin-top: -100px; } #p35 hgroup h1 span.big { text-align: center; } #p35 .heading { margin-top: 10px; margin-bottom: 30px; } #p34 header.split .text { padding: 0; margin: 0; } #p34 hgroup h1 span.line1 { font-size: 30px; } #p34 hgroup h1 span.line2 { font-size: 52px; } #p34 hgroup { padding-bottom: 30px; } #p34 .columns { flex-direction: row!important; gap: 20px!important; } #p34 header.split { flex-direction: column; } #p34 header.split .pic { margin-top: 0; z-index: 9999; } #p35 .widewidth { margin: 30px 50px 0; padding: 15px 15px 0; background: #FFF; width: auto; } #p35 .pagetag { right: 60px; top: 35px; } .social-share-container.right-social .share-wrapper { justify-content: left; } .social-share-container.right-social .share-wrapper .share-options { position: relative; right: auto; } section.padbottom { padding-bottom: 30px; } #p08 header h1 .line2 { font-size: 100px; } #p08 header h1 .line1 { font-size: 50px; } #p08 header h1 { padding-bottom: 30px; } .scrollbox.aqua { max-width: 70%; box-sizing: border-box; } .stat-box { margin: 0 auto; } .scrollbox.aqua { margin: 30px 0; } #p08 .article-footer { padding: 20px 0; } #p08 .article-body { padding: 40px 50px; } #p08 header { padding: 100px 50px 0; } #p08 .fullwidth { width: 100%; margin: 0!important; position: relative; left: auto; right: auto; } #p08 .fullwidth .stdwidth { width: 100%; } #p09 .quoteboksie { margin-top: 0; } #p09 header h1 .line2 { font-size: 100px; } #p09 header h1 .line1 { font-size: 50px; } #p09 header h1 { padding-bottom: 30px; } #p11 .headerwrap { width: 100%; margin: 0 0 40px 0!important; position: relative; left: auto; right: auto; } #p11 .headerwrap p.intro { max-width: 80%; margin-top: 40px; } #p11 .columns section { padding: 0; display: block; width: 100%; margin-top: 40px; } #p11 .desktop { display: none!important; } #p11 .mobi { display: block!important; } #p13 .headerwrap { width: 100%; margin: 0 0 40px 0!important; position: relative; left: auto; right: auto; } #p13 .headerposition { bottom: 0; top: auto; width: 100%; left: 0; right: 0; padding: 0 50px; box-sizing: border-box; } #p13 .headerwrap p.intro { max-width: 80%; margin-top: 40px; padding-bottom: 20px; } #p13 .columns section { padding: 0; display: block; width: 100%; margin-top: 40px; } #p13 .desktop { display: none!important; } #p13 .mobi { display: block!important; } #p13 .bigstatsbox { padding-top: 0; } #p13 .bigstatsbox .stat-big { text-align: center; font-size: 110px; } #p13 .green .bigstatsbox .stat-text { text-align: center; } #p13 .columns section { margin-top: 0; } #p13 .quotebox .arrow-svg { object-fit: contain; } #p37 .desktop { display: none!important; } #p37 .mobi { display: block!important; } #p37 .ad-logo { max-width: 260px; position: relative; } #p14 .up1 { margin-top: 0; } #p14 .up2 .quotebox { margin-top: 0; } #p14 .fullwidth { margin-top: 0; } #p14 .columns.split64 .up3 { margin-top: 40px; } #p16 .headerposition { padding: 0 50px; } #p16 .headerposition span.line1 { font-size: 60px; } #p16 .headerposition span.line2 { font-size: 100px; } #p16 .scrollbox.green .slide { min-height: 120px; } #p03 .prosperity-section .section-content { grid-template-columns: repeat(3, 1fr); } #p34 .split .text figure img { margin: 0 auto; max-width: 50%; } #p04 .wideheader { padding-top: 80px; } /* #p37 { background: url('../images/37-1-mobi.png'); background-size: cover; background-position: bottom center; background-repeat: no-repeat; } */ .stat-box { margin-top: 30px; } #p29 .bottombigbox { position: relative; margin-top: 30px; padding: 0 35px; } #p29 .scrollbox { max-width: 60%; margin-top: -100px; } #p29 #scrollhere { padding-bottom: 0; } #p29 .article-footer { margin-top: 40px; } #p33 .quotebox.desktop { display: none!important; } #p33 .quotebox.mobi { display: block!important; margin-left: 0; } #p33 .article-footer { margin: 40px 0 30px; } #p34 header .quotebox.qorange { display: none!important; } #p34 .mobi.quotebox.qorange { display: block!important; width: 100%; margin-bottom: 30px; } #p34 .desktop.quoteboksie { display: none!important; } #p34 figure.tablet { display: none!important; } #p34 .padtop { padding-top: 30px; } #p35 .article-body { padding: 0 50px 0; } #p35 .quotebox { width: 100%; } #p10 #row2.fullcolumns .width40 { margin-top: -150px; } #p17 #block-2 .stat-number { font-size: 120px; } #p17 #block-2 .stat-number-smaller { font-size: 80px; } #p17 #row3 { display: block; margin-top: 0; } #p17 #block-5 { margin-top: 30px; } #p17 #block-7 { margin-top: 30px; } #p35 .widewidth .imgblock { padding-bottom: 15px; } } @media screen and (max-width: 768px) { #p38 .backcover-content { padding: 40px 30px; } #p38 .corner-bracket { width: 70px; height: 70px; } #p38 .corner-top-left { top: 40px; left: 30px; } #p38 .corner-bottom-right { bottom: 40px; right: 30px; } #p38 .backcover-text h1 .line1, #p38 .backcover-text h1 .line2 { font-size: 32px; } #p38 .backcover-text h1 .line3 { font-size: 44px; } #p38 .backcover-text p.backcover-body { font-size: 16px; line-height: 26px; } #p38 .backcover-text p.backcover-body br { display: none; } #p38 .backcover-text p.backcover-link { font-size: 18px; } #p15 .tea-overlay { padding: 30px 40px; } #p15 .tea-logo { max-width: 240px; } #p15 .tea-headline-1, #p15 .tea-headline-2 { font-size: 28px; margin-bottom: 30px; } #p15 .tea-cup-image { max-width: 280px; margin-bottom: 30px; } #p15 .tea-body { font-size: 14px; line-height: 22px; margin-bottom: 30px; } #p15 .tea-cta-button { font-size: 15px; padding: 12px 25px; } #p31 #scrollhere { padding-bottom: 0; } #p07 .article-body { margin-top: 0; } #p03 .prosperity-section .section-content { grid-template-columns: repeat(2, 1fr); } #p03 .prosperity-section .blocks .section-heading { width: 100%; text-align: left; } .flip-horizontal { transform: scaleX(-1); } #p13 .headerwrap h1 .line2 { line-height: 1.2; font-size: 80px; } #p13 .headerwrap h1 .line1 { line-height: 1.1; font-size: 40px; } #p13 .columns section.width35 { margin-top: 30px; } .green .bigstatsbox { max-width: 385px; } #p13 .quoteboksie { max-width: 100%; } #p36 #part1.columns { padding: 0; margin-bottom: 0; } #p36 .share-wrapper { margin-bottom: 20px; } #p36 .article-footer { padding-bottom: 0; margin-bottom: 0; } #p36 .back-to-top { margin-bottom: 0px; } #p36 #scrollhere { padding-bottom: 0; } #p10 .article-footer { padding-bottom: 0; } #p07 hgroup h1 span.big { display: block; } #p11 .article-footer { padding-bottom: 0; margin-bottom: 0; } #p11 .back-to-top { padding-bottom: 0; } #p38 .backcover-content { padding: 40px 30px; } #p38 .corner-bracket { width: 70px; height: 70px; } #p38 .corner-top-left { top: 0px; left: 20px; } #p38 .corner-bottom-right { bottom: 0; right: 20px; } #p38 .backcover-text h1 .line1, #p38 .backcover-text h1 .line2 { font-size: 32px; } #p38 .backcover-text h1 .line3 { font-size: 44px; } #p38 .backcover-text p.backcover-body { font-size: 16px; line-height: 26px; } #p38 .backcover-text p.backcover-body br { display: none; } #p38 .backcover-text p.backcover-link { font-size: 18px; } #p15 .tea-overlay { padding: 30px 40px; } #p15 .tea-logo { max-width: 240px; } #p15 .tea-headline-1, #p15 .tea-headline-2 { font-size: 28px; margin-bottom: 30px; } #p15 .tea-cup-image { max-width: 280px; margin-bottom: 30px; } #p15 .tea-body { font-size: 14px; line-height: 22px; margin-bottom: 30px; } #p15 .tea-cta-button { font-size: 15px; padding: 12px 25px; } #p31 #scrollhere { padding-bottom: 0; } #p07 .article-body { margin-top: 0; } #p21 .widewidth hgroup { padding-top: 0; } } @media screen and (max-width: 600px) { #p16 .cornfield-overlay { padding: 30px 20px; } #p16 .cornfield-content h1 .line1, #p16 .cornfield-content h1 .line3, #p16 .cornfield-content h1 .line4 { font-size: 24px; } #p16 .cornfield-content h1 .line2 { font-size: 40px; } #p16 .cornfield-keybox { padding: 20px; } #p16 .cornfield-keybox::after { border-top-width: 30px; border-left-width: 30px; bottom: -30px; } #p16 .intro-text { font-size: 16px; line-height: 24px; } #p16 .suggestions-box { padding: 20px; } #p16 .suggestions-box h3 { font-size: 20px; } #p16 .suggestions-intro { font-size: 14px; line-height: 21px; } #p16 .scrollbox-green .slide-content { flex-direction: column; } #p16 .num-green { font-size: 48px; } #p16 .slide-text h4 { font-size: 14px; } #p16 .slide-text p { font-size: 13px; line-height: 20px; } #p18 .g20-overlay { padding: 30px 50px; } #p18 .g20-content h1 .line1, #p18 .g20-content h1 .line3, #p18 .g20-content h1 .line4, #p18 .g20-content h1 .line5 { font-size: 26px; } #p18 .g20-content h1 .line2 { font-size: 60px; } #p18 .intro-section { padding: 30px 20px; } #p18 .intro-text-box p { font-size: 14px; line-height: 22px; } #p18 .intro-keybox-green { padding: 20px; } #p18 .stat-callout-25 { padding: 30px 20px; } #p18 .stat-25-number { font-size: 70px; } #p18 .stat-25-text p { font-size: 16px; line-height: 24px; } #p18 .stat-25-number span { font-size: 40px; } #p37 .ad-content { padding: 30px 0 20px; } #p37 .ad-text h1 { font-size: 24px; } #p37 .ad-logo { max-width: 220px; } #p15 .tea-overlay { padding: 25px 50px; } #p15 .tea-logo { max-width: 200px; } #p15 .tea-headline-1, #p15 .tea-headline-2 { font-size: 22px; margin-bottom: 20px; } #p15 .tea-cup-image { max-width: 220px; margin-bottom: 20px; } #p15 .tea-body { font-size: 13px; line-height: 20px; margin-bottom: 25px; } #p15 .tea-cta-button { font-size: 14px; padding: 10px 20px; gap: 8px; } #p15 .tea-cta-button i { font-size: 16px; } #p15 .tea-disclaimer p { font-size: 10px; line-height: 14px; } #p03 .contents-page { padding: 30px 20px 20px; } #p03 .contents-title { font-size: 36px; } #p03 .contents-regulars h2 { font-size: 28px; text-align: left; padding-left: 30px; } #p03 .regulars-list { flex-direction: column; gap: 15px; padding: 0 30px; } #p03 .section-image { height: 200px; } #p03 .section-content { padding: 25px 30px; } #p03 .section-heading { font-size: 28px; } #p03 .content-item p { font-size: 13px; } #p03 .footer-logo-sb { max-width: 220px; } #p03 .footer-logo-zs { max-width: 140px; } #p07 .keybox.bluekey { padding: 20px; } #p07 .scrollhead { line-height: 1; margin-bottom: 0; } #p07 .scroller > div { padding: 15px; min-height: auto; } #p07 .scroller .num { font-size: 40px; } #p07 .scroller .title { font-size: 14px; } #p07 .scroller p { font-size: 13px; line-height: 20px; } #p07 .scrollnav { flex-direction: column; gap: 10px; } #p07 .scrollnav span { font-size: 11px; order: -1; } #p07 .stat-number { font-size: 48px; } #p07 .stat-text { font-size: 14px; } #p08 .wood-overlay { padding: 30px 20px; } #p08 .wood-content h1 .line1, #p08 .wood-content h1 .line3 { font-size: 24px; } #p08 .wood-content h1 .line2 { font-size: 40px; } #p08 .wood-intro { font-size: 14px; line-height: 22px; } #p08 .wood-keybox { padding: 20px; } #p08 .wood-keybox::after { border-top-width: 30px; border-left-width: 30px; bottom: -30px; } #p08 .quote-callout p { font-size: 18px; line-height: 26px; } #p08 .stat-big { font-size: 56px; } #p08 .blue-info-box { padding: 20px; } #p09 .falls-overlay { padding: 30px 50px; } #p09 .falls-content h1 span.line2 { display: block; } #p09 .falls-content h1 .line1 { font-size: 40px; } #p09 .falls-content h1 .line2 { font-size: 60px; display: inline; } #p09 .falls-content h1 .ampersand { font-size: 60px; width: fit-content; display: inline; } #p09 .falls-intro { font-size: 13px; line-height: 20px; } #p09 .growth-outcomes-box { padding: 20px; } #p09 .growth-outcomes-box h3 { font-size: 16px; } #p09 .growth-outcomes-box .box-intro { font-size: 12px; line-height: 18px; } #p09 .outcome-number { font-size: 40px; } #p09 .outcome-content h4 { font-size: 13px; } #p09 .outcome-content p { font-size: 12px; line-height: 18px; } #p09 .pull-quote-large { padding: 20px; } #p09 .pull-quote-large p { font-size: 16px; line-height: 24px; } #p14 .port-overlay { padding: 30px 20px; } #p14 .port-whitebox { padding: 30px 20px; } #p14 .port-whitebox h1 .line1, #p14 .port-whitebox h1 .line2, #p14 .port-whitebox h1 .line3 { font-size: 28px; } #p14 .port-intro { font-size: 14px; line-height: 21px; } #p14 .port-keybox { padding: 20px; } #p14 .stat-box-money, #p14 .stat-box-percentage { padding: 30px 20px; } #p14 .stat-big-green { font-size: 70px; } #p14 .stat-label-green { font-size: 14px; } #p14 .quote-box-green { padding: 20px; } #p14 .quote-box-green p { font-size: 18px; line-height: 26px; } #p14 .green-video-section { padding: 30px 20px; } #p14 .video-text h3 { font-size: 20px; } #p14 .video-text p { font-size: 14px; line-height: 21px; } #p22 .bluecentertext h1 { font-size: 80px; } .numquote { display: block; } .numquote > span { display: block; line-height: 1.1; } .bigtext p { font-size: 18px; } #p36 h1 span.line1 { font-size: 30px; } #p36 h1 span.line2 { font-size: 55px; } #p35 .article-body { padding: 30px 50px 0; margin: 0; width: 100%; box-sizing: border-box; } #p35 .imgblock .text { width: 100%; margin-top: 0; padding: 30px 0 0; } #p35 .columns section { padding: 0; } #p35 .article-footer { padding: 40px 0 40px; background: white; margin: 40px 50px 0; } #p35 .columns { padding-bottom: 0; } #p34 .statsbox .num { font-size: 40px; } #p34 .statsbox span.stathead { padding-bottom: 20px; display: block; } .desktop { display: none!important; } .mobi { display: block!important; } #p33 .introbox { margin-bottom: 30px; } #p35 { background: url('../images/35-2-mobi.jpg'); background-size: 100%; background-repeat: no-repeat; } #p35 h1, #p35 h1 span, #p35 hgroup h1 span.big { text-align: left; } .desktop { display: none!important; } .mobi { display: block!important; } #p37 .ad-background img { height: 100%; width: auto; } #p34 #scrollhere section.first-child { margin-bottom: 20px; } #p26 .arrow-blue-right { position: relative; left: auto; right: auto; margin: 0 auto; } .mobiblock { display: block; } #p11 .headerwrap { background: var(--aqua); min-height: 0; } #p11 .fullwidth { height: auto; background: none; } #p11 header.white.mobi { position: absolute; top: 45px; } #p11 header.white.mobi .headerwrap p.intro { width: 100%; margin-top: 20px; } #p13 .introbox p.intro { margin-bottom: 30px; } #p13 .introbox { margin-bottom: 30px; } #p13 .introbox.white hr { border-color: black; } #p09 footer { padding-bottom: 0; } #p37 .ad-logo { left: 0; } #p37 main { height: 100%; } #p37 article { height: 100%; } #p37 aritcle a { height: 100%; display: block; } #p37 .fullpage-ad { height: 100%; } #p37 .fullpage-ad { height: 100%; } #p37 .ad-background { height: 100%; width: 100%; } #p14 .up1 { padding: 40px 0; } #p14 hgroup h1 span.line1 { font-size: 40px; } #p14 hgroup h1 span.line2 { font-size: 50px; } #p16 .headerposition span.line1 { font-size: 24px; } #p16 .headerposition span.line2 { font-size: 40px; } #p16 .scrollbox.green .slide { min-height: 120px; } #p16 .headerposition { bottom: 10px; } #p16 .headerwrap { width: 100%; left: 0; right: 0; margin: 0; } #p03 .content-item h3 { font-size: 17px; } #p13 .headerwrap header { padding: 0; } #p29 .bottombigbox .half { padding-top: 30px; } #p29 .bottombigbox { padding-top: 30px; } .stat-callout { margin-top: 0; padding-bottom: 0; } #p13 .headerwrap h1 .line1 { font-size: 30px; } #p13 .headerwrap h1 .line2 { font-size: 43px; } #p08 header h1 .line2 { font-size: 80px; } #row1, #row2, #row3 { padding: 50px; } #row3 .width60 { width: 100%; } #row1 { padding-bottom: 0; } #row2 { padding-top: 0; } #row3 { padding-top: 0; padding-bottom: 0; } #block-4 .bluebox { border: 10px solid #007bc1; border-right: 0; } #row1 .width60, #row3 .width60 { width: 100%; } #row1 #block-1 { margin-bottom: 50px; } #row1 #block-1 .source { padding-top: 0; } .borderbx h4 { font-size: 17px; padding: 5px; } #p10 .article-footer { padding-bottom: 0; } #p10 #row1 { padding: 0; } #p10 #row2.desktop { display: none!important; } #p10 .fullcolumns { display: block; padding: 0; } #p10 .fullcolumns .width60 { width: 100%; } #p17 #row1, #p17 #row2, #p17 #row3 { padding: 0; } #p17 #row1 section.width40 { position: relative; } #p17 #block-5 { margin-top: 30px; } #p17 .borderbx { padding-top: 30px; } #p32 #block-5 .stat-number { text-align: center; } .guguhead .social-share-container { left: 0; } #p13 .bigstatsbox { max-width: 75%; } #p17 section.heading span { line-height: 1.1; font-size: 25px; padding-left: 25px; } } @media screen and (max-width: 480px) { .splitbox .article-footer { margin: 40px 0 30px; } #p38 .backcover-content { padding: 30px 20px; } #p38 .corner-bracket { width: 50px; height: 50px; border-width: 4px; } #p38 .corner-top-left { top: 30px; left: 20px; } #p38 .corner-bottom-right { bottom: 30px; right: 20px; } #p38 .backcover-text h1 .line1, #p38 .backcover-text h1 .line2 { font-size: 26px; } #p38 .backcover-text h1 .line3 { font-size: 36px; } #p38 .backcover-text p.backcover-body { font-size: 14px; line-height: 22px; margin-bottom: 20px; } #p38 .backcover-text p.backcover-link { font-size: 16px; } header section { width: 100% !important; display: block !important; box-sizing: border-box; } h2 { font-size: 13px; line-height: 18px; } p { font-size: 13px; line-height: 19px; text-indent: 8px; } blockquote p { font-size: 16px; line-height: 24px; } blockquote footer { padding-bottom: 12px; } blockquote footer cite { font-size: 13px; line-height: 19px; } hgroup h1 { font-size: 28px !important; } hgroup h1 span.big { font-size: 42px !important; } hgroup h1 span { padding-left: 0; line-height: 1.15; } .pagetag { font-size: 13px; right: 15px; top: 25px; line-height: 26px; } #p31 header section hgroup h1 { padding: 10px 0 !important; } #p31 header section .bottombits { padding: 12px 0 !important; } p.time { font-size: 13px !important; line-height: 19px !important; } #p31 .oneup section.up { width: 100%; } header section { padding: 15px 12px; } .bottombits { padding: 12px 0; } .linebordertop { border-top-width: 5px; padding-top: 10px; } .columns { padding-bottom: 0; display: block; } .columns section { padding: 0; } .columns section.padbottom { padding-bottom: 30px; } #p31 .upcontent { position: relative; padding: 20px 0 0; } #p31 .oneup section { width: 100%; padding: 20px 0 0; } aside.pullquote { gap: 15px; padding: 15px 0; } .fullwidth { width: calc(100vw - 24px); margin-left: calc(-50vw + 12px); margin-right: calc(-50vw + 12px); } .back-to-top { font-size: 9px; } .back-to-top i { font-size: 18px; } .rating-text { font-size: 11px; } .star-rating { gap: 5px; } .star-button { padding: 3px; } .star-button i { font-size: 22px; } .nav-button { width: 42px; height: 42px; } .nav-button i { font-size: 18px; } .popup-menu { width: 95%; max-width: 300px; } .menu-item-thumbnail { margin-right: 10px; } .menu-item-title { font-size: 12px; } .menu-item-meta { font-size: 9px; } .social-btn { width: 38px; height: 38px; } .social-btn i { font-size: 16px; } .share-option-btn { width: 34px; height: 34px; } .share-option-btn i { font-size: 15px; } #p32 .article-body { padding: 50px 0 0; } .fullcolumns { display: block; padding: 0px 35px; } .fullcolumns .width40, .fullcolumns .width60 { width: 100%; } .width60 .img50 { max-width: 100%; } #block-1 { padding-bottom: 0; padding-top: 50px; } #block-2 { padding: 30px 0; } #block-3 { position: relative; left: auto; right: auto; top: auto; bottom: auto; } #block-5 { padding: 30px 0; border-bottom: 6px solid black; } #block-1 .stat-number { font-size: 36px; margin-bottom: 10px; } #block-1 .stat-label { font-size: 16px; line-height: 20px; border-bottom: 6px solid black; } #block-2 .stat-number { font-size: 120px; } #block-2 .stat-label { font-size: 16px; line-height: 20px; } #block-3 .stat-number { font-size: 82px; width: 100%; text-align: center; padding: 30px 0 0; } #block-3 .stat-label { font-size: 20px; line-height: 26px; text-align: center; max-width: 100%; } #block-5 .stat-number { font-size: 48px; text-align: center; } #block-5 .stat-label { font-size: 16px; line-height: 20px; text-align: center; } #block-6 .stat-number { font-size: 50px; margin-bottom: 10px; } #block-6 .stat-label { font-size: 14px; line-height: 20px; } #block-4.secondblock { display: none; } #block-4.firstblock { display: block; } #block-4 { margin-bottom: 40px; } #block-4 h1 { padding: 20px 0px 0 20px; max-width: 100%; } #block-4 h1 span { font-size: 24px; } #block-4 .orangebox { border-width: 8px; } #p17 #block-4 h1 { padding: 31px 0px 0 38px; } .share-wrapper { margin-bottom: 0; } .scrollbox .scrollhead { font-size: 24px; } .scroller div span.num { font-size: 50px; } .scroller div span.title { font-size: 18px; } .scrollnav span { font-size: 16px; } #p29 header .line1 { font-size: 25px; } #p29 header .line2 { font-size: 30px; } #p29 header .line3 { font-size: 25px; } header.split .text { padding: 0 50px 0; width: 100%; } header.split .line2 { font-size: 50px; } /* .splitbox .article-body { margin: 0 80px; } */ .quotebox { width: 100%; } #p24 hgroup h1 span, #p25 hgroup h1 span, #p28 hgroup h1 span { font-size: 34px; line-height: 44px; text-align: center; } #p05 .guguhead { display: block; width: 100%; margin: 50px 0 30px; } .guguhead .wideleft { width: 100%; } .guguhead .wideleft img { width: 40%; position: relative; margin-top: -50px; left: 37px; } .guguhead .wideright { width: 100%; } #p05 .guguhead .wideleft .introbox { position: relative; width: 100%; padding: 0 40px; box-sizing: border-box; margin-top: 10px; } #p05 .introbox p { text-align: left; } figure.imgright { margin: -100px auto 0; width: 90%; z-index: 999; position: relative; } figure.imgright img { max-width: 100%; width: 100%; } /* .scrollbox.fullscroll span { font-size: 14px; margin: 0; } */ .wideheader { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; max-width: none; } .scrollbox.fullscroll figure.arrowscroll { top: 56px; width: 80px; right: 0; } #p05 .scrollbox.fullscroll { max-width: 100%; } #p19 hgroup h1 span { font-size: 20px; line-height: 1.2; } #p19 hgroup h1 span.line2 { font-size: 30px; line-height: 1; } #p19 hgroup { position: relative; top: auto; left: auto; bottom: auto; } #p19 .widewidth { position: relative; background: var(--bblue); padding: 30px; } #p19 .scrollbox.bluescroll { margin-top: 30px; } #p23 .splitbox { display: block; } #p23 .pullright { width: 100%; } #p26 .splitbox { display: block; } #p26 .pullright { width: 100%; } #p27 .splitbox { display: block; } #p27 .pullright { width: 100%; } .arrow-blue-right { } .numquote span.num { font-size: 80px; } .numquote span.text { font-size: 18px; } .numquote span.text strong { font-size: 20px; display: block; } #p21 .widewidth { padding: 0 20px; } #p21 .widewidth .half { width: 100%; display: flex; align-items: end; padding-bottom: 20px; } #p21 .widewidth span.line2 { font-size: 40px; line-height: 1; } #p21 .widewidth hgroup { padding-top: 0; padding-bottom: 10px; } #p21 header { margin-bottom: 30px; } #p22 .arrow-white { position: relative; left: auto; width: 100%; margin: 0; top: 0; right: 0; height: 80px; } #p22 .arrow-white img { height: 80px; width: auto; } #p22 .bluecentertext h1 { text-align: left; font-size: 60px; } #p24 hgroup h1 span, #p25 hgroup h1 span, #p28 hgroup h1 span { text-align: left; font-size: 28px; line-height: 1.1; } #p28 .columns.nobottom, #p25 .columns.nobottom { flex-direction: column-reverse!important; display: flex; } #p28 .columns.nobottom { padding-bottom: 0; } #p28 .introbox p, #p25 .introbox p { text-align: left; } #p28 .introbox hr, #p25 .introbox hr { margin-left: 0; } #p23 hgroup, #p24 hgroup, #p25 hgroup, #p26 hgroup, #p27 hgroup { padding-bottom: 20px; } #p27 #scrollhere { padding-bottom: 0; } #p26 .article-footer, #p29 .article-footer { margin-top: 30px; } #p27 #scrollhere.columns { padding-bottom: 0; } #p28 .social-share-container { padding-bottom: 30px; } #p29 .introbox hr.half { margin-bottom: 20px; } #p29 .social-share-container { margin-bottom: 30px; } #p29 .columns section { padding: 0; } #p29 .quotebox.qorange { margin-top: 30px; } #p29 header .line3 { bottom: auto; } #p29 .bottombigbox { position: relative; width: 100%; margin: 30px 0; left: 0; padding: 0; } .scrollbox { padding: 20px; max-width: 100%; position: relative; box-sizing: border-box; } .scrollnav span { margin: 0 auto; font-size: 12px; top: -8px; } #p29 .quotebox.qorange { margin-top: 0; } #p34 .quotebox.qorange { margin-bottom: 30px; } #p24 .article-body, #p25 .article-body, #p28 .article-body { padding-top: 80px; } #p30 .pagetag { color: var(--orange); } #p07 .columns section.second { padding-top: 30px; } #p07 .scrollbox { margin: 30px 0 0 0; } #p07 hgroup h1 span.big { font-size: 60px !important; position: relative; top: auto; line-height: 1.1; } .quoteboksie.aqua { margin: 30px 20px; } #p37 .ad-text p.ad-body { line-height: 1.2; font-size: 13px; letter-spacing: 0; } #p09 .quoteboksie { margin-top: 30px; } .scrollbox.aqua { max-width: 100%; } #p08 .fullwidth .stdwidth section:first-child { padding: 0 50px; } #p11 .stat-box .stat-big { font-size: 100px; } #p11 .headerwrap h1 .line1 { font-size: 30px; } #p11 .headerwrap h1 .line2 { font-size: 39px; } #p07 .article-body { padding: 30px 50px; } #p29 .scrollbox { padding: 25px; } #p29 .scrollbox.fullscroll .scrollnav span { font-size: 12px; } #p21 .quotebox { margin: 30px 0; } #p03 .back-to-top { bottom: 10px; padding-bottom: 10px; } #p04 figure.imgright { width: 100%; max-width: 100%; } #p05 img.sigpic { max-width: 60%; } #p04 img.sigpic { max-width: 46%; } #p05 .signature { margin: 0 0 15px 0; } #p18 .fullwidth { padding-top: 30px; } #p16 .scrollbox.green .slide { min-height: 280px; } #p14 hgroup h1 span.line2 { font-size: 42px; } #p18 .article-footer { margin-top: 0; } #p18 .stat-callout-25 { gap: 20px 40px; } #p19 .pagetag { right: 35px; } .article-body { padding-bottom: 0; } #p07 .article-body { padding-bottom: 0; } #p07 .article-footer { margin-top: 0; } #addedbox { max-width: 100%; } #p08 header h1 .line1 { font-size: 30px; } #p08 header h1 .line2 { font-size: 46px; } #p37 .ad-content { top: 400px; } #p17 .article-body { padding-top: 170px; } #p21 .widewidth span.line2 { font-size: 50px; } #p21 .widewidth span.line1 { font-size: 20px; } #p29 .scrollbox { width: 100%; max-width: 100%; } #p34 .split .text figure img { max-width: 100%; } #p13 .bigstatsbox .stat-big { text-align: center; max-width: 85%; font-size: 90px; } #p35 .widewidth .imgblock { padding-bottom: 0; } } @media screen and (max-width: 360px) { .scrollnav span { font-size: 10px; } #p34 .split .text figure img { max-width: 100%; } } .priorities-list { list-style: none; } .priority-item { display: flex; align-items: flex-start; margin-bottom: 15px; transition: transform 0.2s ease; } .priority-item:hover { transform: translateX(4px); } .priority-marker { width: 18px; height: 18px; flex-shrink: 0; margin-right: 20px; margin-top: 4px; } .priority-marker.level-1 { background-color: #004b87; } .priority-marker.level-2 { background-color: #0066b3; } .priority-marker.level-3 { background-color: #4d94cc; } .priority-marker.level-4 { background-color: #80b3d9; } .priority-marker.level-5 { background-color: #b3d4e6; } .priority-content h3 { font-size: 18px; font-family: FF-BentonSans-Bold, BentonSans, Arial; font-weight: bold; color: #1a1a1a; margin-bottom: 6px; line-height: 1.3; } .priority-content p { font-size: 18px; color: #4a4a4a; text-indent: 0; font-weight: 400; } .source { font-size: 14px; color: #000; padding-top: 20px; } /* Tablet breakpoint */ @media (max-width: 768px) { .priority-content h3 { font-size: 20px; } .priority-content p { font-size: 18px; } .priority-item { margin-bottom: 28px; } .priority-marker { width: 20px; height: 20px; margin-right: 16px; } } /* Mobile breakpoint */ @media (max-width: 480px) { .priority-content h3 { font-size: 18px; } .priority-content p { font-size: 16px; } .priority-item { margin-bottom: 24px; } .priority-marker { width: 18px; height: 18px; margin-right: 12px; } .source { font-size: 14px; } } /* ========================================================================== PAGE 01 SPECIFIC STYLES - Front Cover ========================================================================== */ /* ========================================================================== PAGE 01 SPECIFIC STYLES - Front Cover ========================================================================== */ #p01 { background: url('../images/1-desk.jpg') no-repeat; background-size: 100%; box-sizing: border-box; } @media (orientation: landscape) { #p01 { background: url('../images/1-desk.jpg') no-repeat; background-size: 100%; background-size: cover; } } /* This applies when browser window is tall and narrow */ @media (orientation: portrait) { #p01 { background: url('../images/1-table.png') no-repeat; background-size: 100%; } } #p01 main { padding-bottom: 0; max-width: 100%; overflow: unset; } #p01.coverpage { } #p01 .cover-page { position: relative; width: 100vw; box-sizing: border-box; #p01 .cover-page { position: relative; width: 100%; /* Changed from 100vw */ max-width: 100vw; /* Safety net */ box-sizing: border-box; overflow-x: hidden; /* Add this */ } } #p01 .cover-background { position: relative; z-index: -1; } #p01 .cover-background img { width: 100%; display: block; } #p01 .cover-overlay { position: absolute; top: 0; left: 0; right: 0; top: 354px; width: 1130px; max-width: 100%; padding: 50px 50px 0; box-sizing: border-box; display: flex; margin: 0 auto; padding-bottom: 20px; } #p01 .cover-overlay { top: 354px; width: 100%; /* Changed from 1130px */ max-width: 1130px; /* Add this instead */ padding: 50px 50px 0; box-sizing: border-box; display: flex; margin: 0 auto; padding-bottom: 20px; } #p01 .cover-overlay > div { width: 50%; align-content: flex-end; } #p01 .cover-logo { max-width: 250px; max-width: 250px; } #p01 .cover-logo img { width: 100%; height: auto; } #p01 .cover-headline { margin-bottom: 15px; text-align: right; } #p01 .cover-headline span { font-size: 70px; letter-spacing: -0.02em; display: block; color: #FFFFFF; font-weight: bold; line-height: 1; text-transform: uppercase; text-shadow: 0 1px 15px rgba(0, 0, 0, 0.2); } #p01 .cover-line1 { } #p01 .cover-line2 { font-family: FF-BentonSans-Bold, "Benton Sans", serif; } #p01 .cover-line3 { font-family: FF-BentonSans-Bold, "Benton Sans", serif; } #p01 .cover-subheadline { font-family: FF-BentonSans-Regular, "Benton Sans", serif; font-size: 24px; line-height: 1.3; color: #FFFFFF; margin-bottom: 10px; text-indent: 0; text-align: right; } #p01 .cover-divider { font-size: 50px; color: #FFF; text-align: right; } #p01 .cover-feature { font-family: FF-BentonSans-Regular, "Benton Sans", serif; font-size: 20px; line-height: 1.4; color: #FFFFFF; text-indent: 0; margin-bottom: 0; text-align: right; } #p01 .cover-special-insert { text-align: right; padding-bottom: 350px; padding-left: 50px; } #p01 .insert-label { font-family: FF-BentonSans-Regular, "Benton Sans", serif; font-size: 16px; line-height: 1.3; color: #0033a1; margin-bottom: 10px; text-indent: 0; letter-spacing: 0.05em; text-align: center; text-shadow: 0px 1px 14px rgba(255, 255, 255, .5); } #p01 .insert-text { font-family: FF-BentonSans-Bold, "Benton Sans", serif; font-size: 32px; line-height: 1.2; color: #0033a1; text-indent: 0; margin-bottom: 0; text-align: center; text-shadow: 0px 1px 8px rgba(255, 255, 255, .9); } #p01 .insert-text strong { font-weight: bold; } #p01 .cover-b20-logo { width: 100%; margin-left: auto; padding-right: 20px; } #p01 .cover-b20-logo img { text-align: right; max-width: 120px; margin-left: auto; } #p01 .mobi { display: none!important; } #p01 .cover-text { padding-right: 60px; padding-bottom: 80px; } /* #p01 .cover-overlay { position: absolute; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; top: 0; left: 0; right: 0; bottom: 0; height: 100dvh; } #p01 .cover-b20-logo { position: absolute; right: 120px; bottom: 80px; max-width: 180px; } #p01 .cover-logo { max-width: 225px; position: absolute; bottom: 80px; left: 60px; } #p01 .cover-text { position: absolute; right: 55%; top: 50%;max-width: 700px; } #p01 .cover-special-insert { position: absolute; transform: translateY(-50%); text-align: right; left: 66%; top: 65%; max-width: fit-content; } */ @media screen and (max-width: 1400px) { /* #p01 .cover-text { left: 315px; bottom: 10px; top: auto; right: auto; } */ #p01 .cover-line1, #p01 .cover-line2, #p01 .cover-line3 { font-size: 68px; } #p01 .cover-subheadline { font-size: 22px; } #p01 .cover-feature { font-size: 18px; } #p01 .insert-text { font-size: 28px; } #p01 .cover-b20-logo { max-width: 160px; padding-bottom: 50px; } #p01 .cover-headline span { font-size: 65px; } #p01 .cover-logo { padding-bottom: 50px; } } @media screen and (max-width: 1300px) { /* #p01 .cover-text { left: 283px; bottom: 81px; top: auto; right: auto; } */ #p01 .cover-line1, #p01 .cover-line2, #p01 .cover-line3 { font-size: 68px; } #p01 .cover-subheadline { font-size: 22px; } #p01 .cover-feature { font-size: 18px; } #p01 .insert-text { font-size: 28px; } #p01 .cover-b20-logo { max-width: 160px; } #p01 .cover-logo { max-width: 220px; } #p31 hgroup h1 span { font-size: 45px; } #p31 hgroup h1 span.big { font-size: 85px!important; } } @media screen and (max-width: 1200px) { #p01 .cover-line1, #p01 .cover-line2, #p01 .cover-line3 { font-size: 56px; } #p01 .cover-subheadline { font-size: 20px; } #p01 .insert-text { font-size: 24px; } #p01 .desktop { display: none!important; } #p01 main aritcle { height: 100%; } #p01 .cover-page { height: 100%; } #p01 .cover-logo { max-width: 240px; position: relative; top: auto; margin: 0; padding-bottom: 20px; } #p01 .cover-line1, #p01 .cover-line2, #p01 .cover-line3 { font-size: 56px; } #p01 .cover-subheadline { font-size: 20px; } #p01 .insert-text { font-size: 24px; } #p01 .cover-b20-logo { padding-bottom: 20px; } } @media only screen and (device-width: 834px) and (device-height: 1194px) { #p01 .cover-special-insert { padding-bottom: 200px; } } @media only screen and (device-height: 834px) and (device-width: 1194px) { #p01 .cover-special-insert { padding-bottom: 200px; } } /* iPad 8th gen (2020) and iPad 9th gen (2021) */ @media only screen and (device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) { #p01 .cover-special-insert { padding-bottom: 200px; } #p01 .cover-overlay { top: 330px; } } @media screen and (max-width: 1100px) { #p01 .cover-special-insert { max-width: 250px; margin-left: auto; padding-left: 0; } } @media screen and (max-width: 1080px) { #p31 header section { padding-top: 0; padding-bottom: 0; } #p31 #scrollhere section { padding-top: 0; } /* #p01 .cover-logo { bottom: 80px; left: 60px; top: auto; } #p01 .cover-special-insert { top: 60%; } #p01 .cover-text { bottom: 200px; left: 130px; }*/ #p01 .insert-text strong br { display: none; } #p01 .cover-b20-logo { margin-right: 60px; } } @media screen and (max-width: 900px) { #p01 .mobi { display: block!important; } #p01 .desktop { display: none!important; } #p01 .cover-overlay { padding: 0 50px 40px; } #p01 .cover-logo { max-width: 200px; } #p01 .cover-headline .cover-line1, #p01 .cover-headline .cover-line2, #p01 .cover-headline .cover-line3 { font-size: 44px; } #p01 .cover-subheadline { font-size: 18px; } #p01 .cover-divider { margin: 0; font-size: 30px; } #p01 .cover-feature { font-size: 16px; } #p01 .insert-label { font-size: 14px; } #p01 .insert-text { font-size: 20px; } #p01 .cover-b20-logo { max-width: 140px; } #p31 hgroup h1 span { font-size: 35px; } #p31 hgroup h1 span.big { font-size: 65px!important; } /* #p01 .cover-text { left: 40px; bottom: 200px; max-width: 60%; } */ } @media screen and (max-width: 850px) { #p01 .cover-special-insert { padding-bottom: 200px; } } @media screen and (max-width: 768px) { #p01 .cover-logo { max-width: 180px; } #p01 .cover-line1, #p01 .cover-line2, #p01 .cover-line3 { font-size: 36px; } #p01 .cover-subheadline { font-size: 16px; } #p01 .cover-feature { font-size: 13px; } #p01 .cover-special-insert { top: 40%; transform: none; text-align: left; } #p01 .insert-label { font-size: 12px; } #p01 .insert-text { font-size: 18px; } #p01 .cover-b20-logo { max-width: 120px; } /* #p01 .cover-text { left: 100px; bottom: 200px; max-width: 90%; } #p01 .cover-b20-logo { bottom: 120px; right: 120px; } #p01 .cover-logo { bottom: 120px; left: 60px; } */ } @media screen and (max-width: 600px) { #p01 .insert-label { margin-bottom: 10px; } #p01 .cover-headline { margin-bottom: 5px; } #p01 { background: url('../images/1-1-mobi.jpg') no-repeat; background-size: 100%; } #p01 .cover-text { padding-right: 10px; } #p01 .cover-special-insert { padding-bottom: 400px; padding-right: 10px; } #p01 .cover-b20-logo { padding-bottom: 30px; } } @media screen and (max-width: 480px) { #p01 .cover-logo { max-width: 150px; } #p01 .cover-text { padding-bottom: 50px; max-width: 170px; } #p01 .cover-special-insert { width: 120px; } #p01 .cover-logo { bottom: auto; padding-bottom: 0; } #p01 .cover-b20-logo { bottom: 201px; right: 55px; } #p01 .cover-line1, #p01 .cover-line2, #p01 .cover-line3 { font-size: 28px; } #p01 .cover-subheadline { font-size: 13px; margin-bottom: 0; } #p01 .cover-b20-logo { max-width: 90px; padding-bottom: 0; margin-right: 10px; padding-right: 0; } #p01 .cover-headline .cover-line1, #p01 .cover-headline .cover-line2, #p01 .cover-headline .cover-line3 { font-size: 35px; text-align: right; } #p01 .insert-text { font-size: 14px; } #p01 .cover-headline .cover-line1, #p01 .cover-headline .cover-line2, #p01 .cover-headline .cover-line3 { font-size: 27px; } #p01 .cover-special-insert { top: 22%; bottom: auto; } #p01 .insert-label { font-size: 10px; margin-bottom: 3px; } #p01 .cover-special-insert { left: auto; } #p01 .cover-overlay { top: 150px; } #p01 .cover-text { padding-top: 100px; } #p01 .cover-special-insert { padding-bottom: 350px; } #p01 .cover-divider { font-size: 25px; } } @media screen and (max-width: 350px) { #p01 .cover-headline .cover-line1, #p01 .cover-headline .cover-line2, #p01 .cover-headline .cover-line3 { font-size: 20px; } #p01 .cover-subheadline, #p01 .cover-feature { font-size: 10px; } #p01 .insert-text { font-size: 11px; } } @media only screen and (orientation: landscape) and (max-width: 50px) { #p01 .cover-overlay { height: 100%; } }