.banner-block { padding: 160px 0 80px; } .banner-block .container { max-width: 1200px; padding: 0 70px; } .banner-block .title { padding-bottom: 16px; font-size: 3.125rem; line-height: 60px; } .banner-block .description { font-size: 1.375rem; line-height: 30px; color: #090909; opacity: 0.7; } .howtos-blocks .filter-block { position: relative; height: 67px; margin-bottom: 80px; font-size: 0; } .howtos-blocks .filter-block ::-webkit-scrollbar { width: 0; background: transparent; } .howtos-blocks .filter-block .items-line { position: absolute; width: 100%; z-index:1; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; overflow: hidden; } .howtos-blocks .filter-block .item { display: inline-block; float: left; min-width: 148px; height: 60px; padding: 0 0 34px; margin-left: 30px; text-align: center; font-size: 1.125rem; line-height: 22px; color: #888888; box-sizing: border-box; cursor: pointer; border-bottom: 3px solid #888888; -webkit-tap-highlight-color:transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; outline: none; } .howtos-blocks .filter-block .item:focus-visible { -moz-box-shadow: var(--common-focus-box-shadow) inset !important; -webkit-box-shadow: var(--common-focus-box-shadow) inset !important; -o-box-shadow: var(--common-focus-box-shadow) inset !important; -ms-box-shadow: var(--common-focus-box-shadow) inset !important; box-shadow: var(--common-focus-box-shadow) inset !important; } .uk .howtos-blocks .filter-block .item { font-size: 1rem; } .howtos-blocks .filter-block .item:nth-child(1) { margin-left: 0; } .howtos-blocks .filter-block .item .item-in { margin-left: -69px; } .howtos-blocks .filter-block .item.active { color: #222222; font-weight: 700; border-bottom: 3px solid #3890fc; } .howtos-blocks .container { padding: 0 70px; } .howtos-blocks .howtos-list { display: flex; justify-content: space-between; flex-wrap: wrap; padding: 0 0 80px; } .howtos-blocks .howtos-list .item { display: none; position: relative; width: calc(50% - 21px); margin: 0 0 40px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); border-radius: 20px; overflow: hidden; -webkit-transition: transform .2s; transition: transform .2s; will-change: auto; } .howtos-blocks .howtos-list .item:hover { -ms-transform: scale(1.02); -webkit-transform: scale(1.02); transform: scale(1.02); } .howtos-blocks .howtos-list .item.active { display: block; } .howtos-blocks .howtos-list .item .cover { position: relative; display: block; height: 250px; background: #abdcff; cursor: pointer; } .howtos-blocks .howtos-list .item .cover:before { content: ""; position: absolute; width: 60px; height: 42px; left: 16px; bottom: 16px; background: url("https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/mac/pages/getting-started/play-btn.svg?1631697357") no-repeat 0 0; } .howtos-blocks .howtos-list .item .icon { width: 100%; max-width: 120px; margin: 0 auto; padding: 65px 0; } .howtos-blocks .howtos-list .item .info { display: flex; flex-direction: column; padding: 40px; } .howtos-blocks .howtos-list .item .title { padding-bottom: 8px; font-size: 1.875rem; line-height: 30px; font-weight: bold; color: #222222; } .howtos-blocks .howtos-list .anons { font-size: 1.25rem; line-height: 28px; color: #444444; } @media (max-width: 1199px) { .banner-block { padding: 140px 0 80px; } .banner-block .container { padding: 0 64px; } .banner-block .title { font-size: 2.5rem; line-height: 50px; } .banner-block .description { font-size: 1.25rem; line-height: 28px; } .howtos-blocks .filter-block { height: 62px; margin-bottom: 40px; } .howtos-blocks .filter-block .item { min-width: 120px; height: 55px; padding: 0 0 32px; font-size: 1rem; line-height: 20px; } .howtos-blocks .container { padding: 0 64px; } .howtos-blocks .howtos-list { padding: 0 0 60px; } .howtos-blocks .howtos-list .item { width: calc(50% - 20px); } .howtos-blocks .howtos-list .item .cover { height: 230px; } .howtos-blocks .howtos-list .item .icon { width: 100px; } } @media (max-width: 1023px) { .banner-block .container { padding: 0 64px; } .howtos-blocks .container { padding: 0 64px; } } @media (max-width: 991px) { .top-menu.static { background-color: rgba(255, 255, 255, 0.9); } .top-menu .burger-button span { background: #000000; } .top-menu.static .logo.top-logo { display: block; background: url(https://cdn-rdstaticassets.readdle.com/assets/pdfexpert/20220504/common/readdle-black.svg?1651675321) no-repeat 0 0; } .banner-block { padding: 120px 0 60px; } .banner-block .container { padding: 0 32px; } .banner-block .title { text-align: center; } .banner-block .description { text-align: center; } .howtos-blocks .container { padding: 0 32px; } .howtos-blocks .howtos-list .item .cover { height: 210px; } .howtos-blocks .howtos-list .item .icon { width: 80px; } .howtos-blocks .howtos-list .item .info { padding: 30px; } .howtos-blocks .howtos-list .item .title { font-size: 1.625rem; } } @media (max-width: 767px) { .banner-block .container { padding: 0 20px; } .howtos-blocks .container { padding: 0 20px; } .howtos-blocks .howtos-list { flex-direction: column; padding: 0 0 40px; } .howtos-blocks .howtos-list .item { max-width: 370px; width: 100%; margin: 0 auto 40px; } } @media (max-width: 575px) { .banner-block .title { font-size: 1.875rem; line-height: 40px; } }