style.css 34 KB

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