CSS File

1@charset "UTF-8";

2/*Обнуление*/

3* {

4 padding: 0;

5 margin: 0;

6 border: 0;

7}

8

9*, *:before, *:after {

10

-moz-box-sizing: border-box;

11

-webkit-box-sizing: border-box;

12 box-sizing: border-box;

13}

14

15:focus, :active {

16 outline: none;

17}

18

19a:focus, a:active {

20 outline: none;

21}

22

23nav, footer, header, aside {

24 display: block;

25}

26

27html, body {

28 height: 100%;

29 width: 100%;

30 line-height: 1.15;

31 font-family: 'Mont-ExtraLight';

32 font-size: 1rem;

33

-ms-text-size-adjust: 100%;

34

-moz-text-size-adjust: 100%;

35

-webkit-text-size-adjust: 100%;

36

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

37}

38

39input, button, textarea {

40 font-family: inherit;

41}

42

43input::-ms-clear {

44 display: none;

45}

46

47button {

48 cursor: pointer;

49}

50

51button::-moz-focus-inner {

52 padding: 0;

53 border: 0;

54}

55

56a,

a:visited {

57 text-decoration: none;

58

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

59}

60

61a:hover {

62 text-decoration: none;

63}

64

65ul li {

66 list-style: none;

67}

68

69img {

70 vertical-align: top;

71}

72

73h1, h2, h3, h4, h5, h6 {

74 font-size: inherit;

75 font-weight: 400;

76

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

77}

78

79/*--------------------*/

80.swipe-menu {

81 position: absolute;

82 top: 50%;

83 width: 50px;

84 height: 70px;

85 display: block;

86 left: 0;

87 border-radius: 0px 50% 50% 0px;

88 cursor: pointer;

89}

90

91.swipe-menu:after {

92 content: '';

93 position: absolute;

94 display: block;

95 left: 8%;

96 top: 50%;

97 width: 23px;

98 height: 20px;

99 margin-left: -10px;

100 margin-top: -10px;

101 border: 1px solid #000;

102 border-bottom: none;

103 border-right: none;

104

-webkit-transform: translateX(7px) translateY(0px) rotate(121deg) skewX(-29deg);

105 transform: translateX(7px) translateY(0px) rotate(121deg) skewX(-29deg);

106}

107

108.swipe-menu:before {

109 content: '';

110 position: absolute;

111 display: block;

112 left: 18%;

113 top: 50%;

114 width: 31px;

115 height: 27px;

116 margin-left: -10px;

117 margin-top: -10px;

118 border: 1px solid #000;

119 border-bottom: none;

120 border-right: none;

121

-webkit-transform: translateX(3px) translateY(-3px) rotate(120deg) skewX(-29deg);

122 transform: translateX(3px) translateY(-3px) rotate(120deg) skewX(-29deg);

123}

124

125.menu {

126 width: 50px;

127 height: 50px;

128 position: absolute;

129 z-index: 3;

130 right: 2%;

131 margin-top: 9vh;

132}

133

134@media (max-width: 991.98px) {

135 .menu {

136 margin-top: 12.5px;

137 right: 22.5px;

138 }

139}

140

141.menu span {

142 margin-bottom:

-1.5px 0 9px -15px;

143

-webkit-user-select: none;

144

-moz-user-select: none;

145

-ms-user-select: none;

146 user-select: none;

147 position: absolute;

148 top: 50%;

149 left: 50%;

150}

151

152.menu span, .menu span::before, .menu span::after {

153 display: block;

154 width: 26px;

155 right: 0;

156 height: 2px;

157 background-color: #fff;

158 outline: 1px solid transparent;

159

-webkit-transition-property: background-color, -webkit-transform;

160

-moz-transition-property: background-color, -moz-transform;

161

-o-transition-property: background-color, -o-transform;

162 transition-property: background-color, transform;

163

-webkit-transition-duration: 0.3s;

164

-moz-transition-duration: 0.3s;

165

-o-transition-duration: 0.3s;

166 transition-duration: 0.3s;

167}

168

169.menu span::before, .menu span::after {

170 position: absolute;

171 content: "";

172}

173

174.menu span::before {

175 top: -9px;

176 width: 20px;

177}

178

179.menu span::after {

180 top: 9px;

181 width: 33px;

182}

183

184.menu.clicked span {

185 background-color: transparent;

186}

187

188.menu.clicked span::before {

189

-webkit-transform: translateY(9px) rotate(45deg);

190

-moz-transform: translateY(9px) rotate(45deg);

191

-ms-transform: translateY(9px) rotate(45deg);

192

-o-transform: translateY(9px) rotate(45deg);

193 transform: translateY(9px) rotate(45deg);

194 width: 33px;

195}

196

197.menu.clicked span::after {

198

-webkit-transform: translateY(-9px) rotate(-45deg);

199

-moz-transform: translateY(-9px) rotate(-45deg);

200

-ms-transform: translateY(-9px) rotate(-45deg);

201

-o-transform: translateY(-9px) rotate(-45deg);

202 transform: translateY(-9px) rotate(-45deg);

203}

204

205.menu.clicked span:before, .menu.clicked span:after {

206 background-color: rgba(255, 255, 255, 0);

207}

208

209.menu:hover {

210 cursor: pointer;

211}

212

213.menu.clicked {

214 position: absolute;

215 z-index: 99;

216}

217

218/* NAV

219========================================== */

220#nav {

221 background: rgba(255, 255, 255, 0.7);

222 position: fixed;

223 z-index: 20;

224 top: 0px;

225 right: 0;

226 height: 100vh;

227 max-width: 250px;

228 width: 100%;

229 padding: 9vh 40px 0;

230 overflow-y: auto;

231

-webkit-transform: translateX(100%);

232

-moz-transform: translateX(100%);

233

-ms-transform: translateX(100%);

234

-o-transform: translateX(100%);

235 transform: translateX(100%);

236

-webkit-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);

237

-moz-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);

238

-o-transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);

239 transition: transform 0.55s cubic-bezier(0.785, 0.135, 0.15, 0.86);

240}

241

242@media (max-width: 991.98px) and (orientation: landscape) {

243 #nav {

244 padding: 30px 40px 60px;

245 background: rgba(255, 255, 255, 0.9);

246 height: 100vh;

247 }

248}

249

250@media (max-width: 575.98px) and (orientation: portrait) {

251 #nav {

252 padding: 40px 40px 0;

253 background: rgba(255, 255, 255, 0.9);

254 }

255}

256

257#nav ul {

258 padding-inline-start: 25px;

259 padding-top: 10px;

260}

261

262#nav li {

263 list-style-type: none !important;

264}

265

266#nav h2, #nav p {

267 text-align: center;

268 text-transform: uppercase;

269 color: #000;

270 font-size: 1.22rem;

271}

272

273#nav p {

274 padding-top: 1.1rem;

275}

276

277#nav.show {

278

-webkit-transform: translateX(0px);

279

-moz-transform: translateX(0px);

280

-ms-transform: translateX(0px);

281

-o-transform: translateX(0px);

282 transform: translateX(0px);

283}

284

285#nav.show ul.main li {

286

-webkit-transform: translateX(0px);

287

-moz-transform: translateX(0px);

288

-ms-transform: translateX(0px);

289

-o-transform: translateX(0px);

290 transform: translateX(0px);

291 opacity: 1;

292}

293

294#nav.show ul.main li:nth-child(1) {

295 transition-delay: 0.1s;

296}

297

298#nav.show ul.main li:nth-child(2) {

299 transition-delay: 0.3s;

300}

301

302#nav.show ul.main li:nth-child(3) {

303 transition-delay: 0.5s;

304}

305

306#nav.show ul.main li:nth-child(4) {

307 transition-delay: 0.7s;

308}

309

310#nav.show ul.main li:nth-child(5) {

311 transition-delay: 0.9s;

312}

313

314#nav.show ul.main li:nth-child(6) {

315 transition-delay: 1.1s;

316}

317

318#nav.show ul.main li:nth-child(7) {

319 transition-delay: 1.1s;

320}

321

322#nav.show ul.main li:nth-child(8) {

323 transition-delay: 0.1s;

324}

325

326#nav.show ul.main li:nth-child(9) {

327 transition-delay: 0.3s;

328}

329

330#nav.show ul.main li:nth-child(10) {

331 transition-delay: 0.5s;

332}

333

334#nav.show ul.main li:nth-child(11) {

335 transition-delay: 0.7s;

336}

337

