style.css 34 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455
  1. @charset "UTF-8";
  2. /*
  3. * Prefixed by https://autoprefixer.github.io
  4. * PostCSS: v8.3.6,
  5. * Autoprefixer: v10.3.1
  6. * Browsers: last 4 version
  7. */
  8. /*
  9. * Prefixed by https://autoprefixer.github.io
  10. * PostCSS: v8.3.6,
  11. * Autoprefixer: v10.3.1
  12. * Browsers: last 4 version
  13. */
  14. @font-face {
  15. font-family: 'Bahn';
  16. src: url("../fonts/Bahnschrift.ttf") format("truetype");
  17. font-weight: normal;
  18. font-style: normal; }
  19. :focus, button:focus {
  20. outline: none; }
  21. * {
  22. margin: 0;
  23. padding: 0;
  24. -webkit-box-sizing: border-box;
  25. box-sizing: border-box; }
  26. .no_scroll {
  27. overflow-y: hidden; }
  28. .fadein {
  29. animation-name: modal-fadein;
  30. animation-duration: 500ms;
  31. animation-timing-function: linear; }
  32. @keyframes modal-fadein {
  33. 0% { opacity: 0%; }
  34. 100% { opacity: 100%; }
  35. }
  36. body {
  37. background-color: #afb0b0;
  38. font-weight: normal;
  39. font-style: normal;
  40. height: 100%; }
  41. .wrap {
  42. width: 100%;
  43. min-height: 100%;
  44. display: -webkit-box;
  45. display: -ms-flexbox;
  46. display: flex;
  47. -webkit-box-pack: start;
  48. -ms-flex-pack: start;
  49. justify-content: start; }
  50. .main-content {
  51. display: flex;
  52. flex-direction: column; }
  53. .blocks {
  54. flex: 1; }
  55. .nav {
  56. padding-top: 1.5%;
  57. position: sticky;
  58. width: 130px;
  59. top: 0;
  60. height: 100vh;
  61. background-color: #3a474d;
  62. display: -webkit-box;
  63. display: -ms-flexbox;
  64. display: flex;
  65. -webkit-box-pack: justify;
  66. -ms-flex-pack: justify;
  67. justify-content: space-between;
  68. -webkit-box-orient: vertical;
  69. -webkit-box-direction: normal;
  70. -ms-flex-direction: column;
  71. flex-direction: column;
  72. z-index: 2; }
  73. .nav a {
  74. display: block;
  75. width: 25%;
  76. margin-left: auto;
  77. margin-right: auto;
  78. position: relative; }
  79. .nav a:after {
  80. display: block;
  81. content: attr(title);
  82. position: absolute;
  83. top: 110%;
  84. left: 50%;
  85. -webkit-transform: translateX(-50%);
  86. -ms-transform: translateX(-50%);
  87. transform: translateX(-50%);
  88. color: #fff;
  89. text-decoration: none;
  90. font-family: 'Bahn';
  91. font-size: 14px;
  92. text-align: center; }
  93. .top-href__logo {
  94. width: 70%;
  95. margin-left: auto;
  96. margin-right: auto; }
  97. .top-href a {
  98. margin-top: 25%; }
  99. .middle-href a {
  100. margin-top: 45%; }
  101. .middle-href a:first-child {
  102. margin-top: 0%; }
  103. .bottom-href {
  104. margin-bottom: 30%; }
  105. .bottom-href a:first-child {
  106. margin-bottom: 35%; }
  107. .main-content {
  108. width: 100%;
  109. min-width: 0; }
  110. footer {
  111. width: 100%;
  112. padding: 15px 0px;
  113. background-color: #3a474d;
  114. text-align: center;
  115. position: sticky;
  116. bottom: 0;
  117. left: 0; }
  118. .footer__logo {
  119. width: 70px; }
  120. .blocks {
  121. display: -webkit-box;
  122. display: -ms-flexbox;
  123. display: flex;
  124. -webkit-box-pack: justify;
  125. -ms-flex-pack: justify;
  126. justify-content: space-between;
  127. padding: 15px 15px;
  128. width: 100%;
  129. min-width: 0; }
  130. .first-block {
  131. -webkit-box-flex: 1;
  132. -ms-flex: 1;
  133. flex: 1;
  134. min-width: 0;
  135. margin-right: 15px;
  136. display: -webkit-box;
  137. display: -ms-flexbox;
  138. display: flex;
  139. -webkit-box-orient: vertical;
  140. -webkit-box-direction: normal;
  141. -ms-flex-direction: column;
  142. flex-direction: column;
  143. min-height: 100vh; }
  144. .top__block {
  145. position: relative;
  146. background-color: #fff; }
  147. .header-block {
  148. position: relative; }
  149. .header-block__text {
  150. width: 100%;
  151. text-align: center;
  152. padding: 20px 0px;
  153. color: #fff;
  154. font-family: 'Bahn';
  155. font-size: 21px; }
  156. .header-block__span {
  157. cursor: pointer;
  158. position: absolute;
  159. top: 0;
  160. right: 2%;
  161. height: 100%;
  162. display: -webkit-box;
  163. display: -ms-flexbox;
  164. display: flex;
  165. -webkit-box-pack: justify;
  166. -ms-flex-pack: justify;
  167. justify-content: space-between;
  168. -webkit-box-orient: vertical;
  169. -webkit-box-direction: normal;
  170. -ms-flex-direction: column;
  171. flex-direction: column;
  172. padding: 15px 0; }
  173. .header-block__span span {
  174. display: block;
  175. width: 8px;
  176. height: 8px;
  177. background-color: #fff;
  178. border-radius: 50%; }
  179. .header-block_first {
  180. background-color: #3a474d; }
  181. .slider {
  182. padding: 30px 25px;
  183. position: relative; }
  184. .slider__item {
  185. color: black;
  186. font-family: 'Bahn';
  187. font-size: 16px; }
  188. .slick-track {
  189. display: -webkit-box;
  190. display: -ms-flexbox;
  191. display: flex; }
  192. .slick-list {
  193. overflow: hidden; }
  194. .footer-block {
  195. width: 100%;
  196. padding: 23px;
  197. background-color: #f27e00;
  198. display: -webkit-box;
  199. display: -ms-flexbox;
  200. display: flex;
  201. -webkit-box-pack: justify;
  202. -ms-flex-pack: justify;
  203. justify-content: space-between; }
  204. .footer-block__left__button {
  205. cursor: pointer; }
  206. .footer-block__left__button img {
  207. vertical-align: middle;
  208. display: inline-block;
  209. width: 15px;
  210. height: 15px;
  211. margin-bottom: 3px; }
  212. .footer-block__left__button p {
  213. display: inline-block;
  214. color: #fff;
  215. font-family: 'Bahn';
  216. font-size: 14px;
  217. margin-left: 5px; }
  218. .footer-block__right__button {
  219. cursor: pointer; }
  220. .footer-block__right__button img {
  221. vertical-align: middle;
  222. display: inline-block;
  223. width: 15px;
  224. height: 15px;
  225. margin-bottom: 2px; }
  226. .footer-block__right__button p {
  227. display: inline;
  228. color: #fff;
  229. font-family: 'Bahn';
  230. font-size: 14px;
  231. margin-right: 5px; }
  232. .slider .slick-arrow {
  233. width: 0px;
  234. font-size: 0px;
  235. position: absolute;
  236. top: 88%;
  237. left: 0; }
  238. .slider .slick-dots {
  239. position: absolute;
  240. top: 115%;
  241. left: 51%;
  242. -webkit-transform: translate(-50%, -50%);
  243. -ms-transform: translate(-50%, -50%);
  244. transform: translate(-50%, -50%);
  245. display: -webkit-box;
  246. display: -ms-flexbox;
  247. display: flex;
  248. -webkit-box-pack: center;
  249. -ms-flex-pack: center;
  250. justify-content: center;
  251. -webkit-box-align: center;
  252. -ms-flex-align: center;
  253. align-items: center; }
  254. .slider .slick-dots li {
  255. list-style: none; }
  256. .slider .slick-dots li.slick-active button {
  257. background: #3a474d; }
  258. .slider .slick-dots button {
  259. font-size: 0px;
  260. margin-right: 20px;
  261. width: 7px;
  262. height: 7px;
  263. border-radius: 50%;
  264. border: none;
  265. cursor: pointer;
  266. background-color: #fff; }
  267. .bottom__block {
  268. display: -webkit-box;
  269. display: -ms-flexbox;
  270. display: flex;
  271. -webkit-box-pack: justify;
  272. -ms-flex-pack: justify;
  273. justify-content: space-between;
  274. -webkit-box-orient: vertical;
  275. -webkit-box-direction: normal;
  276. -ms-flex-direction: column;
  277. flex-direction: column;
  278. background-color: #fff;
  279. -webkit-box-flex: 1;
  280. -ms-flex: 1;
  281. flex: 1;
  282. position: relative; }
  283. .first-block__inforamtion {
  284. padding: 30px 25px; }
  285. .first-block__inforamtion p {
  286. color: black;
  287. font-family: 'Bahn';
  288. font-size: 16px;
  289. margin-bottom: 30px; }
  290. .first-block__inforamtion p:nth-child(5) {
  291. margin-top: 30px; }
  292. .first-block__inforamtion p:last-child {
  293. margin-bottom: 0px; }
  294. .first-block__inforamtion__button {
  295. padding: 30px 25px;
  296. width: 100%;
  297. display: -webkit-box;
  298. display: -ms-flexbox;
  299. display: flex;
  300. -webkit-box-pack: justify;
  301. -ms-flex-pack: justify;
  302. justify-content: space-between;
  303. -webkit-box-align: center;
  304. -ms-flex-align: center;
  305. align-items: center;
  306. margin-top: 10px; }
  307. .first-block__inforamtion__button button {
  308. -webkit-box-flex: 1;
  309. -ms-flex: 1;
  310. flex: 1;
  311. margin-right: 25px; }
  312. .first-block__inforamtion__button button:last-child {
  313. margin-right: 0px; }
  314. .first-block__inforamtion__item {
  315. color: grey;
  316. font-family: 'Bahn';
  317. font-size: 16px; }
  318. .second-block {
  319. position: relative;
  320. -webkit-box-flex: 1;
  321. -ms-flex: 1;
  322. flex: 1;
  323. background-color: #d9d9da;
  324. margin-right: 15px; }
  325. .second-block__button {
  326. padding: 0px 25px;
  327. margin-top: 30px;
  328. width: 100%;
  329. display: -webkit-box;
  330. display: -ms-flexbox;
  331. display: flex;
  332. -webkit-box-pack: justify;
  333. -ms-flex-pack: justify;
  334. justify-content: space-between;
  335. -webkit-box-align: center;
  336. -ms-flex-align: center;
  337. align-items: center; }
  338. .second-block__button button {
  339. -webkit-box-flex: 1;
  340. -ms-flex: 1;
  341. flex: 1;
  342. margin-right: 25px; }
  343. .second-block__button button:last-child {
  344. margin-right: 0px; }
  345. .second-block__form {
  346. padding: 0px 25px;
  347. margin-top: 20px;
  348. display: none; }
  349. .second-block__form.visible {
  350. display: block; }
  351. .second-block__form p {
  352. text-align: center;
  353. color: black;
  354. font-family: 'Bahn';
  355. font-size: 19px; }
  356. .second-block__form__button {
  357. margin-top: 30px;
  358. width: 100%;
  359. margin-left: auto;
  360. margin-right: auto;
  361. display: -webkit-box;
  362. display: -ms-flexbox;
  363. display: flex;
  364. -webkit-box-pack: justify;
  365. -ms-flex-pack: justify;
  366. justify-content: space-between;
  367. -webkit-box-align: center;
  368. -ms-flex-align: center;
  369. align-items: center;
  370. margin-bottom: 30px;
  371. -ms-flex-wrap: wrap;
  372. flex-wrap: wrap; }
  373. .second-block__form__button button {
  374. -webkit-box-flex: 1;
  375. -ms-flex: 1;
  376. flex: 1;
  377. margin-right: 25px; }
  378. .second-block__form__button button:last-child {
  379. margin-right: 0px; }
  380. .second-block__input__file {
  381. opacity: 0;
  382. visibility: hidden;
  383. position: absolute; }
  384. .second-block__input__file__label {
  385. display: inline;
  386. cursor: pointer; }
  387. .second-block__input__file__label__box {
  388. display: -webkit-box;
  389. display: -ms-flexbox;
  390. display: flex;
  391. width: 100%;
  392. margin-top: 30px;
  393. margin-left: auto;
  394. margin-right: auto;
  395. -webkit-box-pack: justify;
  396. -ms-flex-pack: justify;
  397. justify-content: space-between;
  398. -ms-flex-wrap: wrap;
  399. flex-wrap: wrap; }
  400. .second-block__input__file__label span {
  401. display: inline-block;
  402. color: #fff;
  403. font-family: 'Bahn';
  404. font-size: 32px;
  405. padding: 1px 12px;
  406. background-color: #3a474d;
  407. border-radius: 30%; }
  408. .second-block__input__file__label p {
  409. position: relative;
  410. display: inline-block;
  411. color: black;
  412. font-family: 'Bahn';
  413. font-size: 16px;
  414. margin-left: 15px;
  415. bottom: 4px; }
  416. .header-block_second {
  417. background-color: #52648a; }
  418. .upload__label {
  419. display: block;
  420. width: 100%;
  421. margin-left: auto;
  422. margin-right: auto; }
  423. .upload__label_mb {
  424. margin-bottom: 60px; }
  425. .upload__textarea {
  426. min-height: 150px;
  427. resize: none; }
  428. .upload__input, .upload__textarea {
  429. margin-left: auto;
  430. margin-right: auto;
  431. width: 100%;
  432. display: block;
  433. border: none;
  434. border-radius: 0;
  435. background: #FFFFFF;
  436. padding: 10px 10px;
  437. height: auto;
  438. font-size: 16px;
  439. margin-top: 16px; }
  440. .upload__input::-webkit-input-placeholder, .upload__textarea::-webkit-input-placeholder {
  441. color: #647B99;
  442. font-style: italic;
  443. font-family: 'Bahn', sans-serif; }
  444. .upload__input::-moz-placeholder, .upload__textarea::-moz-placeholder {
  445. color: #647B99;
  446. font-style: italic;
  447. font-family: 'Bahn', sans-serif; }
  448. .upload__input:-ms-input-placeholder, .upload__textarea:-ms-input-placeholder {
  449. color: #647B99;
  450. font-style: italic;
  451. font-family: 'Bahn', sans-serif; }
  452. .upload__input::-ms-input-placeholder, .upload__textarea::-ms-input-placeholder {
  453. color: #647B99;
  454. font-style: italic;
  455. font-family: 'Bahn', sans-serif; }
  456. .upload__input::placeholder, .upload__textarea::placeholder {
  457. color: #647B99;
  458. font-style: italic;
  459. font-family: 'Bahn', sans-serif; }
  460. .upload__input-descr, .upload__textarea-descr {
  461. margin-top: 8px;
  462. font-style: italic;
  463. font-size: 14px;
  464. font-family: "Bahn"; }
  465. .form-control:focus {
  466. color: #495057;
  467. background-color: #fff;
  468. border-color: #80bdff;
  469. outline: 0;
  470. -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  471. box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); }
  472. #file_name {
  473. position: relative;
  474. display: inline-block;
  475. margin-top: 15px;
  476. text-align: left;
  477. text-align: right;
  478. color: black;
  479. font-family: 'Bahn';
  480. font-size: 16px;
  481. bottom: 4px; }
  482. #file_name_verify {
  483. position: relative;
  484. display: inline-block;
  485. margin-top: 15px;
  486. text-align: left;
  487. text-align: right;
  488. color: black;
  489. font-family: 'Bahn';
  490. font-size: 16px;
  491. bottom: 4px; }
  492. .header-block_third {
  493. background: #f27e00; }
  494. .third-block {
  495. -webkit-box-flex: 1;
  496. -ms-flex: 1;
  497. flex: 1;
  498. background-color: #d9d9da;
  499. position: relative; }
  500. @media (max-width: 1440px) {
  501. .second-block__form {
  502. margin-top: 20px; }
  503. .second-block__form__button {
  504. -ms-flex-wrap: wrap;
  505. flex-wrap: wrap; }
  506. .first-block__inforamtion__button {
  507. -ms-flex-wrap: wrap;
  508. flex-wrap: wrap; } }
  509. @media (max-width: 1250px) {
  510. .blocks {
  511. display: block; }
  512. .first-block {
  513. margin-right: 0px;
  514. margin-top: 50px; }
  515. .second-block {
  516. margin-right: 0px;
  517. margin-top: 50px; }
  518. .third-block {
  519. margin-right: 0px;
  520. margin-top: 50px; }
  521. .nav {
  522. -webkit-box-pack: start;
  523. -ms-flex-pack: start;
  524. justify-content: start; }
  525. .middle-href {
  526. margin-top: 80%; }
  527. .bottom-href {
  528. margin-top: 140%; }
  529. .first-block__inforamtion p:last-child {
  530. margin-bottom: 70px; }
  531. .second-block__form {
  532. padding-bottom: 35px; }
  533. .second-block__form__button {
  534. margin-bottom: 0px; } }
  535. @media (max-width: 980px) {
  536. .blocks {
  537. margin-left: 0px; }
  538. .first-block {
  539. margin-top: 10px; }
  540. .wrap {
  541. width: 100%;
  542. height: 100%;
  543. display: -webkit-box;
  544. display: -ms-flexbox;
  545. display: flex;
  546. -webkit-box-pack: start;
  547. -ms-flex-pack: start;
  548. justify-content: start;
  549. -webkit-box-orient: vertical;
  550. -webkit-box-direction: normal;
  551. -ms-flex-direction: column;
  552. flex-direction: column;
  553. min-height: 0; }
  554. .nav {
  555. position: sticky;
  556. width: 100%;
  557. height: -webkit-fit-content;
  558. height: -moz-fit-content;
  559. height: fit-content;
  560. background-color: #3a474d;
  561. display: -webkit-box;
  562. display: -ms-flexbox;
  563. display: flex;
  564. -webkit-box-pack: justify;
  565. -ms-flex-pack: justify;
  566. justify-content: space-between;
  567. -webkit-box-orient: horizontal;
  568. -webkit-box-direction: normal;
  569. -ms-flex-direction: row;
  570. flex-direction: row;
  571. z-index: 2;
  572. padding: 30px 20px;
  573. white-space: nowrap;
  574. overflow: auto;
  575. -webkit-box-align: center;
  576. -ms-flex-align: center;
  577. align-items: center; }
  578. .nav a {
  579. display: inline-block;
  580. width: 30px;
  581. height: 30px;
  582. margin-right: 80px;
  583. position: relative; }
  584. .nav a img {
  585. width: 30px;
  586. height: 30px; }
  587. .nav a:after {
  588. display: block;
  589. content: attr(title);
  590. position: absolute;
  591. top: 115%;
  592. left: 50%;
  593. -webkit-transform: translateX(-50%);
  594. -ms-transform: translateX(-50%);
  595. transform: translateX(-50%);
  596. color: #fff;
  597. text-decoration: none;
  598. font-family: 'Bahn';
  599. font-size: 12px; }
  600. .top-href__logo {
  601. width: 120px;
  602. margin-left: 0px;
  603. margin-right: 0px;
  604. display: inline-block; }
  605. .top-href a {
  606. margin-top: 0px;
  607. margin-left: 60px; }
  608. .middle-href {
  609. margin-top: 0px;
  610. margin-left: 0px; }
  611. .middle-href a {
  612. margin-top: 0%; }
  613. .middle-href a:first-child {
  614. margin-top: 0%; }
  615. .bottom-href {
  616. margin-top: 0px;
  617. margin-bottom: 0%; }
  618. .bottom-href a:first-child {
  619. margin-bottom: 0%; }
  620. .bottom-href a:last-child {
  621. margin-right: 30px; } }
  622. @media (max-width: 395px) {
  623. .header-block {
  624. position: relative; }
  625. .header-block__text {
  626. font-size: 18px; }
  627. .slider .slick-dots {
  628. top: 113%; }
  629. .slider .slick-dots li {
  630. list-style: none; }
  631. .slider .slick-dots li.slick-active button {
  632. background: #3a474d; }
  633. .slider .slick-dots button {
  634. font-size: 0px;
  635. margin-right: 15px;
  636. width: 7px;
  637. height: 7px;
  638. border-radius: 50%;
  639. border: none;
  640. cursor: pointer; }
  641. .first-block__inforamtion__button {
  642. display: block; }
  643. .first-block__inforamtion__button button {
  644. display: block;
  645. margin-top: 20px;
  646. width: 100%; }
  647. .first-block__inforamtion p:last-child {
  648. margin-bottom: 200px; }
  649. .second-block__button {
  650. display: block; }
  651. .second-block__button button {
  652. display: block;
  653. margin-bottom: 20px;
  654. width: 100%; } }
  655. .modal {
  656. overflow-y: auto;
  657. position: fixed;
  658. top: 0;
  659. left: 0;
  660. width: 100%;
  661. height: 100%;
  662. background: rgba(0, 0, 0, 0.8);
  663. z-index: 2;
  664. display: none; }
  665. .modal.active {
  666. display: block; }
  667. .modal-container {
  668. display: -webkit-box;
  669. display: -ms-flexbox;
  670. display: flex;
  671. width: 100%;
  672. height: 100%;
  673. position: relative; }
  674. .modal__body {
  675. margin: auto;
  676. width: 50%;
  677. background: #ececec;
  678. border: 10px solid #3a474d; }
  679. .modal__body__header {
  680. padding: 20px;
  681. display: -webkit-box;
  682. display: -ms-flexbox;
  683. display: flex;
  684. background-color: #f27e00;
  685. -webkit-box-pack: justify;
  686. -ms-flex-pack: justify;
  687. justify-content: space-between;
  688. -webkit-box-align: center;
  689. -ms-flex-align: center;
  690. align-items: center; }
  691. .modal__body__header_noflex {
  692. display: block; }
  693. .modal__body__header__info img {
  694. display: inline-block;
  695. width: 40px;
  696. height: 40px;
  697. vertical-align: middle; }
  698. .modal__body__header__info p {
  699. position: relative;
  700. display: inline-block;
  701. color: #fff;
  702. font-family: 'Bahn', sans-serif;
  703. font-size: 21px;
  704. margin-left: 20px;
  705. top: 5px; }
  706. .modal__body__header__href a {
  707. color: #fff;
  708. font-family: 'Bahn', sans-serif;
  709. font-size: 21px;
  710. text-decoration: none;
  711. margin-right: 15px; }
  712. .modal__body__header__href a:last-child {
  713. margin-right: 0px; }
  714. .modal__body__container {
  715. display: -webkit-box;
  716. display: -ms-flexbox;
  717. display: flex;
  718. background: #ececec;
  719. position: relative; }
  720. .modal__body__container_aligncenter {
  721. -webkit-box-align: center;
  722. -ms-flex-align: center;
  723. align-items: center; }
  724. .modal__body__container_noflex {
  725. display: block; }
  726. .modal__body__container__left {
  727. -webkit-box-flex: 1;
  728. -ms-flex: 1;
  729. flex: 1;
  730. border-right: 3px solid #fff;
  731. padding: 20px;
  732. z-index: 2; }
  733. .modal__body__container__left_blackborder {
  734. border-right: 3px solid #3a474d; }
  735. .modal__body__container__left_flex {
  736. display: -webkit-box;
  737. display: -ms-flexbox;
  738. display: flex;
  739. -webkit-box-pack: justify;
  740. -ms-flex-pack: justify;
  741. justify-content: space-between;
  742. -webkit-box-align: center;
  743. -ms-flex-align: center;
  744. align-items: center; }
  745. .modal__body__container__right {
  746. -webkit-box-flex: 1;
  747. -ms-flex: 1;
  748. flex: 1;
  749. padding: 20px 20px;
  750. margin-left: -3px;
  751. z-index: 2;
  752. border-left: 3px solid #fff; }
  753. .modal__body__container__right_paddinglr {
  754. padding: 20px 40px; }
  755. .modal__body__container__right_blackborder {
  756. border-left: 3px solid #3a474d; }
  757. .modal__body__calc__balance__header {
  758. display: -webkit-box;
  759. display: -ms-flexbox;
  760. display: flex;
  761. -webkit-box-pack: justify;
  762. -ms-flex-pack: justify;
  763. justify-content: space-between;
  764. -webkit-box-align: center;
  765. -ms-flex-align: center;
  766. align-items: center;
  767. margin-bottom: 50px; }
  768. .modal__body__calc__balance__header p {
  769. color: black;
  770. font-family: 'Bahn', sans-serif;
  771. font-size: 21px; }
  772. .modal__body__calc__balance__numbers {
  773. display: -webkit-box;
  774. display: -ms-flexbox;
  775. display: flex;
  776. -webkit-box-pack: justify;
  777. -ms-flex-pack: justify;
  778. justify-content: space-between;
  779. margin-top: 20px; }
  780. .modal__body__calc__balance__numbers__name p {
  781. color: black;
  782. font-family: 'Bahn', sans-serif;
  783. font-size: 21px; }
  784. .modal__body__calc__balance__numbers__value__item p {
  785. display: inline-block;
  786. color: black;
  787. font-family: 'Bahn', sans-serif;
  788. font-size: 21px; }
  789. .modal__body__calc__balance__button {
  790. margin-top: 30px; }
  791. .modal__body__calc__balance__button button {
  792. margin-left: auto;
  793. margin-right: auto; }
  794. .modal__body__calc__balance__button button:first-child {
  795. margin-bottom: 20px; }
  796. .modal__body__calc__change__header {
  797. color: black;
  798. font-family: 'Bahn', sans-serif;
  799. font-size: 21px;
  800. text-transform: uppercase; }
  801. .modal__body__calc__change__desc {
  802. color: black;
  803. font-family: 'Bahn', sans-serif;
  804. font-size: 16px;
  805. text-transform: uppercase;
  806. margin-top: 5px; }
  807. .modal__input {
  808. width: 100%;
  809. padding: 10px 100px 30px 80px;
  810. color: black;
  811. font-family: 'Bahn', sans-serif;
  812. font-size: 18px;
  813. background-color: #fff;
  814. border: none; }
  815. .modal__input__box {
  816. margin-top: 40px;
  817. position: relative; }
  818. .modal__input__box:before {
  819. display: block;
  820. content: attr(place);
  821. position: absolute;
  822. top: 20px;
  823. -webkit-transform: translateY(-50%);
  824. -ms-transform: translateY(-50%);
  825. transform: translateY(-50%);
  826. left: 10px;
  827. color: black;
  828. font-family: 'Bahn', sans-serif;
  829. font-size: 18px; }
  830. .modal__input__box:after {
  831. display: block;
  832. content: "Balance " attr(balanc) " " attr(currency);
  833. color: black;
  834. font-family: 'Bahn', sans-serif;
  835. font-size: 14px;
  836. position: absolute;
  837. top: 62%;
  838. left: 50%;
  839. -webkit-transform: translateX(-50%);
  840. -ms-transform: translateX(-50%);
  841. transform: translateX(-50%); }
  842. .modal__input__total {
  843. margin-top: 20px;
  844. display: -webkit-box;
  845. display: -ms-flexbox;
  846. display: flex;
  847. -webkit-box-pack: justify;
  848. -ms-flex-pack: justify;
  849. justify-content: space-between; }
  850. .modal__input__total p {
  851. color: black;
  852. font-family: 'Bahn', sans-serif;
  853. font-size: 18px;
  854. display: inline-block; }
  855. .modal__input__total p:first-child {
  856. padding-left: 10px; }
  857. .modal__input__button {
  858. margin-top: 20px; }
  859. .modal__input__button button {
  860. margin-left: auto;
  861. margin-right: auto; }
  862. .modal__select {
  863. position: absolute;
  864. top: 10px;
  865. right: 10px;
  866. border: none;
  867. cursor: pointer;
  868. color: black;
  869. font-family: 'Bahn', sans-serif;
  870. font-size: 18px; }
  871. .modal_close {
  872. position: absolute;
  873. top: 40px;
  874. right: 40px;
  875. text-decoration: none;
  876. color: #fff;
  877. font-size: 32px; }
  878. .btn_orange {
  879. display: block;
  880. color: #fff;
  881. font-family: 'Bahn', sans-serif;
  882. font-size: 21px;
  883. border: none;
  884. background: #f27e00;
  885. padding: 10px 40px;
  886. cursor: pointer; }
  887. .btn_grey {
  888. display: block;
  889. color: black;
  890. font-family: 'Bahn';
  891. font-size: 16px;
  892. border: none;
  893. background: none;
  894. cursor: pointer;
  895. background-color: #ececec;
  896. padding: 20px 5px; }
  897. .btn_white {
  898. display: block;
  899. color: black;
  900. font-family: 'Bahn';
  901. font-size: 16px;
  902. border: none;
  903. background: none;
  904. cursor: pointer;
  905. background-color: #fff;
  906. padding: 20px 5px; }
  907. @media (max-width: 1440px) {
  908. .modal__body {
  909. width: 90%; } }
  910. @media (max-width: 768px) {
  911. .modal__body__container {
  912. display: block; }
  913. .modal__body__header {
  914. -ms-flex-wrap: wrap;
  915. flex-wrap: wrap; }
  916. .modal__body__container__right {
  917. margin-left: 0px;
  918. border: none; }
  919. .modal__body__container__left {
  920. margin-left: 0px;
  921. border: none; } }
  922. @media (max-width: 590px) {
  923. .modal__body__header__href {
  924. margin-top: 30px; }
  925. .modal_close {
  926. top: 5px;
  927. right: 10px; }
  928. .btn_grey {
  929. padding: 10px 5px; }
  930. .btn_white {
  931. padding: 10px 5px; } }
  932. @media (max-width: 400px) {
  933. .modal__body__header__info {
  934. display: block;
  935. margin-left: auto;
  936. margin-right: auto; }
  937. .modal__body__header__info img {
  938. display: block;
  939. margin-right: 0px;
  940. margin-left: auto;
  941. margin-right: auto; }
  942. .modal__body__header__info p {
  943. display: block;
  944. margin-left: 0px;
  945. margin-left: auto;
  946. margin-right: auto;
  947. font-size: 18px;
  948. margin-top: 5px; }
  949. .modal {
  950. padding-top: 70px; }
  951. .modal_close {
  952. top: -50px;
  953. right: 15px;
  954. font-size: 24px; }
  955. .modal__body__header__href {
  956. margin-left: auto;
  957. margin-right: auto; }
  958. .modal__body__header__href a {
  959. font-size: 16px; }
  960. .modal__body__calc__balance__header p {
  961. font-size: 18px; }
  962. .btn_orange {
  963. display: block;
  964. color: #fff;
  965. font-family: 'Bahn', sans-serif;
  966. font-size: 16px;
  967. border: none;
  968. background: #f27e00;
  969. padding: 10px 20px;
  970. cursor: pointer; }
  971. .modal__body__calc__balance__numbers__name p {
  972. font-size: 18px; }
  973. .modal__body__calc__balance__numbers__value__item p {
  974. font-size: 18px; }
  975. .modal__body__calc__change__header {
  976. font-size: 18px; }
  977. .modal__body__calc__change__desc {
  978. font-size: 16px; }
  979. .modal__input__box:after {
  980. font-size: 14px;
  981. width: 100%;
  982. left: 68%; }
  983. .modal__input__box:before {
  984. font-size: 16px; }
  985. .modal__input {
  986. padding: 10px 30px 40px 60px;
  987. font-size: 16px; }
  988. .modal__select {
  989. font-size: 16px; }
  990. .modal__body__calc__balance__button button {
  991. width: 100%; }
  992. .modal__input__button button {
  993. width: 100%; }
  994. .modal__input__total p {
  995. font-size: 16px; } }
  996. @media (max-width: 450px) {
  997. .second-block__button button {
  998. display: block;
  999. width: 100%;
  1000. margin-right: 25px; }
  1001. .second-block__form__button {
  1002. display: block; }
  1003. .second-block__form__button button {
  1004. display: block;
  1005. width: 100%; }
  1006. .second-block__form__button button:first-child {
  1007. margin-bottom: 20px; } }
  1008. .modal__profile__photo {
  1009. position: relative; }
  1010. .modal__profile__img {
  1011. width: 260px;
  1012. border: 10px solid #fff;
  1013. height: 350px;
  1014. -o-object-fit: cover;
  1015. object-fit: cover; }
  1016. .modal__profile__img__icon {
  1017. width: 50px;
  1018. height: 50px;
  1019. position: absolute;
  1020. top: 80%;
  1021. left: 50%;
  1022. -webkit-transform: translateX(-50%);
  1023. -ms-transform: translateX(-50%);
  1024. transform: translateX(-50%); }
  1025. .modal__profile__social {
  1026. -webkit-box-flex: 1;
  1027. -ms-flex: 1;
  1028. flex: 1;
  1029. text-align: right;
  1030. margin-right: 20px; }
  1031. .modal__profile__social__item {
  1032. display: block;
  1033. margin-bottom: 10px; }
  1034. .modal__profile__social__item img {
  1035. width: 40px;
  1036. height: 40px; }
  1037. .modal__profile__social__item:last-child {
  1038. margin-bottom: 0px; }
  1039. .modal__profile__text {
  1040. color: black;
  1041. font-family: 'Bahn';
  1042. font-size: 24px;
  1043. margin-bottom: 5px; }
  1044. .modal__profile__text_mb {
  1045. margin-bottom: 30px; }
  1046. .modal__files__type {
  1047. text-align: center;
  1048. color: black;
  1049. font-family: 'Bahn';
  1050. font-size: 36px;
  1051. margin-bottom: 5px; }
  1052. .modal__files__type:last-child {
  1053. margin-bottom: 0px; }
  1054. .modal__files__name {
  1055. text-align: center;
  1056. color: black;
  1057. font-family: 'Bahn';
  1058. font-size: 16px;
  1059. margin-bottom: 3px; }
  1060. .modal__files__name:last-child {
  1061. margin-bottom: 0px; }
  1062. .modal__competence__text {
  1063. color: black;
  1064. font-family: 'Bahn';
  1065. font-size: 18px;
  1066. margin-bottom: 25px; }
  1067. .modal__competence__text:last-child {
  1068. margin-bottom: 0px; }
  1069. .modal__competence__header__text {
  1070. color: black;
  1071. font-family: 'Bahn';
  1072. font-size: 18px;
  1073. text-align: center; }
  1074. .modal__competence__scale {
  1075. margin-top: 15px; }
  1076. .modal__competence__scale__text {
  1077. color: black;
  1078. font-family: 'Bahn';
  1079. font-size: 18px;
  1080. text-align: center; }
  1081. .modal__competence__scale__box {
  1082. width: 100%;
  1083. background: #fff;
  1084. border: 3px solid #3A474D;
  1085. margin-top: 10px;
  1086. display: -webkit-box;
  1087. display: -ms-flexbox;
  1088. display: flex;
  1089. -webkit-box-pack: start;
  1090. -ms-flex-pack: start;
  1091. justify-content: start;
  1092. padding: 4px 4px; }
  1093. .modal__competence__scale__box__item {
  1094. -webkit-box-flex: 1;
  1095. -ms-flex: 1;
  1096. flex: 1;
  1097. margin-right: 4px;
  1098. background-color: #bebebe;
  1099. padding: 4px 0px; }
  1100. .modal__competence__scale__box__item_blue {
  1101. background-color: #3a474d; }
  1102. .modal__competence__scale__box__item_orange {
  1103. background-color: #f27e00; }
  1104. .modal__competence__scale__box__item_black {
  1105. background-color: #000; }
  1106. .modal__competence__scale__box__item:last-child {
  1107. margin-right: 0px; }
  1108. .modal__competence__button {
  1109. margin-left: auto;
  1110. margin-right: auto;
  1111. margin-top: 30px; }
  1112. .modal__competence__central__icon {
  1113. position: absolute;
  1114. top: 50%;
  1115. left: 50%;
  1116. -webkit-transform: translate(-79%, -50%);
  1117. -ms-transform: translate(-79%, -50%);
  1118. transform: translate(-79%, -50%);
  1119. width: 70px; }
  1120. .scale__value {
  1121. font-family: 'Bahn';
  1122. font-size: 16px;
  1123. text-align: center;
  1124. color: #fff; }
  1125. .modal__raiting__info {
  1126. color: black;
  1127. font-family: 'Bahn';
  1128. font-size: 18px;
  1129. margin-bottom: 30px; }
  1130. .modal__raiting__info:last-child {
  1131. margin-bottom: 0px; }
  1132. .modal__raiting__header {
  1133. color: black;
  1134. font-family: 'Bahn';
  1135. font-size: 28px;
  1136. margin-bottom: 40px;
  1137. text-align: center; }
  1138. .modal__raiting__value {
  1139. color: black;
  1140. text-align: center;
  1141. font-family: 'Bahn';
  1142. font-size: 56px;
  1143. margin-bottom: 40px; }
  1144. .modal__raiting__button {
  1145. margin-left: auto;
  1146. margin-right: auto; }
  1147. .modal__404__text {
  1148. color: black;
  1149. font-family: 'Bahn';
  1150. font-size: 18px;
  1151. margin-bottom: 40px;
  1152. text-align: center; }
  1153. .modal__404__text:last-child {
  1154. margin-bottom: 0px; }
  1155. .modal__404__text__box {
  1156. padding: 80px 0px; }
  1157. .modal__rules__info {
  1158. color: black;
  1159. font-family: 'Bahn';
  1160. font-size: 18px; }
  1161. .modal__rules__button {
  1162. margin-left: auto;
  1163. margin-right: auto;
  1164. width: 60%;
  1165. text-align: center; }
  1166. .modal__rules__button:nth-child(2) {
  1167. margin: 50px auto; }
  1168. .modal__qual__header p {
  1169. color: #fff;
  1170. font-family: 'Bahn';
  1171. font-size: 24px;
  1172. text-align: center; }
  1173. .modal__qual__info {
  1174. color: black;
  1175. font-family: 'Bahn';
  1176. font-size: 18px;
  1177. margin-bottom: 20px; }
  1178. .modal__qual__info:last-child {
  1179. margin-bottom: 0px; }
  1180. .modal__qual__question {
  1181. color: black;
  1182. font-family: 'Bahn';
  1183. font-size: 18px;
  1184. margin-bottom: 40px; }
  1185. .modal__qual__button {
  1186. text-align: center; }
  1187. .modal__qual__button__box {
  1188. display: -webkit-box;
  1189. display: -ms-flexbox;
  1190. display: flex;
  1191. -webkit-box-pack: justify;
  1192. -ms-flex-pack: justify;
  1193. justify-content: space-between; }
  1194. .modal__qual__button__box__item {
  1195. -webkit-box-flex: 1;
  1196. -ms-flex: 1;
  1197. flex: 1;
  1198. margin-right: 30px;
  1199. color: #fff;
  1200. font-family: 'Bahn';
  1201. font-size: 24px;
  1202. padding: 20px;
  1203. border: 5px solid #3a474d;
  1204. background-color: #f27e00;
  1205. cursor: pointer; }
  1206. .modal__qual__button__box__item:last-child {
  1207. margin-right: 0px; }
  1208. .modal__qual__button__item {
  1209. border: none;
  1210. background: none;
  1211. color: black;
  1212. font-family: 'Bahn';
  1213. font-size: 18px;
  1214. cursor: pointer;
  1215. margin-top: 20px; }
  1216. .verify__form {
  1217. display: none; }
  1218. .сheckbox__label {
  1219. cursor: pointer;
  1220. display: block;
  1221. margin-bottom: 30px;
  1222. color: black;
  1223. font-family: 'Bahn';
  1224. font-size: 16px;
  1225. position: relative;
  1226. padding-left: 35px; }
  1227. .сheckbox__label:before {
  1228. content: '';
  1229. position: absolute;
  1230. top: 50%;
  1231. -webkit-transform: translateY(-50%);
  1232. -ms-transform: translateY(-50%);
  1233. transform: translateY(-50%);
  1234. left: 0;
  1235. width: 20px;
  1236. height: 20px;
  1237. border: 2px solid #3a474d;
  1238. background: #fff; }
  1239. .сheckbox__label:last-child {
  1240. margin-bottom: 60px; }
  1241. .checkbox__input {
  1242. -webkit-appearance: none;
  1243. -moz-appearance: none;
  1244. appearance: none;
  1245. position: absolute;
  1246. width: 0px;
  1247. height: 0px; }
  1248. .checkbox__input:checked + .сheckbox__label:before {
  1249. background: #3a474d; }
  1250. .third-block__info__ul {
  1251. margin-top: 20px;
  1252. padding: 10px; }
  1253. .third-block__info__li {
  1254. color: black;
  1255. font-family: 'Bahn';
  1256. font-size: 18px;
  1257. list-style: none;
  1258. position: relative;
  1259. margin-bottom: 10px;
  1260. padding-left: 42px; }
  1261. .third-block__info__li:before {
  1262. content: '';
  1263. display: block;
  1264. position: absolute;
  1265. top: 50%;
  1266. -webkit-transform: translateY(-70%);
  1267. -ms-transform: translateY(-70%);
  1268. transform: translateY(-70%);
  1269. left: 20px;
  1270. width: 12px;
  1271. height: 12px;
  1272. background: #f27e00; }
  1273. .block__dropbox {
  1274. display: none;
  1275. position: absolute;
  1276. top: 64px;
  1277. left: 100%;
  1278. -webkit-transform: translateX(-100%);
  1279. -ms-transform: translateX(-100%);
  1280. transform: translateX(-100%);
  1281. background-color: #fff;
  1282. padding: 20px;
  1283. z-index: 2; }
  1284. .block__dropbox__header__text {
  1285. color: black;
  1286. font-family: 'Bahn';
  1287. font-size: 21px;
  1288. margin-bottom: 10px; }
  1289. .block__dropbox__select {
  1290. display: block;
  1291. color: black;
  1292. font-family: 'Bahn';
  1293. font-size: 16px;
  1294. margin-top: 10px; }
  1295. .block__dropbox__search {
  1296. margin-top: 30px;
  1297. display: block;
  1298. color: black;
  1299. font-family: 'Bahn';
  1300. font-size: 16px; }
  1301. .block__dropbox__search input {
  1302. display: block;
  1303. margin-top: 8px;
  1304. padding: 5px; }
  1305. @media (max-width: 500px) {
  1306. .modal__profile__photo {
  1307. position: relative; }
  1308. .modal__profile__img {
  1309. width: 180px;
  1310. border: 10px solid #fff;
  1311. height: 280px;
  1312. -o-object-fit: cover;
  1313. object-fit: cover; }
  1314. .modal__profile__img__icon {
  1315. width: 40px;
  1316. height: 40px;
  1317. position: absolute;
  1318. top: 75%;
  1319. left: 50%;
  1320. -webkit-transform: translateX(-50%);
  1321. -ms-transform: translateX(-50%);
  1322. transform: translateX(-50%); }
  1323. .modal__profile__social {
  1324. -webkit-box-flex: 1;
  1325. -ms-flex: 1;
  1326. flex: 1;
  1327. text-align: right;
  1328. margin-right: 0px; }
  1329. .modal__profile__social__item {
  1330. display: block;
  1331. margin-bottom: 20px; }
  1332. .modal__profile__social__item img {
  1333. width: 30px;
  1334. height: 30px; }
  1335. .modal__profile__social__item:last-child {
  1336. margin-bottom: 0px; }
  1337. .modal__profile__text {
  1338. color: black;
  1339. font-family: 'Bahn';
  1340. font-size: 18px;
  1341. margin-bottom: 5px; }
  1342. .modal__profile__text_mb {
  1343. margin-bottom: 30px; }
  1344. .modal__competence__central__icon {
  1345. display: none; }
  1346. .scale__value {
  1347. font-size: 12px; }
  1348. .modal__qual__button__box__item {
  1349. margin-right: 10px; } }
  1350. .tab-button.active {
  1351. background-color: #c3c3c3; }