/* About Us */ .fh3 { background-color: #fff; position: relative; padding: 0px; } .fh3 .feature-image { background-image: url(/company/images/feature_graphic.jpg?v=01312020); background-position: 90% 0%; background-repeat: no-repeat; background-size: cover; display: block; width: 100%; height: 720px; margin-bottom: 280px; top: 0px; } .fh3 #feature-area {position: absolute; left: 50%; margin-left: -500px; bottom: 0px;} .fh3 .row {background-color: #333; padding: 96px;} .fh3 h1, .fh3 .h1 {color: #fff; font-weight: 300; font-size: 24px; line-height: 32px;} .fh3 h2, .fh3 .h2 {color: #fff; font-size: 48px; line-height: 52px; margin-bottom: 24px;} .fh3 p, .fh3 a {font-size: 20px; line-height: 28px; margin-bottom: 0px;} .fh3 p {color: #fff; } .fh3 a {color: #34c759; display: inline-block; margin-top: 40px;} .fh3 a:hover {color: #4fe669;} .fh3 #feature-area .section {display: block; padding: 0px; } #other-offices {text-align: center;} /* MEDIUM SCREENS */ @media only screen and (max-width: 1068px) { .fh3 {flex-direction: column;} .fh3 .feature-image {height:560px; margin-bottom: 0px;} .fh3 #feature-area { width: 80%; position: relative; left: 0px; margin-top: -80px; display: block; margin-left: auto; } .fh3 .row {padding: 80px;} .fh3 h2, .fh3 .h2 {font-size: 40px; line-height: 44px;} } /* SMALL SCREENS */ @media only screen and (max-width: 735px) { .fh3 #feature-area { width: 100%; margin-top: 0px; } .fh3 .feature-image {height: 300px; background-position: 80% 0%;} .fh3 .row {padding: 64px 48px;} .fh3 h2, .fh3 .h2 {font-size: 32px; line-height: 36px;} } /* Brand values */ #brand-values {text-align: center;} #brand-values .section.venti {padding-top: 75px;} #brand-values h2 {font-weight: 300;} #brand-values h2 span {color:#34c759; font-weight: 600;} #brand-values .wrap:after {color:#333; font-weight:300; vertical-align: text-top; -webkit-animation: 1.3s blink step-end infinite;-moz-animation: 1.3s blink step-end infinite; -ms-animation: 1.3s blink step-end infinite; -o-animation: 1.3s blink step-end infinite; animation: 1.3s blink step-end infinite;} @keyframes blink {from {color: #333;} 50% {color: transparent;}} @-webkit-keyframes blink {from {color: #333;} 50% {color: transparent;}} /* Claris Statement */ #claris-statement { text-align: center; } #claris-statement .apple-logo { background:url(/company/images/apple-logo.svg); background-repeat: no-repeat; background-position: center center; background-size: 70px 171px; width: 70px; height: 171px; margin: 0 auto; } #claris-statement .apple-logo span { position: absolute; clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(0px 0px 99.9% 99.9%); clip-path: inset(0px 0px 99.9% 99.9%); overflow: hidden; height: 1px; width: 1px; padding: 0; border: 0; } /* Leadership team */ #leadership-team .row-flex { flex-wrap: wrap; justify-content: center;} #leadership-team .nobr {white-space: nowrap;} #leadership-team .column-content {padding: 0px 10px;} #leadership-team .column-content.first {padding-left: 0px;} #leadership-team .column-content.last {padding-right: 0px;} #leadership-team input[type="checkbox"] {display: none;} #leadership-team input[type="checkbox"] + label {display: block; cursor: pointer; position: relative;} #leadership-team input[type="checkbox"]:checked ~ .leadership-info .leadership-desc {height: auto; max-height: 99em; opacity: 1;} #leadership-team .leadership-photo {width: 205px; background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; height: 205px; margin: 40px auto 0; transition: all 0.2s ease-in-out;} #leadership-team .leadership-name {color: #111; font-weight: 500; margin: 18px 0 0; padding:0px 8px;} #leadership-team .leadership-title {color: #858585; padding:0px 8px; margin-bottom: 18px;display: block;min-height: 60px;} #leadership-team .leadership-desc {max-height: 0; overflow: hidden; opacity: 0; padding:0px 8px; transition: opacity .5s ease-in-out, max-height .5s ease-in-out; text-align: left;} #leadership-team #ann-devens.leadership-photo {background-image: url(/company/images/leadership-team/2023/ann-devens_2x.jpg)} #leadership-team #lucy-chen.leadership-photo {background-image: url(/company/images/leadership-team/2023/lucy-chen_2x.jpg)} #leadership-team #ryan-mccann.leadership-photo {background-image: url(/company/images/leadership-team/2023/ryan-mccann_2x.jpg)} #leadership-team #peter-nelson.leadership-photo {background-image: url(/company/images/leadership-team/2023/peter-nelson_2x.jpg)} #leadership-team #giuliano-iacobelli.leadership-photo {background-image: url(/company/images/leadership-team/2023/giuliano-iacobelli_2x.jpg)} #leadership-team #jehaan-mathew.leadership-photo {background-image: url(/company/images/leadership-team/2025/jehaan-mathew_2x.jpg)} /* #leadership-team #angie-wong.leadership-photo {background-image: url(/company/images/leadership-team/2023/angie-wong_2x.jpg)} */ /* #leadership-team #tsering-alleyne.leadership-photo {background-image: url(/company/images/leadership-team/2023/tsering-alleyne_2x.jpg)} */ @media only screen and (min-width: 1069px) { #leadership-team .column-4 { width: 25%;} #leadership-team .column-3 { width: 33.3%;} #leadership-team .column-2 { width: 50%;} } @media only screen and (max-width: 1068px) { #leadership-team .leadership-photo {margin-left: 0px;} } /* MEDIUM SCREENS (SPECIFIC) */ @media only screen and (max-width:1068px) { /* #leadership-team .leadership-photo {width: 160px; height: 160px; }*/ } @media only screen and (max-width: 735px) { #leadership-team .column-content {padding: 0px;display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; margin-bottom: 32px; justify-content: center;} #leadership-team .column-4, #leadership-team .column-3 {width: 100%;} #leadership-team .leadership-photo {width: 140px; height: 140px; margin-top:0px; margin-right: 16px;} #leadership-team .leadership-info {max-width: 60%;} #leadership-team .leadership-desc {margin-top: 16px; margin-bottom: 0px;} #leadership-team .leadership-title {min-height: 30px; margin-bottom: 0;} #leadership-team .leadership-name {margin: 43px 0 0;} } @media only screen and (max-width: 490px) { #leadership-team .leadership-info {max-width: 100%; text-align: center;} } /* Jobs */ #jobs-at-claris .d8 .image {background-image: url(/company/images/img_join-us.jpg); background-position: bottom;} @media only screen and (max-width: 735px) { #jobs-at-claris .section {padding-top: 0px;} } /* Offices */ #claris-offices .sh1 {margin-bottom: 80px;} #claris-offices .section-width {width: 100%;} #claris-offices .location {margin-bottom: 80px; display: flex; flex-direction: column;} #claris-offices .row-flex:last-child .location {margin-bottom: 0px; } #claris-offices .location-image {background: url(/site/images/img_placeholder.jpg); height: 260px; background-size: cover; background-position: center;} #claris-offices .north-america {width: 1200px; margin: 0 auto; margin-bottom: 120px;} #claris-offices .north-america .location-image {background-image: url(/company/images/locations/office_north-america.jpg); background-position: right; height: 400px;width: 100%;} #claris-offices .north-america h3:before {content: "Headquarters"; display: block; font-size: 12px; text-transform: uppercase; color: #eda411; line-height: 18px;} #claris-offices .location-info {align-self: flex-end; margin-top: 40px; width: 500px;} #claris-offices .column-flex:nth-of-type(2n) .location-info {align-self: flex-start;} #claris-offices .location-info .location-details {padding: 0 40px;} #claris-offices .japan .location-image {background-image: url(/company/images/locations/office_japan.jpg);} #claris-offices .australia .location-image {background-image: url(/company/images/locations/office_australia.jpg);} #claris-offices .united-kingdom .location-image {background-image: url(/company/images/locations/office_uk.jpg);} #claris-offices .china .location-image {background-image: url(/company/images/locations/office_china.jpg);} @media only screen and (max-width: 1200px) { #claris-offices .north-america {width: 100%; margin-bottom: 80px;} } @media only screen and (max-width: 1068px) { #claris-offices .location-image {height: 180px;} #claris-offices .location-info {width: 100%;} #claris-offices .north-america .text-col { -webkit-order: 2; -webkit-box-ordinal-group: 2; -ms-flex-order: 2; order: 2; padding: 40px 40px 0px 40px; } #claris-offices .north-america .image-col { -webkit-order: 1; -webkit-box-ordinal-group: 1; -ms-flex-order: 1; order: 1; } } @media only screen and (max-width: 735px) { #claris-offices .row-flex:last-child .column-flex:first-child .location {margin-bottom:80px;} #claris-offices .north-america .location-image {height: 180px;} } /* RETINA */ @media (-webkit-min-device-pixel-ratio: 2), not all, (min-resolution: 192dpi) { .fh3 .feature-image {background-image: url(/company/images/feature_graphic_2x.jpg?v=01312020);} #jobs-at-claris .d8 .image {background-image: url(/company/images/img_join-us_2x.jpg); } #claris-offices .north-america .location-image {background-image: url(/company/images/locations/office_north-america_2x.jpg);} #claris-offices .japan .location-image {background-image: url(/company/images/locations/office_japan_2x.jpg);} #claris-offices .australia .location-image {background-image: url(/company/images/locations/office_australia_2x.jpg);} #claris-offices .united-kingdom .location-image {background-image: url(/company/images/locations/office_uk_2x.jpg);} #claris-offices .china .location-image {background-image: url(/company/images/locations/office_china_2x.jpg);} }