main.css 29 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330
  1. @media screen and (min-width: 1209px) {
  2. .main-button:hover {
  3. background-color: #CDB092;
  4. }
  5. .main-button--header:hover {
  6. background-color: #A52841;
  7. }
  8. .main-button--white:hover {
  9. background-color: #F7F7F7;
  10. }
  11. .general-more:hover {
  12. color: #1C1C1C;
  13. border-color: #CDB092;
  14. }
  15. .general-more:hover .icon-arrow-right {
  16. color: #CDB092;
  17. }
  18. .general-more--dark:hover {
  19. color: #ffffff;
  20. border-color: #CDB092;
  21. }
  22. }
  23. /* General */
  24. * {
  25. margin: 0;
  26. padding: 0;
  27. -webkit-box-sizing: border-box;
  28. box-sizing: border-box;
  29. -webkit-appearance: none;
  30. -moz-appearance: none;
  31. -ms-appearance: none;
  32. -o-appearance: none;
  33. appearance: none;
  34. }
  35. ul[class] {
  36. list-style: none;
  37. }
  38. ol[class] {
  39. list-style: none;
  40. }
  41. ul:not([class]),
  42. ol:not([class]) {
  43. padding-left: 17px;
  44. }
  45. img {
  46. max-width: 100%;
  47. max-height: 100%;
  48. vertical-align: top;
  49. }
  50. a {
  51. font: inherit;
  52. color: inherit;
  53. text-decoration: none;
  54. }
  55. textarea {
  56. font: inherit;
  57. color: inherit;
  58. outline: none;
  59. }
  60. input {
  61. font: inherit;
  62. color: inherit;
  63. outline: none;
  64. }
  65. button {
  66. font: inherit;
  67. color: inherit;
  68. text-transform: inherit;
  69. outline: none;
  70. border: none;
  71. background: none;
  72. cursor: pointer;
  73. }
  74. input[type=number]::-webkit-inner-spin-button {
  75. -webkit-appearance: none;
  76. -moz-appearance: none;
  77. -ms-appearance: none;
  78. -o-appearance: none;
  79. appearance: none;
  80. }
  81. input[type=date]::-webkit-inner-spin-button {
  82. -webkit-appearance: none;
  83. -moz-appearance: none;
  84. -ms-appearance: none;
  85. -o-appearance: none;
  86. appearance: none;
  87. }
  88. html {
  89. overflow-x: hidden;
  90. -webkit-overflow-scrolling: touch;
  91. }
  92. html.overflow {
  93. height: auto;
  94. position: relative;
  95. overflow: hidden !important;
  96. margin-right: 17px;
  97. }
  98. body {
  99. overflow: hidden;
  100. min-width: 320px;
  101. font-family: "Basis Grotesque Pro";
  102. font-weight: 400;
  103. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  104. -webkit-overflow-scrolling: touch;
  105. -webkit-font-smoothing: antialiased;
  106. -moz-osx-font-smoothing: grayscale;
  107. color: #1C1C1C;
  108. background-color: #ffffff;
  109. }
  110. main {
  111. position: relative;
  112. }
  113. .container {
  114. max-width: 1280px;
  115. width: 100%;
  116. padding: 0px 55px;
  117. margin: 0px auto;
  118. }
  119. .main-button {
  120. display: -webkit-box;
  121. display: -webkit-flex;
  122. display: -ms-flexbox;
  123. display: flex;
  124. -webkit-box-pack: center;
  125. -webkit-justify-content: center;
  126. -ms-flex-pack: center;
  127. justify-content: center;
  128. -webkit-box-align: center;
  129. -webkit-align-items: center;
  130. -ms-flex-align: center;
  131. align-items: center;
  132. font-weight: 500;
  133. font-size: 13px;
  134. line-height: 17px;
  135. letter-spacing: 0.05em;
  136. text-transform: uppercase;
  137. color: #ffffff;
  138. max-width: 190px;
  139. width: 100%;
  140. height: 53px;
  141. background-color: #AD957C;
  142. -webkit-transition: background-color 0.4s;
  143. transition: background-color 0.4s;
  144. }
  145. .main-button--header {
  146. font-size: 10px;
  147. max-width: 142px;
  148. height: 40px;
  149. background-color: #561623;
  150. }
  151. .main-button--white {
  152. color: #1C1C1C;
  153. background-color: #ffffff;
  154. border: 1px solid #AD957C;
  155. }
  156. .general-header {
  157. display: -webkit-box;
  158. display: -webkit-flex;
  159. display: -ms-flexbox;
  160. display: flex;
  161. -webkit-box-orient: vertical;
  162. -webkit-box-direction: normal;
  163. -webkit-flex-direction: column;
  164. -ms-flex-direction: column;
  165. flex-direction: column;
  166. -webkit-box-align: center;
  167. -webkit-align-items: center;
  168. -ms-flex-align: center;
  169. align-items: center;
  170. text-align: center;
  171. margin-bottom: 40px;
  172. }
  173. .general-header__icon {
  174. display: block;
  175. width: 37px;
  176. height: 31px;
  177. background-size: contain;
  178. background-position: center;
  179. background-repeat: no-repeat;
  180. margin-bottom: 15px;
  181. }
  182. .main-caption-l {
  183. font-family: "Cochin", serif;
  184. font-weight: bold;
  185. font-size: 36px;
  186. line-height: 42px;
  187. letter-spacing: 0.05em;
  188. text-transform: uppercase;
  189. color: #1C1C1C;
  190. }
  191. .main-caption-s {
  192. font-family: "Cochin", serif;
  193. font-weight: 700;
  194. font-size: 24px;
  195. line-height: 28px;
  196. letter-spacing: 0.05em;
  197. text-transform: uppercase;
  198. }
  199. .general-more {
  200. font-weight: 500;
  201. font-size: 12px;
  202. line-height: 15px;
  203. letter-spacing: 0.05em;
  204. text-transform: uppercase;
  205. color: #333333;
  206. padding: 0px 0px 8px 8px;
  207. border-bottom: 1px solid #AD957C;
  208. position: relative;
  209. z-index: 1;
  210. -webkit-transition: color 0.4s, border-color 0.4s;
  211. transition: color 0.4s, border-color 0.4s;
  212. }
  213. .general-more::before {
  214. content: "";
  215. position: absolute;
  216. left: 0px;
  217. top: 0px;
  218. width: 12px;
  219. height: 15px;
  220. background-color: #E0E0E0;
  221. z-index: -1;
  222. }
  223. .general-more .icon-arrow-right {
  224. font-size: 8px;
  225. color: #AD957C;
  226. -webkit-transition: color 0.4s;
  227. transition: color 0.4s;
  228. margin-left: 7px;
  229. }
  230. .general-more--dark {
  231. color: #FFFFFF;
  232. }
  233. .general-more--dark::before {
  234. background-color: #561623;
  235. }
  236. .main-input__wrapper {
  237. display: block;
  238. width: 100%;
  239. margin-bottom: 20px;
  240. position: relative;
  241. }
  242. .main-input__wrapper:last-of-type {
  243. margin-bottom: 0px;
  244. }
  245. .main-input__wrapper .error-text {
  246. position: absolute;
  247. left: 0px;
  248. bottom: -18px;
  249. font-size: 12px;
  250. line-height: 120%;
  251. color: #A52841;
  252. visibility: hidden;
  253. }
  254. .main-input {
  255. width: 100%;
  256. height: 35px;
  257. font-size: 14px;
  258. line-height: 18px;
  259. padding-bottom: 10px;
  260. border: none;
  261. background-color: none;
  262. border-bottom: 1px solid #E0E0E0;
  263. -webkit-transition: border-color 0.4s;
  264. transition: border-color 0.4s;
  265. }
  266. .main-input::-webkit-input-placeholder {
  267. font-size: 14px;
  268. line-height: 18px;
  269. color: #AD957C;
  270. }
  271. .main-input::-moz-placeholder {
  272. font-size: 14px;
  273. line-height: 18px;
  274. color: #AD957C;
  275. }
  276. .main-input:-ms-input-placeholder {
  277. font-size: 14px;
  278. line-height: 18px;
  279. color: #AD957C;
  280. }
  281. .main-input::-ms-input-placeholder {
  282. font-size: 14px;
  283. line-height: 18px;
  284. color: #AD957C;
  285. }
  286. .main-input::placeholder {
  287. font-size: 14px;
  288. line-height: 18px;
  289. color: #AD957C;
  290. }
  291. .main-input:focus {
  292. border-color: #CDB092;
  293. }
  294. .main-input:disabled::-webkit-input-placeholder {
  295. color: #E0E0E0;
  296. }
  297. .main-input:disabled::-moz-placeholder {
  298. color: #E0E0E0;
  299. }
  300. .main-input:disabled:-ms-input-placeholder {
  301. color: #E0E0E0;
  302. }
  303. .main-input:disabled::-ms-input-placeholder {
  304. color: #E0E0E0;
  305. }
  306. .main-input:disabled::placeholder {
  307. color: #E0E0E0;
  308. }
  309. .main-input.active {
  310. border-color: #AD957C;
  311. }
  312. .main-input.error {
  313. border-color: #A52841;
  314. }
  315. .main-input.error + .error-text {
  316. visibility: visible;
  317. }
  318. .icon-phone {
  319. font-size: 15px;
  320. margin-right: 12px;
  321. }
  322. .icon-place {
  323. font-size: 16px;
  324. margin-right: 14px;
  325. }
  326. .icon-email {
  327. font-size: 12px;
  328. margin-right: 12px;
  329. }
  330. /* Seo block */
  331. .seo-block {
  332. margin-bottom: 100px;
  333. }
  334. .seo-block__content {
  335. font-size: 16px;
  336. line-height: 150%;
  337. }
  338. .seo-block__content h5 {
  339. font-size: 16px;
  340. line-height: 150%;
  341. }
  342. .seo-block__content p {
  343. margin-bottom: 30px;
  344. }
  345. .seo-block__content p:last-child {
  346. margin-bottom: 0px;
  347. }
  348. /* //Seo block */
  349. [class^="icon-"],
  350. [class*=" icon-"] {
  351. /* use !important to prevent issues with browser extensions that change fonts */
  352. font-family: 'icomoon' !important;
  353. speak: never;
  354. font-style: normal;
  355. font-weight: normal;
  356. font-variant: normal;
  357. text-transform: none;
  358. line-height: 1;
  359. /* Better Font Rendering =========== */
  360. -webkit-font-smoothing: antialiased;
  361. -moz-osx-font-smoothing: grayscale;
  362. }
  363. .icon-arrow-left:before {
  364. content: "\e900";
  365. }
  366. .icon-arrow-right:before {
  367. content: "\e901";
  368. }
  369. .icon-email:before {
  370. content: "\e902";
  371. }
  372. .icon-phone:before {
  373. content: "\e903";
  374. }
  375. .icon-place:before {
  376. content: "\e904";
  377. }
  378. @font-face {
  379. font-family: "Basis Grotesque Pro";
  380. src: url(../fonts/BasisGrotesquePro-Regular.ttf);
  381. font-style: normal;
  382. font-weight: 400;
  383. font-display: swap;
  384. }
  385. @font-face {
  386. font-family: "Basis Grotesque Pro";
  387. src: url(../fonts/BasisGrotesquePro-Medium.ttf);
  388. font-style: normal;
  389. font-weight: 500;
  390. font-display: swap;
  391. }
  392. @font-face {
  393. font-family: "Basis Grotesque Pro";
  394. src: url(../fonts/BasisGrotesquePro-Bold.ttf);
  395. font-style: normal;
  396. font-weight: 700;
  397. font-display: swap;
  398. }
  399. @font-face {
  400. font-family: "Cochin";
  401. src: url(../fonts/Cochin-Bold.ttf);
  402. font-style: normal;
  403. font-weight: 700;
  404. font-display: swap;
  405. }
  406. @font-face {
  407. font-family: 'icomoon';
  408. src: url('../fonts/icomoon.ttf');
  409. font-weight: normal;
  410. font-style: normal;
  411. font-display: block;
  412. }
  413. @media screen and (min-width: 1209px) {
  414. /* Header hover */
  415. .header__contact-link:hover {
  416. color: #ffffff;
  417. }
  418. .header__link:hover {
  419. color: #CDB092;
  420. }
  421. }
  422. /* Header */
  423. .header__top {
  424. display: -webkit-box;
  425. display: -webkit-flex;
  426. display: -ms-flexbox;
  427. display: flex;
  428. -webkit-box-align: center;
  429. -webkit-align-items: center;
  430. -ms-flex-align: center;
  431. align-items: center;
  432. height: 30px;
  433. background-color: #39060A;
  434. }
  435. .header__contact-list {
  436. display: -webkit-box;
  437. display: -webkit-flex;
  438. display: -ms-flexbox;
  439. display: flex;
  440. -webkit-box-pack: end;
  441. -webkit-justify-content: flex-end;
  442. -ms-flex-pack: end;
  443. justify-content: flex-end;
  444. }
  445. .header__contact-item {
  446. display: -webkit-box;
  447. display: -webkit-flex;
  448. display: -ms-flexbox;
  449. display: flex;
  450. -webkit-box-align: center;
  451. -webkit-align-items: center;
  452. -ms-flex-align: center;
  453. align-items: center;
  454. font-weight: 500;
  455. font-size: 11px;
  456. line-height: 14px;
  457. margin-right: 30px;
  458. color: #BDBDBD;
  459. }
  460. .header__contact-item:last-child {
  461. margin-right: 0px;
  462. }
  463. .header__contact-link {
  464. -webkit-transition: color 0.4s;
  465. transition: color 0.4s;
  466. }
  467. .header__main {
  468. display: -webkit-box;
  469. display: -webkit-flex;
  470. display: -ms-flexbox;
  471. display: flex;
  472. -webkit-box-align: center;
  473. -webkit-align-items: center;
  474. -ms-flex-align: center;
  475. align-items: center;
  476. background-color: #7A1B2E;
  477. height: 65px;
  478. }
  479. .header__main__wrapper {
  480. display: -webkit-box;
  481. display: -webkit-flex;
  482. display: -ms-flexbox;
  483. display: flex;
  484. -webkit-box-align: center;
  485. -webkit-align-items: center;
  486. -ms-flex-align: center;
  487. align-items: center;
  488. -webkit-box-pack: justify;
  489. -webkit-justify-content: space-between;
  490. -ms-flex-pack: justify;
  491. justify-content: space-between;
  492. }
  493. .header__logo {
  494. width: 100px;
  495. height: 41px;
  496. }
  497. .header__nav {
  498. margin-left: 40px;
  499. }
  500. .header__list {
  501. display: -webkit-box;
  502. display: -webkit-flex;
  503. display: -ms-flexbox;
  504. display: flex;
  505. -webkit-box-align: center;
  506. -webkit-align-items: center;
  507. -ms-flex-align: center;
  508. align-items: center;
  509. font-weight: 500;
  510. font-size: 12px;
  511. line-height: 15px;
  512. letter-spacing: 0.05em;
  513. text-transform: uppercase;
  514. color: #ffffff;
  515. }
  516. .header__item {
  517. margin-right: 30px;
  518. }
  519. .header__item:last-child {
  520. margin-right: 0px;
  521. }
  522. .header__link {
  523. -webkit-transition: color 0.4s;
  524. transition: color 0.4s;
  525. }
  526. /* Main-banner */
  527. @media screen and (min-width: 1209px) {
  528. .main-banner__nav-button:hover {
  529. border-color: #ffffff;
  530. color: #ffffff;
  531. }
  532. }
  533. .main-banner {
  534. margin-bottom: 40px;
  535. }
  536. .main-banner__list {
  537. width: 100%;
  538. height: 426px;
  539. position: relative;
  540. }
  541. .main-banner__item {
  542. position: absolute;
  543. left: 0px;
  544. top: 0px;
  545. width: 100%;
  546. height: 100%;
  547. color: #ffffff;
  548. z-index: 0;
  549. }
  550. .main-banner__item.show {
  551. z-index: 1;
  552. }
  553. .main-banner__item.show .main-banner__item__img {
  554. opacity: 1;
  555. }
  556. .main-banner__item.show .main-banner__item__wrapper .main-button {
  557. -webkit-transform: translateX(0px);
  558. transform: translateX(0px);
  559. opacity: 1;
  560. }
  561. .main-banner__item.show .main-banner__item__caption {
  562. -webkit-transform: translateX(0px);
  563. transform: translateX(0px);
  564. opacity: 1;
  565. }
  566. .main-banner__item.show .main-banner__item__sub {
  567. -webkit-transform: translateX(0px);
  568. transform: translateX(0px);
  569. opacity: 1;
  570. }
  571. .main-banner__item__img {
  572. position: absolute;
  573. left: 0px;
  574. top: 0px;
  575. width: 100%;
  576. height: 100%;
  577. background-position: center;
  578. background-repeat: no-repeat;
  579. background-size: cover;
  580. opacity: 0;
  581. -webkit-transition: opacity 0.6s;
  582. transition: opacity 0.6s;
  583. }
  584. .main-banner__item__wrapper {
  585. display: -webkit-box;
  586. display: -webkit-flex;
  587. display: -ms-flexbox;
  588. display: flex;
  589. -webkit-box-orient: vertical;
  590. -webkit-box-direction: normal;
  591. -webkit-flex-direction: column;
  592. -ms-flex-direction: column;
  593. flex-direction: column;
  594. -webkit-box-pack: center;
  595. -webkit-justify-content: center;
  596. -ms-flex-pack: center;
  597. justify-content: center;
  598. height: 100%;
  599. padding-left: 155px;
  600. }
  601. .main-banner__item__wrapper .main-button {
  602. -webkit-transform: translateX(-100px);
  603. transform: translateX(-100px);
  604. opacity: 0;
  605. -webkit-transition: opacity 0.4s 0.4s, background-color 0.4s, -webkit-transform 0.4s 0.4s;
  606. transition: opacity 0.4s 0.4s, background-color 0.4s, -webkit-transform 0.4s 0.4s;
  607. transition: opacity 0.4s 0.4s, transform 0.4s 0.4s, background-color 0.4s;
  608. transition: opacity 0.4s 0.4s, transform 0.4s 0.4s, background-color 0.4s, -webkit-transform 0.4s 0.4s;
  609. }
  610. .main-banner__item__caption {
  611. font-family: "Cochin", serif;
  612. font-weight: 700;
  613. font-size: 48px;
  614. line-height: 56px;
  615. letter-spacing: 0.05em;
  616. text-transform: uppercase;
  617. margin-bottom: 20px;
  618. max-width: 500px;
  619. -webkit-transform: translateX(-100px);
  620. transform: translateX(-100px);
  621. opacity: 0;
  622. -webkit-transition: opacity 0.4s, -webkit-transform 0.4s;
  623. transition: opacity 0.4s, -webkit-transform 0.4s;
  624. transition: opacity 0.4s, transform 0.4s;
  625. transition: opacity 0.4s, transform 0.4s, -webkit-transform 0.4s;
  626. }
  627. .main-banner__item__sub {
  628. font-size: 16px;
  629. line-height: 21px;
  630. margin-bottom: 20px;
  631. max-width: 500px;
  632. -webkit-transform: translateX(-100px);
  633. transform: translateX(-100px);
  634. opacity: 0;
  635. -webkit-transition: opacity 0.4s 0.2s, -webkit-transform 0.4s 0.2s;
  636. transition: opacity 0.4s 0.2s, -webkit-transform 0.4s 0.2s;
  637. transition: opacity 0.4s 0.2s, transform 0.4s 0.2s;
  638. transition: opacity 0.4s 0.2s, transform 0.4s 0.2s, -webkit-transform 0.4s 0.2s;
  639. }
  640. .main-banner__nav-wrapper {
  641. display: -webkit-box;
  642. display: -webkit-flex;
  643. display: -ms-flexbox;
  644. display: flex;
  645. -webkit-box-pack: end;
  646. -webkit-justify-content: flex-end;
  647. -ms-flex-pack: end;
  648. justify-content: flex-end;
  649. margin-top: -81px;
  650. position: relative;
  651. z-index: 2;
  652. }
  653. .main-banner__nav-list {
  654. display: -webkit-box;
  655. display: -webkit-flex;
  656. display: -ms-flexbox;
  657. display: flex;
  658. -webkit-box-align: center;
  659. -webkit-align-items: center;
  660. -ms-flex-align: center;
  661. align-items: center;
  662. background-color: rgba(255, 255, 255, 0.25);
  663. padding: 20px;
  664. color: #E0E0E0;
  665. }
  666. .main-banner__nav-button {
  667. display: -webkit-box;
  668. display: -webkit-flex;
  669. display: -ms-flexbox;
  670. display: flex;
  671. -webkit-box-orient: vertical;
  672. -webkit-box-direction: normal;
  673. -webkit-flex-direction: column;
  674. -ms-flex-direction: column;
  675. flex-direction: column;
  676. padding-left: 15px;
  677. border-left: 1px solid #E0E0E0;
  678. padding-right: 30px;
  679. font-weight: 500;
  680. font-size: 14px;
  681. line-height: 18px;
  682. min-width: 200px;
  683. -webkit-transition: border-color 0.4s, color 0.4s;
  684. transition: border-color 0.4s, color 0.4s;
  685. }
  686. .main-banner__nav-button:last-child {
  687. padding-right: 0px;
  688. }
  689. .main-banner__nav-button.active {
  690. border-color: #ffffff;
  691. color: #ffffff;
  692. }
  693. .main-banner__nav__number {
  694. font-size: 12px;
  695. margin-bottom: 5px;
  696. }
  697. /* /Main-banner */
  698. /* Our services */
  699. .our-services {
  700. margin-bottom: 150px;
  701. }
  702. .our-services__list {
  703. display: -webkit-box;
  704. display: -webkit-flex;
  705. display: -ms-flexbox;
  706. display: flex;
  707. -webkit-flex-wrap: wrap;
  708. -ms-flex-wrap: wrap;
  709. flex-wrap: wrap;
  710. margin-right: -30px;
  711. margin-bottom: -50px;
  712. }
  713. .our-services__item {
  714. display: -webkit-box;
  715. display: -webkit-flex;
  716. display: -ms-flexbox;
  717. display: flex;
  718. -webkit-box-orient: vertical;
  719. -webkit-box-direction: normal;
  720. -webkit-flex-direction: column;
  721. -ms-flex-direction: column;
  722. flex-direction: column;
  723. -webkit-box-align: start;
  724. -webkit-align-items: flex-start;
  725. -ms-flex-align: start;
  726. align-items: flex-start;
  727. width: calc(25% - 30px);
  728. margin-right: 30px;
  729. margin-bottom: 50px;
  730. }
  731. .our-services__item .general-more {
  732. margin-top: auto;
  733. }
  734. .our-services__item__img {
  735. height: 120px;
  736. margin-bottom: 13px;
  737. }
  738. .our-services__item__img img {
  739. width: 100%;
  740. height: 100%;
  741. -o-object-fit: cover;
  742. object-fit: cover;
  743. }
  744. .our-services__item__caption {
  745. font-family: "Cochin", serif;
  746. font-weight: 700;
  747. font-size: 20px;
  748. line-height: 120%;
  749. letter-spacing: 0.05em;
  750. text-transform: uppercase;
  751. margin-bottom: 10px;
  752. }
  753. .our-services__item__text {
  754. font-size: 14px;
  755. line-height: 150%;
  756. display: -webkit-box;
  757. -webkit-box-orient: vertical;
  758. -webkit-line-clamp: 2;
  759. overflow: hidden;
  760. text-overflow: ellipsis;
  761. max-height: 42px;
  762. margin-bottom: 14px;
  763. }
  764. /* //Our services */
  765. /* Price block */
  766. @media screen and (min-width: 1209px) {
  767. .price-block__item:hover {
  768. background-color: #F8F8F8;
  769. }
  770. .price-block__tabs__item:hover {
  771. color: #AD957C;
  772. }
  773. }
  774. .price-block {
  775. margin-bottom: 150px;
  776. }
  777. .price-block__tabs {
  778. display: -webkit-box;
  779. display: -webkit-flex;
  780. display: -ms-flexbox;
  781. display: flex;
  782. -webkit-box-pack: center;
  783. -webkit-justify-content: center;
  784. -ms-flex-pack: center;
  785. justify-content: center;
  786. margin-bottom: 40px;
  787. }
  788. .price-block__tabs .price-block__tabs__item:first-child {
  789. margin-right: 30px;
  790. }
  791. .price-block__tabs .price-block__tabs__item:first-child::before {
  792. display: none;
  793. }
  794. .price-block__tabs__item {
  795. font-family: "Cochin", serif;
  796. font-weight: 700;
  797. font-size: 20px;
  798. line-height: 23px;
  799. text-align: center;
  800. text-transform: uppercase;
  801. position: relative;
  802. -webkit-transition: color 0.4s;
  803. transition: color 0.4s;
  804. }
  805. .price-block__tabs__item.active {
  806. color: #AD957C;
  807. }
  808. .price-block__tabs__item::before {
  809. content: "";
  810. width: 6px;
  811. height: 6px;
  812. position: absolute;
  813. left: -15px;
  814. top: 50%;
  815. -webkit-transform: translateY(-50%);
  816. transform: translateY(-50%);
  817. background-color: #AD957C;
  818. }
  819. .price-block__list {
  820. display: -webkit-box;
  821. display: -webkit-flex;
  822. display: -ms-flexbox;
  823. display: flex;
  824. }
  825. .price-block__slider {
  826. position: relative;
  827. }
  828. .price-block__list--slider {
  829. position: absolute;
  830. width: 100%;
  831. left: 0px;
  832. top: 0px;
  833. -webkit-transition: opacity 0.4s;
  834. transition: opacity 0.4s;
  835. z-index: 0;
  836. }
  837. .price-block__list--slider.show {
  838. z-index: 1;
  839. }
  840. .price-block__list--slider.show .price-block__item--slider {
  841. opacity: 1;
  842. }
  843. .price-block__list--slider.show .price-block__item--slider:nth-child(1) {
  844. -webkit-transform: translateY(0px);
  845. transform: translateY(0px);
  846. }
  847. .price-block__list--slider.show .price-block__item--slider:nth-child(2) {
  848. -webkit-transform: translateY(0px);
  849. transform: translateY(0px);
  850. }
  851. .price-block__list--slider.show .price-block__item--slider:nth-child(3) {
  852. -webkit-transform: translateY(0px);
  853. transform: translateY(0px);
  854. }
  855. .price-block__list--slider.show .price-block__item--slider:nth-child(4) {
  856. -webkit-transform: translateY(0px);
  857. transform: translateY(0px);
  858. }
  859. .price-block__list--slider.show .price-block__item--slider:nth-child(5) {
  860. -webkit-transform: translateY(0px);
  861. transform: translateY(0px);
  862. }
  863. .price-block__item {
  864. display: -webkit-box;
  865. display: -webkit-flex;
  866. display: -ms-flexbox;
  867. display: flex;
  868. -webkit-box-orient: vertical;
  869. -webkit-box-direction: normal;
  870. -webkit-flex-direction: column;
  871. -ms-flex-direction: column;
  872. flex-direction: column;
  873. width: 20%;
  874. padding: 20px;
  875. text-align: center;
  876. border: 1px solid #E0E0E0;
  877. border-right: none;
  878. -webkit-transition: background-color 0.4s;
  879. transition: background-color 0.4s;
  880. }
  881. .price-block__item:last-child {
  882. border-right: 1px solid #E0E0E0;
  883. }
  884. .price-block__item .main-button {
  885. margin-top: auto;
  886. }
  887. .price-block__item--slider {
  888. opacity: 0;
  889. }
  890. .price-block__item--slider:nth-child(1) {
  891. -webkit-transform: translateY(100px);
  892. transform: translateY(100px);
  893. -webkit-transition: opacity 0.6s 0s, -webkit-transform 0.6s 0s;
  894. transition: opacity 0.6s 0s, -webkit-transform 0.6s 0s;
  895. transition: opacity 0.6s 0s, transform 0.6s 0s;
  896. transition: opacity 0.6s 0s, transform 0.6s 0s, -webkit-transform 0.6s 0s;
  897. }
  898. .price-block__item--slider:nth-child(2) {
  899. -webkit-transform: translateY(100px);
  900. transform: translateY(100px);
  901. -webkit-transition: opacity 0.6s 0.2s, -webkit-transform 0.6s 0.2s;
  902. transition: opacity 0.6s 0.2s, -webkit-transform 0.6s 0.2s;
  903. transition: opacity 0.6s 0.2s, transform 0.6s 0.2s;
  904. transition: opacity 0.6s 0.2s, transform 0.6s 0.2s, -webkit-transform 0.6s 0.2s;
  905. }
  906. .price-block__item--slider:nth-child(3) {
  907. -webkit-transform: translateY(100px);
  908. transform: translateY(100px);
  909. -webkit-transition: opacity 0.6s 0.4s, -webkit-transform 0.6s 0.4s;
  910. transition: opacity 0.6s 0.4s, -webkit-transform 0.6s 0.4s;
  911. transition: opacity 0.6s 0.4s, transform 0.6s 0.4s;
  912. transition: opacity 0.6s 0.4s, transform 0.6s 0.4s, -webkit-transform 0.6s 0.4s;
  913. }
  914. .price-block__item--slider:nth-child(4) {
  915. -webkit-transform: translateY(100px);
  916. transform: translateY(100px);
  917. -webkit-transition: opacity 0.6s 0.6s, -webkit-transform 0.6s 0.6s;
  918. transition: opacity 0.6s 0.6s, -webkit-transform 0.6s 0.6s;
  919. transition: opacity 0.6s 0.6s, transform 0.6s 0.6s;
  920. transition: opacity 0.6s 0.6s, transform 0.6s 0.6s, -webkit-transform 0.6s 0.6s;
  921. }
  922. .price-block__item--slider:nth-child(5) {
  923. -webkit-transform: translateY(100px);
  924. transform: translateY(100px);
  925. -webkit-transition: opacity 0.6s 0.8s, -webkit-transform 0.6s 0.8s;
  926. transition: opacity 0.6s 0.8s, -webkit-transform 0.6s 0.8s;
  927. transition: opacity 0.6s 0.8s, transform 0.6s 0.8s;
  928. transition: opacity 0.6s 0.8s, transform 0.6s 0.8s, -webkit-transform 0.6s 0.8s;
  929. }
  930. .price-block__item__name {
  931. font-family: "Cochin", serif;
  932. font-weight: 700;
  933. font-size: 18px;
  934. line-height: 21px;
  935. letter-spacing: 0.05em;
  936. text-transform: uppercase;
  937. color: #7A1B2E;
  938. margin-bottom: 15px;
  939. }
  940. .price-block__item__price {
  941. font-family: "Cochin", serif;
  942. font-style: normal;
  943. font-weight: 700;
  944. font-size: 24px;
  945. line-height: 28px;
  946. text-transform: uppercase;
  947. margin-bottom: 15px;
  948. }
  949. .price-block__item__price span {
  950. padding-left: 10px;
  951. }
  952. .price-block__item__installment {
  953. font-weight: 700;
  954. font-size: 11px;
  955. line-height: 14px;
  956. letter-spacing: 0.05em;
  957. text-transform: uppercase;
  958. color: #828282;
  959. margin-bottom: 5px;
  960. }
  961. .price-block__item__installment-price {
  962. font-weight: 700;
  963. font-size: 12px;
  964. line-height: 15px;
  965. color: #4F4F4F;
  966. }
  967. .price-block__sub-list {
  968. text-align: left;
  969. margin: 20px 0px;
  970. font-weight: bold;
  971. font-size: 13px;
  972. line-height: 120%;
  973. color: #4F4F4F;
  974. }
  975. .price-block__sub-item {
  976. position: relative;
  977. padding-left: 20px;
  978. margin-bottom: 10px;
  979. }
  980. .price-block__sub-item:last-child {
  981. margin-bottom: 0px;
  982. }
  983. .price-block__sub-item::before {
  984. content: "";
  985. position: absolute;
  986. left: 0px;
  987. top: 5px;
  988. width: 6px;
  989. height: 6px;
  990. background-color: #AD957C;
  991. }
  992. /* //Price block */
  993. /* About us */
  994. .about-us {
  995. margin-bottom: 150px;
  996. }
  997. .about-us__container {
  998. background-color: #7A1B2E;
  999. color: #FFFFFF;
  1000. padding: 30px 30px 30px 50px;
  1001. }
  1002. .about-us__container .main-caption-l {
  1003. color: #FFFFFF;
  1004. }
  1005. .about-us__wrapper-info {
  1006. display: -webkit-box;
  1007. display: -webkit-flex;
  1008. display: -ms-flexbox;
  1009. display: flex;
  1010. }
  1011. .about-us__img {
  1012. width: 500px;
  1013. height: 288px;
  1014. background-size: cover;
  1015. background-position: center;
  1016. background-repeat: no-repeat;
  1017. -webkit-flex-shrink: 0;
  1018. -ms-flex-negative: 0;
  1019. flex-shrink: 0;
  1020. margin-right: 50px;
  1021. margin-bottom: -50px;
  1022. }
  1023. .about-us__info {
  1024. font-size: 16px;
  1025. line-height: 150%;
  1026. }
  1027. .about-us__info p {
  1028. margin-bottom: 20px;
  1029. }
  1030. .about-us__info p:last-child {
  1031. margin-bottom: 0px;
  1032. }
  1033. .about-us__info .general-more {
  1034. margin-top: 25px;
  1035. }
  1036. .about-us__info__caption {
  1037. font-weight: 500;
  1038. font-size: 18px;
  1039. line-height: 23px;
  1040. margin-bottom: 20px;
  1041. }
  1042. /* About us */
  1043. /* Call back */
  1044. @media screen and (min-width: 1209px) {
  1045. .call-back__info-link:hover {
  1046. color: #1C1C1C;
  1047. }
  1048. }
  1049. .call-back {
  1050. margin-bottom: 150px;
  1051. }
  1052. .call-back__wrapper {
  1053. display: -webkit-box;
  1054. display: -webkit-flex;
  1055. display: -ms-flexbox;
  1056. display: flex;
  1057. -webkit-box-align: center;
  1058. -webkit-align-items: center;
  1059. -ms-flex-align: center;
  1060. align-items: center;
  1061. position: relative;
  1062. }
  1063. .call-back__wrapper::before {
  1064. content: "";
  1065. position: absolute;
  1066. left: 20px;
  1067. top: 0px;
  1068. height: 100%;
  1069. width: 1px;
  1070. background-color: #7A1B2E;
  1071. }
  1072. .call-back__form {
  1073. max-width: 470px;
  1074. width: 100%;
  1075. margin-right: 130px;
  1076. padding-left: 99px;
  1077. }
  1078. .call-back__form .main-button {
  1079. margin-top: 30px;
  1080. }
  1081. .call-back__form .main-caption-s {
  1082. color: #7A1B2E;
  1083. margin-bottom: 30px;
  1084. }
  1085. .call-back__info {
  1086. max-width: 570px;
  1087. width: 100%;
  1088. height: 308px;
  1089. background-color: #F2F2F2;
  1090. background-size: cover;
  1091. background-position: center;
  1092. background-repeat: no-repeat;
  1093. padding: 40px;
  1094. }
  1095. .call-back__info-list {
  1096. margin-top: 25px;
  1097. }
  1098. .call-back__info-item {
  1099. display: -webkit-box;
  1100. display: -webkit-flex;
  1101. display: -ms-flexbox;
  1102. display: flex;
  1103. -webkit-box-align: center;
  1104. -webkit-align-items: center;
  1105. -ms-flex-align: center;
  1106. align-items: center;
  1107. margin-bottom: 20px;
  1108. font-weight: 500;
  1109. font-size: 14px;
  1110. line-height: 18px;
  1111. color: #4F4F4F;
  1112. }
  1113. .call-back__info-item:last-child {
  1114. margin-bottom: 0px;
  1115. }
  1116. .call-back__info-item [class^="icon-"] {
  1117. color: #AD957C;
  1118. }
  1119. .call-back__info-link {
  1120. -webkit-transition: color 0.4s;
  1121. transition: color 0.4s;
  1122. }
  1123. /* Call back */
  1124. /* Popup */
  1125. @media screen and (min-width: 1209px) {
  1126. .close__popup:hover::before,
  1127. .close__popup:hover::after {
  1128. background-color: #4a4a4a;
  1129. }
  1130. }
  1131. .popup {
  1132. position: fixed;
  1133. top: 50%;
  1134. left: 50%;
  1135. -webkit-transform: translate(-50%, -50%) scale(0);
  1136. transform: translate(-50%, -50%) scale(0);
  1137. z-index: 4;
  1138. padding: 50px 55px;
  1139. background-color: #fff;
  1140. max-height: 100%;
  1141. overflow: auto;
  1142. scrollbar-width: none;
  1143. -ms-overflow-style: none;
  1144. }
  1145. .popup::-webkit-scrollbar {
  1146. display: none;
  1147. }
  1148. .popup.active {
  1149. -webkit-transform: translate(-50%, -50%) scale(1);
  1150. transform: translate(-50%, -50%) scale(1);
  1151. -webkit-transition: -webkit-transform 0.4s;
  1152. transition: -webkit-transform 0.4s;
  1153. transition: transform 0.4s;
  1154. transition: transform 0.4s, -webkit-transform 0.4s;
  1155. }
  1156. .close__popup {
  1157. display: block;
  1158. position: absolute;
  1159. right: 15px;
  1160. top: 15px;
  1161. width: 22px;
  1162. height: 22px;
  1163. z-index: 2;
  1164. -webkit-transform: rotate(-45deg);
  1165. transform: rotate(-45deg);
  1166. }
  1167. .close__popup::before,
  1168. .close__popup::after {
  1169. content: "";
  1170. position: absolute;
  1171. left: 0px;
  1172. top: 50%;
  1173. width: 100%;
  1174. height: 1px;
  1175. background-color: #BDBDBD;
  1176. -webkit-transform: translateY(-50%);
  1177. transform: translateY(-50%);
  1178. -webkit-transition: background-color 0.4s;
  1179. transition: background-color 0.4s;
  1180. }
  1181. .close__popup::after {
  1182. left: 50%;
  1183. top: 0px;
  1184. -webkit-transform: translateX(-50%);
  1185. transform: translateX(-50%);
  1186. height: 100%;
  1187. width: 1px;
  1188. }
  1189. .overlay {
  1190. display: none;
  1191. position: fixed;
  1192. left: 0px;
  1193. top: 0px;
  1194. width: 100%;
  1195. height: 100%;
  1196. background-color: rgba(0, 0, 0, 0.3);
  1197. z-index: 3;
  1198. }
  1199. .overlay.active {
  1200. display: block;
  1201. }
  1202. .popup-caption {
  1203. font-family: "Cochin", serif;
  1204. font-weight: 700;
  1205. font-size: 20px;
  1206. line-height: 23px;
  1207. letter-spacing: 0.05em;
  1208. text-transform: uppercase;
  1209. margin-bottom: 20px;
  1210. }
  1211. .popup-text {
  1212. font-size: 14px;
  1213. line-height: 18px;
  1214. margin-bottom: 20px;
  1215. }
  1216. /* Popup call-back */
  1217. .popup-call-back {
  1218. text-align: center;
  1219. }
  1220. .popup-contact-caption {
  1221. font-size: 14px;
  1222. line-height: 18px;
  1223. color: #828282;
  1224. margin-top: 40px;
  1225. }
  1226. .call-back__info-list--popup {
  1227. display: -webkit-box;
  1228. display: -webkit-flex;
  1229. display: -ms-flexbox;
  1230. display: flex;
  1231. -webkit-box-orient: vertical;
  1232. -webkit-box-direction: normal;
  1233. -webkit-flex-direction: column;
  1234. -ms-flex-direction: column;
  1235. flex-direction: column;
  1236. -webkit-box-align: center;
  1237. -webkit-align-items: center;
  1238. -ms-flex-align: center;
  1239. align-items: center;
  1240. margin-top: 15px;
  1241. }
  1242. /* //Popup call-back */
  1243. /* //Popup */
  1244. /* Footer */
  1245. @media screen and (min-width: 1209px) {
  1246. .footer__link:hover {
  1247. color: #CDB092;
  1248. }
  1249. .footer-policy-link:hover {
  1250. color: #1C1C1C;
  1251. }
  1252. }
  1253. .footer {
  1254. padding: 40px 0px 20px;
  1255. border-top: 1px solid #E0E0E0;
  1256. }
  1257. .footer__top {
  1258. display: -webkit-box;
  1259. display: -webkit-flex;
  1260. display: -ms-flexbox;
  1261. display: flex;
  1262. -webkit-box-pack: justify;
  1263. -webkit-justify-content: space-between;
  1264. -ms-flex-pack: justify;
  1265. justify-content: space-between;
  1266. }
  1267. .footer__list {
  1268. display: -webkit-box;
  1269. display: -webkit-flex;
  1270. display: -ms-flexbox;
  1271. display: flex;
  1272. -webkit-box-align: center;
  1273. -webkit-align-items: center;
  1274. -ms-flex-align: center;
  1275. align-items: center;
  1276. font-weight: 500;
  1277. font-size: 12px;
  1278. line-height: 15px;
  1279. letter-spacing: 0.05em;
  1280. text-transform: uppercase;
  1281. }
  1282. .footer__item {
  1283. margin-right: 30px;
  1284. }
  1285. .footer__item:last-child {
  1286. margin-right: 0px;
  1287. }
  1288. .footer__link {
  1289. -webkit-transition: color 0.4s;
  1290. transition: color 0.4s;
  1291. }
  1292. .call-back__info-list--footer {
  1293. display: -webkit-box;
  1294. display: -webkit-flex;
  1295. display: -ms-flexbox;
  1296. display: flex;
  1297. -webkit-box-align: center;
  1298. -webkit-align-items: center;
  1299. -ms-flex-align: center;
  1300. align-items: center;
  1301. margin-top: 0px;
  1302. }
  1303. .call-back__info-list--footer .call-back__info-item {
  1304. margin-right: 32px;
  1305. margin-bottom: 0px;
  1306. }
  1307. .call-back__info-list--footer .call-back__info-item:last-child {
  1308. margin-right: 0px;
  1309. }
  1310. .footer__down {
  1311. position: relative;
  1312. margin-top: 40px;
  1313. font-size: 11px;
  1314. line-height: 14px;
  1315. color: #828282;
  1316. text-transform: uppercase;
  1317. }
  1318. .footer-policy-link {
  1319. letter-spacing: 0.05em;
  1320. -webkit-transition: color 0.4s;
  1321. transition: color 0.4s;
  1322. }
  1323. .footer-copyright {
  1324. position: absolute;
  1325. left: 50%;
  1326. bottom: 0px;
  1327. -webkit-transform: translateX(-50%);
  1328. transform: translateX(-50%);
  1329. }
  1330. /* Footer */