@font-face { font-family: Montserrat-bold; src: url(font/Montserrat-Bold.ttf); } @font-face { font-family: Montserrat-regular; src: url(font/Montserrat-Regular.ttf); } @font-face { font-family: Roboto; src: url(font/Roboto.ttf); } @font-face { font-family: Merriweather-bold; src: url(font/Merriweather-Bold.ttf); } @font-face { font-family: Merriweather-regular; src: url(font/Merriweather-Regular.ttf); } @font-face { font-family: Play; src: url(font/Play-Regular.ttf); } @font-face { font-family: Play-bold; src: url(font/Play-Bold.ttf); } a { text-decoration: none; } body { margin: 0; font-family: sans-serif; color: #2a2a2a; background-color: #fff; } .UpBorder2 {/*Полоска черная сверху*/ height: 48px; position: absolute; right: 0px; left: 0px; top: 0px; background-color: #1e1e1e; } .text2 { margin-top: 14px; color: #ffffff; font-family: Montserrat-medium; font-size: 16px; display: inline-block; } #TextLux2 { margin-left: 12.5%; } #Contacts2 { margin-left: 50%; } #Help2 { margin-left: 5%; } img { display: block; max-width: 100%; height: auto; } /*Основные дивы*/ .main_div{ display: flex; padding-top: 40px; } .text_catalog{ font-family: Roboto; font-size: 20px; color: #868686; font-weight: 500; } #text_catalog{ font-size: 24px; color: #222222; font-weight: bold; text-decoration: underline; } .catalog{ margin-left: 12%; width: 140%; margin-top: 3%; } #catalog_two{ width: 210%; } /* область каталога */ .section { padding-top: 3.5%; padding-bottom: 3.5%; background-color: #c8cad3; } .section__heading { margin-top: 0; margin-bottom: 16px; color: #fff; } /* область контента */ .container { max-width: 100%; padding-left: 1%; } /* грид */ .grid { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; } .grid__item { flex-basis: calc(90% / 4 - 20px); min-width: 200px; margin-right: 8px; margin-left: 8px; margin-bottom: 16px; } /* область товаров */ .product { position: relative; padding: 16px; border-radius: 4px; background-color: #fff; box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12); } .product__name { margin-top: 0; margin-bottom: 8px; } .product__button { position: absolute; top: 5px; right: 5px; } /* кнопки на товарах */ .button { display: inline-flex; flex-shrink: 0; align-items: center; padding: 10px 18px; border: none; border-radius: 4px; font-family: Roboto; font-size: 16px; box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); cursor: pointer; } .button_str{ margin-top: 3%; display: flex; justify-content: center; } .str_int{ border: none; background-color: #ffffff; width: 50px; height: 50px; font-family: Roboto; font-weight: bold; font-size: 20px; margin-left: 1%; margin-right: 1%; } .str_int:hover{ background-color: #222222; color: #fff; cursor: pointer; } .str_int:active{ background-color: #fff; color: #fff; } #button_on_tovars{ border-radius: 100%; } #str_int_main{ background-color: #222222; color: #fff; margin-right: 1%; } #str_int_main:hover{ background-color: #fff; color: #222; cursor: pointer; } #str_int_main:active{ background-color: #222; color: #fff; }