Advertisement
Guest User

Untitled

a guest
Sep 17th, 2019
147
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 59.76 KB | None | 0 0
  1. html {
  2. -webkit-box-sizing: border-box;
  3. box-sizing: border-box; }
  4.  
  5. *,
  6. *::before,
  7. *::after {
  8. -webkit-box-sizing: inherit;
  9. box-sizing: inherit; }
  10.  
  11. .title {
  12. font-family: "Montserrat", "Arial", "sans-serif";
  13. font-size: 32px;
  14. line-height: 39px;
  15. color: #333333;
  16. font-weight: 900;
  17. padding: 0;
  18. margin: 0;
  19. text-transform: uppercase;
  20. padding-bottom: 30px;
  21. position: relative;
  22. margin-bottom: 30px; }
  23. .title::before {
  24. content: "";
  25. position: absolute;
  26. bottom: 0;
  27. left: 0;
  28. width: 170px;
  29. height: 5px;
  30. background: -webkit-gradient(linear, right top, left top, from(#F9D423), to(#F83600));
  31. background: linear-gradient(270deg, #F9D423 0%, #F83600 100%);
  32. border-radius: 5px; }
  33. .title--white {
  34. color: #ffffff;
  35. background: none;
  36. -webkit-text-fill-color: inherit; }
  37.  
  38. .subtitle {
  39. font-family: "Montserrat", "Arial", "sans-serif";
  40. font-size: 18px;
  41. line-height: 22px;
  42. font-weight: 600;
  43. color: #333333;
  44. padding: 0;
  45. margin: 0;
  46. text-transform: uppercase;
  47. background: -webkit-gradient(linear, right top, left top, from(#F9D423), to(#F83600));
  48. background: linear-gradient(270deg, #F9D423 0%, #F83600 100%);
  49. -webkit-text-fill-color: transparent;
  50. -webkit-background-clip: text;
  51. background-clip: text;
  52. padding-bottom: 20px; }
  53. .subtitle--white {
  54. color: #ffffff;
  55. background: none;
  56. -webkit-text-fill-color: inherit; }
  57.  
  58. .background-text {
  59. display: none; }
  60.  
  61. @media (min-width: 420px) {
  62. .title {
  63. font-size: 20px;
  64. line-height: 1.2;
  65. position: relative;
  66. z-index: 10; }
  67. .subtitle {
  68. font-size: 14px;
  69. line-height: 1.2; } }
  70.  
  71. .btn {
  72. display: block;
  73. font-family: "Montserrat", "Arial", "sans-serif";
  74. font-size: 14px;
  75. line-height: 17px;
  76. font-weight: 600;
  77. text-transform: uppercase;
  78. color: #ffffff;
  79. background-image: -webkit-gradient(linear, right top, left top, from(#F9D423), to(#F83600));
  80. background-image: linear-gradient(270deg, #F9D423 0%, #F83600 100%);
  81. text-decoration: none;
  82. width: 270px;
  83. padding-top: 21px;
  84. padding-bottom: 21px;
  85. padding-left: 61px;
  86. padding-right: 61px;
  87. border-radius: 99px;
  88. text-align: center;
  89. cursor: pointer; }
  90.  
  91. @media (min-width: 420px) {
  92. .subtitle {
  93. font-size: 16px;
  94. line-height: 1.2; }
  95. .title {
  96. font-size: 20px;
  97. line-height: 1.2; } }
  98.  
  99. @media (min-width: 1200px) {
  100. .background-text {
  101. display: block; }
  102. .title {
  103. margin-bottom: 120px;
  104. font-size: 32px;
  105. line-height: 39px; }
  106. .subtitle {
  107. font-size: 18px;
  108. line-height: 22px; } }
  109.  
  110. /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
  111. /* Document
  112. ========================================================================== */
  113. /**
  114. * 1. Correct the line height in all browsers.
  115. * 2. Prevent adjustments of font size after orientation changes in iOS.
  116. */
  117. html {
  118. line-height: 1.15;
  119. /* 1 */
  120. -webkit-text-size-adjust: 100%;
  121. /* 2 */ }
  122.  
  123. /* Sections
  124. ========================================================================== */
  125. /**
  126. * Remove the margin in all browsers.
  127. */
  128. body {
  129. margin: 0; }
  130.  
  131. /**
  132. * Render the `main` element consistently in IE.
  133. */
  134. main {
  135. display: block; }
  136.  
  137. /**
  138. * Correct the font size and margin on `h1` elements within `section` and
  139. * `article` contexts in Chrome, Firefox, and Safari.
  140. */
  141. h1 {
  142. font-size: 2em;
  143. margin: 0.67em 0; }
  144.  
  145. /* Grouping content
  146. ========================================================================== */
  147. /**
  148. * 1. Add the correct box sizing in Firefox.
  149. * 2. Show the overflow in Edge and IE.
  150. */
  151. hr {
  152. -webkit-box-sizing: content-box;
  153. box-sizing: content-box;
  154. /* 1 */
  155. height: 0;
  156. /* 1 */
  157. overflow: visible;
  158. /* 2 */ }
  159.  
  160. /**
  161. * 1. Correct the inheritance and scaling of font size in all browsers.
  162. * 2. Correct the odd `em` font sizing in all browsers.
  163. */
  164. pre {
  165. font-family: monospace, monospace;
  166. /* 1 */
  167. font-size: 1em;
  168. /* 2 */ }
  169.  
  170. /* Text-level semantics
  171. ========================================================================== */
  172. /**
  173. * Remove the gray background on active links in IE 10.
  174. */
  175. a {
  176. background-color: transparent; }
  177.  
  178. /**
  179. * 1. Remove the bottom border in Chrome 57-
  180. * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  181. */
  182. abbr[title] {
  183. border-bottom: none;
  184. /* 1 */
  185. text-decoration: underline;
  186. /* 2 */
  187. -webkit-text-decoration: underline dotted;
  188. text-decoration: underline dotted;
  189. /* 2 */ }
  190.  
  191. /**
  192. * Add the correct font weight in Chrome, Edge, and Safari.
  193. */
  194. b,
  195. strong {
  196. font-weight: bolder; }
  197.  
  198. /**
  199. * 1. Correct the inheritance and scaling of font size in all browsers.
  200. * 2. Correct the odd `em` font sizing in all browsers.
  201. */
  202. code,
  203. kbd,
  204. samp {
  205. font-family: monospace, monospace;
  206. /* 1 */
  207. font-size: 1em;
  208. /* 2 */ }
  209.  
  210. /**
  211. * Add the correct font size in all browsers.
  212. */
  213. small {
  214. font-size: 80%; }
  215.  
  216. /**
  217. * Prevent `sub` and `sup` elements from affecting the line height in
  218. * all browsers.
  219. */
  220. sub,
  221. sup {
  222. font-size: 75%;
  223. line-height: 0;
  224. position: relative;
  225. vertical-align: baseline; }
  226.  
  227. sub {
  228. bottom: -0.25em; }
  229.  
  230. sup {
  231. top: -0.5em; }
  232.  
  233. /* Embedded content
  234. ========================================================================== */
  235. /**
  236. * Remove the border on images inside links in IE 10.
  237. */
  238. img {
  239. border-style: none; }
  240.  
  241. /* Forms
  242. ========================================================================== */
  243. /**
  244. * 1. Change the font styles in all browsers.
  245. * 2. Remove the margin in Firefox and Safari.
  246. */
  247. button,
  248. input,
  249. optgroup,
  250. select,
  251. textarea {
  252. font-family: inherit;
  253. /* 1 */
  254. font-size: 100%;
  255. /* 1 */
  256. line-height: 1.15;
  257. /* 1 */
  258. margin: 0;
  259. /* 2 */ }
  260.  
  261. /**
  262. * Show the overflow in IE.
  263. * 1. Show the overflow in Edge.
  264. */
  265. button,
  266. input {
  267. /* 1 */
  268. overflow: visible; }
  269.  
  270. /**
  271. * Remove the inheritance of text transform in Edge, Firefox, and IE.
  272. * 1. Remove the inheritance of text transform in Firefox.
  273. */
  274. button,
  275. select {
  276. /* 1 */
  277. text-transform: none; }
  278.  
  279. /**
  280. * Correct the inability to style clickable types in iOS and Safari.
  281. */
  282. button,
  283. [type="button"],
  284. [type="reset"],
  285. [type="submit"] {
  286. -webkit-appearance: button; }
  287.  
  288. /**
  289. * Remove the inner border and padding in Firefox.
  290. */
  291. button::-moz-focus-inner,
  292. [type="button"]::-moz-focus-inner,
  293. [type="reset"]::-moz-focus-inner,
  294. [type="submit"]::-moz-focus-inner {
  295. border-style: none;
  296. padding: 0; }
  297.  
  298. /**
  299. * Restore the focus styles unset by the previous rule.
  300. */
  301. button:-moz-focusring,
  302. [type="button"]:-moz-focusring,
  303. [type="reset"]:-moz-focusring,
  304. [type="submit"]:-moz-focusring {
  305. outline: 1px dotted ButtonText; }
  306.  
  307. /**
  308. * Correct the padding in Firefox.
  309. */
  310. fieldset {
  311. padding: 0.35em 0.75em 0.625em; }
  312.  
  313. /**
  314. * 1. Correct the text wrapping in Edge and IE.
  315. * 2. Correct the color inheritance from `fieldset` elements in IE.
  316. * 3. Remove the padding so developers are not caught out when they zero out
  317. * `fieldset` elements in all browsers.
  318. */
  319. legend {
  320. -webkit-box-sizing: border-box;
  321. box-sizing: border-box;
  322. /* 1 */
  323. color: inherit;
  324. /* 2 */
  325. display: table;
  326. /* 1 */
  327. max-width: 100%;
  328. /* 1 */
  329. padding: 0;
  330. /* 3 */
  331. white-space: normal;
  332. /* 1 */ }
  333.  
  334. /**
  335. * Add the correct vertical alignment in Chrome, Firefox, and Opera.
  336. */
  337. progress {
  338. vertical-align: baseline; }
  339.  
  340. /**
  341. * Remove the default vertical scrollbar in IE 10+.
  342. */
  343. textarea {
  344. overflow: auto; }
  345.  
  346. /**
  347. * 1. Add the correct box sizing in IE 10.
  348. * 2. Remove the padding in IE 10.
  349. */
  350. [type="checkbox"],
  351. [type="radio"] {
  352. -webkit-box-sizing: border-box;
  353. box-sizing: border-box;
  354. /* 1 */
  355. padding: 0;
  356. /* 2 */ }
  357.  
  358. /**
  359. * Correct the cursor style of increment and decrement buttons in Chrome.
  360. */
  361. [type="number"]::-webkit-inner-spin-button,
  362. [type="number"]::-webkit-outer-spin-button {
  363. height: auto; }
  364.  
  365. /**
  366. * 1. Correct the odd appearance in Chrome and Safari.
  367. * 2. Correct the outline style in Safari.
  368. */
  369. [type="search"] {
  370. -webkit-appearance: textfield;
  371. /* 1 */
  372. outline-offset: -2px;
  373. /* 2 */ }
  374.  
  375. /**
  376. * Remove the inner padding in Chrome and Safari on macOS.
  377. */
  378. [type="search"]::-webkit-search-decoration {
  379. -webkit-appearance: none; }
  380.  
  381. /**
  382. * 1. Correct the inability to style clickable types in iOS and Safari.
  383. * 2. Change font properties to `inherit` in Safari.
  384. */
  385. ::-webkit-file-upload-button {
  386. -webkit-appearance: button;
  387. /* 1 */
  388. font: inherit;
  389. /* 2 */ }
  390.  
  391. /* Interactive
  392. ========================================================================== */
  393. /*
  394. * Add the correct display in Edge, IE 10+, and Firefox.
  395. */
  396. details {
  397. display: block; }
  398.  
  399. /*
  400. * Add the correct display in all browsers.
  401. */
  402. summary {
  403. display: list-item; }
  404.  
  405. /* Misc
  406. ========================================================================== */
  407. /**
  408. * Add the correct display in IE 10+.
  409. */
  410. template {
  411. display: none; }
  412.  
  413. /**
  414. * Add the correct display in IE 10.
  415. */
  416. [hidden] {
  417. display: none; }
  418.  
  419. @font-face {
  420. font-family: "Montserrat";
  421. src: url("../fonts/Montserrat-Light.woff") format("woff");
  422. font-weight: 300;
  423. font-style: normal; }
  424.  
  425. @font-face {
  426. font-family: "Montserrat";
  427. src: url("../fonts/Montserrat-Regular.woff") format("woff");
  428. font-weight: 400;
  429. font-style: normal; }
  430.  
  431. @font-face {
  432. font-family: "Montserrat";
  433. src: url("../fonts/Montserrat-Medium.woff") format("woff");
  434. font-weight: 500;
  435. font-style: normal; }
  436.  
  437. @font-face {
  438. font-family: "Montserrat";
  439. src: url("../fonts/Montserrat-SemiBold.woff") format("woff");
  440. font-weight: 600;
  441. font-style: normal; }
  442.  
  443. @font-face {
  444. font-family: "Montserrat";
  445. src: url("../fonts/Montserrat-Bold.woff") format("woff");
  446. font-weight: 700;
  447. font-style: normal; }
  448.  
  449. @font-face {
  450. font-family: "Montserrat";
  451. src: url("../fonts/Montserrat-Black.woff") format("woff");
  452. font-weight: 800;
  453. font-style: normal; }
  454.  
  455. @font-face {
  456. font-family: "Roboto";
  457. src: url("../fonts/Roboto.woff") format("woff");
  458. font-weight: 400;
  459. font-style: normal; }
  460.  
  461. @font-face {
  462. font-family: "Open Sans";
  463. src: url("../fonts/OpenSans-Regular.woff") format("woff");
  464. font-weight: 400;
  465. font-style: normal; }
  466.  
  467. .wrapper {
  468. width: 320px;
  469. padding-left: 10px;
  470. padding-right: 10px;
  471. margin-left: auto;
  472. margin-right: auto; }
  473. .wrapper--no-mobile {
  474. width: 100%;
  475. padding: 0; }
  476. .wrapper--nopadding {
  477. padding-right: 0; }
  478.  
  479. @media (min-width: 420px) {
  480. .wrapper {
  481. width: 420px;
  482. padding-left: 20px;
  483. padding-right: 20px; }
  484. .wrapper--no-mobile {
  485. width: 100%;
  486. padding: 0; }
  487. .wrapper--nopadding {
  488. padding-right: 0; } }
  489.  
  490. @media (min-width: 460px) {
  491. .wrapper {
  492. width: 460px; } }
  493.  
  494. @media (min-width: 600px) {
  495. .wrapper {
  496. width: 600px; }
  497. .wrapper--no-mobile {
  498. width: 600px;
  499. padding: 0; } }
  500.  
  501. @media (min-width: 768px) {
  502. .wrapper {
  503. width: 768px; }
  504. .wrapper--no-mobile {
  505. width: 768px;
  506. padding-left: 20px;
  507. padding-right: 20px; } }
  508.  
  509. @media (min-width: 1200px) {
  510. .wrapper {
  511. width: 1200px;
  512. position: relative;
  513. padding-left: 30px;
  514. padding-right: 30px; } }
  515.  
  516. @media (min-width: 1366px) {
  517. .wrapper {
  518. width: 1366px;
  519. position: relative;
  520. padding-left: 40px;
  521. padding-right: 40px; } }
  522.  
  523. .header {
  524. padding-top: 20px; }
  525.  
  526. .header__contacts {
  527. display: -webkit-box;
  528. display: -ms-flexbox;
  529. display: flex;
  530. -ms-flex-wrap: wrap;
  531. flex-wrap: wrap; }
  532.  
  533. .header__logo {
  534. padding-bottom: 10px; }
  535. .header__logo img {
  536. width: 100%;
  537. height: auto; }
  538.  
  539. .header__location {
  540. padding: 0;
  541. margin: 0;
  542. font-family: "Montserrat", "Arial", "sans-serif";
  543. font-size: 16px;
  544. line-height: 20px;
  545. padding-bottom: 10px; }
  546. .header__location span svg {
  547. width: 14px;
  548. height: 20px; }
  549.  
  550. .header__phone {
  551. font-family: "Montserrat", "Arial", "sans-serif";
  552. font-size: 18px;
  553. line-height: 22px;
  554. text-decoration: none;
  555. color: #333333;
  556. padding-bottom: 20px; }
  557. .header__phone span {
  558. font-weight: 600; }
  559.  
  560. .header__callback {
  561. font-family: "Montserrat", "Arial", "sans-serif";
  562. font-size: 12px;
  563. line-height: 1.2;
  564. font-weight: 600;
  565. text-decoration: none;
  566. color: #333333;
  567. padding-left: 10px;
  568. padding-right: 10px;
  569. padding-top: 12px;
  570. padding-bottom: 13px;
  571. border: 2px solid #333333;
  572. border-radius: 99px;
  573. margin-bottom: 20px; }
  574.  
  575. @media (min-width: 420px) {
  576. .header__location {
  577. padding-bottom: 0; }
  578. .header__contacts {
  579. -webkit-box-pack: justify;
  580. -ms-flex-pack: justify;
  581. justify-content: space-between; }
  582. .header__phone {
  583. -ms-flex-item-align: center;
  584. align-self: center; } }
  585.  
  586. @media (min-width: 600px) {
  587. .header__container {
  588. display: -webkit-box;
  589. display: -ms-flexbox;
  590. display: flex;
  591. -ms-flex-wrap: wrap;
  592. flex-wrap: wrap; }
  593. .header__logo {
  594. width: 280px;
  595. margin-right: 30px; }
  596. .header__location {
  597. -ms-flex-item-align: center;
  598. align-self: center;
  599. margin-left: auto;
  600. position: relative;
  601. padding-left: 22px;
  602. padding-bottom: 10px; }
  603. .header__location span {
  604. position: absolute;
  605. left: 0;
  606. top: 0; }
  607. .header__contacts {
  608. -webkit-box-flex: 1;
  609. -ms-flex-positive: 1;
  610. flex-grow: 1; } }
  611.  
  612. @media (min-width: 768px) {
  613. .header__logo {
  614. width: 280px; }
  615. .header__contacts {
  616. -webkit-box-flex: 0;
  617. -ms-flex-positive: 0;
  618. flex-grow: 0;
  619. margin-left: auto; }
  620. .header__location {
  621. padding-bottom: 20px;
  622. margin-left: 0; }
  623. .header__phone {
  624. padding-right: 30px;
  625. padding-left: 40px; } }
  626.  
  627. @media (min-width: 1200px) {
  628. .header {
  629. padding-top: 20px;
  630. padding-bottom: 35px; }
  631. .header__logo {
  632. width: 320px;
  633. margin-right: 47px;
  634. padding-bottom: 0; }
  635. .header__phone {
  636. padding-right: 0; }
  637. .header__location {
  638. padding-bottom: 0;
  639. margin-left: 0;
  640. margin-right: auto; }
  641. .header__contacts {
  642. -webkit-box-flex: 0;
  643. -ms-flex-positive: 0;
  644. flex-grow: 0; }
  645. .header__phone {
  646. -ms-flex-item-align: start;
  647. align-self: flex-start;
  648. padding-bottom: 0;
  649. padding-top: 10px; }
  650. .header__callback {
  651. margin-left: 45px;
  652. margin-bottom: 0;
  653. -ms-flex-item-align: start;
  654. align-self: flex-start;
  655. padding-left: 43px;
  656. padding-right: 44px; }
  657. .header__location {
  658. -ms-flex-item-align: inherit;
  659. align-self: inherit;
  660. padding-top: 12px; }
  661. .header__location span {
  662. top: 12px; } }
  663.  
  664. .menu {
  665. background-color: rgba(237, 237, 237, 0.5); }
  666.  
  667. .menu__list {
  668. padding: 0;
  669. margin: 0;
  670. list-style: none;
  671. text-align: center;
  672. width: 100%;
  673. display: -webkit-box;
  674. display: -ms-flexbox;
  675. display: flex;
  676. -webkit-box-orient: vertical;
  677. -webkit-box-direction: normal;
  678. -ms-flex-direction: column;
  679. flex-direction: column; }
  680.  
  681. .menu__link {
  682. font-family: "Montserrat", "Arial", "sans-serif";
  683. font-size: 18px;
  684. line-height: 1.2;
  685. font-weight: 600;
  686. color: #333333;
  687. text-decoration: none;
  688. display: block;
  689. padding-top: 10px;
  690. padding-bottom: 12px;
  691. border-bottom: 1px solid #333333; }
  692. .menu__link--active {
  693. color: #f2620d; }
  694. .menu__link:hover {
  695. -webkit-transition: all, 0.3s;
  696. transition: all, 0.3s;
  697. color: #f2620d; }
  698.  
  699. .menu__item:last-child .menu__link {
  700. border-bottom: 0; }
  701.  
  702. @media (min-width: 600px) {
  703. .menu__list {
  704. display: -webkit-box;
  705. display: -ms-flexbox;
  706. display: flex;
  707. -webkit-box-orient: horizontal;
  708. -webkit-box-direction: normal;
  709. -ms-flex-direction: row;
  710. flex-direction: row;
  711. -ms-flex-wrap: wrap;
  712. flex-wrap: wrap;
  713. -webkit-box-pack: center;
  714. -ms-flex-pack: center;
  715. justify-content: center; }
  716. .menu__link {
  717. padding-left: 10px;
  718. padding-right: 10px;
  719. border: none; } }
  720.  
  721. @media (min-width: 768px) {
  722. .menu__list {
  723. -webkit-box-pack: justify;
  724. -ms-flex-pack: justify;
  725. justify-content: space-between;
  726. margin-left: auto;
  727. margin-right: auto; }
  728. .menu__link {
  729. padding-left: 10px;
  730. padding-right: 10px;
  731. padding-top: 21px;
  732. padding-bottom: 17px; } }
  733.  
  734. .slider {
  735. background-image: url("../img/bg-slider-mobile.jpg");
  736. background-position: top center;
  737. width: 100%;
  738. background-size: auto;
  739. overflow: hidden;
  740. background-position-y: 50px;
  741. background-repeat: no-repeat;
  742. min-height: 600px; }
  743.  
  744. .slider__wrapper {
  745. width: 320px;
  746. padding-left: 10px;
  747. padding-right: 10px;
  748. padding-top: 50px;
  749. padding-bottom: 50px;
  750. margin-left: auto;
  751. margin-right: auto;
  752. display: -webkit-box;
  753. display: -ms-flexbox;
  754. display: flex;
  755. -webkit-box-orient: vertical;
  756. -webkit-box-direction: normal;
  757. -ms-flex-direction: column;
  758. flex-direction: column; }
  759.  
  760. .slider__subtitle {
  761. padding: 0;
  762. margin: 0;
  763. font-family: "Roboto", "Arial", "sans-serif";
  764. text-transform: uppercase;
  765. font-size: 14px;
  766. line-height: 1.2;
  767. color: #4F4F4F;
  768. padding-bottom: 20px; }
  769.  
  770. .slider__title {
  771. padding: 0;
  772. margin: 0;
  773. font-family: "Montserrat", "Arial", "sans-serif";
  774. font-size: 20px;
  775. text-transform: uppercase;
  776. font-weight: 900;
  777. padding-bottom: 20px;
  778. padding-right: 100px; }
  779.  
  780. .slider__text {
  781. padding: 0;
  782. margin: 0;
  783. padding-right: 100px;
  784. padding-bottom: 55px;
  785. font-family: "Roboto", "Arial", "sans-serif";
  786. font-weight: 600; }
  787.  
  788. .slider__btn {
  789. margin-top: auto;
  790. padding-left: 30px;
  791. padding-right: 30px;
  792. width: 180px; }
  793.  
  794. @media (min-width: 420px) {
  795. .slider__wrapper {
  796. width: 420px;
  797. min-height: 350px; }
  798. .slider__title {
  799. padding-right: 150px; }
  800. .slider__text {
  801. padding-right: 140px; }
  802. .slider__btn {
  803. margin-top: auto; } }
  804.  
  805. @media (min-width: 600px) {
  806. .slider {
  807. background-image: url("../img/bg-slider-600.jpg");
  808. background-position: center -150px; }
  809. .slider__title {
  810. font-size: 25px; }
  811. .slider__wrapper {
  812. width: 600px;
  813. padding-left: 20px;
  814. padding-right: 20px; }
  815. .slider__text {
  816. padding-right: 300px; } }
  817.  
  818. @media (min-width: 768px) {
  819. .slider__wrapper {
  820. width: 768px; } }
  821.  
  822. @media (min-width: 1200px) {
  823. .slider {
  824. background-image: url("../img/slider.jpg");
  825. background-position: center; }
  826. .slider__wrapper {
  827. width: 1200px;
  828. padding-top: 78px;
  829. min-height: 570px; }
  830. .slider__subtitle {
  831. font-size: 24px;
  832. line-height: 1.2; }
  833. .slider__title {
  834. font-size: 60px;
  835. line-height: 1.2;
  836. padding-right: 370px; }
  837. .slider__text {
  838. font-size: 24px;
  839. line-height: 1.2;
  840. text-transform: uppercase;
  841. max-width: 570px;
  842. padding-right: 0;
  843. padding-bottom: 0; }
  844. .slider__btn {
  845. width: 270px; } }
  846.  
  847. .services {
  848. padding-top: 20px;
  849. padding-bottom: 20px; }
  850.  
  851. .serives__list {
  852. padding: 0;
  853. margin: 0;
  854. list-style: none; }
  855.  
  856. .services__item-title {
  857. margin: 0;
  858. padding-bottom: 60px;
  859. padding-left: 12px;
  860. margin-bottom: 20px; }
  861. .services__item-title::before {
  862. width: 5px;
  863. height: 100%;
  864. background: -webkit-gradient(linear, left bottom, left top, from(#F9D423), to(#F83600));
  865. background: linear-gradient(360deg, #F9D423 0%, #F83600 100%); }
  866.  
  867. .services__item {
  868. width: 296px;
  869. min-height: 168px;
  870. background-color: #c4c4c4;
  871. margin-bottom: 20px;
  872. display: -webkit-box;
  873. display: -ms-flexbox;
  874. display: flex;
  875. -webkit-box-orient: vertical;
  876. -webkit-box-direction: normal;
  877. -ms-flex-direction: column;
  878. flex-direction: column; }
  879.  
  880. .services__order {
  881. margin-top: auto; }
  882.  
  883. .services__item:last-child {
  884. background-color: transparent; }
  885.  
  886. .services__order {
  887. margin-left: auto;
  888. margin-right: auto; }
  889.  
  890. @media (min-width: 420px) {
  891. .services {
  892. background-image: url("../img/bg-services-mobile.png");
  893. background-repeat: no-repeat; }
  894. .serives__list {
  895. display: -webkit-box;
  896. display: -ms-flexbox;
  897. display: flex;
  898. -ms-flex-wrap: wrap;
  899. flex-wrap: wrap; }
  900. .services__item {
  901. width: 48%;
  902. margin-left: auto;
  903. margin-right: auto; }
  904. .services__item-title {
  905. padding-bottom: 30px;
  906. font-size: 18px; }
  907. .services__order {
  908. width: 90%;
  909. padding-left: 10px;
  910. padding-right: 10px;
  911. font-size: 13px; } }
  912.  
  913. @media (min-width: 600px) {
  914. .services {
  915. background-image: url("../img/bg-services-600.jpg"); } }
  916.  
  917. @media (min-width: 768px) {
  918. .services__item {
  919. width: 32%; } }
  920.  
  921. @media (min-width: 1200px) {
  922. .services {
  923. position: relative;
  924. background-image: url("../img/bg-services.jpg");
  925. z-index: 10; }
  926. .serives__list {
  927. position: relative;
  928. z-index: 20;
  929. -webkit-box-pack: justify;
  930. -ms-flex-pack: justify;
  931. justify-content: space-between; }
  932. .services__item {
  933. width: 370px;
  934. height: 210px;
  935. display: -webkit-box;
  936. display: -ms-flexbox;
  937. display: flex;
  938. -webkit-box-orient: vertical;
  939. -webkit-box-direction: normal;
  940. -ms-flex-direction: column;
  941. flex-direction: column;
  942. margin-left: 0;
  943. margin-right: 0; }
  944. .services__item:nth-child(3n) {
  945. margin-right: 0; }
  946. .services__item-title {
  947. font-size: 32px;
  948. margin: 0;
  949. padding-bottom: 60px; }
  950. .services__order {
  951. margin-top: auto; }
  952. .services__background-text {
  953. position: absolute;
  954. font-family: "Montserrat", "Arial", "sans-serif";
  955. font-weight: 900;
  956. font-size: 144px;
  957. line-height: 177px;
  958. background: -webkit-gradient(linear, right top, left top, from(#F9D423), to(#F83600));
  959. background: linear-gradient(270deg, #F9D423 0%, #F83600 100%);
  960. -webkit-text-fill-color: transparent;
  961. -webkit-background-clip: text;
  962. background-clip: text;
  963. opacity: 0.1;
  964. width: 1125px;
  965. top: -100px;
  966. right: -100px;
  967. text-align: right;
  968. z-index: 2;
  969. text-transform: uppercase; } }
  970.  
  971. .cases {
  972. padding-top: 30px;
  973. padding-bottom: 30px;
  974. background-color: #000000; }
  975.  
  976. .cases__list {
  977. padding: 0;
  978. margin: 0;
  979. list-style: none; }
  980.  
  981. .cases__item {
  982. width: 100%;
  983. min-height: 376px;
  984. background-image: url("../img/cases-1.jpg");
  985. background-size: cover;
  986. background-repeat: no-repeat;
  987. margin-bottom: 20px; }
  988. .cases__item:nth-child(2) {
  989. background-image: url("../img/cases-2.jpg"); }
  990. .cases__item:nth-child(3) {
  991. background-image: url("../img/cases-3.jpg"); }
  992.  
  993. @media (min-width: 600px) {
  994. .cases__list {
  995. display: -webkit-box;
  996. display: -ms-flexbox;
  997. display: flex;
  998. -webkit-box-pack: justify;
  999. -ms-flex-pack: justify;
  1000. justify-content: space-between; }
  1001. .cases__item {
  1002. width: 33%;
  1003. min-height: 240px;
  1004. margin-bottom: 0; } }
  1005.  
  1006. @media (min-width: 768px) {
  1007. .cases {
  1008. padding-top: 210px;
  1009. padding-bottom: 210px; }
  1010. .cases__item {
  1011. min-height: 470px; } }
  1012.  
  1013. @media (min-width: 1200px) {
  1014. .block.cases {
  1015. z-index: 10;
  1016. position: relative; }
  1017. .block.order--services {
  1018. padding-top: 120px; }
  1019. .cases__background-image {
  1020. position: absolute;
  1021. background-image: url("../img/cases-column.png");
  1022. width: 369px;
  1023. height: 500px;
  1024. left: -330px;
  1025. bottom: -210px; }
  1026. .cases__background-text {
  1027. position: absolute;
  1028. font-family: "Montserrat", "Arial", "sans-serif";
  1029. font-weight: 900;
  1030. font-size: 144px;
  1031. line-height: 177px;
  1032. color: #FFFFFF;
  1033. text-transform: uppercase;
  1034. opacity: 0.1;
  1035. width: 1150px;
  1036. left: -300px;
  1037. top: -80px;
  1038. z-index: 2; }
  1039. .cases__container {
  1040. position: relative; }
  1041. .cases__item {
  1042. width: 370px;
  1043. height: 460px; } }
  1044.  
  1045. @media (min-width: 600px) {
  1046. .cases--services .cases__container::before {
  1047. width: 1100px;
  1048. height: 1200px;
  1049. right: -900px; } }
  1050.  
  1051. @media (min-width: 1200px) {
  1052. .cases {
  1053. padding-top: 0;
  1054. padding-bottom: 0; }
  1055. .cases--services {
  1056. padding-top: 420px;
  1057. padding-bottom: 420px; } }
  1058.  
  1059. .stages {
  1060. padding-top: 30px;
  1061. padding-bottom: 30px;
  1062. background-image: url("../img/bg-stages.png");
  1063. background-repeat: no-repeat;
  1064. background-position: 0;
  1065. background-size: cover; }
  1066.  
  1067. .stages__container {
  1068. color: #333333;
  1069. position: relative;
  1070. z-index: 10; }
  1071.  
  1072. .stages__about {
  1073. font-family: "Montserrat", "Arial", "sans-serif";
  1074. font-size: 14px;
  1075. line-height: 1.2;
  1076. font-weight: 700;
  1077. padding: 0;
  1078. margin: 0;
  1079. text-transform: uppercase;
  1080. position: relative;
  1081. padding-left: 15px;
  1082. padding-right: 30px;
  1083. margin-bottom: 20px; }
  1084. .stages__about::before {
  1085. content: "";
  1086. position: absolute;
  1087. bottom: 0;
  1088. left: 0;
  1089. width: 5px;
  1090. height: 100%;
  1091. background: -webkit-gradient(linear, left bottom, left top, from(#F9D423), to(#F83600));
  1092. background: linear-gradient(360deg, #F9D423 0%, #F83600 100%);
  1093. border-radius: 5px; }
  1094.  
  1095. .stages__list {
  1096. padding: 0;
  1097. margin: 0;
  1098. list-style: none;
  1099. padding-bottom: 60px; }
  1100.  
  1101. .stages__item {
  1102. margin-bottom: 20px; }
  1103.  
  1104. .stages__item-title {
  1105. padding: 0;
  1106. margin: 0;
  1107. font-family: "Montserrat", "Arial", "sans-serif";
  1108. font-size: 16px;
  1109. line-height: 1.2;
  1110. font-weight: 700;
  1111. text-transform: uppercase;
  1112. padding-top: 10px;
  1113. padding-bottom: 30px;
  1114. padding-left: 85px;
  1115. text-align: left;
  1116. position: relative; }
  1117. .stages__item-title::before {
  1118. content: "01";
  1119. position: absolute;
  1120. left: 0;
  1121. top: 0;
  1122. font-family: "Montserrat", "Arial", "sans-serif";
  1123. font-size: 45px;
  1124. line-height: 1.2;
  1125. font-weight: 700;
  1126. background-image: -webkit-gradient(linear, right top, left top, from(#F9D423), to(#F83600));
  1127. background-image: linear-gradient(270deg, #F9D423 0%, #F83600 100%);
  1128. text-transform: uppercase;
  1129. -webkit-text-fill-color: transparent;
  1130. -webkit-background-clip: text;
  1131. background-clip: text; }
  1132.  
  1133. .stages__item:nth-child(2) .stages__item-title::before {
  1134. content: "02"; }
  1135.  
  1136. .stages__item:nth-child(3) .stages__item-title::before {
  1137. content: "03"; }
  1138.  
  1139. .stages__item:nth-child(4) .stages__item-title::before {
  1140. content: "04"; }
  1141.  
  1142. .stages__item:nth-child(5) .stages__item-title::before {
  1143. content: "05"; }
  1144.  
  1145. .stages__item:nth-child(6) .stages__item-title::before {
  1146. content: "06"; }
  1147.  
  1148. .stages__item-text {
  1149. padding: 0;
  1150. margin: 0;
  1151. font-family: "Roboto", "Arial", "sans-serif";
  1152. font-size: 12px;
  1153. line-height: 1.2;
  1154. font-weight: 400;
  1155. color: #333333; }
  1156.  
  1157. @media (min-width: 600px) {
  1158. .stages {
  1159. padding-top: 60px;
  1160. padding-bottom: 180px;
  1161. background-position: center 0; }
  1162. .stages__list {
  1163. display: -webkit-box;
  1164. display: -ms-flexbox;
  1165. display: flex;
  1166. -ms-flex-wrap: wrap;
  1167. flex-wrap: wrap;
  1168. -webkit-box-pack: justify;
  1169. -ms-flex-pack: justify;
  1170. justify-content: space-between;
  1171. position: relative;
  1172. z-index: 10; }
  1173. .stages__item {
  1174. width: 46%; }
  1175. .stages__item-title {
  1176. padding-right: 30px; } }
  1177.  
  1178. @media (min-width: 768px) {
  1179. .stages {
  1180. background-position: center; }
  1181. .stages__wrap {
  1182. display: -webkit-box;
  1183. display: -ms-flexbox;
  1184. display: flex;
  1185. padding-bottom: 40px;
  1186. position: relative;
  1187. z-index: 20; }
  1188. .stages__inner {
  1189. width: 70%; }
  1190. .stages__about {
  1191. width: 30%;
  1192. margin-left: auto;
  1193. -ms-flex-item-align: start;
  1194. align-self: flex-start; }
  1195. .stages__item {
  1196. width: 33%;
  1197. padding-right: 20px; }
  1198. .stages__item-title {
  1199. padding-left: 75px;
  1200. font-size: 14px;
  1201. padding-right: 0; } }
  1202.  
  1203. @media (min-width: 1200px) {
  1204. .stages {
  1205. position: relative;
  1206. padding-top: 150px;
  1207. padding-bottom: 150px; }
  1208. .stages__item {
  1209. min-height: 137px;
  1210. height: 100%;
  1211. display: -webkit-box;
  1212. display: -ms-flexbox;
  1213. display: flex;
  1214. -webkit-box-orient: vertical;
  1215. -webkit-box-direction: normal;
  1216. -ms-flex-direction: column;
  1217. flex-direction: column; }
  1218. .stages__item-text {
  1219. margin-top: auto;
  1220. padding-right: 120px; }
  1221. .stages__item-title {
  1222. padding-left: 102px;
  1223. font-size: 18px;
  1224. line-height: 22px;
  1225. padding-bottom: 35px; }
  1226. .stages__item-title::before {
  1227. font-weight: 700;
  1228. font-size: 66px;
  1229. line-height: 80px; }
  1230. .stages__background-text {
  1231. position: absolute;
  1232. font-family: "Montserrat", "Arial", "sans-serif";
  1233. font-weight: 900;
  1234. font-size: 144px;
  1235. line-height: 177px;
  1236. color: #333333;
  1237. opacity: 0.1;
  1238. width: 1770px;
  1239. top: 0;
  1240. right: -300px;
  1241. z-index: 2;
  1242. text-transform: uppercase; }
  1243. .stages__about {
  1244. font-size: 18px;
  1245. width: 25%; }
  1246. .stages__title {
  1247. margin-bottom: 70px; } }
  1248.  
  1249. @media (min-width: 600px) {
  1250. .stages--services {
  1251. padding-top: 120px;
  1252. padding-bottom: 180px;
  1253. background-position: center 40px; } }
  1254.  
  1255. @media (min-width: 600px) {
  1256. .stages--services {
  1257. padding-bottom: 240px; } }
  1258.  
  1259. @media (min-width: 1200px) {
  1260. .stages--services {
  1261. background-position: center 100px;
  1262. background-size: cover;
  1263. margin-top: -100px; }
  1264. .stages--services .stages__background-text {
  1265. width: 905px;
  1266. text-align: right;
  1267. top: -100px;
  1268. right: -450px;
  1269. z-index: 10; }
  1270. .stages--services .block.stages--services {
  1271. padding-top: 0;
  1272. padding-bottom: 0; } }
  1273.  
  1274. .achievement {
  1275. background-color: black;
  1276. padding-top: 60px;
  1277. padding-bottom: 60px; }
  1278.  
  1279. .achievement__subtitle {
  1280. color: #ffffff;
  1281. background: none;
  1282. -webkit-text-fill-color: inherit; }
  1283.  
  1284. .achievement__title {
  1285. color: #ffffff;
  1286. background: none;
  1287. -webkit-text-fill-color: inherit; }
  1288.  
  1289. .achievement__text {
  1290. padding: 0;
  1291. margin: 0;
  1292. color: #ffffff;
  1293. font-family: "Roboto", "Arial", "sans-serif";
  1294. font-size: 14px;
  1295. line-height: 22px;
  1296. padding-bottom: 20px; }
  1297.  
  1298. .achievement__list {
  1299. padding: 0;
  1300. margin: 0;
  1301. display: -webkit-box;
  1302. display: -ms-flexbox;
  1303. display: flex;
  1304. -ms-flex-wrap: wrap;
  1305. flex-wrap: wrap;
  1306. padding-top: 20px;
  1307. padding-bottom: 20px;
  1308. z-index: 20; }
  1309.  
  1310. .achievement__item {
  1311. display: -webkit-box;
  1312. display: -ms-flexbox;
  1313. display: flex;
  1314. -webkit-box-orient: vertical;
  1315. -webkit-box-direction: normal;
  1316. -ms-flex-direction: column;
  1317. flex-direction: column;
  1318. width: 150px;
  1319. -webkit-box-align: start;
  1320. -ms-flex-align: start;
  1321. align-items: flex-start; }
  1322.  
  1323. .achievement__number {
  1324. padding: 0;
  1325. margin: 0;
  1326. font-family: "Montserrat", "Arial", "sans-serif";
  1327. font-size: 36px;
  1328. line-height: 1.2;
  1329. font-weight: 700;
  1330. text-transform: uppercase;
  1331. background: -webkit-gradient(linear, right top, left top, from(#F9D423), to(#F83600));
  1332. background: linear-gradient(270deg, #F9D423 0%, #F83600 100%);
  1333. -webkit-text-fill-color: transparent;
  1334. -webkit-background-clip: text;
  1335. background-clip: text; }
  1336.  
  1337. .achievement__number + .achievement__text {
  1338. font-family: "Montserrat", "Arial", "sans-serif";
  1339. padding-right: 0;
  1340. font-weight: 800; }
  1341.  
  1342. @media (min-width: 420px) {
  1343. .achievement__item {
  1344. width: 120px;
  1345. padding-right: 20px; } }
  1346.  
  1347. @media (min-width: 1200px) {
  1348. .achievement__title {
  1349. padding-bottom: 70px;
  1350. margin-bottom: 50px; }
  1351. .achievement__dec-img {
  1352. position: absolute;
  1353. width: 653px;
  1354. height: 856px;
  1355. background-image: url("../img/achievement-caesar.png");
  1356. background-repeat: no-repeat;
  1357. right: -400px;
  1358. bottom: 0; }
  1359. .achievement__number {
  1360. line-height: 88px; }
  1361. .achievement__container {
  1362. position: relative; }
  1363. .achievement__container {
  1364. display: -webkit-box;
  1365. display: -ms-flexbox;
  1366. display: flex;
  1367. -webkit-box-pack: justify;
  1368. -ms-flex-pack: justify;
  1369. justify-content: space-between; }
  1370. .achievement__inner {
  1371. width: 760px;
  1372. position: relative;
  1373. z-index: 10; }
  1374. .achievement__inner .achievement__text {
  1375. padding-right: 90px;
  1376. line-height: 30px; }
  1377. .achievement__list {
  1378. max-width: 380px;
  1379. padding-top: 140px; }
  1380. .achievement__number {
  1381. font-size: 72px; }
  1382. .achievement__item {
  1383. min-width: 186px; }
  1384. .achievement__text {
  1385. font-size: 18px; }
  1386. .achievement__background-text {
  1387. position: absolute;
  1388. font-family: "Montserrat", "Arial", "sans-serif";
  1389. font-weight: 900;
  1390. font-size: 144px;
  1391. line-height: 177px;
  1392. color: #ffffff;
  1393. opacity: 0.1;
  1394. width: 1970px;
  1395. top: 50px;
  1396. right: -500px;
  1397. z-index: 1;
  1398. text-transform: uppercase; } }
  1399.  
  1400. .reviews {
  1401. padding-top: 30px;
  1402. padding-bottom: 30px; }
  1403.  
  1404. .reviews__list {
  1405. padding: 0;
  1406. margin: 0;
  1407. list-style: none; }
  1408.  
  1409. .reviews__container {
  1410. color: #333333; }
  1411.  
  1412. .review {
  1413. display: -webkit-box;
  1414. display: -ms-flexbox;
  1415. display: flex;
  1416. -webkit-box-orient: vertical;
  1417. -webkit-box-direction: normal;
  1418. -ms-flex-direction: column;
  1419. flex-direction: column; }
  1420.  
  1421. .review__person-photo {
  1422. width: 192px;
  1423. height: 190px;
  1424. background-image: url("../img/reviews__person.jpg");
  1425. margin-bottom: 20px; }
  1426.  
  1427. .review__person-name {
  1428. padding: 0;
  1429. margin: 0;
  1430. font-family: "Montserrat", "Arial", "sans-serif";
  1431. font-size: 24px;
  1432. line-height: 29px;
  1433. font-weight: 700;
  1434. text-transform: uppercase;
  1435. padding-bottom: 10px; }
  1436.  
  1437. .review__person-position {
  1438. padding: 0;
  1439. margin: 0;
  1440. font-weight: 500;
  1441. font-family: "Montserrat", "Arial", "sans-serif";
  1442. font-size: 14px;
  1443. line-height: 17px;
  1444. text-transform: uppercase; }
  1445.  
  1446. .review__text {
  1447. font-family: "Roboto", "Arial", "sans-serif";
  1448. font-size: 14px;
  1449. line-height: 1.2;
  1450. position: relative;
  1451. margin: 0;
  1452. padding: 0;
  1453. padding-left: 40px;
  1454. padding-right: 20px;
  1455. padding-top: 20px;
  1456. padding-bottom: 20px; }
  1457. .review__text::before {
  1458. content: "";
  1459. position: absolute;
  1460. width: 30px;
  1461. height: 30px;
  1462. background-image: url("../img/quote.svg");
  1463. background-repeat: no-repeat;
  1464. background-size: cover;
  1465. left: 0;
  1466. top: 20px; }
  1467.  
  1468. .review__cite {
  1469. font-family: "Montserrat", "Arial", "sans-serif";
  1470. text-transform: uppercase;
  1471. font-size: 14px;
  1472. line-height: 1.2;
  1473. font-weight: 400;
  1474. font-style: normal;
  1475. padding-left: 60px;
  1476. position: relative; }
  1477. .review__cite::before {
  1478. content: "";
  1479. position: absolute;
  1480. width: 14px;
  1481. height: 14px;
  1482. background-image: url("../img/cite.svg");
  1483. left: 75px;
  1484. top: 5px;
  1485. background-repeat: no-repeat;
  1486. background-size: contain; }
  1487.  
  1488. @media (min-width: 600px) {
  1489. .reviews {
  1490. background-image: url("../img/bg-reviews.png");
  1491. background-repeat: no-repeat;
  1492. background-size: cover;
  1493. background-position: center 0;
  1494. background-repeat: no-repeat; }
  1495. .review {
  1496. -webkit-box-orient: horizontal;
  1497. -webkit-box-direction: normal;
  1498. -ms-flex-direction: row;
  1499. flex-direction: row;
  1500. -webkit-box-pack: justify;
  1501. -ms-flex-pack: justify;
  1502. justify-content: space-between; }
  1503. .review__inner {
  1504. width: 60%; }
  1505. .review__text {
  1506. padding-left: 75px; }
  1507. .review__text::before {
  1508. width: 51px;
  1509. height: 48px; }
  1510. .review__person-photo {
  1511. border-radius: 50%; }
  1512. .review__cite {
  1513. padding-left: 95px; } }
  1514.  
  1515. @media (min-width: 768px) {
  1516. .review {
  1517. -webkit-box-pack: start;
  1518. -ms-flex-pack: start;
  1519. justify-content: flex-start; }
  1520. .review__inner {
  1521. padding-left: 20px; }
  1522. .review__inner::before {
  1523. left: 70px; } }
  1524.  
  1525. @media (min-width: 1200px) {
  1526. .review {
  1527. -webkit-box-pack: start;
  1528. -ms-flex-pack: start;
  1529. justify-content: flex-start; }
  1530. .review__inner {
  1531. padding-left: 20px; }
  1532. .reviews__background-text {
  1533. position: absolute;
  1534. font-family: "Montserrat", "Arial", "sans-serif";
  1535. font-weight: 900;
  1536. font-size: 144px;
  1537. line-height: 176px;
  1538. text-align: right;
  1539. color: #333333;
  1540. opacity: 0.1;
  1541. width: 1160px;
  1542. top: -100px;
  1543. right: -300px;
  1544. z-index: 1;
  1545. text-transform: uppercase; } }
  1546.  
  1547. @media (min-width: 600px) {
  1548. .reviews--services {
  1549. padding-top: 240px;
  1550. padding-bottom: 240px; } }
  1551.  
  1552. @media (min-width: 768px) {
  1553. .review {
  1554. padding-left: 100px; } }
  1555.  
  1556. .order {
  1557. background-color: #000000;
  1558. padding-top: 30px;
  1559. padding-bottom: 30px; }
  1560.  
  1561. .order__form {
  1562. padding-top: 20px;
  1563. padding-bottom: 20px;
  1564. display: -webkit-box;
  1565. display: -ms-flexbox;
  1566. display: flex;
  1567. -webkit-box-orient: vertical;
  1568. -webkit-box-direction: normal;
  1569. -ms-flex-direction: column;
  1570. flex-direction: column; }
  1571.  
  1572. .order__form-item {
  1573. margin: 0;
  1574. padding: 0;
  1575. margin-bottom: 20px;
  1576. display: -webkit-box;
  1577. display: -ms-flexbox;
  1578. display: flex;
  1579. width: 100%; }
  1580.  
  1581. .order__input {
  1582. border: none;
  1583. background-color: transparent;
  1584. border-bottom: 1px solid #ffffff;
  1585. width: 100%;
  1586. padding-top: 10px;
  1587. padding-left: 5px;
  1588. padding-bottom: 5px;
  1589. padding-right: 10px;
  1590. color: #ffffff;
  1591. font-family: "Montserrat", "Arial", "sans-serif";
  1592. font-size: 30px;
  1593. line-height: 1.2;
  1594. font-weight: 400; }
  1595.  
  1596. .order__form-select {
  1597. border-radius: 0;
  1598. border: none;
  1599. background-color: transparent;
  1600. border-bottom: 1px solid #ffffff;
  1601. width: 100%;
  1602. font-family: "Montserrat", "Arial", "sans-serif";
  1603. font-size: 14px;
  1604. line-height: 1.2;
  1605. font-weight: 700;
  1606. color: #ffffff;
  1607. padding-top: 10px; }
  1608. .order__form-select option {
  1609. font-family: "Montserrat", "Arial", "sans-serif";
  1610. font-size: 14px;
  1611. line-height: 1.2;
  1612. font-weight: 700;
  1613. color: #ffffff; }
  1614.  
  1615. .order__input::-webkit-input-placeholder {
  1616. font-family: "Montserrat", "Arial", "sans-serif";
  1617. font-size: 30px;
  1618. line-height: 1.2;
  1619. font-weight: 400; }
  1620.  
  1621. .order__input::-ms-input-placeholder {
  1622. font-family: "Montserrat", "Arial", "sans-serif";
  1623. font-size: 30px;
  1624. line-height: 1.2;
  1625. font-weight: 400; }
  1626.  
  1627. .order__input::placeholder {
  1628. font-family: "Montserrat", "Arial", "sans-serif";
  1629. font-size: 30px;
  1630. line-height: 1.2;
  1631. font-weight: 400; }
  1632.  
  1633. .order__textarea {
  1634. border: none;
  1635. background-color: transparent;
  1636. border-bottom: 1px solid #ffffff;
  1637. width: 100%;
  1638. font-family: "Montserrat", "Arial", "sans-serif";
  1639. font-size: 30px;
  1640. line-height: 1.2;
  1641. font-weight: 400;
  1642. padding-left: 5px;
  1643. padding-top: 10px;
  1644. color: #ffffff;
  1645. margin-bottom: 60px; }
  1646.  
  1647. .order__textarea::-webkit-input-placeholder {
  1648. font-family: "Montserrat", "Arial", "sans-serif";
  1649. font-size: 30px;
  1650. line-height: 1.2;
  1651. font-weight: 400; }
  1652.  
  1653. .order__textarea::-ms-input-placeholder {
  1654. font-family: "Montserrat", "Arial", "sans-serif";
  1655. font-size: 30px;
  1656. line-height: 1.2;
  1657. font-weight: 400; }
  1658.  
  1659. .order__textarea::placeholder {
  1660. font-family: "Montserrat", "Arial", "sans-serif";
  1661. font-size: 30px;
  1662. line-height: 1.2;
  1663. font-weight: 400; }
  1664.  
  1665. .order__form-input {
  1666. border: none;
  1667. margin-left: auto;
  1668. margin-right: auto; }
  1669.  
  1670. @media (min-width: 768px) {
  1671. .order {
  1672. padding-bottom: 60px; }
  1673. .order__form-row {
  1674. display: -webkit-box;
  1675. display: -ms-flexbox;
  1676. display: flex; }
  1677. .order__form-item {
  1678. margin-right: 20px; }
  1679. .order__textarea {
  1680. margin-right: 20px; }
  1681. .order__form-input {
  1682. margin-right: 20px; } }
  1683.  
  1684. @media (min-width: 1200px) {
  1685. .order__form-item {
  1686. margin-bottom: 60px; }
  1687. .order__textarea {
  1688. margin-bottom: 100px; }
  1689. .order__container {
  1690. position: relative;
  1691. max-width: 994px;
  1692. overflow: hidden; }
  1693. .order__container::before {
  1694. content: "";
  1695. position: absolute;
  1696. background-image: url("../img/order-fountain.png");
  1697. width: 674px;
  1698. height: 748px;
  1699. background-repeat: no-repeat;
  1700. background-size: contain;
  1701. right: -530px;
  1702. top: -200px;
  1703. z-index: -1; } }
  1704.  
  1705. @media (min-width: 1200px) {
  1706. .order__bg-decor {
  1707. width: 674px;
  1708. height: 746px;
  1709. background-image: url("../img/order-fountain.png");
  1710. position: absolute;
  1711. right: -320px;
  1712. top: 100px; }
  1713. .order__background-image {
  1714. width: 1629px;
  1715. height: 1920px;
  1716. background-image: url("../img/bg-order-services.png"); }
  1717. .order__background-text {
  1718. position: absolute;
  1719. font-family: "Montserrat", "Arial", "sans-serif";
  1720. font-weight: 900;
  1721. font-size: 144px;
  1722. line-height: 177px;
  1723. color: #ffffff;
  1724. opacity: 0.1;
  1725. width: 1970px;
  1726. top: -70px;
  1727. right: -500px;
  1728. z-index: 1;
  1729. text-transform: uppercase; } }
  1730.  
  1731. .footer {
  1732. background-color: black;
  1733. margin-top: -1px; }
  1734.  
  1735. .footer__container {
  1736. padding-top: 60px;
  1737. position: relative; }
  1738. .footer__container::before {
  1739. content: "";
  1740. position: absolute;
  1741. top: 27px;
  1742. left: 0;
  1743. width: 100%;
  1744. height: 3px;
  1745. background-image: -webkit-gradient(linear, right top, left top, from(#F9D423), to(#F83600));
  1746. background-image: linear-gradient(270deg, #F9D423 0%, #F83600 100%); }
  1747.  
  1748. .footer__text {
  1749. padding: 0;
  1750. margin: 0;
  1751. font-family: "Roboto", "Arial", "sans-serif";
  1752. font-size: 12px;
  1753. line-height: 1.2;
  1754. font-weight: 400;
  1755. color: #ffffff; }
  1756.  
  1757. .footer__block {
  1758. padding-bottom: 30px; }
  1759.  
  1760. .footer__block-title {
  1761. padding: 0;
  1762. margin: 0;
  1763. font-family: "Montserrat", "Arial", "sans-serif";
  1764. font-size: 16px;
  1765. line-height: 1.2;
  1766. font-weight: 300;
  1767. color: #ffffff;
  1768. text-transform: uppercase;
  1769. padding-bottom: 20px; }
  1770.  
  1771. .footer__nav {
  1772. padding: 0;
  1773. margin: 0;
  1774. list-style: none;
  1775. padding-left: 10px; }
  1776.  
  1777. .footer__link {
  1778. font-family: "Roboto", "Arial", "sans-serif";
  1779. font-size: 14px;
  1780. line-height: 30px;
  1781. font-weight: 400;
  1782. color: #ffffff;
  1783. text-decoration: none; }
  1784. .footer__link:hover {
  1785. background: -webkit-gradient(linear, right top, left top, from(#F9D423), to(#F83600));
  1786. background: linear-gradient(270deg, #F9D423 0%, #F83600 100%);
  1787. -webkit-text-fill-color: transparent;
  1788. -webkit-background-clip: text;
  1789. background-clip: text; }
  1790.  
  1791. .footer__location {
  1792. padding: 0;
  1793. margin: 0;
  1794. list-style: none; }
  1795.  
  1796. .footer__location-item {
  1797. font-family: "Open Sans", "Arial", sans-serif;
  1798. font-size: 14px;
  1799. line-height: 1.2;
  1800. font-weight: 400;
  1801. color: #ffffff;
  1802. padding-bottom: 10px;
  1803. position: relative;
  1804. display: -webkit-box;
  1805. display: -ms-flexbox;
  1806. display: flex; }
  1807. .footer__location-item span {
  1808. margin-right: 14px; }
  1809.  
  1810. .icon__location {
  1811. fill: #ffffff; }
  1812.  
  1813. .footer__location-link {
  1814. font-family: "Roboto", "Arial", "sans-serif";
  1815. font-size: 14px;
  1816. line-height: 1.2;
  1817. font-weight: 400;
  1818. color: #ffffff;
  1819. text-decoration: none; }
  1820.  
  1821. .footer__location-item:hover span {
  1822. color: #f2620d; }
  1823.  
  1824. @media (min-width: 768px) {
  1825. .footer__container {
  1826. display: -webkit-box;
  1827. display: -ms-flexbox;
  1828. display: flex;
  1829. -webkit-box-pack: justify;
  1830. -ms-flex-pack: justify;
  1831. justify-content: space-between;
  1832. padding-top: 120px; }
  1833. .footer__block {
  1834. width: 30%; }
  1835. .footer__block--logo {
  1836. width: 40%;
  1837. padding-right: 35px; } }
  1838.  
  1839. @media (min-width: 1200px) {
  1840. .footer__block--logo {
  1841. width: 26%;
  1842. padding-right: 0; }
  1843. .footer__block--services {
  1844. width: 25%;
  1845. margin-left: auto; }
  1846. .footer__block--location {
  1847. width: 22%; }
  1848. .footer__block .logo--footer {
  1849. padding-left: 0; } }
  1850.  
  1851. .logo {
  1852. text-align: center;
  1853. padding-left: 55px;
  1854. position: relative; }
  1855. .logo::before {
  1856. content: "";
  1857. position: absolute;
  1858. width: 80px;
  1859. height: 40px;
  1860. background-image: url("../img/logo.svg");
  1861. background-size: cover;
  1862. left: 0;
  1863. top: 6px; }
  1864. .logo--footer {
  1865. text-align: left;
  1866. color: #ffffff;
  1867. padding-left: 0; }
  1868. .logo--footer::before {
  1869. content: none; }
  1870. .logo--footer .logo__title {
  1871. font-size: 40px;
  1872. letter-spacing: 1px; }
  1873. .logo--footer .logo__subtitle {
  1874. font-size: 16px; }
  1875.  
  1876. .logo__title {
  1877. font-family: "Montserrat", "Arial", "sans-serif";
  1878. font-size: 32px;
  1879. font-weight: 300;
  1880. padding: 0;
  1881. margin: 0; }
  1882. .logo__title span {
  1883. font-weight: 500; }
  1884.  
  1885. .logo__subtitle {
  1886. padding: 0;
  1887. margin: 0;
  1888. font-family: "Roboto", "Arial", "sans-serif";
  1889. font-size: 12px;
  1890. text-transform: lowercase;
  1891. color: #d8d8d8; }
  1892.  
  1893. @media (min-width: 420px) {
  1894. .logo {
  1895. text-align: left;
  1896. padding-left: 85px; }
  1897. .logo--footer {
  1898. padding-left: 0; } }
  1899.  
  1900. @media (min-width: 1200px) {
  1901. .logo {
  1902. padding-left: 100px; }
  1903. .logo::before {
  1904. width: 89px;
  1905. height: 45px; }
  1906. .logo__title {
  1907. font-size: 36px; }
  1908. .logo__subtitle {
  1909. font-size: 14px; } }
  1910.  
  1911. .tariffs {
  1912. padding-top: 30px;
  1913. padding-bottom: 30px; }
  1914.  
  1915. .tariffs__list {
  1916. padding: 0;
  1917. margin: 0;
  1918. list-style: none;
  1919. display: -webkit-box;
  1920. display: -ms-flexbox;
  1921. display: flex;
  1922. -webkit-box-orient: horizontal;
  1923. -webkit-box-direction: normal;
  1924. -ms-flex-direction: row;
  1925. flex-direction: row;
  1926. -webkit-box-pack: justify;
  1927. -ms-flex-pack: justify;
  1928. justify-content: space-between;
  1929. width: 860px;
  1930. -webkit-box-align: start;
  1931. -ms-flex-align: start;
  1932. align-items: flex-start; }
  1933.  
  1934. .tariffs__list-wrap {
  1935. overflow-x: scroll; }
  1936.  
  1937. .tariffs__list-wrap::-webkit-scrollbar {
  1938. width: 100%;
  1939. height: 7px;
  1940. background-color: rgba(0, 0, 0, 0.2);
  1941. border-radius: 5px; }
  1942.  
  1943. .tariffs__list-wrap::-webkit-scrollbar-thumb {
  1944. background-image: -webkit-gradient(linear, right top, left top, from(#F9D423), to(#F83600));
  1945. background-image: linear-gradient(270deg, #F9D423 0%, #F83600 100%);
  1946. border-radius: 5px; }
  1947.  
  1948. .tariff__checklist {
  1949. padding: 0;
  1950. margin: 0;
  1951. list-style: none;
  1952. padding-bottom: 40px; }
  1953.  
  1954. .tariff__order {
  1955. width: 240px;
  1956. padding-left: 40px;
  1957. padding-right: 40px; }
  1958.  
  1959. .tariff {
  1960. width: 100%;
  1961. background: #FFFFFF;
  1962. -webkit-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  1963. box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  1964. border-radius: 10px;
  1965. margin-bottom: 30px;
  1966. padding-bottom: 40px;
  1967. width: 280px;
  1968. max-width: 370px;
  1969. margin-right: 20px;
  1970. margin-left: 5px; }
  1971.  
  1972. .tariff__cost {
  1973. padding: 0;
  1974. margin: 0; }
  1975.  
  1976. .tariff__title {
  1977. font-family: "Montserrat", "Arial", "sans-serif";
  1978. text-transform: uppercase;
  1979. font-size: 24px;
  1980. line-height: 1.2;
  1981. font-weight: 700;
  1982. padding: 0;
  1983. margin: 0;
  1984. text-align: center;
  1985. padding-top: 38px;
  1986. padding-bottom: 33px;
  1987. color: #ffffff;
  1988. border-radius: 10px 10px 0px 0px; }
  1989.  
  1990. .tariff--econom .tariff__title {
  1991. background-color: #f9d022; }
  1992.  
  1993. .tariff--gold .tariff__title {
  1994. background-color: #f84303; }
  1995.  
  1996. .tariff--platinum .tariff__title {
  1997. background-color: #f88c13; }
  1998.  
  1999. .tariff__inner {
  2000. padding-top: 20px;
  2001. display: -webkit-box;
  2002. display: -ms-flexbox;
  2003. display: flex;
  2004. -webkit-box-orient: vertical;
  2005. -webkit-box-direction: normal;
  2006. -ms-flex-direction: column;
  2007. flex-direction: column;
  2008. -webkit-box-align: center;
  2009. -ms-flex-align: center;
  2010. align-items: center; }
  2011.  
  2012. .tariff__about {
  2013. padding: 0;
  2014. margin: 0;
  2015. font-family: "Montserrat", "Arial", "sans-serif";
  2016. font-size: 15px;
  2017. line-height: 24px;
  2018. font-weight: 800;
  2019. text-align: center;
  2020. text-transform: uppercase; }
  2021.  
  2022. .tariff__cost {
  2023. font-family: "Montserrat", "Arial", "sans-serif";
  2024. color: #4f4f4f;
  2025. font-size: 24px;
  2026. padding-top: 13px;
  2027. padding-bottom: 55px; }
  2028. .tariff__cost span {
  2029. font-weight: 600;
  2030. font-size: 48px; }
  2031.  
  2032. .tariff__point {
  2033. font-family: "Montserrat", "Arial", "sans-serif";
  2034. font-size: 14px;
  2035. line-height: 20px;
  2036. text-align: center;
  2037. padding-bottom: 22px;
  2038. color: #333333; }
  2039. .tariff__point span {
  2040. font-weight: 700; }
  2041.  
  2042. @media (min-width: 420px) {
  2043. .tariffs__list {
  2044. width: 1170px; }
  2045. .tariff {
  2046. width: 370px; }
  2047. .tariff__inner {
  2048. padding-left: 20px;
  2049. padding-right: 20px; }
  2050. .tariff__point {
  2051. font-size: 16px;
  2052. line-height: 20px; }
  2053. .tariff__about {
  2054. font-size: 20px;
  2055. line-height: 24px; }
  2056. .tariff__order {
  2057. width: 270px; } }
  2058.  
  2059. @media (min-width: 420px) {
  2060. .tariffs {
  2061. background-image: url("../img/tariffs-bg.png");
  2062. background-repeat: no-repeat;
  2063. background-position: center; } }
  2064.  
  2065. @media (min-width: 600px) {
  2066. .tariffs {
  2067. padding-top: 120px;
  2068. padding-bottom: 180px; } }
  2069.  
  2070. @media (min-width: 768px) {
  2071. .tariffs {
  2072. color: inherit; } }
  2073.  
  2074. @media (min-width: 1200px) {
  2075. .tariffs__list {
  2076. width: 100%; }
  2077. .tariffs__list-wrap {
  2078. overflow: visible;
  2079. position: relative;
  2080. z-index: 10; }
  2081. .tariffs-background-text {
  2082. position: absolute;
  2083. font-family: "Montserrat", "Arial", "sans-serif";
  2084. font-weight: 900;
  2085. font-size: 144px;
  2086. line-height: 177px;
  2087. background: -webkit-gradient(linear, right top, left top, from(#F9D423), to(#F83600));
  2088. background: linear-gradient(270deg, #F9D423 0%, #F83600 100%);
  2089. -webkit-text-fill-color: transparent;
  2090. -webkit-background-clip: text;
  2091. background-clip: text;
  2092. opacity: 0.15;
  2093. top: -100px;
  2094. right: -200px;
  2095. text-align: right;
  2096. z-index: 1;
  2097. width: 1489px;
  2098. text-transform: uppercase; } }
  2099.  
  2100. .custom {
  2101. background-color: #000000; }
  2102.  
  2103. .custom__text {
  2104. color: #ffffff;
  2105. padding: 0;
  2106. margin: 0;
  2107. padding-bottom: 30px;
  2108. font-family: "Montserrat", "Arial", "sans-serif";
  2109. font-size: 14px;
  2110. line-height: 22px; }
  2111. .custom__text--big {
  2112. text-transform: uppercase;
  2113. font-size: 24px;
  2114. line-height: 34px;
  2115. font-weight: 800; }
  2116.  
  2117. .custom__btn {
  2118. width: 300px;
  2119. padding-left: 30px;
  2120. padding-right: 30px; }
  2121.  
  2122. @media (min-width: 600px) {
  2123. .custom {
  2124. padding-top: 180px;
  2125. padding-bottom: 180px; } }
  2126.  
  2127. @media (min-width: 768px) {
  2128. .custom {
  2129. color: inherit; }
  2130. .custom__text {
  2131. font-size: 18px;
  2132. padding-bottom: 65px; }
  2133. .custom__text--big {
  2134. font-size: 60px;
  2135. line-height: 70px;
  2136. font-weight: 900;
  2137. padding-bottom: 45px; } }
  2138.  
  2139. @media (min-width: 1200px) {
  2140. .custom__title {
  2141. margin-bottom: 70px; }
  2142. .custom__background-image {
  2143. position: absolute;
  2144. background-image: url("../img/bg-custom-face.png");
  2145. background-repeat: no-repeat;
  2146. background-size: cover;
  2147. background-position: center 200;
  2148. width: 982px;
  2149. height: 1202px;
  2150. top: 0;
  2151. right: -530px; }
  2152. .custom__background-text {
  2153. position: absolute;
  2154. font-family: "Montserrat", "Arial", "sans-serif";
  2155. font-weight: 900;
  2156. font-size: 144px;
  2157. line-height: 176px;
  2158. color: #FFFFFF;
  2159. text-transform: uppercase;
  2160. opacity: 0.25;
  2161. width: 1970px;
  2162. left: -300px;
  2163. top: 100px;
  2164. z-index: 2; }
  2165. .custom__btn {
  2166. margin-bottom: 60px; }
  2167. .custom__text {
  2168. position: relative;
  2169. z-index: 20; }
  2170. .custom__container {
  2171. position: relative;
  2172. z-index: 20; }
  2173. .custom__text--big {
  2174. font-size: 70px;
  2175. line-height: 80px;
  2176. margin-bottom: 0; }
  2177. .custom__text {
  2178. padding-right: 160px; } }
  2179.  
  2180. .promotion {
  2181. padding-top: 60px;
  2182. padding-bottom: 60px;
  2183. overflow: hidden; }
  2184.  
  2185. .promotion__list {
  2186. padding: 0;
  2187. margin: 0;
  2188. list-style: none; }
  2189.  
  2190. .promotion__item {
  2191. padding-bottom: 40px; }
  2192. .promotion__item:nth-child(2) .promotion__item-title::before {
  2193. content: "02"; }
  2194. .promotion__item:nth-child(3) .promotion__item-title::before {
  2195. content: "03"; }
  2196. .promotion__item:nth-child(4) {
  2197. position: relative; }
  2198. .promotion__item:nth-child(4) .promotion__item-title {
  2199. padding-left: 30px;
  2200. padding-bottom: 40px;
  2201. font-size: 22px;
  2202. line-height: 1.2;
  2203. font-weight: 900;
  2204. position: relative;
  2205. margin-bottom: 40px; }
  2206. .promotion__item:nth-child(4) .promotion__item-title::before {
  2207. content: "";
  2208. position: absolute;
  2209. left: 0;
  2210. top: 0;
  2211. width: 7px;
  2212. height: 100%;
  2213. background: none;
  2214. background-image: -webkit-gradient(linear, left bottom, left top, from(#F9D423), to(#F83600));
  2215. background-image: linear-gradient(360deg, #F9D423 0%, #F83600 100%);
  2216. border-radius: 5px;
  2217. z-index: 10; }
  2218.  
  2219. .promotion__item-title {
  2220. padding: 0;
  2221. margin: 0;
  2222. font-family: "Montserrat", "Arial", "sans-serif";
  2223. font-size: 18px;
  2224. line-height: 1.2;
  2225. font-weight: 700;
  2226. padding-bottom: 40px;
  2227. padding-left: 70px;
  2228. position: relative;
  2229. color: #333333;
  2230. text-transform: uppercase; }
  2231. .promotion__item-title::before {
  2232. content: "01";
  2233. position: absolute;
  2234. left: 0;
  2235. top: -5px;
  2236. font-family: "Montserrat", "Arial", "sans-serif";
  2237. font-size: 46px;
  2238. line-height: 1.2;
  2239. font-weight: 900;
  2240. background-image: -webkit-gradient(linear, right top, left top, from(#F9D423), to(#F83600));
  2241. background-image: linear-gradient(270deg, #F9D423 0%, #F83600 100%);
  2242. text-transform: uppercase;
  2243. -webkit-text-fill-color: transparent;
  2244. -webkit-background-clip: text;
  2245. background-clip: text; }
  2246.  
  2247. .promotion__text {
  2248. padding: 0;
  2249. margin: 0;
  2250. font-family: "Roboto", "Arial", "sans-serif";
  2251. font-size: 16px;
  2252. line-height: 1.2;
  2253. font-weight: 400;
  2254. color: #333333; }
  2255.  
  2256. .promotion__btn {
  2257. margin-left: auto;
  2258. margin-right: auto; }
  2259.  
  2260. @media (min-width: 600px) {
  2261. .promotion {
  2262. padding-top: 240px;
  2263. padding-bottom: 180px;
  2264. -webkit-clip-path: polygon(0 0, 100% 12%, 100% 100%, 0% 88%);
  2265. clip-path: polygon(0 0, 100% 12%, 100% 100%, 0% 88%);
  2266. margin-top: -177px; } }
  2267.  
  2268. @media (min-width: 768px) {
  2269. .promotion {
  2270. background-image: url("../img/bg-custom.png");
  2271. background-size: cover;
  2272. margin-top: 0;
  2273. padding-top: 120px; }
  2274. .promotion__list {
  2275. display: -webkit-box;
  2276. display: -ms-flexbox;
  2277. display: flex;
  2278. -ms-flex-wrap: wrap;
  2279. flex-wrap: wrap;
  2280. -webkit-box-pack: justify;
  2281. -ms-flex-pack: justify;
  2282. justify-content: space-between; }
  2283. .promotion__item {
  2284. width: 48%; }
  2285. .promotion__item:nth-child(4) .promotion__item-title {
  2286. margin-top: 61px; }
  2287. .promotion__item-title {
  2288. padding-left: 100px; }
  2289. .promotion__item-title::before {
  2290. top: -10px; }
  2291. .promotion__btn {
  2292. margin-top: auto; } }
  2293.  
  2294. @media (min-width: 1200px) {
  2295. .promotion {
  2296. padding-top: 240px;
  2297. padding-bottom: 420px; }
  2298. .promotion__text {
  2299. font-size: 18px; }
  2300. .promotion__item-title {
  2301. font-size: 24px;
  2302. line-height: 1.2;
  2303. font-weight: 700; }
  2304. .promotion__item-title::before {
  2305. font-size: 60px; }
  2306. .promotion__item {
  2307. width: 45%; }
  2308. .promotion__background-text {
  2309. position: absolute;
  2310. font-family: "Montserrat", "Arial", "sans-serif";
  2311. font-weight: 900;
  2312. font-size: 144px;
  2313. line-height: 177px;
  2314. background: -webkit-gradient(linear, right top, left top, from(#F9D423), to(#F83600));
  2315. background: linear-gradient(270deg, #F9D423 0%, #F83600 100%);
  2316. -webkit-text-fill-color: transparent;
  2317. -webkit-background-clip: text;
  2318. background-clip: text;
  2319. opacity: 0.25;
  2320. width: 1125px;
  2321. top: -100px;
  2322. right: -200px;
  2323. text-align: right;
  2324. z-index: 2;
  2325. text-transform: uppercase; } }
  2326.  
  2327. .advantages {
  2328. padding-top: 60px;
  2329. padding-bottom: 60px;
  2330. background-color: #000000; }
  2331.  
  2332. .advantages__list {
  2333. padding: 0;
  2334. margin: 0;
  2335. list-style: none; }
  2336.  
  2337. .advantages__item {
  2338. padding-bottom: 40px; }
  2339.  
  2340. .advantages__btn {
  2341. margin-left: auto;
  2342. margin-right: auto;
  2343. padding-left: 20px;
  2344. padding-right: 20px; }
  2345.  
  2346. .advantages__item-title {
  2347. padding: 0;
  2348. margin: 0;
  2349. font-family: "Montserrat", "Arial", "sans-serif";
  2350. font-size: 18px;
  2351. line-height: 1.2;
  2352. font-weight: 700;
  2353. padding-bottom: 40px;
  2354. padding-left: 70px;
  2355. position: relative;
  2356. color: #ffffff;
  2357. text-transform: uppercase; }
  2358. .advantages__item-title::before {
  2359. content: "01";
  2360. position: absolute;
  2361. left: 0;
  2362. top: -5px;
  2363. font-family: "Montserrat", "Arial", "sans-serif";
  2364. font-size: 46px;
  2365. line-height: 1.2;
  2366. font-weight: 900;
  2367. background-image: -webkit-gradient(linear, right top, left top, from(#F9D423), to(#F83600));
  2368. background-image: linear-gradient(270deg, #F9D423 0%, #F83600 100%);
  2369. text-transform: uppercase;
  2370. -webkit-text-fill-color: transparent;
  2371. -webkit-background-clip: text;
  2372. background-clip: text; }
  2373.  
  2374. .advantages__item:nth-child(2) .advantages__item-title::before {
  2375. content: "02"; }
  2376.  
  2377. .advantages__item:nth-child(3) .advantages__item-title::before {
  2378. content: "03"; }
  2379.  
  2380. .advantages__item:nth-child(4) .advantages__item-title::before {
  2381. content: "04"; }
  2382.  
  2383. .advantages__item-text {
  2384. padding: 0;
  2385. margin: 0;
  2386. font-family: "Roboto", "Arial", "sans-serif";
  2387. font-size: 16px;
  2388. line-height: 1.2;
  2389. font-weight: 400;
  2390. color: #ffffff; }
  2391.  
  2392. @media (min-width: 600px) {
  2393. .advantages {
  2394. padding-top: 240px;
  2395. padding-bottom: 240px; } }
  2396.  
  2397. @media (min-width: 768px) {
  2398. .advantages__list {
  2399. display: -webkit-box;
  2400. display: -ms-flexbox;
  2401. display: flex;
  2402. -ms-flex-wrap: wrap;
  2403. flex-wrap: wrap;
  2404. -webkit-box-pack: justify;
  2405. -ms-flex-pack: justify;
  2406. justify-content: space-between;
  2407. padding-bottom: 60px; }
  2408. .advantages__item {
  2409. width: 48%; }
  2410. .advantages__item-title {
  2411. padding-left: 100px; }
  2412. .advantages__item-title::before {
  2413. top: -10px; }
  2414. .advantages__btn {
  2415. margin-left: 0; } }
  2416.  
  2417. @media (min-width: 1200px) {
  2418. .advantages__list {
  2419. padding-right: 240px; }
  2420. .advantages__item {
  2421. width: 40%; }
  2422. .advantages__container {
  2423. position: relative; } }
  2424.  
  2425. .block {
  2426. padding-top: 120px;
  2427. padding-bottom: 120px;
  2428. background-color: lightyellow;
  2429. position: relative;
  2430. margin-top: 85px;
  2431. padding-bottom: 85px; }
  2432.  
  2433. .block__wrapper {
  2434. padding-top: 60px;
  2435. padding-bottom: 60px; }
  2436.  
  2437. .cases--services.block {
  2438. margin-top: -120px; }
  2439.  
  2440. .parallelogram--left {
  2441. background-color: currentColor;
  2442. color: lightpink;
  2443. margin-top: 85px; }
  2444. .parallelogram--left::before {
  2445. content: "";
  2446. position: absolute;
  2447. width: 100%;
  2448. height: 100px;
  2449. background-color: currentColor;
  2450. -webkit-clip-path: polygon(100% 15%, 0 100%, 100% 100%);
  2451. clip-path: polygon(100% 15%, 0 100%, 100% 100%);
  2452. top: -100px;
  2453. left: 0; }
  2454. .parallelogram--left:after {
  2455. content: "";
  2456. position: absolute;
  2457. width: 100%;
  2458. height: 100px;
  2459. background-color: currentColor;
  2460. -webkit-clip-path: polygon(0 0, 0 85%, 100% 0);
  2461. clip-path: polygon(0 0, 0 85%, 100% 0);
  2462. bottom: -100px;
  2463. left: 0; }
  2464.  
  2465. .trapezoid--left {
  2466. background-color: currentColor;
  2467. padding-bottom: 60px;
  2468. padding-top: 60px; }
  2469. .trapezoid--left::before {
  2470. content: "";
  2471. position: absolute;
  2472. width: 100%;
  2473. height: 100px;
  2474. background-color: currentColor;
  2475. -webkit-clip-path: polygon(100% 15%, 0 100%, 100% 100%);
  2476. clip-path: polygon(100% 15%, 0 100%, 100% 100%);
  2477. top: -100px;
  2478. left: 0; }
  2479. .trapezoid--left:after {
  2480. content: "";
  2481. position: absolute;
  2482. width: 100%;
  2483. height: 100px;
  2484. background-color: currentColor;
  2485. -webkit-clip-path: polygon(100% 0, 0 0, 100% 85%);
  2486. clip-path: polygon(100% 0, 0 0, 100% 85%);
  2487. bottom: -100px;
  2488. left: 0; }
  2489.  
  2490. .trapezoid--right {
  2491. background-color: currentColor;
  2492. color: lightgoldenrodyellow;
  2493. margin-top: 85px;
  2494. margin-bottom: 85px;
  2495. padding-top: 60px;
  2496. padding-bottom: 60px; }
  2497. .trapezoid--right::before {
  2498. content: "";
  2499. position: absolute;
  2500. width: 100%;
  2501. height: 100px;
  2502. background-color: currentColor;
  2503. -webkit-clip-path: polygon(0 15%, 0% 100%, 100% 100%);
  2504. clip-path: polygon(0 15%, 0% 100%, 100% 100%);
  2505. top: -100px;
  2506. left: 0; }
  2507. .trapezoid--right:after {
  2508. content: "";
  2509. position: absolute;
  2510. width: 100%;
  2511. height: 100px;
  2512. background-color: currentColor;
  2513. -webkit-clip-path: polygon(0 0, 0 85%, 100% 0);
  2514. clip-path: polygon(0 0, 0 85%, 100% 0);
  2515. bottom: -100px;
  2516. left: 0; }
  2517.  
  2518. .parallelogram--right {
  2519. background-color: currentColor; }
  2520. .parallelogram--right::before {
  2521. content: "";
  2522. position: absolute;
  2523. width: 100%;
  2524. height: 100px;
  2525. background-color: currentColor;
  2526. -webkit-clip-path: polygon(0 15%, 0% 100%, 100% 100%);
  2527. clip-path: polygon(0 15%, 0% 100%, 100% 100%);
  2528. top: -100px;
  2529. left: 0; }
  2530. .parallelogram--right:after {
  2531. content: "";
  2532. position: absolute;
  2533. width: 100%;
  2534. height: 100px;
  2535. background-color: currentColor;
  2536. -webkit-clip-path: polygon(100% 0, 0 0, 100% 85%);
  2537. clip-path: polygon(100% 0, 0 0, 100% 85%);
  2538. bottom: -100px;
  2539. left: 0; }
  2540.  
  2541. .block.block--first {
  2542. margin-top: 0;
  2543. padding-top: 30px; }
  2544. .block.block--first::before {
  2545. content: none; }
  2546.  
  2547. .block.block--last {
  2548. margin-bottom: 0; }
  2549. .block.block--last::after {
  2550. content: none; }
  2551.  
  2552. .block--white {
  2553. color: #ffffff; }
  2554. .block--white::after {
  2555. bottom: 0;
  2556. color: transparent; }
  2557.  
  2558. .block--black {
  2559. color: #000000;
  2560. margin-top: -15px; }
  2561.  
  2562. .subblock {
  2563. background-color: lightcyan;
  2564. width: 100%;
  2565. min-height: 300px; }
  2566.  
  2567. .content {
  2568. background-color: lightcoral;
  2569. min-height: 100px; }
  2570.  
  2571. @media (min-width: 600px) {
  2572. .block {
  2573. padding: 0;
  2574. margin: 0;
  2575. padding-top: 120px;
  2576. padding-bottom: 120px;
  2577. background-size: cover;
  2578. background-position: center 0; }
  2579. .block.services {
  2580. padding-top: 60px; }
  2581. .cases {
  2582. padding-bottom: 180px; }
  2583. .stages {
  2584. padding-top: 90px;
  2585. padding-bottom: 180px; }
  2586. .achievement {
  2587. margin-top: -90px; }
  2588. .reviews {
  2589. padding-top: 180px; }
  2590. .reviews::before {
  2591. -webkit-clip-path: polygon(0 0, 0 100%, 100% 0);
  2592. clip-path: polygon(0 0, 0 100%, 100% 0);
  2593. color: #000000;
  2594. top: 0; }
  2595. .custom.block {
  2596. padding-top: 0; } }
  2597.  
  2598. @media (min-width: 767px) {
  2599. .advantages--services {
  2600. margin-top: -40px; } }
  2601.  
  2602. @media (min-width: 1200px) {
  2603. .block.services {
  2604. padding-top: 0; }
  2605. .block {
  2606. padding-top: 0;
  2607. padding-bottom: 0; }
  2608. .block::before {
  2609. height: 200px;
  2610. top: -200px; }
  2611. .block::after {
  2612. height: 200px;
  2613. bottom: -200px; }
  2614. .block__wrapper {
  2615. padding-top: 200px;
  2616. padding-bottom: 200px;
  2617. overflow: hidden;
  2618. position: relative;
  2619. height: 100%;
  2620. width: 100%; }
  2621. .block__wrapper--last {
  2622. padding-bottom: 0; }
  2623. .block.stages {
  2624. padding-top: 200px;
  2625. padding-bottom: 200px; }
  2626. .block.stages--services {
  2627. padding-top: 0;
  2628. padding-bottom: 100px; }
  2629. .block.reviews {
  2630. padding-top: 200px;
  2631. padding-bottom: 100px; }
  2632. .block.reviews::before {
  2633. -webkit-clip-path: polygon(0 0, 0 100%, 100% 0);
  2634. clip-path: polygon(0 0, 0 100%, 100% 0);
  2635. color: #000000;
  2636. top: 0; } }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement