#feature-wrapper { background-size: contain; background-position:50% 100%; background-image: url(/home/images/2023/feature-graphic-bg.jpg); } #feature-wrapper.fh2 .section {text-align: center;} #feature-wrapper.fh2 .section-width {max-width: 900px; width: 90%;} #feature-wrapper.fh2 .section figure.feature-screen {background-image: url(/home/images/2023/feature-graphic.jpg); border-radius: 4px; background-position: center center; background-repeat: no-repeat; margin: 0 auto 40px; background-size: contain; width: 100%; aspect-ratio: 1001 / 563; height: auto;} #feature-wrapper.fh2 .section p {font-size: 1.2rem; line-height: 1.5em; font-weight: 300; font-family: "SF Pro Text",Helvetica,Arial,sans-serif;} @keyframes fade-in-feature {100% {transform: translateY(0); opacity:1}} #feature-wrapper.fh2 .section h1, #feature-wrapper.fh2 .section h2, #feature-wrapper.fh2 .section p, #feature-wrapper.fh2 .section .white-btn {transform: translateY(50px);opacity:0} #feature-wrapper.fh2 .section figure {transform: translateY(20px); opacity: 0;} #feature-wrapper.fh2 .section h2 {animation:fade-in-feature 1.3s cubic-bezier(0.215,0.61,0.355,1) .7s forwards} #feature-wrapper.fh2 .section p {animation:fade-in-feature 1.3s cubic-bezier(0.215,0.61,0.355,1) 1s forwards} #feature-wrapper.fh2 .section figure {animation:fade-in-feature 1.3s cubic-bezier(0.215,0.61,0.355,1) 1.5s forwards} #feature-wrapper.fh2 .section a {margin-top:0px;} @media only screen and (max-width: 1068px){#feature-wrapper.fh2 .section-width {width: 90%}} @media only screen and (max-width: 735px) {#feature-wrapper.fh2 .section p {padding: 0;}} @media only screen and (min-width: 1069px) { #feature-wrapper.fh2 .section p { margin-bottom: 16px; } } @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2),(min-resolution: 192dpi){ #feature-wrapper.fh2 .section figure.feature-screen {background-image: url(/home/images/2023/feature-graphic_2x.jpg);} #feature-wrapper { background-image: url(/home/images/2023/feature-graphic-bg_2x.jpg); } } @media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1069px){ #feature-wrapper { background-image: url(/home/images/2023/feature-graphic-bg-mobile.jpg); } } /*#cs-quote.dark { background: url(/home/images/2023/customer-story-bg.jpg) no-repeat 50% 50%; background-size: cover; }*/ #cs-quote.dark { background-color: #272b36; } #cs-quote blockquote { text-align: center; font-size: 30px; line-height: 38px; font-weight: 600; margin-bottom: 20px; color: #fff; quotes: "“" "”" "‘" "’"; font-family: "SF Pro Display",Helvetica,Arial,sans-serif; } #cs-quote blockquote:lang(fr){quotes:"«" "»";} #cs-quote blockquote:lang(de){quotes: "„" "“";} #cs-quote blockquote:lang(nl){quotes: "'" "'";} #cs-quote blockquote:lang(ja){quotes: "「" "」";} #cs-quote blockquote:before { content: open-quote; } #cs-quote blockquote:after { content: close-quote; } #cs-quote figcaption { color: #ffffff; text-align: center; margin-bottom: 40px; line-height: 20px; bottom: 0px; } #cs-quote figcaption span { display:block; } #cs-quote .slick-track { display:flex; } #cs-quote .slick-initialized .slick-slide { display: flex; justify-content: space-between; flex-direction: column; height: inherit; } #cs-quote .slick-dots li.slick-active button:before { color: #fff; } /* MEDIUM SCREENS (CASCADE TO LOWER SCREENS) */ @media only screen and (max-width: 1068px) { #cs-quote { margin-top: 0em; padding-top: 0em; } #cs-quote blockquote { margin-bottom: 16px;} #cs-quote figcaption { margin-bottom: 24px;} } @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2),(min-resolution: 192dpi){ /* #cs-quote.dark { background-image: url(/home/images/2023/customer-story-bg_2x.jpg); }*/ } /* Perfect Platform */ #perfect-platform .sh2 {width: 100%; max-width: 1120px; padding: 0px 50px;} #perfect-platform .row.dark { background-color: #ffffff; } #perfect-platform .row:nth-child(2) {position: relative; display: flex; justify-content: center; flex-wrap: wrap; } #perfect-platform .row .column.column-4 {opacity: 0; transform: translateY(20px); padding: 0px 16px;} #perfect-platform .row .column.column-4:first-of-type {background: url(/home/images/homepage_circle-1.png) 50% 50% no-repeat; background-size: contain; } #perfect-platform .row .column.column-4:nth-of-type(2){background: url(/home/images/homepage_circle-2.png) 50% 50% no-repeat; background-size: contain; } #perfect-platform .row .column.column-4:nth-of-type(3){ background: url(/home/images/homepage_circle-3.png) 50% 50% no-repeat; background-size: contain; } #perfect-platform .row .column.column-4:last-of-type { background: url(/home/images/homepage_circle-4.png) 50% 50% no-repeat; background-size: contain; } #perfect-platform .row .column.column-4 .column-content {height:250px; width: 250px; padding: 40px; border-radius: 50%;} #perfect-platform .row .column.column-4.anim {opacity:1; transform:translateY(0); transition-property: opacity, transform; transition-duration: 0.66s; transition-timing-function: cubic-bezier(0.66,0,0.2,1) 0s;} #perfect-platform .row .column.column-4.anim:nth-of-type(1) {transition-delay: 0s;} #perfect-platform .row .column.column-4.anim:nth-of-type(2) {transition-delay: 0.33s;} #perfect-platform .row .column.column-4.anim:nth-of-type(3) {transition-delay: 0.66s;} #perfect-platform .row .column.column-4.anim:nth-of-type(4) {transition-delay: 0.99s;} #perfect-platform .row .column.column-4 h3, #perfect-platform .row .column.column-4 p {text-align: center;} #perfect-platform .row .column.column-4 h3 {margin-bottom: 8px;} @media only screen and (max-width: 1111px){ #perfect-platform .row .column.column-4 {flex: 50%; padding: 0px;} #perfect-platform .row .column.column-4:nth-of-type(odd) .column-content{margin-right: auto; margin-left: auto; } #perfect-platform .row .column.column-4:nth-of-type(even) .column-content{margin-right: auto; margin-left: auto;} #perfect-platform .row .column.column-4:nth-of-type(3), #perfect-platform .row .column.column-4:last-of-type { top: 30px; } #perfect-platform .row .column.column-4.anim:nth-of-type(1) {transition-delay: 0s;} #perfect-platform .row .column.column-4.anim:nth-of-type(2) {transition-delay: 0s;} #perfect-platform .row .column.column-4.anim:nth-of-type(3) {transition-delay: 0.33s;} #perfect-platform .row .column.column-4.anim:nth-of-type(4) {transition-delay: 0.33s;} } @media only screen and (max-width: 735px) { #perfect-platform .sh2 {padding:0px; margin-bottom: 60px;} #perfect-platform .row .column.column-4 {flex: 100%; margin-bottom: 24px; } #perfect-platform .row .column.column-4:first-of-type, #perfect-platform .row .column.column-4:nth-of-type(2), #perfect-platform .row .column.column-4:nth-of-type(3), #perfect-platform .row .column.column-4:last-of-type { background: none; } #perfect-platform .row .column.column-4 .column-content {border-radius: 4px; width: 100%; height: auto;} #perfect-platform .row .column.column-4:nth-of-type(odd) .column-content{margin: auto;} #perfect-platform .row .column.column-4:nth-of-type(even) .column-content{margin: auto;} #perfect-platform .row .column.column-4:first-of-type {right:0px} #perfect-platform .row .column.column-4:nth-of-type(2){right:0px} #perfect-platform .row .column.column-4:nth-of-type(3){left:0px; top:0px;} #perfect-platform .row .column.column-4:last-of-type {left:0px; top:0px;} #perfect-platform .row .column.column-4.anim:nth-of-type(1) {transition-delay: 0s;} #perfect-platform .row .column.column-4.anim:nth-of-type(2) {transition-delay: 0.33s;} #perfect-platform .row .column.column-4.anim:nth-of-type(3) {transition-delay: 0.66s;} #perfect-platform .row .column.column-4.anim:nth-of-type(4) {transition-delay: 0.99s;} #perfect-platform .row .column.column-4 .column-content {background-color: rgba(44,44,46,0.9); box-shadow: -1px 1px 10px rgb(0 0 0 / 10%);} } /* FileMaker */ #filemaker { background-color: #336bf6; background-image: linear-gradient(to bottom right, #08bbe1, #336bf6); } #filemaker { text-align:center; } #filemaker p { color: #fff; } #filemaker img { max-width: 390px; margin-bottom: 24px; } #filemaker .white-btn { background-color: #fff; color:#3263c9; } #filemaker .white-btn:hover, #filemaker .white-btn:active { background-color: transparent; color:#fff; } #filemaker .section figure.feature-screen {background-image: url(/home/images/2023/filemaker.png); background-position: center center; background-repeat: no-repeat; margin: 0 auto 40px; background-size: contain; width: 100%; aspect-ratio: 776 / 482; height: auto; transform: translateY(20px); opacity: 0;} #filemaker .section figure.feature-screen.anim { opacity: 1; transform: translateY(0); transition-property: opacity, transform; transition-duration: 0.66s; transition-timing-function: cubic-bezier(0.66, 0, 0.2, 1) 0s;} @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2),(min-resolution: 192dpi){ #filemaker .section figure.feature-screen {background-image: url(/home/images/2023/filemaker_2x.png);} } /* Connect */ /*#connect-apps { background-color: #336bf6; background-image: linear-gradient(to bottom right, #2a5f67, #62a77d, #aebe41); }*/ #connect-apps .section .claris-connect-xs {display: none; margin: 0 auto; margin-top: 30px; margin-bottom: 60px; text-align: center;} #connect-apps .row:last-child { padding: 60px; } #connect-apps img { max-width: 390px; margin-bottom: 24px; } #connect-apps .cta-buttons { display: flex; justify-content: center; } #connect-apps .cta-buttons .btn { margin: 0px 16px; } /* Connect Apps - Icon Grid */ #connect-apps .section .flex-container {display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 100px)); grid-template-rows: 100px 100px 100px 100px; grid-gap: 8px; justify-content: center;} #connect-apps .section .flex-container .flex-item {background-size: 100px 100px; background-repeat: no-repeat; background-position: center; border-radius: 4px; box-shadow: -1px 1px 10px rgba(0,0,0,0.08); transform: translateY(50px); opacity: 0;} #connect-apps .section .flex-container .flex-item.anim {opacity: 1; transform: translateY(20px); transition-property: opacity, transform; transition-duration: 0.66s; transition-timing-function: cubic-bezier(0.66, 0, 0.2, 1) 0s;} #connect-apps .section .flex-container .flex-item.claris-connect {grid-column: 4 / 8; grid-row: 1 / 3; transform: translateX(-10px); box-shadow: none; text-align: center;} #connect-apps .section .flex-container .flex-item.claris-connect.anim {transform: translate(-10px, -50px);} #connect-apps .section .flex-container .flex-item.claris-connect svg {height: 100%;} #connect-apps .section .flex-container .flex-item.splinter {grid-column: 7; grid-row: 2 / 3; background-repeat: no-repeat; background-position: right;} #connect-apps .section .flex-container .flex-item.icon-active {background-image: url(/connect/images/connect-app-icons/active.jpg);} #connect-apps .section .flex-container .flex-item.icon-asana {background-image: url(/connect/images/connect-app-icons/asana.jpg);} #connect-apps .section .flex-container .flex-item.icon-box {background-image: url(/connect/images/connect-app-icons/box.jpg);} #connect-apps .section .flex-container .flex-item.icon-clearbit {background-image: url(/connect/images/connect-app-icons/clearbit.jpg);} #connect-apps .section .flex-container .flex-item.icon-docparser {background-image: url(/connect/images/connect-app-icons/docparser.jpg);} #connect-apps .section .flex-container .flex-item.icon-docusign {background-image: url(/connect/images/connect-app-icons/docusign.jpg);} #connect-apps .section .flex-container .flex-item.icon-dropbox {background-image: url(/connect/images/connect-app-icons/dropbox.jpg);} #connect-apps .section .flex-container .flex-item.icon-eventbrite {background-image: url(/connect/images/connect-app-icons/eventbrite.jpg);} #connect-apps .section .flex-container .flex-item.icon-filemaker {background-image: url(/connect/images/connect-app-icons/filemaker.jpg);} #connect-apps .section .flex-container .flex-item.icon-formstack {background-image: url(/connect/images/connect-app-icons/formstack.jpg);} #connect-apps .section .flex-container .flex-item.icon-freshdesk {background-image: url(/connect/images/connect-app-icons/freshdesk.jpg);} #connect-apps .section .flex-container .flex-item.icon-fullcontact {background-image: url(/connect/images/connect-app-icons/fullcontact.jpg);} #connect-apps .section .flex-container .flex-item.icon-google-cal {background-image: url(/connect/images/connect-app-icons/google-cal.jpg);} #connect-apps .section .flex-container .flex-item.icon-google-drive {background-image: url(/connect/images/connect-app-icons/google-drive.jpg);} #connect-apps .section .flex-container .flex-item.icon-google-maps {background-image: url(/connect/images/connect-app-icons/google-maps.jpg);} #connect-apps .section .flex-container .flex-item.icon-google-sheets {background-image: url(/connect/images/connect-app-icons/google-sheets.jpg);} #connect-apps .section .flex-container .flex-item.icon-google-translate {background-image: url(/connect/images/connect-app-icons/google-translate.jpg);} #connect-apps .section .flex-container .flex-item.icon-hubspot {background-image: url(/connect/images/connect-app-icons/hubspot.jpg);} #connect-apps .section .flex-container .flex-item.icon-jira {background-image: url(/connect/images/connect-app-icons/jira.jpg);} #connect-apps .section .flex-container .flex-item.icon-mailchimp {background-image: url(/connect/images/connect-app-icons/mailchimp.jpg);} #connect-apps .section .flex-container .flex-item.icon-mailgun {background-image: url(/connect/images/connect-app-icons/mailgun.jpg);} #connect-apps .section .flex-container .flex-item.icon-mailparser {background-image: url(/connect/images/connect-app-icons/mailparser.jpg);} #connect-apps .section .flex-container .flex-item.icon-outlook {background-image: url(/connect/images/connect-app-icons/outlook.jpg);} #connect-apps .section .flex-container .flex-item.icon-particle {background-image: url(/connect/images/connect-app-icons/particle.jpg);} #connect-apps .section .flex-container .flex-item.icon-pipedrive {background-image: url(/connect/images/connect-app-icons/pipedrive.jpg);} #connect-apps .section .flex-container .flex-item.icon-pubnub {background-image: url(/connect/images/connect-app-icons/pubnub.jpg);} #connect-apps .section .flex-container .flex-item.icon-salesforce {background-image: url(/connect/images/connect-app-icons/salesforce.jpg);} #connect-apps .section .flex-container .flex-item.icon-sendgrid {background-image: url(/connect/images/connect-app-icons/sendgrid.jpg);} #connect-apps .section .flex-container .flex-item.icon-shopify {background-image: url(/connect/images/connect-app-icons/shopify.jpg);} #connect-apps .section .flex-container .flex-item.icon-slack {background-image: url(/connect/images/connect-app-icons/slack.jpg);} #connect-apps .section .flex-container .flex-item.icon-stripe {background-image: url(/connect/images/connect-app-icons/stripe.jpg);} #connect-apps .section .flex-container .flex-item.icon-trello {background-image: url(/connect/images/connect-app-icons/trello.jpg);} #connect-apps .section .flex-container .flex-item.icon-twilio {background-image: url(/connect/images/connect-app-icons/twilio.jpg);} #connect-apps .section .flex-container .flex-item.icon-twitter {background-image: url(/connect/images/connect-app-icons/twitter.jpg);} #connect-apps .section .flex-container .flex-item.icon-typeform {background-image: url(/connect/images/connect-app-icons/typeform.jpg);} #connect-apps .section .flex-container .flex-item.icon-wufoo {background-image: url(/connect/images/connect-app-icons/wufoo.jpg);} #connect-apps .section .flex-container .flex-item.icon-zendesk {background-image: url(/connect/images/connect-app-icons/zendesk.jpg);} @media only screen and (min-width: 1321px) {#connect-apps .section .flex-container .flex-item.claris-connect {grid-column: 4 / 8;}} @media only screen and (max-width: 1320px) {#connect-apps .section .flex-container .flex-item.claris-connect {grid-column: 3 / 8; background-size: contain;}} @media only screen and (max-width: 1205px) { #connect-apps .section .flex-container {grid-template-columns: repeat(auto-fit, minmax(90px, 90px)); grid-template-rows: 90px 90px 90px 90px;} #connect-apps .section .flex-container .flex-item {background-size: 90px 90px; background-repeat: no-repeat;} #connect-apps .section .flex-container .flex-item.claris-connect {background-size: contain;} } @media only screen and (max-width: 1105px) { #connect-apps .section .flex-container .flex-item.claris-connect {grid-column: 3 / 7;} #connect-apps .section .flex-container .flex-item.splinter {grid-column: 7;} } @media only screen and (max-width: 1000px) { #connect-apps .section .flex-container .flex-item.claris-connect {display: none;} #connect-apps .section .claris-connect-xs {display: block;} #connect-apps .section .claris-connect-xs svg#claris-connect-icon {height: 200px;} #connect-apps .section .flex-container .flex-item.splinter {display: none;} #connect-apps .section .flex-container {grid-template-columns: repeat(auto-fit, minmax(60px, 90px)); grid-gap: 8px; margin: 0 auto; margin-top: 18px; grid-template-rows: 90px 90px 90px 90px;} #connect-apps .section .flex-container .flex-item {transform: translateY(0px) !important;} #connect-apps .section #connectory {margin-top: 60px;} } @media only screen and (max-width: 440px) { #connect-apps .section .flex-container {grid-template-columns: repeat(auto-fit, minmax(60px, 60px)); grid-template-rows: 60px 60px 60px 60px 60px;} #connect-apps .section .flex-container .flex-item {background-size: 60px 60px;} } /* Partner */ #partner .section-width { width: 1200px; } #partner .large-6 { padding: 48px; } #partner .large-3 { text-align: center; } #partner .img-partner { width: 100%; height: 100%; } @media only screen and (max-width: 1200px){ #partner .section-width { width: 90%; } } /* SMALL SCREENS */ @media only screen and (max-width: 735px) { #partner .large-3 { width: 80%; margin: 0 auto; } } /* Customer Stories */ #spikeball .section, #qfoundation .section { padding-bottom: 0px; } .no-webp .d8 .image.img-customer-story1 { background-image: url(/interactive/videos/q-foundation/claris_q-foundation_poster.jpg);} .webp .d8 .image.img-customer-story1 { background-image: url(/interactive/videos/q-foundation/webp/claris_q-foundation_poster.webp);} .no-webp .d8 .image.img-customer-story2 { background-image: url(/interactive/videos/shock-therapy/claris_shock-therapy_homepage-poster.jpg);} .webp .d8 .image.img-customer-story2 { background-image: url(/interactive/videos/shock-therapy/webp/claris_shock-therapy_homepage-poster.webp);} #cs-link { text-align: center; margin-top: 48px; } /* Companies */ #trusted-by-worlds-greatest.dark { background-color: #272b36; } #trusted-by-worlds-greatest.dark .sh2 p { color: #fff; } .d9 p:last-child { margin-bottom: 8px; font-family: "SF Pro Text",Helvetica,Arial,sans-serif; } /* XL TO LARGE SCREENS */ @media only screen and (min-width: 1069px) { #trusted-by-worlds-greatest .sh2 p { margin-bottom: 60px; } } /* MEDIUM SCREENS (CASCADE TO LOWER SCREENS) */ @media only screen and (max-width: 1068px) { #trusted-by-worlds-greatest .sh2 p { margin-bottom: 32px; } } /* MEDIUM SCREENS (SPECIFIC) */ @media only screen and (min-width: 736px) and (max-width:1068px) { } /* RETINA */ @media (-webkit-min-device-pixel-ratio: 2), not all, (min-resolution: 192dpi){ .no-webp .d8 .image.img-customer-story1 { background-image: url(/interactive/videos/q-foundation/claris_q-foundation_poster_2x.jpg);} .webp .d8 .image.img-customer-story1 { background-image: url(/interactive/videos/q-foundation/webp/claris_q-foundation_poster_2x.webp);} }