338#nav.show .about, #nav.show .social, #nav.show ul.sub {

339

-webkit-transform: translateY(0px);

340

-moz-transform: translateY(0px);

341

-ms-transform: translateY(0px);

342

-o-transform: translateY(0px);

343 transform: translateY(0px);

344 opacity: 1;

345 transition-delay: .85s;

346}

347

348#nav ul.main {

349 list-style-type: none;

350}

351

352#nav ul.main li {

353

-webkit-transform: translateX(40px);

354

-moz-transform: translateX(40px);

355

-ms-transform: translateX(40px);

356

-o-transform: translateX(40px);

357 transform: translateX(40px);

358 opacity: 0;

359

-webkit-transition: all 0.3s ease;

360

-moz-transition: all 0.3s ease;

361

-o-transition: all 0.3s ease;

362 transition: all 0.3s ease;

363 float: none;

364 list-style: circle;

365 color: #fff;

366}

367

368#nav ul.main li:last-of-type {

369 margin-bottom: 0px;

370}

371

372#nav ul.main li a {

373 color: #000;

374 text-decoration: none;

375 text-transform: none;

376 font-size: 1rem;

377 display: block;

378 padding: 12px 0;

379

-webkit-transition: all 0.3s ease;

380

-moz-transition: all 0.3s ease;

381

-o-transition: all 0.3s ease;

382 transition: all 0.3s ease;

383}

384

385#nav ul.main li a span {

386 color: #b7ac7f;

387}

388

389#nav ul.main li a:hover {

390 color: #696969;

391 margin-left: 7px;

392}

393

394#nav ul.sub {

395 list-style-type: none;

396 margin-top: 40px;

397

-webkit-transform: translateY(30px);

398

-moz-transform: translateY(30px);

399

-ms-transform: translateY(30px);

400

-o-transform: translateY(30px);

401 transform: translateY(30px);

402 opacity: 0;

403

-webkit-transition: all 0.4s ease;

404

-moz-transition: all 0.4s ease;

405

-o-transition: all 0.4s ease;

406 transition: all 0.4s ease;

407}

408

409#nav ul.sub li {

410 margin-bottom: 10px;

411}

412

413#nav ul.sub li:last-of-type {

414 margin-bottom: 0px;

415}

416

417#nav ul.sub li a {

418 color: #ffffff;

419 font-family: "Raleway", sans-serif;

420 letter-spacing: 1px;

421 font-size: 0.9rem;

422 text-decoration: none;

423

-webkit-transition: all 0.3s ease;

424

-moz-transition: all 0.3s ease;

425

-o-transition: all 0.3s ease;

426 transition: all 0.3s ease;

427}

428

429#nav ul.sub li a:hover {

430 color: #b7ac7f;

431}

432

433#nav p {

434 font-family: 'Mont-Heavy';

435}

436

437#nav h2 {

438 font-size: 20px;

439 font-family: 'Mont-Heavy';

440 padding-top: 10px;

441}

442

443#nav .menu-link {

444 font-weight: bold;

445}

446

447/* OVERLAY

448========================================== */

449.overlay {

450 position: fixed;

451 top: 0;

452 left: 0;

453 z-index: 7;

454 width: 100%;

455 height: 100%;

456

-webkit-transition: all 0.3s ease-in-out;

457

-moz-transition: all 0.3s ease-in-out;

458

-o-transition: all 0.3s ease-in-out;

459 transition: all 0.3s ease-in-out;

460 background-color: #603e82;

461 opacity: 0;

462 visibility: hidden;

463}

464

465.overlay .show {

466 opacity: 0.8;

467 visibility: visible;

468}

469

470.b2dh {

471 font-weight: bold;

472 font-size: .95rem;

473 height: 20.8rem;

474 overflow: hidden;

475}

476

477.category {

478 float: left;

479 width: 100%;

480 background-color: #e0e0e0;

481 font-family: 'Gilroy-Light';

482 position: relative;

483 padding: 4rem 0;

484 display: flex;

485 align-items: center;

486}

487

488@media (max-width: 1199.98px) {

489 .category {

490 display: block;

491 padding: 0 0 .5rem;

492 }

493}

494

495.category .myGrid {

496 position: relative;

497 display: grid;

498 min-height: 100vh;

499 grid-template-columns: 60% 40%;

500 grid-template-rows: minmax(min-content, max-content) max-content max-content minmax(min-content, auto);

501 grid-template-areas: "img title" "img desc" "img desc2" "img subtitle";

502 align-items: center;

503}

504

505@media (max-width: 1199.98px) {

506 .category .myGrid {

507 height: auto;

508 align-self: start;

509 grid-template-columns: 100%;

510 grid-template-rows: repeat(5, min-content);

511 grid-template-areas: "title" "desc" "img" "desc2" "subtitle";

512 }

513}

514

515.category .myGrid .gridBox1 {

516 grid-area: img;

517 padding: 0 1.5rem 0 .5rem;

518 position: relative;

519}

520

521@media (max-width: 1199.98px) {

522 .category .myGrid .gridBox1 {

523 padding-right: 0;

524 width: 60%;

525 margin: 0 auto;

526 }

527}

528

529@media (max-width: 575.98px) {

530 .category .myGrid .gridBox1 {

531 width: 100%;

532 padding: 1rem .38rem 1rem .38rem;

533 }

534}

535

536.category .myGrid .gridBox1 #block2Next, .category .myGrid .gridBox1 #block2Prev {

537 top: 0%;

538 position: absolute;

539 width: 20%;

540 height: 100%;

541 cursor: pointer;

542 z-index: 100;

543 outline: none;

544}

545

546.category .myGrid .gridBox1 #block2Next {

547 left: 80%;

548}

549

550.category .myGrid .gridBox1 .swiper-container-2b {

551 position: relative;

552 box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);

553}

554

555@media (max-width: 1199.98px) {

556 .category .myGrid .gridBox1 .swiper-container-2b {

557 box-shadow: 0 0 20px rgba(0, 0, 0, 0);

558 }

559}

560

561.category .myGrid .gridBox1 .swiper-container-2b > .line {

562 left: 6.5% !important;

563 width: 41.75% !important;

564}

565

566.category .myGrid .gridBox1 .swiper-container-2b > .line:nth-child(3) {

567 left: 6.5% !important;

568}

569

570.category .myGrid .gridBox1 .swiper-container-2b > .line:nth-child(4) {

571 left: 51.75% !important;

572 width: 100%;

573}

574

575.category .myGrid .gridBox1 .swiper-container-2b .swiper-slide-active span.line-a2b {

576 left: 6.5% !important;

577 background: white;

578 height: 2px;

579 width: 41.75%;

580 animation: line-act2b 4s linear forwards;

581 position: absolute;

582 top: 3%;

583 padding: 0 !important;

584 margin: 0 !important;

585}

586

587.category .myGrid .gridBox1 .b2-1.swiper-slide-active span.line-a2b:nth-child(2) {

588 left: 6.5% !important;

589}

590

591.category .myGrid .gridBox1 .b2-2.swiper-slide-active span.line-a2b:nth-child(2) {

592 animation: none;

593}

594

595.category .myGrid .gridBox1 .b2-2.swiper-slide-active span.line-a2b:nth-child(3) {

596 left: 51.75% !important;

597}

598

599@keyframes line-act2b {

600 from {

601 width: 0%;

602 }

603 to {

604 width: 41.75% !important;

605 }

606}

607

608.category .myGrid .gridBox1 .line:nth-child(4):after {

609 content: "Arteria";

610 color: #fff;

611 right: 0;

612 position: absolute;

613 font-weight: bold;

614 top: .4rem;

615}

616

617.category .myGrid .gridBox1 img {

618 width: 100%;

619}

620

621.category .myGrid .gridBox2 {

622 grid-area: title;

623 display: grid;

624 padding-top: 2rem;

625}

626

627@media (max-width: 1199.98px) {

628 .category .myGrid .gridBox2 {

629 padding-top: 0;

630 }

631}

632

633.category .myGrid .gridBox2 .category__title {

634 font-size: 2.2rem;

635 line-height: 1;

636 position: relative;

637 font-family: 'Gilroy-ExtraBold';

638 padding-right: 2.6rem;

639 text-align: right;

640}

641

642@media (max-width: 1199.98px) {

643 .category .myGrid .gridBox2 .category__title {

644 padding-top: 2rem;

645 text-align: center;

646 padding-right: 0;

647 }

648}

649

650@media (max-width: 575.98px) {

651 .category .myGrid .gridBox2 .category__title {

652 font-size: 1.5rem;

653 }

654}

