html { min-height: inherit; } body { overflow-x: hidden; } img { min-height: unset; max-width: unset; } .body { overflow: hidden; height: unset; } .text { padding-top: 0; color: #222; font-size: 1.25rem; font-weight: 400; line-height: 150%; } h2.section-title, h3.section-title, p.section-title { margin: 0; padding: 0 0 20px; color: #222; font-size: 2.25rem; font-weight: 700; } .content-block { margin: 0; border: none; border-bottom: 1px solid #e1e1e1; background-color: transparent; overflow: visible; } .content-block .content { position: relative; max-width: 1200px; height: 100%; box-sizing: border-box; z-index: 20; overflow: visible; } .content-block .description, .content-block .illustration { width: 50%; } .bottom { background-color: #f5f5f5; } a.back_to_top { display: none; } .bookmark { position: absolute; top: 800px; left: 50%; width: 2374px; height: 4386px; margin: 0 0 0 -1187px; display: block; z-index: 10; } .main-banner { position: relative; background: -webkit-linear-gradient(35deg, #161821 16%, #363b50 84%); background: -moz-linear-gradient(35deg, #161821 16%, #363b50 84%); background: -o-linear-gradient(35deg, #161821 16%, #363b50 84%); background: -ms-linear-gradient(35deg, #161821 16%, #363b50 84%); background: linear-gradient(55deg, #161821 16%, #363b50 84%); height: 680px; padding: 0 0 120px; box-sizing: content-box; } .main-banner .wave-background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; } .main-banner .anniversary-logo { position: absolute; top: -10px; left: -94px; display: block; max-width: 767px; width: 100%; height: auto; } .main-banner .description { padding: 280px 0 0 600px; max-width: 100%; z-index: 10; box-sizing: content-box; } .main-banner .readdle-logo { display: block; width: 184px; height: 58px; } .main-banner .title { margin: 0; padding: 40px 0 30px; color: #fff; font-size: 3rem; font-weight: 700; } .main-banner .descr { padding: 0; color: #fff; font-size: 1.625rem; font-weight: 400; line-height: 140%; } .main-banner .next_container { display: none; } .amazing-company { height: 700px; padding: 0; } .amazing-company .section-title { padding: 80px 0 20px; } .amazing-company .text { max-width: 620px; width: 100%; margin: 0 auto; padding: 0 0 50px; } .amazing-company .picture { display: block; width: 645px; height: 444px; margin: 0 auto; } .long-time { height: 700px; padding: 0; } .long-time .description { width: 440px; padding: 285px 0 0; } .long-time .text { } .long-time .illustration { width: 630px; } .long-time .illustration .picture { display: block; width: 1020px; height: 767px; margin: -20px 0 0 0; } .apple-call { height: 700px; padding: 0; } .apple-call .description { width: 472px; padding: 220px 100px 0 0; box-sizing: content-box; } .apple-call .text { padding: 0 0 20px; } .apple-call .text.call-quote { font-weight: 600; font-style: italic; } .apple-call .apple-icon { display: inline-block; width: 14px; height: 17px; margin-left: 5px; } .apple-call .illustration { width: 537px; } .apple-call .illustration .picture { position: absolute; top: -5px; left: -295px; display: block; width: 832px; height: 650px; } .story-begins { height: 700px; padding: 0; } .story-begins .description { width: 500px; padding: 180px 0 0; } .story-begins .text { } .story-begins .illustration { width: 580px; } .story-begins .illustration .picture { display: block; width: 489px; height: 562px; margin: 0 auto 0 0; } .today { height: 700px; padding: 0; } .today .description { width: 400px; padding: 180px 140px 0 0; box-sizing: content-box; } .today .text { } .today .illustration { width: 572px; } .today .illustration .picture { display: block; width: 498px; height: 714px; margin: -14px 0 0 auto; } .started-using { height: 700px; padding: 0; box-sizing: content-box; } .started-using .text-title { padding: 40px 0 30px; color: #222; font-size: 2.25rem; font-weight: 600; line-height: 100%; } .started-using .year-selector { list-style: none; } .started-using .year-selector li { display: inline-block; width: 60px; height: 32px; margin: 0 1px; color: #222; font-size: 1rem; font-weight: 400; line-height: 32px; border: 1px solid #ccc; border-radius: 16px; background-color: transparent; cursor: pointer; } .started-using .year-selector li:hover { color: #1b84ee; border: 1px solid #1b84ee; } .started-using .year-selector li.active { color: #fff; border: 1px solid transparent; background: -webkit-linear-gradient(15deg, #278cf3 0%, #5db3f9 100%); background: -moz-linear-gradient(15deg, #278cf3 0%, #5db3f9 100%); background: -o-linear-gradient(15deg, #278cf3 0%, #5db3f9 100%); background: -ms-linear-gradient(15deg, #278cf3 0%, #5db3f9 100%); background: linear-gradient(75deg, #278cf3 0%, #5db3f9 100%); } .started-using .year-animation { position: relative; width: 890px; height: 474px; margin: 30px auto 0; border-radius: 6px; background-color: #fff; box-shadow: 2px 3px 14px 0 rgba(0, 0, 0, 0.2); } .started-using .year-animation .year-messages { position: absolute; top: 80px; left: 70px; width: 380px; min-height: 100px; z-index: 5; } .started-using .social-share { padding: 30px 0 0; } .started-using .social-share .facebook { display: inline-block; width: 141px; height: 42px; margin-right: 5px; background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/11years/share_fb_big_2x.png?1567686353") no-repeat 0 0; background-size: 141px 42px; } .started-using .social-share .twitter { display: inline-block; width: 141px; height: 42px; margin-left: 5px; background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/11years/share_twt_big_2x.png?1567686353") no-repeat 0 0; background-size: 141px 42px; } .started-using .year-animation #year_pin { position: absolute; top: 0; left: 0; display: none; width: 100px; height: 100px; z-index: 10; } .started-using .year-animation #year_pin.year-2008 { top: 347px; left: 18px; } .started-using .year-animation #year_pin.year-2009 { top: 342px; left: 60px; } .started-using .year-animation #year_pin.year-2010 { top: 332px; left: 118px; } .started-using .year-animation #year_pin.year-2011 { top: 318px; left: 178px; } .started-using .year-animation #year_pin.year-2012 { top: 298px; left: 237px; } .started-using .year-animation #year_pin.year-2013 { top: 272px; left: 298px; } .started-using .year-animation #year_pin.year-2014 { top: 236px; left: 365px; } .started-using .year-animation #year_pin.year-2015 { top: 189px; left: 441px; } .started-using .year-animation #year_pin.year-2016 { top: 137px; left: 521px; } .started-using .year-animation #year_pin.year-2017 { top: 85px; left: 602px; } .started-using .year-animation #year_pin.year-2018 { top: 51px; left: 686px; } .started-using .year-animation .picture { position: absolute; top: 50%; left: 50%; display: block; width: 787px; height: 409px; margin: -205px 0 0 -393px; z-index: 2; } .ja .started-using .year-animation .picture { content: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/11years/ja_illustration_07.png?1567686353"); } @media (max-width: 1199px){ .anniversary-content { max-width: 800px; width: 100%; margin: 0 auto; } .text { padding: 0 20px; font-size: 1rem; } h2.section-title, h3.section-title, p.section-title { margin: 0; padding: 60px 20px 30px !important; } .bookmark { display: none; } .amazing-company { height: auto; overflow: hidden; } .amazing-company .picture { display: block; max-width: 431px; width: 100%; height: auto; margin: 0 auto 10px; padding: 0 20px; box-sizing: border-box; } .amazing-company .text { padding: 0 20px 30px; box-sizing: border-box; } .long-time { height: auto; overflow: hidden; } .long-time.content-block .content { display: flex; flex-direction: column; } .long-time .illustration { max-width: 630px; width: 100%; margin: 0 auto; } .long-time .illustration .picture { display: block; max-width: 488px; width: 100%; height: auto; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } .long-time .description { width: 100%; text-align: center; padding: 0; order: -1; } .long-time .text { padding: 0 20px 10px; } .apple-call { height: auto; overflow: hidden; } .apple-call.content-block .content { display: flex; flex-direction: column; } .apple-call .illustration { max-width: 537px; width: 100%; margin: 0 auto; } .apple-call .illustration .picture { position: relative; display: block; max-width: 457px; width: 100%; height: auto; margin: 0 auto; top: 0; left: 0; padding: 0 20px; box-sizing: border-box; } .apple-call .description { width: 100%; text-align: center; padding: 0; order: -1; } .apple-call .text { padding: 0 20px 20px; } .apple-call .text.call-quote { padding: 0 20px 10px; } .story-begins { height: auto; overflow: hidden; } .story-begins.content-block .content { display: flex; flex-direction: column; } .story-begins .illustration { max-width: 580px; width: 100%; margin: 0 auto; } .story-begins .illustration .picture { display: block; max-width: 322px; width: 100%; height: auto; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } .story-begins .description { width: 100%; text-align: center; padding: 0; order: -1; } .story-begins .text { padding: 0 20px 30px; } .today { height: auto; overflow: hidden; } .today.content-block .content { display: flex; flex-direction: column; } .today .illustration { max-width: 580px; width: 100%; margin: 0 auto; } .today .illustration .picture { display: block; max-width: 327px; width: 100%; height: auto; margin: 0 auto; padding: 0 20px; box-sizing: border-box; } .today .description { width: 100%; text-align: center; padding: 0; order: -1; } .today .text { padding: 0 20px 30px; } } @media (min-width: 992px) and (max-width: 1199px){ .main-banner .description { padding: 280px 0 0 calc(100vw - 50%); } } @media (max-width: 991px) { .main-banner { height: 621px; text-align: center; overflow: hidden; padding: 0 !important; } .main-banner .anniversary-logo { top: 0; left: 50%; width: auto; max-width: 559px; height: auto; margin: 0 0 0 -280px; z-index: 1; } .main-banner .description { position: relative; width: auto; margin: 0 auto; padding: 269px 20px 0; z-index: 10; } .main-banner .readdle-logo { width: 149px; height: 47px; margin: 0 auto; } .main-banner .title { padding: 30px 0 20px; font-size: 1.75rem; } .main-banner .descr { font-size: 1rem; line-height: 150%; } .main-banner .next_container { display: block; position: absolute; bottom: 60px; left: 50%; width: 40px; height: 60px; margin: 0 0 0 -20px; z-index: 100; } .main-banner .next_container img { display: block; width: 40px; height: 60px; } .started-using { max-height: 700px; height: 100%; padding: 0 0 100px 0; } .started-using .year-scroll { width: 100%; height: 60px; overflow: scroll; margin-bottom: 15px; } .started-using .year-selector { list-style: none; width: 1100px; height: 40px; text-align: left; } .started-using .year-selector li { width: 86px; height: 40px; margin: 0 5px; font-size: 1.25rem; line-height: 40px; text-align: center; border: 1px solid #e5e5e5; border-radius: 20px; box-sizing: border-box; background-color: #fff; } .started-using .year-animation { display: flex; flex-direction: column; width: 100%; max-width: 890px; height: auto; margin: 0 auto; padding: 18px 0 24px; border-radius: 4px; } .started-using .year-animation #year_pin { display: none !important; } .started-using .year-animation picture { order: -1; } .started-using .year-animation .picture { position: relative; top: 0; left: 0; display: block; max-width: 787px; width: 100%; height: auto; margin: 0; padding: 0 20px; box-sizing: border-box; } .started-using .year-animation .year-messages { position: relative; top: 0; left: 0; max-width: 380px; width: 100%; height: auto; z-index: 5; padding: 20px 0 0; text-align: center; margin: 0 auto; } } @media (max-width: 767px) { h2.section-title, h3.section-title, p.section-title { margin: 0; padding: 60px 20px 30px !important; color: #222; font-size: 1.75rem; font-weight: 700; } .started-using { padding: 0 0 60px 0; } .started-using .text-title { padding: 40px 20px 30px; color: #222; font-size: 1.25rem; font-weight: 600; line-height: 150%; } } @media only screen and (max-width: 1279px) { .wrap { overflow: hidden; } } @media (-webkit-min-device-pixel-ratio: 2) { @media (min-width: 992px) { .main-banner .anniversary-logo { content: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/11years/illustration_01_2x.png?1567686353"); } } .amazing-company .picture { content: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/11years/illustration_02_2x.png?1567686353"); } .long-time .illustration .picture { content: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/11years/illustration_03_2x.png?1567686353"); } .apple-call .illustration .picture { content: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/11years/illustration_04_2x.png?1567686353"); } .story-begins .illustration .picture { content: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/11years/illustration_05_2x.png?1567686353"); } .today .illustration .picture { content: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/11years/illustration_06_2x.png?1567686353"); } .started-using .year-animation .picture { content: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/11years/illustration_07_2x.png?1567686353"); } .ja .started-using .year-animation .picture { content: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/11years/ja_illustration_07_2x.png?1567686353"); } .birthday-gifts .picture { content: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/11years/gift_2x.png"); } .birthday-gifts .qr-camera-block .qr-camera { content: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/11years/camera_2x.png"); } }