.header-title-banner { padding-top: 108px; margin-bottom: 96px; } .header-title-banner .title { margin: 0 0 48px; color: #1E1E1E; font-size: 1.75rem; font-weight: 700; line-height: 1.33; } .header-title-banner .hero-banner { overflow: hidden; border-radius: 24px; height: 420px; position: relative; display: flex; width: 100%; } .header-title-banner .hero-banner img { display: block; position: absolute; top: 0; left: 50%; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); height: 100%; min-width: 1200px; } @media (max-width: 1199px) { .header-title-banner { margin-bottom: 80px; } } @media (max-width: 991px) { .header-title-banner { margin-bottom: 64px; } .header-title-banner .hero-banner { height: 400px; border-radius: 16px; } } @media (max-width: 767px) { .header-title-banner { padding-top: 92px; margin-bottom: 80px; } .header-title-banner .title { margin: 0 0 32px; font-size: 1.5rem; } .header-title-banner .hero-banner { height: 360px; } } @media (max-width: 575px) { .header-title-banner { margin-bottom: 64px; } .header-title-banner .hero-banner { height: 320px; } .header-title-banner .hero-banner img { min-width: 535px; } }.title-text-button .container { display: flex; align-items: center; justify-content: center; flex-direction: column; } .title-text-button .illustration { display: block; max-width: 250px; width: 100%; margin: 0 0 8px; } .title-text-button .text-block { text-align: center; max-width: 794px; width: 100%; margin: 0 auto 40px; } .title-text-button .text-block h2 { color: #1E1E1E; font-size: 3em; font-weight: 700; line-height: 1.33; margin: 0 0 24px; } .title-text-button .text-block p { color: #1E1E1E; font-size: 1.25em; line-height: 1.5; } .title-text-button .btn-link { display: flex; width: fit-content; min-width: 180px; margin: 0 auto; } @media (max-width: 1199px) { .title-text-button .text-block h2 { font-size: 2.5em; } } @media (max-width: 767px) { .title-text-button .text-block h2 { font-size: 2em; } .title-text-button .text-block p { font-size: 1.125em; } } @media (max-width: 575px) { .title-text-button .illustration { max-width: 200px; } .title-text-button .btn-link { min-width: 287px; } }.slider-three-blocks .text-block { max-width: 794px; width: 100%; margin: 0 auto 64px; text-align: center; } .slider-three-blocks .text-block h2 { color: #1E1E1E; font-size: 2.5em; font-weight: 700; line-height: 1.33; margin: 0 0 24px; } .slider-three-blocks .text-block p { color: #3C3C3C; font-size: 1.25em; line-height: 1.5; } .slider-three-blocks .slider-container { position: relative; overflow: hidden; } .slider-three-blocks .slick-slider .slick-track { display: flex; gap: 24px; } .slider-three-blocks .slick-dotted.slick-slider { margin-bottom: 42px !important; } .slider-three-blocks .item { display: flex !important; justify-content: space-between; flex-direction: column; border-radius: 24px; background: #F8F8F8; padding: 32px; height: 357px; outline: none; } .slider-three-blocks .item .icon { display: block; width: 100px; height: 100px; background-size: contain; background-position: center; background-repeat: no-repeat; } .slider-three-blocks .item .icon.customer-focused { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/careers/index/icons/customer-focused.svg?1739808794"); } .slider-three-blocks .item .icon.professional { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/careers/index/icons/professional.svg?1739808794"); } .slider-three-blocks .item .icon.team-driven { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/careers/index/icons/team-driven.svg?1739808794"); } .slider-three-blocks .item .icon.product-oriented { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/careers/index/icons/product-oriented.svg?1739808794"); } .slider-three-blocks .item .icon.innovative { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/careers/index/icons/innovative.svg?1739808794"); } .slider-three-blocks .item p { color: #1E1E1E; font-size: 1.75em; font-weight: 700; line-height: 1.33; margin: 0 0 12px; } .slider-three-blocks .item span { color: #1E1E1E; font-size: 1.25em; line-height: 1.5; } .slider-three-blocks .slick-prev, .slider-three-blocks .slick-next, .slider-three-blocks .slick-prev:hover, .slider-three-blocks .slick-prev:focus, .slider-three-blocks .slick-next:hover, .slider-three-blocks .slick-next:focus{ border-radius: 8px; background: rgba(17, 20, 25, 0.05); width: 34px; height: 63px; z-index: 10; } .slider-three-blocks .slick-prev.slick-disabled, .slider-three-blocks .slick-next.slick-disabled { display: none !important; } .slider-three-blocks .slick-prev { left: 37px; } .slider-three-blocks .slick-next { right: 37px; } .slider-three-blocks .slick-prev:before, .slider-three-blocks .slick-next:before { content: ''; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: block; width: 12px; height: 20px; background-image: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/careers/index/icons/slider-arrow.svg?1739808794"); background-position: center; background-size: contain; background-repeat: no-repeat; opacity: 1; } .slider-three-blocks .slick-next:before { -moz-transform: rotate(180deg) translate(-50%, -50%); -webkit-transform: rotate(180deg) translate(-50%, -50%); -o-transform: rotate(180deg) translate(-50%, -50%); -ms-transform: rotate(180deg) translate(-50%, -50%); transform: rotate(180deg) translate(50%, 50%); } .slider-three-blocks .slick-dots li { width: 10px !important; height: 10px !important; margin: 0 6px !important; } .slider-three-blocks .slick-dots li button { width: 10px !important; height: 10px !important; background: #1E1E1E !important; opacity: 0.2; border-radius: 50%; } .slider-three-blocks .slick-dots li.slick-active button { background: #1E1E1E; !important; opacity: 1 !important; } .slider-three-blocks .slick-dots { bottom: -42px !important; } @media (max-width: 1199px) { .slider-three-blocks .text-block { margin: 0 auto 48px; } .slider-three-blocks .slick-slider .slick-track { gap: 20px; } .slider-three-blocks .item { padding: 24px; height: 372px; } } @media (max-width: 991px) { .slider-three-blocks .slick-slider .slick-track { gap: 16px; } .slider-three-blocks .item { padding: 32px; height: 324px; } .slider-three-blocks .item p { font-size: 1.5em; margin: 0 0 12px; } } @media (max-width: 767px) { .slider-three-blocks .text-block { margin: 0 auto 40px; } .slider-three-blocks .text-block h2 { font-size: 2em; } .slider-three-blocks .slider-container { max-width: 380px; width: 100%; margin: 0 auto; } } @media (max-width: 575px) { .slider-three-blocks .text-block h2 { margin: 0 0 16px; } .slider-three-blocks .item { padding: 24px; height: 316px; } .slider-three-blocks .item span { font-size: 1.125em; } .slider-three-blocks .text-block p { font-size: 1.125em; } .slider-three-blocks .item .icon { width: 80px; height: 80px; } .slider-three-blocks .slick-dots { bottom: -34px !important; } }.banner-text-left-right-asset .content { display: flex; align-items: center; justify-content: space-between; gap: 80px; padding: 64px 100px; border-radius: 24px; min-height: 548px; background: linear-gradient(96deg, #0E1D50 0%, #121212 49.48%, #32174D 100%); background: -webkit-linear-gradient(96deg, #0E1D50 0%, #121212 49.48%, #32174D 100%); background: -moz-linear-gradient(96deg, #0E1D50 0%, #121212 49.48%, #32174D 100%); background: -o-linear-gradient(96deg, #0E1D50 0%, #121212 49.48%, #32174D 100%); background: -ms-linear-gradient(96deg, #0E1D50 0%, #121212 49.48%, #32174D 100%); background: linear-gradient(96deg, #0E1D50 0%, #121212 49.48%, #32174D 100%); } .banner-text-left-right-asset.asset-left .content { flex-direction: row-reverse; } .banner-text-left-right-asset .text-block { max-width: 413px; width: 100%; } .banner-text-left-right-asset .text-block h2 { color: #FFF; font-size: 2.5em; font-weight: 700; line-height: 1.33; margin: 0 0 24px; } .banner-text-left-right-asset .text-block p { color: #FFF; font-size: 1.25em; line-height: 1.5; margin: 0 0 40px; } .banner-text-left-right-asset .text-block .btn-link { min-width: 216px; } .banner-text-left-right-asset .illustration { max-width: 507px; width: 100%; } @media (max-width: 1199px) { .banner-text-left-right-asset .content { gap: 48px; padding: 48px 64px; min-height: 406px; } .banner-text-left-right-asset .text-block { max-width: 346px; } .banner-text-left-right-asset .text-block h2 { font-size: 2em; } .banner-text-left-right-asset .illustration { max-width: 374px; } } @media (max-width: 991px) { .banner-text-left-right-asset .content { gap: 32px; padding: 40px; min-height: 331px; } .banner-text-left-right-asset .text-block { max-width: 315px; } .banner-text-left-right-asset .text-block p { font-size: 1em; } .banner-text-left-right-asset .illustration { max-width: 278px; } } @media(max-width: 767px) { .banner-text-left-right-asset .content, .banner-text-left-right-asset.asset-left .content { flex-direction: column; align-items: center; text-align: center; min-height: unset; } .banner-text-left-right-asset .text-block { max-width: 100%; } .banner-text-left-right-asset .text-block h2 { font-size: 1.5em; } } @media(max-width: 575px) { .banner-text-left-right-asset .content { gap: 24px; } .banner-text-left-right-asset .text-block .btn-link { min-width: 287px; } } @media (max-width: 375px) { .banner-text-left-right-asset .text-block .btn-link { min-width: unset; max-width: 287px; padding: 0 20px; } }.title-text-blocks .text-block { display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; gap: 24px; max-width: 792px; width: 100%; margin: 0 auto 64px; } .title-text-blocks .text-block h2 { color: #1E1E1E; font-size: 2.5em; font-weight: 700; line-height: 1.33; } .title-text-blocks .text-block p { color: #3C3C3C; font-size: 1.25em; line-height: 1.5; } .title-text-blocks .blocks { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: 20px; } .title-text-blocks .item { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; border-radius: 24px; background: #F8F8F8; padding: 24px; } .title-text-blocks .has-children { background: none; border-radius: 0; padding: 0; gap: 20px; } .title-text-blocks .item.horizontal { flex-direction: row; } .title-text-blocks .item.w-50 { width: calc(50% - 10px); } .title-text-blocks .item.w-25 { width: calc(25% - 20px); } .title-text-blocks .item .icon { display: block; width: 74px; height: 74px; background-position: center; background-repeat: no-repeat; background-size: contain; flex-shrink: 0; } .title-text-blocks .item .icon.apple-device-program { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/careers/index/icons/apple-device-program.svg?1739808794"); } .title-text-blocks .item .icon.english { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/careers/index/icons/english.svg?1739808794"); } .title-text-blocks .item .icon.mental-health { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/careers/index/icons/mental-health.svg?1739808794"); } .title-text-blocks .item .icon.sports { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/careers/index/icons/sports.svg?1739808794"); } .title-text-blocks .item .icon.time-off { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/careers/index/icons/time-off.svg?1739808794"); } .title-text-blocks .item .icon.learning-support { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/careers/index/icons/learning-support.svg?1739808794"); } .title-text-blocks .item .icon.referrals { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/careers/index/icons/referrals.svg?1739808794"); } .title-text-blocks .item h3 { color: #1E1E1E; font-size: 1.5em; font-weight: 700; line-height: 1.33; margin: 0 0 12px; } .title-text-blocks .item p { color: #1E1E1E; line-height: 1.5; } @media (max-width: 1199px) { .title-text-blocks .text-block { margin: 0 auto 48px; } .title-text-blocks .item .icon { width: 64px; height: 64px; } .title-text-blocks .item h3 { font-size: 1.25em; } } @media (max-width: 991px) { .title-text-blocks .blocks { flex-direction: column; } .title-text-blocks .item, .title-text-blocks .item.w-50, .title-text-blocks .item.w-25 { flex-direction: row; justify-content: flex-start; width: 100%; gap: 12px; border-radius: 16px; } .title-text-blocks .item.has-children { flex-direction: column; gap: 20px; } .title-text-blocks .item .icon { width: 40px; height: 40px; } } @media (max-width: 767px) { .title-text-blocks .text-block { margin: 0 auto 40px; } .title-text-blocks .text-block h2 { font-size: 2em; } } @media (max-width: 575px) { .title-text-blocks .text-block p { font-size: 1.125em; } .title-text-blocks .item, .title-text-blocks .item.w-50, .title-text-blocks .item.w-25 { padding: 16px; } .title-text-blocks .item.has-children { padding: 0; } .title-text-blocks .item .icon { width: 32px; height: 32px; } }.title-card-list-right-text-left { position: relative; overflow: hidden; padding: 100px 0; background: linear-gradient(96deg, #0E1D50 0%, #121212 49.48%, #32174D 100%); background: -webkit-linear-gradient(96deg, #0E1D50 0%, #121212 49.48%, #32174D 100%); background: -moz-linear-gradient(96deg, #0E1D50 0%, #121212 49.48%, #32174D 100%); background: -o-linear-gradient(96deg, #0E1D50 0%, #121212 49.48%, #32174D 100%); background: -ms-linear-gradient(96deg, #0E1D50 0%, #121212 49.48%, #32174D 100%); background: linear-gradient(96deg, #0E1D50 0%, #121212 49.48%, #32174D 100%); } .title-card-list-right-text-left .container { position: relative; display: flex; justify-content: space-between; z-index: 1; } .title-card-list-right-text-left .container:after { content: ''; position: absolute; width: 1340px; height: 670px; bottom: -103px; left: 220px; background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/home/illustration-bg-map-2x.webp?1734366936") no-repeat; background-size: contain; z-index: -1; } .title-card-list-right-text-left .left { max-width: 550px; width: 100%; } .title-card-list-right-text-left .left h2 { color: #FFF; margin-bottom: 123px; } .title-card-list-right-text-left .left .list { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; } .title-card-list-right-text-left .list .item { flex: 1 1 calc(50% - 20px); padding: 24px; border-radius: 24px; background: rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .title-card-list-right-text-left .item .icon { display: flex; width: 48px; height: 48px; margin-bottom: 24px; } .title-card-list-right-text-left .item .icon.icon-employees { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/common/components/title-card-list-right-text-left/icon-employees.svg?1706708303"); background-repeat: no-repeat; background-size: contain; } .title-card-list-right-text-left .item .icon.icon-downloads { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/common/components/title-card-list-right-text-left/icon-downloads.svg?1706708364"); background-repeat: no-repeat; background-size: contain; } .title-card-list-right-text-left .item .icon.icon-office { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/common/components/title-card-list-right-text-left/icon-office.svg?1706708616"); background-repeat: no-repeat; background-size: contain; } .title-card-list-right-text-left .item .icon.icon-market { background-image: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/common/components/title-card-list-right-text-left/icon-market.svg?1739281532"); background-repeat: no-repeat; background-size: contain; } .title-card-list-right-text-left .item p { font-size: 2.5rem; font-style: normal; font-weight: 700; line-height: 133%; color: #FFFFFF; } .title-card-list-right-text-left .item .text { font-size: 1.25rem; font-style: normal; font-weight: 400; line-height: 150%; color: rgba(255, 255, 255, 0.70); } .title-card-list-right-text-left .item .text span { color: rgba(255, 255, 255, 0.80); font-weight: 600; } .title-card-list-right-text-left .right { max-width: 550px; width: 100%; } .title-card-list-right-text-left .right p { font-size: 1.25rem; font-style: normal; font-weight: 400; line-height: 150%; color: rgba(255, 255, 255, .7); margin-bottom: 24px; opacity: .8; } .title-card-list-right-text-left .right p span { font-weight: 600; color: #FFF; } @media (max-width: 1199px) { .title-card-list-right-text-left { padding: 80px 0; } .title-card-list-right-text-left .container { gap: 30px; } .title-card-list-right-text-left .container:after { left: 127px; bottom: -183px; } .title-card-list-right-text-left .left, .title-card-list-right-text-left .right { max-width: 428px; } .title-card-list-right-text-left .item .icon { width: 40px; height: 40px; margin-bottom: 15px; } .title-card-list-right-text-left .item p { font-size: 2rem; } .title-card-list-right-text-left .item .text { font-size: 1.125rem; } } @media (max-width: 991px) { .title-card-list-right-text-left { padding: 48px 0; } .title-card-list-right-text-left .container { flex-direction: column; align-items: center; gap: 40px; } .title-card-list-right-text-left .container:after { content: unset; } .title-card-list-right-text-left .left, .title-card-list-right-text-left .right { max-width: 704px; width: 100%; } .title-card-list-right-text-left .left h2 { text-align: center; margin-bottom: 32px; } .title-card-list-right-text-left .item .text br { display: none; } .title-card-list-right-text-left .right { display: flex; flex-direction: column; align-items: center; } } @media (max-width: 767px) { .title-card-list-right-text-left { background: linear-gradient(138deg, #0E1D50 0%, #121212 49.48%, #32174D 100%); background: -webkit-linear-gradient(138deg, #0E1D50 0%, #121212 49.48%, #32174D 100%); background: -moz-linear-gradient(138deg, #0E1D50 0%, #121212 49.48%, #32174D 100%); background: -o-linear-gradient(138deg, #0E1D50 0%, #121212 49.48%, #32174D 100%); background: -ms-linear-gradient(138deg, #0E1D50 0%, #121212 49.48%, #32174D 100%); background: linear-gradient(138deg, #0E1D50 0%, #121212 49.48%, #32174D 100%); } .title-card-list-right-text-left .left .list { flex-direction: column; gap: 10px; } .title-card-list-right-text-left .list .item { flex: unset; display: flex; gap: 12px; width: 100%; padding: 16px; } .title-card-list-right-text-left .item .icon { flex-shrink: 0; width: 32px; height: 32px; margin: 0; } .title-card-list-right-text-left .item p { line-height: 100%; margin-bottom: 10px; } }.vacancy-card { display: none; width: calc(33% - 13px); list-style-type: none; min-height: 240px; } .vacancy-card.active { display: block; } .vacancy-card a { display: flex; flex-direction: column; justify-content: space-between; padding: 32px; border-radius: 24px; background: #F8F8F8; height: 100%; width: 100%; -webkit-transition: .3s; -moz-transition: .3s; -o-transition: .3s; -ms-transition: .3s; transition: .3s; } .vacancy-card a:hover { -moz-transform: scale(1.05); -webkit-transform: scale(1.05); -o-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } .vacancy-card a .top-block { margin: 0 0 40px; } .vacancy-card a .locations-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; } .vacancy-card a .locations-badges .location { display: flex; align-items: center; justify-content: center; text-align: center; width: fit-content; border-radius: 30px; background: #FFF; -moz-box-shadow: 0px 2px 8px 0px rgba(163, 168, 198, 0.08); -webkit-box-shadow: 0px 2px 8px 0px rgba(163, 168, 198, 0.08); -o-box-shadow: 0px 2px 8px 0px rgba(163, 168, 198, 0.08); -ms-box-shadow: 0px 2px 8px 0px rgba(163, 168, 198, 0.08); box-shadow: 0px 2px 8px 0px rgba(163, 168, 198, 0.08); color: #111; font-size: 0.875em; line-height: 1.5; padding: 4px 12px; } .vacancy-card a .position { color: #111; font-size: 1.5em; font-weight: 700; line-height: 1.33; } .vacancy-card a .team { display: flex; align-items: center; position: relative; color: #111; font-weight: 400; line-height: 1.5; margin: 0 8px 0 0; } .vacancy-card a .team::before { content: ''; display: block; width: 32px; height: 32px; margin: 0 8px 0 0; flex-shrink: 0; } .vacancy-card a .team::before, .vacancy-card a .team.readdle:before { background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/common/product-icons/readdle-white.svg?1707309759") no-repeat 0 0; background-size: contain; } .vacancy-card a .team.pdfexpert:before { background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/common/product-icons/pdfexpert.svg?1580137746") no-repeat 0 0; background-size: contain; } .vacancy-card a .team.spark:before { background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/common/product-icons/spark.svg?1708000218") no-repeat 0 0; background-size: contain; } .vacancy-card a .team.scannerpro:before { background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/common/product-icons/scannerpro.svg?1707309733") no-repeat 0 0; background-size: contain; } .vacancy-card a .team.fluix:before { background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/common/product-icons/fluix.svg?1749136621") no-repeat 0 0; background-size: contain; } .vacancy-card a .team.documents:before { background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/common/product-icons/documents.svg?1707309688") no-repeat 0 0; background-size: contain; } .vacancy-card a .team.calendars:before { background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/common/product-icons/calendars.svg?1708004057") no-repeat 0 0; background-size: contain; } .vacancy-card a .team::after { content: ''; display: block; width: 32px; height: 32px; background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/careers/index/icons/arrow-right.svg?1739808794") no-repeat 0 0; background-size: contain; margin: 0 0 0 auto; flex-shrink: 0; } @media (max-width: 1199px) { .vacancy-card { width: calc(33% - 9px); } .vacancy-card a { padding: 24px; } } @media (max-width: 991px) { .vacancy-card { width: calc(50% - 8px); } .vacancy-card a .position { font-size: 1.25em; } } @media (max-width: 767px) { .vacancy-card { width: 100%; max-width: 380px; } .vacancy-card a .top-block { margin: 0 0 80px; } } @media (max-width: 575px) { .vacancy-card a .top-block { margin: 0 0 55px; } } html, body { scroll-behavior: smooth; } .current-openings { scroll-margin-top: 120px; } .current-openings .title { color: #1E1E1E; text-align: center; font-size: 2.5em; font-weight: 700; line-height: 1.33; margin: 0 0 64px; } .current-openings .location-filter { margin: 0 0 40px; } .current-openings .list-mobile { display: none; } .current-openings .location-filter .list { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; } .current-openings .location-filter .item:focus { outline: none; -moz-box-shadow: var(--common-focus-box-shadow);; -webkit-box-shadow: var(--common-focus-box-shadow);; -o-box-shadow: var(--common-focus-box-shadow);; -ms-box-shadow: var(--common-focus-box-shadow);; box-shadow: var(--common-focus-box-shadow);; border-radius: 54px; } .current-openings .location-filter .item input { display: none; } .current-openings .location-filter .item span { display: flex; align-items: center; justify-content: center; text-align: center; width: fit-content; padding: 10px 24px; border-radius: 54px; border: 1px solid #D3D3D3; color: #1E1E1E; font-weight: 600; line-height: 1.5; cursor: pointer; -webkit-transition: .3s; -moz-transition: .3s; -o-transition: .3s; -ms-transition: .3s; transition: .3s; } .current-openings .location-filter .item span:hover { border-color: #3C3C3C; } .current-openings .location-filter input[type='checkbox']:checked + span { color: #fff; border-color: transparent; background: #1E1E1E; } .current-openings .vacancies-wrapper .department { border-bottom: 1px solid #E9E9E9; position: relative; -webkit-transition: .8s ease; -moz-transition: .8s ease; -o-transition: .8s ease; -ms-transition: .8s ease; transition: .8s ease; } .current-openings .vacancies-wrapper .department.open { border-bottom-color: transparent; } .current-openings .vacancies-wrapper .department .info { display: flex; align-items: center; gap: 16px; padding: 26px 40px 26px 0; cursor: pointer; position: relative; } .current-openings .vacancies-wrapper .department .info:focus { outline: none; -moz-box-shadow: var(--common-focus-box-shadow);; -webkit-box-shadow: var(--common-focus-box-shadow);; -o-box-shadow: var(--common-focus-box-shadow);; -ms-box-shadow: var(--common-focus-box-shadow);; box-shadow: var(--common-focus-box-shadow);; border-radius: 8px; } .current-openings .vacancies-wrapper .department .info:after { content: ''; position: absolute; display: flex; width: 22px; height: 22px; right: 0; background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/careers/index/icons/icon-arrow-vacancie.svg?1739808794"); -webkit-transition: .5s; -moz-transition: .5s; -o-transition: .5s; -ms-transition: .5s; } .current-openings .vacancies-wrapper .department.open .info:after { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: .5s; -moz-transition: .5s; -o-transition: .5s; -ms-transition: .5s; transition: .5s ease; } .current-openings .vacancies-wrapper .department .info .number { display: flex; align-items: center; justify-content: center; text-align: center; width: 34px; height: 25px; border-radius: 30px; background: #F8F8F8; color: #1E1E1E; font-size: 0.875em; line-height: 1.5; } .current-openings .vacancies-wrapper .department .info .name { color: #1E1E1E; font-size: 1.25em; font-weight: 700; line-height: 1.33; } .current-openings .vacancies-wrapper .vacancies { display: none; } .current-openings .vacancies-wrapper .jobs-wrapper { display: flex; align-items: stretch; flex-wrap: wrap; gap: 24px; } @media (max-width: 1199px) { .current-openings .title { margin: 0 0 48px; } .current-openings .vacancies-wrapper .jobs-wrapper { gap: 16px; } } @media (max-width: 991px) { .current-openings .location-filter { position: relative; margin: 0 0 32px; } .current-openings .list-mobile { display: block; position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; padding: 10px 50px 10px 16px; border-radius: 8px; border: 1px solid transparent; color: #535353; font-size: 1.125em; font-weight: 600; line-height: 1.5; z-index: 3; } .current-openings .list-mobile::after { content: ''; position: absolute; top: 25%; right: 13px; width: 22px; height: 22px; background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/careers/index/icons/icon-arrow-vacancie.svg?1739808794") no-repeat 0 0; background-size: contain; transition: .5s; } .current-openings .location-filter.open .list-mobile::after { -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: .5s; -moz-transition: .5s; -o-transition: .5s; -ms-transition: .5s; transition: .5s; } .current-openings .location-filter .list { position: absolute; top: 0; left: 0; width: 100%; max-height: 0; flex-direction: column; align-items: flex-start; justify-content: unset; gap: unset; overflow: hidden; background: #FFFFFF; -webkit-transition: .6s; -moz-transition: .6s; -o-transition: .6s; -ms-transition: .6s; transition: .6s ease; border-radius: 8px; padding-top: 47px; z-index: 2; border: 1px solid #D3D3D3; } .current-openings .location-filter.open .list { max-height: 500px; -webkit-transition: .6s; -moz-transition: .6s; -o-transition: .6s; -ms-transition: .6s; transition: .6s ease; gap: 0; } .current-openings .location-filter .item { display: block; width: 100%; } .current-openings .location-filter .item span { width: 100%; padding: 10px 16px; border-radius: 0; border: none; justify-content: flex-start; color: #535353; font-size: 1.125em; font-weight: 600; line-height: 1.5; z-index: 3; background: #fff; } } @media (max-width: 767px) { .current-openings .title { font-size: 2em; margin: 0 0 40px; } .current-openings .location-filter { margin: 0 0 24px; } .current-openings .vacancies-wrapper .department .vacancies { gap: 20px; justify-content: center; } }