655

656.category .myGrid .gridBox3 {

657 grid-area: desc;

658}

659

660.category .myGrid .category__description {

661 padding: .3rem 1.4rem .5rem 0;

662 font-size: .95rem;

663 text-align: center;

664}

665

666@media (max-width: 1199.98px) {

667 .category .myGrid .category__description {

668 padding: .9rem 2.5% .5rem 2.5%;

669 }

670}

671

672.category .myGrid .gridBox4 {

673 grid-area: desc2;

674}

675

676.category .myGrid .gridBox4 .category__description_2 {

677 padding: .6rem 1.4rem .5rem 0;

678 font-size: .95rem;

679 text-align: center;

680}

681

682@media (max-width: 1199.98px) {

683 .category .myGrid .gridBox4 .category__description_2 {

684 padding: .3rem 2.5% .5rem 2.5%;

685 }

686}

687

688.category .myGrid .gridBox5 {

689 grid-area: subtitle;

690}

691

692@media (max-width: 1199.98px) {

693 .category .myGrid .gridBox5 {

694 margin: 0 0 29% 0;

695 padding-top: 1.3rem;

696 margin-bottom: 0;

697 }

698}

699

700.category .myGrid .gridBox5 .category__subtitle, .category .myGrid .gridBox5 .category__subtitle2 {

701 padding-right: 1.4rem;

702 font-size: 1.15rem;

703 line-height: 1.4;

704 letter-spacing: .1rem;

705 font-weight: bold;

706 text-align: center;

707 font-family: Oswald;

708}

709

710@media (min-width: 1199.98px) {

711 .category .myGrid .gridBox5 .category__subtitle .break-mob, .category .myGrid .gridBox5 .category__subtitle2 .break-mob {

712 display: none;

713 }

714}

715

716@media (max-width: 1199.98px) {

717 .category .myGrid .gridBox5 .category__subtitle, .category .myGrid .gridBox5 .category__subtitle2 {

718 padding: 0;

719 text-align: left;

720 }

721}

722

723.category .myGrid .gridBox5 .category__subtitle.plaster {

724 margin: .5rem 0 4.5rem 5vw;

725}

726

727@media (max-width: 1199.98px) {

728 .category .myGrid .gridBox5 .category__subtitle.plaster {

729 line-height: 1.2;

730 margin: 0 2.5% 0 10.5%;

731 }

732}

733

734@media (max-width: 1199.98px) {

735 .category .myGrid .gridBox5 .category__subtitle.plaster .stroke {

736 margin: 0 2.5% 0 -5%;

737 }

738}

739

740.category .myGrid .gridBox5 .category__subtitle.paint {

741 margin-bottom: 4rem;

742}

743

744@media (max-width: 1199.98px) {

745 .category .myGrid .gridBox5 .category__subtitle.paint {

746 margin: 0 2.5% 0 14.5%;

747 }

748}

749

750@media (max-width: 1199.98px) {

751 .category .myGrid .gridBox5 .category__subtitle.paint .stroke {

752 margin: 0 2.5% 0 29%;

753 }

754}

755

756.category .myGrid .gridBox5 .category__subtitle.barelief {

757 margin-bottom: 4rem;

758}

759

760@media (max-width: 1199.98px) {

761 .category .myGrid .gridBox5 .category__subtitle.barelief {

762 margin: 0 2.5% 0 7.5%;

763 }

764}

765

766.category .myGrid .gridBox5 .category__subtitle.barelief .stroke {

767 margin-left: 6vw;

768}

769

770@media (max-width: 1199.98px) {

771 .category .myGrid .gridBox5 .category__subtitle.barelief .stroke {

772 margin: 0 2.5% 0 14%;

773 }

774}

775

776.category .myGrid .gridBox5 .category__subtitle.barelief .break-mob {

777 display: inline;

778}

779

780.category .myGrid .gridBox5 .category__subtitle.design {

781 margin-bottom: 4rem;

782}

783

784@media (max-width: 1199.98px) {

785 .category .myGrid .gridBox5 .category__subtitle.design {

786 margin: 0 2.5% 0 19.5%;

787 }

788}

789

790@media (max-width: 1199.98px) {

791 .category .myGrid .gridBox5 .category__subtitle.design .stroke {

792 margin: 0 2.5% 0 16%;

793 }

794}

795

796.category .myGrid .gridshch {

797 min-width: 0;

798 min-height: 0;

799}

800

801.category .m_inst2bC {

802 width: 35%;

803 position: absolute;

804 bottom: 0;

805 left: 65%;

806 z-index: 2;

807 font-family: Mont-ExtraLight;

808 font-size: 18px;

809}

810

811@media (max-width: 1199.98px) {

812 .category .m_inst2bC {

813 position: relative;

814 padding-top: 4rem;

815 left: 0;

816 width: 100%;

817 }

818}

819

820.category .m_inst2b {

821 width: 100%;

822 position: absolute;

823 bottom: 2.3%;

824 z-index: 2;

825 font-family: Mont-ExtraLight;

826 font-size: 18px;

827}

828

829.category .btn_i2b {

830 position: relative;

831 left: 0;

832 text-align: center;

833 cursor: pointer;

834 z-index: 2;

835}

836

837.category .m_inst2bC > .m_trigger::after, .category .m_inst2b > .m_trigger::after {

838 content: '';

839 position: absolute;

840 left: 50%;

841 top: -50%;

842 width: 12px;

843 height: 12px;

844 margin-left: -10px;

845 margin-top: -10px;

846 border: 2px solid #000;

847 border-bottom: none;

848 border-right: none;

849

-webkit-transform: translateX(5px) rotate(45deg);

850 transform: translateX(5px) rotate(45deg);

851 animation: btn2bС 5s linear infinite;

852}

853

854.category .m_inst2bC > .btn_i2b::before, .category .m_inst2b > .btn_i2b::before {

855 content: '';

856 position: absolute;

857 left: 50%;

858 top: -50%;

859 width: 28px;

860 height: 28px;

861 margin-top: -20px;

862 background: rgba(255, 255, 255, 0.6);

863 border-radius: 50%;

864

-webkit-transform: translateX(-13px);

865 transform: translateX(-13px);

866 opacity: 1;

867 animation: btn2bС 5s linear infinite;

868}

869

870.category .m_inst2b:hover .m_trigger::after, .category .m_inst2b:hover .btn_i2b::before {

871 top: -90%;

872 transition: .5s;

873 animation: none;

874}

875

876@keyframes btn2bС {

877 15% {

878 top: -90%;

879 }

880 18% {

881 top: -50%;

882 }

883 30% {

884 top: -120%;

885 }

886 33% {

887 top: -50%;

888 }

889 45% {

890 top: -150%;

891 }

892 50% {

893 top: -50%;

894 }

895}

896

897.static-page__title {

898 font-family: 'Gilroy-ExtraBold';

899 margin: 0 0 1.5rem;

900 font-size: 2.2rem;

901 text-align: center;

902}

903

904@media (max-width: 575.98px) {

905 .static-page__title {

906 font-size: 1.5rem;

907 }

908}

909

910.couch-main {

911 float: left;

912 min-height: 100vh;

913 width: 100%;

914 background-color: #e0e0e0;

915 font-family: 'Gilroy-Light';

916 position: relative;

917}

918

919.couch-main .couch-main__body {

920 margin: 0 auto;

921 padding: 2rem 0;

922 width: 80%;

923}

924

925@media (max-width: 575.98px) {

926 .couch-main .couch-main__body {

927 width: 95%;

928 padding: 3.5rem 0;

929 }

930}

931

932.couch-main .static-page__title {

933 font-size: 2.2rem;

934}

935

936@media (max-width: 575.98px) {

937 .couch-main .static-page__title {

938 font-size: 1.5rem;

939 }

940}

941

942.couch-main__text {

943 padding: .6rem 0 .5rem;

944 line-height: 1.5;

945}

946

947@media (max-width: 575.98px) {

948 .couch-main__text {

949 text-align: center;

950 line-height: 1.3;

951 }

952}

953

954.couch-main ul {

955 padding: 1.5rem 0 1.5rem 3rem;

956}

957

958.couch-main li {

959 padding-top: 1rem;

960 list-style-type: disc;

961}

962

963.couch-main li a {

964 font-size: 1.25rem;

965 color: #000;

966}

967

968.couch-main__content {

969 width: 100%;

970 display: flex;

971 flex-wrap: wrap;

972 flex-direction: row;

973 margin: 3rem 0;

974}

