#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; padding-top: 60px;} #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%} #feature-wrapper.fh2 .section {padding-top: 45px;} } @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: 736px){ #feature-wrapper { background-image: url(/home/images/2023/feature-graphic-bg-mobile.jpg); background-position: 50% calc(100% + 200px);} } @media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 440px){ #feature-wrapper { background-image: url(/home/images/2023/feature-graphic-bg-mobile.jpg); background-position: 50% calc(100% + 75px);} } /*#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;} html:lang(fr) #perfect-platform .row .column.column-4:nth-of-type(2) .column-content{padding:40px 30px;} html:lang(it) #perfect-platform .row .column.column-4:nth-of-type(2) .column-content, html:lang(sv) #perfect-platform .row .column.column-4:nth-of-type(2) .column-content{padding:40px 26px;} html:lang(nl) #perfect-platform .row .column.column-4:nth-of-type(2) .column-content{padding:40px 15px;} @media only screen and (max-width: 1260px){ #perfect-platform .row .column.column-4 {flex: calc(50% - 30px); padding: 0px; margin: 15px 15px;} #perfect-platform .row .column.column-4:nth-of-type(odd){display: flex; align-items: end; justify-content: end; background-position: 100% 50%;} #perfect-platform .row .column.column-4:nth-of-type(even){ display: flex; align-items: start; justify-content: start; background-position: 0% 50%;} #perfect-platform .row .column.column-4:nth-of-type(odd) .column-content{margin-right: 0px; margin-left: 0px;} #perfect-platform .row .column.column-4:nth-of-type(even) .column-content{margin-right: 0px; margin-left: 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: 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 .row.sh2 img { max-width: 390px; margin-bottom: 24px; } #connect-apps .d6 img { width: 100%; } @media only screen and (min-width: 1069px) { #connect-apps .row.d6 { margin-bottom: 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 */ #qfoundation .section { padding-bottom: 80px; } #espn .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);} .no-webp .d8 .image.img-customer-story2 { background-image: url(/interactive/videos/espn/claris_espn_homepage-poster.jpg);} .webp .d8 .image.img-customer-story2 { background-image: url(/interactive/videos/espn/claris_espn_homepage-poster.jpg);} #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);} }