:root { --main-color: #1C1316; --main-red: #F43A3B; }

body { margin: 0; padding: 0; }

footer.footer { display: none; }

main .container { margin: 0 auto; padding: 0 15px; position: relative; }

@media (min-width: 576px) { main .container { max-width: 540px; } }
@media (min-width: 992px) { main .container { max-width: 700px; } }
@media (min-width: 1200px) { main .container { max-width: 700px; } }
.out-of-header { background: #E6E4E1; color: #fff; font-family: "Nunito", sans-serif; overflow-x: hidden; }

main * { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; }
main h1 { font-size: 35px; font-style: normal; font-weight: 800; line-height: 130%; margin: 0 0 20px; }
main h2 { font-size: 26px; font-weight: 600; margin: 0 0 8px; }
main h3 { font-size: 20px; font-style: normal; font-weight: 800; line-height: 110%; }
main p { font-size: 16px; font-style: normal; font-weight: 400; line-height: 130%; }
main a { color: inherit; cursor: pointer; font-weight: 600; }
main ul { margin: 0; padding: 0; }
main ul li { list-style-type: none; margin: 0; padding: 0; }
main ul li::before { content: none; }
main ul li:first-child { padding-top: 20px; }
main .landing-btn { background: var(--main-red); border-radius: 8px; color: #fff; display: block; font-size: 15px; font-style: normal; font-weight: 700; line-height: normal; letter-spacing: 0.3px; margin: 0 auto; padding: 16px; position: relative; text-align: center; text-decoration: none; text-transform: uppercase; width: 100%; z-index: 2; }
main .js-content[data-current-tab="offline"] [data-tab="online"] { display: none; }
main .js-content[data-current-tab="online"] [data-tab="offline"] { display: none; }
main .js-content { background: var(--main-color); border-radius: 33px 33px 0 0; -webkit-box-shadow: 0 -18px 55.385px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 -18px 55.385px 0 rgba(0, 0, 0, 0.25); margin-top: 50px; padding: 50px 0; }
main .whiteBox { background: #fff; border-radius: 10px; color: #1C1316; padding: 20px; }
main .welcome { background: var(--main-color); border-radius: 0 0 33px 33px; -webkit-box-shadow: 0 18px 55.385px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 18px 55.385px 0 rgba(0, 0, 0, 0.25); margin: -50px 0 0; padding: 90px 0 50px; position: relative; }
main .welcome .container { display: grid; gap: 20em; }
main .welcome h1 { line-height: 115%; margin: 0 0 10px; }
main .welcome-text { position: relative; z-index: 1; }
main .landing-logo { margin: 0 auto; position: relative; z-index: 1; width: -webkit-max-content; width: -moz-max-content; width: max-content; }
main .visual { position: absolute; left: 50%; top: -15%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 0; }
main .scroll-icon { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 24px; margin: 0 auto; }
main .scroll-icon span { -webkit-animation: scroll 1.5s infinite; animation: scroll 1.5s infinite; border: solid #ff3b3b; border-width: 0 3px 3px 0; height: 14px; -webkit-transform: rotate(45deg); transform: rotate(45deg); margin: -3px; width: 14px; }
main .scroll-icon span:nth-child(2) { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; margin: 3px; }
main .prizes { color: var(--main-color); margin: 10px 0 44px; }
main .prizes p { font-size: 16px; }
main .prizes .swiper { overflow: visible; }
main .prizes .swiper-wrapper { padding: 24px 0; }
main .prizes .swiper-slide { text-align: center; width: auto; }
main .prizes .swiper-slide img { width: 100%; }
main .prizes .swiper-pagination { bottom: 21%; }
main .prizes .swiper-pagination-bullet { background: var(--main-color); height: 6px; opacity: 0.5; margin: 0 4px; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; width: 6px; }
main .prizes .swiper-pagination-bullet-active { border-radius: 120px; opacity: 1; width: 15px; }
main .terms-box { display: grid; gap: 15px; }
main .terms-box__item { display: grid; gap: 15px; }
main .terms-title { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; }
main .terms-title img { width: 24px; }
main .landing-tabs { background: #fff; border-radius: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 20px auto; padding: 1px; width: -webkit-max-content; width: -moz-max-content; width: max-content; }
main .landing-tabs__item { display: contents; }
main .landing-tabs__item .js-tab { border-radius: 10px; color: var(--main-color); font-size: 15px; font-style: normal; font-weight: 600; line-height: 120%; padding: 12px 15px; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; text-decoration: none; }
main .landing-tabs__item.active .js-tab { background: var(--main-red); color: #fff; font-weight: 700; }
main .maps { display: grid; gap: 20px; margin: 50px 0; }
main .maps-title { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; }
main .maps-title img { height: 24px; }
main .check { display: grid; gap: 20px; margin: 150px 0 100px; position: relative; }
main .regis, main .important { position: relative; }
main .important p + p { margin-top: 10px; }
main .participants h3 { margin: 0 0 10px; }
main .participants .landing-btn { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 8px; margin: 30px 0 0; }
main .participants .landing-btn p { font-size: inherit; }
main .faq { margin: 100px 0; }
main .accordion { margin: 0 0 10px 0; padding: 0px; position: relative; }
main .accordion__text { background: #fff; border-radius: 15px; -webkit-box-shadow: 0px 5px 25px rgba(43, 93, 168, 0.15); box-shadow: 0px 5px 25px rgba(43, 93, 168, 0.15); color: var(--main-color); cursor: pointer; font-size: 16px; font-style: normal; font-weight: 500; margin: 0; padding: 20px 60px 20px 20px; position: relative; z-index: 2; }
main .accordion__text::after { background: url(../img/accordion-after.svg) no-repeat; background-size: contain; content: ''; height: 24px; position: absolute; right: 20px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; width: 24px; }
main .accordion__text-opened::after { -webkit-transform: translateY(-50%) rotateX(180deg); transform: translateY(-50%) rotateX(180deg); }
main .accordion__body { background: var(--main-red); border-radius: 0 0 15px 15px; -webkit-box-shadow: 0px 5px 25px rgba(43, 93, 168, 0.15); box-shadow: 0px 5px 25px rgba(43, 93, 168, 0.15); display: none; padding: 30px 20px 30px 20px; -webkit-transform: translateY(-15px); transform: translateY(-15px); z-index: 1; }
main .accordion__body ol li::before { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); }
main .accordion__body ul li { padding-left: 25px; }
main .accordion__body ul li::before { content: ''; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); }
main .accordion__body * { font-size: 16px; line-height: 20px; }
main .archive { position: relative; }
main .archive-block { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; margin-top: 10px; }
main .archive-block p { font-size: 12px; line-height: 120%; min-width: 67px; }
main .archive .swiper-wrapper { padding: 0.5em 0 2em; }
main .archive .swiper-pagination-bullet { background: #fff; height: 6px; opacity: 0.5; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; width: 6px; }
main .archive .swiper-pagination-bullet-active { border-radius: 120px; opacity: 1; width: 15px; }
main .winner { background: #fff; border-radius: 10px; color: var(--main-color); display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12px; min-width: 255px; padding: 18px 15px; width: 100%; }
main .video-archive { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: var(--main-red); border-radius: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 13px 16px; }
main .video-archive img { vertical-align: middle; }
main .winner1 { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12px; width: 100%; padding: 0 20px; }
main .cloud { -webkit-animation: moveX 25s linear infinite; animation: moveX 25s linear infinite; background: url(../img/cloud2.png) no-repeat; background-size: contain; left: -100vw; position: absolute; z-index: 0; }
main .c-1 { background: url(../img/cloud.png) no-repeat; background-size: contain; height: 98px; top: 41em; width: 249px; }
main .c-2 { -webkit-animation-delay: 1s; animation-delay: 1s; height: 108px; top: -7em; width: 190px; }
main .c-3 { -webkit-animation-delay: 2s; animation-delay: 2s; height: 97px; top: -6.5em; width: 170px; }
main .c-4 { -webkit-animation-delay: .5s; animation-delay: .5s; background: url(../img/cloud.png) no-repeat; background-size: contain; height: 101px; top: -6em; width: 260px; }

@media (max-width: 1023px) { main .important-img { display: none; } }
@media (min-width: 1023px) { main h1 { font-size: 60px; margin: 0 0 30px; }
  main h3 { font-size: 30px; }
  main p { font-size: 28px; }
  main ul li { padding-top: 30px; }
  main .landing-btn { padding: 16px 24px; width: 288px; }
  main .landing-logo { margin: 0; }
  main .whiteBox { padding: 30px; }
  main .welcome { margin-top: 0; min-height: 1075px; padding: 100px 0; }
  main .welcome .container { gap: 40px; }
  main .visual { top: 42%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
  main .scroll-icon { position: absolute; bottom: -35em; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 56px; }
  main .scroll-icon span { border-width: 0 6px 6px 0; height: 28px; width: 28px; }
  main .prizes .swiper-slide { max-width: 360px; }
  main .prizes .swiper-scrollbar { background: #C8C7C7; border-radius: 42.755px; bottom: -3%; height: 8px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 660px; }
  main .prizes .swiper-scrollbar-drag { background: var(--main-color); border: 1px solid var(--main-red); }
  main .prizes .landing-btn { margin-top: 44px; }
  main .landing-tabs { margin: 20px 0; padding: 2px; }
  main .js-content { padding: 110px 0; }
  main .terms-box { gap: 20px; }
  main .terms-title { gap: 20px; }
  main .terms-title img { width: 40px; }
  main .maps { margin: 80px 0; }
  main .maps-title { gap: 20px; }
  main .maps-title img { height: 40px; }
  main .maps .landing-btn { margin: 0; }
  main .check { grid-template-areas: "form important" "participants participants"; }
  main .check .regis { grid-area: form; }
  main .check .important { grid-area: important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 24px; }
  main .check .important img { width: 149px; }
  main .check .important p { font-size: 18px; }
  main .check .participants { grid-area: participants; }
  main .faq { margin: 160px 0; }
  main .accordion { margin: 0 0 20px 0; }
  main .accordion__text { font-size: 20px; }
  main .accordion__body ul li { padding-left: 30px; }
  main .accordion__body * { font-size: 20px; }
  main .archive-block p { font-size: 20px; }
  main .winner { gap: 3em; padding: 20px 40px; }
  main .winner1 { gap: 6.5em; }
  main .video-archive { padding: 20px; }
  main .cloud { -webkit-animation-duration: 45s; animation-duration: 45s; }
  main .c-1 { height: 175px; top: 62em; width: 440px; }
  main .c-2 { height: 190px; top: -12em; width: 335px; }
  main .c-3 { height: 220px; top: 0; width: 386px; }
  main .c-4 { height: 200px; top: 18em; width: 520px; } }
@-webkit-keyframes moveX { from { left: -100vw; }
  to { left: 100vw; } }
@keyframes moveX { from { left: -100vw; }
  to { left: 100vw; } }
@-webkit-keyframes scroll { 0% { opacity: 0; -webkit-transform: rotate(45deg) translate(-5px, -5px); transform: rotate(45deg) translate(-5px, -5px); }
  50% { opacity: 1; -webkit-transform: rotate(45deg) translate(0px, 0px) scale(1.5); transform: rotate(45deg) translate(0px, 0px) scale(1.5); }
  100% { opacity: 0; -webkit-transform: rotate(45deg) translate(5px, 5px); transform: rotate(45deg) translate(5px, 5px); } }
@keyframes scroll { 0% { opacity: 0; -webkit-transform: rotate(45deg) translate(-5px, -5px); transform: rotate(45deg) translate(-5px, -5px); }
  50% { opacity: 1; -webkit-transform: rotate(45deg) translate(0px, 0px) scale(1.5); transform: rotate(45deg) translate(0px, 0px) scale(1.5); }
  100% { opacity: 0; -webkit-transform: rotate(45deg) translate(5px, 5px); transform: rotate(45deg) translate(5px, 5px); } }
