@font-face { font-family: "Jost"; font-style: normal; font-weight: normal; src: url("/fonts/jost/Jost-Regular-UKR.ttf") format("truetype"); } @font-face { font-family: "Jost"; font-style: normal; font-weight: 500; src: url("/fonts/jost/Jost-Medium-UKR.ttf") format("truetype"); } @font-face { font-family: "Jost"; font-style: normal; font-weight: bold; src: url("/fonts/jost/Jost-Bold-UKR.ttf") format("truetype"); } * { font-family: 'Jost', sans-serif; margin: 0; padding: 0; } body { margin: 0; color: #D2D2D2; background: #020202; overflow-x: hidden; } body.hidden { overflow: hidden; } ul { list-style: none; } a { text-decoration: none; color: #D2D2D2; } img { display: flex; width: 100%; } section { margin-top: 160px; padding: 0 20px; } .text-yellow { font-weight: bold; color: #E7B553; } .white-text { font-weight: bold; color: #D2D2D2; } .blur-left, .blur-right { position: absolute; width: 1800px; height: 1800px; pointer-events: none; } .purple-blur { background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/custom/iosOlympiad/blur/blur-purple.png?1635758642") no-repeat 0 0; background-size: contain; } .green-blur { background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/custom/iosOlympiad/blur/blur-green.png?1635770120") no-repeat 0 0; background-size: contain; } @media (-webkit-min-device-pixel-ratio: 2) { .purple-blur { background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/custom/iosOlympiad/blur/blur-purple-2x.png?1635772796") no-repeat 0 0; background-size: contain; } .green-blur { background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/custom/iosOlympiad/blur/blur-green-2x.png?1635772798"); background-size: contain; } } .wrap { overflow: hidden; position: relative; } .container { max-width: 1200px; margin: 0 auto; box-sizing: border-box; } .yellow-btn { max-width: 387px; width: 100%; min-height: 46px; display: flex; justify-content: center; align-items: center; font-style: normal; font-weight: bold; font-size: 18px; line-height: 26px; color: #020202; border: 1px solid #E7B553; box-sizing: border-box; background: #E7B553; transition: .3s ease; } .title-box { display: flex; justify-content: flex-start; align-items: center; } h2.title-section { position: relative; font-style: normal; font-weight: bold; font-size: 36px; line-height: 42px; display: inline-flex; align-items: center; margin-bottom: 50px; white-space: nowrap; overflow: hidden; width: 0; } @keyframes typing { from { width: 0px } to { width: 100% } } h2.title-section:before, h2.title-section:after { position: relative; font-style: normal; font-weight: 500; font-size: 36px; line-height: 52px; color: #E7B553; } h2.title-section:before { content: '{'; left: 0; margin-right: 20px; } h2.title-section:after { content: '}'; right: 0; margin-left: 20px; } h2.title-section.column { width: 100%; display: flex; flex-direction: column; align-items: flex-start; } h2.title-section.column:before,h2.title-section.column:after { content: ''; } h2.title-section span { position: relative; display: inline-flex; align-items: center; white-space: nowrap; overflow: hidden; width: 0; } h2.title-section span:before, h2.title-section span:after { position: relative; font-style: normal; font-weight: 500; font-size: 36px; line-height: 52px; color: #E7B553; } h2.title-section span:first-child { margin-bottom: 10px; } h2.title-section span:first-child:before { content: '{'; left: 0; margin-right: 20px; } h2.title-section span:last-child:after { content: '}'; right: 0; margin-left: 20px; } .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 20px; height: 20px; padding: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: transparent; } .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: transparent; outline: none; background: transparent; } .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: .25; } .slick-prev:before, .slick-next:before { font-size: 20px; line-height: 1; opacity: .75; color: white; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev { left: -25px; } [dir='rtl'] .slick-prev { right: -25px; left: auto; } .slick-prev:before { content: '←'; } [dir='rtl'] .slick-prev:before { content: '→'; } .slick-next { right: -25px; } [dir='rtl'] .slick-next { right: auto; left: -25px; } .slick-next:before { content: '→'; } [dir='rtl'] .slick-next:before { content: '←'; } .slick-dotted.slick-slider { margin-bottom: 30px; } .slick-dots { position: absolute; bottom: -25px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; } .slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer; } .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; } .slick-dots li button:before { font-size: 6px; line-height: 20px; position: absolute; top: 0; left: 0; width: 20px; height: 20px; content: '•'; text-align: center; opacity: .25; color: black; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-dots li.slick-active button:before { opacity: .75; color: black; } #cookieScriptAditionalData { display: none; } .text-center { text-align: center; } .header { position: fixed; width: 100%; left: 0; right: 0; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); -webkit-transition: backdrop-filter 120ms linear; -moz-transition: backdrop-filter 120ms linear; -o-transition: backdrop-filter 120ms linear; -ms-transition: backdrop-filter 120ms linear; transition: backdrop-filter 120ms linear; box-sizing: border-box; z-index: 3; padding: 0 20px; } .header.moved { background: rgba(2, 2, 2, .2); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); -webkit-transition: backdrop-filter 120ms linear; -moz-transition: backdrop-filter 120ms linear; -o-transition: backdrop-filter 120ms linear; -ms-transition: backdrop-filter 120ms linear; transition: backdrop-filter 120ms linear; } .menu { display: flex; align-items: center; justify-content: space-between; padding: 19px 0; } .menu .menu-list { display: flex; align-items: center; } .menu .menu-list li { margin-right: 120px; } .menu .menu-list li:last-child { margin-right: 0; } .menu .menu-list li a { font-style: normal; font-weight: normal; font-size: 18px; line-height: 26px; color: #D2D2D2; opacity: 0.5; transition: .3s ease; } .menu .menu-list li a:hover, .menu .menu-list li a.active { opacity: 1; transition: .3s ease; } .yellow-btn:hover { color: #E7B553; background: none; transition: .3s ease; } .menu .burger-button-custom { display: none; width: 23px; height: 19px; position: relative; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; } .menu .burger-button-custom span { display: block; position: absolute; height: 3px; width: 100%; background: #E7B553; border-radius: 1.5px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } .menu .burger-button-custom span:nth-child(1) { top: 0px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } .menu .burger-button-custom span:nth-child(2) { top: 8px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } .menu .burger-button-custom span:nth-child(3) { top: 16px; -webkit-transform-origin: left center; -moz-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center; } .menu .burger-button-custom.open span:nth-child(1) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 0px; left: 2px; } .menu .burger-button-custom.open span:nth-child(2) { width: 0%; opacity: 0; } .menu .burger-button-custom.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); top: 16px; left: 2px; } .main-banner { margin-top: 180px; } .main-banner .container { display: flex; justify-content: space-between; align-items: center; } .main-banner .text-block { max-width: 574px; width: 100%; } .main-banner .img-block { max-width: 508px; width: 100%; } .main-banner .text-block .logo { display: block; width: 183px; height: 59px; background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/custom/iosOlympiad/logo.svg?1634898255") no-repeat 0 0; background-size: contain; margin-bottom: 15px; } .main-banner .text-block h1 { display: flex; font-style: normal; font-weight: bold; font-size: 72px; line-height: 110px; margin-bottom: 20px; } .main-banner .text-block h1 span { margin-left: 22px; } .main-banner .text-block h1 span:before { content: '{'; font-style: normal; font-weight: 500; font-size: 72px; line-height: 110px; color: #E7B553; margin-right: 20px; } .main-banner .text-block h1 span:after { content: '}'; font-style: normal; font-weight: 500; font-size: 72px; line-height: 110px; color: #E7B553; margin-left: 20px; } .main-banner .text-block p { max-width: 486px; width: 100%; font-style: normal; font-weight: normal; font-size: 24px; line-height: 32px; color: #767676; margin-bottom: 50px; } .challenge .container { position: relative; } .challenge .blur-left { left: -1092px; top: -756px; } .challenge .blur-right { right: -1045px; top: -756px; } .challenge .stars .stars-left span, .challenge .stars .stars-right span { display: block; position: absolute; } .challenge .stars-left .star1 { left: -36px; top: -36px; width: 10px; height: 10px; background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/custom/iosOlympiad/icons/star-1.svg?1635203313") no-repeat 0 0; background-size: contain; animation: star-1-anim 2s linear infinite; transform-origin: center; transform-box: fill-box; animation-delay: .1s; } @keyframes star-1-anim { 0% { transform: scale(1); } 30% { transform: scale(1.4); } 100% { transform: scale(1); } } .challenge .stars-left .star2 { left: -19px; top: -19px; width: 10px; height: 10px; background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/custom/iosOlympiad/icons/star-2.svg?1635203325") no-repeat 0 0; background-size: contain; transform: scale(1); animation: star-2-anim 2.2s linear infinite; transform-origin: center; transform-box: fill-box; animation-delay: .3s; } @keyframes star-2-anim { 0% { transform: scale(1); } 30% { transform: scale(1.3); } 100% { transform: scale(1); } } .challenge .stars-left .star3 { left: -36px; top: 16px; width: 15px; height: 15px; background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/custom/iosOlympiad/icons/star-3.svg?1635203338") no-repeat 0 0; background-size: contain; transform: scale(0.7); animation: star-2-anim 2.2s linear infinite; transform-origin: center; transform-box: fill-box; animation-delay: .1s; } @keyframes star-3-anim { 0% { transform: scale(0.7); } 30% { transform: scale(1); } 100% { transform: scale(0.7); } } .challenge .stars-right .star4 { right: -36px; bottom: 20px; width: 15px; height: 15px; background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/custom/iosOlympiad/icons/star-1.svg?1635203313") no-repeat 0 0; background-size: contain; animation: star-4-anim 2.2s linear infinite; } @keyframes star-4-anim { 0% { transform: scale(1); } 30% { transform: scale(0.7); } 100% { transform: scale(1); } } .challenge .stars-right .star5 { right: 0; bottom: -8px; width: 7px; height: 7px; background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/custom/iosOlympiad/icons/star-3.svg?1635203338") no-repeat 0 0; background-size: contain; opacity: .6; animation: star-2-anim 2.2s linear infinite; transform-origin: center; transform-box: fill-box; animation-delay: .2s; } @keyframes star-5-anim { 0% { transform: scale(1); } 30% { transform: scale(1.3); } 100% { transform: scale(1); } } .challenge .stars-right .star6 { right: -16px; bottom: -30px; width: 15px; height: 15px; background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/custom/iosOlympiad/icons/star-2.svg?1635203325") no-repeat 0 0; background-size: contain; animation: star-2-anim 2.2s linear infinite; transform-origin: center; transform-box: fill-box; } .challenge .text-block { position: relative; max-width: 708px; width: 100%; font-style: normal; font-weight: normal; font-size: 24px; line-height: 32px; text-align: center; margin: 0 auto; } .challenge .text-block p span { font-weight: bold; color: #E7B553; } .join { position: relative; } .join .container:not(.fade-in) h2.title-section { animation: typing 3.5s steps(40, end); -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; } .join .blur-right { display: none; } .join ul.card-list { -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px; column-count: 3; column-gap: 20px; box-sizing: border-box; } .join .container .card-list .card-item { opacity: 0; transform: translateY(50px); transition: .3s ease-in-out; } .join .card-list .card-item { font-style: normal; font-weight: normal; font-size: 24px; line-height: 32px; box-sizing: border-box; background: rgba(210, 210, 210, 0.1); } .join .container:not(.fade-in) .card-list .card-item { opacity: 1; transform: translateY(0px); transition: 1s ease-in-out; } .join .container:not(.fade-in) .card-list .card-item:nth-child(2) { transition-delay: .2s; } .join .container:not(.fade-in) .card-list .card-item:nth-child(3) { transition-delay: .3s; } .join .container:not(.fade-in) .card-list .card-item:nth-child(4) { transition-delay: .4s; } .join .container:not(.fade-in) .card-list .card-item:nth-child(5) { transition-delay: .5s; } .join .card-list .card-item span { padding: 30px; display: block; } .join .card-item:nth-child(1) { border: 1px solid #E7B553; height: 299px; margin-bottom: 20px; } .join .card-item:nth-child(2) { height: 160px; } .join .card-item:nth-child(3) { height: 191px; margin-bottom: 20px; } .join .card-item:nth-child(4) { border: 1px solid #385E5C; height: 268px; } .join .container .card-item:nth-child(5) { background: none; height: 479px; } .join .card-item:nth-child(5) span { display: block; border: 1px solid #DEA7D1; height: 413px; box-sizing: border-box; background: rgba(210, 210, 210, 0.1); margin-bottom: 20px; } .join .yellow-btn { max-width: 100%; } .join .box-button { display: none; } .how-will .container { position: relative; } .how-will .container:not(.fade-in) h2.title-section { animation: typing 3.5s steps(40, end); -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; } .how-will .blur-left { left: -1092px; top: -620px; } .how-will .blur-right { right: -1045px; top: -620px; } .how-will .list { display: flex; justify-content: space-between; flex-wrap: wrap; } .how-will .list .item { max-width: 305px; width: 100%; margin-right: 101px; margin-bottom: 55px; } .how-will .list .item:nth-of-type(3n) { margin-right: 0; } .how-will .list .item:nth-child(n+4) { margin-bottom: 0; } .how-will .list .item img { display: block; width: 80px; height: 80px; margin-bottom: 30px; } .how-will .list .item .title-item { font-style: normal; font-weight: bold; font-size: 36px; line-height: 42px; margin-bottom: 15px; color: #D2D2D2; } .how-will .list .item p { font-style: normal; font-weight: normal; font-size: 24px; line-height: 32px; color: #767676; } .how-will .list .item p span { font-weight: bold; color: #E7B553; } .prizes .container { display: flex; flex-direction: column; align-items: center; } .prizes .container:not(.fade-in) h2.title-section { animation: typing .7s steps(10, end); -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; } .prizes .list { display: flex; } .prizes .list .item { max-width: 387px; width: 100%; display: flex; flex-direction: column; align-items: center; margin-right: 20px; } .prizes .list .item:last-child { margin-right: 0; } .prizes .list .item img { margin-bottom: 26px; } .prizes .list .item .small { font-style: normal; font-weight: bold; font-size: 14px; line-height: 22px; text-align: center; color: #767676; } .prizes .list .item p { font-style: normal; font-weight: bold; font-size: 24px; line-height: 32px; text-align: center; margin-top: 5px; margin-bottom: 10px; } .prizes .list .item span { font-style: normal; font-weight: normal; font-size: 24px; line-height: 32px; text-align: center; color: #767676; } .join-card .container { position: relative; padding: 42px; background: rgba(210, 210, 210, 0.1); } .join-card .blur-left { left: -1095px; top: -853px; } .join-card .blur-right { right: -345px; top: -667px; } .join-card .card { display: flex; flex-direction: column; align-items: center; max-width: 996px; width: 100%; margin: 0 auto; } .join-card p { font-style: normal; font-weight: bold; font-size: 36px; line-height: 42px; text-align: center; margin-bottom: 20px; } .join-card span { font-style: normal; font-weight: normal; font-size: 24px; line-height: 32px; text-align: center; color: #767676; margin-bottom: 40px; } .ios-challenge .blur-left { display: none; } .ios-challenge .container:not(.fade-in) h2.title-section span:first-child { animation: typing 2.5s steps(30, end); -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; } .ios-challenge .container:not(.fade-in) h2.title-section span:last-child { animation: typing 2.5s steps(30, end); -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; animation-delay: .6s; } .ios-challenge .card-list { display: flex; justify-content: space-between; flex-wrap: wrap; } .ios-challenge .card-list .card-item { font-style: normal; font-weight: normal; font-size: 24px; line-height: 32px; max-width: 590px; width: 48.4%; height: 142px; padding: 30px; box-sizing: border-box; background: rgba(210, 210, 210, 0.1); margin-bottom: 27px; opacity: 0; transform: translateY(60px); transition: 1s ease-in-out; } .ios-challenge .container:not(.fade-in) .card-list .card-item { transform: translateY(0); opacity: 1; transition: 1s ease-in-out; } .ios-challenge .container:not(.fade-in) .card-list .card-item:nth-child(3), .ios-challenge .container:not(.fade-in) .card-list .card-item:nth-child(4) { transition-delay: .1s; } .ios-challenge .card-list .card-item.blue { border: 2px solid #385E5C; } .ios-challenge .card-list .card-item.orange { border: 1px solid #E7B553; } .ios-challenge .btn-box { display: flex; justify-content: center; align-items: center; margin-top: 23px; opacity: 0; transform: translateY(60px); } .ios-challenge .container:not(.fade-in) .btn-box { opacity: 1; transform: translateY(0px); transition: 1s ease-in-out; transition-delay: .1s; } .about { position: relative; } .about .blur-left { top: -488px; left: -1095px; } .about .blur-right { top: -488px; right: -1045px; } .about .container:not(.fade-in) h2.title-section { animation: typing 3.5s steps(40, end); -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; } .about .relative-box { margin-bottom: 60px; } .about .relative-box.slider-height { height: 100%; max-height: 400px; } .about .slider-box { position: absolute; width: 100%; margin-right: -20px; } .about .slick-slide { width: 600px; margin-right: 20px; } .about .relative-box img { max-width: 600px; } .about p { font-style: normal; font-weight: normal; font-size: 36px; line-height: 42px; color: #D2D2D2; max-width: 1187px; width: 100%; margin-bottom: 30px; } .about p > span { font-weight: bold; } .about .desc { display: block; font-style: normal; font-weight: normal; font-size: 24px; line-height: 32px; max-width: 1187px; width: 100%; color: #767676; margin-bottom: 40px; } .about .statistic-block { max-width: 728px; width: 100%; display: flex; align-items: center; justify-content: space-between; margin: 0 auto; } .about .statistic-block .statistic-item { display: flex; flex-direction: column; align-items: center; } .about .statistic-block p { font-style: normal; font-weight: bold; font-size: 36px; line-height: 42px; text-transform: uppercase; text-align: center; margin-bottom: 7px; } .about .statistic-block span { font-style: normal; font-weight: normal; font-size: 18px; line-height: 26px; text-align: center; color: #767676; } .about .statistic-block .img { width: 236px; height: 75px; background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/custom/iosOlympiad/app-of-year.png?1635460168"); background-size: contain; } @media (-webkit-min-device-pixel-ratio: 2) { .about .statistic-block .img { background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/custom/iosOlympiad/app-of-year-2x.png?1635460166"); background-size: contain; } } .junior-dev .container { position: relative; display: flex; flex-direction: column; align-items: center; padding: 40px; background: rgba(210, 210, 210, 0.1); } .junior-dev .blur-right { right: -743px; top: -320px; } .junior-dev .stars-left span,.junior-dev .stars-right span { display: block; position: absolute; } .junior-dev .stars-left .star1 { width: 10px; height: 10px; left: 30px; top: 30px; background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/custom/iosOlympiad/icons/star-1.svg?1635203313") no-repeat 0 0; background-size: contain; animation: star-1-anim 2s linear infinite; transform-origin: center; transform-box: fill-box; } .junior-dev .stars-left .star2 { width: 17px; height: 17px; left: 46px; top: 42px; background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/custom/iosOlympiad/icons/star-2.svg?1635203325") no-repeat 0 0; background-size: contain; animation: star-2-anim 2s linear infinite; transform-origin: center; transform-box: fill-box; } .junior-dev .stars-left .star3 { width: 8px; height: 8px; left: 42px; top: 95px; background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/custom/iosOlympiad/icons/star-3.svg?1635203338") no-repeat 0 0; background-size: contain; animation: star-4-anim 2s linear infinite; transform-origin: center; transform-box: fill-box; } .junior-dev .stars-right .star4 { width: 22px; height: 22px; right: 30px; top: 134px; background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/custom/iosOlympiad/icons/star-1.svg?1635203313") no-repeat 0 0; background-size: contain; animation: star-5-anim 2s linear infinite; transform-origin: center; transform-box: fill-box; } .junior-dev .stars-right .star5 { width: 13px; height: 13px; right: 79px; top: 172px; background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/custom/iosOlympiad/icons/star-1.svg?1635203313") no-repeat 0 0; background-size: contain; animation: star-4-anim 2s linear infinite; transform-origin: center; transform-box: fill-box; } .junior-dev .stars-right .star6 { width: 19px; height: 19px; right: 60px; top: 195px; background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/custom/iosOlympiad/icons/star-2.svg?1635203325") no-repeat 0 0; background-size: contain; animation: star-2-anim 2s linear infinite; transform-origin: center; transform-box: fill-box; } .junior-dev p { font-style: normal; font-weight: bold; font-size: 36px; line-height: 42px; text-align: center; color: #D2D2D2; margin-bottom: 20px; } .junior-dev .desc { font-style: normal; font-weight: normal; font-size: 18px; line-height: 26px; display: block; color: #767676; margin-bottom: 28px; } footer { margin-top: 160px; background: rgba(210, 210, 210, 0.1); padding: 0 20px; } footer .container { padding: 40px 0; } footer .top-footer { display: flex; justify-content: space-between; align-items: center; margin-bottom: 67px; } footer .top-footer .footer-logo { width: 126px; height: 41px; background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/custom/iosOlympiad/logo.svg?1634898255") no-repeat 0 0; background-size: contain; } footer .top-footer .footer-social { display: flex; align-items: center; } footer .top-footer .footer-social a { width: 32px; height: 32px; display: flex; margin-right: 15px; } footer .top-footer .footer-social a:last-child { margin-right: 0; } footer .top-footer .footer-social .facebook { background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/custom/iosOlympiad/icons/facebook.svg?1635201010") no-repeat 0 0; background-size: contain; } footer .top-footer .footer-social .instagram { background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/custom/iosOlympiad/icons/instagram.svg?1635201017") no-repeat 0 0; background-size: contain; } footer .top-footer .footer-social .twitter { background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/custom/iosOlympiad/icons/twitter.svg?1635201024") no-repeat 0 0; background-size: contain; } footer .top-footer .footer-social .youtube { background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/custom/iosOlympiad/icons/youtube.svg?1635201031") no-repeat 0 0; background-size: contain; } footer .bottom-footer { display: flex; align-items: center; justify-content: space-between; } footer .bottom-footer .copyright { max-width: 400px; width: 100%; font-family: 'Roboto', sans-serif;; font-style: normal; font-weight: normal; font-size: 14px; line-height: 16px; color: #767676; } footer .bottom-footer .terms-privacy { display: flex; align-items: center; } footer .bottom-footer .terms-privacy a { font-style: normal; font-weight: normal; font-size: 14px; line-height: 22px; color: #767676; transition: .2s; } footer .bottom-footer .terms-privacy a:hover { color: #D2D2D2; transition: .2s; } footer .bottom-footer .divider { width: 1px; height: 20px; background: #767676; margin: 0 11px; } @media (-webkit-min-device-pixel-ratio: 2) and (max-width: 1240px) { .purple-blur { background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/custom/iosOlympiad/blur/blur-purple-mobile-2x.png?1635773573") no-repeat 0 0; background-size: contain; } .green-blur { background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/custom/iosOlympiad/blur/blur-green-mobile-2x.png?1635773584"); background-size: contain; } } @media (-webkit-min-device-pixel-ratio: 2) and (max-width: 1240px) { .purple-blur { background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/custom/iosOlympiad/blur/blur-purple-mobile-3x.png?1635773702") no-repeat 0 0; background-size: contain; } .green-blur { background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/custom/iosOlympiad/blur/blur-green-mobile-3x.png?1635773704"); background-size: contain; } } @media (max-width: 1240px) { section { margin-top: 140px; } .container { max-width: 854px; width: 100%; } .yellow-btn { font-size: 14px; line-height: 22px; width: 272px; height: 42px; } .blur-left, .blur-right { position: absolute; width: 950px; height: 950px; pointer-events: none; } .purple-blur { background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/custom/iosOlympiad/blur/blur-purple-mobile.png?1635773967") no-repeat 0 0; background-size: contain; } .green-blur { background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/custom/iosOlympiad/blur/blur-green-mobile.png?1635773971") no-repeat 0 0; background-size: contain; } h2.title-section { margin-bottom: 40px; } .header { padding: 0 20px; } .menu .menu-list li { margin-right: 80px; } .menu .menu-list li a { font-size: 14px; line-height: 22px; } .main-banner .container { align-items: flex-end; } .main-banner .text-block { max-width: 380px; width: 100%; margin-right: 20px; } .main-banner .text-block .logo { width: 126px; height: 41px; margin-bottom: 13px; } .main-banner .text-block h1 { font-size: 48px; line-height: 64px; margin-bottom: 20px; } .main-banner .text-block h1 span { margin-left: 18px; } .main-banner .text-block h1 span:before, .main-banner .text-block h1 span:after { font-size: 48px; line-height: 64px; } .main-banner .text-block h1 span:before { margin-right: 10px; } .main-banner .text-block h1 span:after { margin-left: 10px; } .main-banner .text-block p { font-size: 18px; line-height: 26px; margin-bottom: 67px; } .main-banner .img-block { max-width: 417px; width: 100%; } .challenge .blur-left { left: -383px; top: -389px; } .challenge .blur-right { top: -700px; right: -397px; } .join .blur-right { display: block; right: -137px; } .join .card-list .card-item { font-size: 18px; line-height: 26px; } .join .card-item:nth-child(1) { height: 235px; } .join .card-item:nth-child(2) { height: 140px; } .join .card-item:nth-child(3) { height: 157px; } .join .card-item:nth-child(4) { height: 218px; } .join .card-item:nth-child(5) { height: 333px; } .join .container .card-item:nth-child(5) { height: 395px; } .join .card-item:nth-child(5) span { height: 333px; margin-bottom: 20px; } .how-will .blur-left { top: -356px; left: -283px; } .how-will .blur-right { top: 9px; right: -197px; } .how-will .list .item { max-width: 219px; margin-right: 10px; margin-bottom: 40px; } .how-will .list .item img { width: 50px; height: 50px; margin-bottom: 20px; } .how-will .list .item .title-item { font-size: 24px; line-height: 32px; margin-bottom: 5px; } .how-will .list .item p { font-size: 14px; line-height: 22px; } .prizes .list .item span { font-size: 14px; line-height: 22px; } .join-card .blur-left { left: -235px; top: -885px; } .join-card .blur-right { right: -224px; bottom: -139px; top: unset; } .join-card span { font-size: 18px; line-height: 26px; margin-bottom: 30px; } .join-card .blur-left { left: -235px; top: -885px; } .join-card .blur-right { right: -224px; bottom: -139px; top: unset; } .about .slick-slide { width: 525px; } .about p { max-width: 100%; font-size: 24px; line-height: 32px; margin-bottom: 20px; } .about .desc { font-size: 18px; line-height: 26px; } .ios-challenge { position: relative; } .ios-challenge .blur-left { display: block; top: -182px; left: -170px; } .ios-challenge .card-list .card-item { font-size: 18px; line-height: 26px; max-width: 417px; height: 142px; } .ios-challenge .btn-box { margin-top: 7px; } .about .blur-left { top: -360px; right: -85px; left: unset; } .about .blur-right { top: unset; right: -126px; bottom: -273px; } .junior-dev .blur-right { right: unset; top: -11px; left: -304px; } } @media (max-width: 840px) { .challenge .text-block { max-width: 620px; } } @media (max-width: 768px) { .yellow-btn { width: 165px; height: 42px; } footer .bottom-footer { flex-direction: column; } footer .top-footer { margin-bottom: 34px; } footer .bottom-footer .copyright { text-align: center; margin-bottom: 14px; } .menu { padding: 29px 0; } .menu .menu-list li { margin-right: 40px; } .main-banner { margin-top: 140px; } .main-banner .text-block { max-width: 366px; } .main-banner .text-block h1 { font-size: 36px; line-height: 58px; } .main-banner .text-block h1 span:before, .main-banner .text-block h1 span:after { font-size: 36px; line-height: 58px; } .main-banner .text-block .logo { width: 105px; height: 35px; } .main-banner .text-block p { max-width: 292px; font-size: 14px; line-height: 22px; margin-bottom: 45px; } .main-banner .img-block { max-width: 354px; } .challenge .text-block { max-width: 100%; font-size: 18px; line-height: 26px; } .challenge .stars-left .star1 { top: -63px; left: 14px; } .challenge .stars-left .star2 { top: -45px; left: 27px; } .challenge .stars-left .star3 { top: -27px; left: 0; } .challenge .stars-right .star4 { bottom: -33px; right: 0; } .challenge .stars-right .star5 { bottom: -40px; right: 45px; } .challenge .stars-right .star6 { bottom: -61px; right: 28px; } .join .card-item { box-sizing: border-box; } .join .card-item.orange-border { height: 235px; } .join .card-item:nth-child(2) { height: 140px; } .join .card-item:nth-child(3) { height: 157px; } .join .card-item:nth-child(4) { height: 218px; } .join .card-item:nth-child(5) { height: 333px; } .join .yellow-btn { width: 100%; } .how-will .list .item { max-width: 209px; margin-right: 20px; } .how-will .list .item:nth-of-type(1+2n) { margin-right: 0px; } } @media (max-width: 710px) { .how-will .list .item { max-width: 241px; margin-right: 10px; } .how-will .list .item:nth-of-type(1+2n) { margin-right: 20px; } .how-will .list .item:nth-of-type(2n) { margin-right: 0px; } .join ul.card-list { display: flex; justify-content: space-between; flex-wrap: wrap; -moz-column-count: unset; -moz-column-gap: unset; -webkit-column-count: unset; -webkit-column-gap: unset; column-count: unset; column-gap: unset; } .join ul.card-list .card-item { float: left; height: 183px; width: 48%; margin-right: 0px; } .join .container:not(.fade-in) .card-list .card-item:nth-child(2) { transition-delay: 0s; } .join .container:not(.fade-in) .card-list .card-item:nth-child(3) { transition-delay: .2s; } .join .container:not(.fade-in) .card-list .card-item:nth-child(4) { transition-delay: .2s; } .join .container:not(.fade-in) .card-list .card-item:nth-child(5) { transition-delay: .3s; } .join ul.card-list .card-item:nth-of-type(2n) { margin-right: 0; margin-bottom: 20px; } .join .container .card-item:nth-child(5) { width: 100%; height: auto; } .join .card-item:nth-child(5) span { height: 173px; margin-bottom: 20px; } .join .yellow-btn { width: 229px; margin: 0 auto; } .ios-challenge .card-list .card-item { height: 170px; } .about .statistic-block { max-width: 350px; justify-content: center; flex-wrap: wrap; } .about .statistic-block .statistic-item { margin-right: 30px; } .about .statistic-block .statistic-item:last-child { margin-right: 0; } .about .statistic-block .statistic-item:nth-child(3) { margin-top: 20px; margin-right: 0; order: 2; } .about .statistic-block .statistic-item p { font-size: 24px; line-height: 32px; margin-bottom: 5px; } .about .statistic-block .statistic-item span { font-size: 16px; line-height: 24px; } .about .statistic-block .img { width: 187px; height: 58px; background: url("https://cdn-rdstaticassets.readdle.com/assets/readdle/modern_2019/pages/custom/iosOlympiad/app-of-year-mobile-2x.png?1635460166") no-repeat 0 0; background-size: contain; } } @media (max-width: 575px) { .yellow-btn { width: 165px; height: 44px; } h2.title-section { font-size: 24px; line-height: 32px; } h2.title-section:before, h2.title-section:after { font-size: 24px; line-height: 32px; } h2.title-section span:before, h2.title-section span:after { font-size: 24px; line-height: 32px; } .slick-dots { display: flex; justify-content: center; bottom: -40px; } .slick-dots li { position: relative; width: 18px; height: 18px; display: flex; justify-content: center; align-items: center; margin-right: 11px; border-radius: 50%; } .slick-dots li:last-child { margin-right: 0; } .slick-dots li:before { content: ''; position: absolute; width: 8px; height: 8px; background: #767676; border-radius: 50%; opacity: 0.3; } .slick-dots li.slick-active { border: 1px solid #E7B553; } .slick-dots li.slick-active:before { opacity: 1; background: #E7B553; } footer .bottom-footer .copyright { max-width: 100%; } .main-banner { margin-top: 100px; } .main-banner .container { justify-content: center; } .main-banner .text-block { max-width: 100%; display: flex; flex-direction: column; align-items: center; margin-right: 0; } .main-banner .text-block h1 { font-size: 42px; line-height: 64px; } .main-banner .text-block h1 span:before, .main-banner .text-block h1 span:after { font-size: 36px; line-height: 58px; } .main-banner .text-block h1 span { margin-left: 13px; } .main-banner .text-block p { max-width: 350px; text-align: center; margin-bottom: 30px; } .main-banner .img-block { display: none; } .join ul.card-list { display: flex; flex-wrap: wrap; -moz-column-count: unset; -moz-column-gap: unset; -webkit-column-count: unset; -webkit-column-gap: unset; column-count: unset; column-gap: unset; } .join .card-list .card-item { width: 100%; max-width: 257px; } .join .third-column .card-item { height: 100%; } .join .card-item:nth-child(2) { order: 2; } .join .card-item:nth-child(3) { order: 1; height: 100%; } .join .card-item:nth-child(4) { order: 3; height: 100%; border: none; } .join .card-list .card-item:nth-child(5) { max-width: 100%; order: 4; } .join .card-list li:last-child { order: 5; height: 100%; border: none; } .how-will .list { -moz-column-count: 2; -moz-column-gap: 20px; -webkit-column-count: 2; -webkit-column-gap: 20px; column-count: 2; column-gap: 20px; } .how-will .list .item { max-width: 225px; margin-right: 0; } .how-will .list .item:nth-of-type(3n) { margin-right: 0; margin-bottom: 0; } .how-will .list .item:nth-child(n+4) { margin-bottom: 40px; } .how-will .list .item:nth-child(5) { margin-bottom: 0; } .how-will .list .item:last-child { margin-bottom: 0; } .prizes .list { flex-wrap: wrap; justify-content: center; } .prizes .list .item { max-width: 240px; margin-right: 0; margin-bottom: 40px; } .prizes .list .item:first-child { margin-right: 20px; margin-bottom: 40px; } .prizes .list .item:last-child { margin-bottom: 0; } .join-card .container { padding: 40px 72px; } .join-card p { font-size: 24px; line-height: 32px; margin-bottom: 10px; } .join-card span { font-size: 16px; line-height: 24px; } .ios-challenge .card-list .card-item { max-width: 100%; height: 170px; text-align: center; padding: 20px; margin-bottom: 20px; } .about .slick-slide { width: 443px; } .about .statistic-block { max-width: 100%; justify-content: center; flex-wrap: wrap; } .about .statistic-block .statistic-item { margin-right: 30px; } .about .statistic-block .statistic-item:nth-child(3) { margin-top: 20px; margin-right: 0; order: 2; } .about .statistic-block .statistic-item:last-child { margin-right: 0; } .junior-dev .container { padding: 30px; } .junior-dev p { font-size: 24px; line-height: 32px; margin-bottom: 10px; } .junior-dev .desc { font-size: 16px; line-height: 24px; margin-bottom: 30px; text-align: center; } .junior-dev .stars-left .star1 { left: 10px; top: 25px; } .junior-dev .stars-left .star2 { left: 26px; top: 37px; } .junior-dev .stars-left .star3 { left: 22px; top: 90px; } .junior-dev .stars-right .star4 { right: 10px; top: 104px; } .junior-dev .stars-right .star5 { right: 59px; top: 144px; } .junior-dev .stars-right .star6 { right: 40px; top: 165px; } } @media (max-width: 520px) { h2.title-section { justify-content: center; width: 100%; } h2.title-section span { width: 100%; justify-content: center; } h2.title-section span:first-child:before { margin-right: 10px; } h2.title-section span:last-child:after { margin-left: 10px; } h2.title-section:before { margin-right: 10px; } h2.title-section:after { margin-left: 10px; } .menu .yellow-btn { display: none; } .menu .burger-button-custom { display: block; outline: none; z-index: 99; } .menu .menu-box { display: block; position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 100vh; background: rgba(2, 2, 2, .6); pointer-events: none; opacity: 0; transition: .3s ease; z-index: 5; } .menu .menu-box.open { opacity: 1; transition: .3s ease; pointer-events: auto; } .menu .menu-list { flex-direction: column; justify-content: center; padding-top: 62px; height: 248px; background: #050707; box-sizing: border-box; } .menu .menu-list li { margin-right: 0; margin-bottom: 40px; } .challenge .blur-left { left: -450px; } .challenge .blur-right { right: -450px; } .join .container:not(.fade-in) h2.title-section { animation: none; } .join .blur-right { right: -450px; top: -120px; } .join .container .card-list .card-item { animation: none; opacity: 1; transform: translateY(0); transition: unset; } .join .container:not(.fade-in) .card-list .card-item { transition: unset; transform: unset; } .join .slick-slide.card-item { max-width: 100% !important; height: 168px !important; margin-top: 0 !important; margin-bottom: 0 !important; order: unset !important; border: none !important; } .join .slick-slide.card-item span { border: none; height: 168px !important; } .join .slick-slider { margin: 0 -10px; } .join .slick-slide { margin-right: 10px !important; margin-left: 10px !important; } .join .yellow-btn { display: none; } .join .box-button { display: flex; justify-content: center; } .join .box-button .yellow-btn { display: flex; margin-top: 68px; } .how-will .container:not(.fade-in) h2.title-section { animation: none; } .how-will .blur-left { left: -450px; } .how-will .blur-right { right: -450px; } .how-will .list .item { max-width: 100%; margin-right: 0; } .how-will .list .item:nth-of-type(3n), .how-will .list .item:nth-child(5) { margin-bottom: 40px; } .how-will .list .item:last-child { margin-bottom: 0; } .how-will .list .item p { font-size: 16px; line-height: 24px; } .prizes .container:not(.fade-in) h2.title-section { animation: none; } .prizes .list .item:first-child { margin-right: 0; } .join-card .container { padding: 39px; } .ios-challenge .container:not(.fade-in) h2.title-section span:first-child, .ios-challenge .container:not(.fade-in) h2.title-section span:last-child { animation: none; } .ios-challenge .card-list { display: block; margin-bottom: 68px; } .ios-challenge .container .card-list .card-item { animation: none; opacity: 1; transform: translateY(0); transition: unset; } .ios-challenge .container:not(.fade-in) .card-list .card-item { transition: unset; transform: unset; } .ios-challenge .card-list .card-item.blue { border: none; } .ios-challenge .card-list .card-item.orange { border: none; } .ios-challenge .card-list .card-item { padding: 30px; height: 160px; margin-bottom: 0; margin-right: 0; } .ios-challenge .card-list .card-item:nth-of-type(2n) { margin-right: 0px; } .ios-challenge .btn-box { display: flex; justify-content: center; align-items: center; margin-top: 23px; opacity: 1; transform: none; transition: none; } .ios-challenge .container:not(.fade-in) .btn-box { transform: none; transition: none; } .ios-challenge .slick-slider { margin: 0 -10px; } .ios-challenge .slick-slide { margin-right: 10px !important; margin-left: 10px !important; } .ios-challenge .yellow-btn { margin-top: 68px; } .about .container:not(.fade-in) h2.title-section { animation: none; } .about p { font-size: 18px; line-height: 26px; text-align: center; } .about .desc { font-size: 16px; line-height: 24px; } .about .slider-box { position: relative; margin: 0px; } .about .slick-slider { margin:0 -10px; } .about .slick-slide { margin-right:10px; margin-left:10px; } .junior-dev .blur-right { right: -450px; left: unset; top: -111px; } .junior-dev .stars-left .star1 { left: 10px; top: 25px; } .junior-dev .stars-left .star2 { left: 26px; top: 37px; } .junior-dev .stars-left .star3 { left: 22px; top: 90px; } .junior-dev .stars-right .star4 { right: 10px; top: 104px; } .junior-dev .stars-right .star5 { right: 59px; top: 144px; } .junior-dev .stars-right .star6 { right: 40px; top: 165px; } footer .container { padding: 40px 0; } footer .top-footer { flex-direction: column; align-items: center; margin-bottom: 34px; } footer .top-footer .footer-logo { width: 105px; height: 35px; margin-bottom: 103px; } footer .bottom-footer { flex-direction: column; align-items: center; } footer .bottom-footer .copyright { margin-bottom: 14px; } } @media (max-width: 420px) { .title-box { align-items: center; } .junior-dev .stars-right { display: none; } .junior-dev p { max-width: 257px; width: 100%; } } @media (max-width: 375px) { .main-banner .text-block h1 { font-size: 42px; line-height: 64px; } .main-banner .text-block h1 span:before, .main-banner .text-block h1 span:after { font-size: 36px; line-height: 58px; max-width: 335px; } .main-banner .text-block p { font-size: 16px; line-height: 24px; } .about .statistic-block .statistic-item p { font-size: 20px; line-height: 28px; } .about .statistic-block .statistic-item span { font-size: 11px; line-height: 21px; } .about .statistic-block .img { width: 187px; height: 58px; } } @media (max-width: 360px) { .main-banner .text-block h1,.main-banner .text-block h1 span:before, .main-banner .text-block h1 span:after { font-size: 36px; line-height: 58px; } .main-banner .text-block h1 span { margin-left: 7px; } }