#hero-section-wrapper { background: rgb(245,245,245); background: linear-gradient(270deg, rgba(245,245,245,1) 40%, rgba(13,14,16,1) 40%); } #hero-section-wrapper .hero-content-wrapper { position: relative; display: flex; transition: 0.2s linear all; } #hero-section-wrapper .hero-image { background: var(--pg-color-ink); display: flex; align-items: center; flex: 1; } #hero-section-wrapper .hero-image img { margin-left: -80px; } #hero-section-wrapper .hero-content { position: relative; padding: 200px 120px 155px 0; z-index: 1; flex: 1; } #hero-section-wrapper .eyebrow-text { font-size: 21px; font-weight: 500; color: var(--pg-color-surface); margin-bottom: 30px; text-transform: uppercase; } #hero-section-wrapper h1 { color: var(--pg-color-surface); font-weight: 500; text-transform: none; font-size: 101px; } @media (max-width: 992px) { #hero-section-wrapper h1 { font-size: 67px; } } @media (max-width: 767px) { #hero-section-wrapper h1 { font-size: 48px; } } @media (max-width: 420px) { #hero-section-wrapper h1 { font-size: 36px; } } #hero-section-wrapper h1 p { margin: 0; } #hero-section-wrapper strong { color: var(--pg-orange); } #hero-section-wrapper .subtitle { font-size: 28px; color: var(--pg-color-surface); margin-bottom: 0; line-height: 36px; font-weight: 400; } #hero-section-wrapper hr { max-width: 700px; height: 2px; background-color: var(--pg-orange); border: 0; padding: 0; margin: 20px 0; opacity: 1; } #hero-section-wrapper .button-row { display: inline-block; padding: 0 45px 45px 0; } #roadmap-section-wrapper { padding: 100px 0; } #roadmap-section-wrapper h2.title { text-align: center; color: var(--pg-color-surface); font-weight: 500; text-transform: none; font-size: 67px; } @media (max-width: 992px) { #roadmap-section-wrapper h2.title { font-size: 48px; } } @media (max-width: 767px) { #roadmap-section-wrapper h2.title { font-size: 36px; } } @media (max-width: 420px) { #roadmap-section-wrapper h2.title { font-size: 32px; } } #roadmap-section-wrapper #tabs .tab { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--pg-orange); text-align: center; background-color: var(--pg-color-ink); margin-right: 96px; cursor: pointer; position: relative; z-index: 5; transition: 0.1s linear all; } #roadmap-section-wrapper #tabs .tab:last-of-type { margin-right: 0; } #roadmap-section-wrapper #tabs .tab:hover { background-color: var(--pg-orange); color: var(--pg-color-surface); font-weight: 500; } #roadmap-section-wrapper #tabs .tab:hover p { } #roadmap-section-wrapper #tabs .whiteborder { background-color: var(--pg-orange); color: var(--pg-color-surface); font-weight: 500; } #roadmap-section-wrapper #tabs .tab p { position: absolute; left: 50%; bottom: -80px; font-size: 10px; color: var(--pg-color-muted); transform: translateX(-50%); transition: 0.1s linear all; } #roadmap-section-wrapper #tabs .tab-content-wrapper { position: relative; } #roadmap-section-wrapper #tabs .tab-content-holder { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: 640px; margin: 0 auto; padding: 0; } #roadmap-section-wrapper #tabs .tab-content-holder h3 { color: var(--pg-orange); font-size: 36px; font-weight: 500; margin-bottom: 0; padding: 0 100px 0 0; text-transform: none; } @media (max-width: 992px) { #roadmap-section-wrapper #tabs .tab-content-holder h3 { font-size: 32px; } } @media (max-width: 767px) { #roadmap-section-wrapper #tabs .tab-content-holder h3 { font-size: 28px; } } @media (max-width: 420px) { #roadmap-section-wrapper #tabs .tab-content-holder h3 { font-size: 24px; } } #roadmap-section-wrapper #tabs .tab-content-holder p, #roadmap-section-wrapper #tabs .tab-content-holder li { font-size: 21px; font-weight: 300; color: var(--pg-color-surface); margin-bottom: 12px; } #roadmap-section-wrapper #tabs .tab-content-holder a.cta { font-size: 14px; font-weight: 500; text-decoration: none; color: var(--pg-color-ink); } #roadmap-section-wrapper #tabs .hide { height: 0; visibility: hidden; overflow: hidden; opacity: 0; } #roadmap-section-wrapper #tabs .show { height: auto; visibility: visible; overflow: unset; opacity: 1; transition: 0.3s linear all; } #roadmap-section-wrapper #tabs .tabContent img { display: block; margin: 0 auto; height: 100%; } #roadmap-section-wrapper .tabs-content-navigation { display: flex; position: relative; width: 100%; justify-content: center; } #roadmap-section-wrapper .tabs-content-navigation:after { content: ''; position: absolute; width: 100%; padding-bottom: 3px; top: 50%; transform: translateY(-50%); border-bottom: 3px dotted var(--pg-orange); } #our-culture-section-wrapper { padding: 100px 0; } #our-culture-section-wrapper .content-holder { display: flex; align-items: flex-start; justify-content: space-between; } #our-culture-section-wrapper .content-holder .black-box { max-width: 500px; padding: 48px 32px; background-color: var(--pg-color-ink); border-radius: 20px; } #our-culture-section-wrapper .content-holder .black-box h3 { font-weight: 500; color: var(--pg-orange); margin-bottom: 30px; text-transform: none; font-size: 36px; } @media (max-width: 992px) { #our-culture-section-wrapper .content-holder .black-box h3 { font-size: 32px; } } @media (max-width: 767px) { #our-culture-section-wrapper .content-holder .black-box h3 { font-size: 28px; } } @media (max-width: 420px) { #our-culture-section-wrapper .content-holder .black-box h3 { font-size: 24px; } } #our-culture-section-wrapper .content-holder .black-box p { color: var(--pg-color-gray-light); font-size: 21px; font-weight: 300; line-height: 160%; margin-bottom: 30px; } #our-culture-section-wrapper .content-holder .white-box { max-width: 560px; padding: 48px 32px; margin-right: 120px; background-color: var(--pg-color-ink); border-radius: 20px; font-size: 28px; } #our-culture-section-wrapper .content-holder .white-box h2 { color: var(--pg-color-surface); margin-bottom: 30px; font-weight: 500; text-transform: none; font-size: 67px; } @media (max-width: 992px) { #our-culture-section-wrapper .content-holder .white-box h2 { font-size: 48px; } } @media (max-width: 767px) { #our-culture-section-wrapper .content-holder .white-box h2 { font-size: 36px; } } @media (max-width: 420px) { #our-culture-section-wrapper .content-holder .white-box h2 { font-size: 32px; } } #our-culture-section-wrapper .content-holder .white-box p.subtitle { font-size: 24px; font-weight: 300; color: var(--pg-color-surface); margin-bottom: 0; } #our-culture-section-wrapper .content-holder .white-box p strong { font-weight: 400; color: var(--pg-orange); } #text-left-image-right-wrapper { padding: 100px 0; } .text-left-image-right-content .text-box { position: relative; height: 100%; } .text-left-image-right-content .text-box-content .eyebrow-text { font-size: 21px; font-weight: 400; color: var(--pg-color-surface); margin-bottom: 10px; text-transform: uppercase; } .image-left-text-right-content .text-box-content.big { padding: 30px 80px 30px 30px; } .image-left-text-right-content .text-box-content.big h2 { max-width: 330px; font-weight: 500; text-transform: none; font-size: 67px; } @media (max-width: 992px) { .image-left-text-right-content .text-box-content.big h2 { font-size: 48px; } } @media (max-width: 767px) { .image-left-text-right-content .text-box-content.big h2 { font-size: 36px; } } @media (max-width: 420px) { .image-left-text-right-content .text-box-content.big h2 { font-size: 32px; } } .text-left-image-right-content .text-box-content h2 { color: var(--pg-color-surface); margin: 0 0 30px 0; font-weight: 500; text-transform: none; font-size: 67px; } @media (max-width: 992px) { .text-left-image-right-content .text-box-content h2 { font-size: 48px; } } @media (max-width: 767px) { .text-left-image-right-content .text-box-content h2 { font-size: 36px; } } @media (max-width: 420px) { .text-left-image-right-content .text-box-content h2 { font-size: 32px; } } .text-left-image-right-content .text-box-content h2 strong { color: var(--pg-orange); font-weight: 500; text-transform: none; } .text-left-image-right-content .text-box-content p { font-size: 21px; font-weight: 300; color: var(--pg-color-surface); margin: 0 0 30px 0; } .text-left-image-right-content .text-box-content a.cta { font-size: 14px; font-weight: 500; text-decoration: none; color: var(--pg-color-ink); } .text-left-image-right-content .text-box-content li { font-size: 21px; font-weight: 300; color: var(--pg-color-surface); margin: 0 0 15px 0; } .text-left-image-right-content .text-box-content li a { font-weight: 300; text-decoration: none; color: var(--pg-orange); } #sustainability-section-wrapper { padding: 120px 0; background-size: cover; } #sustainability-section-wrapper .content-part { max-width: 480px; } #sustainability-section-wrapper .content-part h2 { margin-bottom: 30px; font-weight: 500; text-transform: none; font-size: 67px; } @media (max-width: 992px) { #sustainability-section-wrapper .content-part h2 { font-size: 48px; } } @media (max-width: 767px) { #sustainability-section-wrapper .content-part h2 { font-size: 36px; } } @media (max-width: 420px) { #sustainability-section-wrapper .content-part h2 { font-size: 32px; } } #sustainability-section-wrapper .content-part p.subtitle { font-size: 24px; font-weight: 300; margin-bottom: 30px; } #sustainability-section-wrapper .content-part p strong { font-weight: 400; } #sustainability-section-wrapper .content-part a.cta { font-size: 14px; font-weight: 500; text-decoration: none; color: var(--pg-color-ink); } #stats-section-wrapper { padding: 140px 0; } #stats-section-wrapper .stat-image-content { width: 50px; margin-right: 20px; } #stats-section-wrapper .stat-image-content img { display: block; width: 100%; height: auto; } #stats-section-wrapper p { line-height: 140%; } #stats-section-wrapper p.value { font-size: 52px; font-weight: 700; margin: 0 0 8px 0; color: var(--pg-orange); line-height: 80%; } #stats-section-wrapper p.what { font-size: 21px; font-weight: 700; margin: 0; color: var(--pg-color-surface); } #stats-section-wrapper p.per { font-size: 16px; font-weight: 400; margin: 0; color: var(--pg-color-surface); } #office-locations-section-wrapper { padding: 120px 0; background-color: var(--pg-color-ink); } #office-locations-section-wrapper h2 { margin-bottom: 50px; font-weight: 500; text-transform: none; font-size: 67px; } @media (max-width: 992px) { #office-locations-section-wrapper h2 { font-size: 48px; } } @media (max-width: 767px) { #office-locations-section-wrapper h2 { font-size: 36px; } } @media (max-width: 420px) { #office-locations-section-wrapper h2 { font-size: 32px; } } #office-locations-section-wrapper .location-box-wrapper { position: relative; max-width: 433px; max-height: 260px; overflow: hidden; background-color: var(--pg-color-ink); margin: 0 auto 40px; } #office-locations-section-wrapper .location-box-wrapper:hover:after { position: absolute; content: ''; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(16,16,16,.3); z-index: 1; } #office-locations-section-wrapper .location-box-wrapper img { width: 100%; height: auto; } #office-locations-section-wrapper .row:first-of-type .location-box-wrapper { margin-bottom: 70px; } #office-locations-section-wrapper .location-content { position: absolute; left: 30px; bottom: -120px; width: 400px; transition: 0.3s linear all; } #office-locations-section-wrapper .location-box-wrapper:hover .location-content { position: absolute; z-index: 2; bottom: 20px; margin: 0 auto; } #office-locations-section-wrapper .location-content h3 { font-size: 36px; font-weight: 500; margin-bottom: 0; text-transform: none; } @media (max-width: 992px) { #office-locations-section-wrapper .location-content h3 { font-size: 32px; } } @media (max-width: 767px) { #office-locations-section-wrapper .location-content h3 { font-size: 28px; } } @media (max-width: 420px) { #office-locations-section-wrapper .location-content h3 { font-size: 24px; } } #office-locations-section-wrapper .location-content p { font-size: 24px; font-weight: 300; margin-bottom: 0; } @media only screen and (max-width: 1440px) { #roadmap-section-wrapper #tabs .tab { margin-right: 80px; } } @media only screen and (max-width: 1280px) { #text-left-image-right-wrapper { background: var(--pg-color-ink) !important; } #roadmap-section-wrapper #tabs .tab { margin-right: 64px; } } @media only screen and (max-width: 992px) { #hero-section-wrapper { background: var(--pg-color-ink); } #hero-section-wrapper .hero-content { padding: 100px 0; } #hero-section-wrapper .hero-content-wrapper { display: flex; } #hero-section-wrapper .hero-image { display: none; } .tabs-content-navigation-wrapper { display: none; } #roadmap-section-wrapper { padding: 60px 0; } #roadmap-section-wrapper #tabs .tab-content-holder { position: relative; transform: none; left: auto; top: auto; padding: 48px; background-color: var(--pg-color-ink); border-radius: 25px; } #roadmap-section-wrapper #tabs .tab-content-holder h3 { padding: 0; font-weight: 500; text-transform: none; font-size: 36px; } @media (max-width: 992px) { #roadmap-section-wrapper #tabs .tab-content-holder h3 { font-size: 32px; } } @media (max-width: 767px) { #roadmap-section-wrapper #tabs .tab-content-holder h3 { font-size: 28px; } } @media (max-width: 420px) { #roadmap-section-wrapper #tabs .tab-content-holder h3 { font-size: 24px; } } #roadmap-section-wrapper #tabs .tab-content-wrapper .shape { display: none; } #text-left-image-right-wrapper { padding: 60px 0 20px 0; } #our-culture-section-wrapper { padding: 60px 0; background: none; } #our-culture-section-wrapper .content-holder { display: block; } #our-culture-section-wrapper .content-holder .white-box { padding: 0 0 0 0; margin: 0 0 48px 0; max-width: unset; } #our-culture-section-wrapper .content-holder .black-box { padding: 24px; max-width: unset; } #sustainability-section-wrapper { background-size: cover !important; } #stats-section-wrapper { padding: 100px 0; } #office-locations-section-wrapper { padding: 60px 0 20px 0; } } @media only screen and (max-width: 768px) { #office-locations-section-wrapper h2 { text-align: center; font-weight: 500; text-transform: none; font-size: 67px; } @media (max-width: 992px) { #office-locations-section-wrapper h2 { font-size: 48px; } } @media (max-width: 767px) { #office-locations-section-wrapper h2 { font-size: 36px; } } @media (max-width: 420px) { #office-locations-section-wrapper h2 { font-size: 32px; } } } @media only screen and (max-width: 440px) { }