975

976.couch-main .category-item {

977 margin: .75rem 1%;

978 flex: 0 1 23.34%;

979 height: 200px;

980 position: relative;

981 overflow: hidden;

982 background-color: #f4f0f0;

983 border-radius: 5px;

984}

985

986@media (max-width: 1500.98px) {

987 .couch-main .category-item {

988 flex: 0 1 48%;

989 height: 301px;

990 }

991}

992

993@media (max-width: 991.98px) {

994 .couch-main .category-item {

995 height: 200px;

996 }

997}

998

999@media (max-width: 575.98px) {

1000 .couch-main .category-item {

1001 flex: 0 1 100%;

1002 height: 240px;

1003 }

1004}

1005

1006@media (min-width: 1500.98px) {

1007 .couch-main .category-item:first-child {

1008 margin-left: 0;

1009 }

1010}

1011

1012@media (min-width: 1500.98px) {

1013 .couch-main .category-item:last-child {

1014 margin-right: 0;

1015 }

1016}

1017

1018.couch-main .category-item:hover {

1019 box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

1020}

1021

1022.couch-main .category-item__img {

1023 overflow: hidden;

1024 width: 100%;

1025 height: 75%;

1026 position: relative;

1027}

1028

1029@media (max-width: 991.98px) {

1030 .couch-main .category-item__img {

1031 height: 65%;

1032 }

1033}

1034

1035@media (max-width: 575.98px) {

1036 .couch-main .category-item__img {

1037 height: 75%;

1038 }

1039}

1040

1041.couch-main .category-item__img img {

1042 width: 100%;

1043 height: auto;

1044 background-size: cover;

1045 position: absolute;

1046 bottom: -15%;

1047}

1048

1049@media (max-width: 575.98px) {

1050 .couch-main .category-item__img img {

1051 height: auto;

1052 width: 100%;

1053 position: absolute;

1054 }

1055}

1056

1057.couch-main .category-item__body {

1058 color: #000;

1059 padding: 0 1rem;

1060 overflow: hidden;

1061 height: 25%;

1062 display: flex;

1063 align-items: center;

1064 position: relative;

1065 bottom: 0;

1066 left: 0;

1067 background-color: white;

1068 width: 100%;

1069}

1070

1071@media (max-width: 991.98px) {

1072 .couch-main .category-item__body {

1073 height: 35%;

1074 }

1075}

1076

1077@media (max-width: 575.98px) {

1078 .couch-main .category-item__body {

1079 height: 25%;

1080 }

1081}

1082

1083.couch-main .category-item__body a {

1084 flex: 0 1 100%;

1085}

1086

1087.couch-main .category-item__title {

1088 font-size: 1.2rem;

1089 text-align: center;

1090 font-family: 'Gilroy-ExtraBold';

1091 padding: .5rem 0 1rem 0;

1092 color: #000;

1093}

1094

1095@media (max-width: 1600.98px) {

1096 .couch-main .category-item__title {

1097 font-size: 1.1rem;

1098 }

1099}

1100

1101.couch-category {

1102 float: left;

1103 min-height: 100vh;

1104 width: 100%;

1105 background-color: #e0e0e0;

1106 font-family: 'Gilroy-Light';

1107 position: relative;

1108}

1109

1110.couch-category__body {

1111 margin: 0 auto;

1112 padding: 2rem 0;

1113 width: 80%;

1114}

1115

1116@media (max-width: 575.98px) {

1117 .couch-category__body {

1118 width: 96%;

1119 padding: 3.5rem 0;

1120 }

1121}

1122

1123.couch-category__text {

1124 padding: .6rem 0 .5rem;

1125}

1126

1127@media (max-width: 575.98px) {

1128 .couch-category__text {

1129 text-align: center;

1130 }

1131}

1132

1133.couch-category__subtitle {

1134 font-family: 'Gilroy-ExtraBold';

1135 padding-top: 2rem;

1136 font-size: 1.2rem;

1137}

1138

1139@media (max-width: 575.98px) {

1140 .couch-category__subtitle {

1141 text-align: center;

1142 }

1143}

1144

1145.couch-category__subtitle.secondary {

1146 padding-left: 2rem;

1147 font-size: 17px;

1148 text-align: left;

1149}

1150

1151.couch-category ul {

1152 padding: 1rem 0 1rem 3rem;

1153}

1154

1155.couch-category li {

1156 padding-top: .7rem;

1157 list-style-type: disc;

1158}

1159

1160.couch-category p {

1161 line-height: 1.3;

1162}

1163

1164.couch-category__content {

1165 width: 102%;

1166 display: flex;

1167 flex-wrap: wrap;

1168 flex-direction: row;

1169 margin: 2rem 0;

1170}

1171

1172@media (max-width: 1500.98px) {

1173 .couch-category__content {

1174 width: 100%;

1175 }

1176}

1177

1178.couch-category .category-item {

1179 margin: .75rem 1%;

1180 flex: 0 1 31.2%;

1181 height: 320px;

1182 position: relative;

1183 overflow: hidden;

1184 background-color: #f4f0f0;

1185 border-radius: 5px;

1186 left: -1%;

1187}

1188

1189@media (max-width: 1500.98px) {

1190 .couch-category .category-item {

1191 flex: 0 1 48%;

1192 }

1193}

1194

1195@media (max-width: 575.98px) {

1196 .couch-category .category-item {

1197 flex: 0 1 100%;

1198 left: 0;

1199 }

1200}

1201

1202.couch-category .category-item:hover {

1203 box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

1204}

1205

1206.couch-category .category-item__img {

1207 overflow: hidden;

1208 width: 100%;

1209 height: 60%;

1210}

1211

1212.couch-category .category-item__img img {

1213 width: 100%;

1214 height: auto;

1215 background-size: cover;

1216}

1217

1218.couch-category .category-item__body {

1219 color: #000;

1220 padding: 0 1rem;

1221 overflow: hidden;

1222 height: 40%;

1223 position: relative;

1224}

1225

1226.couch-category .category-item__body a {

1227 min-height: 40%;

1228}

1229

1230.couch-category .category-item__title {

1231 text-align: center;

1232 font-family: 'Gilroy-ExtraBold';

1233 padding-top: .5rem;

1234 color: #000;

1235 letter-spacing: .05rem;

1236}

1237

1238.couch-category .category-item__text {

1239 height: 43%;

1240 overflow: hidden;

1241 position: relative;

1242 font-size: .8rem;

1243 padding-top: .5rem;

1244}

1245

1246.couch-category .category-item__feed-back {

1247 display: flex;

1248 flex-wrap: wrap;

1249 flex-direction: row;

1250 width: 100%;

1251 height: 25%;

1252 padding-top: .5rem;

1253 position: absolute;

1254 bottom: 0;

1255}

1256

1257.couch-category .category-item__comment {

1258 flex: 0 0 20%;

1259}

1260

1261.couch-category .category-item__comment .fa-comment-alt {

1262 color: #007aff;

1263}

1264

1265.couch-category .category-item__like {

1266 flex: 0 0 20%;

1267}

1268

1269.couch-category .category-item__like .fa-thumbs-up {

1270 color: #dc8713;

1271 cursor: pointer;

1272}

1273

1274.couch-pattern {

1275 float: left;

1276 font-family: 'Gilroy-Light';

1277 padding: 4rem 3rem;

1278 position: relative;

1279 color: #fff;

1280 text-align: center;

1281}

1282

1283@media (max-width: 575.98px) {

1284 .couch-pattern {

1285 padding: 3rem 0;

1286 }

1287}

1288

1289.couch-pattern__body {

1290 display: flex;

1291 flex-direction: row;

1292 flex-wrap: wrap;

1293 justify-content: center;

1294}

1295

1296.couch-pattern__body h1 {

1297 font-size: 1.5rem;

1298 font-weight: bold;

1299 flex: 0 0 100%;

1300 padding-bottom: 1.5rem;

1301}

1302

1303.couch-pattern .couch-pattern__img-block {

1304 flex: 0 0 25%;

1305 max-width: 25%;

1306}

1307

1308@media (max-width: 991.98px) {

1309 .couch-pattern .couch-pattern__img-block {

1310 display: none;

1311 }

1312}

1313

1314.couch-pattern .couch-pattern__img-block img {

1315 width: 80%;

1316 margin: 0 auto;

1317}

1318

1319.couch-pattern .couch-pattern__img-block .couch-pattern__img-text {

1320 padding-top: 1rem;

1321}

