CSS File

1:root{--accent-color: #ffdb4d;--hover-accent-color: #ffe019;--border-color: #d3d3d3;--hover-border-color: #ffdb4d;--hover-border-color-2: #ff4e4f;--text-link-color: #535353;--hover-text-link-color: #ff4e4f;--hover-text-link-color-2: #f00;--border-width: 2px;--border-width-min: 2px}

2html{-webkit-box-sizing:border-box;box-sizing:border-box;scroll-behavior:smooth}

3*,*::before,*::after{-webkit-box-sizing:inherit;box-sizing:inherit}

4html,body{height:100%;margin:0;padding:0}

5body{font-family:'Arial', sans-serif;min-width:280px}

6.hide-scroll{overflow-y:hidden}

7h1,h2,h3,h4,h5,h6{margin:0}

8ul{list-style:none}

9a{text-decoration:none}

10button,input{border:none;outline:none}

11button{cursor:pointer}

12img{max-width:100%;height:auto}

13button:active{outline:none}

14.constructor{padding:60px 0 80px 0}

15.constructor-selection{padding:40px;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:40px;text-align:center}

16@media (max-width: 576px){.constructor-selection{gap:20px}

17}

18.constructor-selection.hide{z-index:-1;opacity:0;visibility:hidden;display:none}

19.constructor-selection__item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}

20.constructor-selection__img-bx{cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease;border:2px solid rgba(255,214,0,0);margin-bottom:15px;width:360px}

21@media (max-width: 576px){.constructor-selection__img-bx{margin-bottom:10px}

22}

23@media (max-width: 420px){.constructor-selection__img-bx{width:260px}

24}

25.constructor-selection__img-bx:hover{border:2px solid #ffd600}

26.constructor-selection__img{-webkit-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease;-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}

27.constructor-selection__title{padding:10px 0;color:#535353;font-weight:600}

28@media (max-width: 576px){.constructor-selection__title{font-size:14px;padding:0}

29}

30.constructor-selection__img-bx.active .constructor-selection__img{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}

31.constructor-title{text-align:center;font-size:22px;font-weight:400}

32.constructor-bx{position:relative;padding:50px 20px 30px 20px;width:100%;max-width:1560px;margin-left:auto;margin-right:auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;z-index:-1;opacity:0;visibility:hidden;position:absolute;left:0;top:0;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}

33@media (max-width: 576px){.constructor-bx{padding:30px 20px}

34}

35@media (max-width: 420px){.constructor-bx{padding:10px 0}

36}

37.constructor-bx.active{position:relative;z-index:1;opacity:1;visibility:visible}

38.constructor-bx.scroll.fixed{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}

39.canvas-wrapper{position:relative;max-width:900px;width:100%;background-color:transparent}

40.canvas-wrapper .toggle_open_doors_button{position:absolute;top:15px;left:15px;border-radius:5px;width:50px;height:50px;padding:9px 8px 8px 8px;background-color:#fafafa}

...