.content .title { padding: 0 0 30px; color: #17212f; font-size: 2.750em; font-weight: 600; } .content .subtitle { padding: 0 0 30px; color: #707886; font-size: 1.875em; font-weight: 400; } .content .text { padding: 0 0 30px; color: #444a56; font-size: 1.25em; font-weight: 400; } .content .quote-text { padding: 12px 0 0 14px; color: #213045; font-size: 1.125em; font-weight: 400; font-style: italic; background: url("/img/spark2/common/quotes.svg") no-repeat 0 0; background-size: 14px 12px; } .content .wording { width: 50%; } .content .illustration { width: 50%; } .usecases-banner { position: relative; width: 100%; height: 660px; background-color: #0e203c; box-sizing: border-box; } .usecases-banner .cover { display: block; position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%,-50%); } .usecases-banner.flexible { min-height: 660px; max-height: 1200px; height: 100vh; } .usecases-banner .content { padding-top: 110px; } .usecases-banner .icon { display: block; width: 117px; height: 117px; margin: 0 auto; } .usecases-banner .title { padding: 40px 0 20px; color: #fff; font-size: 3.750em; font-weight: 600; } .usecases-banner .description { width: 800px; padding: 20px 0 100px; margin: 0 auto; color: #fff; font-size: 1.25em; font-weight: 400; line-height: 200%; } .usecases-banner .scroll-down { position: absolute; bottom: 60px; left: 50%; display: block; width: 40px; height: 60px; margin: 0 0 0 -20px; background: url("/img/spark2/common/arrow.svg") no-repeat center center; background-size: 40px 60px; } .su-pitch-together { border-bottom: 1px solid #c6cedc; } .su-pitch-together .wording { width: 500px; padding-top: 120px; } .su-pitch-together .illustration { position: relative; } .su-pitch-together .illustration .screen { display: block; width: 736px; height: auto; margin: 0 0 0 -86px; border-radius: 8px; box-shadow: 0 4px 20px 2px rgba(0, 0, 0, 0.25); } .su-pitch-together .illustration #su-pitch-together-frame { display: block; position: absolute; top: -27px; left: -86px; width: 736px; height: 600px; } .su-discuss-feedback { border-bottom: 1px solid #c6cedc; } .su-discuss-feedback .wording { width: 500px; padding-top: 120px; } .su-discuss-feedback .illustration { position: relative; } .su-discuss-feedback .illustration .screen { display: block; width: 736px; height: auto; border-radius: 8px; box-shadow: 0 4px 20px 2px rgba(0, 0, 0, 0.25); } .su-discuss-feedback .illustration #su-discuss-feedback-frame { display: block; position: absolute; top: 0; left: 0; width: 736px; height: 600px; } .su-get-everyone { border-bottom: 1px solid #c6cedc; } .su-get-everyone .wording { width: 500px; padding-top: 120px; } .su-get-everyone .illustration { position: relative; } .su-get-everyone #su-get-everyone-frame { display: block; width: 736px; height: 600px; margin: 0 0 0 -86px; border-radius: 8px; box-shadow: 2px 3px 18px 2px rgba(0, 0, 0, 0.25); } @media only screen and (max-width: 1440px) { .content .wording.left { margin-left: 20px; } .content .wording.right { margin-right: 20px; } } @media (-webkit-min-device-pixel-ratio: 2) { .usecases-banner.startups .cover { content: url("/img/spark2/desktop/usecases/startups/startups_2x.png"); } .usecases-banner.sales .cover { content: url("/img/spark2/desktop/usecases/sales/sales_2x.png"); } .usecases-banner.executive .cover { content: url("/img/spark2/desktop/usecases/executive/executive_2x.png"); } .usecases-banner.consulting .cover { content: url("/img/spark2/desktop/usecases/consulting/consulting_2x.png"); } .su-pitch-together .illustration .screen { content: url("/img/spark2/desktop/index/animations/shared_draft_composer_2x.png"); } .su-discuss-feedback .illustration .screen { content: url("/img/spark2/desktop/index/animations/discuss_2x.png"); } }