1322

1323.couch-pattern__img {

1324 width: 100%;

1325 overflow: hidden;

1326}

1327

1328@media (max-width: 991.98px) {

1329 .couch-pattern__img {

1330 height: 80%;

1331 width: 50%;

1332 margin: 1rem auto;

1333 box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);

1334 }

1335}

1336

1337@media (max-width: 575.98px) {

1338 .couch-pattern__img {

1339 width: 100%;

1340 margin: 1rem auto;

1341 }

1342}

1343

1344@media (min-width: 992px) {

1345 .couch-pattern__img img {

1346 width: 100%;

1347 }

1348}

1349

1350.couch-pattern__img-text {

1351 font-size: .8rem;

1352 font-weight: bold;

1353}

1354

1355@media (max-width: 991.98px) {

1356 .couch-pattern__img-text {

1357 padding-top: .5rem;

1358 height: 20%;

1359 }

1360}

1361

1362.couch-pattern__list {

1363 list-style-type: none;

1364 text-align: left;

1365 flex: 0 0 75%;

1366 max-width: 75%;

1367 padding: 2.5rem 1.5rem 0;

1368}

1369

1370@media (max-width: 991.98px) {

1371 .couch-pattern__list {

1372 flex: 0 0 100%;

1373 max-width: 100%;

1374 padding: 0 1.5rem 0;

1375 padding: 1rem 1.5rem 0;

1376 }

1377}

1378

1379.couch-pattern__list li {

1380 margin-left: 1rem;

1381 position: relative;

1382 padding-bottom: .5rem;

1383}

1384

1385@media (max-width: 575.98px) {

1386 .couch-pattern__list li {

1387 margin-left: 0;

1388 padding-bottom: 1rem;

1389 }

1390}

1391

1392.couch-pattern__list .couch-pattern__desc {

1393 font-size: 1.2rem;

1394}

1395

1396@media (max-width: 575.98px) {

1397 .couch-pattern__list .couch-pattern__desc {

1398 font-size: 1rem;

1399 }

1400}

1401

1402.couch-pattern .couch__slider {

1403 flex: 0 0 80%;

1404 max-width: 80%;

1405 margin: 0 auto;

1406 height: 100vh;

1407}

1408

1409@media (min-width: 992px) {

1410 .couch-pattern .couch__slider {

1411 display: none;

1412 }

1413}

1414

1415@media (max-width: 575px) {

1416 .couch-pattern .couch__slider {

1417 height: 50vh;

1418 }

1419}

1420

1421.couch-pattern .couch__slider .couch-container {

1422 width: 100%;

1423 height: 100%;

1424}

1425

1426.couch-pattern .couch__slider .swiper-slide {

1427 text-align: center;

1428 font-size: 18px;

1429 /* Center slide text vertically */

1430 display: -webkit-box;

1431 display: -ms-flexbox;

1432 display: -webkit-flex;

1433 display: flex;

1434

-webkit-box-pack: center;

1435

-ms-flex-pack: center;

1436

-webkit-justify-content: center;

1437 justify-content: center;

1438

-webkit-box-align: center;

1439

-ms-flex-align: center;

1440

-webkit-align-items: center;

1441 align-items: center;

1442}

1443

1444.couch-pattern .couch__slider .couch__slide {

1445 width: 100%;

1446 height: 100%;

1447}

1448

1449body {

1450 width: 95vw;

1451 float: right;

1452}

1453

1454@media (max-width: 991px) {

1455 body {

1456 width: 100%;

1457 }

1458}

1459

1460.d-none {

1461 display: none !important;

1462}

1463

1464.d-block {

1465 display: block !important;

1466}

1467

1468@media (min-width: 575px) {

1469 .d-sm-block {

1470 display: block !important;

1471 }

1472

1473 .d-sm-none {

1474 display: none !important;

1475 }

1476}

1477

1478@media (min-width: 1200px) {

1479 .vision_max1200 {

1480 display: none;

1481 }

1482}

1483

1484@media (max-width: 1200px) {

1485 .vision_min1200 {

1486 display: none;

1487 }

1488}

1489

1490.btn_feed-back {

1491 color: #fff;

1492 cursor: pointer;

1493 line-height: 0;

1494}

1495

1496.btn_feed-back a:hover {

1497 color: #999;

1498 border-bottom: 1px solid #999;

1499 cursor: pointer;

1500}

1501

1502.art {

1503 position: absolute;

1504 top: 4%;

1505 float: right;

1506 right: 7%;

1507 z-index: 99999;

1508 color: #fff;

1509 font-size: .95rem;

1510 font-weight: bold;

1511}

1512

1513.m_inst {

1514 position: absolute;

1515 bottom: 1%;

1516 width: 100%;

1517 z-index: 101;

1518 text-align: center;

1519 font-size: 18px;

1520 font-family: Mont-ExtraLight;

1521}

1522

1523@media (max-width: 575.98px) and (orientation: portrait) {

1524 .m_inst {

1525 bottom: 5%;

1526 }

1527}

1528

1529.m_inst > .m_trigger::after {

1530 content: '';

1531 position: absolute;

1532 left: 50%;

1533 top: -90%;

1534 width: 12px;

1535 height: 12px;

1536 margin-left: -10px;

1537 margin-top: -10px;

1538 border: 2px solid #000;

1539 border-bottom: none;

1540 border-right: none;

1541

-webkit-transform: translateX(5px) rotate(45deg);

1542 transform: translateX(5px) rotate(45deg);

1543 animation: btn2b 5s linear infinite;

1544}

1545

1546.m_inst > .btn_i::before {

1547 content: '';

1548 position: absolute;

1549 left: 50%;

1550 top: -90%;

1551 width: 28px;

1552 height: 28px;

1553 margin-top: -20px;

1554 background: rgba(255, 255, 255, 0.6);

1555 border-radius: 50%;

1556

-webkit-transform: translateX(-13px);

1557 transform: translateX(-13px);

1558 opacity: 1;

1559 animation: btn2b 5s linear infinite;

1560}

1561

1562.m_inst:hover .m_trigger::after, .m_inst:hover .btn_i::before {

1563 top: -90%;

1564 transition: .5s;

1565 animation: none;

1566}

1567

1568@keyframes btn2b {

1569 15% {

1570 top: -130%;

1571 }

1572 18% {

1573 top: -90%;

1574 }

1575 30% {

1576 top: -160%;

1577 }

1578 33% {

1579 top: -90%;

1580 }

1581 45% {

1582 top: -190%;

1583 }

1584 50% {

1585 top: -90%;

1586 }

1587}

1588

1589.btn_i {

1590 cursor: pointer;

1591 color: #fff;

1592}

1593

1594.ss_btnNext, .ss_btnPrev {

1595 position: absolute;

1596 top: 0%;

1597 right: 0%;

1598 float: right;

1599 width: 20%;

1600 height: 100%;

1601 z-index: 200;

1602 cursor: pointer;

1603 outline: none;

1604}

1605

1606.ss_btnPrev {

1607 right: auto;

1608}

1609

1610.static-sprite {

1611 background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(/img/sprite.jpg);

1612 display: inline-block;

1613 background-size: 100% 500%;

1614}

1615

1616@media (max-width: 1198.98px) and (orientation: portrait) {

1617 .static-sprite {

1618 background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(/img/sprite_plansh.jpg);

1619 background-size: 500% 100%;

1620 }

1621}

1622

1623.static-sprite.plastSlideHome {

1624 background-position: 0 100%;

1625 height: 100vh;

1626}

1627

1628@media (max-width: 991.98px) and (orientation: portrait) {

1629 .static-sprite.plastSlideHome {

1630 background-position: 100% 0;

1631 }

1632}

1633

1634.static-sprite.barSlideHome {

1635 background-position: 0 400%;

1636 height: 100vh;

1637}

1638

1639@media (max-width: 991.98px) and (orientation: portrait) {

1640 .static-sprite.barSlideHome {

1641 background-position: 400% 0;

1642 }

1643}

1644

1645.static-sprite.desSlideHome {

1646 background-position: 0 300%;

1647 height: 100vh;

1648}

1649

1650@media (max-width: 991.98px) and (orientation: portrait) {

1651 .static-sprite.desSlideHome {

1652 background-position: 300% 0;

1653 }

1654}

1655

1656.static-sprite.paintSlideHome {

1657 background-position: 0 200%;

1658 height: 100vh;

1659}

1660

