.top-menu.moved .btn { opacity: 0; visibility: hidden; } .top-menu.moved .logo.top-logo { opacity: 1; visibility: visible; } .mac-block { display: none; } .mac-device .windows-block { display: none !important; } .mac-device .mac-block { display: block !important; } .point-arrow { display: none; position: fixed; left: 60px; bottom: -20px; width: 120px; height: 150px; background: url("https://cdn-rdstaticassets.readdle.com/assets/spark/spark3/pages/download/arrow-bottom.svg?1661949201") no-repeat 0 0; background-size: contain; -webkit-animation: bounce-down 5s infinite; animation: bounce-down 5s infinite; z-index: 1000000; } .mobile-device .point-arrow { display: none !important; } .point-arrow.safari, .point-arrow.edge, .point-arrow.mozilla, .point-arrow.opera, .point-arrow.new-chrome { top: 20px; right: 60px; bottom: auto; left: auto; -webkit-animation: bounce-top 5s infinite; animation: bounce-top 5s infinite; background: url("https://cdn-rdstaticassets.readdle.com/assets/spark/spark3/pages/download/arrow-top.svg?1661949238") no-repeat 0 0; } .point-arrow.mozilla { right: 20px; } .point-arrow.opera { right: -7px; } @keyframes bounce-down { 30%, 50%, 80% { -ms-transform: translateY(0px); transform: translateY(0px); } 0%, 100%{ -ms-transform: translateY(-30px); transform: translateY(-30px); } } @keyframes bounce-top { 30%, 50%, 80% { -ms-transform: translateY(-30px); transform: translateY(-30px); } 0%, 100%{ -ms-transform: translateY(0px); transform: translateY(0px); } } .itunes-badge { margin: 0 auto; opacity: 1; } .itunes-badge img { height: 54px; } .downloads-simple { position: relative; margin: 160px auto 80px; } .downloads-simple .text-block { display: flex; flex-direction: column; align-items: center; margin-bottom: 60px; } .downloads-simple .text-block .title { position: relative; display: flex; margin-bottom: 28px; padding-left: 58px; } .downloads-simple .text-block .title i { position: absolute; top: 3px; left: 0; display: flex; width: 48px; height: 48px; background: url("https://cdn-rdstaticassets.readdle.com/assets/spark/spark3/common/logo.svg?1659516986") no-repeat 0 0; background-size: contain; } .downloads-simple .text-block p { font-weight: 400; font-size: 1.25em; line-height: 150%; text-align: center; } a.microsoft-badge { position: relative; top: 9px; display: inline-block; margin-left: 6px; transition: none !important; opacity: 1 !important; } .downloads-simple .text-block p a { font-weight: 700; transition: opacity .3s; } .downloads-simple .text-block p a:hover { opacity: .8; transition: opacity .3s; } .downloads-simple .instruction-block { max-width: 780px; width: 100%; display: flex; justify-content: space-between; margin-left: auto; margin-right: auto; margin-bottom: 60px; } .downloads-simple .instruction-block.windows-block { max-width: 570px; } .downloads-simple .instruction-block .item { max-width: 150px; width: 100%; display: flex; flex-direction: column; align-items: center; } .downloads-simple .instruction-block .step { position: relative; display: flex; align-items: center; width: 40px; height: 40px; margin-bottom: 20px; } .downloads-simple .instruction-block .step.step-1:after, .downloads-simple .instruction-block .step.step-2:after, .downloads-simple .instruction-block .step.step-3:after { content: ''; position: absolute; left: 64px; width: 120px; height: 4px; background: rgba(193, 223, 254, 0.3); } .downloads-simple .instruction-block .step .circle { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: linear-gradient(180deg, #40BCFD 0%, #0688F7 100%); box-shadow: 0px 5px 10px rgba(61, 150, 225, 0.2); } .downloads-simple .instruction-block .step span { font-weight: 600; font-size: 20px; line-height: 150%; text-align: center; letter-spacing: 0.03em; text-transform: uppercase; background: linear-gradient(180deg, #FFFFFF 25%, #BBE2FD 85%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-fill-color: transparent; } .downloads-simple .instruction-block .text p { font-weight: 600; font-size: 1.25em; line-height: 133%; color: #111111; margin-bottom: 6px; } .downloads-simple .instruction-block .text span { font-weight: 400; font-size: 1em; line-height: 150%; text-align: center; color: #6E6E6E; } .downloads-simple .central-block { display: flex; flex-direction: column; align-items: center; position: relative; } .downloads-simple .central-block h2 { font-size: 1.75em; text-align: center; margin-bottom: 28px } .downloads-simple .video { position: relative; width: 100%; max-width: 480px; cursor: pointer; } .downloads-simple .video-cover { width: 100%; max-width: 480px; height: auto; border-radius: 16px; } .downloads-simple .video p { position: absolute; width: 100%; top: 65%; padding: 0 20px; color: #ffffff; font-size: 1.5em; font-weight: 500; line-height: 150%; } .downloads-simple .description { display: flex; justify-content: center; max-width: 700px; width: 100%; margin: 0 auto 40px; } .downloads-simple .description .text { font-size: 1.25em; font-weight: 400; line-height: 150%; text-align: center; color: #111111; } .downloads-simple .description .text a { text-decoration: underline; } .downloads-simple .description .text a:hover { text-decoration: none; } .downloads-simple .previous-version { max-width: 700px; margin: 40px auto 0 auto; padding-top: 40px; border-top: 2px solid rgba(193, 223, 254, 0.3); font-weight: 400; font-size: 1.25em; line-height: 170%; text-align: center; color: #111111; } .downloads-simple .previous-version a { font-weight: 700; } @media (max-width: 1199px) { .downloads-simple .text-block .title i { top: 0; } } @media (max-width: 991px) { .top-menu.moved .menu_container ul li a.language-selector { visibility: visible; } .top-menu.moved .logo.top-logo { opacity: 0; visibility: hidden; } .downloads-simple { height: initial; margin: 140px auto 80px; } .downloads-simple .text-block { margin-bottom: 40px; } .downloads-simple .text-block .title { font-size: 2em; padding-left: 48px; margin-bottom: 20px; } .downloads-simple .text-block .title i { top: 2px; width: 40px; height: 40px; } .downloads-simple .instruction-block { max-width: 684px; } .downloads-simple .instruction-block .step.step-1:after, .downloads-simple .instruction-block .step.step-2:after, .downloads-simple .instruction-block .step.step-3:after { width: 100px; left: 59px; } .downloads-simple .central-block { width: 100%; } .downloads-simple .video-cover { max-width: 100%; } .downloads-simple .video p { font-size: 1.5rem; } .downloads-simple .description { max-width: 100%; width: 100%; } .downloads-simple .description .text { width: 100%; font-size: 1.125rem; text-align: center; } .downloads-simple .previous-version { font-size: 1.125rem; } } @media (max-width: 767px) { .downloads-simple .text-block .title { font-size: 1.5em; flex-direction: column; align-items: center; padding-left: 0; } .downloads-simple .text-block .title i { position: relative; top: unset; left: unset; width: 32px; height: 32px; margin-bottom: 20px; } .downloads-simple .text-block p { font-size: 1.125em; } .downloads-simple .instruction-block { max-width: 360px; flex-wrap: wrap; } .downloads-simple .instruction-block .item:nth-child(1), .downloads-simple .instruction-block .item:nth-child(2) { margin-bottom: 50px; } .downloads-simple .instruction-block .step.step-1:after, .downloads-simple .instruction-block .step.step-3:after { left: 75px; } .downloads-simple .instruction-block .step.step-2:after { content: unset; } .downloads-simple .central-block h2 { font-size: 1.5em; } .downloads-simple .video { width: 100%; max-width: initial; } } @media (max-width: 575px) { .downloads-simple { margin: 108px 0 80px 0; } .downloads-simple .text-block { margin-bottom: 36px; } .downloads-simple .text-block .title { margin-bottom: 16px; } .downloads-simple .text-block p { font-size: 1em; } .downloads-simple .instruction-block { max-width: 271px; flex-direction: column; align-items: center; margin-bottom: 60px; } .downloads-simple .instruction-block .item { max-width: 100%; flex-direction: row; justify-content: space-between; align-items: unset; margin-bottom: 15px; } .downloads-simple .instruction-block .item:last-child { margin-bottom: 0; } .downloads-simple .instruction-block .item:nth-child(1), .downloads-simple .instruction-block .item:nth-child(2) { margin-bottom: 15px; } .downloads-simple .instruction-block .text { max-width: 211px; width: 100%; display: flex; flex-direction: column; margin-bottom: 30px; } .downloads-simple .instruction-block .item:last-child .text { margin-bottom: 0; } .downloads-simple .instruction-block .text p { text-align: left; } .downloads-simple .instruction-block .text span { text-align: left; } .downloads-simple .instruction-block .step { height: auto; flex-direction: column; margin-bottom: 0; } .downloads-simple .instruction-block .step.step-2:after { content: ''; position: absolute; bottom: 0; left: 18px; width: 4px !important; height: calc(100% - 55px); background: rgba(193, 223, 254, 0.3); } .downloads-simple .instruction-block .step.step-1:after, .downloads-simple .instruction-block .step.step-3:after { bottom: 0; left: 18px; width: 4px !important; height: calc(100% - 55px); } .downloads-simple .instruction-block .step .circle { height: 40px; } .downloads-simple .central-block { margin: 0 auto 24px; } .downloads-simple .central-block h2 { font-size: 1.25em; } .downloads-simple .video p { font-size: 1em; } .downloads-simple .description .text, .downloads-simple .previous-version { font-size: 1em; } }