.text{margin:0 auto;margin-top:100px;max-width:750px}.text::after{content:"";clear:both;display:block}@media screen and (max-width:767px){.text{margin:40px auto;max-width:auto}}.text .img-float{float:right;margin:15px 0 15px 15px}@media screen and (max-width:767px){.text .img-float{display:none}}.text .psy__pick{box-sizing:border-box;background:-webkit-linear-gradient(314.22deg,#07cfab 0,#985ee2 98.15%);background:linear-gradient(135.78deg,#07cfab 0,#985ee2 98.15%);border-radius:20px;position:relative;padding:30px;overflow:hidden}@media only screen and (max-width:767px){.text .psy__pick{padding:20px 16px}}.text .psy__pick:before{content:'';background-image:url(/img/art_pick1.svg);background-size:contain;background-repeat:no-repeat;display:block;width:140px;height:118px;position:absolute;bottom:50px;right:50px;pointer-events:none}@media only screen and (max-width:767px){.text .psy__pick:before{content:none}}.text .psy__pick:after{content:'';background-image:url(/img/art_pick1.svg);background-size:contain;background-repeat:no-repeat;display:block;width:70px;height:61px;position:absolute;left:82px;top:25px;pointer-events:none}@media only screen and (max-width:767px){.text .psy__pick:after{top:15px;left:72px}}.text .psy__pick-title{color:var(--bg);margin-bottom:12px;font-size:1.5rem;line-height:1.875rem;font-weight:700}@media only screen and (max-width:1140px){.text .psy__pick-title{font-size:1.5rem}}@media only screen and (max-width:767px){.text .psy__pick-title{font-size:1.125rem}}@media only screen and (max-width:1140px){.text .psy__pick-title{line-height:1.875rem}}@media only screen and (max-width:767px){.text .psy__pick-title{line-height:1.5rem}}.text .psy__pick-text{color:rgba(255,255,255,.8);font-size:1rem;line-height:1.5rem}.text .psy__pick-action{-webkit-align-self:start;align-self:start;-webkit-flex-shrink:0;flex-shrink:0;text-transform:uppercase;padding:17px 30px;background:var(--bg);border-radius:30px;color:#796ae2;font-weight:700;font-size:1.125rem;display:block;text-align:center;position:relative;max-width:190px;margin-top:20px}@media only screen and (max-width:767px){.text .psy__pick-action{margin:0 auto;margin-top:16px;font-size:1rem}}.text .psy__pick-action:hover{background:#796ae2;color:var(--bg);box-shadow:0 0 20px rgba(255,255,255,.3)}.text p{margin:0;font-size:1rem;line-height:1.5rem;margin-bottom:20px}.text h1{margin-bottom:30px}@media only screen and (max-width:1140px){.text h1{margin-bottom:20px}}.text h2{margin-top:50px;margin-bottom:20px}@media only screen and (max-width:767px){.text h2{margin-top:40px;margin-bottom:20px}}.text h3{margin-top:50px;margin-bottom:20px}@media only screen and (max-width:767px){.text h3{margin-top:40px;margin-bottom:20px}}.text h4{margin-top:50px;margin-bottom:20px}@media only screen and (max-width:767px){.text h4{margin-top:40px;margin-bottom:20px}}.text h5{margin-top:50px;margin-bottom:20px}@media only screen and (max-width:767px){.text h5{margin-top:40px;margin-bottom:20px}}.text h6{margin-bottom:20px}.text ol{margin:0;padding:0;list-style:none;counter-reset:item}.text ol li{font-size:1rem;line-height:1.5rem;padding-left:65px;margin-bottom:20px;position:relative}@media only screen and (max-width:767px){.text ol li{padding-left:60px}}.text ol li:before{content:counter(item) '.';counter-increment:item;position:absolute;left:35px;color:var(--link);font-weight:500}.text ol li:after{content:'Шаг';position:absolute;left:0;top:0;color:var(--link);font-weight:500}.text ul{margin:0;padding:0;list-style:none}.text ul li{font-size:1rem;line-height:1.5rem;padding-left:40px;margin-bottom:20px;position:relative}@media only screen and (max-width:767px){.text ul li{padding-left:30px}}.text ul li:before{content:'';position:absolute;left:10px;color:var(--link);font-weight:700;width:8px;height:8px;border-radius:50%;background:var(--link);display:block;top:6px}@media only screen and (max-width:767px){.text ul li:before{left:0}}.text figure{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:30px auto}@media only screen and (max-width:767px){.text figure{margin:20px auto}}.text img{width:auto;max-width:750px;margin:auto;border-radius:20px;position:relative}@media only screen and (max-width:767px){.text img{width:100%;max-width:420px}}.text figcaption{margin-top:10px;font-size:1rem;line-height:1.5rem}.text img{width:auto;max-width:750px;margin:auto;border-radius:20px;position:relative;margin:30px 0}@media only screen and (max-width:767px){.text img{width:100%;max-width:420px}}.text blockquote{margin:0;padding:30px;box-sizing:border-box;background:#e7fffb;margin:30px 0;font-size:1rem;line-height:1.5rem;border-radius:20px;position:relative}@media only screen and (max-width:767px){.text blockquote{padding:20px 16px}}.text blockquote p:last-child{margin-bottom:0}.text table{width:100%;table-layout:fixed;border-collapse:collapse}@media only screen and (max-width:1140px){.text table{width:750px}}@media only screen and (max-width:767px){.text table{width:700px}}.text table tr{border-bottom:1px solid #e4e4e4}.text table th{color:#ababab;font-size:1rem;line-height:1.375rem;font-weight:400;text-align:left;padding:16px 20px;box-sizing:border-box;width:15%}.text table td{padding:20px;box-sizing:border-box;font-size:1rem;line-height:1.375rem;width:15%;vertical-align:top}.dropdown__hide-exit { padding: 10px; border-radius: 8px; font-size: 14px; line-height: 24px; color: var(--text); display: block; text-align: left; } .dropdown__hide-exit svg { position: relative; left: 5px; top: 4px; } @media screen and (max-width: 1240px) { .dropdown__hide-exit { padding: 10px 20px; } .header .dropdown.last-child { padding: 0; border-bottom: 0; } }.city-modal{z-index:3;display:none}.city-modal.show{display:block}.city-modal .over{background:rgba(0,0,0,.7);position:fixed;top:0;left:0;right:0;bottom:0;z-index:3;-webkit-transition:.5s;transition:.5s}.city-modal__wrap{position:fixed;top:0;left:0;right:0;bottom:0;overflow-y:auto;z-index:3}@media screen and (max-width:768px){.city-modal__wrap{background:#fff}}.city-modal__scroll{width:100%;height:auto;max-width:945px;position:relative;margin:0 auto;margin-top:100px;margin-bottom:100px;-webkit-transform:translate(0,0);transform:translate(0,0);z-index:3}@media screen and (max-width:1140px){.city-modal__scroll{margin-top:40px;margin-bottom:40px}}@media screen and (max-width:768px){.city-modal__scroll{margin:0 auto;box-sizing:border-box}}.city-modal__box{box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:flex;width:100%;position:relative}@media screen and (max-width:1140px){.city-modal__box{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column}}.city-modal__form{padding:60px 50px;background:var(--bg);box-sizing:border-box;position:relative;-webkit-box-flex:1;-webkit-flex:auto;flex:auto;border-top-left-radius:20px;border-bottom-left-radius:20px}@media screen and (max-width:1140px){.city-modal__form{border-radius:0}}@media screen and (max-width:768px){.city-modal__form{padding:30px 20px}}.city-modal__anonym{width:255px;-webkit-flex-shrink:0;flex-shrink:0;background:-webkit-linear-gradient(359.35deg,#5e73e2 -2.24%,#985ee2 103.94%);background:linear-gradient(90.65deg,#5e73e2 -2.24%,#985ee2 103.94%);padding:30px;box-sizing:border-box;margin-left:auto;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;text-align:center;border-top-right-radius:20px;border-bottom-right-radius:20px;position:relative}@media screen and (max-width:1140px){.city-modal__anonym{border-radius:0;width:100%;padding:30px 20px;-webkit-box-ordinal-group:0;-webkit-order:-1;order:-1}}.city-modal__anonym .icon{margin-bottom:50px;-webkit-flex-shrink:0;flex-shrink:0}@media screen and (max-width:768px){.city-modal__anonym .icon{margin-bottom:20px}}.city-modal__anonym-text{font-size:1rem;line-height:1.375rem;color:var(--bg)}.city-modal__bg{position:absolute;top:0;right:0;bottom:0}@media screen and (max-width:768px){.city-modal__bg{top:-30px}}@media screen and (max-width:414px){.city-modal__bg{top:-10px}}@media screen and (max-width:395px){.city-modal__bg{top:0}}.city-modal__close{position:absolute;cursor:pointer;top:10px;right:10px;z-index:1}.city-modal__close .icon{-webkit-transition:.3s;transition:.3s;-webkit-transform-origin:center;transform-origin:center;fill:rgba(255,255,255,.5);display:-webkit-box;display:-webkit-flex;display:flex}@media screen and (max-width:1140px){.city-modal__close .icon{width:20px;height:20px}}.city-modal__close:hover .icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.city-modal__title{font-size:1.75rem;font-weight:700;position:relative;margin-bottom:30px}@media screen and (max-width:768px){.city-modal__title{font-size:1.375rem;line-height:1.625rem}}.city-modal__list{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;grid-row-gap:12px;grid-column-gap:30px}@media screen and (max-width:768px){.city-modal__list{grid-template-columns:1fr 1fr;grid-column-gap:20px}}.city-modal__item{color:var(--text);font-size:1rem;line-height:1.5rem}.city-modal__item:hover{color:var(--link)}.city-modal__item { font-size: 0.875rem; } .city-modal__item.main-link { font-size: 1rem; } .city-modal__item.main-link.underlined { text-decoration: underline; }@charset "UTF-8"; *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-tap-highlight-color: transparent; } a { outline: none; text-decoration: none; color: var(--link); transition: 0.2s; -webkit-tap-highlight-color: transparent; } button, button:active, button:focus { outline: none; } button { transition: 0.2s; padding: 0; cursor: pointer; background: transparent; border: none; font-size: 16px; line-height: 24px; color: var(--text); } button, input, select, textarea { font-family: inherit; } input::placeholder, textarea::placeholder { color: var(--text_gray); font-size: 16px; line-height: 24px; } input, textarea, select { outline: none; color: var(--text); background: var(--bg); -webkit-tap-highlight-color: transparent; } input:focus, textarea:focus, select:focus { outline: none; } input[type=search]::-webkit-search-cancel-button { display: none; } input:focus::placeholder, textarea:focus::placeholder { color: transparent; } img { display: block; width: auto; height: auto; } input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill, input:-webkit-autofill:hover, textarea:-webkit-autofill:hover, select:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill:focus, select:-webkit-autofill:focus { -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 1000px transparent inset; transition: background-color 5000s ease-in-out 0s; background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(0, 174, 255, 0.04) 50%, rgba(255, 255, 255, 0) 51%, rgba(0, 174, 255, 0.03) 100%); } html { line-height: 1.15; /* Исправляем высоту строки */ -webkit-text-size-adjust: 100%; /* Предотвращаем изменения текста на iOS */ } body { margin: 0; /* Убираем отступ */ } main { display: block; /* Для IE */ } h1 { font-size: 2em; margin: 0.67em 0; } hr { box-sizing: content-box; height: 0; overflow: visible; } pre { font-family: monospace, monospace; font-size: 1em; } a { background-color: transparent; } abbr[title] { border-bottom: none; text-decoration: underline dotted; } b, strong { font-weight: bolder; } code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } img { border-style: none; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; -webkit-appearance: button; } button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { padding: 0.35em 0.75em 0.625em; } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress { vertical-align: baseline; } textarea { overflow: auto; } [type=checkbox], [type=radio] { box-sizing: border-box; padding: 0; } [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } [type=search] { -webkit-appearance: textfield; outline-offset: -2px; } [type=search]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } details { display: block; } summary { display: list-item; } template { display: none; } [hidden] { display: none; } .select-reset { /* Сбрасываем нативный вид */ -webkit-appearance: none; /* Chrome, Safari, Edge на WebKit/Blink */ -moz-appearance: none; /* Firefox */ appearance: none; /* современный стандарт */ /* Для IE/Edge (старых) скрываем стрелку */ } .select-reset::-ms-expand { display: none; } :root { --text: #323338; --text_gray: #ABABAB; --text_rgb80: rgba(255, 255, 255, 0.8); --text_rgb40: rgba(255, 255, 255, 0.4); --bg: #fff; --bg_gray: #F5F5F5; --border: #CCCCCC; --link: #07CFAB; --gradient: linear-gradient(120.95deg, #07CFAB 13.96%, #985EE2 179.66%); --btn_gradient: linear-gradient(92.06deg, #07CFAB -6.44%, #985EE2 196.38%); --switch: linear-gradient(98.89deg, rgba(97, 114, 226, 0.2) 0%, rgba(146, 96, 226, 0.2) 106.38%); --attention_rose: #E764EE; --violet: #796AE2; --violet_gradient: linear-gradient(90.65deg, #5E73E2 -2.24%, #985EE2 103.94%); --alarm: #EB5757; --alarm_bg: rgba(235, 87, 87, 0.15); } body { margin: 0; padding: 0; font-family: "Roboto", sans-serif; outline: none; font-size: 16px; line-height: 24px; font-weight: 400; min-width: 320px; min-height: 100vh; background-color: var(--bg); position: relative; color: var(--text); display: flex; flex-direction: column; letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { margin: 0; } @media screen and (max-width: 1240px) { h1 { font-size: 32px; } } h1 { font-size: 40px; } @media screen and (max-width: 767px) { h1 { font-size: 26px; } } @media screen and (max-width: 1240px) { h1 { line-height: 38px; } } h1 { line-height: 48px; } @media screen and (max-width: 767px) { h1 { line-height: 30px; } } @media screen and (max-width: 1240px) { h2 { font-size: 28px; } } h2 { font-size: 36px; } @media screen and (max-width: 767px) { h2 { font-size: 22px; } } @media screen and (max-width: 1240px) { h2 { line-height: 36px; } } h2 { line-height: 44px; } @media screen and (max-width: 767px) { h2 { line-height: 26px; } } @media screen and (max-width: 1240px) { h3 { font-size: 26px; } } h3 { font-size: 32px; } @media screen and (max-width: 767px) { h3 { font-size: 22px; } } @media screen and (max-width: 1240px) { h3 { line-height: 30px; } } h3 { line-height: 38px; } @media screen and (max-width: 767px) { h3 { line-height: 26px; } } @media screen and (max-width: 1240px) { h4 { font-size: 24px; } } h4 { font-size: 28px; } @media screen and (max-width: 767px) { h4 { font-size: 22px; } } @media screen and (max-width: 1240px) { h4 { line-height: 30px; } } h4 { line-height: 36px; } @media screen and (max-width: 767px) { h4 { line-height: 26px; } } @media screen and (max-width: 1240px) { h5 { font-size: 24px; } } h5 { font-size: 24px; } @media screen and (max-width: 767px) { h5 { font-size: 18px; } } @media screen and (max-width: 1240px) { h5 { line-height: 30px; } } h5 { line-height: 30px; } @media screen and (max-width: 767px) { h5 { line-height: 24px; } } @media screen and (max-width: 1240px) { h6 { font-size: 20px; } } h6 { font-size: 20px; } @media screen and (max-width: 767px) { h6 { font-size: 18px; } } @media screen and (max-width: 1240px) { h6 { line-height: 26px; } } h6 { line-height: 26px; } @media screen and (max-width: 767px) { h6 { line-height: 24px; } } .main { flex-grow: 1; } .wrap { max-width: 1140px; margin: 0 auto; padding: 0 20px; box-sizing: content-box; } .video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin-top: 24px; margin-bottom: 24px; } .video iframe, .video object, .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .field-search { position: relative; } .field-search.error input, .field-search.error textarea { border-color: var(--alarm); } .field-search.error .field__error { display: block; } .field-search .icon { position: absolute; right: 20px; top: 17px; pointer-events: none; } .field-search .field-search__reset { position: absolute; right: 20px; top: 17px; cursor: pointer; } .field { position: relative; width: 100%; } .field input { height: 58px; padding: 24px 20px 8px; transition: 0.2s; border-radius: 16px; font-size: 16px; background: var(--bg); color: var(--text); border: 0; width: 100%; box-sizing: border-box; } @media screen and (max-width: 1240px) { .field input { border-radius: 12px; } } .field input::-webkit-outer-spin-button, .field input::-webkit-inner-spin-button { opacity: 0; -webkit-appearance: none; margin: 0; } .field input:focus ~ .label, .field input .label:focus { transform: translateY(-12px); font-size: 12px; } .field input::placeholder { color: var(--text_gray); font-size: 0.875rem; line-height: 1.4285714286; } .field input:disabled { border-color: #cccccc; background: transparent; } .field.error input, .field.error textarea { border: 1px solid var(--alarm); } .field.error .field__error { display: block; } .field .icon { position: absolute; right: 20px; top: 17px; pointer-events: none; } .field .label { position: absolute; left: 20px; top: 20px; color: var(--text_gray); transition: 0.2s; pointer-events: none; font-size: 14px; line-height: 20px; } .field.active .label { transform: translateY(-12px); font-size: 12px; } .field__error { color: var(--alarm); font-size: 12px; line-height: 18px; background: var(--alarm_bg); padding: 6px 20px; margin-top: 6px; border-radius: 8px; display: none; } .preloader { width: 100%; height: 100%; position: absolute; justify-content: center; top: 0; z-index: 1; background: rgba(255, 255, 255, 0.9); display: none; } .preloader.show { display: flex; } .spinner { position: sticky; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border: 6px solid rgba(152, 94, 226, 0.4); border-top: 6px solid #985ee2; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 20px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* roboto-regular - cyrillic */ @font-face { font-display: swap; font-family: "Roboto"; font-style: normal; font-weight: 400; src: local(""), url("../fonts/roboto-v20-cyrillic-regular.woff2") format("woff2"); } /* roboto-500 - cyrillic */ @font-face { font-display: swap; font-family: "Roboto"; font-style: normal; font-weight: 500; src: local(""), url("../fonts/roboto-v20-cyrillic-500.woff2") format("woff2"); } /* roboto-700 - cyrillic */ @font-face { font-display: swap; font-family: "Roboto"; font-style: normal; font-weight: 700; src: local(""), url("../fonts/roboto-v20-cyrillic-700.woff2") format("woff2"); } /* roboto-300 - cyrillic_latin */ @font-face { font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: "Roboto"; font-style: normal; font-weight: 300; src: url("../fonts/roboto-v30-cyrillic_latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ } .header { padding: 15px 0; } @media screen and (max-width: 1240px) { .header.hdr-fixed { transition: 0.2s; z-index: 3; background: var(--bg); } } .header.hdr-fixed.fixed { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1); border-radius: 0; position: fixed; width: 100%; top: 0; right: 0; left: 0; } .header.hdr-fixed.hidden { transform: translateY(-100%); } @media screen and (max-width: 1240px) { .header { height: 70px; background: transparent; padding: 11px 0; } } .header__nav-wrapper { display: flex; align-items: center; gap: 30px; } @media screen and (max-width: 1240px) { .header__nav-wrapper { flex-direction: column; align-items: flex-start; background: var(--bg); width: 100%; padding: 20px; border-radius: 12px; gap: 20px; } } .header__logo img { width: 132px; } @media screen and (max-width: 1240px) { .header__logo img { width: 109px; height: 48px; } } .header__info { font-size: 13px; line-height: 18px; } @media screen and (max-width: 1240px) { .header__info { font-size: 12px; line-height: 14px; } } .header__box { display: flex; align-items: center; position: relative; } @media screen and (max-width: 1240px) { .header__box { align-items: flex-start; } } .header__box .new-year { width: auto; position: absolute; left: 290px; top: -10px; } @media screen and (max-width: 1240px) { .header__box .new-year { display: none; } } .header__favorite { display: none; } @media screen and (max-width: 1240px) { .header__favorite { display: flex; flex-shrink: 0; margin-left: auto; align-items: center; justify-content: center; width: 48px; height: 48px; position: relative; } .header__favorite .count { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-size: 10px; line-height: 1px; color: var(--bg); background: var(--gradient); border-radius: 100%; position: absolute; top: 8px; right: 6px; } .header__favorite.hide { visibility: hidden; } } .header__burger { display: none; } @media screen and (max-width: 1240px) { .header__burger { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 48px; height: 48px; position: relative; } .header__burger .notify { display: block; width: 8px; height: 8px; background: var(--text); border-radius: 100%; position: absolute; top: 12px; right: 10px; } } .header__nav { display: flex; align-items: center; gap: 30px; margin-left: auto; } @media screen and (max-width: 1240px) { .header__nav { margin: 0; flex-direction: column; z-index: 3; position: fixed; top: 0; right: 0; background: #F2F2F2; padding: 80px 30px 100px 30px; overflow: auto; height: 100vh; box-sizing: border-box; transition: 0.3s; transform: translateX(100%); visibility: hidden; gap: 20px; align-items: flex-start; width: 100%; } .header__nav.show { transform: translateX(0); visibility: visible; } } .header__nav-logo { display: none; } @media screen and (max-width: 1240px) { .header__nav-logo { display: block; position: absolute; top: 10px; } } .header__nav-close { display: none; } @media screen and (max-width: 1240px) { .header__nav-close { display: block; position: absolute; top: 20px; right: 30px; } } @media screen and (max-width: 1240px) { .header__nav-notify { position: absolute; top: 20px; right: 80px; } .header__nav-notify .icon { width: 26px; height: 26px; } } .header__nav-cash { background: var(--violet); color: var(--bg); display: flex; border-radius: 30px; padding: 14px 20px; text-align: center; text-transform: uppercase; justify-content: center; font-weight: bold; } .header__nav-action { display: none; } @media screen and (max-width: 1240px) { .header__nav-action { display: flex; align-self: center; font-weight: bold; margin-top: 30px; height: 50px; padding: 14px 40px; background: linear-gradient(90.65deg, #5E73E2 -2.24%, #985EE2 103.94%); border-radius: 30px; text-transform: uppercase; color: var(--bg); box-sizing: border-box; font-size: 14px; line-height: 22px; } } @media screen and (max-width: 1240px) and (max-width: 335px) { .header__nav-action { padding-left: 20px; padding-right: 20px; } } .header__nav-wrap { display: flex; align-items: center; gap: 30px; } @media screen and (max-width: 1240px) { .header__nav-wrap { display: block; background: #f2f0fc; border-radius: 30px; width: 100%; order: -1; margin-bottom: 20px; } } .header__nav-sum { font-size: 14px; font-weight: bold; text-transform: uppercase; display: flex; color: #796AE2; align-items: center; } @media screen and (max-width: 1240px) { .header__nav-sum { margin: 0 auto; padding: 14px 20px; width: 100%; justify-content: center; box-sizing: border-box; font-size: 16px; } .header__nav-sum span { margin-right: 5px; display: inline-block; } } .header__nav-sum span { display: none; } .header__nav-sum .icon { margin-right: 13px; } @media screen and (max-width: 1240px) { .header__nav-sum .icon { display: none; } } .header__nav-link { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text); transition: 0.2s; text-transform: uppercase; position: relative; } @media screen and (max-width: 1240px) { .header__nav-link { margin: 0; display: block; padding: 0 0 20px; border-bottom: 1px solid #E6E6E6; width: 100%; } .header__nav-link.help { order: 1; } } @media screen and (min-width: 1240px) { .header__nav-link:hover { color: var(--link); } } .header__nav-link.active { color: var(--link); cursor: default; } @media screen and (min-width: 1240px) { .header__nav-link.active:hover { color: var(--link); } } .header__nav-link.--favorite { display: flex; align-items: center; gap: 6px; position: relative; } .header__nav-link.--favorite .count { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-size: 10px; line-height: 1px; color: var(--bg); background: var(--gradient); border-radius: 100%; position: absolute; top: -8px; right: -8px; } @media screen and (max-width: 1240px) { .header__nav-link.--favorite .count { position: relative; right: 12px; } } @media screen and (max-width: 1240px) { .header__nav-link.--favorite { background: var(--bg); border: 0; padding: 20px 30px; border-radius: 12px; } } .header .dropdown { position: relative; } @media screen and (max-width: 1240px) { .header .dropdown { padding-bottom: 20px; border-bottom: 1px solid #E6E6E6; width: 100%; } .header .dropdown:last-child { border: 0; padding: 0; } } @media screen and (min-width: 1240px) { .header .dropdown:hover .dropdown__hide { opacity: 1; visibility: visible; } } .header .dropdown__link { font-size: 14px; line-height: 24px; text-transform: uppercase; font-weight: 500; display: flex; align-items: center; gap: 6px; width: 100%; } .header .dropdown__link .icon-drop { transition: 0.3s; fill: var(--text); } .header .dropdown__link.open { color: var(--link); } .header .dropdown__link.open .icon-drop { transform: rotate(180deg); fill: var(--link); } .header .dropdown__hide { position: absolute; background: var(--bg); box-shadow: 0 0 16px rgba(50, 51, 56, 0.16); border-radius: 10px; min-width: 240px; padding: 10px; z-index: 2; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } @media screen and (max-width: 1240px) { .header .dropdown__hide { position: static; min-width: auto; box-shadow: none; opacity: 1; visibility: visible; display: none; flex-direction: column; padding: 10px 0 0; } .header .dropdown__hide.show { display: flex; } } .header .dropdown__hide-link { padding: 10px; border-radius: 8px; font-size: 14px; line-height: 24px; color: var(--text); display: block; } @media screen and (max-width: 1240px) { .header .dropdown__hide-link { padding: 10px 20px; margin: 0; } .header .dropdown__hide-link:last-child { padding-bottom: 0; } } @media screen and (min-width: 1240px) { .header .dropdown__hide-link:hover { color: var(--link); background: #F2F2F2; } } .header .dropdown__hide-link.active { color: var(--link); background: #F2F2F2; } @media screen and (max-width: 1240px) { .header .dropdown__hide-link.active { background: transparent; } } .header .dropdown__hide-link.--with-dropdown { position: relative; display: flex; align-items: center; justify-content: space-between; } @media screen and (max-width: 1240px) { .header .dropdown__hide-link.--with-dropdown { justify-content: flex-start; flex-wrap: wrap; } } @media screen and (min-width: 1240px) { .header .dropdown__hide-link.--with-dropdown:hover .dropdown__hide-submenu { visibility: visible; opacity: 1; } .header .dropdown__hide-link.--with-dropdown:hover .icon-drop { fill: var(--link); } } .header .dropdown__hide-link.--with-dropdown .icon-drop { transform: rotate(-90deg); transition: transform 0.3s ease; fill: var(--text); } @media screen and (max-width: 1240px) { .header .dropdown__hide-link.--with-dropdown .icon-drop { transform: rotate(0); } } .header .dropdown__hide-link.--with-dropdown.open { background: #F2F2F2; color: var(--link); } .header .dropdown__hide-link.--with-dropdown.open .icon-drop { transform: rotate(180deg); fill: var(--link); } .header .dropdown__hide-submenu { position: absolute; background: var(--bg); box-shadow: 0 0 16px rgba(50, 51, 56, 0.16); border-radius: 10px; min-width: 240px; padding: 10px; left: 100%; top: 0; z-index: 2; transition: opacity 0.3s ease, visibility 0.3s ease; opacity: 0; visibility: hidden; } @media screen and (max-width: 1240px) { .header .dropdown__hide-submenu { position: static; min-width: auto; box-shadow: none; padding: 20px 0 10px 10px; border-radius: 12px; opacity: 1; visibility: visible; display: none; background: #F2F2F2; width: 100%; } .header .dropdown__hide-submenu.show { display: block; } } .header .dropdown__hide-submenu-link { padding: 10px; border-radius: 8px; font-size: 14px; line-height: 24px; color: var(--text); display: block; } @media screen and (max-width: 1240px) { .header .dropdown__hide-submenu-link { padding: 0; margin-bottom: 20px; } .header .dropdown__hide-submenu-link:last-child { margin: 0; } } @media screen and (min-width: 1240px) { .header .dropdown__hide-submenu-link:hover { color: var(--link); background: #F2F2F2; } } .hdr-placeholder { height: 0; transition: height 0.2s; } .footer { margin-top: 100px; padding: 80px 0; position: relative; background: #f0f0f0; } @media screen and (max-width: 1240px) { .footer { margin-top: 0; padding: 40px 20px 80px; } } .footer__help { font-size: 1rem; line-height: 1.5; color: var(--bg); background: linear-gradient(94.83deg, #07cfab -0.6%, #985ee2 141.85%); border-radius: 20px; padding: 30px; align-self: start; } @media screen and (max-width: 1240px) { .footer__help { padding: 20px; margin-top: 20px; } } .footer__help a { color: var(--bg); border-bottom: 1px solid var(--bg); } .footer__help a:hover { border-color: transparent; } .footer__nav { display: grid; grid-template-columns: 1fr 1fr 1fr 364px; gap: 40px; } @media screen and (max-width: 1240px) { .footer__nav { grid-template-columns: 1fr; gap: 20px; } } .footer__nav-wrap { display: grid; gap: 30px; } @media screen and (max-width: 1240px) { .footer__nav-wrap { gap: 20px; } } .footer__nav-link { font-size: 1rem; line-height: 1.5; color: var(--text); display: block; } .footer__nav-link.for-psy { color: var(--link); position: relative; display: flex; align-items: center; font-weight: 500; } .footer__nav-link:hover { color: var(--hover); } .footer__subnav { display: grid; grid-template-columns: 1fr 1fr 1fr 364px; gap: 40px; margin-top: 60px; } @media screen and (max-width: 1240px) { .footer__subnav { grid-template-columns: 1fr; grid-gap: 20px; margin-top: 40px; } } .footer__subnav__link { font-size: 0.875rem; line-height: 1.4285714286; color: #6c6e75; display: block; margin-bottom: 20px; } .footer__subnav__link:last-child { margin: 0; } @media screen and (max-width: 1240px) { .footer__subnav__item:last-child { order: -1; margin-bottom: 20px; } } .footer__socials { display: grid; grid-template-columns: 180px 40px 40px; grid-gap: 20px; align-items: center; padding-left: 30px; margin-bottom: 20px; } @media screen and (max-width: 1240px) { .footer__socials { padding: 0; display: block; } } .footer__socials__text { font-size: 0.875rem; line-height: 1.4285714286; color: #6c6e75; margin-bottom: 10px; } .footer__count { display: grid; grid-template-columns: 180px 1fr; grid-gap: 10px; align-items: center; padding-left: 30px; } @media screen and (max-width: 1240px) { .footer__count { padding: 0; display: block; } } .footer__count__text { font-size: 0.875rem; line-height: 1.4285714286; color: #6c6e75; } .footer__count__result { background: linear-gradient(92.06deg, #07cfab -6.44%, #985ee2 196.38%); font-weight: bold; color: transparent; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 2.25rem; line-height: 1.1111111111; white-space: nowrap; } @media screen and (max-width: 1240px) { .footer__count__result { margin-top: 10px; } } .footer__inform { display: grid; grid-gap: 54px; grid-template-columns: 1fr 334px; margin-top: 80px; } @media screen and (max-width: 1240px) { .footer__inform { grid-template-columns: 1fr; grid-gap: 40px; margin-top: 40px; } } .footer__inform p { font-size: 0.875rem; line-height: 1.4285714286; color: #6c6e75; margin: 0 0 10px; } .footer__inform p:last-child { margin: 0; } .footer__inform p img { display: inline; vertical-align: middle; } .breads { white-space: nowrap; overflow-y: hidden; overflow-x: auto; margin-top: 80px; margin-bottom: -40px; } @media screen and (max-width: 767px) { .breads { margin: 40px 0 20px; } } .breads__list { display: flex; align-items: center; } .breads__box { display: flex; position: relative; color: var(--text); align-items: center; transition: 0.2s; } .breads__box span { color: #ababab; max-width: 350px; overflow: hidden; text-overflow: ellipsis; font-size: 14px; } @media screen and (max-width: 767px) { .breads__box span { font-size: 12px; max-width: 200px; line-height: normal; } } .breads__box:last-child { margin-right: 0; } .breads__box:last-child:after { content: none; } .breads__box::after { content: " "; margin: 0 10px; width: 13px; height: 1px; background: #ababab; } .breads__link { display: flex; align-items: center; } .breads__link span { color: #ababab; cursor: pointer; transition: 0.2s; font-size: 14px; } @media screen and (max-width: 767px) { .breads__link span { font-size: 12px; } } .breads__link:hover span { color: var(--link); }