1661@media (max-width: 991.98px) and (orientation: portrait) {

1662 .static-sprite.paintSlideHome {

1663 background-position: 200% 0%;

1664 }

1665}

1666

1667header#start-bar {

1668 background-image: url("/img/barelief/barelief.jpg");

1669}

1670

1671header#start-des {

1672 background-image: url("/img/design/design.jpg");

1673}

1674

1675header#start-paint {

1676 background-image: url("/img/painting/painting.jpg");

1677}

1678

1679header#start-plast {

1680 background-image: url("/img/plaster/plaster.jpg");

1681 background-size: cover;

1682}

1683

1684@media (max-width: 991.98px) and (orientation: portrait) {

1685 header#start-plast {

1686 background-image: url("/img/plaster/plaster_mob.jpg");

1687 }

1688}

1689

1690header#start-plast .header__title {

1691 font-size: 82px;

1692 letter-spacing: .3rem;

1693}

1694

1695@media (max-width: 991.98px) and (orientation: landscape) {

1696 header#start-plast .header__title {

1697 font-size: 4rem;

1698 }

1699}

1700

1701header#start-plast .header__title:nth-child(2) {

1702 padding: .8rem 0;

1703}

1704

1705@media (max-width: 991.98px) and (orientation: landscape) {

1706 header#start-plast .header__title:nth-child(2) {

1707 padding: 0 0 .2rem 0;

1708 }

1709}

1710

1711@media (max-width: 575.98px) and (orientation: portrait) {

1712 header#start-plast .header__title:nth-child(2) {

1713 padding: 0 0 .6rem 0;

1714 }

1715}

1716

1717@media (max-width: 575.98px) and (orientation: portrait) {

1718 header#start-plast .header__title {

1719 font-size: 2.2rem;

1720 letter-spacing: .3rem;

1721 text-transform: none;

1722 font-weight: bold;

1723 }

1724}

1725

1726header#start-plast .header__sub-title {

1727 font-size: 24px;

1728 text-align: center;

1729 margin-top: 3vh;

1730 letter-spacing: .5rem;

1731 word-spacing: 1rem;

1732 font-weight: 100;

1733 position: relative;

1734}

1735

1736@media (max-width: 991.98px) and (orientation: landscape) {

1737 header#start-plast .header__sub-title {

1738 font-size: 1.25rem;

1739 }

1740}

1741

1742@media (max-width: 575.98px) and (orientation: portrait) {

1743 header#start-plast .header__sub-title {

1744 font-size: 21px;

1745 letter-spacing: .02rem;

1746 line-height: 1;

1747 word-spacing: .3rem;

1748 }

1749}

1750

1751header#start-plast .header__slider {

1752 top: 60%;

1753}

1754

1755@media (max-width: 575.98px) and (orientation: portrait) {

1756 header#start-plast .header__slider {

1757 top: 60%;

1758 }

1759}

1760

1761header#start-bar, header#start-des, header#start-paint {

1762 background-size: cover;

1763}

1764

1765header#start-bar .header__sub-title, header#start-des .header__sub-title, header#start-paint .header__sub-title {

1766 font-size: 27px;

1767 line-height: 1;

1768 text-align: center;

1769 margin-top: 9vh;

1770 letter-spacing: .7rem;

1771 word-spacing: 2rem;

1772 font-weight: 100;

1773 position: relative;

1774}

1775

1776@media (max-width: 991.98px) and (orientation: landscape) {

1777 header#start-bar .header__sub-title, header#start-des .header__sub-title, header#start-paint .header__sub-title {

1778 font-size: 24px;

1779 line-height: 1.5;

1780 }

1781}

1782

1783@media (max-width: 575.98px) and (orientation: portrait) {

1784 header#start-bar .header__sub-title, header#start-des .header__sub-title, header#start-paint .header__sub-title {

1785 font-size: 23px;

1786 margin-top: 5.5vh;

1787 letter-spacing: .02rem;

1788 line-height: 1;

1789 word-spacing: .3rem;

1790 }

1791}

1792

1793header {

1794 width: 100%;

1795 margin-top: 8vh;

1796 height: 92vh;

1797 float: right;

1798 display: block;

1799 position: relative;

1800 font-family: 'Gilroy-Light';

1801 z-index: 1;

1802 overflow: hidden;

1803}

1804

1805@media (max-width: 991.98px) {

1806 header {

1807 margin-top: 0;

1808 }

1809}

1810

1811@media (max-width: 991.98px) and (orientation: landscape) {

1812 header {

1813 height: 130vh;

1814 }

1815}

1816

1817@media (max-width: 991.98px) and (orientation: portrait) {

1818 header {

1819 height: 100vh;

1820 }

1821}

1822

1823header:after {

1824 content: '';

1825 width: 100%;

1826 height: 92vh;

1827 position: absolute;

1828 background: rgba(0, 0, 0, 0.3);

1829 z-index: 2;

1830}

1831

1832@media (max-width: 1199.98px) and (orientation: portrait) {

1833 header:after {

1834 height: 100vh;

1835 }

1836}

1837

1838@media (max-width: 1199.98px) and (orientation: landscape) {

1839 header:after {

1840 height: 94vh;

1841 }

1842}

1843

1844@media (max-width: 991.98px) and (orientation: landscape) {

1845 header:after {

1846 height: 130vh;

1847 }

1848}

1849

1850@media (max-width: 575.98px) and (orientation: portrait) {

1851 header:after {

1852 height: 100vh;

1853 }

1854}

1855

1856header.static-sprite {

1857 height: 92vh;

1858 background-position: 0 0;

1859 background-size: 100% 500%;

1860}

1861

1862@media (max-width: 1199.98px) and (orientation: portrait) {

1863 header.static-sprite {

1864 height: 100vh;

1865 background-size: 500% 100%;

1866 }

1867}

1868

1869@media (max-width: 1199.98px) and (orientation: landscape) {

1870 header.static-sprite {

1871 height: 94vh;

1872 }

1873}

1874

1875@media (max-width: 991.98px) and (orientation: landscape) {

1876 header.static-sprite {

1877 height: 130vh;

1878 }

1879}

1880

1881@media (max-width: 1198.98px) and (orientation: portrait) {

1882 header.static-sprite:after {

1883 background: rgba(0, 0, 0, 0);

1884 content: '';

1885 width: 100%;

1886 height: 92vh;

1887 position: absolute;

1888 z-index: 2;

1889 }

1890}

1891

1892@media (max-width: 1198.98px) and (orientation: portrait) {

1893 header.static-sprite:after {

1894 height: 100vh;

1895 }

1896}

1897

1898@media (max-width: 991.98px) and (orientation: landscape) {

1899 header.static-sprite:after {

1900 height: 130vh;

1901 }

1902}

1903

1904header.static-sprite .header__title {

1905 font-size: 120px !important;

1906}

1907

1908@media (max-width: 991.98px) and (orientation: landscape) {

1909 header.static-sprite .header__title {

1910 font-size: 87px !important;

1911 }

1912}

1913

1914@media (max-width: 575.98px) and (orientation: portrait) {

1915 header.static-sprite .header__title {

1916 font-size: 3.2rem !important;

1917 }

1918}

1919

1920@media (max-width: 991.98px) and (orientation: landscape) {

1921 header.static-sprite .header__sub-title {

1922 font-size: .8rem !important;

1923 }

1924}

1925

1926header .header__head {

1927 position: absolute;

1928 top: 9vh;

1929 width: 100%;

1930 color: #fff;

1931 z-index: 3;

1932 text-align: center;

1933}

1934

1935@media (max-width: 991.98px) and (orientation: landscape) {

1936 header .header__head {

1937 top: 17vh;

1938 }

1939}

1940

1941@media (max-width: 575.98px) and (orientation: portrait) {

1942 header .header__head {

1943 top: 12vh;

1944 }

1945}

1946

1947header .header__head .header__title {

1948 font-size: 96px;

1949 font-weight: bold;

1950 line-height: 0.7;

1951 letter-spacing: 1.75rem;

1952 position: relative;

1953 text-decoration: none;

1954 color: #fff;

1955 margin: 0;

1956}

1957

1958@media (max-width: 991.98px) and (orientation: landscape) {

1959 header .header__head .header__title {

1960 font-size: 87px;

1961 }

1962}

1963

1964@media (max-width: 575.98px) and (orientation: portrait) {

1965 header .header__head .header__title {

1966 font-size: 3.2rem;

1967 letter-spacing: .45rem;

1968 line-height: 1;

1969 font-weight: normal;

1970 }

1971}

