/* Feature */ @keyframes fade-in-feature { 100% { transform: translateX(0); opacity: 1 } } @keyframes fade-in-feature-vert { 100% { transform: translateY(0); opacity: 1 } } #feature-wrapper {background: #212a43;} #feature-wrapper .section-width {width: 100%;} #feature-wrapper h1 svg {width: 251px;} #feature-wrapper h2 span {color: #4fe669;} #feature-wrapper p {color: #ffffff;} #feature-wrapper p span {font-weight: 500;} #feature-wrapper .row-flex {align-items: center; justify-content: center; flex-direction: row;} #feature-wrapper .column-flex {width: 50%; max-width: 625px;} #feature-wrapper .column-flex:first-of-type {padding: 0px 70px 0 35px; max-width: 660px;} #feature-wrapper .column-flex:last-of-type {padding: 0px 0px 0px 35px; flex-shrink: 0;} #feature-wrapper .column-flex:last-of-type .column-content {height: 531px; width: 590px; position: relative; transform: translateX(20px); opacity: 0; animation: fade-in-feature 1.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s forwards} #feature-wrapper .column-flex:last-of-type .column-content svg {position: absolute; top: calc(50% - 264px); left: 0px} #feature-wrapper .column-flex:last-of-type .column-content svg#feature-graphic-mobile {display: none;} #prebuilt-connectors {text-align: center; max-width: 800px; margin: 120px auto 0;} #prebuilt-connectors a {margin-top: 10px;} @media only screen and (max-width: 1068px){ #feature-wrapper .section.venti {padding: 80px 0;} #feature-wrapper .column-flex:first-of-type {padding: 0px 0px 0px 35px;} #feature-wrapper .column-flex:last-of-type .column-content {height: 425px; width: 472px;} #feature-wrapper .column-flex:last-of-type .column-content svg {top: calc(50% - 211px);} } @media only screen and (max-width: 735px){ #feature-wrapper .row-flex {flex-direction: column;} #feature-wrapper .column-flex {width: 90%; max-width: 90%; margin: 0 auto;} #feature-wrapper .column-flex:first-of-type {margin-bottom: 60px; padding: 0px;} #feature-wrapper .column-flex:last-of-type {padding: 0px;} #feature-wrapper .column-flex:last-of-type .column-content {width: 100%; height: auto; transform: translateX(0px); transform: translateY(20px); animation: fade-in-feature-vert 1.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.7s forwards} #feature-wrapper .column-flex:last-of-type .column-content svg {position: relative; top: auto; left: auto;} #feature-wrapper .column-flex .column-content {text-align: center;} #feature-wrapper .column-flex:last-of-type .column-content svg#feature-graphic {display: none;} #feature-wrapper .column-flex:last-of-type .column-content svg#feature-graphic-mobile {display: block;} #prebuilt-connectors {max-width:90%;} } /* Connect Apps */ #connect-apps { background: url(/connect/images/img_connectors_background.jpg) 50% 50% no-repeat; background-size: cover; } #connect-apps .section-width-even-more { padding: 80px 0; } #connect-apps .section { padding: 60px; border-radius: 12px; background-color: rgba(255,255,255,.8); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(10px); } @media only screen and (max-width: 735px){#connect-apps .section { padding: 40px 20px; }} @media (-webkit-min-device-pixel-ratio: 2), not all, (min-resolution: 192dpi) {#connect-apps { background-image: url(/connect/images/img_connectors_background_2x.jpg); }} #connect-apps .section .claris-connect-xs {display: none; margin: 0 auto; margin-top: 30px; margin-bottom: 60px; text-align: center;} #connect-apps .section #connectory {text-align: center; margin: 250px auto 0;} /* 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);} #connect-apps .section .flex-container .flex-item.claris-connect {grid-column: 4 / 8; grid-row: 1 / 3; transform: translate(0px, -10px); box-shadow: none; text-align: center;} #connect-apps .section .flex-container .flex-item.claris-connect svg {height: 125%;} #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#connect-xs {max-height: 230px;} #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;} } /* Automation made (really) easy */ #automation .scroll-container {overflow: initial;} #automation .scroll-container .sticky-element {left: 0; top: 0; display: flex; position: sticky; height: 80vh; max-width: 35%; overflow: hidden; align-items: center; justify-content: center; z-index: 2; } #automation .scroll-container .sticky-element .sticky-element-content {display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%);} #automation .scroll-container .sticky-element .sticky-element-content .sticky-element-content-list li {position: relative; padding-left: 32px; margin-top: 4px; opacity: 0; transform: translateY(-20px); transition: all .66s cubic-bezier(0.66,0,0.2,1);} #automation .scroll-container .sticky-element .sticky-element-content .sticky-element-content-list li span.icon-checkcircle::before {color: #208a3d; position: absolute; left: 0; top: 7px;} #automation .scroll-container .sticky-element .sticky-element-content .sticky-element-content-list li.anim {opacity: 1; transform: translateY(0px); transition-delay: 0s;} #automation .scroll-container .sticky-element .sticky-element-content {display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%);} #automation .scroll-container .sticky-element .sticky-element-content .sticky-element-content-list li strong {font-weight: 400;} #automation .scroll-container .scroll {position: relative; z-index: 1; margin-top: -80vh;} #automation .scroll-container .scroll-element {height: 80vh; min-height: 700px; display: flex; align-items: center;} #automation .scroll-container .scroll-element .scroll-element-container {display: flex; align-items: center; position: relative; margin-left: auto; margin-right: auto; width: 100%; padding-top:54px;} #automation .scroll-container .scroll-element .scroll-element-container-content {max-width: 60%; left: 40%; display: block; position: relative; padding-left: 40px;} #automation .scroll-container .scroll-element .scroll-element-container-content .screen {width: 90%; height: auto; object-fit: cover; box-shadow: -1px 1px 10px rgba(0,0,0,0.08); margin-bottom:30px; border-radius: 4px;} #automation .scroll-container .scroll-element .scroll-element-container-content strong {font-weight: 400;} #automation-cta {text-align: center; padding-top: 0px;} @media only screen and (max-width: 1320px) { #automation .section-width-even-more {width: 100%;} #automation .scroll-container .sticky-element {left: 40px;} #automation .scroll-container .scroll-element .scroll-element-container {overflow-x: hidden;} #automation .scroll-container .scroll-element .scroll-element-container-content {left: calc(40% + 40px);} } @media only screen and (max-width:1068px) { #automation .scroll-container .scroll-element {min-height: 500px;} } @media only screen and (max-width: 735px) { #automation .section-width-even-more {width: 90%;} #automation .scroll-container {padding: 80px 0 0;} #automation .scroll-container .sticky-element {left: auto; height: auto; position: relative; top: auto; overflow: auto; max-width: 100%;} #automation .scroll-container .sticky-element .sticky-element-content {position: relative; left: 0; top: 0%; transform: none; margin: 0 auto; text-align: center;} #automation .scroll-container .sticky-element .sticky-element-content .sticky-element-content-list {display: none;} #automation .scroll-container .scroll {margin-top: 40px;} #automation .scroll-container .scroll-element {min-height: 0px; margin-bottom: 80px; height: auto;} #automation .scroll-container .scroll-element:last-of-type {margin-bottom: 0px;} #automation .scroll-container .scroll-element .scroll-element-container {padding: 0;} #automation .scroll-container .scroll-element .scroll-element-container-content {left: 0; max-width: 100%; text-align: center; padding: 10px 0px;} #automation .scroll-container .scroll-element .scroll-element-container-content .screen {width: 100%;} } /* Connect without boundries */ #connect-without-boundaries .image svg {width: 100%;} #connect-without-boundaries .image svg#connect-without-boundries-image {display: block;} #connect-without-boundaries .image svg#connect-without-boundries-image-mobile {display: none;} @media only screen and (max-width: 1068px) { } @media only screen and (max-width: 920px) { #connect-without-boundaries .d6.text-image, #connect-without-boundaries .d6.text-image .row {flex-direction: column;} #connect-without-boundaries .d6 .small-12 {width: 100%;} #connect-without-boundaries .d6 .image-content {margin-top: 90px;} #connect-without-boundaries .image svg#connect-without-boundries-image {display: none;} #connect-without-boundaries .image svg#connect-without-boundries-image-mobile {display: block; max-height: 650px;} .d6.text-image .column-content.text-content {text-align: center;} } /* Big ideas */ #big-ideas .section {padding-bottom: 120px;} #big-ideas .sh2 {margin-bottom: 60px;} #big-ideas .sh2 h2 {margin-bottom: 24px;} #big-ideas-illustration {display: flex; align-content: center; flex-direction: row; justify-content: space-around;} #big-ideas-illustration svg#big-ideas-illustration-image{ width: 100%; z-index: 1; position: absolute; min-width: 1000px} #big-ideas-illustration .step {max-width: 200px; text-align: center; padding-top: 20px; z-index: 2;} #big-ideas-illustration .icon {height: 100px; margin: 0 auto; margin-bottom: 40px; width: 100px; background-size: contain; background-repeat: no-repeat; border-radius: 4px; box-shadow: -1px 1px 10px rgba(0,0,0,0.08)} #big-ideas-illustration .icon.icon-box {background-image: url(/connect/images/connect-app-icons/box.jpg);} #big-ideas-illustration .icon.icon-docusign {background-image: url(/connect/images/connect-app-icons/docusign.jpg);} #big-ideas-illustration .icon.icon-pipedrive {background-image: url(/connect/images/connect-app-icons/pipedrive.jpg);} #big-ideas-illustration .icon.icon-slack {background-image: url(/connect/images/connect-app-icons/slack.jpg);} /*Big ideas Sparkle Animation */ @keyframes sparkle { 0% { opacity:.7 } 100% { opacity: 0 } } #big-ideas-illustration svg#big-ideas-illustration-image.anim path.sparkle{animation:sparkle 2s linear 1s infinite alternate} #big-ideas-illustration svg#big-ideas-illustration-image.anim path.sparkle:nth-of-type(2n){animation:sparkle 1s linear 2s infinite alternate} #big-ideas-illustration svg#big-ideas-illustration-image.anim path.sparkle:nth-of-type(3n){animation:sparkle 3s linear 3s infinite alternate} #big-ideas-illustration svg#big-ideas-illustration-image.anim circle.sparkle{animation:sparkle 1.5s linear 5s infinite alternate} #big-ideas-illustration svg#big-ideas-illustration-image.anim circle.sparkle:nth-of-type(2n){animation:sparkle 4s linear 1s infinite alternate} #big-ideas-illustration svg#big-ideas-illustration-image.anim circle.sparkle:nth-of-type(3n){animation:sparkle 3s linear 3s infinite alternate} @media only screen and (min-width: 1069px) { #big-ideas .sh2 {max-width: 800px} #big-ideas-illustration {padding: 0px 100px;} } @media only screen and (min-width: 1220px) { } @media only screen and (max-width: 735px) { /* #big-ideas .sh2 {margin-bottom: 80px;}*/ #big-ideas-illustration {background: none; flex-direction: column;} #big-ideas-illustration .step {max-width: 420px; margin: 0 auto; width: 80%; text-align: left; display: flex; margin-bottom: 40px;} #big-ideas-illustration .icon {align-self: center; flex-shrink: 0; margin-bottom: 0px; margin-right: 24px; margin-left: 0px;} #big-ideas-illustration p {align-self: center;} #big-ideas-illustration svg#big-ideas-illustration-image {display: none;} } /* Templates */ #templates .section {padding-top: 0px;} #templates .section .column-content {text-align: center;} #templates .slick-track { display: flex !important; } #templates .slick-slide { height: inherit !important; } #templates .template-slider.slick-slider {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;} #templates .template-slide { background-color: #ffffff; text-align: center; margin: 4px; padding: 24px 16px 8px; display: flex; flex: 1 1 auto; flex-direction: column; justify-content: space-between; border-radius: 4px; } #templates .template-slide .template-type { font-size: 12px; color: #208a3d; } #templates .template-slide p.p2 { margin-bottom: 10px; } #templates .connector-icons { padding-top: 24px; padding-bottom: 24px; background: url(/connect/images/template-bg1_2x.jpg) 50% 100% no-repeat; background-size: contain; } #templates .template-slide:nth-child(even) .connector-icons { background-image: url(/connect/images/template-bg2_2x.jpg); background-position: 50% 20%; } #templates .connector-icons .icon { width: 80px; height: 80px; background-size: contain; display: inline-block; margin-left: 8px; margin-right: 8px; border-radius: 4px; box-shadow: -1px 1px 10px rgba(0,0,0,0.08);} #templates .icon.icon-docusign {background-image: url(/connect/images/connect-app-icons/docusign.jpg);} #templates .icon.icon-eventbrite {background-image: url(/connect/images/connect-app-icons/eventbrite.jpg);} #templates .icon.icon-formstack {background-image: url(/connect/images/connect-app-icons/formstack.jpg);} #templates .icon.icon-mailchimp {background-image: url(/connect/images/connect-app-icons/mailchimp.jpg);} #templates .icon.icon-outlook {background-image: url(/connect/images/connect-app-icons/outlook.jpg);} #templates .icon.icon-slack {background-image: url(/connect/images/connect-app-icons/slack.jpg);} #templates .icon.icon-typeform {background-image: url(/connect/images/connect-app-icons/typeform.jpg);} #templates .icon.icon-zendesk {background-image: url(/connect/images/connect-app-icons/zendesk.jpg);} /* Template gallery */ #templates .template-slider.slick-slider .slick-list {order: 1;} #templates .template-slider.slick-slider .slick-arrow {align-self: center; margin: 30px 30px 60px;} #templates .template-slider.slick-slider .slick-arrow.slick-prev{order: 2; top: 0; left:0; right: 0; -webkit-transform: none; -ms-transform: none; transform: none; position: relative;} #templates .template-slider.slick-slider .slick-arrow.slick-next{order: 3; top: 0; left:0; right: 0; -webkit-transform: none; -ms-transform: none; transform: none; position: relative;} #templates .template-slider.slick-slider .slick-arrow.slick-prev::before { background-image: url(/pro/images/icons/chevron-left-circle.svg); opacity: .5;} #templates .template-slider.slick-slider .slick-arrow.slick-next::before { background-image: url(/pro/images/icons/chevron-right-circle.svg); opacity: .5;} #templates .template-slider.slick-slider .slick-arrow.slick-prev:hover:before, #templates .template-slider.slick-slider .slick-arrow.slick-prev:focus:before , #templates .template-slider.slick-slider .slick-arrow.slick-next:hover:before, #templates .template-slider.slick-slider .slick-arrow.slick-next:focus:before { opacity: .7; } #templates .btn.full-green-btn {margin-bottom: 0px;} #templates .template-slider.slick-slider .slick-dots {position: relative; order: 2; margin-top: 30px; bottom: 0;} @media only screen and (max-width: 735px) { #templates { flex-direction: column; } #templates .column:first-child {text-align: center; margin-bottom: 24px;} } /* Power features of the Platform */ #power-features {background: #114022; background: linear-gradient(140deg, #263d4e 0%, #2a5f67 35%, #73b47b 70%, #bfbd04 100%); background-size: 110%; background-position: center;} #power-features h2 {margin-bottom: 80px; text-align: center;} #power-features .row-flex {justify-content: center; flex-wrap: wrap;} #power-features .row-flex .column {--margin: 12.5px; width: calc(25% - (var(--margin) * 2)); background-color: #232731; border-radius: 10px; padding: 25px 15px; margin: 0px var(--margin) 40px; margin-top: 0px; box-shadow: -1px 1px 10px rgba(0,0,0,0.2); transform: translateY(20px); opacity: 0;} #power-features .row-flex .column .text {justify-content: flex-start; text-align: center;} #power-features .row-flex .column.centered-icons .icon {margin: 0 auto; margin-bottom: 25px;} #power-features .row-flex .column .icon {width: 60px; height: 43px; background-position: center; background-repeat: no-repeat; background-size: contain;} #power-features .row-flex .column .icon.icon-automation {background-image: url(/connect/images/power-features/icon_automation_2x.png);} #power-features .row-flex .column .icon.icon-code {background-image: url(/connect/images/power-features/icon_code_2x.png);} #power-features .row-flex .column .icon.icon-collaboration {background-image: url(/connect/images/power-features/icon_collaboration_2x.png);} #power-features .row-flex .column .icon.icon-compliance {background-image: url(/connect/images/power-features/icon_compliance_2x.png);} #power-features .row-flex .column .icon.icon-connect {background-image: url(/connect/images/power-features/icon_connect_2x.png);} #power-features .row-flex .column .icon.icon-security {background-image: url(/connect/images/power-features/icon_security_2x.png);} #power-features .row-flex .column .icon.icon-transformation {background-image: url(/connect/images/power-features/icon_transformation_2x.png);} #power-features .row-flex .column.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;} #power-features #see-more-features { text-align: center; } #power-features #see-more-features a.white-btn:hover {border-color: #fff;} @media only screen and (max-width: 1068px) { #power-features .row-flex .column {--margin: 12.5px; width: calc(50% - (var(--margin) * 2))} } @media only screen and (max-width: 440px) { #power-features .row-flex .column {--margin: 12.5px; width: calc(100% - (var(--margin) * 2))} } /* cert */ #cert .row-flex { background-image: url(/connect/images/certification-steps-lines.svg); background-position: 0% 0%; background-size: contain; background-repeat: no-repeat; justify-content: space-between; } #cert .row-flex .column-4:nth-child(1) .circles .icon-community { background: url(/connect/images/icon_community.png) 50% 50% no-repeat; width: 198px; height: 198px; margin: 0 auto; background-size: 150px 150px; } #cert .row-flex .column-4:nth-child(2) .circles .icon-academy { background: url(/connect/images/icon_academy.png) 50% 50% no-repeat; width: 198px; height: 198px; margin: 0 auto; background-size: 150px 150px; } #cert .row-flex .column-4:nth-child(3) .circles .icon-register { background: url(/connect/images/icon_register.png) 50% 50% no-repeat; width: 198px; height: 198px; margin: 0 auto; background-size: 150px 150px; } #cert .row-flex .column-4:nth-child(4) .circles .icon-medal { background: url(/connect/images/icon_medal.png) 50% 50% no-repeat; width: 198px; height: 198px; margin: 0 auto; background-size: 150px 150px; } #cert .row-flex .column-4 .circles { border-radius: 50%; background-color: #2c2c2e; width: 198px; height: 198px; margin: 0 auto; position: relative; margin-top: 30px; } #cert .row-flex .column-4 .num { position: absolute; top: -25px; margin: 0 auto; border-radius:50%; width: 50px; height: 50px; left: 0; right: 0; text-align:center; } #cert .row-flex .column-4:nth-child(1) .num { background-color: #1e67b2; } #cert .row-flex .column-4:nth-child(2) .num { background-color: #2891b4; } #cert .row-flex .column-4:nth-child(3) .num { background-color: #44bb80; } #cert .row-flex .column-4:nth-child(4) .num { background-color: #4eba5a; } #cert .row-flex .column-4 .column-content > p { text-align: center; padding: 0 24px; margin-top: 32px; } #cert .row-flex .column-4 p span.bold, #cert .row-flex .column-4 p a.bold { font-weight: 500; } #cert .row-flex .column-4 .circles p.num { line-height:50px; color: #ffffff; font-weight: 500; font-size: 30px; text-align: center; } #cert .row:last-child { text-align: center; } @media only screen and (min-width: 1069px) { #cert .row.sh2 { width: 1000px; } #cert .row-flex .column-4 { max-width: 300px; margin-top: 19px; } } @media only screen and (max-width: 1068px) { #cert .row-flex { background-image: none; } #cert .row-flex .column-4 { margin: 0 auto 24px; } } #cert .row-flex .column-4:nth-child(1) .circles { filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.1)); } /* ebooks */ #ebooks .row .column:first-child {padding-right: 40px;} #ebooks .ebook-container {width: 100%; position: relative; display: flex; align-items: center; margin: 16px 0} #ebooks .ebook-container .ebook-cover {min-width: 200px; height: 150px; margin-right: 24px; background-color: #f2f2f7; background-position: center; background-repeat: no-repeat; background-size: cover; box-shadow: -1px 1px 10px rgba(0,0,0,0.08);} #ebooks .ebook-container .ebook-title {margin-bottom: 10px;} /* ebooks - d9 */ #ebooks .d6 .ebook-container {width: 100%; position: relative; display: flex; align-items: center; margin: 16px 0} #ebooks .d6 .ebook-container .ebook-cover {min-width: 377px;width: 387px !important;height: 282px; margin-right: 0px;background-position: center; background-repeat: no-repeat; background-size: cover;} #ebooks .d6 {padding:0 0 80px;} /* ebooks images*/ #ebooks .ebook-container .ebook-cover {background-image: url(/connect/images/ebooks/img_ebook_connect_en.jpg);} #ebooks .ebook-container .ebook-cover.slack {background-image: url(/connect/images/ebooks/img_ebook_slack_en.jpg);} #ebooks .ebook-container .ebook-cover.docusign {background-image: url(/connect/images/ebooks/img_ebook_docusign_en.jpg);} #ebooks.de .ebook-container .ebook-cover {background-image: url(/connect/images/ebooks/img_ebook_connect_de.jpg);} #ebooks.de .ebook-container .ebook-cover.slack {background-image: url(/connect/images/ebooks/img_ebook_slack_de.jpg);} #ebooks.de .ebook-container .ebook-cover.docusign {background-image: url(/connect/images/ebooks/img_ebook_docusign_de.jpg);} #ebooks.es .ebook-container .ebook-cover {background-image: url(/connect/images/ebooks/img_ebook_connect_es.jpg);} #ebooks.es .ebook-container .ebook-cover.slack {background-image: url(/connect/images/ebooks/img_ebook_slack_es.jpg);} #ebooks.es .ebook-container .ebook-cover.docusign {background-image: url(/connect/images/ebooks/img_ebook_docusign_es.jpg);} #ebooks.fr .ebook-container .ebook-cover {background-image: url(/connect/images/ebooks/img_ebook_connect_fr.jpg);} #ebooks.fr .ebook-container .ebook-cover.slack {background-image: url(/connect/images/ebooks/img_ebook_slack_fr.jpg);} #ebooks.fr .ebook-container .ebook-cover.docusign {background-image: url(/connect/images/ebooks/img_ebook_docusign_fr.jpg);} #ebooks.it .ebook-container .ebook-cover {background-image: url(/connect/images/ebooks/img_ebook_connect_it.jpg);} #ebooks.it .ebook-container .ebook-cover.slack {background-image: url(/connect/images/ebooks/img_ebook_slack_it.jpg);} #ebooks.it .ebook-container .ebook-cover.docusign {background-image: url(/connect/images/ebooks/img_ebook_docusign_it.jpg);} #ebooks.ja .ebook-container .ebook-cover {background-image: url(/connect/images/ebooks/img_ebook_connect_ja.jpg);} #ebooks.ja .ebook-container .ebook-cover.slack {background-image: url(/connect/images/ebooks/img_ebook_slack_ja.jpg);} #ebooks.ja .ebook-container .ebook-cover.docusign {background-image: url(/connect/images/ebooks/img_ebook_docusign_ja.jpg);} #ebooks.ko .ebook-container .ebook-cover {background-image: url(/connect/images/ebooks/img_ebook_connect_ko.jpg);} #ebooks.ko .ebook-container .ebook-cover.slack {background-image: url(/connect/images/ebooks/img_ebook_slack_ko.jpg);} #ebooks.ko .ebook-container .ebook-cover.docusign {background-image: url(/connect/images/ebooks/img_ebook_docusign_ko.jpg);} #ebooks.nl .ebook-container .ebook-cover {background-image: url(/connect/images/ebooks/img_ebook_connect_nl.jpg);} #ebooks.nl .ebook-container .ebook-cover.slack {background-image: url(/connect/images/ebooks/img_ebook_slack_nl.jpg);} #ebooks.nl .ebook-container .ebook-cover.docusign {background-image: url(/connect/images/ebooks/img_ebook_docusign_nl.jpg);} #ebooks.pt .ebook-container .ebook-cover {background-image: url(/connect/images/ebooks/img_ebook_connect_pt.jpg);} #ebooks.pt .ebook-container .ebook-cover.slack {background-image: url(/connect/images/ebooks/img_ebook_slack_pt.jpg);} #ebooks.pt .ebook-container .ebook-cover.docusign {background-image: url(/connect/images/ebooks/img_ebook_docusign_pt.jpg);} #ebooks.sv .ebook-container .ebook-cover {background-image: url(/connect/images/ebooks/img_ebook_connect_sv.jpg);} #ebooks.sv .ebook-container .ebook-cover.slack {background-image: url(/connect/images/ebooks/img_ebook_slack_sv.jpg);} #ebooks.sv .ebook-container .ebook-cover.docusign {background-image: url(/connect/images/ebooks/img_ebook_docusign_sv.jpg);} @media (-webkit-min-device-pixel-ratio: 2), not all, (min-resolution: 192dpi) { #ebooks .ebook-container .ebook-cover {background-image: url(/connect/images/ebooks/img_ebook_connect_en_2x.jpg);} #ebooks .ebook-container .ebook-cover.slack {background-image: url(/connect/images/ebooks/img_ebook_slack_en_2x.jpg);} #ebooks .ebook-container .ebook-cover.docusign {background-image: url(/connect/images/ebooks/img_ebook_docusign_en_2x.jpg);} #ebooks.de .ebook-container .ebook-cover {background-image: url(/connect/images/ebooks/img_ebook_connect_de_2x.jpg);} #ebooks.de .ebook-container .ebook-cover.slack {background-image: url(/connect/images/ebooks/img_ebook_slack_de_2x.jpg);} #ebooks.de .ebook-container .ebook-cover.docusign {background-image: url(/connect/images/ebooks/img_ebook_docusign_de_2x.jpg);} #ebooks.es .ebook-container .ebook-cover {background-image: url(/connect/images/ebooks/img_ebook_connect_es_2x.jpg);} #ebooks.es .ebook-container .ebook-cover.slack {background-image: url(/connect/images/ebooks/img_ebook_slack_es_2x.jpg);} #ebooks.es .ebook-container .ebook-cover.docusign {background-image: url(/connect/images/ebooks/img_ebook_docusign_es_2x.jpg);} #ebooks.fr .ebook-container .ebook-cover {background-image: url(/connect/images/ebooks/img_ebook_connect_fr_2x.jpg);} #ebooks.fr .ebook-container .ebook-cover.slack {background-image: url(/connect/images/ebooks/img_ebook_slack_fr_2x.jpg);} #ebooks.fr .ebook-container .ebook-cover.docusign {background-image: url(/connect/images/ebooks/img_ebook_docusign_fr_2x.jpg);} #ebooks.it .ebook-container .ebook-cover {background-image: url(/connect/images/ebooks/img_ebook_connect_it_2x.jpg);} #ebooks.it .ebook-container .ebook-cover.slack {background-image: url(/connect/images/ebooks/img_ebook_slack_it_2x.jpg);} #ebooks.it .ebook-container .ebook-cover.docusign {background-image: url(/connect/images/ebooks/img_ebook_docusign_it_2x.jpg);} #ebooks.ja .ebook-container .ebook-cover {background-image: url(/connect/images/ebooks/img_ebook_connect_ja_2x.jpg);} #ebooks.ja .ebook-container .ebook-cover.slack {background-image: url(/connect/images/ebooks/img_ebook_slack_ja_2x.jpg);} #ebooks.ja .ebook-container .ebook-cover.docusign {background-image: url(/connect/images/ebooks/img_ebook_docusign_ja_2x.jpg);} #ebooks.ko .ebook-container .ebook-cover {background-image: url(/connect/images/ebooks/img_ebook_connect_ko_2x.jpg);} #ebooks.ko .ebook-container .ebook-cover.slack {background-image: url(/connect/images/ebooks/img_ebook_slack_ko_2x.jpg);} #ebooks.ko .ebook-container .ebook-cover.docusign {background-image: url(/connect/images/ebooks/img_ebook_docusign_ko_2x.jpg);} #ebooks.nl .ebook-container .ebook-cover {background-image: url(/connect/images/ebooks/img_ebook_connect_nl_2x.jpg);} #ebooks.nl .ebook-container .ebook-cover.slack {background-image: url(/connect/images/ebooks/img_ebook_slack_nl_2x.jpg);} #ebooks.nl .ebook-container .ebook-cover.docusign {background-image: url(/connect/images/ebooks/img_ebook_docusign_nl_2x.jpg);} #ebooks.pt .ebook-container .ebook-cover {background-image: url(/connect/images/ebooks/img_ebook_connect_pt_2x.jpg);} #ebooks.pt .ebook-container .ebook-cover.slack {background-image: url(/connect/images/ebooks/img_ebook_slack_pt_2x.jpg);} #ebooks.pt .ebook-container .ebook-cover.docusign {background-image: url(/connect/images/ebooks/img_ebook_docusign_pt_2x.jpg);} #ebooks.sv .ebook-container .ebook-cover {background-image: url(/connect/images/ebooks/img_ebook_connect_sv_2x.jpg);} #ebooks.sv .ebook-container .ebook-cover.slack {background-image: url(/connect/images/ebooks/img_ebook_slack_sv_2x.jpg);} #ebooks.sv .ebook-container .ebook-cover.docusign {background-image: url(/connect/images/ebooks/img_ebook_docusign_sv_2x.jpg);} } @media only screen and (max-width: 900px) { #ebooks .row.flex-align-center {flex-direction: column;} #ebooks .row.flex-align-center .column {width: 100%; max-width: 735px;} #ebooks .row .column:first-child {padding-right: 0px;} #ebooks .row .column:first-child .column-content {text-align: center; margin-bottom: 40px;} #ebooks .accent-before:before {left: auto;} #ebooks .ebook-container {margin: 24px 0} #ebooks .ebook-container .ebook-cover {min-width: 220px; height: 140px;} } @media only screen and (max-width: 735px) { #ebooks .accent-before:before {display: block;} #ebooks .ebook-container {flex-direction: column; margin-bottom: 32px;} #ebooks .ebook-container .ebook-cover {margin-bottom: 24px; margin-right: 0px;} #ebooks .ebook-container .ebook-text {text-align: center;} } /* Blog */ #blog {background-color: #272b36;} #blog .sh2 h2, #blog .sh2 p {color: #fff;} #blog .d11 .d11-text { justify-content: flex-start; } #blog .d11 .column.column-3 .img { height: 200px; } #blog .d11 .column .img.img-blog1 { background-image: url(/connect/images/img_blog_tasty-fresh-food.jpg);} #blog .d11 .column .img.img-blog2 { background-image: url(/connect/images/img_blog_soar.jpg);} #blog .d11 .column .img.img-blog3 { background-image: url(/connect/images/img_blog_temple-beth-israel.jpg);} html:lang(ja) #blog .d11 .column .img.img-blog3 {background-image: url(https://www.claris.com/cms/blog/images/cms/2975.jpg);} @media only screen and (max-width: 950px) { #blog .d11.row-flex { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; } .d11 .column.column-3 .img.img-blog1 { background-position: 25% 10%; } } /* Help when you need it */ #help.d10 .column-flex:first-child { background-image: url(/connect/images/help-graphic.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; } #help.d10 .column-content .slight {margin-bottom: 8px;} #help.d10 .row-flex .column-flex { position: relative; padding: 120px 0px; } #help.d10 .accent-before-extra-thick:before {position: absolute; top:80px;} #help h3.h6 a {color:#2d9141;} /* EXTRA LARGE VIEWPORT ONLY */ @media only screen and (min-width: 2000px) { #help.d10 .column-flex:first-child { background-position: center top -120px; } } @media only screen and (max-width: 1068px) { #help.d10 .column-flex:first-child {background-size: cover; background-position: 40%; min-height: 600px;} #connectory {margin: 120px auto 0;} } @media only screen and (max-width: 877px) { #connectory {margin: 40px auto 0;} } /* SMALL SCREENS */ @media only screen and (max-width: 735px) { #help.d10 .row-flex .column-flex {padding: 80px 0px;} } .d9 p:first-child { margin-bottom: 8px; } /* RETINA */ @media (-webkit-min-device-pixel-ratio: 2), not all, (min-resolution: 192dpi) { #help.d10 .column-flex:first-child { background-image: url(/connect/images/help-graphic_2x.jpg); } } /* Get Started */ #get-started {background: #263d4e; background: linear-gradient(90deg, #263d4e 0%, #2a5f67 40%, #73b47b 100%); background-size: 110%; background-position: center;} #get-started .cta-button { display: flex; justify-content: center; padding-top: 8px; }