.content .title { padding: 0 0 30px; color: #17212f; font-size: 2.50em; font-weight: 600; } .content .text { padding: 0 0 30px; color: #444a56; font-size: 1.25em; font-weight: 400; } .content .wording { width: 50%; } .content .illustration { width: 50%; } .features-banner { position: relative; width: 100%; height: 240px; background: -webkit-linear-gradient(-85deg, #081544 20%, #2465c3 75%); background: -moz-linear-gradient(-85deg, #081544 20%, #2465c3 75%); background: -o-linear-gradient(-85deg, #081544 20%, #2465c3 75%); background: -ms-linear-gradient(-85deg, #081544 20%, #2465c3 75%); background: linear-gradient(175deg, #081544 20%, #2465c3 75%); box-sizing: border-box; overflow: hidden; } .features-banner .clouds { position: absolute; left: 50%; bottom: 0; display: block; width: 1320px; height: auto; } .features-banner .content { padding-top: 100px; } .features-banner .title { position: relative; padding: 0; color: #fff; font-size: 2.750em; font-weight: 600; } .features-banner .title.with-icon { padding-left: 70px; } .features-banner .title .icon { position: absolute; top: 50%; left: 0; display: block; width: 50px; height: 50px; margin-top: -25px; } .features-container { position: relative; display: inline-block; width: 540px; min-height: 120px; margin: 20px 0 30px; padding-left: 130px; text-align: left; box-sizing: border-box; } .features-container .icon { position: absolute; top: 50%; left: 0; display: block; width: 105px; height: 105px; margin-top: -52px; } .features-container .title { margin: 0; padding: 0 0 10px; color: #444a56; font-size: 1.5em; font-weight: 600; } .features-container .text { margin: 0; padding: 0 0 10px; color: #444a56; font-size: 1.125em; font-weight: 400; line-height: 140%; } .features-container .learn-more { font-size: 1.125em; } .features-container .learn-more:after { top: 11px; right: 0; width: 5px; height: 5px; } .stay-on-top { } .stay-on-top .illustration .device { display: block; width: 888px; height: auto; margin: 40px 0 0 30px; } .stay-on-top .btn { margin-top: 30px; } .upgrade-team { } .upgrade-team .illustration { position: relative; } .upgrade-team .illustration .screen { display: block; width: 736px; height: auto; margin: 27px 0 0 -160px; border-radius: 8px; box-shadow: 0 4px 20px 2px rgba(0, 0, 0, 0.25); } .upgrade-team .illustration #create-email-frame { display: block; position: absolute; top: 0; left: -160px; width: 736px; height: 600px; } .less-time { } .less-time .illustration .devices { display: block; width: 408px; height: auto; margin: 30px auto 0; } .less-time .btn { margin-top: 30px; } .more-features .features-container { width: 500px; margin: 20px 20px 30px; } .more-features .btn { margin-top: 30px; } .a-open-attachment { } .a-open-attachment .wording { padding-top: 200px; } .a-open-attachment .wording .title { max-width: 500px; } .a-open-attachment .wording .text { max-width: 500px; } .a-open-attachment .device { display: inline-block; width: 488px; height: auto; } .a-search-attachment { } .a-search-attachment .wording { padding-top: 100px; } .a-search-attachment .wording .title { max-width: 520px; } .a-search-attachment .wording .text { max-width: 520px; } .a-search-attachment .device { display: inline-block; width: 614px; height: auto; } .a-save-cloud { } .a-save-cloud .wording, .a-save-cloud .illustration { display: inline-block; width: 33%; } .a-save-cloud .wording { padding-top: 70px; } .a-save-cloud .wording .title, .a-save-cloud .wording .text { width: 410px; } .a-save-cloud .screen { display: inline-block; width: 440px; height: auto; } .p-swipes { } .p-swipes .text { max-width: 740px; margin: 0 auto; } .p-widgets-sidebar { } .p-widgets-sidebar .wording, .p-widgets-sidebar .illustration { display: inline-block; width: 33%; } .p-widgets-sidebar .wording { padding-top: 200px; } .p-widgets-sidebar .wording .title, .p-widgets-sidebar .wording .text { width: 410px; } .p-widgets-sidebar .device { display: inline-block; width: 440px; height: auto; } .rf-email-followups { } .rf-email-followups .wording { width: 500px; padding-top: 40px; } .rf-email-followups .illustration { width: 540px; } .rf-email-followups .screen { display: block; width: 540px; height: auto; border-radius: 8px; box-shadow: 0 4px 20px 2px rgba(0, 0, 0, 0.25); } .rf-get-reminders { } .rf-get-reminders .wording { width: 500px; padding-top: 80px; } .rf-get-reminders .screen { display: block; width: 564px; height: auto; } .sl-send-emails { } .sl-send-emails .device { display: block; width: 400px; height: auto; margin: 0 auto; } .sl-send-emails .wording { width: 560px; padding-top: 200px; } .sl-spark-delivers { } .sl-spark-delivers .wording { width: 600px; padding-top: 120px; } .sl-spark-delivers .screen { display: block; width: 540px; height: auto; border-radius: 8px; box-shadow: 0 4px 20px 2px rgba(0, 0, 0, 0.25); } .s-save-attach { } .s-save-attach .wording { padding-top: 250px; } .s-save-attach .wording .title { max-width: 520px; } .s-save-attach .wording .text { max-width: 520px; } .s-save-attach .device { display: inline-block; width: 432px; height: auto; } .s-save-share { } .s-save-share .wording { display: inline-block; width: 30%; } .s-save-share .screen { display: block; margin: 0 auto 30px; width: 360px; height: auto; } .es-sign-off { } .es-sign-off .device { display: block; width: 352px; height: 570px; margin: 0 auto; } .es-sign-off .wording { width: 500px; padding-top: 150px; } .es-create-manage { } .es-create-manage .device { display: block; width: 540px; height: auto; margin: 0 auto; } .es-create-manage .wording { width: 500px; padding-top: 200px; } .si-unified-inbox { } .si-unified-inbox .wording { padding-top: 250px; } .si-unified-inbox .wording .title { max-width: 450px; } .si-unified-inbox .wording .text { max-width: 450px; } .si-unified-inbox .device { display: inline-block; width: 540px; height: auto; } .si-snooze-categorization { } .si-snooze-categorization .wording { padding-top: 150px; } .si-snooze-categorization .wording .title { max-width: 500px; } .si-snooze-categorization .wording .text { max-width: 500px; } .si-snooze-categorization .learn-more { font-size: 1.25em; } .si-snooze-categorization .learn-more:after { top: 11px; right: 0; width: 5px; height: 5px; } .si-snooze-categorization .title:nth-of-type(2) { padding-top: 60px; } .si-snooze-categorization .device { display: inline-block; width: 580px; height: auto; } .si-shake-undo { } .si-shake-undo .wording { padding-top: 180px; } .si-shake-undo .wording .title { max-width: 480px; } .si-shake-undo .wording .text { max-width: 480px; } .si-shake-undo .device { display: inline-block; width: 680px; height: auto; } .sn-smart-notifications { } .sn-smart-notifications .wording { padding-top: 50px; } .sn-smart-notifications .wording .title { max-width: 500px; } .sn-smart-notifications .wording .text { max-width: 500px; } .sn-smart-notifications .screen { display: inline-block; width: 620px; height: auto; } .sn-apple-watch { } .sn-apple-watch .wording { padding-top: 180px; } .sn-apple-watch .device { display: inline-block; width: 420px; height: auto; } .ss-language-search { } .ss-language-search .wording { padding-top: 200px; } .ss-language-search .wording .title { max-width: 500px; } .ss-language-search .wording .text { max-width: 500px; } .ss-language-search .device { display: inline-block; width: 580px; height: auto; } .ss-files-search { } .ss-files-search .screen { display: inline-block; width: 550px; height: auto; } .ss-complex-search { } .ss-complex-search .wording, .ss-complex-search .illustration { display: inline-block; width: 33%; overflow: hidden; } .ss-complex-search .wording { padding-top: 70px; } .ss-complex-search .wording .title, .ss-complex-search .wording .text { width: 410px; } .ss-complex-search .screen { display: inline-block; width: 440px; height: auto; } .es-snooze-emails { } .es-snooze-emails .illustration { width: 660px; } .es-snooze-emails .illustration .devices { display: block; width: 1372px; height: auto; } .es-snooze-emails .wording { padding-top: 250px; width: 500px; } .es-customizable-snoozes { } .es-customizable-snoozes .illustration .device { display: block; width: 442px; height: auto; margin: 0 auto; } .es-customizable-snoozes .wording { padding-top: 150px; width: 500px; } .awesome-features .title { padding-bottom: 60px; } .awesome-features-container { display: inline-block; width: 28%; } .awesome-features-container .icon { display: block; width: 105px; height: 105px; margin: 0 auto 20px; } @media only screen and (max-width: 1440px) { .content .wording { width: calc(50% - 20px); } .content .wording.left { margin-left: 20px; } .content .wording.right { margin-right: 20px; } .features-banner .title { padding: 0 20px; } .features-banner .title.with-icon { padding-left: 90px; } .features-banner .title .icon { left: 20px; } .es-snooze-emails .wording { width: 500px; } .upgrade-team .illustration .screen { margin-left: -240px; } .upgrade-team .illustration #create-email-frame { left: -240px; } .a-save-cloud .wording, .a-save-cloud .illustration { display: inline-block; width: 32%; } .a-save-cloud .screen { width: 100%; } .a-save-cloud .wording .title, .a-save-cloud .wording .text { width: auto; } .s-save-share .wording { width: 30%; } .p-widgets-sidebar .wording, .p-widgets-sidebar .illustration { display: inline-block; width: 32%; } .p-widgets-sidebar .device { width: 100%; } .p-widgets-sidebar .wording .title, .p-widgets-sidebar .wording .text { width: 100%; } } @media (-webkit-min-device-pixel-ratio: 2) { .features-banner .clouds { content: url("/img/spark2/desktop/features/bg_clouds_2x.png"); } .stay-on-top .illustration .device { content: url("/img/spark2/desktop/features/features_smartinbox_2x.png"); } .upgrade-team .illustration .screen { content: url("/img/spark2/desktop/index/animations/shared_draft_composer_2x.png"); } .less-time .illustration .devices { content: url("/img/spark2/desktop/features/features_email_2x.png"); } .a-open-attachment .device { content: url("/img/spark2/desktop/features/attachments/sm-a-img-1@2x.png"); } .a-search-attachment .device { content: url("/img/spark2/desktop/features/attachments/sm-a-img-2@2x.jpg"); } .a-save-cloud .screen { content: url("/img/spark2/desktop/features/attachments/sm-a-img-3@2x.png"); } .p-widgets-sidebar .device { content: url("/img/spark2/desktop/features/personalization/sm-p-img-4@2x.png"); } .rf-email-followups .screen { content: url("/img/spark2/desktop/features/reminders/setreminder_2x.png"); } .rf-get-reminders .screen { content: url("/img/spark2/desktop/features/reminders/inboxreminder_2x.png"); } .sl-send-emails .device { content: url("/img/spark2/desktop/features/send_later/iphone_later_2x.png"); } .sl-spark-delivers .screen { content: url("/img/spark2/desktop/features/send_later/composer_2x.png"); } .s-save-attach .device { content: url("/img/spark2/desktop/features/services/sm-i-img-1@2x.png"); } .s-save-share .screen.screen-1 { content: url("/img/spark2/desktop/features/services/sm-i-img-2@2x.png"); } .s-save-share .screen.screen-2 { content: url("/img/spark2/desktop/features/services/sm-i-img-3@2x.png"); } .s-save-share .screen.screen-3 { content: url("/img/spark2/desktop/features/services/sm-i-img-4@2x.png"); } .es-create-manage .device { content: url("/img/spark2/desktop/features/signatures/sm-img-7@2x.png"); } .si-unified-inbox .device { content: url("/img/spark2/desktop/features/smart_inbox/sm-si-pic-1@2x.jpg"); } .si-snooze-categorization .device { content: url("/img/spark2/desktop/features/smart_inbox/sm-si-pic-2@2x.png"); } .si-shake-undo .device { content: url("/img/spark2/desktop/features/smart_inbox/sm-si-pic-3@2x.jpg"); } .sn-smart-notifications .screen { content: url("/img/spark2/desktop/features/smart_notifications/sm-sn-img-1@2x.png"); } .sn-apple-watch .device { content: url("/img/spark2/desktop/features/smart_notifications/sm-sn-img-3@2x.png"); } .ss-language-search .device { content: url("/img/spark2/desktop/features/smart_search/sm-ss-img-1@2x.png"); } .ss-files-search .screen { content: url("/img/spark2/desktop/features/smart_search/sm-ss-img-2@2x.png"); } .ss-complex-search .screen { content: url("/img/spark2/desktop/features/smart_search/sm-ss-img-3@2x.png"); } .es-snooze-emails .illustration .devices { content: url("/img/spark2/desktop/features/snooze/sm-img-1@2x.png"); } .es-customizable-snoozes .illustration .device { content: url("/img/spark2/desktop/features/snooze/snooze_that_2x.png"); } }