1972

1973header .header__head .header__sub-title {

1974 letter-spacing: .7rem;

1975 line-height: 3;

1976 font-size: 1.8rem;

1977 margin-right: 2%;

1978 color: #fff;

1979}

1980

1981@media (max-width: 575.98px) and (orientation: portrait) {

1982 header .header__head .header__sub-title {

1983 font-size: 1rem;

1984 letter-spacing: .05rem;

1985 line-height: 1;

1986 padding-top: 2vh;

1987 word-spacing: .3rem;

1988 }

1989}

1990

1991header .header__head .header__block-sub-title-2 {

1992 margin-top: 2vh;

1993 position: relative;

1994}

1995

1996header .header__head .header__block-sub-title-2 .header__sub-title-2 {

1997 font-size: 21px;

1998 letter-spacing: .13rem;

1999}

2000

2001header .header__slider {

2002 top: 60%;

2003 position: absolute;

2004 width: 100%;

2005 color: #fff;

2006 z-index: 3;

2007}

2008

2009@media (min-width: 576px) {

2010 header .header__slider {

2011 top: 55%;

2012 }

2013}

2014

2015header .header__slider .header-block {

2016 text-align: center;

2017}

2018

2019header .header__slider .header-block .header__slider-title, header .header__slider .header-block .header__slider-subtitle {

2020 width: 100%;

2021 position: absolute;

2022 right: -100%;

2023}

2024

2025header .header__slider .header-block .header__slider-title {

2026 font-size: 24px;

2027 top: -2rem;

2028 right: auto;

2029 left: -100%;

2030}

2031

2032header .header__slider .header-block.active .header__slider-title {

2033 animation: headerSliderTit 3.5s linear forwards;

2034}

2035

2036header .header__slider .header-block.active .header__slider-subtitle {

2037 animation: headerSliderSub 3.5s linear forwards;

2038}

2039

2040@keyframes headerSliderTit {

2041 10% {

2042 left: -6%;

2043 }

2044 57.1% {

2045 left: 0;

2046 color: #fff;

2047 color: #fff;

2048 }

2049 67.1% {

2050 left: 100%;

2051 color: rgba(0, 0, 0, 0);

2052 }

2053 75% {

2054 color: rgba(0, 0, 0, 0);

2055 }

2056 95% {

2057 color: rgba(0, 0, 0, 0);

2058 }

2059}

2060

2061@keyframes headerSliderSub {

2062 10% {

2063 right: -6%;

2064 }

2065 57.1% {

2066 right: 0;

2067 color: #fff;

2068 }

2069 67.1% {

2070 right: 100%;

2071 color: rgba(0, 0, 0, 0);

2072 }

2073 75% {

2074 color: rgba(0, 0, 0, 0);

2075 }

2076 95% {

2077 color: rgba(0, 0, 0, 0);

2078 }

2079}

2080

2081header .header__feed-back {

2082 position: absolute;

2083 top: 80vh;

2084 width: 100%;

2085 left: 0;

2086 color: #fff;

2087 z-index: 3;

2088 text-align: center;

2089 letter-spacing: .2rem;

2090 font-size: 18px;

2091}

2092

2093header .header__feed-back a:hover {

2094 color: #999;

2095 border-bottom: 1px solid #999;

2096 cursor: pointer;

2097}

2098

2099@media (max-width: 991.98px) and (orientation: landscape) {

2100 header .header__feed-back {

2101 top: 110vh;

2102 }

2103}

2104

2105.line {

2106 background: rgba(255, 255, 255, 0.4);

2107 left: 0;

2108 height: 2px;

2109 position: absolute;

2110 top: 3%;

2111 width: 20%;

2112 content: '';

2113 z-index: 999;

2114}

2115

2116.line:nth-child(1) {

2117 left: 6.5%;

2118}

2119

2120.line:nth-child(2) {

2121 left: 29%;

2122}

2123

2124.line:nth-child(3) {

2125 left: 51.5%;

2126}

2127

2128.line:nth-child(4) {

2129 left: 74%;

2130}

2131

2132.swiper-slide-active .line-a {

2133 background: white;

2134 position: absolute;

2135 top: 3%;

2136 width: 20%;

2137 height: 2px;

2138

-webkit-animation: line-act 6s linear forwards;

2139

-o-animation: line-act 6s linear forwards;

2140

-moz-animation: line-act 6s linear forwards;

2141 animation: line-act 6s linear forwards;

2142}

2143

2144.plastSlideHome.swiper-slide-active .line-a:nth-child(2) {

2145 left: 6.5%;

2146}

2147

2148.barSlideHome.swiper-slide-active .line-a:nth-child(2), .desSlideHome.swiper-slide-active .line-a:nth-child(2), .paintSlideHome.swiper-slide-active .line-a:nth-child(2) {

2149 left: 6.5%;

2150 animation: none;

2151}

2152

2153.barSlideHome.swiper-slide-active .line-a:nth-child(3) {

2154 left: 29%;

2155}

2156

2157.desSlideHome.swiper-slide-active .line-a:nth-child(3), .paintSlideHome.swiper-slide-active .line-a:nth-child(3) {

2158 left: 29%;

2159 animation: none;

2160}

2161

2162.desSlideHome.swiper-slide-active .line-a:nth-child(4) {

2163 left: 51.5%;

2164}

2165

2166.paintSlideHome.swiper-slide-active .line-a:nth-child(4) {

2167 left: 51.5%;

2168 animation: none;

2169}

2170

2171.paintSlideHome.swiper-slide-active .line-a:nth-child(5) {

2172 left: 74%;

2173}

2174

2175@keyframes line-act {

2176 from {

2177 width: 0%;

2178 }

2179 to {

2180 width: 20%;

2181 }

2182}

2183

2184.home-slider {

2185 width: 100%;

2186 float: right;

2187 background-color: #EBEBEB;

2188 position: relative;

2189 font-family: 'Gilroy-Light';

2190}

2191

2192@media (max-width: 575.98px) and (orientation: portrait) {

2193 .home-slider .plastSlideHome .home-slider__subtitle {

2194 margin-top: 17.5vw;

2195 }

2196}

2197

2198.home-slider .home-slider__body {

2199 width: 850px;

2200 height: 350px;

2201 margin: 10% auto 0;

2202 text-align: center;

2203}

2204

2205@media (max-width: 1199.98px) and (orientation: landscape) {

2206 .home-slider .home-slider__body {

2207 width: 80%;

2208 }

2209}

2210

2211@media (max-width: 1199.98px) and (orientation: portrait) {

2212 .home-slider .home-slider__body {

2213 margin-top: 18%;

2214 width: 92%;

2215 height: 450px;

2216 }

2217}

2218

2219@media (max-width: 575.98px) and (max-height: 550px) and (orientation: portrait) {

2220 .home-slider .home-slider__body {

2221 width: 92%;

2222 height: 65vh;

2223 }

2224}

2225

2226.home-slider .home-slider__body .a1, .home-slider .home-slider__body .a2, .home-slider .home-slider__body .a3, .home-slider .home-slider__body .a4 {

2227 position: relative;

2228 height: 100%;

2229}

2230

2231.home-slider .home-slider__body .home-slider__content {

2232 position: relative;

2233 height: 100%;

2234 display: flex;

2235 flex-direction: row;

2236 flex-wrap: wrap;

2237 align-items: center;

2238}

2239

2240.home-slider .home-slider__body .home-slider__content:before {

2241 margin-top: .7%;

2242 content: '';

2243 height: 70%;

2244 background-color: rgba(0, 0, 0, 0.35);

2245 display: block;

2246 width: 94%;

2247 position: absolute;

2248 left: 150%;

2249 top: 15%;

2250}

2251

2252@media (max-width: 1199.98px) and (orientation: portrait) {

2253 .home-slider .home-slider__body .home-slider__content:before {

2254 top: 9.5%;

2255 height: 82%;

2256 }

2257}

2258

2259@media (max-width: 575.98px) and (max-height: 550px) and (orientation: portrait) {

2260 .home-slider .home-slider__body .home-slider__content:before {

2261 top: 11.5%;

2262 height: 77%;

2263 }

2264}

2265

2266.home-slider .home-slider__body .a2 .home-slider__content:before, .home-slider .home-slider__body .a4 .home-slider__content:before {

2267 background-color: rgba(0, 0, 0, 0.4);

2268}

2269

