.video-block { max-width: 736px; } .video-block video { width: 100%; } .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 .wording { width: 50%; } .content .illustration { width: 50%; } .teams-banner { position: relative; width: 100%; height: 750px; background-color: #0e203c; box-sizing: border-box; } .teams-banner video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%,-50%); } .teams-banner .gradient { position: absolute; top: 0; left: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; background: rgba(0,10,32,0.7); background: -moz-linear-gradient(top, rgba(0,10,32,0.9) 0%, rgba(0,35,85,0.7) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,10,32,0.9)), color-stop(100%, rgba(0,35,85,0.7))); background: -webkit-linear-gradient(top, rgba(0,10,32,0.9) 0%, rgba(0,35,85,0.7) 100%); background: -o-linear-gradient(top, rgba(0,10,32,0.9) 0%, rgba(0,35,85,0.7) 100%); background: -ms-linear-gradient(top, rgba(0,10,32,0.9) 0%, rgba(0,35,85,0.7) 100%); background: linear-gradient(to bottom, rgba(0,10,32,0.9) 0%, rgba(0,35,85,0.7) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000a20', endColorstr='#002355', GradientType=0 ); } .teams-banner.flexible { min-height: 750px; max-height: 1200px; height: 100vh; } .teams-banner .content { padding-top: 100px; } .teams-banner .icon { display: block; width: 117px; height: 117px; margin: 0 auto; } .teams-banner .title { padding: 10px 0 0; color: #fff; font-size: 3.750em; font-weight: 600; } .teams-banner .description { color: #fff; font-size: 1.5em; font-weight: 400; padding: 20px 0 0; } .teams-banner .buttons { padding: 60px 0 60px; } .teams-banner .watch-video { display: inline-block; height: 27px; padding-left: 33px; color: #fff; font-size: 1.188em; line-height: 27px; background: url("/img/spark2/common/video_play_1.svg") no-repeat 0 0; background-size: 27px 27px; } .teams-banner .top-choice { position: absolute; bottom: 0; width: 100%; height: 82px; padding-top: 29px; text-align: center; background: rgba(8, 20, 37, 0.4); box-sizing: border-box; } .teams-banner .top-choice .top-choice-logo { display: inline-block; width: auto; height: 24px; margin: 0 30px; } .teams-simple-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; } .teams-simple-banner .clouds { position: absolute; left: 50%; bottom: 0; display: block; width: 1320px; height: auto; } .teams-simple-banner .content { padding-top: 100px; } .teams-simple-banner .title { position: relative; padding: 0; color: #fff; font-size: 2.750em; font-weight: 600; } .teams-simple-banner .title.with-icon { padding-left: 70px; } .teams-simple-banner .title .icon { position: absolute; top: 50%; left: 0; display: block; width: 50px; height: 50px; margin-top: -25px; } .content .feature { display: inline-block; width: 300px; padding: 0 20px; vertical-align: top; } .content .feature .icon { display: block; width: 105px; height: 105px; margin: 60px auto 20px; } .content .feature .text { color: #444a56; font-size: 1.5em; font-weight: 600; } .be-better-email { border-bottom: 1px solid #c6cedc; } .be-better-email .wording { width: 480px; margin-left: 120px; padding-top: 200px; } .be-better-email .illustration { position: relative; } .be-better-email .illustration .device { display: block; width: 558px; height: auto; } .be-better-email .illustration #be-better-email-frame { position: absolute; top: 0; left: 0; display: block; width: 558px; height: 863px; } .shared-inboxes { border-bottom: 1px solid #c6cedc; } .shared-inboxes .wording { padding-top: 180px; width: 470px; } .shared-inboxes .wording.left { width: 500px; } .shared-inboxes .illustration { position: relative; width: 766px; padding-top: 27px; } .shared-inboxes .illustration .screen { display: block; width: 766px; height: auto; } .shared-inboxes .wording .watch-video { display: inline-block; height: 27px; width: 100%; padding: 0 0 34px 35px; font-size: 1.188em; line-height: 28px; background: url("/img/spark2/common/video_play_3.svg") no-repeat 0 0; background-size: 27px 27px; } .responsible-for-email { border-bottom: 1px solid #c6cedc; } .responsible-for-email .wording { width: 500px; padding-top: 120px; } .work_better_as_team .wording { width: 500px; padding-top: 120px; } .ready_to_power_team { padding: 0 0 70px; } .ready_to_power_team .content { max-width: 1010px; width: 100%; margin: 0 auto; padding: 60px 20px 55px; background: #f3f3f3; border-radius: 20px; text-align: center; } .ready_to_power_team h3 { padding: 0 0 40px; color: #17212f; font-size: 2.5em; font-weight: bold; } .ready_to_power_team .btn { min-width: 250px; width: auto; height: 54px; min-height: 54px; line-height: 54px; border-radius: 8px; } .delegate-emails { border-bottom: 1px solid #c6cedc; } .delegate-emails .text { max-width: 900px; margin: 0 auto; } .delegate-emails .illustration { position: relative; width: 736px; margin: 0 auto; padding-top: 27px; } .delegate-emails .illustration #delegate-emails-frame { display: block; width: 736px; height: 600px; border-radius: 8px; box-shadow: 0 4px 20px 2px rgba(0, 0, 0, 0.25); } .create-email { border-bottom: 1px solid #c6cedc; } .create-email .text { max-width: 900px; margin: 0 auto; } .create-email .illustration { position: relative; width: 736px; margin: 30px auto; padding-top: 27px; } .create-email .illustration .screen { display: block; width: 736px; height: auto; border-radius: 8px; box-shadow: 0 4px 20px 2px rgba(0, 0, 0, 0.25); } .create-email .illustration #create-email-frame { display: block; position: absolute; top: 0; left: 0; width: 736px; height: 600px; } .discuss-email { border-bottom: 1px solid #c6cedc; } .discuss-email .text { max-width: 900px; margin: 0 auto; } .discuss-email .illustration { position: relative; width: 736px; margin: 30px auto; } .discuss-email .illustration .screen { display: block; width: 736px; height: auto; border-radius: 8px; box-shadow: 0 4px 20px 2px rgba(0, 0, 0, 0.25); } .discuss-email .illustration #discuss-email-frame { display: block; position: absolute; top: 0; left: 0; width: 736px; height: 600px; } .create-links { border-bottom: 1px solid #c6cedc; } .create-links .text { max-width: 900px; margin: 0 auto; } .create-links iframe { display: block; width: 736px; height: 600px; margin: 30px auto; border-radius: 8px; box-shadow: 2px 3px 18px 2px rgba(0, 0, 0, 0.25); } .team-benefits { } .team-benefits .content .title { padding: 0 0 60px; } .usecases-link { position: relative; display: inline-block; width: 530px; height: 310px; margin: 8px 10px; border-radius: 4px; overflow: hidden; } .usecases-link .icon { display: block; width: 530px; height: auto; } .usecases-link .top-overlay { position: absolute; right: 0; top: 0; left: 0; height: 4700px; background-color: #0074e6; opacity: 0; z-index: 1; } .usecases-link .bottom-overlay { position: absolute; right: 0; bottom: 0; left: 0; height: 60px; background: rgba(0, 0, 0, 0.7); z-index: 1; } .usecases-link .description { position: absolute; right: 0; bottom: 0; left: 0; height: 60px; padding: 0 20px; color: #fff; font-size: 1.375em; line-height: 60px; text-align: left; z-index: 2; } .usecases-link .description:after { content: ""; border-bottom: 2px solid #fff; border-right: 2px solid #fff; width: 12px; height: 12px; position: absolute; right: 20px; top: 23px; z-index: 100; -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .usecases-link:hover .top-overlay { opacity: 0.1; } .cl-create-link { } .cl-create-link .wording { width: 500px; padding-top: 160px; } .cl-create-link .illustration { } .cl-create-link .illustration .screen { display: block; width: 736px; height: auto; border-radius: 8px; box-shadow: 0 4px 20px 2px rgba(0, 0, 0, 0.25); } .cl-share-links { } .cl-share-links .wording { width: 500px; padding-top: 160px; } .cl-share-links .illustration { } .cl-share-links .illustration .screen { display: block; width: 736px; height: auto; margin-left: -86px; border-radius: 8px; box-shadow: 0 4px 20px 2px rgba(0, 0, 0, 0.25); } .cl-advanced-security { } .cl-advanced-security .wording { display: inline-block; width: 30%; } .cl-advanced-security .screen { display: block; margin: 0 auto 30px; width: 360px; height: auto; } .pt-private-comments { } .pt-private-comments .wording { width: 500px; padding-top: 120px; } .pt-private-comments .screen { display: block; width: 736px; height: auto; border-radius: 8px; box-shadow: 0 4px 20px 2px rgba(0, 0, 0, 0.25); } .pt-keep-everyone { } .pt-keep-everyone .wording { width: 500px; padding-top: 100px; } .pt-keep-everyone .screen { display: block; width: 564px; height: auto; } .pt-share-email { } .pt-share-email .wording { width: 500px; padding-top: 40px; } .pt-share-email .illustration { width: 600px; } .pt-share-email .screen { display: block; width: 499px; height: auto; } .sd-create-email { } .sd-create-email .wording { width: 500px; padding-top: 120px; } .sd-create-email .screen { display: block; width: 552px; height: auto; } .sd-realtime-editor { } .sd-realtime-editor .wording { width: 500px; padding-top: 120px; } .sd-realtime-editor .screen { display: block; width: 736px; height: auto; border-radius: 8px; box-shadow: 0 4px 20px 2px rgba(0, 0, 0, 0.25); } .sd-sidechat { } .sd-sidechat .wording { width: 500px; padding-top: 60px; } .sd-sidechat .illustration { width: 600px; } .sd-sidechat .screen { display: block; width: 491px; height: auto; border-radius: 8px; box-shadow: 0 4px 20px 2px rgba(0, 0, 0, 0.25); } .t-auto-fillers { } .t-auto-fillers .wording { width: 500px; padding-top: 120px; } .t-auto-fillers .screen { display: block; width: 540px; height: auto; border-radius: 8px; box-shadow: 0 4px 20px 2px rgba(0, 0, 0, 0.25); } .t-custom-placeholders { } .t-custom-placeholders .wording { width: 500px; padding-top: 100px; } .t-custom-placeholders .screen { display: block; width: 540px; height: auto; border-radius: 8px; box-shadow: 0 4px 20px 2px rgba(0, 0, 0, 0.25); } .t-shared-templates { } .t-shared-templates .wording { width: 500px; padding-top: 140px; } .t-shared-templates .screen { display: block; width: 736px; height: auto; border-radius: 8px; box-shadow: 0 4px 20px 2px rgba(0, 0, 0, 0.25); } .d-delegate-email { } .d-delegate-email .wording { padding-top: 160px; padding-right: 100px; box-sizing: border-box; } .d-set-deadlines { } .d-set-deadlines .wording { padding-top: 100px; padding-right: 100px; box-sizing: border-box; } .d-set-deadlines .illustration .device { margin-left: 50px; } .d-keep-track { } .d-keep-track .wording { padding-top: 80px; padding-right: 160px; box-sizing: border-box; } .learn-more-content { padding-top: 120px; } .learn-more-content .content { width: 730px; } .learn-more-content .separator { border: none; height: 1px; margin: 30px 0; color: #c6cedc; background-color: #c6cedc; } .learn-more-content .title { font-size: 2em; } .learn-more-content .screen { width: 730px; height: auto; margin: 0 auto 60px; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.25); } .learn-more-content .notification { padding: 20px 25px; border: 1px solid #1c80e5; border-radius: 8px; background-color: #edf6ff; box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1); } .learn-more-content .notification .title { margin: 0; padding: 0 0 10px; font-size: 1.5em; } .learn-more-content .notification .text { margin: 0; padding: 0; } .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); max-width: 560px; } .content .wording.left { margin-left: 20px; } .content .wording.right { margin-right: 20px; } .teams-simple-banner .title { padding: 0 20px; } .teams-simple-banner .title.with-icon { padding-left: 90px; } .teams-simple-banner .title .icon { left: 20px; } .shared-inboxes .wording, .shared-inboxes .wording.left { width: 380px; margin-right: 20px; padding-top: 100px; } .sd-realtime-editor .screen { margin-left: -100px; } .pt-private-comments .wording { width: 500px; } .sd-realtime-editor .wording { width: 500px; } .cl-share-links .wording { width: 500px; } } @media (-webkit-min-device-pixel-ratio: 2) { .teams-simple-banner .clouds { content: url("/img/spark2/desktop/features/bg_clouds_2x.png"); } .be-better-email .illustration .device { content: url("/img/spark2/desktop/teams/animations/iphone_chat_2x.png"); } .create-email .illustration .screen { content: url("/img/spark2/desktop/index/animations/shared_draft_composer_2x.png"); } .shared-inboxes .illustration .screen { content: url("/img/spark2/desktop/teams/shared_inboxes/screen_2x.png"); } .discuss-email .illustration .screen { content: url("/img/spark2/desktop/index/animations/discuss_2x.png"); } .usecases-link .icon.startups { content: url("/img/spark2/desktop/teams/startups_2x.png"); } .usecases-link .icon.sales { content: url("/img/spark2/desktop/teams/sales_2x.png"); } .usecases-link .icon.executive { content: url("/img/spark2/desktop/teams/executives_2x.png"); } .usecases-link .icon.consulting { content: url("/img/spark2/desktop/teams/consulting_2x.png"); } .cl-create-link .illustration .screen { content: url("/img/spark2/desktop/teams/create_link/copylink_2x.png"); } .cl-share-links .illustration .screen { content: url("/img/spark2/desktop/teams/create_link/safari_2x.png"); } .cl-advanced-security .screen.screen-1 { content: url("/img/spark2/desktop/teams/create_link/advprm01_2x.png"); } .cl-advanced-security .screen.screen-2 { content: url("/img/spark2/desktop/teams/create_link/advprm02_2x.png"); } .cl-advanced-security .screen.screen-3 { content: url("/img/spark2/desktop/teams/create_link/advprm03_2x.png"); } .pt-private-comments .screen { content: url("/img/spark2/desktop/teams/private_team/discuss_2x.png"); } .pt-keep-everyone .screen { content: url("/img/spark2/desktop/teams/private_team/loop_2x.png"); } .pt-share-email .screen { content: url("/img/spark2/desktop/teams/private_team/files_2x.png"); } .sd-create-email .screen { content: url("/img/spark2/desktop/teams/shared_drafts/editingnow_2x.png"); } .sd-realtime-editor .screen { content: url("/img/spark2/desktop/teams/shared_drafts/chat_2x.png"); } .sd-sidechat .screen { content: url("/img/spark2/desktop/teams/shared_drafts/realtimeediting_2x.png"); } .t-auto-fillers .screen { content: url("/img/spark2/desktop/teams/templates/temp_auto_2x.png"); } .t-custom-placeholders .screen { content: url("/img/spark2/desktop/teams/templates/temp_custom_2x.png"); } .t-shared-templates .screen { content: url("/img/spark2/desktop/teams/templates/temp_team_2x.png"); } .d-delegate-email .screen { content: url("/img/spark2/desktop/teams/delegation/delegate_img01_2x.png"); } .d-set-deadlines .screen { content: url("/img/spark2/desktop/teams/delegation/delegate_img02_2x.png"); } .d-keep-track .screen { content: url("/img/spark2/desktop/teams/delegation/delegate_img03_2x.png"); } .learn-more-content .screen-1 { content: url("/img/spark2/desktop/teams/learn_more/step01_2x.png"); } .learn-more-content .screen-2 { content: url("/img/spark2/desktop/teams/learn_more/step02_2x.png"); } .learn-more-content .screen-3 { content: url("/img/spark2/desktop/teams/learn_more/step03_2x.png"); } }