.title-text-wistia-video-center:focus-within .wistia-video-block { border-radius: 6px !important; -moz-box-shadow: var(--common-focus-box-shadow) !important; -webkit-box-shadow: var(--common-focus-box-shadow) !important; -o-box-shadow: var(--common-focus-box-shadow) !important; -ms-box-shadow: var(--common-focus-box-shadow) !important; box-shadow: var(--common-focus-box-shadow) !important; } .title-text-wistia-video-center .container { max-width: 1038px; } .title-text-wistia-video-center .title { text-align: center; margin-bottom: 24px; } .title-text-wistia-video-center .title-desc { max-width: 792px; width: 100%; text-align: center; margin: 0 auto 64px auto; } .title-text-wistia-video-center .wistia-video-block { border-radius: 16px; overflow: hidden; } .w-css-reset-tree button.w-big-play-button { position: relative !important; width: 80px !important; height: 80px !important; border-radius: 50%; } .w-css-reset-tree button.w-big-play-button:before { content: ''; position: absolute; top: 25px; left: 29px; width: 25px; height: 28px; background-image: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/common/icon-grey-play.svg?1655209500"); background-repeat: no-repeat; background-size: contain; z-index: 2; } .w-css-reset-tree button.w-big-play-button div { width: 80px !important; height: 80px !important; background: #F7F7FA !important; box-shadow: 0 0 30px rgba(0, 0, 0, 0.15) !important; border-radius: 50%; } .w-css-reset-tree button.w-big-play-button svg { display: none !important; } .title-text-wistia-video-center img { width: 100%; } @media (max-width: 1199px) { .title-text-wistia-video-center .container { max-width: 100%; } } @media (max-width: 991px) { .title-text-wistia-video-center .title-desc { max-width: 705px; } } @media (max-width: 767px) { .title-text-wistia-video-center .title-desc { max-width: 535px; } } @media (max-width: 575px) { .title-text-wistia-video-center .title-desc { margin-bottom: 40px; } .w-css-reset-tree button.w-big-play-button { width: 40px !important; height: 40px !important; } .w-css-reset-tree button.w-big-play-button:before { top: 13px; left: 15px; width: 13px; height: 14px; } .w-css-reset-tree button.w-big-play-button div { width: 40px !important; height: 40px !important; } } .content-block > .content { max-width: 1024px; } .btn.big { display: inline-block; min-width: 270px; height: 54px; padding: 0 30px; font-size: 1.25rem; font-weight: 500; line-height: 52px; border-radius: 8px; } .hero-screen { margin-bottom: 0; } .banner-video { display: none; } .big-image { display: block; width: 100%; height: auto; margin: 0 auto; } .big-image.empty { border: dashed 1px rgb(151, 151, 151); background-color: rgb(237, 237, 237); } .content-block > .content { padding: 125px 0; } .content-block h2.title { padding-bottom: 27px; color: var(--main-title-color); font-size: 3.175rem; font-weight: bold; line-height: 1.25; } .content-block p.text { color: var(--main-text-color); font-size: 1.375rem; font-weight: 400; line-height: 1.55; } .sketch-vision .content:nth-of-type(1) { display: flex; justify-content: space-around; padding-bottom: 18px; } .sketch-vision .content:nth-of-type(2) { padding-top: 0; } .sketch-vision h2.title { width: 100%; max-width: 309px; padding-left: 33px; line-height: 1.2; } .ja .sketch-vision h2.title { width: 100%; max-width: 435px; padding-left: 0; font-size: 2.3rem; } .de .sketch-vision h2.title { width: 100%; max-width: 355px; font-size: 3rem; } .it .sketch-vision h2.title { max-width: 435px; padding-left: 0; font-size: 2.8rem; } .en .sketch-vision h2.title { background: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/ios/experience/construction/highlight.svg?1578928360") no-repeat; background-position: 0 8px; } .sketch-vision h2.title span { font-size: 4.5rem; } .uk .sketch-vision h2.title { padding-left: 0; } .uk .sketch-vision h2.title span, .ja .sketch-vision h2.title span { font-size: 3rem; } .it .sketch-vision h2.title span { font-size: 3.4rem; } .sketch-vision p.text { width: 532px; } .sketch-vision .big-image { width: 1900px; height: auto; margin-left: calc(50vw - 950px); } .sketch-vision .btn-container { margin-top: -27px; } .take-notes { padding-bottom: 84px; } .take-notes .content { position: relative; height: 100%; padding: 27px 0; } .take-notes .img-block { position: absolute; width: 780px; height: 582px; top: 0; right: 504px; } .take-notes .img-block img { width: 100%; } .take-notes .descr-block { position: relative; width: 488px; height: 540px; padding: 60px 35px; margin: 0 0 0 auto; border-radius: 8px; background-color: #f8f8f8; overflow: hidden; } .take-notes .descr-block .section-subtitle { padding-bottom: 18px; font-size: 2.4rem; font-weight: bold; line-height: 1.25; } .take-notes .descr-block .section-text { font-size: 1.375rem; line-height: 1.55; } .fr .take-notes .descr-block .section-text { font-size: 1.26rem; } .it .take-notes .descr-block .section-text, .ja .take-notes .descr-block .section-text { font-size: 1.35rem; } .take-notes .section-features { display: flex; position: absolute; padding: 0 28px; bottom: 20px; width: 418px; flex-wrap: nowrap; justify-content: space-between; } .take-notes .section-features .text { text-align: center; font-size: 1rem; line-height: 1.25; color: var(--black); } .take-notes .section-features .icon { width: 64px; height: 64px; margin: 0 auto 16px; } .features-block { padding-bottom: 84px; } .collaborate-approve { padding-bottom: 120px; } .collaborate-approve .content { position: relative; height: 100%; padding: 0; } .collaborate-approve .img-block { position: absolute; width: 753px; height: 540px; top: 0; left: 504px; } .collaborate-approve .img-block img { width: 100%; } .collaborate-approve .descr-block { position: relative; width: 488px; height: 540px; padding: 60px 35px; margin: 0 auto 0 0; border-radius: 8px; background-color: #f8f8f8; overflow: hidden; } .collaborate-approve .descr-block .section-subtitle { padding-bottom: 18px; font-size: 2.4rem; font-weight: bold; line-height: 1.25; } .collaborate-approve .descr-block .section-text { font-size: 1.375rem; line-height: 1.55; } .fr .collaborate-approve .descr-block .section-text { font-size: 1.26rem; } .it .collaborate-approve .descr-block .section-text, .ja .collaborate-approve .descr-block .section-text { font-size: 1.35rem; } .collaborate-approve .section-features { display: flex; position: absolute; width: 418px; flex-wrap: nowrap; justify-content: space-between; padding: 0 28px; bottom: 15px; } .collaborate-approve .section-features .text { text-align: center; font-size: 1rem; line-height: 1.25; color: var(--black); max-width: 95px; } .collaborate-approve .section-features .icon { width: 64px; height: 64px; margin: 0 auto 16px; } .collaborate-approve .btn-container { padding-top: 80px; } .customize-flow { padding-bottom: 120px; } .customize-flow .content { padding: 0; } .customize-flow .description { max-width: 830px; width: 100%; margin: 0 auto; padding-bottom: 51px; } .customize-flow .slide { display: block; width: 100%; max-width: 992px; height: auto; margin: 0 auto; } .customize-flow .slide > img { display: block; width: 100%; height: auto; } @media (max-width: 1199px) { .take-notes { padding: 0 20px 120px; } .collaborate-approve { padding: 0 20px 120px; } } @media (max-width: 991px) { .content-block > .content { padding: 0; } .content-block h2.title { padding-bottom: 20px; color: var(--main-title-color); font-size: 1.875rem; font-weight: 700; line-height: 1.25; } .content-block p.text { color: var(--main-text-color); font-size: 1.25rem; font-weight: 400; line-height: 1.5; } .banner-index { display: flex; align-items: center; justify-content: center; height: initial; padding: 60px 0 80px; } .banner-index .content { height: initial; } .banner-index .video-container video { display: block; width: 100%; height: auto; margin: 0 auto; } .banner-index .video-container .mobile-video { display: block; } .banner-index .video-container .desktop-video { display: none; } .banner-index .video-container .video-overlay { display: none; } .banner-index h1.title { padding-top: 26px; font-size: 2.125rem; } .banner-index h2.punch-line { padding-top: 26px; padding-bottom: 32px; font-size: 1.25rem; } .banner-index .watch-video { display: none; } .banner-index .btn-container { padding-top: 20px; padding-bottom: 26px; } .banner-index .appstore-ratings { padding-top: 16px; } .banner-index .social-proof .garland-item.active { opacity: 1; } .banner-index .social-proof .garland-item { position: absolute; opacity: 0; transition: opacity 1s ease-in-out; } .banner-video { position: relative; display: flex; align-items: center; justify-content: center; min-height: 520px; } .banner-video .video-container { position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; } .banner-video .video-container video { display: block; width: 100%; height: auto; } .banner-video .video-container .video-overlay { position: absolute; top: 0; left: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; background: linear-gradient(to top, rgba(16, 26, 51, 0.25), rgba(35, 51, 117, 0.25) 100%); z-index: 2; } .banner-video .watch-video { position: relative; display: inline-block; height: 124px; padding-top: 96px; color: rgb(255, 255, 255); font-size: 1.25rem; line-height: 28px; text-decoration: none; background: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/ios/experience/construction/button-play-small.svg?1565182506") no-repeat center top; background-size: 80px 80px; opacity: 0.8; z-index: 5; } .sketch-vision { padding: 80px 20px; margin: 0 auto; text-align: center; } .sketch-vision .content:nth-of-type(1) { flex-direction: column; max-width: 800px; } .sketch-vision h2.title span { font-size: 3.125rem; } .de .sketch-vision h2.title span { font-size: 3.125rem; } .it .sketch-vision h2.title span { font-size: 3.125rem; } .uk .sketch-vision h2.title span, .ja .sketch-vision h2.title span { font-size: 2.5rem; } .sketch-vision h2.title { margin: 0 auto; padding: 10px 0 20px; font-size: 1.875rem; } .de .sketch-vision h2.title { font-size: 1.875rem; } .it .sketch-vision h2.title { font-size: 1.875rem; } .ja .sketch-vision h2.title { font-size: 1.875rem; } .en .sketch-vision h2.title { background: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/ios/experience/construction/highlight-mobile.svg?1578928360") no-repeat; background-position: 33px 0; } .sketch-vision p.text { width: 100%; } .sketch-vision .btn-container { padding-top: 0; margin: 0; } .take-notes { padding: 0 20px 80px; } .take-notes .content { padding: 27px 0; } .features-block { padding: 0 0 80px; } .collaborate-approve { padding: 0 20px 80px; } .collaborate-approve .btn-container { padding-top: 60px; } .customize-flow { max-width: 800px; margin: 0 auto; padding: 0 20px 80px; } } @media (max-width: 767px) { .sketch-vision { padding: 80px 20px 60px; } .sketch-vision h2.title { width: 280px; } .ja .sketch-vision h2.title { width: 365px; } .sketch-vision .big-image { width: 650px; margin-left: calc(50% - 325px); } .sketch-vision .btn-container { padding-top: 20px; } .take-notes { padding: 0 0 60px; } .take-notes .content { padding: 0; } .take-notes .img-block { position: initial; margin: 0 auto; width: 100%; max-height: initial; height: 100%; right: 0; } .take-notes .img-block img { display: block; max-width: 335px; margin: 0 auto; padding: 0 20px; box-sizing: content-box; } .take-notes .descr-block { width: calc(100% - 20px); max-width: 394px; height: 100%; margin: 0 auto; padding: 40px 20px; background: var(--bottom-menu-backgroud-color); box-shadow: 0 4px 40px 0 rgba(0, 0, 0, 0.25); opacity: 1; transform: translate(0, 0); } .take-notes .descr-block .section-subtitle { padding-bottom: 20px; font-size: 1.875rem; font-weight: 700; line-height: 1.25; } .take-notes .descr-block .section-text { font-size: 1.25rem; line-height: 1.5; } .take-notes .section-features { position: initial; justify-content: space-around; width: initial; margin-top: 50px; padding: 0; } .take-notes .section-features .feature-icon { width: 110px; } .take-notes .section-features .icon { margin: 0 auto; } .take-notes .section-features .text { padding: 16px 0 0; font-size: 0.938rem; line-height: 1.3; } .features-block .big-image { width: 576px; margin-left: calc(50% - 283px); } .collaborate-approve { padding: 0 0 60px; } .collaborate-approve .content { display: flex; flex-direction: column; padding: 0; } .collaborate-approve .img-block { position: initial; margin: 0 auto; width: 100%; max-height: initial; height: 100%; left: 0; order: 1; } .collaborate-approve .img-block img { display: block; max-width: 335px; margin: 0 auto; padding: 0 20px; box-sizing: content-box; } .collaborate-approve .descr-block { width: calc(100% - 20px); max-width: 394px; height: 100%; margin: 0 auto; padding: 40px 20px; background: var(--bottom-menu-backgroud-color); box-shadow: 0 4px 40px 0 rgba(0, 0, 0, 0.25); opacity: 1; transform: translate(0, 0); order: 2; } .collaborate-approve .descr-block .section-subtitle { padding-bottom: 20px; font-size: 1.875rem; font-weight: 700; line-height: 1.25; } .collaborate-approve .descr-block .section-text { font-size: 1.25rem; line-height: 1.5; } .collaborate-approve .section-features { position: initial; justify-content: space-around; width: initial; margin-top: 50px; padding: 0; } .collaborate-approve .section-features .feature-icon { width: 110px; } .collaborate-approve .section-features .icon { margin: 0 auto; } .collaborate-approve .section-features .text { padding: 16px 0 0; font-size: 0.938rem; line-height: 1.3; } .customize-flow { padding: 0 20px 60px; } .customize-flow h2.title { width: 250px; margin: 0 auto; padding: 10px 0 20px; } .customize-flow .description { padding-bottom: 20px; } .customize-flow .slide { max-width: 335px; } } @media (max-width: 520px) { .banner-video .video-container video { width: auto; height: 100%; margin-left: calc(50% - 260px); } } @media (max-width: 414px) { .banner-index .video-container video { width: auto; height: 100%; } .take-notes .section-features { width: calc(100% + 20px); margin-left: -10px; } .take-notes .section-features .icon { width: 55px; } .take-notes .section-features .text { font-size: 0.8125rem; line-height: 1.3; } .collaborate-approve .section-features { width: calc(100% + 20px); margin-left: -10px; } .collaborate-approve .section-features .icon { width: 55px; } .collaborate-approve .section-features .text { font-size: 0.8125rem; line-height: 1.3; } } @media (max-width: 374px) { .take-notes .img-block img { padding: 0 20px; box-sizing: border-box; } .take-notes .section-features { margin-top: 50px; margin-left: -10px; } .collaborate-approve .img-block img { padding: 0 20px; box-sizing: border-box; } .collaborate-approve .section-features { margin-top: 50px; margin-left: -10px; } }