2270.home-slider .home-slider__body .home-slider__desc {

2271 position: relative;

2272 font-weight: bold;

2273 left: 150%;

2274 color: #fff;

2275 padding: 5%;

2276 letter-spacing: .07rem;

2277 margin: 2% 3% 0;

2278 width: 90%;

2279 flex: 0 0 90%;

2280 text-align: center;

2281 display: block;

2282}

2283

2284@media (max-width: 1199.98px) and (orientation: portrait) {

2285 .home-slider .home-slider__body .home-slider__desc {

2286 padding: 0%;

2287 margin: 2% 5% 0;

2288 }

2289}

2290

2291@media (max-width: 575.98px) and (max-height: 550px) and (orientation: portrait) {

2292 .home-slider .home-slider__body .home-slider__desc {

2293 height: 69%;

2294 overflow: auto;

2295 padding: 0%;

2296 margin: 2% 5% 0;

2297 }

2298}

2299

2300.home-slider .swiper-slide-active .home-slider__content:before {

2301 left: 3%;

2302 transition: .3s;

2303 transition-delay: .40s;

2304}

2305

2306.home-slider .swiper-slide-active .home-slider__desc {

2307 left: 0;

2308 transition: .3s;

2309 transition-delay: .40s;

2310}

2311

2312.home-slider .home-slider__title {

2313 font-size: 3rem;

2314 font-weight: bold;

2315 line-height: 2.5rem;

2316 color: #fff;

2317 position: absolute;

2318 top: -.7rem;

2319 left: 0;

2320 flex: 0 0 100%;

2321 text-align: left;

2322 padding-left: 1rem;

2323}

2324

2325@media (max-width: 1199.98px) and (orientation: portrait) {

2326 .home-slider .home-slider__title {

2327 top: .3rem;

2328 font-size: 2rem;

2329 line-height: 2rem;

2330 }

2331}

2332

2333.home-slider .a1 .home-slider__title {

2334 top: -2.7rem;

2335}

2336

2337@media (max-width: 1199.98px) and (orientation: portrait) {

2338 .home-slider .a1 .home-slider__title {

2339 top: -1.1rem;

2340 line-height: 1.8rem;

2341 }

2342}

2343

2344.home-slider .home-slider__subtitle {

2345 font-size: 1.3rem;

2346 color: #000;

2347 background-color: #fff;

2348 width: auto;

2349 padding: .2rem 1rem;

2350 opacity: 0;

2351 position: absolute;

2352 right: 0;

2353 bottom: .09rem;

2354}

2355

2356@media (max-width: 1600.98px) {

2357 .home-slider .home-slider__subtitle {

2358 bottom: .06rem;

2359 }

2360}

2361

2362@media (max-width: 575.98px) {

2363 .home-slider .home-slider__subtitle {

2364 bottom: .6%;

2365 }

2366}

2367

2368.home-slider .swiper-slide-active .home-slider__subtitle {

2369 opacity: 1;

2370 transition: .5s;

2371 transition-delay: 2.9s;

2372}

2373

2374@media (min-width: 1198.98px) {

2375 .home-slider .swiper-slide-active .home-slider__subtitle {

2376 margin-top: 0;

2377 }

2378}

2379

2380@media (max-width: 1199.98px) and (orientation: portrait) {

2381 .home-slider .swiper-slide-active .home-slider__subtitle {

2382 font-weight: bold;

2383 }

2384}

2385

2386.home-slider .l1:before, .home-slider .l1:after, .home-slider .l2:before, .home-slider .l2:after, .home-slider .l3:before, .home-slider .l3:after {

2387 background: #fff;

2388 position: absolute;

2389 display: block;

2390 content: '';

2391}

2392

2393.home-slider .swiper-slide-active .l1:before {

2394 top: 15%;

2395 right: 80%;

2396 height: 2px;

2397 width: 0px;

2398 animation: l1 1.5s linear forwards;

2399 display: none;

2400}

2401

2402@keyframes l1 {

2403 from {

2404 width: 0%;

2405 }

2406 to {

2407 width: 40%;

2408 }

2409}

2410

2411.home-slider .swiper-slide-active .l1:after {

2412 height: 2px;

2413 width: 0px;

2414 animation: l1 1.5s linear forwards;

2415 top: 4%;

2416 left: 60%;

2417}

2418

2419.home-slider .swiper-slide-active .l2:before, .home-slider .swiper-slide-active .l2:after {

2420 height: 0%;

2421 width: 2px;

2422 animation: l2 1.5s linear forwards;

2423 top: 4%;

2424}

2425

2426@keyframes l2 {

2427 from {

2428 height: 0;

2429 }

2430 to {

2431 height: 95%;

2432 }

2433}

2434

2435.home-slider .swiper-slide-active .l2:after {

2436 right: 0;

2437 animation-delay: 1.5s;

2438}

2439

2440.home-slider .swiper-slide-active .l3:before, .home-slider .swiper-slide-active .l3:after {

2441 height: 2px;

2442 width: 0px;

2443 animation: l3 1.5s linear forwards;

2444 animation-delay: 1.5s;

2445 top: 99%;

2446}

2447

2448@media (min-width: 575.98px) {

2449 @keyframes l3 {

2450 from {

2451 width: 0%;

2452 }

2453 to {

2454 width: 90%;

2455 }

2456 }

2457}

2458

2459@media (max-width: 575.98px) {

2460 @keyframes l3 {

2461 from {

2462 width: 0%;

2463 }

2464 to {

2465 width: 80%;

2466 }

2467 }

2468}

2469

2470.home-slider .swiper-slide-active .l3:after {

2471 right: 0;

2472 display: none;

2473}

2474

2475.home-slider .swiper-slide-active .a1 .l1:before {

2476 display: none;

2477}

2478

2479@media (max-width: 575.98px) {

2480 @keyframes l1PL {

2481 to {

2482 width: 30%;

2483 }

2484 }

2485 @keyframes l1PLa1 {

2486 to {

2487 width: 20%;

2488 }

2489 }

2490}

2491

2492@media (min-width: 575.98px) {

2493 @keyframes l1PL {

2494 to {

2495 width: 40%;

2496 }

2497 }

2498}

2499

2500@media (max-width: 575.98px) {

2501 .home-slider .swiper-slide-active .a2 .l1:after, .home-slider .swiper-slide-active .a4 .l1:after {

2502 left: 70%;

2503 animation: l1PL 1.5s linear forwards;

2504 }

2505}

2506

2507.home-slider .swiper-slide-active .a1 .l1:after {

2508 height: 2px;

2509 animation: l1PL 1.5s linear forwards;

2510 top: 4%;

2511 left: 60%;

2512}

2513

2514@media (max-width: 575.98px) {

2515 .home-slider .swiper-slide-active .a1 .l1:after {

2516 left: 80%;

2517 animation: l1PLa1 1.5s linear forwards;

2518 }

2519}

2520

2521.home-slider .swiper-slide-active .a1 .l2:before, .home-slider .swiper-slide-active .a1 .l2:after {

2522 animation: l2PL 1.5s linear forwards;

2523 animation-delay: 0s;

2524 top: 4%;

2525}

2526

2527@keyframes l2PL {

2528 to {

2529 height: 95%;

2530 }

2531}

2532

2533.home-slider .swiper-slide-active .a1 .l2:after {

2534 animation-delay: 1.5s;

2535}

2536

2537.home-slider .swiper-slide-active .a1 .l3:before {

2538 animation: l3PL 1.5s linear forwards;

2539 animation-delay: 1.5s;

2540}

2541

2542@media (min-width: 575.98px) {

2543 @keyframes l3PL {

2544 to {

2545 width: 80%;

2546 }

2547 }

2548}

2549

2550@media (max-width: 575.98px) {

2551 @keyframes l3PL {

2552 to {

2553 width: 50%;

2554 }

2555 }

2556}

2557

2558.home-slider .swiper-slide-active .a1 .l3:after {

2559 animation: l3PL 1.5s linear forwards;

2560 animation-delay: 1.5s;

2561}

2562

2563.review {

2564 width: 100%;

2565 background-color: #EBEBEB;

2566 padding: 3rem 1rem;

2567 display: flex;

2568 flex-direction: row;

2569 flex-wrap: wrap;

2570 height: 70vh;

2571}

2572

2573.review .review__title {

2574 font-family: 'Mont-Heavy';

2575 font-size: 2.5rem;

2576 line-height: 1;

2577 text-align: center;

2578 flex: 1 0 100%;

2579 width: 100%;

2580 padding-bottom: 4rem;

2581 color: #343a40;

2582 height: 10%;

2583}