body { margin: 0; padding: 0; width: 100%; font-family: 'Rubik', sans-serif; background: rgba(242, 242, 242, 1); } a:link { text-decoration: none; /* Убирает подчеркивание для ссылок */ } a:visited { text-decoration: none; } a:active { text-decoration: none; } a:hover { text-decoration: none; } h1, h3, h4, h5, p { margin: 0; } h1 { font-size: 2.5em; margin-left: 84px; margin-bottom: 19px; } h1::before { content: ''; display: block; width: 24px; height: 24px; z-index: -1; position: relative; right: 10px; top: 30px; border: 2px solid rgba(228, 18, 34, 1); border-radius: 35px; /*background: rgba(228, 18, 34, 1);*/ } .text-uppercase { text-transform: uppercase; } h3, h3 a { font-weight: bold; font-size: 14px; line-height: 15px; color: #131313; } p { font-size: 13px; font-weight: 500; } .display__block { display: block; } /* HEADER */ .navbar { position: fixed; top: 0; background: rgba(242, 242, 242, 1); height: 64px; width: 100%; display: grid; grid-template-columns: 2fr 4fr 2fr; padding-top: 15px; box-shadow: 0px 4px 4px rgba(115, 115, 115, 0.25); } .menu { display: inline-block; } .menu__button { border-radius: 35px; border: 2px #131313 solid; display: none; align-items: center; justify-content: center; width: 73px; height: 30px; } .logo { margin-left: 40px; } #logo > h3 { position: relative; display: inline-block; width: 160px; bottom: 14px; left: 5px; } #logo-img { display: inline-block; width: 64px; height: 48px; background: url(../img/logo.svg) no-repeat; } .logo, .hooks, .languages { display: flex; align-items: center; } .hooks { justify-content: space-between; margin-top: 16px; } .hooks-phone { text-align: center; width: 100%; position: fixed; z-index: 1; top: 64px; background: rgba(242, 242, 242, 1); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); } .hooks-phone h3 { font-size: 1.6em; font-weight: lighter; padding-bottom: 20px; margin-top: 20px; display: block; height: auto; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); } .hooks-phone a { margin-top: 50px; } .hooks > h3, .languages > h3 { display: inline-block; } .languages { justify-content: center; padding-bottom: 15px; } .languages > h3 { margin-right: 18px; } /*MAIN*/ .main { margin-top: 134px; overflow: hidden; } .main p { margin-left: 176px; } .main h1 { margin-left: 176px; margin-top: 81px; width: 70%; } .qna { width: 500px; display: flex; justify-content: space-between; margin-left: 176px; margin-top: 52px; } .qna p { font-size: 13px; margin: 0; } /*CATALOG*/ .catalog-dl2 { background: url("../img/dl2.png") no-repeat !important; background: url("../img/dl2.webp") no-repeat !important; } .catalog-dl3 { background: url("../img/dl3.png") no-repeat !important; background: url("../img/dl3.webp") no-repeat !important; } .catalog-dl4 { background: url("../img/dl4.png") no-repeat !important; background: url("../img/dl4.webp") no-repeat !important; } .catalog { height: 650px; background: url("../img/dl1.png") no-repeat; background: url("../img/dl1.webp") no-repeat; background-size: cover !important; } @media (max-width: 1067px) { .catalogб { background-position-x: -200px !important; } } @media (max-width: 890px) { .catalog { background-position-x: -350px !important; } } @media (max-width: 703px) { .catalog { background-position-x: -450px !important; } } @media (max-width: 500px) { .catalog { background-position-x: -530px !important; } } .catalog h4 { text-align: right; font-weight: lighter; padding-top: 73px; margin-right: 80px; color: rgb(6, 6, 6); } #js-main > div.container > p, #js-main > div.container > div > p{ color: rgb(6, 6, 6); } .catalog h3, h4 { font-size: 12px; } .catalog__navbar { display: flex; justify-content: flex-end; margin-right: 58px; } .catalog__select { height: 208px; width: 450px; border: 2px solid black; border-left: none; border-right: none; margin: 50px 80px 0 auto; text-align: right; padding-left: 50px; } .catalog__select h2 { margin-top: 40px; } .display__none { display: none; transition: 3s ease; } /*WORK PROCESS*/ .work__process { margin-top: 152px; } .photos { z-index: -1; } .line__two { display: flex; margin-top: 30px; justify-content: space-between; } .line__one { max-width: 1000px; font-size: 14px; } .block { width: 250px; } .block h2 { float: left; margin: 0; } .block h3 { clear: right; padding-top: 10px; margin-left: 40px; } .block p { clear: left; margin-top: 10px; } .container { max-width: 1220px; margin-right: auto; margin-left: auto; } .photos { height: 427px; margin-top: 64px; } .photos img{ width: 100%; } /*ACHIVMENTS*/ .achievements { margin-top: 153px; } .achievements h2 { font-size: 36px; font-family: Merriweather, sans-serif; font-weight: 900; margin: 0; } .achievements p { font-size: 12px; font-family: Montserrat, sans-serif; font-weight: 500; margin-top: 13px; } .achievements__container { width: 100%; height: 308px; margin-top: 102px; display: grid; grid-template-columns: 2fr 2fr 3fr; } .coco { width: 80%; margin-left: auto; margin-right: auto; } .left__container { width: 360px; float: left; margin-right: 32px; } .left__container h2 { margin-bottom: 30px; } .left__container p { margin-top: 22px; } .center__container p { margin-bottom: 27px; width: 250px; } .margin { padding-top: 10px; margin-bottom: 20px; } .right__container p { width: 350px; } .right__container { margin-top: 18px; } .padding-top { padding-top: 8px; } .ten::before, .twenty-fourth::before, .fourth_hundred::before { font-size: 60px } .ten::before { content: '10'; margin-right: 10px; } .twenty-fourth::before { content: '24'; margin-right: 10px; } .fourth_hundred::before { content: '400+' } .blanks__container { z-index: -1; height: 0; display: flex; justify-content: center; align-items: center; position: relative; top: 190px; left: auto; } .blank { height: 356px; width: 252px; background-color: white; box-shadow: rgba(0, 0, 0, 0.25) 0 4px 12px; border-radius: 5px; transform: rotate(10deg); position: relative; } .first__blank { z-index: -2; } .second__blank { z-index: -1; bottom: 340px; left: 10px; } .third__blank { bottom: 680px; left: 20px; } /*CONTACTS*/ .contacts { margin-top: 127px; clear: left; display: flex; width: 100%; height: 635px; } .map { width: 50%; height: 636px; background: rgba(186, 186, 186, 1); } .contacts__container { margin-left: 0; padding-left: 90px; margin-right: 70px; } .contacts__container h1 { margin: 0 0 0 5px; } .contacts__container h3 { font-size: 24px; font-weight: 500; color: rgba(19, 19, 19, 1); margin-top: 58px; } .contacts__container p { font-size: 14px; white-space: pre-line; font-weight: 500; color: rgba(85, 85, 85, 1); margin: 16px 0 0; width: 100%; } /*LABLE DESIGN*/ .lables { position: absolute; z-index: -1; display: flex; justify-content: flex-end; right: 150px; } .lable__plate { position: relative; background: rgba(255, 255, 255, 1); border-radius: 5px; width: 356px; height: 252px; display: grid; grid-template-areas: "a b c d" "e f g h"; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25); } .lable { background: rgba(231, 231, 231, 1); border-radius: 5px; width: 68px; height: 102px; margin-top: 10px; margin-left: 10px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25); } .lable__red { background: rgba(228, 18, 34, 1); } .first { top: 32px; transform: rotate(-13.61deg); } .second { z-index: -1; transform: rotate(27.94deg); top:130px; left: 125px; } .third { z-index: -2; transform: rotate(5.09deg); left: 465px; } .lable__container { z-index: -1; float: right; display: flex; justify-content: end; width: 300px; height: 0; } .und__container { position: relative; bottom: 250px; z-index: -1; } .red__first, .red__second, .red__third { position: relative; } .red__first { transform: rotate(-13.61deg); } .red__second { z-index: -1; transform: rotate(30deg); left: 80px; bottom: 20px; } .red__third { z-index: -2; transform: rotate(-30deg); bottom: 30px; } /*FIGURE*/ .figure { position: relative; width: 70px; height: 200px; margin: 50px 300px 0 auto; /* margin-right: 300px; margin-top: 50px; margin-left: auto;*/ } .elipse__2 { position: relative; width: 64px; height: 64px; left: 74px; top: 10px; border: 2px solid #E41222; border-radius: 35px; z-index: -1; } .arrow { transform: rotate(90deg); position: absolute; left: 50px; z-index: -1; } .vector__1 { width: 116px; height: 2px; background: black; } .vector__2 { width: 50px; height: 50px; color: black; font-size: 35px; top: -19px; left: 103px; position: absolute; } /* BUTTONS */ a > h3:hover { cursor: pointer; color: #E41222; } .catalog__button { padding: 0 10px 0 10px; height: 30px; background: rgba(242, 242, 242, 1); border-radius: 35px; margin-right: 22px; margin-top: 73px; display: flex; align-items: center; justify-content: center; box-shadow: rgba(115, 115, 115, 0.25) 0 4px 4px; } .catalog__button:hover { box-shadow: rgba(115, 115, 115, 0.25) 0 4px 8px; cursor: pointer; } .btn-active { background-color: rgba(228, 18, 34, 1); } .btn-active h3 { color: white; } .btn__block { display: flex; justify-content: center; } /*ADAPTIVE*/ @media (max-width: 1200px) { .achievements__container { width: 100%; height: 1000px; margin-top: 102px; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr 1fr; } .left__container, .center__container, .right__container { /*width: 100%;*/ display: inline-block; margin-left: auto; margin-right: auto; width: 400px; text-align: center; } .center__container p, .right__container p { margin-right: auto; margin-left: auto; } .blanks__container { top: -80px; } .line__two { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; } .flex__container { display: flex; justify-content: center; } #logo h3 { display: none; } .navbar { grid-template-columns: 1fr 3fr 1fr; } .contacts__container { margin-left: 20px; padding-left: 0; text-align: left; margin-right: 0; } .contacts { justify-content: normal; } .contacts__container p { width: 130px; } .line__one { margin-left: 90px; } .menu { display: inline-block; } } @media (max-width: 800px) { .hooks { display: none; } .logo { display: none; } .menu { margin-left: 80px; padding-top: 16px; } .menu__button { display: flex; } /*.main p {*/ /* margin-left: 84px;*/ /*}*/ .main h1 { margin-left: 84px; margin-top: 81px; width: 70%; } .qna { width: 500px; display: flex; justify-content: space-between; margin-left: 84px; margin-top: 52px; margin-bottom: 30px; } .figure { display: none; } .lables { right: 0; overflow: hidden; height: 480px; padding-top: 20px; } .line__two { display: grid; grid-template-columns: 1fr ; grid-template-rows: 1fr 1fr 1fr 1fr; } .flex__container { justify-content: flex-start; margin-left: 90px; } .left__container, .center__container, .right__container { text-align: left; } .center__container p, .right__container p { margin-right: 0; margin-left: 0; } .contacts { display: block; } .map { width: 100%; height: 450px; } .photos { height: 217px; } .achievements { margin-top: 53px; } .achievements__container { margin-top: 0; } .line__one { width: 400px; } .work__process { margin-top: 32px; } .left__container, .center__container, .right__container { display: inline-block; margin-left: 84px; margin-right: 0; width: 400px; text-align: left; } .contacts__container { margin-left: 84px; margin-top: 20px; } .btn__block { display: grid; grid-template-areas: 'up' 'down'; } #second-btn { width: 43px; grid-area: up; margin-left: auto; position: relative; left: 33px; } #first-btn { grid-area: down; margin-right: 10px; } #second-btn { grid-area: up; margin-right: 10px; } #third-btn { grid-area: up; } #fourth-btn { grid-area: down; } .catalog__button { height: 30px; margin: 10px 0px 0 auto; } #js-main { z-index: -2; } .navbar { z-index: 2; margin-top: 0; top: 0; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); grid-template-columns: 3fr 1fr; position: fixed; padding: 0; } .languages { padding: 0; } } @media (max-width: 600px) { .contacts { margin-top: 210px; } .contacts__container h3 { margin-top: 50px; } h1 { margin-left: 50px; } .main h1 { margin-left: 50px; } .main p { margin-left: 40px; } .qna { margin-left: 50px; } .und__container { position: relative; bottom: -10px; left: 20px; } .achievements__container p { width: 250px; } .qna p { width: 350px; padding-right: 50px; /*margin-right: 100px;*/ margin: 0; } .catalog__select { width: 350px; height: auto; padding-bottom: 40px; } .line__one { width: 300px; } .left__container, .center__container, .right__container { display: inline-block; margin-left: 84px; width: 250px; } .map { margin-top: 185px; } .catalog h4, .catalog__select, .catalog__navbar { margin-right: 10px; } .menu { margin-left: 20px; } .languages { height: 20px; justify-content: flex-end; margin-right: 10px; } .languages > h3 { margin-top: 40px; } } @media (max-width: 400px) { .catalog__select { width: 250px; } h1 { font-size: 1.3em; } h1::before { width: 12px; height: 12px; top: 15px; left: -7px; } .line__one { width: 250px; margin-right: 0; margin-left: 40px; } .flex__container { justify-content: flex-start; margin-left: 40px; } .left__container, .center__container, .right__container, .contacts__container { margin-left: 40px; } .contacts__container { width: auto; } .contacts__container h1 { width: 200px; } .und__container { left: 80px; } .blanks__container { display: none; } .qna { display: block; } .qna p { width: 240px; margin-left: 0; margin-top: 10px; } } @media (min-width: 800px) { .und__container { left: 160px; } } @media (min-width: 1200px) { .und__container{ left: 300px; } } @media (min-width: 1650px) { h1 { margin-left: 214px; } } @media (min-width: 1862px) { h1 { margin-left: 314px; } } @media (min-width: 2148px) { h1 { margin-left: 414px; } } @media (min-width: 2560px) { h1 { margin-left: 514px; } }