@charset "UTF-8"; /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ ::-webkit-input-placeholder { color: unset; } ::-moz-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::-ms-input-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } @font-face { font-family: "Wix Madefor Display"; src: url("../fonts/WixMadeforDisplay-VariableFont_wght.ttf"); } * { font-synthesis: none; } :root { --index: calc(1vw + 1vh); --main-font: "Wix Madefor Display"; --font-16: 1rem; --font-18: 1.25rem; --pink: #B63F8F; --black: #1E1F24; --line-height: 1.4; --white: #fff; --gradient: linear-gradient(66deg, #B90063 0%, #1E1F24 45.81%); --shadow: 0px 14px 20px rgba(33, 33, 33, 0.2); --shadow-hover: 0px 25px 50px 0px rgba(0, 0, 0, 0.10), 0px -25px 50px 0px rgba(255, 255, 255, 0.50); --background: #1E1F24; } body { font-family: "Wix Madefor Display"; font-optical-sizing: auto; font-style: normal; font-size: var(--font-16); font-weight: 600; line-height: normal; color: var(--white); min-width: 320px; position: relative; overflow-x: hidden; min-height: 100dvh; scroll-behavior: smooth; text-rendering: optimizeSpeed; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: var(--background); } ::-moz-selection { background-color: var(--pink); color: var(--white); } ::selection { background-color: var(--pink); color: var(--white); } input, textarea { outline: none; caret-color: var(--pink); } input:focus-visible, textarea:focus-visible { outline: none; } .container { max-width: 1482px; width: 100%; margin: 0 auto; padding: 0 15px; } @media (max-width: 1628px) { .container { width: calc(100% - 88px); margin-left: 88px; } } @media (max-width: 960px) { .container { width: 100%; margin-left: auto; } } section { padding: 6.25rem 0; } .flex-container { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .button__pink { display: inline-block; padding: 16px 32px; border-radius: 40px; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; position: relative; z-index: 1; overflow: hidden; } .button__pink::after { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: -1; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background: -webkit-gradient(linear, right top, left top, from(#3A4291), color-stop(50%, #B63F8F), to(#D65097)); background: linear-gradient(270deg, #3A4291 0%, #B63F8F 50%, #D65097 100%); background-size: 200% 200%; } .button__pink:hover::after { background: -webkit-gradient(linear, right top, left top, from(#3A4291), color-stop(50%, #B63F8F), to(#D65097)); background: linear-gradient(270deg, #3A4291 0%, #B63F8F 50%, #D65097 100%); background-size: 100% 100%; } .button__transparent { display: inline-block; padding: 16px 32px; border-radius: 40px; border: 1px solid var(--white); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; margin-top: 2.5rem; position: relative; z-index: 2; } .button__transparent:hover { background: var(--white); color: var(--black); } .h2 { font-size: clamp(1rem, var(--index) * 2.825, 3rem); font-weight: 800; margin-bottom: 1.5rem; } .grid-1{display: grid; grid-gap:1.875rem; grid-template-columns: repeat(1, 1fr);} .grid-2{display: grid; grid-gap:1.875rem; grid-template-columns: repeat(2, 1fr);} .grid-3{display: grid; grid-gap:1.875rem; grid-template-columns: repeat(3, 1fr);} .grid-4{display: grid; grid-gap:1.875rem; grid-template-columns: repeat(4, 1fr);} .grid-5{display: grid; grid-gap:1.875rem; grid-template-columns: repeat(5, 1fr);} .grid-6{display: grid; grid-gap:1.875rem; grid-template-columns: repeat(6, 1fr);} .grid-7{display: grid; grid-gap:1.875rem; grid-template-columns: repeat(7, 1fr);} .grid-8{display: grid; grid-gap:1.875rem; grid-template-columns: repeat(8, 1fr);} .grid-9{display: grid; grid-gap:1.875rem; grid-template-columns: repeat(9, 1fr);} .grid-10{display: grid; grid-gap:1.875rem; grid-template-columns: repeat(10, 1fr);} .grid-11{display: grid; grid-gap:1.875rem; grid-template-columns: repeat(11, 1fr);} .grid-12{display: grid; grid-gap:1.875rem; grid-template-columns: repeat(12, 1fr);} @media (max-width: 1200px) { .grid-5 { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)) } } @media (max-width: 960px) { .grid-2 { grid-template-columns: repeat(1, 1fr); } .grid-5 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 570px) { .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 { grid-template-columns: repeat(1, 1fr); } } /* nav */ .nav { background-color: #1E1F24; height: 100%; position: fixed; z-index: 5; -webkit-transition: -webkit-transform 0.3s ease-out; transition: -webkit-transform 0.3s ease-out; transition: transform 0.3s ease-out; transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; -webkit-transform: translateX(-240px); -ms-transform: translateX(-240px); transform: translateX(-240px); } .nav menu { margin-top: 5rem; -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; opacity: 0; } .nav menu ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 24px; } .nav menu ul a { font-weight: 600; font-size: 1.5rem; -webkit-transition: color 0.3s ease-out; transition: color 0.3s ease-out; } .nav menu ul a:hover { color: var(--pink); } .nav .button__pink { margin-top: 2rem; } .nav__wrap { padding: 48px 15px; } @media (max-width: 960px) { .nav { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } } .hamburger { width: 40px; display: block; cursor: pointer; position: absolute; right: 15px; } .top-line, .bottom-line, .middle-line { transform-box: fill-box; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; } .hamburger.active .top-line { -webkit-animation: down-rotate 0.6s ease-out both; animation: down-rotate 0.6s ease-out both; } .hamburger.active .bottom-line { -webkit-animation: up-rotate 0.6s ease-out both; animation: up-rotate 0.6s ease-out both; } .hamburger.active .middle-line { -webkit-animation: hide 0.6s ease-out forwards; animation: hide 0.6s ease-out forwards; } .hamburger:not(.active) .top-line { -webkit-animation: up-rotate-reverse 0.6s ease-out both; animation: up-rotate-reverse 0.6s ease-out both; } .hamburger:not(.active) .bottom-line { -webkit-animation: down-rotate-reverse 0.6s ease-out both; animation: down-rotate-reverse 0.6s ease-out both; } .hamburger:not(.active) .middle-line { -webkit-animation: show 0.6s ease-out forwards; animation: show 0.6s ease-out forwards; } @-webkit-keyframes up-rotate { 0% { -webkit-animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53); animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53); -webkit-transform: translateY(0px); transform: translateY(0px); } 30% { -webkit-transform-origin: center; transform-origin: center; -webkit-animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translateY(-10px) rotate(45deg) scale(0.9); transform: translateY(-10px) rotate(45deg) scale(0.9); } } @keyframes up-rotate { 0% { -webkit-animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53); animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53); -webkit-transform: translateY(0px); transform: translateY(0px); } 30% { -webkit-transform-origin: center; transform-origin: center; -webkit-animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translateY(-10px) rotate(45deg) scale(0.9); transform: translateY(-10px) rotate(45deg) scale(0.9); } } @-webkit-keyframes down-rotate { 0% { -webkit-animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53); animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53); -webkit-transform: translateY(0px); transform: translateY(0px); } 30% { -webkit-transform-origin: center; transform-origin: center; -webkit-animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translateY(10px) rotate(-45deg) scale(0.9); transform: translateY(10px) rotate(-45deg) scale(0.9); } } @keyframes down-rotate { 0% { -webkit-animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53); animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53); -webkit-transform: translateY(0px); transform: translateY(0px); } 30% { -webkit-transform-origin: center; transform-origin: center; -webkit-animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translateY(10px) rotate(-45deg) scale(0.9); transform: translateY(10px) rotate(-45deg) scale(0.9); } } @-webkit-keyframes hide { 29% { opacity: 1; } 30% { opacity: 0; } 100% { opacity: 0; } } @keyframes hide { 29% { opacity: 1; } 30% { opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes up-rotate-reverse { 0% { -webkit-animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53); animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53); -webkit-transform: translateY(-10px) rotate(45deg) scale(0.9); transform: translateY(-10px) rotate(45deg) scale(0.9); } 30% { -webkit-transform-origin: center; transform-origin: center; -webkit-animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translateY(0px); transform: translateY(0px); } } @keyframes up-rotate-reverse { 0% { -webkit-animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53); animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53); -webkit-transform: translateY(-10px) rotate(45deg) scale(0.9); transform: translateY(-10px) rotate(45deg) scale(0.9); } 30% { -webkit-transform-origin: center; transform-origin: center; -webkit-animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translateY(0px); transform: translateY(0px); } } @-webkit-keyframes down-rotate-reverse { 0% { -webkit-animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53); animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53); -webkit-transform: translateY(10px) rotate(-45deg) scale(0.9); transform: translateY(10px) rotate(-45deg) scale(0.9); } 30% { -webkit-transform-origin: center; transform-origin: center; -webkit-animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translateY(0px); transform: translateY(0px); } } @keyframes down-rotate-reverse { 0% { -webkit-animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53); animation-timing-function: cubic-bezier(0.16, -0.88, 0.97, 0.53); -webkit-transform: translateY(10px) rotate(-45deg) scale(0.9); transform: translateY(10px) rotate(-45deg) scale(0.9); } 30% { -webkit-transform-origin: center; transform-origin: center; -webkit-animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: translateY(0px); transform: translateY(0px); } } @-webkit-keyframes show { 0% { opacity: 0; } 1% { opacity: 1; } 100% { opacity: 1; } } @keyframes show { 0% { opacity: 0; } 1% { opacity: 1; } 100% { opacity: 1; } } #hamburger2 { display: none; } @media (max-width: 960px) { .header__flex-button { display: none; } #hamburger2 { display: block; } } /* header */ .header { padding: 1.75rem 0; background: rgba(31, 31, 36, 0.37); position: fixed; top: 0; left: auto; right: auto; width: 100%; z-index: 2; } .gradient { background: var(--gradient); } .header__flex { gap: 2.5rem; } .header__flex-button { margin-left: auto; font-size: 1.125rem; font-weight: 600; } .header__tels a { display: block; font-weight: 700; } @media (max-width: 960px) { .header__tels { display: none; } } /* main */ .main { background: fixed url(../images/dist/banner_2026.png) no-repeat right bottom/contain, linear-gradient(66deg, #B90063 0%, #1E1F24 45.81%); height: 100dvh; position: relative; } /* .parallax { height: 500px; background-image: url('../images/dist/v.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; z-index: 1; } */ .main__left { max-width: 50%; position: relative; } .main__left img { margin-top: 13.8125rem; } .main__left p { line-height: 1.8; } .main__right-img { margin-top: 8rem; margin-left: auto; } .grid { display: -ms-grid; display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); } @media (max-width: 769px) { .main .grid { display: block; } .main__left { max-width: none; } .main__left img { width: 100%; margin-top: 8.8125rem; } } .tko { background: -webkit-gradient(linear, right top, left top, from(#3A4291), color-stop(50%, #B63F8F), to(#D65097)); background: linear-gradient(270deg, #3A4291 0%, #B63F8F 50%, #D65097 100%); position: relative; } .tko::after { content: ""; width: 100%; height: 100%; top: 0; position: absolute; background: url(../images/dist/Waves.svg) no-repeat right center; opacity: 0.1; } .themes { background: linear-gradient(63deg, #B90063 -23.08%, #1E1F24 22.2%); } .theme_1 { -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; background: url(../images/dist/figurs/1.svg) no-repeat center/cover; } .theme_1:hover { background: url(../images/dist/figurs/1.svg) no-repeat center/cover, -webkit-gradient(linear, right top, left top, from(#3A4291), color-stop(50%, #B63F8F), to(#D65097)); background: url(../images/dist/figurs/1.svg) no-repeat center/cover, linear-gradient(270deg, #3A4291 0%, #B63F8F 70%, #D65097 93%); } .theme_2 { -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; background: url(../images/dist/figurs/2.svg) no-repeat center/cover; } .theme_2:hover { background: url(../images/dist/figurs/2.svg) no-repeat center/cover, -webkit-gradient(linear, right top, left top, from(#3A4291), color-stop(50%, #B63F8F), to(#D65097)); background: url(../images/dist/figurs/2.svg) no-repeat center/cover, linear-gradient(270deg, #3A4291 0%, #B63F8F 70%, #D65097 93%); } .theme_3 { -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; background: url(../images/dist/figurs/3.svg) no-repeat center/cover; } .theme_3:hover { background: url(../images/dist/figurs/3.svg) no-repeat center/cover, -webkit-gradient(linear, right top, left top, from(#3A4291), color-stop(50%, #B63F8F), to(#D65097)); background: url(../images/dist/figurs/3.svg) no-repeat center/cover, linear-gradient(270deg, #3A4291 0%, #B63F8F 70%, #D65097 93%); } .theme_4 { -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; background: url(../images/dist/figurs/4.svg) no-repeat center/cover; } .theme_4:hover { background: url(../images/dist/figurs/4.svg) no-repeat center/cover, -webkit-gradient(linear, right top, left top, from(#3A4291), color-stop(50%, #B63F8F), to(#D65097)); background: url(../images/dist/figurs/4.svg) no-repeat center/cover, linear-gradient(270deg, #3A4291 0%, #B63F8F 70%, #D65097 93%); } .theme_5 { -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; background: url(../images/dist/figurs/5.svg) no-repeat center/cover; } .theme_5:hover { background: url(../images/dist/figurs/5.svg) no-repeat center/cover, -webkit-gradient(linear, right top, left top, from(#3A4291), color-stop(50%, #B63F8F), to(#D65097)); background: url(../images/dist/figurs/5.svg) no-repeat center/cover, linear-gradient(270deg, #3A4291 0%, #B63F8F 70%, #D65097 93%); } .theme_6 { -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; background: url(../images/dist/figurs/6.svg) no-repeat center/cover; } .theme_6:hover { background: url(../images/dist/figurs/6.svg) no-repeat center/cover, -webkit-gradient(linear, right top, left top, from(#3A4291), color-stop(50%, #B63F8F), to(#D65097)); background: url(../images/dist/figurs/6.svg) no-repeat center/cover, linear-gradient(270deg, #3A4291 0%, #B63F8F 70%, #D65097 93%); } .theme_7 { -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; background: url(../images/dist/figurs/7.svg) no-repeat center/cover; } .theme_7:hover { background: url(../images/dist/figurs/7.svg) no-repeat center/cover, -webkit-gradient(linear, right top, left top, from(#3A4291), color-stop(50%, #B63F8F), to(#D65097)); background: url(../images/dist/figurs/7.svg) no-repeat center/cover, linear-gradient(270deg, #3A4291 0%, #B63F8F 70%, #D65097 93%); } .theme_8 { -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; background: url(../images/dist/figurs/8.svg) no-repeat center/cover; } .theme_8:hover { background: url(../images/dist/figurs/8.svg) no-repeat center/cover, -webkit-gradient(linear, right top, left top, from(#3A4291), color-stop(50%, #B63F8F), to(#D65097)); background: url(../images/dist/figurs/8.svg) no-repeat center/cover, linear-gradient(270deg, #3A4291 0%, #B63F8F 70%, #D65097 93%); } .themes .grid-4 { display: -ms-grid; display: grid; grid-gap: 1.875rem; -ms-grid-columns: 1fr 1.875rem 1fr 1.875rem 1fr 1.875rem 1fr; grid-template-columns: repeat(4, 1fr); margin-top: 5rem; } .themes .grid-4 div { border: 1px solid var(--pink, #B63F8F); height: 350px; padding: 1.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .themes .grid-4 div span { font-size: 4rem; font-weight: 800; } .themes .grid-4 div p { margin-top: auto; } @media (max-width: 1024px) { .themes .grid-4 { -ms-grid-columns: 1fr 1.875rem 1fr 1.875rem 1fr; grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .themes .grid-4 { -ms-grid-columns: 1fr 1.875rem 1fr; grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .themes .grid-4 { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .participants { display: -webkit-box; display: -ms-flexbox; display: flex; background: linear-gradient(106deg, #B90063 -31.89%, #1E1F24 28.45%); position: relative; } .participants li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 1.5rem; border-bottom: 1px solid var(--pink, #B63F8F); padding: 12px 0; } .participants__list b { font-size: 4rem; color: var(--pink); font-weight: 800; } .participants__list p { font-weight: 600; font-size: 1.25rem; } .participants .grid-2 { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 5rem 1fr; grid-template-columns: repeat(2, 1fr); gap: 5rem; } @media (max-width: 960px) { .participants .grid-2 { -ms-grid-columns: (1fr)[1]; grid-template-columns: repeat(1, 1fr); } } .flex-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 1.5rem; margin-top: 2.5rem; } @media (max-width: 960px) { .flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; } } .participants__img { width: 100%; height: 100%; object-fit: cover; } .opportunities { background: linear-gradient(63deg, #B90063 -23.08%, #1E1F24 22.2%); } .opportunities__card { 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; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 1.5rem; text-align: center; border: 1px solid #F4F3F4; } .opportunities__card h3 { font-size: 1.125rem; font-weight: 800; } .opportunities__card p { padding: 1.5rem 0; } .opportunities__card .cost { color: var(--pink); display: block; margin-bottom: 15px; } .grid-4 { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1.875rem 1fr 1.875rem 1fr 1.875rem 1fr 1.875rem 1fr; grid-template-columns: repeat(4, 1fr); grid-gap: 1.875rem; margin-top: 5rem; } @media (max-width: 1024px) { .grid-4 { -ms-grid-columns: 1fr 1.875rem 1fr 1.875rem 1fr; grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .grid-4 { -ms-grid-columns: 1fr 1.875rem 1fr; grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .grid-4 { -ms-grid-columns: 1fr; grid-template-columns: 1fr; } } .partner { background: linear-gradient(119deg, #B90063 -37.83%, #1E1F24 35.32%); } .partner .right__side { background: -webkit-gradient(linear, right top, left top, from(#3A4291), color-stop(50%, #B63F8F), to(#D65097)); background: linear-gradient(270deg, #3A4291 0%, #B63F8F 50%, #D65097 100%); padding: 15%; position: relative; } .partner .right__side::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/dist/partner_icon.svg) no-repeat center / cover; opacity: 0.1; } .partner .right__side p { padding: 15px 0; } .partner .rigth__side-info { position: relative; z-index: 1; } .partner__card b { font-size: 4rem; font-weight: 800; color: var(--pink); } .partner__card h5 { font-size: 1.5rem; } .partner__card p { margin-top: 15px; font-weight: normal; } .partner .flex-wrap { align-items: start; } @media (max-width: 1100px) { .partner .grid-2 { grid-template-columns: repeat(1, 1fr); } } @media (max-width: 960px) { .partner .right__side { padding: 4rem; } } @media (max-width: 480px) { .partner .right__side { padding: 2rem; } } .organizator .h2 { text-align: center; margin-bottom: 5rem; } .organizator img { display: block; margin: 0 auto; } footer { background: -webkit-gradient(linear, right top, left top, from(#3A4291), color-stop(50%, #B63F8F), to(#D65097)); background: linear-gradient(270deg, #3A4291 0%, #B63F8F 50%, #D65097 100%); position: relative; padding: 100px 0; } footer::after { content: ""; width: 100%; height: 100%; top: 0; position: absolute; background: url(../images/dist/Waves.svg) no-repeat right center / contain; opacity: 0.1; } footer .contact-link { display: block; font-size: 1.123rem; font-weight: 700; } footer .contact-mail { display: block; margin-top: 15px; } .footer__left { line-height: 2; position: relative; z-index: 2; } .footer__rigth { 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: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: end; -ms-flex-align: end; align-items: end; line-height: 2; font-weight: normal; position: relative; z-index: 1; } .footer__rigth p { text-align: right; margin-top: 1rem; } @media (max-width: 1100px) { footer::after { background: url(../images/dist/Waves.svg) no-repeat right center / cover; } } @media (max-width: 786px) { .footer__rigth { display: block; } .footer__rigth p { text-align: left; } } .dialog-layout { width: 100%; height: 100vh; top: 0; left: 0; position: fixed; background: rgba(0, 0, 0, 0.3137254902); z-index: 5; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; opacity: 0; visibility: hidden; -webkit-transition: opacity 0.3s ease-out, visibility 0s 0.5s; transition: opacity 0.3s ease-out, visibility 0s 0.5s; } .dialog-layout.active { visibility: visible; opacity: 1; -webkit-transition: opacity 0.3s ease-out; transition: opacity 0.3s ease-out; } .dialog-layout.active .dialog-container { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .dialog-container { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); -webkit-transition: -webkit-transform 0.4s ease-out; transition: -webkit-transform 0.4s ease-out; transition: transform 0.4s ease-out; transition: transform 0.4s ease-out, -webkit-transform 0.4s ease-out; max-width: 480px; background: var(--white); border-radius: 1rem; position: relative; color: var(--black); padding: 2.5rem; width: 100%; max-height: 860px; } @media (max-height: 800px) and (orientation: landscape) { .dialog-layout.active .dialog-container { transform: scale(.8); } } .dialog-container h3 { font-weight: 700; font-size: 2.5rem; } .dialog-container form { margin: 2.5rem 0; } .dialog-container form span { display: block; margin-bottom: 12px; } .dialog-container form label, .dialog-container form input:not([type="checkbox"]) { display: block; } .dialog-container form input:not([type="checkbox"]) { background: #F4F3F4; border-radius: 2.5rem; width: 100%; padding: 1rem 2rem; margin-bottom: 12px; } .dialog-container form input::-webkit-input-placeholder { font-size: 14px; color: #4A555B; } .dialog-container form input::-moz-placeholder { font-size: 14px; color: #4A555B; } .dialog-container form input:-ms-input-placeholder { font-size: 14px; color: #4A555B; } .dialog-container form input::-ms-input-placeholder { font-size: 14px; color: #4A555B; } .dialog-container form input::placeholder { font-size: 14px; color: #4A555B; } .dialog-container form .button-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .dialog-container form button { display: inline-block; margin-top: 2.5rem; color: var(--white); cursor: pointer; } .dialog-container .offer { font-weight: normal; cursor: pointer; } .dialog-container .offer a:hover { text-decoration: underline; } .dialog-container input[type="checkbox"] { width: 15px; height: 15px; border-radius: 3px; border: 1px solid var(--black); display: inline-block; cursor: pointer; position: relative; cursor: pointer; margin-right: 5px; } .dialog-container input[type="checkbox"]::after { content: "✓"; display: none; position: absolute; color: var(--pink); font-weight: 800; top: -5px; left: 0; } .dialog-container input[type="checkbox"]:checked::after { display: block; } .input-error .error{ color: red; font-size: 12px; } .close-svg { position: absolute; right: 20px; top: 20px; cursor: pointer; } @media (max-width: 480px) { .dialog-container { width: 90%; } .dialog-container h3 { font-size: 1.5rem; } } table { width: 100%; min-width: 1400px; table-layout: fixed; border-collapse: collapse; } th, td { width: auto; padding: 10px; border: 1px solid #ddd; } td{ font-size: var(--font-16); font-weight: 400; &:has(img) { text-align: center; vertical-align: middle; } img { width: 30px; height: 20px; } } th { background-color: #f2f2f2; font-weight: bold; text-transform: uppercase; color: #000; vertical-align: middle; } thead { background-color: #4CAF50; color: white; } tr:hover { background-color: #f5f5f5; } tr:nth-child(even) { background-color: #f9f9f9; } td[colspan="6"] { text-align: center; font-style: italic; background-color: #e6f3ff; } th:nth-child(1), td:nth-child(1) { width: 500px; } /* th:nth-child(2), td:nth-child(2) { width: 20%; } th:nth-child(3), td:nth-child(3) { width: 20%; } th:nth-child(4), td:nth-child(4) { width: 20%; } th:nth-child(5), td:nth-child(5) { width: 20%; } th:nth-child(6), td:nth-child(6) { width: 20%; } */